What is Zen Coding?

Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.

Say I want a div with an id of frame and a class of indent, I would type:

div#frame.indent

In the Coda editor hitting F1 would turn the above into this:

<div id="frame" class="indent"></div>

That’s pretty cool, but not life changing, but how about something like this.

table>tr*3>td*4

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Okay, I know what your saying, who needs complex tables anymore! Well, email newsletters and tabular data for one, but how about this.

ul#navigation>li.link*5

<ul id="navigation">
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
</ul>

What if each link class needs to be unique?

ul#navigation>li.link-$*5

<ul id="navigation">
	<li class="link-1"></li>
	<li class="link-2"></li>
	<li class="link-3"></li>
	<li class="link-4"></li>
	<li class="link-5"></li>
</ul>

How about adding a strong tag in each bullet.

ul#navigation>li.link-$*5>strong

<ul id="navigation">
	<li class="link-1"><strong></strong></li>
	<li class="link-2"><strong></strong></li>
	<li class="link-3"><strong></strong></li>
	<li class="link-4"><strong></strong></li>
	<li class="link-5"><strong></strong></li>
</ul>

Want a bunch of caption blocks?
div.caption*5>h1+h2+p

<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>

Attributes? Got that covered too.

a[href="link$.html" target="_blank"]*3

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Okay, it’s probably clear by now that I think Zen Coding is awesome and maybe I’m getting carried away now, but lets try one more. This one helped me post all the examples above to this post by using a filter. Adding a |e filter to the end of the above example will escape all unsafe XML characters with HTML entities. Perfect for posting code examples.

a[href="link$.html" target="_blank"]*3|e

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Many editors are supported

Don’t have coda? That’s not a problem, many editors are supported and chances are you are familiar with one of them. There’s even a PHP version called ZenPHP which will generate blocks of HTML in a similar fashion. If you have any really cool Zen Coding selectors post them in the comments.

• Official Project site
• More selector examples
• List of filters

Right now Bespin only works on FireFox and the WebKit Nightly builds. Bespin is “using exciting new technology in HTML 5 that only leading browsers have implemented”. This is the message you receive when you use anything but FireFox or WebKit nightly to access the Bespin editor. They are using some advanced features of the canvas tag and there has been some controversy over their choice. Ajaxian has great article on the reasons for choosing canvas.

Since Bespin is using cutting edge web standards it will probably work in most browsers by the time it is at a production level and ready for the masses. WebKit is the engine that powers Google’s Chrome and Apple’s Safari, so it is only a matter of time before we see Bespin working in these browsers and any browser that supports the HTML 5 spec.

Internet Explorer fails again

Of course Internet Explorer 8 is coming out soon and it’s already behind the times and does not support the canvas tag at all. I don’t really see this as an issue as most Web Designers have long ago given up on this browser and since this is targeted at web designers and developers it should be a non-issue.

Working in the cloud

So what kind of things could we expect from Bespin in the future? Well I’m hoping it will be able to integrate into your website and hopefully as it grows it will gain things like source control and maybe even be integrated into some of the big content management systems out there. Think of working on your WordPress or Drupal theme in one browser tab and your admin page in the other. Bespin is open source and being designed with scalability and extendability in mind. In the developer video they give an example of collaborative coding, where you can literally see code changing in real-time in one screen while a developer types in the other. This would be great for training, code walkthroughs and tandem trouble shooting.

Bespin is far from being anything more than a fun tool to play around with right now, but the potential and imagination is there. This is definitely a project to keep your eye on.

It’s a new technology that could be dropped into our counter tops, end tables and dressers. Drop your cell phone on your dresser and it starts charging. What about wireless blenders, coffee makers, toasters, you name it. Someday your whole counter top may be a giant charging terminal. Think of what this could do for laptops. Maybe even public areas will have charging surfaces in the future. It really gets you thinking, but the real key is getting manufacturers to build this technology into our devices and have it work seamlessly anywhere. I nominate Apple first.

Check out some of these technologies on Wired and and watch an iPhone get charged wirelessly on Gizmodo.

The place is called “The Church of the Silver Ball” and if you live in the Toronto area it’s located in a desolate Missassauga industrial complex. Every month or so there is a tournament; you can also rent the place. It’s crammed full of Pinball tables and all kinds of other memorabilia from old Coke bottles to posters decorating every inch of the place. The machines range from very old to modern. Some of the older ones were a blast to play since they were a bit before my time. It’s amazing to hear your score go up with a tick tick tick sound as the flip numbers chug away.

Eventually the tournament started and that’s where it all went down hill. My friend and I had not played “real pinball” in years. Video game pinball is not a substitute for real pinball no matter how much fun you’re having. Suffice it to say, we were destroyed. For anyone who thinks that pinball is luck, think again. We would have our ball in play for 30 seconds to a minute while our competitors would have theirs in play for 5 minutes or more. Yes there are those annoying instant gutter balls, but some people have serious mad pinball skills. Maybe I’ll fair better at the next tournament. If you are in the Toronto area and like pinball, you should really check out The Church of the Silver Ball. They also sell and repair tables.

Beautiful art direction

Maybe it’s just my taste in art, but I think the art direction in this game is stunning, it’s very Tim Burton, only very vivid at times. Every level has a life of it’s own, and as I played I found myself wanting to see the next level and waiting with anticipation. The screenshots that follow are beautiful, but keep in mind these are static shots, in the game everything is animated and moving which makes the experience even more rich. 

The screenshot above is actually in game. Basically World of Goo is a puzzle game, but it’s like no puzzle game I have ever played before. The only games that I could sort of compare it too would be Lemmings or Enigmo, but make no mistake, World of Goo is about as original as you get.

World of Goo is a physics based puzzle / construction game. The millions of Goo Balls who live in the beautiful World of Goo don’t know that they are in a game, or that they are extremely delicious.

Addicted from the start

This game is extremely addictive and the demo comes with the entire first chapter of the game, which is quite a few levels. By the time you are done you should be itching for more, which is fine because there is a lot more to come if you buy the game. As I mentioned already the other great news is that this is a DRM free game. There is no serial or any kind of piracy protection on it, so do the developers a favour and buy the game if you do like it. Once you do it’s yours to install and play when ever and where ever you want. 

It’s raining Goo

Each level is set in a vibrant original World of Goo. There are different types of Goo and the way it reacts to the environment around will vary depending on the type and various other factors. My big question is where is an iPod Touch / iPhone version of this game. The whole concept screams for a touch based interface, but you will have no problems with a mouse either. 

Balloon Goo will help you hold up your bridge of Goo supports, but be careful of those spikes up top. 

Sometimes you have to build your Goo towers quit tall and it will begin to sway back and forth. If it sways too much the entire tower can come crashing down. 

Sign posts are in every level and they will either give witty humour or cryptic tips that will help you get through the level.

This is what the level selection screen looks like. You can go back to any level you have already completed to try and beat your records, which include time you took, number of moves and Goo balls collected. As you collect Goo in each level you get more and more Goo balls on the main screen of the game where you can do anything you want. The more of the game you play, the more Goo you have to play with in this sandbox mode. You can also see how tall other players have built their towers here.

Wind is also another element along with those wind mills which will actually destroy your Goo balls if they come in contact with them.

Scroll down to see the rest of the screenshots, or stop if you don’t want too many spoilers. These screenshots consist of chapter one and two. You can find out more about the game at 2D Boy where you can also download the demo of the first chapter. This is one of the most creative games I’ve played in years. 

I of course jumped on the iPhone bandwagon, but before I did I spent a lot of time researching many of the smartphones out there. At the time just before the second iPhone was launched there were a lot of great smartphones on the way, but none were out yet. Now that the iPhone has been out for a few months a lot of new devices have emerged. One of the reasons I bought the iPhone was because Apple was ahead of the curve, now a lot of the other manufacturers have similar offerings, but are any of them really iPhone killers? I decided to do a quick smartphone round up to see what’s currently out there.

Android is the newest cool kid in town

Of course you can’t talk about smartphones without talking about Android and their new G1 offered by T-Mobile in the US. This phone by HTC came out a couple of weeks ago, but even before a phone was announced, the Android platform had huge buzz in the blogsphere and tech news sites. I wrote about it several times and was pretty hyped about it myself when I wrote Android Android Android! everyone’s talking about Android and I still am pretty buzzed about it.

Android promises a lot of innovation and is really shaking up the industry. First it’s open source, which means anyone can play with the innards of the code. Up until now this was practically unheard of, and this could be the end of locked down phones, which I think is great. I can do what I want with my computer, I should be able to do the same with my smartphone, which is basically a portable mini computer. This is one flaw with Apple’s phone, without special applications I can’t even treat this phone as a storage device or copy my music on to different computers. The Open Handset Alliance is another great by product of Google Android.

Everything I have read about the G1 says that it is no iPhone killer, but there is massive potential and that this is just the start. Google is on to something here, and one of these days there may be a Google phone that is an iPhone killer. Remember this is Googles first phone.

See Engadget’s review on the G1

Blackberry Bold and Storm

Research In Motion is one of the big players and has been around for a long time. The big toys from RIM this year are the Bold and the Storm. If any phone could have swayed me from my iPhone purchase it would have been one of these. In the end I’m glad I went for the iPhone because the Bold does lean towards business users, and the Storm is taking forever to come out.

The Bold is the newest and greatest Blackberry in town, with a higher resolution than the iPhone but smaller screen this thing is crystal sharp. I have played with it once and it is pretty clear, but you have to wonder what the point of such high resolution is with such a small screen? It’s a nice phone, but it still feels a bit flimsy, I’m not a fan of how easily the Blackberries tend to scratch, but with that said if I had to pick a second best phone, I would probably go with a Blackberry.

The Blackberry Storm may be a different story, this is RIM’s attempt at the consumer market and is a direct competitor to the iPhone. It has what RIM calls “tactile-touch” which is basically a spring loaded screen. You basically have to push all the way down to hit a key, which sounds pretty cool. I’m used to not having to push down, so it might be hard to get used too. So far I have read that the new touch screen is awesome, to not so great, so only time will tell. I think what you are used to will have a lot to do with how much you like the screen. Blackberry is late to the game and a lot of people who use touch screens have gotten used to how they work now, but this may appeal to the users who have not switched to a touchscreen yet.

You can find first impression reviews at Gizmodo and Engadget along with a gallery of PowerPoint slides on The Boy Genius Report.

Sony Ericsson XPERIA X1

Sony’s EXPERIA X1 has been rumoured and talked about so long that I almost forgot about it. Its already available in some places, but still pretty hard to find.

This is a pretty sweet looking phone, but I’ve read a lot of good and bad about it. First it’s Windows Mobile, so depending on how you feel about Windows Mobile, your decision may be already made. There have also been claims of slow response on the touch screen and that the keyboard keys do not provide enough tactile feedback. Either way, I don’t think this phone will be viable until it’s on major carriers. Rumours are that it will be available on AT&T at some point.

Unboxing of XPERIA X1 and some nice high resolution shots and a very early review at The Boy Genuis Report.

HTC and a world of cool smartphones

HTC has so many cool phones it’s hard to mention them all. They build the G1 Android phone and had a hand in the XPERIA X1. They also released the Touch Diamond this year, and the Touch Pro will be out soon. There is also the really cool HTC Touch HD which unfortunately will not be showing up in North America, but it has been called an iPhone killer.

HTC definitely makes a whole lot of cool phones, and I’m sure we will be seeing Google’s Android on a lot more HTC phones.

Nokia

Nokia is huge in a lot of the world, but not so much here in North America. That may all change if they start bringing out slick phones like the Nokia 5800 XpressMusic. It comes with a stylus so you can write out your messages, so if a stylus is your thing, then the XpressMusic might be for you.

Engadget has a hands on review.

Samsung instinct

Samsung has also jumped onto the touch screen smart phone bandwagon, the big one this year was the Samsung Instinct. I’m a huge fan of Samsung products, especially their LCD displays, but for some reason their phones just don’t do it for me. The instinct did perk my interest, but then the reviews came out and laid my anticipation to rest. The Omnia on the other hand seems to score a bit higher, but it’s a windows mobile device and it doesn’t have the prettiest interface. Samsung is also a member of the Open Handset Alliance, so we may see a Google Android phone from them in the future; fingers crossed.

Openmoko, truly open

Although a much smaller player in the smartphone field we cannot forget Openmoko, the truly open source smartphone platform and the device it runs on, Neo FreeRunner. I have been keeping an eye on Openmoko for many of the same reasons I watch Google’s Android platform. I believe in the concept behind these platforms, but Openmoko steps it up a notch, this is a truly open source project, everything from the OS to the phone itself; even the CAD files can be downloaded so you can modify the actual phone itself. Openmoko is definitely a hardcore computer geeks dream.

More information can be found on the wiki entry for Openmoko. The phone can be purchased at the official Openmoko website, and you can also visit the Openmoko wiki website which has much more information.

Apple iPhone, the darling of touch smartphones

And of course this roundup wouldn’t be complete without the iPhone. Apple has lead the way here the same way they lead the way for mp3 players. Whether you love or hate Apple there is no denying that they are market leaders in innovation and have consistently upped the bar delivering a compelling product that’s hard to beat. Almost every review I have read on smartphones uses the iPhone as a measure of quality. You always hear references to Apple’s iPhone or “the iPhone Killer” catch phrase.

That doesn’t mean the iPhone has no flaws, one of the most mentioned features that is missing is “copy and paste” functionality. I don’t know if Apple will ever add this, but it’s a much needed and requested feature, especially for sending web addresses to people in applications such as Twitterific. There is an option to email someone a link from Safari, but copy and paste would be a lot more useful. Another thing that needs fixing is the browser, although it’s a fantastic mini browser, possibly even the best, it does tend to crash an awful lot, at least for me. That said, I am more than happy with my iPhone and it really is the best device I have bought in years. Many of the games are simple but very addictive, just what you want on a small device like this and there is a constant stream of new applications every day. When I was showing my phone to someone once they asked “is there anything it can’t do?”, well yes, it won’t do your laundry yet.

An amazing year for gadgets

It really has been a great year for great gadgets and smartphones in particular. I can’t help but get excited about 2009′s lineup. Where will Apple be this time next year, and the one I’m really keeping an eye on is Google’s Android. It will also be interesting to see how the Blackberry vs Apple battle turns out, I personally think Android is more of a threat than the Blackberry. The Blackberry has a strong loyal consumer base and owns the business sector. They are also making their phones pretty, because lets face it, even business men and women want to have a cool cell phone.

For the third iPhone next year I’m predicting a higher resolution, better GPS and a better camera as obvious places to work on. I hope all the other smartphones have surprises up their sleeves also. 2008 was an amazing year, lets hope 2009 is even more ground breaking.

So how does Google Earth hold up on the iPhone? Well obviously it’s a bit trimmed down, but still much better than I thought it would be. You can see photos, Wikipedia entries and move around the earth in the typical intuitive Multi-touch way that we are all so used too. You can even twist two fingers to rotate, and if you tilt your device the accelerometer kicks in and allows an angled view so you can see the 3D surface of the Earth. You can also use the iPhones GPS to find your current location on planet Earth. The application runs fairly smooth on the iPhone, but I did notice a few hiccups which sometimes even happens on the full Google Earth.

I have taken several screenshots below. You can also check out the official Google announcement on the Google blog which also has video, but the application is free, so check out the app store and get it now.

Toronto via GPS.

Wikipedia entry via iPhone Google Earth

Mount Everest in all its 3D glory

On Tuesday, October 14th Apple has invited media to a special notebook event, so the wait to find out if the rumours a true will be over tomorrow. AppleInsider has more details and photos of the laptop.

Techcrunh also has details on the new laptop and CrunchGear will be there for the announcement.

(update: Engadget will have Live web coverage of Apple’s “The spotlight turns to notebooks” event.)

Tonight I played Space Monkey for the first time for about 30 minutes and I must say this is a really fun iPhone game. It’s a unique take on the puzzle genre and the graphics are good, the sound is great, and right now the price can’t be beat, it’s free for a limited time. Get Space Monkey right now while you can and check out the screenshots below (Spoiler, I show one of the bosses).

You can see more pictures on Engadget of both the desktop and the laptop. I only wish I could get this sucker with Windows XP, I am not a fan of Vista. The desktop comes with a 500GB hard drive, 3GB memory, Wi-Fi,  built in camera, wireless keyboard and all the expected bells and whistles including high performance with the exception of a great grpahics card, you get the Intel GMA X4500HD. There are three models to choose from ranging in size from 20 to 25 inch. Here is a first look YouTube video.

Another thing that makes a setup like this great and no one gets this more than Apple is the clean look. Unfortunately, this baby will come plastered with tacky stickers all over it and these things are not fun to peel off. Why on earth they would do this to such a beautiful machine is beyond me, but this is the way every windows machine works. The same can be said for cellphone branding. How come apple is the only manufacturer that does not uglify their hardware? Here is the Sony Desktop uglified with tacky stickers.

Anyway, after peeling off the stickers and upgrading to Windows XP, this system should be pretty sweet. Will wait to see this baby in the stores, but I’m still leaning ever further towards a Mac these days. My next computer upgrade is still a ways off, but it’s nice to see windows machines getting the Apple type treatment.