0
Blog Hacks 2011   Kamakura.pm Techtalk #01          yusukebe
Back toYAPC::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
MovableTypeBlosxom Perl   ...
Hack#01 CSS Framework
• Grid Layout• Reset• Font  Blog
I love Bluetrip!  Simple Markup  24-column gridAn 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="wrap...
Hack#02   iPhone
use Media Queries
/* media queries */@media only screen and (max-width: 479px) {    body { margin: 1.5em; }    #header h1 { font-size: 200% ...
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,fun...
function play(list){    jwplayer(player).setup({        flashplayer: player.swf,        id: playerID,        width: 950,  ...
Hack#04Perl
MovableType                           Mova                               bleTy                                     pe Plu ...
package MT::Plugin::VimColor;use Text::VimColor;use HTML::Entities qw/decode_entities/;use MT::Template::Context;MT::Templ...
Hack#05 pubsubhubbub
pubsubhubbub
AnyE              ven t::Fee                         d         AnyE             vent::                    HTTPpubsubhubbub
use URI::Escape;use AnyEvent;use AnyEvent::HTTP;use AnyEvent::Feed;my $cv           = AnyEvent->condvar;my $feed_reader = ...
sub publish_pings {    my %form = (         "hub.mode" => publish,         "hub.url" => yourfeedurl,    );    my $body = j...
★DISQUS★Facebook★Blosxom CMS★          Blog
Enjoy Hacking Blog      and ...
“Keep on Blogging”       by
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Blog Hacks 2011
Upcoming SlideShare
Loading in...5
×

Blog Hacks 2011

4,623

Published on

Happy Blog Hacks in 2011.
A presentation at Kamakura.pm techtalk#01
http://atnd.org/events/12129

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,623
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Blog Hacks 2011"

  1. 1. Blog Hacks 2011 Kamakura.pm Techtalk #01 yusukebe
  2. 2. Back toYAPC::Asia 2010
  3. 3. I said Photo by ya-ko http://ya-ko.com/blog/
  4. 4. Blog Hacks by naoya and miyagawa
  5. 5. 2004 2011
  6. 6. Blog Hacks 2011“Blog Blogging Hack ” on Blog Hacks (2004)
  7. 7. Blog
  8. 8. MovableTypeBlosxom Perl ...
  9. 9. Hack#01 CSS Framework
  10. 10. • Grid Layout• Reset• Font Blog
  11. 11. I love Bluetrip! Simple Markup 24-column gridAn empty starter kit Cool font style
  12. 12. Markup with Bluetrip
  13. 13. <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>
  14. 14. Hack#02 iPhone
  15. 15. use Media Queries
  16. 16. /* 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; }}
  17. 17. Hack#03 YouTube
  18. 18. YouTube Data API JW Player
  19. 19. 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);});
  20. 20. 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 });}
  21. 21. Hack#04Perl
  22. 22. MovableType Mova bleTy pe Plu gin pre Text::VimColor Text::VimColor CSS
  23. 23. 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;
  24. 24. Hack#05 pubsubhubbub
  25. 25. pubsubhubbub
  26. 26. AnyE ven t::Fee d AnyE vent:: HTTPpubsubhubbub
  27. 27. 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;
  28. 28. 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
  29. 29. ★DISQUS★Facebook★Blosxom CMS★ Blog
  30. 30. Enjoy Hacking Blog and ...
  31. 31. “Keep on Blogging” by
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×