Blog Hacks 2011
•
6 likes•2,671 views
This document summarizes blog hacking techniques from 2004 to 2011. It provides 5 hacks including using a CSS framework for layout and styling, media queries for responsive design, embedding YouTube videos, syntax highlighting for code snippets, and using pubsubhubbub for real-time updates. The document encourages continuing to blog and have fun exploring new methods.
Report
Share
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)
- 9. Blog
- 10. MovableType Blosxom Perl ...
- 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; } }
- 23. Hack#03 YouTube
- 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 }); }
- 30. Hack#04 Perl
- 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;
- 36. pubsubhubbub
- 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
- 41. ★DISQUS ★Facebook ★Blosxom CMS ★ Blog
- 42. Enjoy Hacking Blog and ...
- 43. “Keep on Blogging” by