• Like
Blog Hacks 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Blog Hacks 2011

  • 4,451 views
Published

Happy Blog Hacks in 2011. …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,451
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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