Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Yusuke Wada, profile picture
Uploaded byYusuke Wada
2,688 views

Blog Hacks 2011

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.

Technology◦
Downloaded 20 times
Blog Hacks 2011 Kamakura.pm Techtalk #01 yusukebe
Back to YAPC::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
MovableType Blosxom Perl ...
Hack#01 CSS Framework
• Grid Layout • Reset • Font Blog
I love Bluetrip! Simple Markup 24-column grid An 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="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>
Hack#02 iPhone
use Media Queries
/* 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; } }
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,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); });
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 }); }
Hack#04 Perl
MovableType Mova bleTy pe Plu gin pre Text::VimColor Text::VimColor CSS
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;
Hack#05 pubsubhubbub
pubsubhubbub
AnyE ven t::Fee d AnyE vent:: HTTP pubsubhubbub
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;
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
★DISQUS ★Facebook ★Blosxom CMS ★ Blog
Enjoy Hacking Blog and ...
“Keep on Blogging” by