Mandula

- web, development, business

I'm a ruby/merb developer from Sheffield, UK. Mandula is a blog about every aspect of web development, from requirements gathering, design, development, testing and deployment. You can catch me on Twitter at @MandulaHQ

James's profile »

Twitter

November 4, 2009

Adding your Twitter feed to your Posterous sidebar

Posterous a simple and elegant blogging solution. That's why I use it. And.. because I'm too lazy to install, maintain and customise my own Wordpress site (other blogging engines are available).

But after doing some minor customisation of a default theme I wanted to find a way of embedding my Twitter feed into the sidebar. As there is not direct way for doing this I used the following method to embed the standard Twitter widget.

Requirements: a Posterous account, a Twitter account, some external hosting, basic knowledge of HTML.

Firstly, create a Twitter widget using Twitter's widget creator. I chose to create a Profile Widget

To make it easier to embed enable auto-width on the dimensions panel.

Once you're done creating and customising your widget click Finish & Grab code. Copy the code from the box.

Now create a HTML file like the following, pasting the code you just copied under , replacing the code between the <body> tags:

Now upload this to your web host. As this is just a static file, I've used Amazon S3. Cheap and reliable. Check the file works outside of Posterous before you continue. The final step is embedding the widget into your sidebar. Log into Posterous and then Edit Settings > Theme and customize my site. In Advanced add the following code into {block:ListSidebar} (changing http://my-web-host.com/twitter.html to the location of your file). :

You may have to adjust the size of the iframe to stop scrolling. If you want to add your twitter feed to individual post pages as well you need to add the above text to {block:ShowSidebar}

Preview and save your changes.

Sleep well at night knowing people are slightly less likely to miss your tweets.

Filed under // embed iframe posterous twitter

Comments [13]

November 2, 2009

JS and CSS optimisation with ruby-yui and Merb

I'm not one for spending time applying micro-optimisation to code, but when it's relatively simple and potentially improves the user-experience I'm willing to give it a try.

I recently worked on a complex Merb site with a large amount of CSS and JS. With the client complaining of sluggish page load times I invested some time in exploring the results of Yahoo's YSlow plugin for Firebug. I started with optimising the filesize of the Javascript and CSS.

Merb's asset helpers already has built in bundling, which is a step in the right direction (reducing the number of HTTP requests):

This takes the three specified CSS files and bundles them all into one file called "app_bundle.css". This syntax can also be used for bundling JS. Note, by default assets are not bundled in development, meaning all three files will be included when testing. If you want to enable bundling in any environment set :bundle_assets in the Merb config to true:

However, this simply concatenates all the files together - maintaining the file structure and whitespace. To further optimise we can minify the contents of the files. For this I use Cory ODaniel's ruby-yui gem, which wraps Yahoo's YUI Java command line compressor. To apply this to our bundled files we add callback to the asset bundler. Add the following code to your init.rb file:

This overwrites the bundled file with the compressed format, saving bandwidth and reducing HTTP requests! Good, right?

Caveats:

Be careful with your bundled CSS. I've found that bundling invalid CSS can cause rendering problems in Safari that don't appear unbundled in Safari but still render fine in Firefox. The solution is obviously ensuring all your CSS is valid, but I think it's worth noting.

Remeber, ruby-yui is just a wrapper for the Java command line YUI compressor. Deploying to a live server without Java installed means no compression! (now, who would make that kind of mistake?)

Enabling Gzip on static files achieves a similar goal for the CSS files, but the minification reduces the size of the JS by replacing variable and function names with shorter names (amongst other things), something Gzip can't do.