zuzara » Create

Built a tiny website that shows iPhone apps featured in @TechCrunch

Nobu — Fri, 03 Feb 2012 20:58:27 +0000

This website shows bunch of iPhone apps that are featured in TechCrunch. Top 25 apps on App Store is usually filled by games but those are not very attractive to me. TechCrunch writes about iPhone apps which were made by brand new startups, and I like to check them out. So, to check those apps easily here’s this website.

A Chrome Extension: Keyboard Shortcuts for Facebook

Nobu — Wed, 21 Sep 2011 08:07:27 +0000

The Chrome extension provides Gmail like keyboard shortcuts for Facebook. Currently it supports:

j: down one item on your News Feed
k: up
u: jump to the top

Thanks!

keyboard icons

Slanted tabular menu with CSS3

Nobu — Sun, 31 Jul 2011 01:08:27 +0000

Some of variables are hard coded. To make it flexible, you may want to use JavaScript. The demo is a vertical menu, but making a horizontal menu shouldn’t be difficult.


    menu1


    menu2

div.slant {
    width: 150px;
    height: 100px;
    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
    background: gold;
}
div.contents {
    -moz-transform: matrix(1, 0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, 0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, 0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, 0.2, 0, 1, 0, 0);
         transform: matrix(1, 0.2, 0, 1, 0, 0);
    background: transparent;
    padding-top: 20px;
}
div.first {
    background: gold;
    position: relative;
    top: -15px;
    min-height: 30px;
    padding: 0;
}
div.second {
     background: brown;
}

Demo. CSS reference.

Grabio: A Twitter Bio Update Notifier

Nobu — Wed, 27 Jul 2011 06:17:10 +0000

Grabio sends notifications via email when your followings update their bio on Twitter. I’ve collaborated with @Tbakdesigns through Builditwith.me.

In my experience, people update their bio when something big happened. I’m following more than 100 people and to be honest, I check quite rarely. But I would like to know their big updates like started a new company, moved to somewhere or found another hobby. So, Grabio is here.

It is a dead simple application, just signup with Twitter account and enter your email address. You won’t get more than an email per a day. The contents of notifications would look like an output of ‘diff’ command.

Check Grabio out

Extracting thumbs-up tracks on Pandora, paste into Spotify playlist

Nobu — Sun, 24 Jul 2011 01:34:27 +0000

Finally, Spotify is here in US. Pandora's endless recommendation works pretty well, but sometimes I would love to listen to one particular artist songs or one song repeatedly. It seems there's no way to export bookmarked songs on Pandora to anywhere, so made it.

Download Pandora-to-Spotify Google Chrome Extension

You need to use Google Chrome, may the latest version is required, simply download and install it with click the above link.

After that, let’s access your Pandora station page. The address looks like this: www.pandora.com/stations/1df87ce…random… You’ll find ‘Thumbed-up Tracks’ on that page. You may want to click ‘show all’ button. Then, hit the extension icon (I picked a brown bowl with chopsticks icon randomly). Probably most of tracks you thumbed-up will be extracted and converted to pastable Spotify formatted text. Finally, copy on the extension’s popup (Cmd-C if you use Mac) and paste (Cmd-V) on your playlist on Spotify. Of course, you need to run Spotify and create a playlist by yourself.

Unfortunately, there’s no bookmark page or something your bookmarked songs gathered, so need to access each station page respectively.

Hope it works and makes your music life even more fun.

Source code: https://github.com/zuzara/Pandora-To-Spotify

Update:
Right, it’s not easy to find a way to access the station pages. Here’s a hint. Hit ‘options’ then choose ‘Edit’. You’ll probably get a popup block alart. Allow to open a popup on pandora.com. You can also access the station page through ‘Your Profile’ link. Unluckily, you can’t hit the extension icon on the popup because it doesn’t have Chrome’s navigation bar at all… Please copy its URL and open with another tab.

Update 7/30:
Here we go! The extension is on Chrome Webstore now.
Thanks for contributing, Brian

And, yes, Lifehacker gave me a link to this article.

Update 9/21:
Now it supports Pandora’s new UI. You’ll find your stations here.

Update 11/18:
Supports extracting tracks from Bookmarks/Likes page respectively.

Facebook Connect for Chrome Extension

Nobu — Fri, 11 Feb 2011 20:09:28 +0000

Unfortunately, Facebook JavaScript SDK doesn’t work on Chrome Extension because an extension is working with “chrome-extension://” protocol. Google provides a tutorial for using OAuth, but it seems there’s an easier way which is explained by Facebook.

You can download source code from Github.

SweetCatcher for Skype is now on github

Nobu — Sun, 06 Jun 2010 19:39:36 +0000

One year ago I released SweetCatcher for Skype. Now it is on github. I haven’t had any chances to upgrade it, but it might be worth to be open source. You can use a normal icon instead of the lovely heart one.

SweetCatcher is using some codes from SkypeAPITest which is provided by Skype. I couldn’t find a license for SkypeAPITest, but it seems it’s under public license (I found a repository on github that includes SkypeAPITest).

jQuery plugin for Twitter OAuth via popup window (Facebook style)

Nobu — Sun, 16 May 2010 02:37:06 +0000

Disqus and some applications are using Twitter OAuth, but their user flow is not sequential single window process. A child window comes up, then it shows twitter.com and user can click Deny/Allow through that popup. When the user hits the deny or allow button, the popup will be closed immediately and the parent window will be reloaded. I couldn’t find a jQuery plugin for that, so wrote a tiny one.

Updates:
Current Twitter shows ‘Authorize app’ and ‘No, thanks’ button respectively instead of Deny/Allow.

When you make a complete script, you may want to use PHP with PECL_OAuth. (% pecl install oauth-beta)

Here are sample files:
index.php


session_start();
?>


Twitter OAuth via popup






print_r($_SESSION);
?>


Sign Out

connect.php


define('TWITTER_CONSUMER_KEY',      '***');
define('TWITTER_CONSUMER_SECRET',   '***');
define('TWITTER_REQUEST_URL',       'https://api.twitter.com/oauth/request_token');
define('TWITTER_ACCESS_URL',        'https://api.twitter.com/oauth/access_token');
define('TWITTER_AUTHORIZE_URL',     'https://api.twitter.com/oauth/authorize');
 
session_start();
if (!isset($_SESSION['twitter'])) {
    setOAuth();
    $_SESSION['twitter'] = getUserInfo($_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
}
 
function setOAuth()
{
    //  pecl_oauth
    $oauth = new OAuth(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, OAUTH_SIG_METHOD_HMACSHA1, OAUTH_AUTH_TYPE_FORM);
    $oauth->enableDebug();
    try {
        if (isset($_GET['oauth_token'], $_SESSION['oauth_token_secret'])) {
            $oauth->setToken($_GET['oauth_token'], $_SESSION['oauth_token_secret']);
            $accessToken = $oauth->getAccessToken(TWITTER_ACCESS_URL);
            $_SESSION['oauth_token'] = $accessToken['oauth_token'];
            $_SESSION['oauth_token_secret'] = $accessToken['oauth_token_secret'];
 
            $response = $oauth->getLastResponse();
            parse_str($response, $get);
            if (!isset($get['user_id'])) {
                throw new Exception('Authentication failed.');
            }
        } else {
            $requestToken = $oauth->getRequestToken(TWITTER_REQUEST_URL);
            $_SESSION['oauth_token_secret'] = $requestToken['oauth_token_secret'];
            header('Location: ' . TWITTER_AUTHORIZE_URL . '?oauth_token=' . $requestToken['oauth_token']);
            die();
        }
    } catch (Exception $e) {
        var_dump($oauth->debugInfo);
        die($e->getMessage());
    }
}
 
function getUserInfo($token, $secret)
{
    $oauth = new OAuth(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, OAUTH_SIG_METHOD_HMACSHA1, OAUTH_AUTH_TYPE_URI);
    $oauth->setToken($token, $secret);
    $oauth->fetch('http://twitter.com/account/verify_credentials.json');
    $buf = $oauth->getLastResponse();
    return json_decode($buf, true);
}
 
?>


Connect

signout.php


session_start();
session_destroy();
header('Location: index.php');
exit;

Hope it helps

Bracket auto completion in vim for PHPer

Nobu — Tue, 26 Jan 2010 04:11:39 +0000

I used to use this setting in .vimrc:

inoremap \( (
inoremap ( ()<LEFT>

But escape bracket every time for

second\(first();

is a little bit stressful. (typed “first()”, then move to the head of the line, typing “second”, back slash and bracket)

Here is an improved script:

function! CompleteDetachedBracket()
    let line = line('.')
    let col = col('.')
    let c = getline(".")[col(".")]
    execute "normal \<RIGHT>%"
    if c == "$"
        execute "normal 2wi)"
    elseif line != line('.') || col != col('.')
        execute "normal a)"
    else
        execute "normal a)"
        startinsert
    endif
endfunction
inoremap ( (<ESC>:call CompleteDetachedBracket()

This is the first time to code vim script for me. I was guessing vim script is a weird language, so have avoided long time. But at least coding small one is not so difficult than I thought. Documentation is very organized. There are many sample codes in your .vim/plugin directory. Not like a GUI programming, but still like a Tetris. It maybe just because of the first time, I think it’s pretty fun.

Complete working sample for Services_Twitter OAuth in PHP PEAR

Nobu — Wed, 20 Jan 2010 21:59:38 +0000

You can get some sample codes for Services_Twitter with OAuth from php doc, but it’s not a complete code. I rewrote some parts.

% pear install --alldeps Services_Twitter-alpha


if (isset($_GET['clear'])) { // sometimes you need to clear session, just access ?clear=1
    session_start();
    $_SESSION = array();
    session_destroy();
    die('session has been cleared.');
}
 
 
define('CONSUMER_KEY', '***');
define('CONSUMER_SECRET', '***');
 
 
require_once 'Services/Twitter.php';
require_once 'HTTP/OAuth/Consumer.php';
 
try {
    session_start();
 
    if (isset($_SESSION['token2'], $_SESSION['token_secret2'])) {
        $twitter = new Services_Twitter;
        $oauth = new HTTP_OAuth_Consumer(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['token2'], $_SESSION['token_secret2']);
        $twitter->setOAuth($oauth);
        print_r($twitter->statuses->home_timeline());
 
    } else if (isset($_SESSION['token'], $_SESSION['token_secret'], $_GET['oauth_verifier'])) {
        $twitter = new Services_Twitter;
        $oauth = new HTTP_OAuth_Consumer(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION['token'], $_SESSION['token_secret']);
        $oauth->getAccessToken('http://twitter.com/oauth/access_token', $_GET['oauth_verifier']);
        $twitter->setOAuth($oauth);
 
        $_SESSION['token2'] = $oauth->getToken();
        $_SESSION['token_secret2'] = $oauth->getTokenSecret();
 
        $msg = $twitter->statuses->update("I'm coding with PEAR right now!");
        print_r($msg);
 
    } else {
        $oauth = new HTTP_OAuth_Consumer(CONSUMER_KEY, CONSUMER_SECRET);
        $oauth->getRequestToken('http://twitter.com/oauth/request_token', 'http://zuzara.com/twitter_oauth.php'); // callback URL should be the same as that you registered at http://twitter.com/apps/new
 
        $_SESSION['token']        = $oauth->getToken();
        $_SESSION['token_secret'] = $oauth->getTokenSecret();
 
        $url = $oauth->getAuthorizeUrl('http://twitter.com/oauth/authorize');
 
        http_redirect($url); // function from pecl_http
    }
 
} catch (Exception $e) {
    echo $e->getMessage();
}

ref.
Getting 401 on Twitter OAuth POST requests