I was hesitant at first to install the new Snow Leopard as I have heard a lot of about the inconsistencies, bugs and quirks of this new operating system from Apple. However, after the release of the 10.6.1 update, it looked attractive enough that I went and bought the €25 upgrade (FTW price!). It was lying another week or two waiting for the right moment, and it finally came some time ago. Here are just a few things that I liked about this years first Snow.

The upgrade is really smooth. None of my files got lost, and the OS footprint on the disk got significantly smaller (by about 45%). Also, there was a small increase in the speed of the OS. It’s probably the 64-bit doing, though I’m not sure, because I have heard of reports that by default, the new Snow is launched in 32-bit mode. That’s strange, because after the upgrade Safari Adblock stopped working, and that happens only when an app is launched in 64-bits. But that’s some techy flaming about these bits, not important :)

What struck me first was that Apple decided to slightly change the chrome of Snow. Now it’s lighter, the color bulbs have less contrast. I quite like it, I must say.

Another important change, especially for the designers, is that now the default gamma is 2.2, which is the same as on Windows. From some reason I was unable to create a profile with 1.8 gamma, like on the previous Mac systems. One way or another, I think it’s another good move, along with enabling Windows installations, in order to make the Apple computers compatible, but still unique.

I think you have heard that Preview now can select multicolumn PDF files properly. That is a big feature for everyone who read and quote academic journals on daily basis. Luckily, now I don’t have to, but during my times at the Uni that was a really big quirk. Another great feature I would love to have back then, are the full-blown annotations. Preview now supports various shapes, color and text areas, both on PDFs and images. FTW!

I must say I had to get use to the new stacks black look, but once I did, I really liked the changes. Especially the folder browsing inside the stacks. That was a thing I hoped for, and here it is. Nice :)

The icing on the cake is the new Quick Time X. Not only it has this awesome new interface that enables chrome-less movie display on the desktop – I tried designing a logo and watching F1 at the same time, and it was great! But what is more important, QT now supports easy audio, video and screen capture – yes, now you can create screen-casts easily. And with the built-in YouTube uploader (with video compression!) you will publish your demos in no time. Sweet, isn’t it?

Conclusions

I remember hearing a lot of comments that Apple should have given this new upgrade for free, because it’s basically the same system. Well, it’s not. Don’t judge the book by its cover. The guts of the this OS were rewritten, and the new feature-set is actually one of the best I’ve seen in years. Way to go, Apple. And if you are still hesitating whether to install Snow or not, I recommend to upgrade. You might want to hesitate until 10.6.2, but so far 10.6.1 has been really good too.

I recently wrote about setting up a mac for the web developer. However, that was still in the times of Leopard 10.5. With the upgrade to Snow Leopard 10.6 some things have changed, and I wanted to described the problems I had.

The upgrade to Snow Leopard went really smoothly and without problems. Nothing was lost, the system was fine and I could get back to work immediately. The problems started when I tried to do some web development on localhost. I kept getting Internal Server Errors from all of my scripts, and it turned out that MySQL was not working. Moreover, its process could not be started at all.

It turned out that the upgrade removed the mysql symlink from /usr/local. It is important, because normally MySQL installs itself to a directory like mysql-5.1.40-osx10.5-x86_64 – the symlink ensures all apps can use /usr/local/mysql when referring to the database, despite the version and build you deploy. So, to fix this, open the Terminal and execute these commands:

cd /usr/local
sudo ln -s mysql-5.1.40-osx10.5-x86_64 mysql

The long mysql-5.1… folder name should correspond to the folder where your MySQL is installed. After this change I was able to start up the database process. PHP was working fine, but I was unable to establish DB sockets in Perl. It turns out, Snow Leopard upgraded Perl, removing all custom modules on the way! So, there was no DBD::mysql any more…

As usual, CPAN failed to install the module. I downloaded the module’s source, and executed the manual installation routine:

perl Makefile.pl
make
sudo make install

You run these commands in the Terminal, first navigating into the folder where the source is located. After several tries, I still couldn’t get the Perl module to install itself. I googled more and found a possible cause: since Snow Leopard, most of its guts are 64-bit, and it seems that includes Perl as well. Unfortunately, my MySQL was still the one I installed with regular Leopard. And yes, it was 32-bit. So I downloaded the 64-bit package from MySQL website, installed it (remember to export your existing tables if needed!), then the Perl module successfully installed too and I was ready to develop again. And boy I’ve got loads of work :)

I’ve updated the old Setting up Mac for the Web Developer article – everything should still be valid there, except that you need to choose the 64-bit MySQL if you develop using the Snow Leopard. But let me know if you run into any problems.

Here you have a list of the most comprehensive, well designed and extremely usable icon packs available for free, including a commercial license. These icons will have you set in your small and big projects, and their common symbols will create a nice environment for your users. I created this list from the icons I’ve been using over the years and I think they are an essential pack for every web developer. Enjoy!

FamFamFam Icon Set

Probably the most popular and the best icon set for web developers out there!

Function Icon Set

A very well designed and comprehensive set, although the icon size might be a problem.

Webset Icons

Designed by the famous Turbomilk, they might not be comprehensive, but some of them are really useful.

Splashy Icon Set

All 470 are tiny but delightful. An essential set that you put next to famfamfam.

Web App Icon Set

The Vista-looking icons should work well in your next web app for the corporate clients.

Web Injection Icon Set

Extremely well designed, very functional and one of the slicker looking icons out there!

Woo Function Icon Set

Not too big, not too small, comprehensive, well designed and very informative. What more would you need?

If you liked this list, please share it with your fellow web developers. It’s important to use similar icons across the web apps, as it is important to have consistent road signs – but you knew that already. Sharing is caring! :)

The biggest hype on the Internet nowadays is the Google Wave. What is it exactly? It’s “an online communication and collaboration tool that makes real-time interactions more seamless”. That’s what Google would like to tell you. But in reality, there’s still a lot of work for them to get there. I’ll walk you through my experiences in this brief review.

So when you finally get your precious invitation and log into the Wave, this is what you see – a 3-column, nicely shaded design with nothing in, except the standard welcome message and a list of your friends who already Wave.

The Wave itself is like an Email message mixed with a Word document. It seems a bit threaded like in GMail, but on the other hand it seems to want to be read from top to bottom like a text file. There are some existing locations in the Navigation pane, but when you browser around them you find they are all Waves. This means, for example, that you can manage your Settings in a Wave, but also – that you can trash your Settings, if you want to. Odd. How to set Wave preferences afterwards?

Another thing is the design. While it’s really nice and slick, it’s not very Google. A lot of space is wasted and it doesn’t feel very functional. For example, there is no bottom Reply button – instead, you need to hover the bottom message border, which sometimes isn’t even visible.

Also, the style is not very coherent. Virtually each toolbar has it’s own icon style. Finally, from some reason, Google decided we no longer need to identify the recipients – or participants, in the Wave case – by their names, but by their avatars. I can see all these office workers using their cats and dogs pictures, or worse – not uploading a picture at all. We end up with a list of default grey heads, without a clue who is who.

As you can see above, I was playing with the document sharing and maps integration. Well, a Google Docs integration is a must, but it’s not here yet – you can view images in a nice lightbox, but the PDFs go straight to your desktop (or in-browser reader). The Maps widget is really nice, but creating a route is a mess. Why they made a different interface, instead of copying the one from the Maps site, I do not know.

The whole widgets idea is really cool, because, for example, you can share files with your coworkers and get their Yes/No opinion quickly, including small comments! However, if anyone would like to go through your conversation using the Playback (which is just something like a screencast of your Wave events), it would really take some time and wouldn’t be particularly interesting. I think Google would be better off visualizing the Wave such that it just could be easily read like an email.

And then this Real-time Web buzzword everybody caught onto. I mean, come on, it’s not about real-time typing, it’s not even a feature. I wouldn’t like for all of you to see how I write my blog post, I make edits and fine tune it, so you can all read it without choking. If I were to write it as you read, it would not only make me feel weird, but be counter-productive for you too – waiting, and staring as my characters pop-out back and forth, as well as occasionally hang while I try to think what to write next.

Finally, the collaborative sharing and editing. It’s cool, but how can you manage the conversation if everybody can edit out any message, of anyone, even the previous ones? I understand the concept of total sharing, but this is just a no-no in a corporate environment, I think. And yes, you could use Playback to see what has happened, but from the reason stated before, I don’t think anybody would seriously have time for it.

Summarizing, it’s not that the Google Wave is a bad service. I can see it’s future when it develops and fixes bugs here and there. But I don’t think it will be a revolution. It may be an evolution, but it’s not a service like the Search or GMail. With these, Google took what already existed and made it virtually perfect. With Wave, they took the Email and made it… well, really different. And the way it looks like now, I don’t think it will catch on among any other group then geeks.

The protocol itself is another matter. If it can handle all this cool real-time transmission using just a browser, this really might be a revolution. However, again, this part is even more for geeks. So, my final line is that Google Wave looks nice, but it has a lot of work before it is the real real-time deal.

NOTE: I do not have any Google Wave invites, sorry. But as soon as I have them, I’ll give some to my blog readers!

I recently read a quote that in the 60’s we were able to launch rockets to the Moon with just two Commodore 64’s, while now we need a 2 GHz Pentium 4 to barely launch Windows Vista. What went wrong?

At the same day, I’ve posted my concept of a Simple Template System, which in fact was a well prepared HTML file with placeholders, and a simple search and replace mechanism. And that’s what one commenter on DZone pointed out in a dissing attitude. It struck me, that he would probably praise me and call a guru if the template system had hundreds of useless features, thousands of lines of code and even more docs page. Does writing a million lines of code make you a great programmer? No, just like writing that many pages of stories won’t make you a Shakespeare…

Some developers seem to misunderstand simplicity with stupidity. If you want to do it simple, you must be lame. You need a simple JS? Don’t think, just use jQuery! You are developing a webapp? Use a framework! You want to crop a picture? Use Photoshop! So what that you could solve all these problems with 40 characters of inline code, a well thought script, and a Paint. You have used the tools of the pros, so you must be a pro too! Sure, why not…

People have a tendency to overkill. It not only is throwing out resources, but is not effective too – try to hit a fly with a shotgun and you’ll know. It amazes me how many developers go this way, they are engineers for Pete’s sake – they should optimize problems, not blow them into the stratosphere and feel like uber-hackers trying to squeeze what they really want out of a framework that should not have been used in the first place.

It’s not like I don’t know what I’m talking about. I’ve been there. I’ve seen Java and C# development and how much bloat they have. But it’s not like C++ is any better. I’ve also used frameworks and systems that had all the features in the world, yet not the one you wanted, and I remember the days I had to spent to hack into these structures to make them do what I want, not what they tell me I can.

They all are just tools. And they all should be used. But used wise. Because sometimes developing a scalable application doesn’t mean you need a framework straight away. Because sometimes you just have to think it over, not jump to conclusions. And often you might be surprised at how easy it all went. Pick the tools against the task, not the other way around.

This article will explain how to setup email, calendar, online docs and more from Google Apps, as well as deploy your homepage using Google App Engine – all integrated and all under your own domain! Why? Because GMail is the best online mail client, because Google Calendar is awesome, because Google App Engine works blazing fast, and finally – because it’s all free!

There’s a lot to talk to, so straight into details – first you need a Google Apps account. New Google’s policy has hidden the free version somewhere behind, so what you are looking for is Google Apps Standard Edition. Register there, add an existing domain you have bought somewhere.

Domain setup

Correct DNS settings in your domain are very important. I assume you want to have the homepage, mail, calendar and docs at your service. Go to your domain DNS manager somewhere in the control panel where you bought your site (there are specific instructions for many sellers at Google Apps Help) and create CNAME records pointing subdomains to ghs.google.com – so you end up having something like www.example.com, webmail.example.com, calendars.example.com and documents.example.com. All these URLs point to a login page of your Google Apps that redirect to respective services.

Remember no to setup any CNAME for the so called “naked domain”, which is a non-www address like example.com. Instead, setup a forwarded in your domain control panel that points to www.example.com – and make sure it’s not a “stealth” forwarding, frames are evil.

While you’re in the DNS manager, you can setup correct MX records that will rely your emails. Do it just like in this help article, as it explains everything really well. What it doesn’t say is that you also can add a special TXT entry that would make it harder for spammers to mess with your domain in their massive mailings. Create a TXT record for the “naked domain” with this value:

v=spf1 include:aspmx.googlemail.com ~all

Google Apps setup

When you go to your Google Apps dashboard, you can do a bunch of stuff there, add users, change settings etc. Everything is quite well explained, so I’ll leave the exploring to you. What you have to do is activate the services you need (say email, calendar, docs and chat) and change their web addresses. You already have the subdomains prepared in the previous paragraph, so now it’s just a matter of typing in the each service, setting a proper URL.

Calendar and Docs have simple sharing settings that you can adjust to your needs. What I unfortunately saw is that it’s difficult to share calendars and events between Apps and GMail/Calendar users, something is not well syced there even if you set the maximum sharing.

Regarding email, it’s worth to turn on the “catch-all address”, and the outbound rely – because sometimes you just want to have a different from field.

Google App Engine setup

So we have all the necessary services under our own domain, but the www part should point to our website, right? Well, I did a lot of tricks to get it working. I have setup a “naked domain” CNAME record pointing to an external hosting with my site. It worked well, but the CNAME messed with my email and some messages were bounced back. I tried pointing the “naked domain” to www, but that was even worse. Finally I managed to stumble upon an information that after a recent change, if you want to hook App Engine websites under your own domain, you need to use the Apps. That’s when a lightbulb appeared over my head :)

Sign up for Google App Engine. Download the necessary SDK, launch Google App Engine Launcher and create your first project of whatever name. You should have a project folder, and there you should find 2 files named app.yaml and main.py. Edit the first one – it’s responsible of pointing requests to the correct locations. You will need to create the handlers as follows:

handlers:
- url: /gfx/(.*\.(gif|png|jpg))
  static_files: gfx/\1
  upload: gfx/(.*\.(gif|png|jpg))

- url: /css
  static_dir: css

- url: /index\.html
  script: main.py

- url: .*
  script: main.py

The first handler assumes you have the image files in the folder called gfx – this folder is located in the root of your project folder, at the same level as app.yaml and main.py. The second handler assumes you have all your style-sheets in the folder called css. The third points anyone trying to reach a generic index.html to your main script. The fourth catches the rest, again pointing to the main script.

So the hierarchy of your project folder should be similar to this:

app.yaml
css/
gfx/
index.html
index.yaml
main.py

The index.yaml is a part of App Engine, but can you notice index.html? Well, since it’s main.py that displays the webpage, and python seemed not very helpful to me in inserting HTML to its source code, I decided to create a separate HTML document that would be read as a text file by the python script and printed on the screen. The browser would interpret it and display as a regular page.

To achieve this, open the main.py script and locate the MainHandler class. For it to read and print out the HTML file, it should look somehow like this:

class MainHandler(webapp.RequestHandler):

  def get(self):
    html = open("index.html", "r")

    for line in html:
      self.response.out.write(line),

What this does is basically, upon a request, opens the HTML file and prints out each line. Python is a tricky language, text indentation matters the most, as well as last characters in the line, so copy carefully ;) Finally, in your HTML and CSS make sure you refer to every folder with a preceding slash, like this:

/css/style.css
/gfx/image.png

Now all you have to do is: deploy the app to App Engine, note the app’s ID, go to Google Apps control panel again, click Add more services, type that app ID in the Google App Engine section, and add it. Then, still in Google Apps, view that app’s settings and Add a new URL – use the www subdomain so that www.example.com will point to it. Uff, that was long ;)

If your webpage contains subpages it’s not a problem. You can add more handlers in the app.yaml and process them respectively in main.py. And if you are a python guru you might even code yourself a blog – or just use a redirection of some sort using the CNAME subdomain blog.example.com – pointing to myblog.myhosting.com for example.

CNAME redirection

There’s a catch to CNAME redirection – on some hosts, it’s not enough to point to myblog.myhosting.com, because what you can see is just a blank page or a “Successful Apache installation”.

Let’s assume that myhosting.com is the main domain with which you registered your external hosting. What you have to do, is trick your hosting to think it should operate the example.com domain. You first need to alter the domain’s name servers (NS), so that you are able to add the example.com as an add-on domain to the hosting. Then, you can point the NS back to your domain provider in order to manage the DNS etc. Finally, you need to setup an actual subdomain blog.example.com on your hosting, which points to the same directory as the myblog.myhosting.com. Only then, when you setup a CNAME with subdomain blog pointing to myblog.myhosting.com, will the CNAME redirection actually work.

This explanation may sound vague, so if you have any questions just write me in the comments, or tweet me at @f055.

Conclusions

So there you have it, a quick, easy and free way to have professional GMail, Calendar, online Docs, GTalk and more (check the services available in the Google Apps), along with your personal website, all under your own domain, on blazing fast Google servers. Could things get any better? ;)

Header photo by rickz

There are stuff machines should do for you, and one of them is tweeting about your latest blog post – because it’s important to spread the word. Today I will show you my Expression Engine (EE) plugin called AutoTweet that does just that. It’s simple and elegant and doesn’t require anything above typing in your Twitter credentials. So next time you see an auto-tweet about my post, please retweet it :)

I was looking for a solution to auto-tweeting for a bit when I stumbled upon Jensa’s Send Tweet plugin. It would have worked fine, but I didn’t like that it used a local file to store the last tweeted message. It’s all in the timeline anyway, isn’t it? So I decided to write my own plugin that would use the Twitter database instead.

What my AutoTweet basically does is, when called, checks your timeline for the given message and if it doesn’t exist – it tweets it. AutoTweet is also immune to URL changes, as they are stripped while performing a regular expression match against the timeline – this way there are no problems if the URL somehow gets shortened differently along the way.

Finally, for the heavy twitterers, this solutions ensures your precious blog post will be always visible in your recent timeline and won’t be lost in all your babbling about coffee ;) AutoTweet will retweet the announcement if you tweet so much that the blog post message is pushed back in the timeline.

How to use it?

Usage is fairly simple. First of all download the plugin:

AutoTweet Plugin for Expression Engine

Upload it to your EE plugin directory. You can access the usage description by going to Admin - Utilities - Plugin Manager - AutoTweet. Or you can go on reading :)

The idea is similar to Jensa, you insert text betweet the {exp:autotweet} tags in a template, and when a page with that template is called, the inserted text will be tweeted, but only if it wasn’t in the timeline before. To setup it for auto-tweeting blog posts, you should insert the title and permalink of the latest post, like this:

{exp:autotweet}
{exp:weblog:entries weblog="{master_weblog_name}" limit="1" rdf="off" dynamic_start="on" disable="member_data|trackbacks"}
{title} {title_permalink="article"}
{/exp:weblog:entries}
{/exp:autotweet}

But you still have to open a page with the above template code in a browser of some kind to make it work. One of the solutions is to setup a cron job on your server that will periodically visit it.

Another solution, for you FeedBurner users out there, is to add this AutoTweet code to the top of your feed template. When FeedBurner pings your site to check for updates, it will also call the AutoTweet script, and if you have recently posted anything new, the title and link to your post will automagically appear in your timeline.

AFTERNOTE: This is how the auto-tweeted post looks like, and if you like all of it, be sure to retweet it :)

It’s time to cool off the tech talk and chill out with this amazing set of 44 widescreen wallpapers I picked up over the years, especially for your MacBook desktop (all of them are 1280x800 or bigger). With these images you will feel bliss and peace. Your desktop will be zen, you will be zen, and your life will get better – in other words, these pictures will make you live longer ;) Enjoy!

PS. I might be missing credits on several of these pics, some of them date way back. If you know the author or the source, please tell me in the comments.

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from InterfaceLift

from Flickr

from Flickr

from Flickr

from Flickr

from Flickr

from Flickr

from Flickr

from anbuu

from Crestock

from Crestock

from Crestock

from Crestock

from Crestock

from Crestock

from ChaosKaizer

By now you should know I am a fan of everything simple. I casted an opinion that frameworks, while useful, are overcomplicated and create an unnecessary load on your project, unless it reaches a certain amount of complexity. And one of the most used frameworks, are the template frameworks. Thus, it would be great to have a dead simple template system, that just works. And that’s what I am going to show you today.

Because Perl is my weapon of choice, I’m going to show you my Simple Template System (STS) for that language, but porting it to another one shouldn’t be a problem. The idea is simple, of course, and relies on creating a traditional HTML file, as if creating the general look of the site, and then instead of content, marking it with special string, which we then substitute with whatever we want, using regular expressions.

So you start off with a simple HTML page, for example:

<html>
<head>
    <title>Simple Template System</title>
</head>
<body>
    <div class="menu">
        <!---sidebar--->
    </div>
    <div class="main">
        <!---content--->
    </div>
</body>
</head>

The <!—-sidebar—-> and <!—-content—-> are those special strings for substitution. The purpose of using a HTML comment symbol with an additional hyphen is that first of all, they are invisible if left behind in the code, second – it’s easy to regex them from ordinary comments, and third – they are valid HTML. So now we have a page skeleton, or in other words – a template. It’s time to use it.

For this purpose, we’ll have a simple Perl script that reads the template file, lets call it main.tmp, and substitutes the necessary stuff to display a content-rich site. First we load the template into a variable:

my $tmp = '';
if( open FILE, '<', 'main.tmp' ){
    while( <FILE> ){ $tmp .= $_; }
    close FILE;
}

To walk you through the code, I’ll just say that we first try to open the file in the read-only mode, then we go over all the lines in that file and append them to the $tmp variable, and in the end we close that file.

Then we define content variables and give them some values:

my $sidebar = 'This is a menu';
my $content = 'This is the main content block';

Finally, we put the content in the necessary places using regular expressions, and we print the website:

$tmp =~ s/<!---sidebar--->/$sidebar/;
$tmp =~ s/<!---content--->/$content/;
$tmp =~ s/<!---.*?--->//g;

print CGI::header( -type => 'text/html' );
print $tmp;

The s/ is a regular expression substitution. The first argument is the string to look for, the second argument is the string to put instead of the first one. So we simply look for sidebar and main content placeholders, and substitute it with the actual content. The last regular expression removes all other placeholders that we won’t be using in this case – because this template system is flexible, you can have a lot of place holders, not all need to be used. And what about placeholders within placeholders? Well you could use them, you would just need a more fancy regular expression. I can’t think of a reason to have such a thing, but why not :]

UPDATE: draegtun of transfixedbutnotdead picked up the STS subject in a clever post on how features can kill usability, but had a very good idea of making the initial code slicker by using a hash table and a single regex. So, instead of defining variables separately, we use a hash:

my %vars= {
    sidebar => 'This is a menu',
    content => 'This is the main content block'
}

And instead of separate regular expressions, just a single one:

$tmp =~ s/<!---(.*?)--->/exists $vars{$1} ? $vars{$1} : ''/ge;

The above regex looks for the placeholders, and if the placeholder name matches any of our keys in the hash that contain data to be displayed – we make a substitution. Otherwise, we remove the placeholder from the displayed page.

Conclusions

And there you have it – a Simple Template System that you can setup within minutes just by coding by hand, and quickly create a variable-content websites. Using if statement you could make a page that displays different content basing on which section the user wants to see. Finally, you could have several different template files, changing them according to your needs (for example, front page different then subpages, article pages, etc.)

Please state your opinion and feedback on STS in the comments, I’m interested in what you think about it.

It’s always a though call to install all the necessary (and preferably free) apps on your mac to have a pleasant experience at all times. Fortunately, due to crappy Apple HDD drives, I’ve been going though this quite a lot. Thus, I’ll show you what nice apps you should install right after you start up your mac (if you haven’t done it yet) – they are so worth it…

Secrets

This is the ultimate improvement to your system. This small preference pane let’s you customize tons of features in you Mac OS X system, and frankly, it makes this system perfect. You can find it at their homepage. We will use it in the consecutive tips for Mac, so you’d better download them. But be sure to be careful with these options, as they can mess up your system real good (but can make it perfect as well!).

Perian

Start off with Perian, a universal video codec that will enable you to play virtually enything within QuickTime – that’s actually a huge thing, if you’re using FrontRow, because it integrates with that too!

Optimize Dock

Ok, I admit it – I hate the native dock display. I really put some effort to make it more usable and readable. And frankly nicer. Here are the results:

You can grab this dock design at Dockulicious. It makes the dock way clearer, and works best with an auto-hidden dock :) To get the best experience available, you should consider using Dock Drawers, a set of icons that when you set their names with a whitespace in the beginning, will overlay all the contents of your dock stack folders – looks awesome! The original link for the icons changes constantly, so monitor it on the XD blog.

Continuing dock enhancements, it’s good if you set it to highlight the stack items you overlay with mouse, otherwise it’s really difficult to say what you are currently on – but that’s easy – use the Secrets preference pane, navigate to Highlight stack items on hover and turn it on. And see the change :)

Finder enhancements

You should be careful messing with the Finder, as it’s the core of you system soul, but you could still make it better. What I like to do is to display a full path in the title bar (again, using Secrets, navigate to Finder > Show path in title bar, and turn it on) and also, get rid of the ridiculous shadow on the screencaptures that you get with the built-in features (for the reminder, you can grab a screen using Apple+Shift+3, there goes a screenshot, or you can get a piece with Apple+Shift+4, or finally, you can get a window grab if you use Apple+Shift+4 and hit Space!). To disable shadows go to Grab in Secrets and make sure Show shadows on captured windows is disabled.

Conclusions

These small tips sound like nothing, but they really make a change. Soon, I will show you how I deal with the top-right icons in Leopard, because frankly, too much applications are eager to put stuff there. And actually, I manage to go with just Adium and Mail Unread Menu (this helps my hidden dock), nothing more is necessary. But the best part is, I’ll show you how to get rid of the uneccesary system icons and features there, so you will have a perfect clear and usuable menu :) Look forward to the next installment of Setting up a Mac :)

Leopard comes with tons of stuff for developers, but out-of-the-box it ain’t quite configured to get them running in an instant. This article goes through the configuration process of Leopard and some of its bundled applications, to get the most out of it and create a nice web development environment. I will focus on setting up Apache with MySQL and Perl (and PHP, which I rarely use) plus some recommended apps. If you are a python developer, please share your configuration routine in the comments.

First, you should download Xcode — it includes some Unix tools necessary for compiling utilities from source code. We will need that while setting up Perl. Then, let’s start configuring stuff. We will use everything Leopard has: the built-in Apache 2 server, the PHP interpreter and the Perl interpreter. There is also the Python interpreter, but since I don’t code in this language, I didn’t feel the need to get it running — if you are Python coder and would like to share your configuration routine, please do so in the comments.

Apache

What we want to achieve is having a server run with the /Sites folder, located in your user directory, as root. Also, we will restrict access to just your machine, so no one will peak on your work.

Start with finding and opening for edit the Apache configuration file — open Terminal, type cd .. several times to get to the root of your filesystem, then type:

cd /etc/apache2
sudo vi httpd.conf

sudo command will open the configuration file to edit in Vi with admin privileges, that’s why you need to type your password (and yes, the characters doesn’t appear on screen, but they are invisibly typed). Next, hit A key, which triggers the edit mode. Move down using keyboard arrows until you find the lines that resemble the following:

#LoadModule php5_module		libexec/apache2/libphp5.so
#LoadModule fastcgi_module	libexec/apache2/mod_fastcgi.so

Remove the # sign to enable these two libraries. And move on to the next line:

DocumentRoot “/Users/name/Sites”

When you locate the DocumentRoot, it will point to a location somewhere in the Library. Change it as shown above, substituting the name with your user directory name. And move on to the second definition of Directory:

# This should be set to whatever DocumentRoot is set to
<Directory “/Users/name/Sites/*”>

Locate the Options and make sure you add ExecCGI to them (each option is separated with a space). At the end of the Directory tag you should see some permission settings (Allow, Deny etc.) — change them to the following settings to set access from localhost only:

Order allow,deny
Allow from localhost

One note about this configuration: all directories inside /Sites folder are invisible with this setting, but regular files located in /Sites folder are visible — they are still listed when browsing to your machine’s IP address — thus I recommend having just folders there. Finally, lets prepare Apache for handling script files of various extensions, like .php, .cgi, .pl — locate the following tags and change accordingly:

#AddHandler cgi-script .cgi .pl

After adding the necessary extensions, unquote the above statement by removing the # sign. Next, configure how Apache deals with index pages — locate the dir_module tag and add index types to your liking:

<IfModule dir_module>
	DirectoryIndex index.html index.php index.cgi index.pl
</IfModule>

This will tell Apache to handle HTML, PHP and Perl index pages like we are used to. Moreover, the order in which you define these file-types tells the server what to do when there are multiple index files with different extension — which to treat as the current index.

Finally, save the changes and quit Vi — hit Escape key to finish edit mode, then type :wq and hit Enter to save the file and quit. That’s all about Apache, now lets move to MySQL and PHP.

MySQL

Go to the MySQL website and download the Community Server — be sure you pick the 64-bit version if on Snow Leopard 10.6, and the 32-bit version if on Leopard 10.5, otherwise you will run into compatibility problems between database and programming language sockets. There’s a nice binary installer for the Mac OS X, so you shouldn’t have much problems installing it.

Next, let’s tell our system where the MySQL is installed, so we can use all its goodies from any place. Lanuch Terminal again and from your user directory (usually it’s the one that Terminal launches with) type:

sudo vi .bash_profile

We are again using Vi, so hit A for edit mode, then type the following command:

export PATH=/usr/local/mysql/bin:$PATH

Vi may inform you that this file is read-only — to override it and save the file, just hit Escape to exit edit mode, then type :wq! and hit Enter — this will force Vi to do what you want :) You probably should restart Finder now, by selecting Force Quit from the Apple menu.

Lets secure your MySQL installation now by opening Terminal and typing the following command:

mysqladmin -u root password 'your-password'

Substitute your-password with a string you want to use as the password to the database. Finally, in the System Preferences, you should see the MySQL Preference Pane and its state. By now, it’s probably stopped — you can start it now, and if you wish to have it starting up every time you launch the system, you need to install the Startup Item Package from the installation disk — the checkbox in the preferences doesn’t work without it.

The connection details to your newly installed database that you could use while programming web services, are as follows:

HOST: localhost
DBUSER: root
DBPASS: your-password

PHP

To point the PHP interpreter to the correct MySQL location, we need to make on small change in the PHP configuration file. Like before, launch Terminal, do some cd .. to go to absolute root, then type:

cd /private/etc
sudo vi php.ini

It may happen that with clear installation you don’t have the php.ini file. Instead, there is the php.ini.default that you can copy using the following command:

sudo cp php.ini.default php.ini

When you finally open php.ini using Vi, locate these two lines and set the paths as shown:

mysql.default_socket = /private/tmp/mysql.sock
mysqli.default_socket = /private/tmp/mysql.sock

Restarting Apache will reload PHP configuration. To do that, go to System Preferences - Sharing where you need to uncheck and then check again the Web Sharing service.

Perl

Perl interpreter comes with Leopard, but it’s missing the DBD bundle responsible for connecting with databases, including MySQL. Luckily, there is CPAN, the huge and very automated library of Perl modules. Installing the bundle should be no harder than opening Terminal and typing in:

cpan
install DBD::mysql

You might need to configure CPAN first by answering some questions it asks you, but you should be fine by just answering the default answers (always given in the parenthesis, next to the question). And if the MySQL bundle installation fails the test, you could try starting it with force install command. One way or another, you should have by now the ability to code in Perl and use MySQL.

Useful apps

phpMyAdmin — the interface for MySQL management, very useful
Komodo Edit — the best and free IDE for Mac, in my opinion
Transmit — the best file transfer client for Mac, unfortunately not free
Paparazzi — small and free app for Mac for making full-page screenshots of websites
VirtualBox — the best and free virtualization environment to run Windows and Linux inside your Mac OS

With the configurations made and these apps on board, you are ready to go on and code, test and deploy web sites and services straight on your Mac.

Photo by Major Nelson

In CSS, you can assign styles to elements in 3 ways: either by a direct reference to an HTML tag, or by a class attribute, or finally, by the id attribute. Each of these approaches has it’s pros and cons, but in this article, I’ll highlight why you should avoid using styling by #id. In fact, you shouldn’t base your style design on id attributes at all.

#id can’t be reused

The biggest flaw of id styling is explicitly declaring that this style can be used just once on the whole page — because an HTML id has to be unique. Imagine you design a page and in initial assumptions, you define a top ad box by id. Now time goes by, and you want to have this ad box style replicated at the bottom. You end up making changes in the CSS, instead of just copy-pasting ad box code, if you had used a class to style it.

#id can’t have multiple references

The second biggest flaw is that id styles can’t be added up in one attribute as it can be done with classes. This is really annoying when you want to minimize you CSS and use pieces of style here and there and be flexible about it. It’s perfectly ok to attribute an element with classes like that:

class="twitter sidebar"
class="large google sidebar"

But you would never get away with it in id attributes.

#id style can’t be modified by JavaScript

Because DOM is based on retrieving elements by IDs, it causes problems to change that ID to give a different look to an elemenet. Again, it’s perfectly ok to manipulate the style with classes, changing the className value. You could go doing that all day with great effects.

Conclusions

I’m not saying styling by #id is bad. But it may create problems in the future, because it’s not flexible enough, and the gains over class styling are purely semantic. In fact, there’s nothing wrong with defining a class and using it just once — as if it was an id. And if you decide that actually you’d like to use it again somewhere else, you are not bounded by anything. So why not to?

Ever since Apple tried to pursue mainstream, things went bad for them. It’s not like their computers didn’t crash before — that’s normal. But recently, they started to crash a lot. I had a late 2007 white MacBook with a 160GB hard drive. Well, exactly after 12 months, this drive failed me, a few days before the warranty expiration. It started clicking and died. They changed it for free to an even crappier one — it failed too, a few days ago, exactly after 6 months, and out of nowhere. Similarly, started clicking and just died.

I got fed up with mechanical failures, so I decided to go for an OCZ Vertex SATA II solid state drive. I chose a standard version, not the Mac Edition, because it was cheaper, faster and had constant firmware updates. Although some say they have problems with it, like freezing after system wake-up, I don’t. Also, my firmware is old, 1.10, but it doesn’t seem to cause problems either.

The disk comes in a nice, secure package, and the drive itself is a really neat, black box. Fits perfectly in the Mac’s HDD slot — although the star-shaped screws will give you a bit of tough time, if you don’t have a special screwdriver (I didn’t have patience, used pliers…).

Leopard installation went smoothly and was quite quick, although you need to format the drive with the Disk Utility. Windows 7 installation wasn’t that fast, and the actual working OS had long periods of idling, for example after clicking the Start Menu — definitely something wrong with the SSD handling there, Microsoft.

But when I came back to Leopard… it was sort of an amazing experience! The whole system worked like it was on steroids. As if the insides of my old MacBook were full of CPU and RAM. Seriously! 15 seconds from the startup white LED till login screen. 30 seconds to save a 2.5GB file from a DVD. 1 second to start up iPhoto with 1,600 images. Compare these figures with your machines, and if you need more specific data, compare your results from XBench with mine below. I am really happy with this drive — it’s like a new Mac now.

What I’ve learned from the first failure are 2 things — 1. traditional disks are not a good idea in a portable, “throwable” laptop, especially since Apple uses particularly crappy ones; and 2. backup your system on a daily basis, each evening, because you never know when it strikes you. I’m using a nice and free software called iBackup that let’s you backup to any destination, and after the initial process, only updates the changed files.

The second failure thought me that SSD may be expensive, but man, it’s fast! And I don’t want to have any other HDD now.

Wolfram|Alpha knowledge search engine is set to launch online today, May 15, with a live webcast beginning at 7pm CST. A lot of hype has been made around this new project by the iconic Stephen Wolfram and his team most widely known for their brilliant Mathematica package and online math encyclopedia. We have seen a lot of attempts to create a Google killer, the last being the unfortunate Cuil. But Wolfram|Alpha is anything but a search engine — it’s not a Google killer, it’s the future.

The approach to information research between Worlfram and Google is completely different. While Google tries to index as much content as it can, rank it by relevance and answer any query it gets, it also moves the actual answer seeking onto the user. It especially shows when you are doing your studies and looking for particular solutions to specific problems — Google is really helpless at putting correct links right before you. Unfortunately, there was no other option than Google, so we end up in digging through at least 5 pages of results to find the thing we are seeking.

Wolfram|Alpha on the other hand will give you a concrete answer — if it knows it. Otherwise it will tell you it doesn’t know what you want. Now, until today this behavior was considered wrong. We assumed whatever we ask, we’ll get an answer. And it would be best if the service could read our minds even with completely ridiculous questions like why blue is green. My point is, maybe it’s time for specific tools, like Wolfram|Alpha, to emerge and say that Google approach is not the Holy Grail of search?

What I learned from the recent screencast demoing Wolfram|Alpha is that never before we had a tool that would let us manipulate data in such flexible way. For example, we can easily find a good name for our baby analyzing how different names distribute over past few years. Or check how different countries develop in relation to each other. We can easily compute mathematical equations, monitor changes in different areas like economy, weather, politics and society. This may sound boring for all who use Google to find new stacks of porn, jokes and funny stuff (viva la 4chan!), but for serious business Google results were too raw to use, even with the amazing set of APIs (oh I’d like to get my hands on Alpha API) .

In my opinion we just observe a true beginning of the end of its holiness Google search engine. Yes, it has changed the Web as we know it, yes, it will still be number one, and yes, it should not try to be different — we love it for simplicity. But we should acknowledge that Web search is evolving, and Wolfram|Alpha showed that there’s enormous amount of space for development. But we should also remember it will all break down to a simple thing of asking the proper questions.

Installing Windows 7 RC1 32-bit on my late 2007 MacBook was a piece of cake. Boot Camp manager created a 32 GB partition, installation from the DVD was quick and smooth, and the system was running nicely even without the drivers from Apple. The decision by Microsoft to release an almost complete product for free, with a one-year license, is a great opportunity to get used to the next iteration of Windows systems. Let’s have a look at it.

The first impression is important and Windows 7 makes a very good one. The new logo animation during booting is very nice. Then, you are welcomed into a pleasent desktop environment where everything from the tray icons to wallpaper fits into one style. One cool feature is the Show desktop button — you can hover it and everything will fade, or you can click it with the usual behavior of minimizing all windows.

I remember that tray icons always spread havoc in the looks of Windows, as the app makers make them in more juicy colors than you will find in a stack of magic markers. This problem has a cool solution of a pop-up window with hidden icons, and an additional tray manager to exactly define what should be displayed.

Other nice interface decisions include an improved 3D Win-Tab window switching. The traditional Alt-Tab also got a makeover, now with fade effects on the way. Also, the preview of hidden windows appearing when hovering on the taskbar seem to work quite well. Although it kind of feels too slow to benefit the workflow.

The hell must have froze over because Microsoft remade its basic apps: WordPad, Paint (!) and Minesweeper (!!!). It also added several essential mini-tools: Sticky Notes, Magnifier and Snipping Tool (great for MacBooks without the Print Screen key, like mine). I really like the new Paint, now you can make more than just silly pixelated drawings.

One strange decision was to remove image correction tools from the system Picture Viewer. They were a great help in fixing red eyes, color balance etc. I hope this will be fixed with some update, because it would be a real shame. Especially if paired with the new Paint, these two apps would make a nice combo for beginners.

Installation tips

Despite Windows 7 having concernes, Apple Boot Camp drivers installed just fine, both the 2.0 and 2.1 update — although that last one reported a problem with Bluetooth. The OSD controls work fine. The touchpad works, with double-touch vertical scrolling, but without finger-tapping clicking. Mouse/touchpad settings are in Device and Printers section. Yet again redesigned Control Panel is now even more confusing to navigate. And there’s no option to make it classic...

Be sure to turn off automatic updates. Set them to either download and wait for user choice or to just inform about them. Be cautious, because the updates are more likely to screw up your systems than they would on a regular PC.

There is not much malware for this new Windows, but it’s better to be cautious. Luckily, Microsoft teamed up with some of the major antivirus makers, and for example Kaspersky Lab released a preview of their new security suite for free, especially for Windows 7. Just select beta activation upon first launch of Anti-Virus 8.0 and you will have it running until November.

And if like me you forgot to change the name of the partition to something sensible and can’t stand the Untitled drive on your Leopard desktop, while in Windows just go to hard disk Properties in Computer and change the name.

Conclusions

In general, Windows 7 looks like Vista with a bit of style. It boots faster, seems to work smoother and delivers nice fireworks to the desktop. Although I don’t like the new ribbon toolbars, I might need to get use to them. Also, a pity that it’s often difficult to find anything anywhere — besides the desktop, this one really shows a designers effort. I didn’t work with it long enough to say more, but after first few days I think this one might really catch on and be the real replacement for XP. It just works — so far… Anyway, Leopard still remains my first, favorite system. But it’s nice to know I can switch to something that is not totally useless.

PS. Ah yes, I’m writing this from IE 8 and it works nicely too. Although it’s still cluttered with lots of useless icons in the tab bar. But works blazing fast. I’m a bit wow.

It’s been a little quiet on the blog, because I was busy developing the next version of Semantix — a semantic mashup connecting all major semantic web services that is probably the first semantic service with multi-language support. By analyzing texts, Semantix gives you smart summaries, annotates contents with keywords and categorizes them. And it’s all written in Perl, so it’s uber-cool ;) If you’d like to learn more about Semantix and get an invite to the private beta, continue reading.

At this stage, Semantix uses services like OpenCalais, Freebase, Yahoo Content Analysis and SemanticHacker to get the semantic knowledge from the texts. With the help of Google Translate, the service can process content in many different languages. The results are divided into keywords, categories, concepts and a smart summary. The last one needs a word on, as an especially interesting idea.

Smart summary is an excerpt taken from your text, which includes only the most important sentences. The importance of each sentence is determined using semantics. The output summarization includes the key content, but is significantly shorter than the original.

Keywords are what they sound like — tags from the text. Categories on the other hand are predefined groups to which the text belongs to — very useful in sorting contents, as the categories are fixed boxes into which we throw the input. When you look at the sample output from Semantix, you see how it all works.

Currently, Semantix is a private beta, and I am running tests with quite a few testers. The nice thing about the feedback system is that you can not only rank the output or leave a comment, but also exactly pinpoint the incorrect semantic elements by clicking on them and literally crossing them out.

If you would like join the group of Semantix testers and help improve it, post a comment to this article. I will then contact you with an access key to the service, and you’ll be able to see it on your own. I’m looking forward to your feedback!

After the final wrap-up of The Challenge, I gave you 4 weeks to vote. A lot of votes have been casted on different contenders. Big thanks to all who participated! Today I closed the voting and summed up the points. Here are the results.

The winner is

Fabien with a PHP web framework in 131 chars of PHP:

require __DIR__.’/c.php’;
if (!is_callable($c = @$_GET[‘c’] ?: function() { echo ‘Woah!’; }))
  throw new Exception(‘Error’);
$c();

Homepage: http://www.twitto.org/

2nd place goes to

Isaac Van Name and his Micro-Twitter in 154 chars of PHP:

<form><input name=“a”><input type=“submit” value=“send”/></form>
<?php 
if($_GET[‘a’]){
  $q=fopen(‘micro.php’,‘a’);
  fwrite($q,$_GET[‘a’].’<hr>’);
  fclose($q);
}
?>

3rd place goes to

Keenora and his JPG resizer in 186 chars of PHP:

<?header(‘Content-type:’);
list($w,$h)=getimagesize($_GET[a]);
$b=imagecreatetruecolor($w/2,$h/2);
imagecopyresized($b,imagecreatefromjpeg($_GET[a]),0,0,0,0,$w/2,$h/2,$w,$h);
imagejpeg($b)?>

Jury pick

Hartog and the copy of Twitto.org web framework in 111 chars of Perl:

use CGI’:all’;
($a,$b)=path_info=~/.([^\/]+).(.*)/;
eval"use $a”;
print header.(!$@&&$a->can($b)?$a->$b():“no go”)

Votes distribution

As you can see, the majority of votes went to the winners, although 2nd and 3rd place had a close battle for quite some time. At the same time Twitto was out of reach.

Thank you to all of the awesome participants of 2009 edition of The 140 Characters Webapp Challenge. Thanks to all who voted and commented! It was an exciting event. And those who didn’t make it this time — follow this blog, and see you all next year!

Big thanks to Psychotic_Carp for the superb pixel art trophy icons!
Headline image golden guy by LuMaxArt

If you have read my previous two articles on Search Engine Optimization (SEO) and Google-friendly links for Expression Engine (EE), then you know how important these tweaks are. They help with various things, duplicate content among them. Google recently introduced another tool to deal with that particular problem — canonical page tag. And there are a few places in Expression Engine where it works perfectly.

What is rel=“canonical”? Google introduced this tag to deal with duplicated content, caused mainly by passing additional info in the URL query string. The URL seems different to the search engine crawler, but leads to the same page. Consider this example:

http://testowy.com/test-articles.php?sort=price&show=vat
http://testowy.com/test-articles.php?sort=name

Both URLs point to the same page, but may be indexed as different due to different query string. In EE this is the often the case with pagination — if you use Google Webmaster Tools, you may notice that the diagnostics show duplicate content errors on pagination links. For example, it’s the pagination of comments of an article:

/article/the-140-character-webapp-challenge/‎
‎/article/the-140-character-webapp-challenge/P50/‎

However, it’s the same with any other pagination in EE (entries list, comments or article text). The solution is to add the rel=“canonical” tag in the template header. If you add it on the main page, to prevent indexing of entries list pagination, use your main page URL:

<link rel="canonical" href="http://f055.net"/>

You should also add it in the article template, in case you get loads of comments and due to their pagination your unique entry URL won’t be unique any more. Use the {title_permalink} EE tag:

<link rel="canonical" href="{title_permalink="article"}"/>

Change the article to the name of your entry template. If you write long articles and use paragraph pagination, this method also applies.

Using the canonical tag, you should stop Google from indexing the incorrect URLs, dealing with most of the duplicate content errors that might appear in the Webmaster Tools diagnostics.

Four weeks have passed since Apple released Safari 4 Beta, and I have been using it since. There are things I like about this new browser, and even after this short time I think I couldn’t live without some of the features. On the other hand, a few things are irritating and could be fixed. I’ve been using the previous version of Safari, so the transition was not painful. But even for Apple, who is very picky about user interfaces, Safari 4 is revolutionary.

The bad stuff

Let’s start with the cons. Yes, I like the new toolbar and tabs, but they are often irritation to use too. First, it wouldn’t hurt if they swapped the tiny reload/stop button with the huge plus for adding a bookmark. I use command+D anyway, I’d rather have a big stop.

Regarding the tabs, I don’t care about the tiny New Tab button, as similarly, I use command+T. But I do hate that the tabs actually move the whole browser window. I constantly keep on moving my Safari around a bit, while switching the tabs, and frankly, it’s highly irritating. Also, why rearranging a tab makes it active?!

I had given the new tabs a longer thought, and I’m not sure how the problem should be solved. One way would be to shift the tabs bar down, like in Chrome. But that would throw the additional space to the garbage. Another option I think might work, would be to move the window only by clicking on the active tab, while inactive tabs could be rearranged and activated without influencing the window position.

Final thought about exceeding the number of tabs visible in the tabs bar. In the previous version, there was a tiny arrow button, displaying a dropdown with additional tabs. Now, there’s a triple-dot icon next to the New Tab button, doing just the same. I’m not sure why Apple doesn’t want to implement it’s genius two-finger horizontal scrolling here (like Firefox tab scrolling). It would fit perfectly.

The good stuff

The best feature of the new browser is definitely the Top Sites. It’s how the bookmarks should be long time ago. Recognizing a site by its thumbnail is way faster than reading the text link, and the ability to pin the important ones and leave the rest for automatic suggestion makes it the best rapid-browsing gateway there is. I’m still using the Bookmarks Bar, but less often. I virtually stopped using the actual Show all bookmarks button. I didn’t use it much before either.

The next best feature is History Search. Not only it’s fast as hell, but the visualization, just like I said before, makes it perfect for content recognition. Before, I had to actually remember where I was browsing to come back to a specific thing, because lots of websites are so smart to entitle different pages with the same name. Now, it’s just a matter of typing a keyword.

Another really useful tool is the Quick Search with suggestions. I got this functionality with Inquisitor before, but now it’s even better — real-time suggestions directly from Google, recent searches, and integrated current document search. I don’t need anything more.

The whole Develop menu is awesome. I don’t know why anybody wants to download Firefox, and stuff it with all these plugins, when you have Safari with all the necessary tools integrated straight away. The new web inspector rocks. Several small glitches were fixed, and the new split-screen view with element highlighting is great for debugging. I really like the website profiling tool, and the JS debugger looks very promising.

Finally, as I said, I like what they did with the top user interface, both the browsing toolbar and the tabs in the window titlebar. It was a controversial move, especially the tabs, but it gives substantially more browsing space. And I’m always in need of that.

Conclusions

I really am happy with the past 4 weeks of the new Safari browser. I don’t even remember if it crashed, everything works smoothly and quickly. I consider it the browser of my choice. While I have Firefox and Opera installed, as well as running Chrome and IE through VirtualBox, I really can’t understand why anybody would like to use anything else than Safari, on a Mac. Don’t get me wrong, but I really think that quality of use should be put before the quantity of features. Thus, plugin-packed Firefox doesn’t make me drool, and feature-packed Opera feels too non-native and clumsy.

While on a Mac, I think and work a bit in the way Apple design it, because then the quality is at its best. Why don’t you try it to, maybe you’ll like it? Be sure to follow me on Twitter, to be up to date with the upcoming workspace improvements for Leopard and Mac I’m planning to describe.

There exists an extremely easy way to manipulate icons in Leopard (and previous OS X versions too), just by using copy-paste between files and folders. Using this technique you can quickly customize your disk items, as well as extract rich graphics for further use or simply inspiration. With just a few clicks you can get these sweet looking designs in an up to 512x512 PNG file. Here’s how you do it.

Locate the application or file with the icon you want, select it and from the right-click menu select “Get Info” (or ⌘+I). Let’s use Safari as an example. You should see a similar window:

Click on the small icon in to left corner and copy it with ⌘+C.

Open “Preview” and in the “File” menu select “New From Clipboard” (or simply ⌘+N):

Each icon file contains several sizes of the same image. Choose from the sidebar the size you want to extract:

In the “File” menu select “Save as…” and select PNG format, to obtain best quality. Be sure to have the “Alpha” checkbox checked:

After these steps you should have a nice PNG image from the icon, looking for example like a 256x256 Safari logo:

Hints:

1. By copy-pasting (⌘+C, ⌘+V) icons between “Get Info” windows you can quickly change any file’s icon.
2. Look for interesting images inside applications — right-click an app, then Show Package Contents and explore the Resources folder

It’s time to talk about ExpressionEngine (EE) for a change. If any of you can speak Polish, I recommend subscribing to EExpression.pl, a nice new site that talks about EE in my native language. Now, to the subject — let’s assume for a moment that you use the EE feed templates. If you are running a daily news site, there’s probably loads of different categories you are broadcasting. It would be nice if your readers could subscribe just to the topic they are interested in (on CNN you can), but without the need for you to create tons of separate feed templates. See how EE can do this task for you.

Here is the idea — the URL of the feed will contain the name and id of the category it represents. Depending on your hierarchy, it will be two particular segments of the URL. For example, my main template group is named blog, and my feed template is named rss. Therefore, my main feed link is:

f055.net/blog/rss/
f055.net/{segment_1}/{segment_2}/

You can see the two segment variables, accordingly. First segment holds the string blog, while next contains rss. There are 9 segment variables. But we won’t need that many here. Our categorized feed link will look like this:

f055.net/blog/rss/News/1
f055.net/{segment_1}/{segment_2}/{segment_3}/{segment_4}/

Obviously, News is the category name, and 1 is the category id. And segments 3 and 4 hold these values, respectively.

Since we know all this, time to start modifying the feed template. Locate your weblog entries tag, it should look similar to the one below, and add the category parameter like this:

{exp:weblog:entries weblog="{master_weblog_name}" category="{segment_4}" rdf="off" dynamic_start="on" disable="member_data|trackbacks"}

Segment 4 represents the category id. Luckily, if it’s empty, all the categories are being displayed, so this will work for the main feed as well. But the feed title won’t. The best option is to make an if statement. Your regular feed title would be similar to this:

<title>{exp:xml_encode}{weblog_name}{/exp:xml_encode}</title>

But it’s better to distinguish your category feeds with a clear indication of what they are about, just like that:

{if segment_3 != ""}
<title>{exp:xml_encode}{segment_3} - {weblog_name}{/exp:xml_encode}</title>
{if:else}
<title>{exp:xml_encode}{weblog_name}{/exp:xml_encode}</title>
{/if}

Here, we change the title whenever the 3rd segment, the category name, is not emtpy. Now we are done with the feed template, but how are we going to pair up the category names and ids? Not by hand. Let’s leave it to EE Categories tag. In the HTML header, type the following code:

{exp:weblog:categories weblog="{my_weblog}" style="linear"}
<link rel="alternate" type="application/rss+xml" title="RSS - {category_name}" href="http://f055.net/blog/rss/{category_name}/{category_id}" />
{/exp:weblog:categories}

Assuming you have your weblog name in the {my_weblog} variable, this code will automatically embed links to all your categorized feeds, and give it nice names. Be sure to also include in the header a link to the main feed with all categories. So, once the user click on the RSS icon in the browser’s URL bar, there will be a nice list of all feeds, with category names.

My blog doesn’t use separate feeds, because I prefer FeedBurner over the native EE syndication. But I can’t say it’s not tempting to actually move to EE fully and have nice, categorized feeds. It looks professional, and gives the users more flexibility in reading the articles. I have to seriously think about it. And what would you prefer? Let me know in the comments! In the mean time, be sure to subscribe to my feed.

Title image by AleksRoks.

The 140 Characters Webapp Challenge is now over! If by chance you don’t know what it was, read this article at Mashable or see the original post at f055. It was great 2 weeks, everybody. You showed some awesome skills, and really raised to The Challenge! Kudos :) And thanks for making it all so exciting for all of us!

I have wrapped up all of your apps into this long, 32 apps list, which all are indeed functional and below 140 chars! (plus 4 that are interesting, but too long) You can VOTE for ONE of your favorite apps. And yes, the voting script is 140 chars too!

Check the VOTING results!

Here is the final wrap-up of the coders and their apps, almost in the order of appearance ;] If you wish to change something in your description, tweet me! To see how these were born, follow the comments on The Challenge.

Voting!

You can vote for your ONE favorite script! Just click the VOTE link below the favorite source code! Voting is managed by yet another 140 characters app I made — it even does IP filtering to block repeated votes. If you get 0 then it means you already voted. UPDATE: Voting is now closed!

use CGI':all';$i=$ENV{'REMOTE_ADDR'};$v=(param 0)=~/^(\d+)$/?$1:0;open V,'<v';$j=<V>;open V,'>>v';print header.($j!~/$i/?print V "!$v&$i":0)

Results are displayed by a 150160 characters app, because I wanted to make nice chart bars using input fields. But it can be done in 140 chars as well, if just plain text is displayed.

use CGI':all';print header;open V,'v';%v=();$v=<V>;while($v=~/!(\d+)&/g){$v{$1}++};for$i(sort{$a<=>$b}keys%v){print p.b("$i.").br.input({size=>$v{$i}}).$v{$i}};

VIEW VOTE RESULTS HERE!

OK! Enough of this talking, let’s get down to business! Here are the awesome coders and their apps!

Coders and the webapps

Isaac Van Name

1. Micro-Twitter in 154 chars of PHP (props for being the first!):

<form><input name=“a”><input type=“submit” value=“send”/></form><?php if($_GET[‘a’]){$q=fopen(‘micro.php’,‘a’);fwrite($q,$_GET[‘a’].’<hr>’);fclose($q);}?>

Bari

2. Micro-Twitter in 139 chars of PHP (modification of Issac’s code):

<form><input type=“submit”><input name=“a”></form><?php $a=$_GET[a];if($a){$q=fopen(‘m.php’,‘a’);fwrite($q,”<hr>$a”);fclose($q);echo $a;}?>

Andy Bailey

3. Age Guessing in 140 chars of JS:

var c=0;var i=35;do{var x=confirm(‘are you ‘+i+’?\n(ok=Y)’);i=Math.floor(Math.random()*70);c++;}while(!x);alert(‘I only took ‘+c+’ tries!’);

Example: launch JS

4. Micro-Twitter in 99 chars of JS:

(”<input value=..><p>[go]”);$(‘p’).click(function(){$(‘body’).append($(‘input’).val() + ‘<hr>’);});

Example: http://www.fiddyp.co.uk/internal/140charchallenge/

James

5. Micro-Twitter in 134 chars of PHP:

<form><input name=“s”><input type=“submit”><?$s=$_GET[s];$f=file(‘a’);$a=!empty($s)?”<hr>$s$f[0]”:’‘;fwrite(fopen(‘a’,‘w’),$a);echo$a;

6. Time of life counter in 146 chars of JS:

d=prompt(‘DOB?’,‘DD-MM-YYYY’).split(/[^\d]/);d=(new Date()-new Date(d[2],d[1],d[0]))/1000;alert(d+’ seconds\n’+d/60+’ minutes\n’+d/60/60+’ hours’)

Example: launch JS

Keenora

7. Micro-Twitter in 129 chars of PHP:

<?=’<form><input name=a><input type=submit></form>’;fputs(fopen(a,a),$_GET[a].”\n<hr>”);$a=file(a);krsort($a)?><?=implode( ,$a)?>

8. The same, but without sorting, just 82 chars:

<?=’<form><input name=a>’;fputs(fopen(a,a),$_GET[a].’<hr>’)?><?=readfile(a)?>

9. Delicious links in 136 chars of PHP:

<?$x=new SimpleXMLElement(file_get_contents(“http://feeds.delicious.com/v2/rss”));foreach($x->channel->item as$a)echo$a->title.’‘;?>

10. Get HTTP Code of URL in 133 chars of PHP:

<?$a=(@stream_get_meta_data(fopen($_GET[a],80)));preg_match(’# (\d+) #’,@implode($a[wrapper_data]),$b)?><?=($b)?‘Code: ‘.$b[1]:’:(’?>

11. Resize JPG by half in 186 chars of PHP:

<?header(‘Content-type:’);list($w,$h)=getimagesize($_GET[a]);$b=imagecreatetruecolor($w/2,$h/2);imagecopyresized($b,imagecreatefromjpeg($_GET[a]),0,0,0,0,$w/2,$h/2,$w,$h);imagejpeg($b)?>

12. ShouldIdoIt.com copy in 139 chars of PHP:

<?=’<form><input name=a>’;$b=’<hr>’.$_GET[a].’ - ‘;if(strstr($b,’?’))fputs(fopen(a,a),rand(0,1)?$b.‘yes’:$b.‘no’);echo@implode( ,file(a))?>

Ormo

13. A clone of downforeveryoneorjustme.com in 135 chars of PHP:

<?=’<form><input name=s><input type=submit></form>’;$a=$_GET[s];echo(@file((stripos($a,”:”))?$a:“http://”.$a))?‘just you’:‘its down’;?>

Example: http://loughanmore.f2s.com/down.php

Mirko Grönroos

14. Micro-Twitter in 140 chars of Ruby (including own webserver!):

%w[rubygems sinatra].each{|w|require w};get'/'do;m=params[:m];open("f","a"){|f|f<<m+"\n"}if m;haml'%form <input name="m"/>
%pre&=`cat f`'end

Code: http://pastebin.com/m430d6705

Tony Buser

15. Micro-Twitter in 136 chars of Ruby (including own webserver!):

require'rubygems';require'sinatra';get("/"){r="<form><input name='t'></form>";t=params[:t];`echo '<hr>#{t}' >> t` if t;r<<`tail -r t`;r}

Code: http://pastie.org/388329

adamo

16. Random Quotes in 81 chars of language I can’t recognize ;] :

echo 80 stream tcp nowait nobody /usr/games/fortune fortune -a >> /etc/inetd.conf

Example: http://inbox2.eu:8081/
Blog post: http://blog.postmaster.gr/2009/02/13/does-this-count-as-a-web-application/

synodinos

17. Odd or Not game in 140 chars of JS:

function
x(){if(confirm("odd?")&&((Math.floor(Math.random()*10))%2))alert(":)");else
alert(":(");if(confirm("rpt?"))x()}x()

Example: launch JS

18. 1 or 0 game in 130 chars of JS:

function x(){if(confirm(”1?”)&&(Math.round(Math.random())))alert(”:)”);else alert(”:(”);if(confirm(”rpt?”))x()}x()

Example: launch JS
Blog post: http://synodinos.net/2009/02/14/re-the-140-character-webapp-challenge/

Bastian Albers

19. Micro-Twitter in 136 chars of PHP:

<form><input name=a><input type=submit></form><?if(strlen($_GET[a])<140){$h=fopen(a,“a”);fwrite($h,$_GET[a].”<hr>”);}echo@readfile(a)?>

20. More featured Micro-Twitter in 141 chars of PHP:

<form><input name=a><input type=submit><?$l=strlen($_GET[a]);if($l<140&&$l>0){$h=fopen(a,“a”);fwrite($h,$_GET[a].”<hr>”);}echo@readfile(a)?>

cherouvim

21. Epilepsy Causer in 114 chars of JS:

{r=0;setInterval(function(){document.body.style.background=(r++%2==0?'#'+r%7+r%9+r%8:'0')},50);void(0)}

Example: launch JS
Blog post: http://blog.cherouvim.com/re-the-140-character-webapp-challenge/

Facyla

22. Many-Features Micro-Twitter in 140 chars of PHP:

<form><input name=n><?$m=implode('',file(n));$n=htmlentities($_GET[n]);if($n<>'')file_put_contents(n,"<hr>".date(YmdHi).": $n$m");include n;

Example: http://facyla.net/proto/twitter/@README.php

fabien

23. A PHP web framework in 131 chars of PHP:

require __DIR__.’/c.php’;
if (!is_callable($c = @$_GET[‘c’] ?: function() { echo ‘Woah!’; }))
  throw new Exception(‘Error’);
$c();

Homepage: http://www.twitto.org/

Hartog

24. Copy of downforeveryoneorjustme.com in 135 chars of Perl:

use CGI’:all’;print header.’<form>down4u?:’.br.textarea(‘a’).br.submit;if($a=param(‘a’)){`ping -c1 $a.`;print h2($? ? “down”:“just4u”)}

25. Copy of Twitto.org web framework in 111 chars of Perl:

use CGI’:all’;($a,$b)=path_info=~/.([^\/]+).(.*)/;eval"use $a”;print header.(!$@&&$a->can($b)?$a->$b():“no go”)

26. Link to banner in 130 chars of Perl:

use CGI’:all’;print header.’<form>message:’.textfield(‘m’).submit;if($a=param(‘m’)){print’‘.`/usr/games/banner $a`.’</pre>’}

Dorian Muthig

27. Guessing game of numbers between 0-20 in 140 chars of JS:

r=Math.round(Math.random()*20);for(c=1;c<=10;c++){g=prompt(‘Guess’,’‘);if(g==r){alert(‘Won’);break;}if(!g){break;}if(c==10){alert(‘Lost’);}}

Example: launch JS

haris

28. RSS/RDF parser with formatted output in 135 chars of PHP:

<?php foreach(file($_GET[p])as$l)if(preg_match(’/<(title|link)>([^<]+)/’,$l,$m))echo$m[1]==‘link’?” <a >link</a><hr>”:$m[2]?>

Example: http://test.neziric.org/140/feed-parser.php?u=http://feeds.delicious.com/v2/rss/?count=15

draegtun

29. Micro-twitter using Continuity in 140 chars of Perl:

use Continuity;Continuity->new->loop;sub main{($r)=@_;while(){$r->print('<form><input name=m>');$r->next;$x+=$r->param('m');$r->print($x)}}

Blog post: http://draegtun.wordpress.com/2009/02/23/the-140-character-webapp/

30. Word counter using Continuity in 139 chars of Perl:

use Continuity;Continuity->new->loop;sub main{while(){$m=$_[0]->print(”$m=$l<form><input name=m>”)->next->param(‘m’);$l=()=$m=~/\w+/g}}

Simon Overell

31. Social linking - redirects to URL left by the previous person - in 140 chars of PHP:

<?php if($_GET[‘a’]){$x=file(a);header(“Location:$x[0]”);fwrite(fopen(a,‘w’),$_GET[‘a’]);}?><form><input name=a><input type=“submit”></form> 

Example: http://www.numenore.co.uk/140char/simon.php
Homepage: http://www.doc.ic.ac.uk/~seo01/wiki/miscellaneous

awwaiid

32. Self-contained webserver using Continuity in 140 chars of Perl:

use Continuity;Continuity->new->loop;sub main{while(){$m=$_[0]->print(”$m<form><input name=m>”)->next->param(‘m’);$m=~y/a-z/n-za-m/}}#rot13!

Twitter: http://twitter.com/awwaiid/status/1245021575

Michael Cotterell

33. Album Art Finder in 192 chars of PHP:

<form>Artist<input name=artist>Album<input name=album><input type=submit><p><?if($q=$_SERVER[QUERY_STRING])echo'<img src='.end(simplexml_load_file(current(file(a)).'&'.$q)->album->image).'>';

Example: http://phattangent.com/140.php
Code: http://pastebin.com/f2efc6065

Sergry Agarkov

34. Micro-Twitter in 241 chars of PHP:

<form method="post"><input type="text" name="A" value="Msg" size="140"><input type="submit" name="submit"></form><?php $f=file("1");$m=$_POST["A"];if($m<>""){file_put_contents("1",$m.'<br>',FILE_APPEND);}for ($i=0;$i<11;$i++){echo $f[$i];}?>

Code: http://dumpz.org/5512/

Jim

35. Micro-Twitter in 308 chars of Ruby:

require’camping’;Camping.goes:T;module T::Models;class T<Base;end;end;module T::Controllers;class I<R:/;def get;@s=T.all;render:i;end;def post;T.create:d=>input.d;redirect’/’;end;end;end;module T::Views;def i;form(:method=>:post){;input:type=>:submit;input:name=>‘d’,:type=>:text;};@s.each{|t|hr t.d};end;end

Marek Foss

36. Micro-Twitter that started it all in 140 chars of Perl:

use CGI':all';print header.'<form>'.submit.textfield 0,'',99;open F,'<0';print $f=(param 0)=~/1234 (.*)/?hr.$1.<F>:<F>;open F,'>0';print F$f

Example: http://f055.net/140/challenge.pl
Code: http://www.f055.net/images/uploads/140charswebapp.zip
Blog post: http://f055.net/article/the-140-character-webapp-challenge/

Final words

I am very happy it all turned out so well. I will be thinking of a next challenge for you soon, if it again magically pops into my mind, or I’ll get inspired as I did in this challenge. Or maybe you have a really exciting idea? Share your thoughts in the comments! You may also want to follow me on Twitter and message me directly with your suggestions :)

It was fun, guys! You should be all proud. Because, as I said before, it’s easy to write a lot of code. The challenge is to write short, but packed with features. That’s what it was all about. And you all proved it can be done, with awesome results! Thanks!

You may have hard of The 140 Characters Webapp Challenge. It made quite a buzz and I’m happy to report that the response was a pleasant surprise to me. Here’s a report from the middle of The Challenge — there’s still a week left!

Some statistics: 19 coders (including me), who have produced 28 webapps in PHP, Perl, Ruby and JS — all but 4 are less than 140 characters of code! Impressive work so far, everybody! Thanks! I managed to wrap up all your work into one list.

Here are these awesome coders and their apps, almost in the order of appearance ;] If you wish to change something in your description, tweet me! To see how these were born, follow the comments on The Challenge.

Coders and the webapps

Note: the bold underlined ones are my favorite.

Isaac Van Name

Micro-Twitter in 154 chars of PHP (props for being the first!):

<form><input name=“a”><input type=“submit” value=“send”/></form><?php if($_GET[‘a’]){$q=fopen(‘micro.php’,‘a’);fwrite($q,$_GET[‘a’].’<hr>’);fclose($q);}?>

Bari

Micro-Twitter in 139 chars of PHP (modification of Issac’s code):

<form><input type=“submit”><input name=“a”></form><?php $a=$_GET[a];if($a){$q=fopen(‘m.php’,‘a’);fwrite($q,”<hr>$a”);fclose($q);echo $a;}?>

Andy Bailey

Age Guessing in 140 chars of JS:

var c=0;var i=35;do{var x=confirm(‘are you ‘+i+’?\n(ok=Y)’);i=Math.floor(Math.random()*70);c++;}while(!x);alert(‘I only took ‘+c+’ tries!’);

Micro-Twitter in 99 chars of JS:

(”<input value=..><p>[go]”);$(‘p’).click(function(){$(‘body’).append($(‘input’).val() + ‘<hr>’);});

Example: http://www.fiddyp.co.uk/internal/140charchallenge/

James

Micro-Twitter in 134 chars of PHP:

<form><input name=“s”><input type=“submit”><?$s=$_GET[s];$f=file(‘a’);$a=!empty($s)?”<hr>$s$f[0]”:’‘;fwrite(fopen(‘a’,‘w’),$a);echo$a;

Time of life counter in 146 chars of JS:

d=prompt(‘DOB?’,‘DD-MM-YYYY’).split(/[^\d]/);d=(new Date()-new Date(d[2],d[1],d[0]))/1000;alert(d+’ seconds\n’+d/60+’ minutes\n’+d/60/60+’ hours’)

Keenora

Micro-Twitter in 129 chars of PHP:

<?=’<form><input name=a><input type=submit></form>’;fputs(fopen(a,a),$_GET[a].”\n<hr>”);$a=file(a);krsort($a)?><?=implode( ,$a)?>

The same, but without sorting, just 82 chars:

<?=’<form><input name=a>’;fputs(fopen(a,a),$_GET[a].’<hr>’)?><?=readfile(a)?>

Delicious links in 136 chars of PHP:

<?$x=new SimpleXMLElement(file_get_contents(“http://feeds.delicious.com/v2/rss”));foreach($x->channel->item as$a)echo$a->title.’‘;?>

Get HTTP Code of URL in 133 chars of PHP:

<?$a=(@stream_get_meta_data(fopen($_GET[a],80)));preg_match(’# (\d+) #’,@implode($a[wrapper_data]),$b)?><?=($b)?‘Code: ‘.$b[1]:’:(’?>

Resize JPG by half in 186 chars of PHP:

<?header(‘Content-type:’);list($w,$h)=getimagesize($_GET[a]);$b=imagecreatetruecolor($w/2,$h/2);imagecopyresized($b,imagecreatefromjpeg($_GET[a]),0,0,0,0,$w/2,$h/2,$w,$h);imagejpeg($b)?>

Ormo

A clone of downforeveryoneorjustme.com in 135 chars of PHP:

<?=’<form><input name=s><input type=submit></form>’;$a=$_GET[s];echo(@file((stripos($a,”:”))?$a:“http://”.$a))?‘just you’:‘its down’;?>

Example: http://loughanmore.f2s.com/down.php

Mirko Grönroos

Micro-Twitter in 140 chars of Ruby (including own webserver!):

%w[rubygems sinatra].each{|w|require w};get'/'do;m=params[:m];open("f","a"){|f|f<<m+"\n"}if m;haml'%form <input name="m"/>
%pre&=`cat f`'end

Code: http://pastebin.com/m430d6705

Tony Buser

Micro-Twitter in 136 chars of Ruby (including own webserver!):

require'rubygems';require'sinatra';get("/"){r="<form><input name='t'></form>";t=params[:t];`echo '<hr>#{t}' >> t` if t;r<<`tail -r t`;r}

Code: http://pastie.org/388329

adamo

Random Quotes in 81 chars of language I can’t recognize ;] :

echo 80 stream tcp nowait nobody /usr/games/fortune fortune -a >> /etc/inetd.conf

Example: http://inbox2.eu:8081/
Blog post: http://blog.postmaster.gr/2009/02/13/does-this-count-as-a-web-application/

synodinos

Odd or Not game in 140 chars of JS:

function
x(){if(confirm("odd?")&&((Math.floor(Math.random()*10))%2))alert(":)");else
alert(":(");if(confirm("rpt?"))x()}x()

1 or 0 game in 130 chars of JS:

function x(){if(confirm(”1?”)&&(Math.round(Math.random())))alert(”:)”);else alert(”:(”);if(confirm(”rpt?”))x()}x()

Blog post: http://synodinos.net/2009/02/14/re-the-140-character-webapp-challenge/

Bastian Albers

Micro-Twitter in 136 chars of PHP:

<form><input name=a><input type=submit></form><?if(strlen($_GET[a])<140){$h=fopen(a,“a”);fwrite($h,$_GET[a].”<hr>”);}echo@readfile(a)?>

More featured Micro-Twitter in 141 chars of PHP:

<form><input name=a><input type=submit><?$l=strlen($_GET[a]);if($l<140&&$l>0){$h=fopen(a,“a”);fwrite($h,$_GET[a].”<hr>”);}echo@readfile(a)?>

cherouvim

Epilepsy Causer in 114 chars of JS:

javascript:{r=0;setInterval(function(){document.body.style.background=(r++%2==0?'#'+r%7+r%9+r%8:'0')},50);void(0)}

Blog post: http://blog.cherouvim.com/re-the-140-character-webapp-challenge/

Facyla

Many-Features Micro-Twitter in 140 chars of PHP:

<form><input name=n><?$m=implode('',file(n));$n=htmlentities($_GET[n]);if($n<>'')file_put_contents(n,"<hr>".date(YmdHi).": $n$m");include n;

Example: http://facyla.net/proto/twitter/@README.php

fabien

A PHP web framework in 131 chars of PHP:

require __DIR__.’/c.php’;
if (!is_callable($c = @$_GET[‘c’] ?: function() { echo ‘Woah!’; }))
  throw new Exception(‘Error’);
$c();

Homepage: http://www.twitto.org/

Hartog

Copy of downforeveryoneorjustme.com in 135 chars of Perl:

use CGI’:all’;print header.’<form>down4u?:’.br.textarea(‘a’).br.submit;if($a=param(‘a’)){`ping -c1 $a.`;print h2($? ? “down”:“just4u”)}

Copy of Twitto.org web framework in 111 chars of Perl:

use CGI’:all’;($a,$b)=path_info=~/.([^\/]+).(.*)/;eval"use $a”;print header.(!$@&&$a->can($b)?$a->$b():“no go”)

Michael Cotterell

Album Art Finder in 192 chars of PHP:

<form>Artist<input name=artist>Album<input name=album><input type=submit><p><?if($q=$_SERVER[QUERY_STRING])echo'<img src='.end(simplexml_load_file(current(file(a)).'&'.$q)->album->image).'>';

Example: http://phattangent.com/140.php
Code: http://pastebin.com/f2efc6065

Sergry Agarkov

Micro-Twitter in 241 chars of PHP:

<form method="post"><input type="text" name="A" value="Msg" size="140"><input type="submit" name="submit"></form><?php $f=file("1");$m=$_POST["A"];if($m<>""){file_put_contents("1",$m.'<br>',FILE_APPEND);}for ($i=0;$i<11;$i++){echo $f[$i];}?>

Code: http://dumpz.org/5512/

Jim

Micro-Twitter in 308 chars of Ruby:

require’camping’;Camping.goes:T;module T::Models;class T<Base;end;end;module T::Controllers;class I<R:/;def get;@s=T.all;render:i;end;def post;T.create:d=>input.d;redirect’/’;end;end;end;module T::Views;def i;form(:method=>:post){;input:type=>:submit;input:name=>‘d’,:type=>:text;};@s.each{|t|hr t.d};end;end

Marek Foss

Micro-Twitter that started it all in 140 chars of Perl:

use CGI':all';print header.'<form>'.submit.textfield 0,'',99;open F,'<0';print $f=(param 0)=~/1234 (.*)/?hr.$1.<F>:<F>;open F,'>0';print F$f

Example: http://f055.net/140/challenge.pl
Code: http://www.f055.net/images/uploads/140charswebapp.zip
Blog post: http://f055.net/article/the-140-character-webapp-challenge/

Thoughts and conclusions

I am really amazed how much can be squeezed into 140 characters. Writing a lot lines of code not necessarily means you’re a good coder — it just means you can code. Writing little code that can do lot is another thing. This is what shows the true skills. If you think you’re up to it, there’s still 7 days left to show off. Thanks to all the awesome coders that already took The Challenge! I’m impressed.

And if something more comes to your mind, don’t hesitate to post your code, either here in the comments, or in the original The 140 Characters Webapp Challenge post. Bring it on! And follow me on Twitter to get all the updates instantly!

How many interesting webapps can you code in one Twitter message? I have one — a micro-twitter. I want to see many!

Back at Twitter I read this message on 222 character Wikis, by Arun Shroff. I thought — why not — and replied with a challenge: Make a 140 chars webapp in 2 weeks! Whatever language, library or module included, as long as it’s standard. I made an example micro-twitter, described later in the post. If you think you can do better — I dare you. You’ve got 2 weeks again. Post your webapp here in the comments! (complete code, link or anything such that we can see it at its best)

UPDATE! 32 WebApps under 140 Characters — Finale of The Challenge wrapped up!

24 WebApps under 140 Characters — 7 days of The Challenge wrapped up!
Test my example micro-twitter online
Download the micro-twitter source code

Now, to my micro-twitter app. It’s written in Perl, using just the CGI module. The one-line code has 140 characters, although in the source code file you can find a further minimized version with just 123 characters, but less features.

What the micro-twitter basically does, is let you update your status and show it. Don’t expect any social candy, there’s no room for that, but it works, and you can test it here — the PIN is 1234, and this version is a bit more secure, for obvious reasons. To post a message, type the PIN number, a space, and then your message.

I’ve worked about 2 hours refining the code. That’s around 51 seconds per character, funny how such a short piece takes so much time. And here it is:

use CGI':all';print header.'<form>'.submit.textfield 0,'',99;open F,'<0';print $f=(param 0)=~/1234 (.*)/?hr.$1.<F>:<F>;open F,'>0';print F$f

The extent to which I bended the common practices of Perl are quite bizarre to me, but on the other hand this code is completely valid in my IDE of choice — Komodo Edit. First of all, I include all the fancy stuff from CGI, but in fact I am using just the :standard, :form and :html extensions. I’m printing the heading, otherwise the browser will spit an Internal Server Error. Next, I’m starting the form, no html, head or body rubbish. I’m printing the submit button and a textfield using the mentioned :form extension.

After that, I handle the possible message. I’m using a regular expression to analyze it, looking for the PIN. If found, I append the message at the beginning of the file, adding a hrizontal line to make it look readable. At the same time, I push all the file contents to a $f variable. I use it then to overwrite the database file, so the messages don’t get lost. And that’s it.

Now, again — I dare you, make something better, shorter, fancier! The rules are simple: whatever language you choose, whatever module or library you include, as long as it’s standard, it’s good. But share your webapp in the comments, even if they bend the rules — it will be interesting. The challenge is on. So are you skilled enough for this? Bring it on! And follow me.

A while ago on Twitter I started to post links to exceptional logotypes, day by day. You can monitor my picks by searching the #favlogo hashtag or simply by following me. After about two weeks, it’s time to make a roundup and select my favorite five! Let’s start.

Precision Networking by epsilon

I like this logo because of the clever way of utilizing E letters as the metrics of a ruler. I was always fond of designer who could take characters to another level and turn them into meaningful icons while retain readability. This is precisely achieved here. The whole logo, it’s sharpness and industrial look emphasizes the precision even more. Kudos.

Eight by Stylo Design

You can see the pattern now, I like playing with fonts. This one executes a perfect eight using just the digit 8. And although the logo may be difficult to read at first, once recognized, will be a really memorable sign.

Cardiologic by Hayes Image

Another motif I tend to like is pictographic play on the company name. This one makes it exactly as it should, by combining atom logic with cardio heart — in a way that is so obvious, yet so invisible until now. Top notch creativity, because spotting the obvious is the hardest thing to do.

Cinema Cafe by Muamer

Some logos win not just with the idea, but superb quality. This is one of them. Bending this movie film to have a natural, free look isn’t an easy task. Giving it a slick, deep feeling with a slight gradient identifies a designer with just the right amount of touch. Not to mention that one look at the logo tells you what it is all about. And in food business, it’s often what counts most.

LocKey by Logomotive

This was definitely my favorite of the five. It was an instant #favlogo, more, it was a striking How dumb was I not to see that! The roundness of the lock fits like a puzzle with the roundness of the key. And it was there for decades! Too bad it wasn’t designed for an existing company, but still this logotype is epic. That’s the key, you would say.

That was the first iteration of Top Five #favlogos. I hope you liked my selection, express your feelings in the comments. I like to hear what other people think of my taste. Look forward to the next roundup in some two weeks, and follow me on Twitter to see my daily picks instantly.

I made some layout changes over the weekend, intended to make this blog more readable for new users. I think the new arrangement is better to navigate, and contents of the website are easier to find. I included some social bookmarking elements (Go, Digg this post! Thanks!). All this sums up to this article on how to improve a blog, step by step.

1. Make social bookmarking easy

I’ve added Digg submit badges just below the headlines, as well as a Delicious Save to link at the bottom of each article. A few people actually click on them, so they will start working, when the site gets some more daily visitors, but they will never click them, if they are not even there — so it’s good to have them, just in case. We all know how the Digg effect works, right? (sometimes it does just the opposite)

2. Highlight important sidebar elements with icons

I’m a visual person, and I think a picture says a thousand words. So, I really don’t like to scroll through long sidebars divided just by text titles — it’s difficult to spot what I am looking for. If the titles were accompanied by a bit bigger icons, on the other hand, this would be easier. It’s the same with links, plus images enlarge clicking area. I’ve added an eye-catching Twitter icon, so now you don’t have to hit the tiny-tiny follow me link.

3. Show counters — it’s old-school, but effective

I’ve included the Views count below every article summary. It is an old method of tracking popularity, and it is very inaccurate. But for the first look at the content, it gives a superfast information on what was more appealing to others, and what was not. Also, even when inaccurate, high numbers are appealing to everybody.

4. Don’t keep the footer at the footer

This may sound strange, but actually it’s better to keep the so called footer right after the first post. Why? Well, I noticed that the most important navigational and promotional elements of my blog are in the footer, way down the bottom: Categories, Subscriptions and Recommended Links. I asked myself, who’d scroll down the bottom to add my RSS feed or save me with Technorati? Virtually no one, because who’d even guess it’s there? Thus, I’ve split the footer into an informative piece at the top (all the mentioned plus the Abouts), and a boring piece at the end of the page (pagination and licensing).

5. Exploit the perfect ad spot

There are different ways, techniques and tricks to place ads, it’s a whole branch of science I suppose. And I am a newbie here — but from the point of user experience (UX) designer, I see the space between the summary and the full article a perfect spot for a standard banner ad. It fits the text, is not too much intrusive to the layout, yet it’s easy to spot, as the reader always skims through this section, while continuing to read the post. I’m not a fan of ads myself (Safari AdBlock recommended), but I’d swallow that without choking.

6. Make sensible comments across the web

This is more of an advice on how to draw traffic, so that the previous improvements would get a chance to work. Show your presence, post relevant comments under articles relevant to your blog, which you find on other sites. There are ways to search for blogs, use Google, use Twitter search etc. But in fact, you shouldn’t force things. Just follow several sites in your interest area, and when you have something interesting to say — just write it. Link to your site, and you’re done. Sometimes you’ll find an article concerning similar matter to your earlier post, be sure to link to that, you’d be done even more.

I recently linked to one of my articles mentioning using CSS instead of images. When I read on WebAppers about a really nice CSS GMail button imitating gradient, I included the link to my text in the comments — and here’s the effect:

WebAppers referrers sky-rocketing within a day. Imagine you’d post such a nice comment on 10 fairly popular websites — you’d get quite a number just from referring.

Conclusions

I am quite happy with the makeover of this site. I know it’s just the beginning, but I want to continue improving it. If you know any more interesting tricks, or have suggestions regarding the changes I’ve made, let me know in the comments! Also, check out the old version, for comparison!

Spam is the cancer of the Internet — and I am repeating myself. I get almost 100 spam comments every week, but thanks to Akismet plug-in I described before, I don’t have to deal with them by hand. But today in my mailbox I’ve found an odd little one, which really caught my eye. This will be the first design post on the blog, but I mean, just look at it — for a moment I thought it was something from Apple Inc.

Isn’t it nice? The pills have a trendy look-and-feel. We can see a nice, faded out reflection, a shadow under each pill to give it deep look, and a very nice radial gradient, which focuses the attention on the center of the ad. There’s a web2.0 badge, because oh yes — they can ship you pills worldwide, and they mean it.

Interesting font selection makes the headline stand out, while the pills are clearly described, in uppercase, Arial I guess. Two most important credit card logotypes assure you that you don’t have to send cheques or cash by mail. But who knows where your card details will end up — still, the point is set, you can buy online, instantly.

Neat paragraph alignment, along with a bold headline styled like Apple newsletters, give a clear message of what’s going on — no crappy, encoded names like \/I4GR4. This one is pure professional, fine usability and readability approach. Is this the spam of the future? You tell me.

I’d give it a Spam Design Award, for sure. Maybe they’d be all excited. Oh wait, no, they already ate their pills…

Remember — always code your site in the most simple and flexible manner. Once you’ve designed and developed your website, and put it online, you can be quite proud of yourself. However, when you come back later to make some changes or improvements, you can discover, to your surprise, that you would spend less time making it all over again, than just updating the current code. Either way, it’s just waste of time and brains. Here are some small tips that may save you lots of time in the future.

1. Don’t use CSS classes that duplicate built-in behavior

Haven’t you at least once used a class like .first, .last? Well, you didn’t have to. You could use CSS pseudo-classes :first-child, :last-child or :first-line and :first-letter. Your code would be reusable, because you wouldn’t have to explicitly define for example the .first class on your first element — browser would find the first child and apply the CSS rules instead. As a result, you could shuffle the child elements as you wish, still getting the correct appearance. The same logic applies to other pseudo-classes.

2. Don’t use images if you can get the same effect with CSS

Take the picture below for example — you could just take the whole button as an image and be done. Instead, it’s better to have the gradient background and the icon in separate image files, and make the button frames using CSS. You could use 3 div blocks, each inside another, with 1-2 pixel margins. You could use the border property. It’s your call — but you get the idea. And making different color skins is just a matter of changing the CSS, in this case.

3. Don’t enclose div elements in a hrefs — use onclick redirection instead

I described this method of assigning links to div elements when talking about nofollow attribute. This may sound strange, but in fact it makes your code not only clearer, but more flexible too. Because you actually want the div element to have a link, not the a href. And it’s good practice to give elements the features you want them to have. Don’t cover them in feature-blankets, just because it’s common practice.

4. Don’t make item lists by hand or with scripts

There’s a rule I am just breaking now. Each of the paragraphs in this article is a heading, numbered by hand. Instead, I should use the ordered list element. Because when you end up with more than 10 elements, adding the 11th at the beginning means rewriting everything. Also, a list is a list, so again — it’s good practice to use the elements what they were designed for.

5. Use generic HTML elements as much as you can (and CSS inheritance too)

Last, but not least, it’s good practice NOT to make many classes in CSS. Instead, try to make your HTML like boxes — and style the elements indirectly, in respect to each box. For example, if you want to make the links in the paragraphs of .content as green as it gets, simply reach for them:

.content p a { color: #0f0; }

And because we are all lazy, we declare our full font description only once — in body. And then, benefiting from CSS inheritance, we just change what we need inside the boxes.

Conclusion

It’s really not an achievement to have hundreds of lines of code of HTML or CSS. The whole point is to do things quickly and neatly. And it’s really hard to make things easy. Ironically. But I hope these few things might just help you a bit. Although, I barely touched the subject. Do you have any other productivity tips you’d like to share? Write me in the comments!

In an era of cheap flights over Europe, the one not cheap thing about them is the luggage transport. In most cases, you are entitled to just one piece of hand baggage, and they really mean one — if you wish to have a purse with you, then you can’t have anything else. Also, check-in baggage is normally restricted to 20 KG, and you have to pay for each piece, plus the overweight. However, before your departure, always read the fine print about luggage conditions, as sometimes the airlines (both cheap and regular) have interesting rules.

For example, Norwegian airlines will let you take 2 pieces of check-in baggage of 20 KG each — that’s 40 KG! And last time I’ve checked, easyjet let’s you have the cabin baggage of any weight, in a reasonable amount that is, provided it fits in the specific size (that most of the modern luggage don’t exceed anyway).

Regular airlines give you even better conditions, but again, read them carefully, as you don’t get any message of the above regulations when you, for example, are booking your ticket online. And it’s a pity to read these on-board during the flight in the airline company booklet (as it happened with me). That’s it for today. Next time, I’ll write about some lifehacking behavior while on the airport.

Today’s web is all about being in the search engines, i said that before. And since Google is the biggest search engine, I can safely say that today’s web is all about being in Google — which then again all breaks down to having a high PageRank (PR). It’s magically calculated basing on inbound and outbound links to the given site. And often having bad links brings your PR down. That’s why it’s good practice to use nofollow. But I will show you how to make it even more No.

Reading about nofollow you will find that different browsers have different approach to it, and only Google does what it supposed to — doesn’t follow the link and doesn’t index the linked page (unless it was in Google’s index already). However, there is no space for improvements, and the only way to use nofollow is like this:

<a rel="nofollow" href="http://f055.net">f055</a>

But, in fact, there’s a JavaScript (JS) approach, which probably makes the link really invisible to most of the search engines. The idea is to replace a href with an onclick event that makes a JS redirection.

<a onclick="parent.location='http://f055.net/'">f055</a>

Just add proper styling in CSS and you’ve got yourself a link that works like any other, but in HTML terms, it’s not a hyperlink at all. To get the default blue link, you should use a style-sheet similar to the following:

a {
    color: #00f;
    text-decoration: underline;
    cursor: pointer;
}

It’s not something you’d use in your daily posts, but as a link to the homepage on your logo it works great, and Google Webmaster Tools don’t shout at you about repeated content linking, for example. Note that I don’t claim it is a truly invisible hyperlink, but in search engine terms, it should do the trick.

Last time I explained how to display your Twitter timeline in Expression Engine (EE) using a simple plugin. Today, I will show how to achieve the same and even more using Twitter timeline feed. This approach gives a bit more flexibility and some advantages over the method described in Part 1. We use it on ProcessOne website to push our CEO’s latest tweets.

We will be using Andrew Weaver’s FeedGrab plugin — it allows you to extract data from an RSS feed and insert it into a weblog. The keyword here is weblog. If you don’t realize the benefits yet, let me give you a hint — search. Yes, with this approach you will be able to make all your tweets searchable, just as you make your weblog posts searchable.

The second advantage is that you don’t need to give your Twitter username and password explicitly in the EE template (as you had to in Part 1). You just monitor your feed (or any other, in fact). Here’s how you implement that.

First, you need a custom field group to store your tweets. Create one in Admin > Weblog Administration > Custom Weblog Fields > Create a New Weblog Field Group. Let’s say you call it Twitter Field Group. Select Add/Edit Custom Fields to modify this new group. You have to create 2 fields — one for Twitter URL (say twitter_url), and one for Twitter message (say twitter_text). In both cases be sure that you the Field Type is of Text Input and the text formatting is set to None. In case of the tweet text, be sure to turn on field searching.

Next, you need to create a new weblog (Admin > Weblog Administration > Weblog Management > Create a New Weblog). Edit group preferences and set the default Field Group to the Twitter one you have just created. After creating the new weblog, note its ID, we’ll need that later on.

Finally, you need to create a separate, empty template. It’s good practice to have it in a separate template group too. For example, let’s make a group named feeds with an empty template twitter. In that template, just put the FeedGrab code:

{exp:feedgrab url="http://twitter.com/statuses/user_timeline/16728857.atom" 
weblog="2" 
author="1"
title="title"
date="published"
use="link|title" 
fields="twitter_url|twitter_text"
unique="twitter_url"
}

The url is the feed location. The use variable tells FeedGrab what to take from the feed (in our case, the Twitter link and the title, which is the actual tweet), while fields show where to push that data accordingly. The unique element here is obviously the tweet URL.

When you go to http://yoursite/feeds/twitter/ you should invoke FeedGrab, and the tweets should appear as separate posts in your recently created weblog. All you need to do now is to set a cron job that periodically visits the above URL to update the weblog contents. Then, just display that weblog wherever you wish on your page, just as any other weblog.

So I am leaving Paris today, coming back home to the busy times of the Holidays (oh the irony). The blog will return to normal in 2 weeks time, for now just leave your laptop and go have fun, I think. That’s what I’ll do at least. Until next time - I wish you all Merry Christmas with your family and a really full blown New Year party! Happy New Year, let the 2009 be at least not worse than this one. And an annual blog roundup below, with the most interesting posts so far.

Be smart with your CSS — or how to semantically organize your style sheets and include clever color management at the same time.

Simple yet perfect 2 column layout — or how to be lazy with your flexible content and still get a decent multi-column look, cause your eyes deserve it (remember, reading wide paragraphs makes you tired).

Reusable rounded edges using CSS and HTML — or how to be smooth and slick. And still lazy.

Google-friendly SEO for Expression Engine — or how to actually get more attention on the web.

So far you could read 16 posts over a period of less than 2 months. I’m looking forward to the New Year — more subjects are coming, like interface design, perl development and even more on how to be lazy, but get things done using simple methods. Stay tuned!

If you are a web designer, you probably noticed already that colors of your design differ on Macs and PCs. It’s mainly due to the fact that on Macs, the default gamma correction value for LCD displays is 1.8, while on PCs — it’s 2.2. As a result, PCs have deeper blacks, higher contrast and are less pale than Macs. Apple is going to change that in the next iteration of their OS X, but in fact, you could change that yourself, even way back in the Panther times. Here’s how you do it in current Leopard.

Firstly, got to your System Preferences and select Displays preference pane.

Then, choose the Color tab and select Calibrate.

This will display a configuration wizard. Just click through it, until the Target Gamma screen appears. There, select the 2.2 gamma correction, which is compatible to PCs — you will immediately notice a change in your display colors.

Finally, choose a name for your new color setting and finish the wizard.

And that’s all. Compare the result with some other Mac or PC to see the change.

Search Engine Optimization (SEO) is a huge market, because frankly these days, if you’re not in the top search results, you barely exist. That’s why it’s a good practice to take some time time and properly prepare your pages, so that the GoogleBot, and others, will like them. Especially since it really takes just a few minutes in Expression Engine (EE).

Let’s start with the basics (props to this post, unfortunately in Polish). The most important thing for Google is the URL, the title of the page, its description, the headers, and just then — the article itself. I already describe how to make Google-friendly links in EE. So lets talk about the rest now.

Title and description

Title and description is what the users will see in the search results, so try to state clearly what the page contains. In the title tag, insert the page name (it’s a good practice to combine the name and the URL, i.e. f055.net), as well as a short tag-line (like lazy design & development). Of course, don’t define your title in the template. Instead, use the {blog_title} EE variable defined in Admin - Weblog Administration - Weblog Management - Edit Preferences as Full Weblog Name. Note the Weblog Description field — it represents the description tag (and can be accessed with {blog_description} variable), so fill it in wisely. I personally tend to just extend the tag-line, but the more accurate summary of the page, the better. Thus, using these variables, in the header section of the template you just put the following:

<title>{blog_title}</title>
<meta name="description" content="{blog_description}" />

Headers

The things with the headers is simple — use them where you have a header, not just a title. So, use the h1 and h2 tag just in your post, and nowhere else across the page. Use h1 just for the post main title, and h2 for the mid-sections, just like I’m doing here i.e. with Headers and Title and Description. If your article is more deeply nested with paragraphs, and you need h3, h4 etc. ensure that they are not used outside your article. Otherwise, you could use it, but bear in mind that they highlight the content, so for example I want to focus attention on my Twitter timeline in the sidebar, so I have it described with h3 tag.

Sitemap and robots.txt

Sitemaps and robots.txt are important, because the former is a file guiding the GoogleBot around your page, and the latter tells it where to and where not to go. However, creating these documents by hand is a tedious job. Therefore, I recommend using something like Google Webmaster Tools. In the Tools section there is a robots.txt generator. I tend to exclude the images and themes, but it really depends on your needs.

With sitemaps, it’s even easier, because the Webmaster Tools sitemap generator accepts RSS feeds. Just be sure to have the feed XML on your domain, because it seems like you cannot submit an external one (for example, FeedBurner) — but that shouldn’t be a problem, since EE provides you with both RSS and Atom feeds (which you then burn, right?).

Unique titles and descriptions

So we discussed the importance of titles and descriptions. But because of all the Black Hat SEO and spam, Google is really careful with duplicated content. One way to tell the GoogleBot not to index a link, is to add a special nofollow attribute, like this:

<a rel="nofollow" href="http://f055.net">

{exp:weblog:entries weblog="{my_weblog}" orderby="date" sort="desc" limit="1" disable="member_data|trackbacks"}
...
<title>{title} | {blog_title}</title>
<meta name="description" content="Article on {categories}{category_name}, {/categories} posted {date_heading}{entry_date format='%F %d, %Y'}{/date_heading} | {blog_description}" />

As a result, each article page will have a unique title, as well as a description stating in which category the article belongs, and when it was posted. Changing the title and description of the archive page is straightforward. One problem still left is the categories view, where you see articles just on one topic, like for example here. Notice that there’s a special category keyword in the URL, followed by the category name. This keyword can vary, depending on your system, because you can set it in Admin - Weblog Administration - Global Weblog Preferences under Category URL Indicator. We will use that to make a unique title and description.

It is possible to retrieve the URL as segments. In the example above, segment 1 would be category, and segment 2 — expressionengine. Thus, lets make a condition on the index template that whenever the first segment is, in fact, category, then we will use a special title and description.

    <title>{blog_title}</title>
    <meta name="description" content="{blog_description}" />

As you can see, whenever we are displaying post from a specific category, the title will start with, for example, “Articles on expressionengine”. Here’s the drawback of this method, as we pull the category name directly from the URL, so we don’t have the pretty print name. I still can’t find how to map category identifiers to names in EE. But what we aimed is achieved, and we have all the pages with unique names.

Conclusion

It is very important to have these small optimizations implemented. The point is not only to be high in the rankings, in fact, the bigger benefit is from your content being better organized, easier accessed and searchable. Think of the future when it will be you who wants to find something quickly. These tweaks would certainly make it easier for you.

Last time I showed how to make reusable rounded edges on block elements. It was a very effective technique, but it had some HTML overhead. Today, I will show how to make rounded edges on any elements using just CSS. Just like my rounded link highlights. But it can be extended onto list elements, headlines and actually, any other element that can be partially block.

This technique is quite easy, based on the post by Arve Bersvendsen. It’s almost lazy compatible, except that it doesn’t work in IE7 — luckily, IE just displays a normal, rectangle highlight. Lets use this blog as an example, and try to make rounded edges on link highlights. First, we need to properly define the a element.

a {
	display: inline-table;
	padding: 0 1pt;

	text-align: left;
	text-decoration: none;
	vertical-align: bottom;
}

The crucial part is display — inline-table is yet another holy grail of CSS, because it lets you have block elements positioned inline. Next important thing is padding, because this technique requires proper horizontal positioning (ensure unit consistency, i.e. don’t mix pixels and points when defining a element). The rest is just for proper rendering.

Next step is to prepare the rounded highlight. Lets start with Firefox, this browser is easy, because it has built-in compatibility for defining rounded borders. So all that you have to do is define the radius of the corner:

a:hover {
	background-color: #00a1f1;
	color: #fff;

	-moz-border-radius: 5px;
}

Along the way, we defined the highlight color. Now, the fun part starts. Using special CSS selectors, we will make the browsers to put something :before and :after our links. This something will be a small white mask, which makes the rounded corner, similarly as we did in the previous article.

a:before,
a:hover:before {
	display: block;
	height: 5px;

	padding: 0;
	margin: -5px -1pt;

	background: url(tr.png) top right no-repeat #00a1f1;
	content: url(tl.png);

	line-height: 0;
	font-size: 0;
}

a:before {
	background: none;
}

The above CSS puts an additional block element above our link. It’s like a div, it starts with the beginning of the first letter in the link text, and ends with the last letter — with a break, in case the link is across more than one line of text. The content attribute is the image of top-left rounded corner. The trick is in the background attribute — we are displaying the other rounded corner as a background image. Notice that horizontal positioning in margin is in points, as mentioned earlier, consistency here is the key. Vertical positioning depends on the size of your corner image, and you should set the same negative margin and block element height, as the height of your rounded corner white patch.

The line-height and font-size values are there to remove element spacing forced by the browsers, while the additional empty background definition is there, so that no elements of the highlight would be visible, when the link is not hovered with the cursor. Similarly, we define the :after element:

a:after,
a:hover:after {
	display: block;
	height: 5px;

	padding: 0;
	margin: -5px -1pt 0 -1pt;

	background: url(br.png) bottom right no-repeat #00a1f1;
	content: url(bl.png);

	line-height: 0;
	font-size: 0;
}

a:after {
	background: none;
}

Horizontal positioning is a bit more tricky in this case, but basically it’s the same as :before. But that is all. Using these CSS definitions, you will get rounded edges on your links, you don’t have to change anything in the HTML, nor add any elements. There’s a slight, vertical glitch in Opera 9, but with proper line-height, it should not be a big problem.

So, just like that, the links have a nice, rounded highlight. Awesome!

UPDATE: And if you quickly want to cover Firefox and Safari (probably Chrome too, as it’s a WebKit thing), just use these two, built-in CSS properties:

-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Safari */

We all have them in our wallets, tons of the plastic goodies that give us cash, collect points or simply open doors (and I don’t mean by stuffing it between the doors and the frame). Now, recently I noted that in quite a lot of cases, the issuer lets us put a short text on the card — either it’s our account name, or some string identifier to distinguish the cards (like Nectar, cause you can have more than one in your family). Why not to exploit that?

In my case, I decided to identify the Nectar card with a bold sentence. You could also change the name of your bank account to some interesting sentence, because I noticed a lot of banks print that on the credit cards. No man at the counter will mess with you, when you have it clearly on the card that “I killed before” ;) Try it, make your plastic card say something important for a change.

Rounded edges are the trend now, everything has to be smooth and slick — and rounded. There are various techniques to achieve rounded edges. Today, as well as in an upcoming articles, I will describe some that are lazy enough that you should bother using them.

Let’s start with the simplest case — you have a page with solid background, but several boxes of different color. Similar to this case scenario — tweet.IM, a nice service for Twitter:

So the first idea is to make each rounded edge in blue, green and navy on a white background — but that last box has an image background, how to cope with that? Well, this gives you a hint that the idea is wrong. The correct approach is to make just one edge for each corner with the white part visible, and transparency in the place, where previously we wanted to paint blue, green and navy. Just like below (image magnified):

That particular piece is for bottom-left corner. By making the other 3 corners (rotating by 90 degrees each in your favorite image editor), we obtain a set of rounded edges, which we can apply to any box, even if its background is an image! We will need some CSS and HTML to achieve that. Also, note that the best result is when using alpha-channel PNG-24 image (IE6 doesn’t parse it, but there are lots of hacks to make it work).

The idea is to have a block element representing the box (for example div) positioned either absolutely or relatively — this way, elements inside that box can be positioned absolutely in respect to that box (it’s like a holy grail, we achieve relatively-absolute positioning!). Firstly, define a general edge element:

div.edge {
    position: absolute;
    width: 20px;
    height: 20px;

    background-repeat: no-repeat;
}

In the above code, we say that each edge block will be positioned absolutely inside its parent element, as well as have the size of the edge image, which I showed before. We will display the edge images as the background of each edge block. This way, site visitors won’t see image placeholders in the corners of the boxes, but once the browser loads them, they will magically appear. Even though no repetitions will be visible, lets set the no-repeat parameter, just in case.

Next, we prepare the actual edges, by defining div elements on each corner of the box, with the appropriate edge image displayed in the background:

div.tl { /* top-left */
    top: 0;
    left: 0;
    background-image: url(tl.png);
}
div.tr { /* top-right */
    top: 0;
    right: 0;
    background-image: url(tr.png);
}
div.bl { /* bottom-left */
    bottom: 0;
    left: 0;
    background-image: url(bl.png);
}
div.br { /* bottom-right */
    bottom: 0;
    right: 0;
    background-image: url(br.png);
}

Once we’re done with that, the one thing left is to actually attach the rounded edges to our boxes. In case of the green box in our example scenario, the code would be as follows:

<div id="green"> 
    <div class="edge tl"></div> 
    <div class="edge tr"></div> 
    <div class="edge bl"></div> 
    <div class="edge br"></div> 
    <div class="content">
        <!-- place for the box content //-->
    </div>
</div>

We use the fact that the green div is positioned relatively. Therefore, all edge div elements position themselves in the corners. We also benefit from using multiple classes in one declaration, as we don’t need to duplicate CSS code. A good idea is to set a padding value for the content div equal to the 3/4 of the size of each rounded edge image. And as you can see, this technique works really well with boxes with image backgrounds.

Next time, I will show how to make any block element with rounded edges using pure CSS! Stay tuned.

You probably noticed on the right, there are my latest Twitter messages (you could follow me, too :). There are generally two ways to fetch tweets into Expression Engine (EE). One involves using a plugin to directly access your Twitter account and display messages. The other is about monitoring your feed (or any other, in fact) and pushing new messages to a special EE weblog. Today, I will focus on the first, simpler method.

First, you need to grab a Twitter plugin, for example the Twitter Timeline developed by the EE team. The usage is easy, you just upload the contents to the plugin folder and activate the plugin in the Plugin Manager located in Utilities. One drawback of this plugin is that you have to explicitly type your Twitter password in the template.

{exp:twitter_timeline type="friends" user="email@example.com" password="password1"}

It is not a big issue if you run your EE alone, but in a group weblog it may be a problem. If so, wait for the Part 2 of my description — feed-based method. Another issue is that by default, the plugin does not convert URLs to clickable links. The plugin on the EE site downloads doesn’t seem to have any option to turn auto-converting on, but you could find a modified version on EE forums. Or you could just make a small modification I came up with — locate the line 184 and modify the if-condition as shown, adding a regular expression, which makes the links clickable.

184.	if ($count > $this->limit)
185.	{
186.		$output = preg_replace("/(?<!<a href=\")((http|ftp)(s)?:\/\/[^<>\s]+)/i", "<a rel=\"nofollow\" href=\"\\0\">\\0</a>", $output );
187.
188.		return $output;
189.	}

What the regular expression does, is it looks for occurrences of HTTP, FTP, HTTPS or FTPS and the :// symbols, and retrieves the URL address. Then it swaps that with an HTML a href element linking to that retrieved URL. Hence, you get clickable links.

After you insert the exp:twitter_timeline tag in your template, you will have your Twitter timeline fetched straight to your weblog. And then you can write long posts using EE, as well as short messages with Twitter, both at one place for your readers to have a look at.

What I hate the most is when I want to shave and the mirror is fogged. Waving a razor around my face without seeing what I am exactly doing is not safe, nor comfortable. And opening the bathroom doors and waiting for the air to filter is both long and cold. But I came up with one trick, which you probably already know, but if not — read on.

So the idea is to use a hair dryer. Plug it in, turn full on and blow into the mirror. After the initial 5 seconds of no reaction, the mirror will defog instantly.

The point is to heat the glass, so that the fog evaporates. Hence, if you’re tough enough, you could use a lighter and some spray (not recommended). But the hair dryer is the way to go. Look forward to more life-hacking tips next week.

Spam sucks. It’s like the cancer of the Internet. Blogs are a major target, as the comments are a perfect way to propagate links, keywords and such. Fortunately, we have some ways to fight it. One of them is Captcha, funny looking images with text, that sometimes are so hard to read, they actually block 100% of interaction. The other is automatic spam detection based on services like Akismet. Both are available for Expression Engine (EE), but the latter seems better.

Turning on Captcha in EE is very simple — the system already comes with a Captcha generation and verification engine, so it’s just the matter of switching one setting in the Comment Posting Preferences of Weblog Management. On a side note, it’s a good idea to require a valid email address to comment, and if you have time to waste — to manually moderate comments.

The drawback of this method is that users have to type in the Captcha phrase before submitting their comments. It’s not a very user-friendly approach, as the obfuscated images require more attention to read than usual text (although EE Captcha is quite easy on obfuscation, however this makes it weak).

Besides, if the user fails, there’s a high chance he won’t comment at all. Finally, all the server side work that has to be done is quite disturbing. It doesn’t matter for small blogs, but once you hit hundreds of comments per post, it may become a problem. Also, good Captcha engines are rare — see the comparison. Why not to outsource spam filtering?

Here’s where Akismet comes to play. It works automatically, sending all comments (and trackbacks!) to Akismet’s servers for verification. And if it decides that a particular entry is a spam, it just puts it away in EE for you to check wether it’s not a false positive.

How to setup Akismet system on EE? Well, the irony is, you need to create a Wordpress blog for that. This step is essential, as Wordpress users get a free Akismet API key for personal use — without it, filtering won’t work. So after you sign up and wait about 15 minutes for the confirmation mail with the key, you can download the Akismet for ExpressionEngine Combo.

Extract the contents and upload accordingly to your EE system folders, then just go to Extensions Manager and configure the Akismet Check with your API key. Finally, go to Modules and install the Akismet filter. Here you will get all the comments marked as spam. Remember to disable using Captchas, unless you’re really into it and want to use double protection.

I just wanted to make a sticky out of one topic on the tweet.IM service discussion forum, and found that it’s ridiculously difficult to locate this option. After quick googling I have found the solution and I thought it would be better to highlight it in case I forget.

It’s very easy once you know where to look. The sticky option, as well as announcing the topic or setting it as closed, is hidden on the New Topic page (you can also edit the first post of the topic to have access to these options). There’s a little link More Options just below the Options section.

Once you click on it, additional checkboxes appear with the options you were looking for. I have no idea why wouldn’t they just show it by default.

Apple Mac OS X 10.5, nicely called Leopard, is one of the best operating systems I had chance to work with. The others are Tiger and Panther, 10.4 and 10.3 respectively. You see a pattern here, and although I am very fond of XP and actually kind of like Vista, I’m not an MS fan. But I acknowledge the pros and cons of each of them. One irritating thing Leopard has is that when you select a document to open with a specific application, then even though you choose to always open it with that app, it doesn’t propagate to all documents of that kind. Unlike in systems from Redmond, you have to change that property in the document’s info. I’ll show you where it is.

First, you have to find the document of the kind that you want to open with a particular application. Say you want to set that .doc files are always opened with NeoOffice, instead of the default TextEdit (check the Easter Egg in Wiki entry, btw). When you view its information window, either by clicking right button and selecting Get info or using the shortcut +I, you should see something like this:

From the Open with section, select the application of your choice — NeoOffice in this case. The Change all button will become enabled, and when you click it and confirm the dialog, all documents of the same kind will from now on be opened using NeoOffice.

And that’s it. The mini icon of the document will change, and all other documents of that type will have their icon changed after the next system restart.

Your probably have seen the Matthew James Taylor perfect liquid layouts. They are really good and I recommend them, but sometimes they are just overcomplicated for the task. This blog template uses a simplified version of 2 column layout that I came up with while working on it. It’s lazy compatible and here’s how it looks like.

Let’s assume you wish to have page that is 100% wide, with a top and bottom bar across it, and 2 columns in the middle. So you could code it in HTML as follows:

...
<body>
	<div id="header"></div>
	<div id="content">
		<div id="col_left"></div>
		<div id="col_right"></div>
	</div>
	<div id="footer"></div>
</body>
...

Now the appropriate CSS for that to work as a simple 2 column liquid layout is like that:

div#header {
	position: relative;
	width: 100%;
	clear: both;
}

div#content {
	position: relative;
	width: 100%;
}

div#col_left {
	float: left;
	width: 50%;
}

div#col_right {
	float: right;
	width: 50%;
}

div#footer {
	position: relative;
	width: 100%;
	clear: both;
}

Essentially, a div that you wish to be a single column has to be style with clear: both property and positioned relatively. While the 2 columns have to be floated left and right, and have to have the width property explicitly defined. The result of the above code looks like that:

The good thing is that you can nest another 2 columns inside one of the columns, on and on again (like on this blog, the articles and the Twitter feed are on 2 different columns, while the categories and comments links under the article are again in 2 different columns). You can simplify the given code further by making a general class for the single column elements, with position, clear and width defined.

Download the HTML file to play with the code.

We all know that Search Engine Optimization (SEO) is very important. When I am looking for something on the web, I generally don’t ask around or look through link directories — I do a quick search on Google. So the higher something appears in the search list, the better for that page’s author. Cause I’m most likely to click that, not the one that is 20 pages later. Therefore, it is important how you present your content and how you link to it (because Google collects links and ranks the content). Expression Engine (EE) can’t do much about your content, but has by default, a very nasty, search-engine unfriendly way of creating links. Let’s fix it.

If you look at your website URL you will see that each entry has a link with a lot of unnecessary stuff.

Nasty URL:

http://yourdomain.com/index.php/site/entry/entry-title

Not only you have index.php explicitly, you also get the template group name site. It’s even worse when you list all entries form a category, because you get vague category identifiers, like C4 etc. But it can all be changed.

First, this article describes in details how to remove the index.php and the template group name. Long story short (that worked for me) is to download the LG .htaccess Generator and make some modifications to the initial .htaccess template you’re presented with. The .htaccess file will handle the process of rewriting the search-engine friendly URL to something EE understands. So now, you’ll be able to use entry links like the following:

Pretty URL:

http://yourdomain.com/entry/entry-title

But before that, note 2 things. One is that the LG .htaccess Generator appends the generated code to the .htaccess file — so you’d better remove it and create a blank one every time you want to re-generate it. Second things is that strangely, the default rewrite rules didn’t work quite well for me. I had to modify them to stop getting Internal Server Errors, as well as to remove the nasty index.php appearing in the front page URL after it was stripped from the www prefix.

My .htaccess rules:

# Dont list files in index pages
IndexIgnore *

RewriteEngine On

RewriteBase /

# Remove the www
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,NC,L]

# Rewrite homepage urls that have the Google Analyticis query string
# CampaignMonitor adds the query string in their emails
# "site" is the template group
# "index" is the template name
# The template group and template should point to your sites index
RewriteCond %{QUERY_STRING} ^utm_medium
RewriteCond %{REQUEST_URI} ^/$ [NC]
RewriteRule (.*) /index.php?/pages/index/&%{QUERY_STRING} [L]

# Add a trailing slash to paths without an extension
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule ^(.*)$ $1/ [L,R=301]

# Remove index.php
# Uses the "include method"
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5})$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} ^/({ee:template_groups}|{ee:pages}|members|P[0-9]{2,8}) [NC]
RewriteRule ^(.*)$ /index.php?$1&%{QUERY_STRING}

All what is left to do is to change the paths accordingly, so that you don’t have the index.php everywhere. Go to Admin - System Preferences - General Configuration and remove the name of your index page, leave the field blank. Then go to Admin - Weblog Administration - Weblog Management - Edit Preferences - Path Settings, and remove the index.php and template group name from these URLs — except the search address. Also, remove the {my_template_group} from links in your template.

The last step is to make categories more readable. Go to Admin - Weblog Administration - Global Weblog Preferences and set Use Category URL Titles In Links? to Yes. Then choose your keyword for the categories, i.e. category, in Category URL Indicator — your category links will appear like that:

Pretty category URL:

http://yourdomain.com/category/category-name

And that’s it. Now your links look nice, just like mine on this blog. Just read some about SEO, because the content optimization is all in your hands.

Expression Engine (EE) is running this blog, and I have to say — EE is so much better than Wordpress. First of all, the control panel is so intuitive. Secondly, making templates is so simple. Thirdly, writing plugins is so obvious, that I really have no idea why Wordpress is still the blogging platform. But then again, the crowd is often wrong... Anyway, one irritating and not much documented bug is that EE doesn’t show images or any formatting when using default RSS feed template. Here’s how to fix it.

The problem is in the description tag, which contents are XML encoded. The default template post is inserted in the RSS using the following code:

<description>{exp:xml_encode}{summary}{body}{/exp:xml_encode}</description>

However, this produces raw text, stripping all images and HTML formatting from your post. A quick fix for that is to replace that line with such code:

<content:encoded><![CDATA[{summary}{body}]]></content:encoded>

And that’s it. You will see your images, paragraphs and such, all displayed correctly in, for example Google Reader (my feed reader of choice, btw). I wonder why don’t they use that by default? Also, I think the default EE Atom template could work better, but if you stick with EE handling your feeds, you’d better change that RSS part. Or use Atom and FeedBurner, it has an automatic on-the-fly conversion to any feed format your users require.

Whether you agree or not, Cascading Style Sheets have become one of the key elements of modern websites. HTML was said to be just a container, possibly semantically organized, for your data. In fact, some people would love to see HTML be like XML, and I am one of them. The distinction between raw data (XML) and presentation layer (XSLT) gives you flexibility and makes data display simple. But for starters, it’s like shooting a fly with a canon. So take good care of your CSS, or you’ll end up in a big mess of data and styling. Here’s one idea I came up with while making this blog.

First of all, try not to use any styling HTML markup. Get rid of non-breaking spaces, break-lines etc. If you want to make spacing between elements, use padding or margin in CSS. If you want to make an empty line between paragraphs, don’t type 3 break-lines, use the paragraph tag and styling.

Don’t use non-breaking spaces or break-lines:

<a href="#">Link 1</a> &nbsp; <a href="#">Link 2</a> &nbsp; <a href="#"> &nbsp; </a>

[paragraph 1]<br /><br /><br />[paragraph 2]

Semantic data is the hot topic now, but creating your HTML semantically does make sense. For example, instead of calling your comments and trackbacks bottom-links, call them feedback. Don’t name classes and identifiers after styling properties, like blue-right-fadeout — it’s better to name it by it’s content, i.e. twitter sidebar.

Another good idea is to actually use lists, tables and paragraphs where they have purpose. For example, don’t just put important links to categories or subscriptions as plain a href inline elements. It’s a list of links, so why not to actually use an unordered list? Also, make use of headers, there’s a whooping 6 of them and the could all be helpful.

<h3>Subscribe:</h3> 
<ul>
	<li><a class="rss ico" href="http://feeds.feedburner.com/f055">RSS feed</a></li> 
	<li><a href="http://twitter.com/f055">Twitter</a></li> 
	<li><a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2696605&loc=en_US">Email</a></li> 
</ul> 

Don’t worry about the looks, you can always display them inline using CSS. And about that, one clever technique I started implementing is to divide the raw CSS from the color one. Not sure what I mean? Check my raw blog CSS at f055.net/blog/print/ — yes, you are right, this is what you would get if you printed the website.

What you do is create 2 CSS files, like raw.css and color.css. You define all colorful tags in the latter CSS — color, background, text-decoration all go there. The former, raw CSS is for general arrangement, div layout etc. I also used it for generic font families and sizes, but you could remove that and make it even more raw. Like when you read RFC (ok, you won’t make your site plain text…)

raw.css:					color.css:
body {						body {
	border: 0;					background: url(gfx/tiles.png) top left repeat-x #00f;
	margin: 0;					color: #fff;
	padding: 0;				}

	font-family: sans-serif;
}

There are 3 advantages of this approach:

1. You have a raw, highly accessible CSS, good for printing and universal access
2. You can easily change color themes
3. Your CSS is organized even further

It doesn’t matter how many separate CSS files you have, so think how you could make your life easier using more than one. Remember the times when people would write bulletin boards in one PHP index file? Divide and conquer is the way…

PS. Raw CSS could be stripped of all div positioning and font-styling, which is probably the ideal universal access approach.

Preparing a website to be compatible (and backward-compatible) with all the different browsers and their versions is a pain. It literally destroys everything you designed and developed, because it often requires changes in the HTML, clutters CSS with new special cases etc. and generally forces you to compromise. I claim this unnecessary — I claim you could spend less time and resources on it (and money) and it would not hurt your image as much as you think.

I have a small website that generates around 100 unique visits daily, and looking at the statistics I see two things. Firstly, Internet Explorer is not as dominant anymore as it used to be. Firefox is in the lead by more than 5%, while Opera is constantly gaining in pursuit of IE. Interestingly though, number 4 and 5 is Safari and Chrome. It really is pleasing to see four out of five top browsers to be the compatible ones.

It is not so pleasing to see that almost 38% of IE users are still on version 6, the worst nightmare of the web. Not because it was a bad browser, it was bad and most popular browser. The horror… It may be a difficult decision to focus on IE7, but its previous version had so many incompatibilities (like no alpha channel), that it actually takes more hacking than the result is worth.

I hope within a year or so IE6 should vanish into one digit market-share (it’s 20% now, according to w3schools). And the time spent on customizing your site for it could have been used in a much better way. Therefore, I say — this is the new compatibility list: Firefox, Safari, Opera, IE7 and Chrome.

What are the pros? All these browsers except IE7 are virtually the same in rendering most of the HTML and CSS code. So in fact, you end up coding for just one. And making it look good for IE7 is just a matter of fixing some margins and paddings.

What are the cons? IE6 users don’t always like what they see, but maybe that make them think to upgrade. And that’s kind of a positive side…

This post is my first one on this blog about lazy d — design and development. How to make a lot of stuff with small amount of time? Don’t create yourself more problems than you already have. Or in other words — make things simple.

You will find here many concrete materials. I release them all on Creative Commons License, so you can virtually do whatever you want with them in your personal projects, as long as you stick to the license (more details in the footer). The question you have is probably like — who am I to talk? Well… I have been creating websites since 1999. The good old days, when sites looked like straight from FrontPage, not matter what you did. I admit it, until about 2004 I really sucked. Then I sucked a bit less.

Now, in the hype of Web 2.0 (some say it’s already dead) I found myself really interested in web services & applications development, the SaaS approach, usability and web application interfaces and the general, pleasant user experience. And I found I kind of like what I create (narcism or what…).

The only problem is my head filled with ideas vs. 24 hours in a day. Now how in the world am I going to do all this?! It certainly needs a different approach. That is what I call lazy design and development. It’s hard to define the term, except that the aim is to create as much as one can in the least amount of time. You will see what I mean. I recommend you subscribe to my RSS feed, cause this trip will take longer than one post. Let’s go then.