This seminar lunch we went inspirational. Recently there has been a lot of talk about all the problems the web brings to the table. Issues around security and integrity are discussed frequently. Is it really that bad?

Jontahan Zittrain shows us in this inspirational video that the internet is a wonderful thing that inspires in it self. Thank you Jonathan for this great video!

Now you can write HTML and CSS lightning-fast!

Zen coding is a new, shorter way of writing HTML/CSS. It's basically a collection of snippets that you use through writing simple syntaxes.

Here's an example for HTML :

ul#name>li.item*3

provides

<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

and similary for CSS:

bdrz:w

provides

-webkit-border-radius:; 

These are just two simple examples, visit http://mondaybynoon.com/2009/08/17/the-art-of-zen-coding-bringing-snippets-to-a-new-level/ for more information.

I should mention that this is a plugin for your IDE. Currently it supports NetBeans, Coda, Texmate and Aptana. There is no official release for Visual Studio but Einar Egilsson has written his own for Visual Studio. You can find it here: http://tech.einaregilsson.com/2009/11/12/zen-coding-visual-studio-addin/

Happy front-end coding!!

One of the most difficult things to test is that the frontend works flawlessly in all versions of Internet Explorer. I've used Multiple IE as a tool in the past when testing IE6 but with the current upgrade to IE8 multipleIE doesn't work as well. besides, the IE7-mode in IE8 isn't really precise. Since then I gave IE-Tester a try. So far it has worked perfectly and it seems to render IE6 better than Multiple IE, and IE7 better than IE8-compatibilty mode.

So, to conclude, use the IE-Tester tool for all you Internet Explorer compatibility tests. Works perfectly with IE8 installed on you machine.

http://www.my-debugbar.com/wiki/IETester/HomePage

http://jquery.thewikies.com/sifr/

 Dont miss this excellent plugin! It's an add-on for jQuery that makes it easy to replace text in a web page with flash text (sIFR)

As a GUI developer it's not unusal to work a lot with photoshop. The design is later translated into CSS for the page. Wouldn't it be nice if we could create a customer-centered design directly into the browser? We'd win time and also make it easier to time-estimate the actual work.

There are occasions when customers want to redo parts of an already existing web-page. Sure, you can locate the original PSD file (if it exists) or take a screendump, paste it into photoshop and start your layerwork. But for small fixes I found a better way. I recommend 2 add-ons for the firefox browser that will make your life easier in these situations.

1. Firebug - If you haven't already installed firebug for firefox do so, I see it as a mandatory plugin for any web-developer/designer. 
2. FireShot - A screendumping tool that has a lot of features.
   

Here's what you do:

Start directly with the CSS. In firebug's "inspect-mode" you start to work with the parts of the page you need to change. Edit CSS's on the fly until you're satisfied with your supercool design addition/change. Then righ-click on the page and chose "capture visible page and... e-mail". That's it! Now you're done with your design, you've sent it to your client and now you know how to implement it, which of course helps to time-estimate when the customer asks you to go-ahead with the implementation.

Otherwise the FireShot is a great tool on it's own merits. I, however, see it as a trusty companion alongside firebug in my search to optimize my work...