SlideShare a Scribd company logo
Blog Hacks 2011
   Kamakura.pm Techtalk #01
          yusukebe
Blog Hacks 2011
Blog Hacks 2011
Back to
YAPC::Asia 2010
I said




         Photo by ya-ko http://ya-ko.com/blog/
Blog Hacks




 by naoya and miyagawa
2004   2011
Blog Hacks 2011
“Blog                 Blogging
            Hack
        ” on Blog Hacks (2004)
Blog
MovableType




Blosxom Perl   ...
Blog Hacks 2011
Hack#01 CSS Framework
• Grid Layout
• Reset
• Font
  Blog
I love Bluetrip!

  Simple Markup
  24-column grid
An empty starter kit
  Cool font style
Markup with Bluetrip
<div class="container">
  <div id="header" class="span-24 large fancy">
    <h1>Welcome!</h1>
  </div>
  <hr />
  <div id="wrapper" class="span-24">
    <div id="content" class="span-17 colborder">
       <h2>This is h2 title.</h2>
       <p>
         description...
       </p>
    </div>
    <div id="side" class="span-6 last">
       <h3 class="thin">Side menu</h3>
    </div>
  </div>
  <hr class="space" />
  <div id="footer" class="span-24">
    <hr />
    <address>Here is footer</address>
  </div>
</div>
Blog Hacks 2011
Hack#02   iPhone
use Media Queries
/* 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; }
}
Blog Hacks 2011
Blog Hacks 2011
Hack#03 YouTube
Blog Hacks 2011
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
    });
}
Blog Hacks 2011
Blog Hacks 2011
Hack#04
Perl
MovableType



                           Mova
                               bleTy
                                     pe Plu
                                            gin
    pre
 Text::VimColor




          Text::VimColor        CSS
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!<pre.*?>(.+?)</pre>!igms;
    for my $code (@codes) {
        my $syntax = Text::VimColor->new(
            string    => decode_entities($code),
            filetype => 'perl'
        );
        my $new_code = $syntax->html;
        $text =~ s/Q$codeE/$new_code/;
    }
    return $text;
}

1;
Blog Hacks 2011
Blog Hacks 2011
Hack#05 pubsubhubbub
pubsubhubbub
AnyE
              ven t::Fee
                         d




         AnyE
             vent::
                    HTTP
pubsubhubbub
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: $errorn";
            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
Blog Hacks 2011
★DISQUS
★Facebook
★Blosxom CMS
★          Blog
Enjoy Hacking Blog
      and ...
“Keep on Blogging”
       by

More Related Content

What's hot (20)

PDF
PerlでWeb API入門
Yusuke Wada
 
ODP
Perl5i
Marcos Rebelo
 
PDF
Inside Bokete: Web Application with Mojolicious and others
Yusuke Wada
 
KEY
Mojo as a_client
Marcus Ramberg
 
PDF
Developing apps using Perl
Anatoly Sharifulin
 
PDF
Perl web frameworks
diego_k
 
PPTX
Webrtc mojo
bpmedley
 
ODP
Mojolicious on Steroids
Tudor Constantin
 
ZIP
Web Apps in Perl - HTTP 101
hendrikvb
 
KEY
Mojolicious - A new hope
Marcus Ramberg
 
PDF
Mojolicious. Веб в коробке!
Anatoly Sharifulin
 
PDF
Mojolicious, real-time web framework
taggg
 
PDF
20 modules i haven't yet talked about
Tatsuhiko Miyagawa
 
PDF
Asynchronous programming patterns in Perl
deepfountainconsulting
 
PPTX
16.mysql stored procedures in laravel
Razvan Raducanu, PhD
 
PDF
Decoupling Objects With Standard Interfaces
Thomas Weinert
 
PPT
Slim RedBeanPHP and Knockout
Vic Metcalfe
 
PDF
Building Modern and Secure PHP Applications – Codementor Office Hours with Be...
Arc & Codementor
 
KEY
Keeping it small: Getting to know the Slim micro framework
Jeremy Kendall
 
PDF
Add loop shortcode
Peter Baylies
 
PerlでWeb API入門
Yusuke Wada
 
Inside Bokete: Web Application with Mojolicious and others
Yusuke Wada
 
Mojo as a_client
Marcus Ramberg
 
Developing apps using Perl
Anatoly Sharifulin
 
Perl web frameworks
diego_k
 
Webrtc mojo
bpmedley
 
Mojolicious on Steroids
Tudor Constantin
 
Web Apps in Perl - HTTP 101
hendrikvb
 
Mojolicious - A new hope
Marcus Ramberg
 
Mojolicious. Веб в коробке!
Anatoly Sharifulin
 
Mojolicious, real-time web framework
taggg
 
20 modules i haven't yet talked about
Tatsuhiko Miyagawa
 
Asynchronous programming patterns in Perl
deepfountainconsulting
 
16.mysql stored procedures in laravel
Razvan Raducanu, PhD
 
Decoupling Objects With Standard Interfaces
Thomas Weinert
 
Slim RedBeanPHP and Knockout
Vic Metcalfe
 
Building Modern and Secure PHP Applications – Codementor Office Hours with Be...
Arc & Codementor
 
Keeping it small: Getting to know the Slim micro framework
Jeremy Kendall
 
Add loop shortcode
Peter Baylies
 

Similar to Blog Hacks 2011 (20)

KEY
The Devil and HTML5
Myles Braithwaite
 
PDF
On Web Browsers
Hajime Morrita
 
PDF
The web context
Dan Phiffer
 
PDF
Html5 training
James VanDyke
 
KEY
Webapp security testing
Tomas Doran
 
KEY
Webapp security testing
Tomas Doran
 
PDF
面向测试的前端知识
chencheng 云谦
 
PDF
TurboGears2 Pluggable Applications
Alessandro Molina
 
PDF
워드프레스Wordpress 제대로 파기
co-pen co-work company
 
PDF
[heweb11] HTML5 Makeover
Christopher Schmitt
 
PDF
Movable Type 5.1 : Webテクノロジーセミナー札幌
Six Apart KK
 
PPTX
HTML Training Course in Persian
Abbas Naderi
 
PDF
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
PDF
Killing the Angle Bracket
jnewmanux
 
PDF
[edUi] HTML5 Workshop
Christopher Schmitt
 
PDF
WebShell - confoo 2011 - sean coates
Bachkoutou Toutou
 
PDF
MTDDC Nagoya 201104
Jun Kaneko
 
KEY
REST teori og praksis; REST in theory and practice
hamnis
 
PDF
Attractive HTML5~開発者の視点から~
Sho Ito
 
PDF
HTML5 소개 및 배우기- HTML5 Open Conference
Channy Yun
 
The Devil and HTML5
Myles Braithwaite
 
On Web Browsers
Hajime Morrita
 
The web context
Dan Phiffer
 
Html5 training
James VanDyke
 
Webapp security testing
Tomas Doran
 
Webapp security testing
Tomas Doran
 
面向测试的前端知识
chencheng 云谦
 
TurboGears2 Pluggable Applications
Alessandro Molina
 
워드프레스Wordpress 제대로 파기
co-pen co-work company
 
[heweb11] HTML5 Makeover
Christopher Schmitt
 
Movable Type 5.1 : Webテクノロジーセミナー札幌
Six Apart KK
 
HTML Training Course in Persian
Abbas Naderi
 
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
Killing the Angle Bracket
jnewmanux
 
[edUi] HTML5 Workshop
Christopher Schmitt
 
WebShell - confoo 2011 - sean coates
Bachkoutou Toutou
 
MTDDC Nagoya 201104
Jun Kaneko
 
REST teori og praksis; REST in theory and practice
hamnis
 
Attractive HTML5~開発者の視点から~
Sho Ito
 
HTML5 소개 및 배우기- HTML5 Open Conference
Channy Yun
 

More from Yusuke Wada (20)

PDF
僕がつくった 70個のうちの48個のWebサービス達
Yusuke Wada
 
PDF
スッとGoを取り入れる
Yusuke Wada
 
PDF
東京脱出計画中
Yusuke Wada
 
PDF
Extreme remote working
Yusuke Wada
 
PDF
Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN
Yusuke Wada
 
PDF
創造のプロセスを回せ!v0.01
Yusuke Wada
 
PDF
It's not only about "REMOTE"
Yusuke Wada
 
PDF
事故からはじまるスケールチャンス
Yusuke Wada
 
PDF
Google BigQueryを使ってみた!
Yusuke Wada
 
PDF
Webサービスのコンテンツパターン 或いはデータの活⽤
Yusuke Wada
 
PDF
とある Perl Monger の働き方
Yusuke Wada
 
PDF
5 minutes - YAPC::Asia Tokyo 2014
Yusuke Wada
 
PDF
Podcastをカジュアルに 支える技術
Yusuke Wada
 
PDF
The master plan of scaling a web application
Yusuke Wada
 
PDF
そのWebサービスは本当に「あたりまえ」だったのか?
Yusuke Wada
 
PDF
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
 
PDF
10 things to learn from Bokete
Yusuke Wada
 
PDF
僕らの履歴書
Yusuke Wada
 
PDF
僕らがWebサービスをつくる5つの理由
Yusuke Wada
 
PDF
僕らがつくるための 「5W」について
Yusuke Wada
 
僕がつくった 70個のうちの48個のWebサービス達
Yusuke Wada
 
スッとGoを取り入れる
Yusuke Wada
 
東京脱出計画中
Yusuke Wada
 
Extreme remote working
Yusuke Wada
 
Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN
Yusuke Wada
 
創造のプロセスを回せ!v0.01
Yusuke Wada
 
It's not only about "REMOTE"
Yusuke Wada
 
事故からはじまるスケールチャンス
Yusuke Wada
 
Google BigQueryを使ってみた!
Yusuke Wada
 
Webサービスのコンテンツパターン 或いはデータの活⽤
Yusuke Wada
 
とある Perl Monger の働き方
Yusuke Wada
 
5 minutes - YAPC::Asia Tokyo 2014
Yusuke Wada
 
Podcastをカジュアルに 支える技術
Yusuke Wada
 
The master plan of scaling a web application
Yusuke Wada
 
そのWebサービスは本当に「あたりまえ」だったのか?
Yusuke Wada
 
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
 
10 things to learn from Bokete
Yusuke Wada
 
僕らの履歴書
Yusuke Wada
 
僕らがWebサービスをつくる5つの理由
Yusuke Wada
 
僕らがつくるための 「5W」について
Yusuke Wada
 

Recently uploaded (20)

PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PDF
The Future of Artificial Intelligence (AI)
Mukul
 
PDF
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
PPTX
The Future of AI & Machine Learning.pptx
pritsen4700
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
Market Insight : ETH Dominance Returns
CIFDAQ
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
Per Axbom: The spectacular lies of maps
Nexer Digital
 
PDF
Make GenAI investments go further with the Dell AI Factory
Principled Technologies
 
PDF
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PDF
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
PPTX
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
PDF
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
The Future of Artificial Intelligence (AI)
Mukul
 
TrustArc Webinar - Navigating Data Privacy in LATAM: Laws, Trends, and Compli...
TrustArc
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
The Future of AI & Machine Learning.pptx
pritsen4700
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
Market Insight : ETH Dominance Returns
CIFDAQ
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Per Axbom: The spectacular lies of maps
Nexer Digital
 
Make GenAI investments go further with the Dell AI Factory
Principled Technologies
 
NewMind AI Weekly Chronicles – July’25, Week III
NewMind AI
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
How ETL Control Logic Keeps Your Pipelines Safe and Reliable.pdf
Stryv Solutions Pvt. Ltd.
 

Blog Hacks 2011

  • 1. Blog Hacks 2011 Kamakura.pm Techtalk #01 yusukebe
  • 5. I said Photo by ya-ko http://ya-ko.com/blog/
  • 6. Blog Hacks by naoya and miyagawa
  • 7. 2004 2011
  • 8. Blog Hacks 2011 “Blog Blogging Hack ” on Blog Hacks (2004)
  • 13. • Grid Layout • Reset • Font Blog
  • 14. I love Bluetrip! Simple Markup 24-column grid An empty starter kit Cool font style
  • 16. <div class="container"> <div id="header" class="span-24 large fancy"> <h1>Welcome!</h1> </div> <hr /> <div id="wrapper" class="span-24"> <div id="content" class="span-17 colborder"> <h2>This is h2 title.</h2> <p> description... </p> </div> <div id="side" class="span-6 last"> <h3 class="thin">Side menu</h3> </div> </div> <hr class="space" /> <div id="footer" class="span-24"> <hr /> <address>Here is footer</address> </div> </div>
  • 18. Hack#02 iPhone
  • 20. /* 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; } }
  • 25. YouTube Data API JW Player
  • 26. 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); });
  • 27. 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 }); }
  • 31. MovableType Mova bleTy pe Plu gin pre Text::VimColor Text::VimColor CSS
  • 32. 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!<pre.*?>(.+?)</pre>!igms; for my $code (@codes) { my $syntax = Text::VimColor->new( string => decode_entities($code), filetype => 'perl' ); my $new_code = $syntax->html; $text =~ s/Q$codeE/$new_code/; } return $text; } 1;
  • 37. AnyE ven t::Fee d AnyE vent:: HTTP pubsubhubbub
  • 38. 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: $errorn"; return; } publish_pings(); } ); $cv->recv;
  • 39. 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