Blog Hacks 2011

5,136 views
5,029 views

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
5,136
On SlideShare
0
From Embeds
0
Number of Embeds
1,017
Actions
Shares
0
Downloads
16
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×