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.

1. Blog Hacks 2011
Kamakura.pm Techtalk #01
yusukebe

4. Back to
YAPC::Asia 2010

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 ...

12. Hack#01 CSS Framework

13. • Grid Layout
• Reset
• Font
Blog

14. I love Bluetrip!
Simple Markup
24-column grid
An empty starter kit
Cool font style

15. Markup with Bluetrip

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

19. use Media Queries

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;

35. Hack#05 pubsubhubbub

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