2010 was a good web year

Ending the year in little more than 24 hours, a bit of reflection. This year was full of exciting web stuff. I hope 2011 will be that productive and engaging. In this post some highlights of my 2010 blog and web work.. I actually started to grow into blogging later this year, around August. I try to share interesting web design/ programming topics at least once a week, sometimes it's hard, but looking at the frequency of the posts now vs. a year ago, I am quite satisfied.

I started using Wordpress in March. It was love at first sight. I like the interface a lot. I played with it quite some time now, I even had to do a migration of another blog.

I started, as many, with a blog separately from my homepage. So I installed the source under /blog, but as I started blogging more intensively, having a homepage (portfolio) and a blog as different instances (and designs) became unacceptable. It took me a bit to accept this change but I felt it should be done, and now I don't want to go back anymore ;) Moreover, it gave me the chance to design my first Wordpress theme, the "bamboo theme". The result is what you are seeing here.

You can also see what it was before in my post about the remake of my site. Some neat CSS tricks come from Dan Cederholm's brilliant book Handcrafted CSS. Rounded corner, typography, subtle input box and text shadows.. Or for example, the parallax scrolling effect: resize the browser window and the bamboos in the header start to move. It's done with one simple CSS rule: background: #1b393b url("i/header.jpg.gif") repeat-x -80% 0; See also silverbackapp and this complete tutorial on the subject. Still to be posted: how to make your own WP theme..

Late August I finally (!) joined the Twitter community. I started to add weekly spotlight posts (inspired on the Sitepoint podcast's "host spotlights"). As this costs quite some work and technology just moves too fast I got inspired by Aarron Walter's blog that takes a digest of his twitter. I went looking around and found this Wordpress plugin.

I completed lili designs, sauces autoescuela and waterdrinker architects, each having its own flavor and end-user requirements.

Just two months ago I released sharemovi.es, a redesign from a movie site I started in 09, but now I wanted to add the social dimension so I started playing with the Facebook API. You can share movie opinions after logging in with Facebook. It is still quite basic (it was born 'just playing around' as we web folks tend to do!).
Somewhere next year I will pick it up again. I also involved a bit of twitter's API: each new movie review gets pushed to @sharemovies

I added one category, nothing to do with web design: productivity.

I played a bit with mobile site design. I tried gmbhnews and mobify. They save you a lot of time and you benefit from specialized mobile web products. However in Wordpress there seems to be a plugin for everything, also for mobile device detection/ site conversion. Check out some other favorite WP plugins I am using.

I wish you all a splendid 2011, with lots of interesting work + learning and above all health, inspiration and fun. Keep on sharing the good stuff!

Twitter API: tweet with PHP

Today's web is about sharing. My facebook API / movie experiment Sharemovi.es is up and running. It needs some tweaking but bit by bit..  What I did find important was a live stream. Of course you can go the old-school route of mail updates, but today updates are more efficient via facebook and twitter.

As I played already with the facebook API, today it was time to do some research on Twitter's API. Purpose: push new movie reviews to twitter! This way people can follow sharemovies and they get new movies automatically pushed into their stream. (Updates on the app are however posted to facebook via the activity stream)

There are some tutorials that suggest this method:

<?php
include '../../twitter.php';
$message = 'New movie ...';
$url = 'http://twitter.com/statuses/update.xml';
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
if (empty($buffer)) {
 echo "error!";
} else {
 echo 'success!';
}

.. but this method does not work anymore because twitter is now using Oauth.

So I followed this helpful article:

1. Register an app: http://dev.twitter.com/apps/new. This is quite common; Facebook asks the same.
You need the read & write permissions to post to your twitter account

2. You get 4 API keys. Download the Abraham Twitter OAuth class to connect to twitter using OAuth and fill in the keys.

3. including “OAuth.php”  and “twitteroauth.php” the rest is easy

File tweet.php

<?php
$consumerKey    = '<insert your consumer key';
$consumerSecret = '<insert your consumer secret>';
$oAuthToken     = '<insert your access token>';
$oAuthSecret    = '<insert your token secret>';
require_once('twitteroauth.php');
// twitteroauth.php points to OAuth.php
// all files are in the same dir
// create a new instance
$tweet = new TwitterOAuth($consumerKey, $consumerSecret, $oAuthToken, $oAuthSecret);
 ?>
This makes the twitter instance which you can use to post updates to your stream (the user account that registers the app, is used to post the updates to!) :
// post to twitter
include 'tweet.php';  // the file where the tweet instance is created
$statusMessage = 'Movie added: '.$title. ' -> ' . $message;
$tweet->post('statuses/update', array('status' => $statusMessage));

So when adding this bit of code at the point where somebody adds a movie, it posts the new title + URL to the @sharemovies twitter account. Following this user and you get updated about new movies in your twitter stream :)

[caption id="attachment_622" align="alignnone" width="480" caption="Create your Movie stream with twitter API"]Movie stream[/caption]

I probably deploy the same with Facebook over time, but it is always good to play with various technologies.

10 great WP plugins

Let's share some interesting Wordpress plugins I am using. WP plugins save time, add useful features and are easy to add/ delete.  Whatever functionality you need, it seems somebody wrote some WP code! The following plugins are just some of my favorites. Let me know of any other cool plugins..

  1. Page Links To lets you add a page without content, but with a link to another site. This is ideal for linking to facebook or other social media sites. I just used it to link to the mobile version of my site (see navigation above and click the "mobile" tab)

  2. The contact form on my site is made with Contact Form 7. It integrates JS validation so you only have to add some CSS rules for styling. The back-end customization is great. If you want to use a Captcha to eliminate spam you need to have this plugin as well.
  3. For comments I use Disqus. Make an account and people can leave a comment with their twitter/facebook handle, etc. You have a dashboard where you can approve and reply to comments. Also the styling integrated perfectly with my theme.
  4. To keep an eye on site visits I use Google Analyticator. It shows your stats in your WP dashboard. It also takes care of adding the Google Analytics API key to your pages/ posts.
  5. For search I use Lijit. You can integrate it with your current search box in WP and it gives you a really nice overlay when searching. Try it yourself typing anything in the search box in the sidebar at the right. You can integrate it with twitter so that your tweets are searched in parallel.
  6. Maybe you have seen weekly "Tweet Digest" recently. With the twitter digest plugins you can collect your tweets of the past week and automatically publish them as a blog post. It doesn't seem to have a "Save draft" option so if you want to filter tweets (and I tend to do that to only leave the most relevant ones for this blog), you should check around the publish day/time or use the "Ping Twitter" button in the options menu.
  7. To show the websites I made, I use the WordPress Portfolio Plugin. Make sure your database user has the "create" permission, because, as many WP plugins, it stores data in a newly generated table in your WP database. It's a nice plugin that integrates paging and let's you easily order your works. Check it out clicking "Work" in the top navigation menu.
  8. Adios comment spam! Askimet does a great job blocking spam comments. Fill in an API key and you're ready to go. You can perfectly use it with Disqus (see 3.) as well.
  9. Social media are one of the best ways to share your content and (!) let your audience share via some buttons that are easily detectable. There are many options here, I use socialize and sexy bookmarks. Get that content out there! By the way, ping.fm is a time-saver if you want to push new blog posts to multiple social media at once.
  10. Last best: I discovered wp Time Machine just this week. It lets you backup your WP blog to a cloud service as Dropbox. See this post for more info ..

Yii: awesome php framework

Yii is a fast, secure and professional PHP Framework. The performance chart is indeed quite impressive. According to the homepage, Yii is using a "lazy loading technique": basically include a functionality (create object) not earlier than strictly needed. Yii is also very complete in its feature set.

Compared with other PHP frameworks ..

This following comparison with other frameworks shows Yii has it all:

Why is it awesome?

Yii is quite similar to Ruby on Rails: MVC (model-view-controller) structure, ActiveRecord, CLI integration (yiic) to make the app structure, CRUD (create, read, update, delete aka scaffold), strong support for testing (unit/ fixtures), AJAX.

Of course, as any framework, there is a learning curve and you need to feel comfortable with OOP (object oriented programming). I can already see development time decreasing in the near future:

  • Extensive support for model/ CRUD support with Gii (see printscreen below)
  • Support for complicated database structures. Once setup the relations in the Model, no need for typing complicated SQL joins :D
  • Authentication (role based), form captchas and more features, all built in from the start.

I am still in the exploring phase, but this is quite something, isn't it?

[caption id="attachment_583" align="alignnone" width="622" caption="Gii code generator at work"]gii code generator[/caption]

Resources to get you going with Yii

yii php framework

Sneak preview: sharemovies

I am quite excited to announce a personal application I am working on. It's called sharemovies. It allows you to review, comment and rate movies. I think we all like certain kinds of movies and often we get movies recommended from others. Hence "share movies"!

I have always been a big fan of movies. And as you know I am passionate about web design and programming, so the idea to combine the two came up early. About a year ago I made a complete design for a movie sharing site, but it wasn't ready for serious implementation.

Here is how it looked:

[caption id="attachment_549" align="alignnone" width="600" caption=""my movies" was born back in 2009 already"]my movies idea was born back in 2009[/caption]

This looked quite ok, but there were two issues (apart from a lack of time) that didn't get me to publish it earlier:

- How to get some basic movie info without doing it manually? An aesthetic point, but hey.. a movie site needs at least movie poster thumbs or is that just me?

- How to make it social? As you can see the intention was to put my movies in there and allow people to comment and rate. But wait.. often friends tell me how awesome a particular movie is and "you really need to go see it". So why not a multi-user app?

... then there was facebook, its social plugins and, not less important, some nice ways get movie info.

Movie info

I found a cool script that gets movie data: imdb grabber. Another nifty way to get movie info is via the facebook graph. For example if we put in IMDB's URL of Inception into graph.facebook..., like this: https://graph.facebook.com/?ids=http://www.imdb.com/title/tt1375666/, we get an array in return:

{
   "http://www.imdb.com/title/tt1375666/": {
      "id": "110935752279118",
      "name": "Inception (2010)",
      "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs867.snc4/71156_110935752279118_1973266_s.jpg",
      "link": "http://www.imdb.com/title/tt1375666/",
      "category": "Movie",
      "website": "http://www.imdb.com/title/tt1375666/",
      "description": "Directed by Christopher Nolan. With Leonardo DiCaprio,
Joseph Gordon-Levitt, Ellen Page, Ken Watanabe.",
      "fan_count": 38985
   }
}

.. which you can process with file_get_contents(). or curl

Facebook

Some time ago Facebook introduced the Like button. It gives facebook registered users the opportunity to vote for certain content. This is becoming as relevant today as Google's page rank it seems. We see the buttons all over the web and you better have them on your site as well!

There are however more plugins available. For sharemovies, I use the facebook login and the comment plugin. Facebook login is a secure login (SSL) and permits both you as the Programmer and mr./mrs. User to fully control access to the app and personal data. It's transparent for both parties, it's really a nice piece of work. The facebook API takes a bit of practice at the start, but once you are set it's really cool and I didn't even scratch the surface here. The comments plugin is a second time-saver: logged-in user comments are listed with the user's avatar and can be shared to one's wall.

Result

sharemovies homepage

.. and logged in:

From here on ..

The app is currently being tested. Hopefully I have a beta version by the end of the month. If you are interested to give it a try, leave me a comment or email me at info at sharemovi dot es

The importance of semantic markup and css

Two important rules to get a good design: semantic markup and css!

1. Semantic markup means you apply html in a way that makes sense. In the early days everything was marked up with tables, but was all data presented really tabular? No! Navigation items make more sense being unordered lists (<ul>) of list items (<li>), there are important headlines (<h1>) vs less important ones (<h2> .. <h6>), and a banner wrapped in a h1 tag has extra meaning by adding an id of "logo".

All this makes that elements are more specific and css styling easier. Application data gets more informative so that microformats (much like XML) allow for sharing vcards and calendars across applications. At last be a little more verbose when coding html, for example adding title, alt and rel attributes, may help impaired users to get a better web experience (text instead of images, screenreaders, etc.). The list goes on. Andy Clark has some good video trainings dedicated to this, and Transcendent CSS is one of the best books regarding this aspect, web design in general and CSS. I just read that Andy released a new title

2. CSS separates content from style. A device without CSS support can see the core content, and we then apply CSS to make a page more attractive and visually ordered. CSS is also a great designer's tool: instead of fixed mockups in Photoshop it is way more flexible: you want to swap two columns? Edit a stylesheet rule, in PS you would have to draw new rectangulars and save the file again for web.

CSS has strong support for liquid (%) and float designs, I can't imagine how Photoshop could ever give you that much flexibility to play with your mockup. CSS3 supports nice new features as text shadow, rounded corners, rgba colors and a lot more. The most important aspect is this: keep style and structure separated to warrant flexible design.

With these two important points in mind we can quickly expand upon a basic structure and how you would start with CSS. I am still defining my ideal framework but there are some parts in the below example I have become to adopt with most new projects.

Semantic markup and CSS in action

3. This will be a quick example of something I am working on. It merely serves as an example and should be enhanced ..

<!-- A.header file -->
<head>
.. css files, title, meta tags, etc.
</head>
<body>
  <div id="content">
    <div id="header">
       <h1 id="logo">
         <a href="index.php">Site's brand</a>
       </h1>
       <div id="loginWrapper">
       ..
       </div><!--end loginWrapper-->
       <ul id="navigation">
         <li>..</li>
         <li>..</li>
        ..
      </ul><!-- end navigation -->
      ... another div with search box ...
    <div><!--end header-->

<!-- B. main content -->
     <div id="maincontent">
         .. .. where all stuff of the page happens. you can make more divs here.
               you can also use 960 grids, etc. Usually I tend to keep it simple and
               use 2 or 3 columns: main / sidebar, or: leftCol/ innerCol/ rightCol
     <div id="main">
         ..
     </div> <!-- end main -->

         $$ variable content $$ ** all before and after this line is included as part
         of a templating system

     <div id="sidebar">
        ..
     </div><!-- end sidebar -->
   </div><!-- end maincontent -->
<!-- C. footer content -->
     <div id="footer">
       ..
     </div><!-- end footer -->
  </div><!-- end content -->
  ..javascript files (at the end of page to ease the pain of potential JS delays)
</body>
</html>

Layout

4. Basic layout. I always start with a css reset to eliminate any inconsistencies across browsers. It is a brilliant solution to make a clean start.
Then I set some basic rules, usually I decide if I go with fixed width and what type

/*general rules*/

body {font : 75%/1.5 "Lucida Grande", Helvetica, "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 /*width: 980px; */ margin: 0 auto;  color:#333; ackground-color:#4b373a; }
li {list-style: none; float: left; padding: 5px 10px; }
a {  text-decoration: none; color: #900; }
a:hover {  text-decoration: none; color: #600; }
p{ line-height: 1.2em;}

etc. .. (/* width: 980px; */ would be uncommented if you go for a fixed width, I found 980px on Apple's site, it's a good size, although 960px is commonly used as well)

A logo respecting back-to-home link and SEO

The banner usually makes me feel there is some progress, so I like to add it soon, but as style on top of a h1 called #logo (<h1 id="logo">). This is a good SEO trick I learned from Aarron Walter in his Building Findable Websites. Keep in mind that <h1> together with <title> are the most important SEO elements on the page.

Markup

<h1 id="logo">
 <a href="index.php">Brand of site</a>
 </h1>

CSS

/*logo*/

h1#logo {position: absolute; top:0px; width: 980px; height: 109px; z-index:89;
 background:url('../i/banner.jpg') no-repeat; }
h1#logo a {display: block; text-indent: -9999px; width: 980px; height: 109px;}

As you see we have a h1 with an anchor linking back to homepage. Then you bounce the text off the page placing it -9999 px to the left and on top (a higher z-index stacks content, how higher the value, how higher up in the stack).

Then some layout. You can get some random lipsum text to full in the divs to see how it lines out. I tend to use CSS' border: 1px solid red to see what I am working on:

#header, #footer, #mainContent, #content {border: 1px solid red;}

.. at the end you can just delete this rule.

Also I had to clear out some padding that slipped in probably due to the plugins I am using (with its included CSS)

 .. other stylesheets, usually delivered by jquery plugins I tend to use ..
 <link rel="stylesheet" href="css/base.css" type="text/css" />

3 tips

1. Make sure your css sheet comes last. I didn't do that and lost some precious time searching in my correct base.css to find out that a stylesheet that was included after base.css, introduced an undesired style. Include base.css as last stylesheet. It prevents headaches ;)

2. Use the firefox Web developer tool bar -> Information -> Display Element Information to inspect individual divs for children / parents, etc. It's a wonderful tool to keep track where you are and how the markup is organized.

3. Think about the layout before CSS-ing. You have a myriad of possibilities: floats, liquid layout, fixed pixel widths, all define a sites identity (like color). A framework like 960 grid system might help you (with fixed layouts), but it also introduces more code and might obscure certain aspects (inherent to frameworks, however you can save quite some time). I can dedicate many more posts to CSS ..

Conclusion

To make a long story short, today I really wanted to share the importance of becoming aware of proper markup and use of CSS for styling your page. Without CSS a page should be still readable and good markup should describe what the element means on the page. It also should improve accessibility to the underlying content, both for people with more difficulty to access your content as well as search engines and microformats that allow export of vcards and hcalendars to external apps.

Secondly the CSS: without proper markup it becomes difficult if not impossible to have an economic and flexible stylesheet. I think we all came to a point once we got lost in our own CSS' specificity. You set up so many rules drilling deeper in a wood of divs and classes, not seeing the trees anymore.

.. "huh? why is that link not changing color when styling that anchor" ..

Good semantic markup gives you the bare essential to start laying out your site with CSS. Use semantic markup and CSS to the advantage of your users, customers and (of course) for your own quality of work !

Your mobile site in 2 min, without being a techie!

Today more and more people browse the web via a mobile device. This means for each new design we need to take into account how the design looks on such a device. There are many ways to do this. CSS is highly flexible so using percentage widths and floats, content drops when the screen size becomes smaller. Cool.. but budget, time and knowledge don't always allow to make a second investment for a mobile version. That's where mobilize tools come into play.

In August I posted about Mobify, a tool to roll your own mobile version selecting the divs from your site and style them. This took some time but had the advantage of being highly customizable. Today I show the other way around: a more standard way that is much faster and simpler. You can have a mobile version online in only 2 minutes without doing geeky stuff. Meet GMBHnews, a tool designed to create a mobile version of your site based on its RSS feed.

Why should I use this?

Compare these two mobile versions and it should be clear that it's not just an afterthought to tweak a little and give our visitors a chance to read our content better:

[caption id="attachment_479" align="alignleft" width="295" caption="design intact but lot of scrolling required"]no mobile[/caption]

[caption id="attachment_480" align="alignleft" width="293" caption="content is better viewable this way"]yes mobile[/caption]

Howto

So to start off you need a feed URL. If you use Wordpress, you have this already set up, if not you can roll your own, there are plenty of manuals available, for example this one. Then you simply sign up and you get an unique URL assigned, mine is http://www.gmbhnews.com/view/Personal-website-of-Bob-Belderbos.html. After clicking the "mobilize now" button, you are presented with a code snippet you can put in the header of your site. It will redirect all mobile traffic to your GMBHnews URL. The structure of you mobile site looks like Google reader, see some printscreens below: you have the titles you can toggle open.

[caption id="attachment_484" align="aligncenter" width="630" caption="some printscreens of gmbhnews"]some printscreens of gmbhnews[/caption]

Strengths and weaknesses

So playing with this last week, I found some advantages / disadvantages:

Advantages
-It is simple and fast: sign up with your RSS feed and you're done. Put the snippet in your page, and routing goes automatically, detecting if a mobile device browses your site. I only tested it with iphone and the redirect works after putting the snippet in my footer (I prefer to put JS in the footer to gain performance). In case of my customized Wordpress theme I had to create a hook to add the code to my footer:

 // mobile version gmbh
function childtheme_gmbh() { ?>
<script type="text/javascript">
(function(){var c=navigator.userAgent
.. .. 
browser detection code ..
a.href="h
http://www.gmbhnews.com/view/Personal-website-of-Bob-Belderbos.html?i=COMR

.. .. </script> <?php } add_action('wp_footer', 'childtheme_gmbh');
-It's RSS-based. New content will be displayed instantly on your mobilized site. No manual updating required.

-Social media integration. People can vote your site sharing it on twitter or facebook. Hopefully this will be integrated on a per-article-basis, but in my case, having the share buttons below the articles, they are visible anyway.

-Your blog will be included in GMBHnews. This might generate more traffic to your site. You can host various blogs/ RSS feeds. This is an advantage for big companies with hundreds of blogs/ feeds. Visit GMBHnews for examples.

-You can monetize the traffic with adsense or private custom ads. This is interesting for site owners as well as publishers.

- One solution for a great variety of mobile devices. Sign up once and done. The simplicity of the standard template makes it quite robust. No compatibility nightmares if you'd go with a customized design, you're all set. And I think that with mobile devices the focus is on content, it's just a matter what comes first when screen real estate is (severely) limited.

-SEO friendly structure of the site URLs to gain additional traffic: it respects title + description + keywords and google likes that


Disadvantages
:
-It's one standard design, you cannot customize its look nor feel with CSS. If you want the same look as your site, choose a more specialized way. If you want that you could use Mobify which let you select divs and play with the underlying CSS. This is not for techies that like to play with their design, load a separate stylesheet and do your any nifty CSS stuff
For anybody who wants to go with an advanced solution, you might check out O'Reilly's HTML5 Mobile Web Development

-It's RSS-based. If you don't have a blog but a portfolio with photos, this text-based service is probably not for you.

-I had some issues with smileys displaying too big and images not showing up, maybe a linking issue. Also I had some issues with the social media buttons. I guess, as the app is still in Beta phase, this will be all sorted out in future releases.. As I am using this solution for now, any issue I report to support. I tend to get a quick and helpful response.

-Unlike other services it's free for 30 days (trial) then you'll have to pay a monthly fee, starting at $ 9/month. It's not expensive though, if you start to monetize your site you can earn it back and even more.

Conclusion

If you are a CSS ninja that wants to have his/her mobile counterpart look the same, don't try this. If you want to manage various blogs and you want to recognize the mobile browsing market-share, but without loosing much time, this might be an interesting option for you.

I like it as a quick solution right now, and the upcoming web makes this quite a valuable service. However, personally I like to hack so I think in the end I will come up with a customized html5/css solution. The problem is that it will cost extra time and effort.

As there is a free trial, you don't loose anything by signing up and trying it yourself. Let me know what you think ...

Increase productivity by 3+ times

In this information-overloaded age, knowing about productivity has become even more important. In this post I'll outline 5 ways to enhance your efficiency. I firmly believe that you can gain 3+ times more results by applying these principles.

I got my inspiration from reading self-development books and listening to influential speakers. You will find links to some of them. I might dedicate future posts to more specific info for each principle. Here we go ..

1. Set goals / divide into tasks / get started

Setting goals is an extremely powerful tool. Set ambitious but realistic goals and just get started. Divide the goals into pieces/ tasks.  Set 2 or 3 important goals (or tasks if the goals are big) for the day, preferably the night before to have more motivation to get up (early) in the morning.
Don't open you mail first thing in the morning and start working on your goals (email might be a tool in some cases, but it often causes interruptions, see 3.). The power of less (by Leo Babauta, see also 5.) explains this in more detail and it is an interesting read for anybody who wants to achieve more in life.

2. Unclutter / 80-20 rule / parkinson: set deadlines

Use the Pareto principle to filter out the 20% that carries 80% of the weight. This can be 10/90 depending the situation. This often applies to customers: 3 big customers generate 80+ % of the revenue, but you can express it in time as well: we might loose 80% of the time to 20% of the added value. We need to turn it upside-down: identify the 20% of time/activities that create 80% of the value.
Use the ley of Parkinson to set deadlines. You'll be amazed what you can achieve if you have a limited time to do it, it forces you to make decisions and to FOCUS. We all have had tight deadlines, but isn't it when we become most efficient? To some extend: less time to do it the more you identify the 20% that really matters. More on these principles and improving productivity, can be found in Timothy Ferriss' the 4 hour workweek and in (audio)books of Brian Tracey and Jim Rohn

3. No distractions / 25 min work <-> 5 min break / bundle interruptions

Turn off email, twitter, facebook, or unplug the Internet if possible. Small things like mail-client alerts and chat popups are the worst, but easiest to eliminate. It's best to do email and social media rounds in batches. The Pomodoro technique can help you, because you'll work in blocks of 25 min (so called 'pomodoros') with 5 min breaks. I learned about it on Benny Lewis' interesting language learning blog. As concentration decreases over time (and refreshes with only a short break), 25 min is a reasonable time.
Interruptions are the worst enemy for being efficient. It requires a lot of discipline to accumulate them all to one block or batch and handle them at once. However, keep in mind that 25 min of "flow" (a state where we forget our surroundings and purely focus on the task at hand) is easily worth 1 or 2 hours of interrupted work. Do the maths and we have the 3+ of the blog title. Personally turning on music is a great way for me to get into the flow, but you might have other tools.

4. We are not designed to multitask

It's the hardest one I think. Multitasking is tricky, because we think that we are more effective by doing it. Our brains however are not a multi-threaded CPU. We designed computers to do heavy, repetitious tasks, all at once. Our brains are quite the opposite: many of our tasks are rather intuitive and require hard human thinking. Solution: work on one task at the time, short break, go with the next task. Even though you change every 15 min, the important thing is to work linear not in parallel. If you finished the task reward yourself with some tweets, mails, stretching or a good coffee. See also: Multi-Tasking is Bad For Your Brain.

5. Get up early / advantages of the morning

.. even if it's only one hour earlier. Of course there are people that are more productive at night, I was once.. There are quite some advantages though. Leo Babauta expresses it very well in 10 Benefits of Rising Early, and How to Do It: the morning rise is one of the greatest moments of the day, less distractions, no rush and it's a great feeling having achieved 1 or more important tasks early in the day.

Update 21.02.2016

I just wrote a follow up post.

New website design

It always takes some time to accept changes, especially when it concerns your website, but  I am happy I did it. I used the powerful Thematic Theme Framework on top of Wordpress. Now I have a clean integrating of both my blog and my design work (before it were two different websites).  As I blog more often now, I wanted to emphasize that part in the new design.

Wordpress, the popular CMS / blogging software, allows to make customized pages. Together with the ease of maintaining a blog, it is a tool I really have become to appreciate.

My Reading List and Latest Bookmarks sections I moved to the cloud. For bookmarks you can visit my delicious page and I use Amazon reading list provided by Linkedin to share interesting books. I like minimalism in design, it's stresses the essential

From my experience I knew that changing an existing design would take more time and wouldn't guarantee a 100% satisfactory result, so I revamped my site from scratch. There is also a better integration with social media services, thanks to share buttons (Wordpress plugins and Addthis)

Next post I will catch up with some recent web spotlights.

[caption id="attachment_362" align="alignnone" width="630" caption="old vs new design"]old vs new design
[/caption]

Ruby Version Manager (RVM)

Rails 3 is out, but version 2 is still widespread.
I have > 1 computers but I prefer to develop on one.
Inevitably the question arises: how can I develop in rails 2 and 3 on 1 machine?


Ruby Version Manager
(RVM) becomes your friend

RVM is a command line tool which allows us to easily install, manage and work with multiple ruby environments from interpreters to sets of gems.
So not only is it convenient for rails 2 vs 3, but any new update that comes out can easily be tested this way.

Most of the following procedure comes from Michael Hartl's Learn Rails by Example that now covers rails 3 and is an excellent tutorial!
Quick procedure how to set it up and use it:

1. install RVM:

∴ bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

.. and put this in your profile:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"
# This loads RVM into a shell session.

2. install the Ruby instances you want:

$ rvm update --head
$ rvm reload
$ rvm install 1.8.7
$ rvm install 1.9.2

3. define two gemsets, basically self-contained workspaces between which you can toggle

$ rvm --create [email protected]
$ rvm --create use [email protected]

4.  make sure you have gem (Ruby's package manager) installed. It should come with RVM already.
I had some strange issues when installing gems. I think I used somehow the global gem's binary, so you might want to put the RVM's gem binary earlier in your PATH (adding ~/.rvm/rubies/ruby-1.9.2-p0/bin/gem to $PATH in for example .bashrc)
5. now you can easy toggle between the two environments

$ rvm 1.9.2   // toggle to rails 3 environment

$ gem list
..
rails (3.0.0)
..

$ rvm 1.8.7   // toggle to rails 2 environment

$ gem list
..
rails (2.3.8)
..

etc.
You can even run both versions at the same time if you specify a different port

rails 2

$ ruby script/server
=> Booting WEBrick
=> Rails 2.3.8 application starting on http://0.0.0.0:3000

rails 3

$ script/rails  server  -p 3001
=> Booting WEBrick
=> Rails 3.0.0 application starting in development on http://0.0.0.0:3001

Rails 2/ 3 happily running on the same host


OK, this Wednesday a new edition of my Web spotlights ... Apture, itunes ping and more stuff ..