Click here to load reader

Blog Hacks 2011

  • View
    5.344

  • Download
    0

Embed Size (px)

Text of Blog Hacks 2011

  • Blog Hacks 2011Kamakura.pm Techtalk #01

    yusukebe

  • Back toYAPC::Asia 2010

  • Photo by ya-ko http://ya-ko.com/blog/

    Blog

    I said

  • Blog Hacks

    by naoya and miyagawa

  • 2004 2011

  • BlogBloggingHack on Blog Hacks (2004)

    Blog Hacks 2011

  • Blog

  • MovableType

    BlosxomPerl...

  • CSSHack

  • Hack#01 CSS Framework

  • Blog

    Grid Layout Reset Font

  • I love Bluetrip!

    Simple Markup24-column grid

    An empty starter kitCool font style

  • Markup with Bluetrip

  • Welcome! This is h2 title. description... Side menu Here is footer

  • Result!

  • Hack#02 iPhone

  • use Media QueriesCSS

  • /* media queries */@media only screen and (max-width: 479px) { body { margin: 1.5em; } #header h1 { font-size: 200% } #content { font-size: 170%;line-height: 1.5em; } pre { overflow:auto; }}

  • Result!

  • JavaScriptHack

  • Hack#03 YouTube

  • YouTube Data API

    JW Player

  • var url = 'http://gdata.youtube.com/feeds/api/videos?' + 'author=yusukebe&v=2&alt=jsonc&callback=?';

    $.getJSON(url,function(json){ var playlist = new Array(); $.each(json.data.items,function(){ var video = { file : 'http://www.youtube.com/watch?v=' + this.id, title : this.title, description : this.description }; playlist.push(video); }); play(playlist);});

  • function play(list){ jwplayer('player').setup({ 'flashplayer': 'player.swf', 'id': 'playerID', 'width': '950', 'height': '400', 'playlist.position': 'right', 'playlist.size': '440', 'controlbar': 'bottom', 'playlist': list });}

  • Result!

  • PerlMovableTypeHack

  • Hack#04 Perl

  • MovableType

    preText::VimColor

    Text::VimColorCSS

    MovableType Plugin

  • package MT::Plugin::VimColor;use Text::VimColor;use HTML::Entities qw/decode_entities/;use MT::Template::Context;

    MT::Template::Context->add_global_filter(vim_color => &highlight );

    sub highlight { my $text = shift; my @codes = $text =~ m!(.+?)!igms; for my $code (@codes) { my $syntax = Text::VimColor->new( string => decode_entities($code), filetype => 'perl' ); my $new_code = $syntax->html; $text =~ s/\Q$code\E/$new_code/; } return $text;}

    1;

  • Result!

  • BlogHack

  • Hack#05 pubsubhubbub

  • pubsubhubbub

  • pubsubhubbub

    AnyEvent::Feed

    AnyEvent::HTTP

  • use URI::Escape;use AnyEvent;use AnyEvent::HTTP;use AnyEvent::Feed;my $cv = AnyEvent->condvar;my $feed_reader = AnyEvent::Feed->new( url => 'yourfeedurl', interval => 10, on_fetch => sub { my ( $feed_reader, $new_entries, $feed, $error ) = @_; if ( defined $error ) { warn "ERROR: $error\n"; return; } publish_pings(); });$cv->recv;

  • sub publish_pings { my %form = ( "hub.mode" => 'publish', "hub.url" => 'yourfeedurl', ); my $body = join "&", map { "$_=" . URI::Escape::uri_escape( $form{$_} ) } keys %form; for my $hub ( qw( http://pubsubhubbub.appspot.com )) { http_post $hub, $body, sub { warn "$hub:$_[1]->{Status}"; } }}

    ref: http://github.com/miyagawa/cpan-realtime-bot

  • Result!

  • Hack

    DISQUSFacebookBlosxomCMSBlog

  • Enjoy Hacking Blogand ...

  • Keep on Bloggingby