psykmedia

I was recently reminded about Dmitry Baranovsky’s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by Richard Cornford in comp.lang.javascript, although not as thoroughly as by Nicholas.

I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.

Host objects

Contrary to Dmitry’s test, quiz does not involve host objects (e.g. window), as their behavior is unspecified and can vary sporadically across implementations. We are talking about pure ECMAScript (3rd ed.) behavior. Now, it’s worth pointing out that sometimes implementations deviate from the standard collectively, forming their own, de-facto standard. An example of this is for-in statement, where none of the popular implementations throw TypeError when expression evalutes to null or undefined — for (var prop in null) { ... } — and instead just silently ignore it. I tried to avoid these non-standard cases. Every question has a correct answer that can be reproduced in at least one of the major implementations.

So what are we testing?

Not a lot really. Quiz mainly focuses on knowledge of scoping, function expressions (and how they differ from function declarations), references, process of variable and function declaration, order of evaluation, and a couple more things like delete operator and object instantiation. These are all relatively simple concepts, which I think every professional Javascript developer should know. Most of these are applied in practice quite often. Ideally, even if you can’t answer a question, you should be able to infer answer from specs (without executing the snippet). When creating these questions, I made sure I can answer each one of them off the top of my head, to keep things relatively simple.

Note, however, that not all questions are very practical, so don’t worry if you can’t answer some of them. We don’t often use with statement, for example, so failing to know/remember its exact behavior is understandable.

Few notes about code

• Assuming ECMAScript 3rd edition (not 5th)
• Implementation quirks do not count (assuming standard behavior only)
• Every snippet is run as a global code (not as eval or function one)
• There are no other variables declared (and host environment is not extended with anything beyond what’s defined in specs)
• Answer should correspond to exact return value of entire expression/statement (or last line)
• “Error” in answer indicates that overall snippet results in a runtime error

Quiz

Please make sure you select answer in each question, as lack of answer is not checked and counts as failure. The final score is simply a number of wrong answers, less is better. Quiz requires Javascript to be enabled.

1. (function(){ return typeof arguments; })();
   • “object”
   • “array”
   • “arguments”
   • “undefined”
2. var f = function g(){ return 23; }; typeof g();
   • “number”
   • “undefined”
   • “function”
   • Error
3. (function(x){ delete x; return x; })(1);
   • 1
   • null
   • undefined
   • Error
4. var y = 1, x = y = typeof x; x;
   • 1
   • “number”
   • undefined
   • “undefined”
5. (function f(f){ return typeof f(); })(function(){ return 1; });
   • “number”
   • “undefined”
   • “function”
   • Error
6. var foo = { bar: function() { return this.baz; }, baz: 1 }; (function(){ return typeof arguments[0](); })(foo.bar);
   • “undefined”
   • “object”
   • “number”
   • “function”
7. var foo = { bar: function(){ return this.baz; }, baz: 1 } typeof (f = foo.bar)();
   • “undefined”
   • “object”
   • “number”
   • “function”
8. var f = (function f(){ return "1"; }, function g(){ return 2; })(); typeof f;
   • “string”
   • “number”
   • “function”
   • “undefined”
9. var x = 1; if (function f(){}) { x += typeof f; } x;
   • 1
   • “1function”
   • “1undefined”
   • NaN
10. var x = [typeof x, typeof y][1]; typeof typeof x;
    • “number”
    • “string”
    • “undefined”
    • “object”
11. (function(foo){ return typeof foo.bar; })({ foo: { bar: 1 } });
    • “undefined”
    • “object”
    • “number”
    • Error
12. (function f(){ function f(){ return 1; } return f(); function f(){ return 2; } })();
    • 1
    • 2
    • Error (e.g. “Too much recursion”)
    • undefined
13. function f(){ return f; } new f() instanceof f;
    • true
    • false
14. with (function(x, undefined){}) length;
    • 1
    • 2
    • undefined
    • Error

Let’s see the score!

I hope you liked it. Please leave your score in the comments. I’ll try to explain these questions sometime in a near future, unless someone else does it before me. Meanwhile, you can take a look at my articles on function expressions and delete operator, understanding which would help you answer some of these questions, and more importantly, explain their answers.

  

Email signatures are so easy to do well, that it’s really a shame how often they’re done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard. Why are email signatures important? They may be boring and the last item on your list of things to get right, but they affect the tone of every email you write.

Email signatures contain alternative contact details, pertinent job titles and company names, which help the recipient get in touch when emails are not responded to. Sometimes, they give the recipient an idea of who wrote the email in case it has been a while since they have been in touch. They are also professional: like a letterhead, they show that you run a business (in some countries, you’re required to do so). Here are some tips on how to create a tasteful signature that works.

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

Be Concise

First and foremost, the sender’s header (the “From” field) should have a name, and you should use a company email address if you can. If someone sees stevies747@hotmail.com, they’ll suspect it’s spam. If the sender’s header reads, “Steve Stevenson – Mister Stevenson Design Company” <steve@misterstevenson.com>, they’ll know it’s a professional email from Steve, their trusted designer.

Start by making your website a link. Many email clients convert email addresses and websites into links automatically, but not always. When you’re creating the HTML for an email, make sure the link will appear by adding writing it in HTML. And instead of linking text like “My website,” type out the URL, which will be useful for those who want to copy and paste the address.

An email signature shouldn’t double the email’s length, so make it as short as possible (three lines is usually enough). Don’t get into your life story here. The purpose of a signature is to let them see who you are and how to get in touch with you.

Make Sure to Include…

• Your name,
• Your company and position,
• How to get in touch with you.

No need to include 10 different ways to get in touch with you. As in website design, less is more; and then they’ll know which way you prefer to be contacted. Go to two or three lines, with a maximum of 72 character per line (many email applications have a maximum width of 80 characters, so limit the length to avoid unsightly wrapping). An optional fourth line could be your company address, but use caution if you work from home.

-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.comShort and Concise, but Check the Rules

In some European countries, laws dictate what items you must put in your email signature if you are a registered company. For example, UK law requires private and public limited companies to include the following:

• Company number,
• Address of registration,
• VAT number, if there is one.

You can be fined for not including this information on all electronic correspondence and on your website and stationary. Many freelancers and small businesses have ignored these rules since their inception, risking a fine. For more information on UK rules, go here. Do some research to find out what rules apply in your country.

-- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com 55 Main Street, London, UK, EC2A 1RE Company number: 12345678Don’t Include…

• Personal Twitter, IM or Skype details;
• Your home phone number or address (unless you want to be called by international clients early in the morning);
• The URL of your personal website;
• Random quotes at the bottom;
• Your entire skill set, CV and lifetime achievements in point form.

Random quotes are fun for friends, but you risk offending business associates with whom you don’t have a personal relationship. Unless you want clients contacting you while you’re watching Lost, don’t share your home details far and wide. Also, don’t share your personal contact information with your corporate partners. They certainly won’t be interested in it, and you may not want them to know certain details about you. However, mentioning your corporate Twitter account or alternative means of contact in your signature might be useful, in case your correspondent is not able to get in touch with you by regular email.

Steve Stevenson, Web Designer
web: www.misterstevenson.com
blog: blogspot.celebritiesneedhelp.com
email: steve@misterstevenson.comhome: 613.555.2654
home (wife): 613.555.3369
work: 613.555.9876
cell: 613.555.1234

55 Drury Lane
Apartment 22
Ottawa, Ontario
Canada

twitter: @stevie_liverpool_fan
skype: stevie_the_man
messenger: stevie_mrstevenson

I specialize in:
Web design
Graphic design
Logo design
Front-end development
UI design

“Flying may not be all plain sailing, but the fun of it is
worth the price.” -Amelia Aerheart

Don’t do this.

Images And Logos

Let’s get this out of the way now: your entire signature shouldn’t be an image. Sure, it will look exactly how you want, but it is completely impractical. Not only does an image increase the email’s file size, but it will likely be blocked before being opened. And how does someone copy information from an image?

This signature is too big at 20 KB and impossible to copy.

Any images should be used with care and attention. If you do use one, make it small in both dimensions and size, and make it fit in aesthetically with the rest of the signature. 50 x 50 pixels should be plenty big for any logo. If you want to be taken seriously as a business person, do not make it an animated picture, dancing dog or shooting rainbow!

Most email clients store images as attachments or block them by default. So, if you present your signature as an image, your correspondents will have a hard time guessing when you’ve sent a genuine attachment.

The best way to include an image is to host it on a server somewhere and then use the absolute URL to insert the logo. For example, upload the logo to http://www.example.com/uploads/logo.gif. And then, in your email signature’s HTML, insert the image like so:

<img src="http://www.example.com/uploads/logo.gif" width="300" height="250" alt="example's logo" />Don’t Be A Fancy PantsUse vCards With Caution

While vCards are a great, convenient way to share contact information, in emails they add bytes and appear as attachments. It is often said that you shouldn’t use a vCard for your email signature, because as helpful as it might be the first time you correspond with someone, receiving it every time after that gets annoying. Besides, the average email user won’t know what it is. Look at the example below. Would an average user know what that is?

--- Steve Stevenson, Web Designer www.misterstevenson.com | steve@misterstevenson.com

If you do want to provide a vCard, just include a link to a remote copy.

What About Confidentiality Clauses?

If your emails include confidential information, you may need to include a non-disclosure agreement to prevent information leaks. However, good practice is never to send sensitive information as plain text in emails because the information could be extracted by third parties or forwarded by recipients to other people. Thus, including a non-disclosure agreement doesn’t make much sense if you do not send sensitive information anyway.

Keep in mind, too, that the longer a confidentiality clause is, the more unlikely someone will actually read it. Again, check your country’s privacy laws. Some big companies require a disclosure with every email, but if you’re at a small company or are a freelancer and don’t really require it, then don’t put it in. The length of such clauses can be annoying, especially in short emails.

--- Warm Regards & Stay Creative! Aidan Huang (Editor) ------------------------------------------- Onextrapixel Showcasing Web Treats Without Hitch web . http://www.onextrapixel.com twi . http://twitter.com/onextrapixel --------------------------------------------------------------------------------- This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this email. Please notify the sender immediately by email if you have received this email by mistake and delete this email from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.-- This email and any files transmitted with it are confidential. If you have received this email in error please notify the sender and then delete it immediately. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of Company. The recipient should check this email and any attachments for the presence of viruses. Company accepts no liability for any damage caused by any virus transmitted by this email. Company may regularly and randomly monitor outgoing and incoming emails (including the content of them) and other telecommunications on its email and telecommunications systems. By replying to this email you give your consent to such monitoring. ***** Save resources: think before you print.Don’t Be Afraid to Show Some Personality

Although your email signature should be concise and memorable, it doesn’t have to be boring. Feel free to make your email signature stand out by polishing it with your creative design ideas or your personal touch. Using a warm greeting, adding a cheeky key as Dan Rubin does or encouraging people to “stalk” you as Paddy Donnelly does, all show personality behind simple text.

The key to a simple, memorable and beautiful email signature lies in balancing personal data and your contact details. In fact, some designers have quite original email signatures; most of the time, simple ASCII is enough.

-- h: http://danielrubin.org w: http://sidebarcreative.com b: http://superfluousbanter.org m: +1 234 567 8901 i: superfluouschat k: h = home, w = work, b = blog, m = mobile, i = aim, k = keyPaddy -- The Site: http://iampaddy.com Stalk Me: http://twitter.com/paddydonnelly-- With optimism, Dmitry Belitsky http://belitsky.info/////////////////////////////////////////////////////////////////// /// Matthias Kretschmann /// krema@xxxxxxxx.xx /// /// freelance designer & /// www.kremalicious.com /// /// photographer /// www.matthiaskretschmann.com /// /////////////////////////////////////////////////////////////////// /// media studies / communication science & art history /// /// MLU Halle-Wittenberg /// ///////////////////////////////////////////////////////////////////-- With greetings from Freiburg, Germany, Vitaly Friedman (editor-in-chief) ------------------------------------------------- Smashing Magazine http://www.smashingmagazine.com - http://www.twitter.com/smashingmag online magazine for designers and developersHTML?

If you can, stay away from HTML formatting. Every Web designer knows the pain of HTML newsletters, and while HTML is supported for email signatures, you’ll likely have problems with images and divider lines in different email clients. Some nice ASCII formatting may work in some cases.

-- carole guevin . editor //// design + digital culture magazine //// http://netdiver.net-- Min, Tran Dinh Chief Creative Designer - Frexy Studio Website: http://frexy.com | Blog: http://min.frexy.com | Email: info@frexy.com Cellphone: (84) 012 345 678- -- Rene Schmidt -- Berater für Web-Entwicklung & eCommerce, Linux-Webserver-Systemadministration & Web-Programmierung Vordamm 46, 21640 Horneburg; http://www.reneschmidt.de/ Tel: 0123.456.7.890; Skype: reneATreneschmidt.de Steuernummer 43/141/09180; USt-IdNr 219014862 -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.9 (MingW32) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/ iEYEARECAAYFAktit8sACgkQucSanG9drm2ZYACggIeQST/C226LIsd/czEmrnrR TjUAniVPXI2lkA68fy3n+nUawdAE1nJ/ =+vZR -----END PGP SIGNATURE-------- Geoff Teehan Teehan+Lax Web Platforms | Digital Campaigns | Mobile Applications | Strategic Consulting T: 416 123 4567 x 890 | teehanlax.com | twitter.com/@teehanlax---------------------------------------- Dmitry Dragilev ZURB | Marketing Lead getstarted@zurb.com http://www.zurb.com ------------------------------------------ Follow our blog at: http://www.zurb.com/blog Follow us on Twitter: @zurb http://twitter.com/zurb Check out Notable - Easiest way for teams to provide feedback on websites. http://www.notableapp.com ------------------------------------------______________________________________________ Website: www.webdesignerdepot.com Twitter: www.twitter.com/DesignerDepotRegards, Matt Ward Echo Enduring Media Web - http://www.echoenduring.com Blog - http://blog.echoenduring.com Twitter - @echoenduring - Follow me!-- Dan Rubin Sidebar Creative { Director of Training & User Experience } mobile: +1 234 567 8901 http://sidebarcreative.com-- David Leggett Tutorial9 Founder 555.012.34567 @theleggett Tutorial9.netGareth Hardy Graphic Designer | Down With Design www.downwithdesign.com gareth@downwithdesign.com +44 (0) 0123 456 789Grant Friedman www.colorburned.com Follow me on Twitter! http://twitter.com/colorburned ----------------------------------------Many thanks, Yaili. yaili.com | webdesignernotebook.com | londonchronicles.com +44 (0) 1234 567890 skype: inayailiThanks! Jonathan Cutrell, Editor FuelYourInterface.com | @FuelInterface | @jCutrell-- All the best, Rob Bowen Copywriter | Designer | Creative Consultant Co-Founder/Editor @ Arbenting & Dead Wings Designs http://arbent.net/blog http://deadwingsdesigns.comArseny -- Please consider the environment before printing this email. --- Arseny Vesnin http://designcollector.net Calendar: http://2010.designcollector.net Profile: http://designhub.ru Twitter: http://twitter.com/designcollector Flickr: http://www.flickr.com/groups/designcollector-6 Vimeo: http://vimeo.com/channels/designcollector Facebook: http://www.facebook.com/designcollectorWarm regards, Dipti Kankaliya { dipti.kankaliya@studiomarch.com } Studio March Private Limited 12 Moledina Road Camp Pune 1 India Phone: +91-20-26334002 { http://www.studiomarch.com } MarchCast – The Studio March blog { http://www.studiomarch.com/mc } -- This is an official email from Studio March Private Limited and is protected by a disclaimer. If you are not the intended recipient of this email, please visit: http://www.studiomarch.com/legal/email.

Of course, if you’re really keen to use HTML, keep it simple:

• Make sure it still looks good in plain text.
• Use black and standard-sized fonts, and stay away from big, tiny and rainbow-colored fonts.
• Don’t use CSS. Inline HTML formatting is universally accepted.
• Use common Web fonts.
• Including a logo? Make sure the signature looks nice even when the logo doesn’t load or is blocked.
• Check how it looks when forwarded. Do all the lines wrap correctly?
• You may want to load your company image as your gravatar from Gravatar.com as Joost de Valk does.
• Feel free to experiemnt with your e-mail signature: Jan Diblík uses a signature with dynamicaly changed promo image.

–

Steve Stevenson, Web Designer
www.misterstevenson.com | steve@misterstevenson.com

Separate Signature From Content

Your signature should clearly be a separate entity. Wikipedia explains the correct way to separate the signature:

“The formatting of the sig block is prescribed somewhat more firmly: it should be displayed as plain text in a fixed-width font (no HTML, images, or other rich text), and must be delimited from the body of the message by a single line consisting of exactly two hyphens, followed by a space, followed by the end of line (i.e., “– \n”). This … allows software to automatically mark or remove the sig block as the receiver desires.”

There are other less standard ways to separate your signature. While not automatic formatting, a line of —–, ======, or _______ or even just a few spaces will visually separate your signature from your email.

-- ---------------------------------- Dan Oliver (editor) .net magazine (www.netmag.co.uk) ---------------------------------- Twitter: danoliver Email: dan.oliver@futurenet.com Phone: 01234 56789 ---------------------------------- Address for deliveries: .net, Units 1 & 2 Cottrell Court, Monmouth Place, Bath, BA1 2NP ----------------------------------- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Elliot Jay Stocks Elliot Jay Stocks Design Ltd. Registered in England & Wales #1234567 http://elliotjaystocks.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -### Cheers, -DanVennlig hilsen Lars Bæk Byråleder & Tekstforfatter ................................................... JØSS! Storgata 15, 2408 Elverum Mob (+47) 01 23 45 67 xxxx@joss.as | www.joss.as---------------------------------------------- Information Architects Inc. Tokyo Zurich Oliver Reichenstein, Founder http://informationarchitects.jp http://webtrendmap.com http://twitter.com/iA ----------------------------------------------Wrestling With Your Email Client

Offering general advice on signatures is easy, sure. But anyone who has tried to implement automatic signatures in Outlook, Gmail or Yahoo knows it’s not always that simple. Here are some resources to help you get yours right every time.

Outlook
Changing Outlook’s signature is a real pain, but here’s a guide that teaches you a few things. If you use Outlook 2003, here’s another tutorial on custom signatures.

Entourage
Microsoft’s mail for mac works differently. Here’s a tutorial on how to set it up.

Gmail
Want just one basic signature? Here’s how to change the text. You’d think Google would allow you multiple signatures, links and a bit of formatting. If you’re looking for something a little more designed or wish to choose between multiple signatures, here are five ways to do it in Firefox.

Hotmail
Tips on custom images and more for Hotmail (Oh my!) can be found here. If you use Windows Live, here is a tutorial on adding images and HTML. The detail is helpful, even if the images are awful.

Yahoo
After a bit of research, I found that Yahoo used to support HTML signatures, but no longer. Here’s how to change your signature using rich text.

Apple Mail
Here is a pretty decent tutorial, with some inline HTML for formatting. It then explains how to implement it in the application. You even get some hints on how it will look on the iPhone.

Palm Pre
Learn how to customize your message on your Palm Pre here.

iPhone
Customize your “Sent from my iPhone” message here.

BlackBerry
Some information on how to change your message on BlackBerry smartphones here.

Resources

• The 4 Personalities of Poor Email Signatures
• 20 Tips for Creating an Effective Email Signature
• About the Signature Block on Wikipedia
• Email Signature Etiquette

Related Posts

You may be interested in the following related posts:

• How To Create A Great Web Design CV and Résumé?
• Business Card Design: Better Than A Plain Ol’ Business Card
• Invoice Like A Pro: Examples and Best Practices

(al)

© Kat Neville for Smashing Magazine, 2010. | Permalink | 79 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: email, signatures

Steve Jobs didn’t hold back when talking about Google and Adobe. That is great. Life is so much more fun when people speak their mind. I remember hearing a story when Sir Steve was asked why mac keyboards where the way they were. He grabbed a PC keyboard and started to rip out “stupid keys” (print screen, F keys, and the like) and swore a lot.

We love to paint with broad black and white brushes these days don’t we? Whenever I hear people talking about Google being “evil” or not…. I sit back and think about how interesting it is that companies become “people”, especially in this country.

It makes sense when you look up Corporation:

Corporations are recognized by the law to have rights and responsibilities like actual people.

That may have been a convenient (and often almost genius) abstraction by lawyers, but it is screwed up. It feels like the times when you use inheritence in a way that isn’t a ISA relationship, but it does kinda make the code nice. We have all done that, until we learned to favor composition. Corporations ISA Person? No. They are composed of them though.

I have been thinking about this ever since the recently surprise court decision the other day that “allows corporations and unions to pour unprecedented amounts of money into elections.”

Lawrence Lessig had some interesting commentary:

The court decision does feel totally wonky to me. Right now, $ has a direct bearing on elections, and allowing multi-nationals (who have the money) to rain it down makes no sense.

Fun aside

My renaissance friend Graham Glass talks about how corporations can be considered a single conscious in his series on “the mind”.

The issue with the vast number of corporations is that they are profit driven entities whose charter is to bring financial reward to shareholders. While you could argue that we as a species are driven by the selfish gene, corporations are driven by profits. Duh. Capitalism.

Google is a company. It is driven by this same goal. Now, there are various paths to a particular goal to make profits. Some companies sell things that kill people (weapons, cigarettes, etc). Others offer medical devices. All companies are not equal. Having spent time at Google, I do feel like the place isn’t just an evil cult. The people that make up the consciousness were very driven strong willed people that cared about the company mission (universal access to information and all that) more than just the $. Sure some folks are focused on that. Also, although the wool could be placed over your eyes, the guys at the top of the chain have their hearts in the right place. While Larry and Sergey are there, decisions will be made that aren’t solely based on profit. They want to create a different kind of legacy and company.

That being said, I think it is quite easy to fall into a trap such as:

If we do something here to block competition, we can make more $ and since we are Good Guys we can do better things with that money!

Google will sometimes do things that could be considered “evil” by some. That is life.

The good news with Google is that their search and ads business deals in a trust economy. It doesn’t take much to switch from Google to Bing. Google knows that. Even though they have some HUGE advantages (technical [data centers, talent], brand, etc) the low barrier to change is huge.

Not all corporations are profit driven

I had the huge pleasure of working for Mozilla, which is a mission based corporation. Wow does that make life different. While you have to sustain yourself, it does mean that you think of the world very differently. You would rather go out in a blaze of glory doing something great for the mission, than just slowly die not doing much. Every choice you make …. you think of the mission.

It was interesting to work there knowing that I actually wouldn’t want Firefox to be a 90% browser. You can fall into the similar trap as above and think:

We are mission based! If we had that domination we would use it for good!

But, not having that power in one hand is even better. Imagine working somewhere thinking “in my wildest dreams, the market would be shared somewhat evenly with the competition.” The Open Web is amazing in that there is NO SINGLE VENDOR. If we are able to keep a decent balance between browsers (and thus the platform as we know it) then we have a balance of powers. Sure, in some ways you can’t move as fast as a dictatorship, but there is a reason we don’t want dictatorships in our government (even if the trains run on time!)

And, this brings me to the Adobe half of the Steve Jobs equation. Flash isn’t dead. HTML5 is slowly going to put a dent into it if we ever get some of the use cases just right (e.g. video), but Adobe has a good penetration and can move at the speed of a dictatorship. The iPhone/iPad combo not shipping Flash will have an interesting dynamic here too, hopefully helping the HTML5 video cause. There is still much more work to be done. Flash and browser plugins have had a long history at forging new paths, and the Web can come in behind them and standardize. May that continue.

I do watch for single-owned platforms such as Flash, Silverlight, or now the Apple platform (even though they do great work on the HTML5 side of the house). I don’t want any of those vendors to have too much power. The thought of a Web that required the use of their technology makes me shudder (we have a piece of that with Flash video). Right now I can turn off those plugins and life moves on. Sure I can’t Hulu or Netflix, but that will change. I would miss some of the Flash sites that my kids use, but they could even be partially ported over to HTML5 these days.

I don’t want to “kill” these other platforms as they offer competition and spur on the industry. I just don’t want any one of them to take over. It may seem like the world would be better if we all just used Macs and iPhones and iPads, but would it? Do you think Steve would be a benevolent dictator?

Erm, no.

And thus I find myself torn. I really want to go out and by that iPad……. but when is it “too late”. Surely I have a few years right? I can enjoy the shiny new toy? :)

Die Frage stellt sich bei jedem neuen Webprojekt: Welche Browser/Browsergenerationen sollen unterstützt werden? Grenzt man die Fragestellung auf unser aller Lieblingsproblem, den Internet Explorer, ein, so lässt sich die Frage darauf reduzieren, wie man mit dem Internet Explorer 6 umgeht. Schleppt man ihn irgendwie mit (wird bei den meisten Projekten nach wie vor gemacht) oder ignoriert man ihn. Pfiffige CSS-Entwickler setzen auf Graceful Degradation oder Progressive Enhancement, um neben der schwarz/weiß Option (ja/nein) noch ein paar argumentative Graustufen einfügen zu können.

Doch so gern und trefflich die Blogosphäre sich auch über den IE6 und dessen Schwächen auslässt so gründlich wird in der Diskussion meist außer acht gelassen, dass auch andere Browser einem Alterungsprozess unterliegen. Wer testet denn heute noch ernsthaft seine Projekte gegen den Firefox 1, Safari 2 oder Opera 8? Der Firefox 1.0 beispielsweise stammt aus dem Jahre 2004 und hat damit ebenfalls bereits 5+ Jahre auf dem Buckel. Schon mal drüber nachgedacht?

In den Focus rückt diese Fragestellung bei mir durch Googles aktuelle Ankündigung, den IE6 bei den eigenen Applikationen nicht mehr zu unterstützen - worüber auch sofort wieder reichlich berichtet wird. Nur steht in Googles Ankündigung weit mehr als das Ende des IE6-Supports. Auch die nächste Generation der “Guten” - Firefox 2.x, Opera 9, Chrome 2.x usw. nähert sich dem Ende ihrer Unterstützung. Zwar findet man diese Aussage in dieser Deutlichkeit nicht in diesem Google-Blogpost, dafür beispielsweise bei Yahoo’s Aufstellung für den abgestuften Browsersupport der YUI Library.

Interessant an der Yahoo-Tabelle ist beispielsweise, dass selbst der Firefox 3.0 unter Windows Vista/7 bereits den A-Grade Status verloren hat. Von Opera ist generell nur die aktuelle Version 10 in der Liste vertreten und auch der Safari unter Mac nur in der aktuellen Version 4 gelistet wird. Alle älteren Versionen werden aktuell als B-Grade eingestuft. Sie werden selbstverständlich weiterhin unterstützt werden - jedoch bereits heute mit geringerer Priorität. Nun dreht es sich sowohl bei Google als auch bei Yahoo in allererster Linie um die JavaScript-Unterstützung/-Performance. In Sachen CSS ist es vor allem der Internet Explorer 6, der mit zahlreichen Bugs gesegnet ist, die Webentwicklern bei den immer komplexer werdenden Applikationen mehr und mehr zu schaffen machen. Doch auch bei den modernen Browsern werden die Unterschiede momentan eher größer als kleiner. Konkretes Beispiel: Die JavaScript-Performance des aktuellen Firefox 3.6 ist nicht einmal halb so gut wie die des Chrome 4. 

Abgestufter Browsersupport bei HTML5 & CSS3?

Die Frage, die ich deshalb in den Raum stellen möchte lautet: Wie geht man mit den älteren Generationen der “guten” Browser um? Ich klammere hier bewusst den IE 6 und 7 aus, mir geht es um Firefox 1.x,2.x,3.0.x, den Opera 8.x,9.x, den Chrome 1,2 oder auch Safari 1,2. Was die immer weiter wachsende Unterstützung für beispielsweise CSS3 und HTML5 angeht, so gibt es mit den älteren Generationen sicherlich weniger Probleme. Doch was ist mit waschechten CSS-Bugs?

Der Firefox 3.6 ist beispielsweise der erste Firefox überhaupt, der CSS-Tabellen endlich fehlerfrei darstellt. Alle seine Vorgänger hatten da so ihrer Schwierigkeiten. Der Firefox 2.x ließ teilweise Labels hinter Formularelementen verschwinden. Im Gegensatz zum Internet Explorer 6, der neben seinen zahlreichen CSS-Bugs ebenso zahlreiche Parser-Bugs mitlieferte, über deren Ausnutzung viele Probleme gefixt werden konnten, steht man bei den “guten” Browsern meist im Regen. Bugfixes für deren CSS-Probleme sind Mangelware. Mit der wachsenden Verbreitung von Firefox und Co. und den immer neuen Versionen/Generationen wird auch die Streubreite bei den Anwendern zunehmen und damit wird es zwangsläufig dazu kommen, dass diese Bugs “sichtbar” werden, wenn aktuelle Webtechnologien vermehrt Anwendung finden.

Wir beginnen gerade erst, die ersten graphischen Spielereien von CSS3 in unsere Projekte einzubauen. Ein falscher Schatten oder eine runde Ecke stellen in der Regel kein Problem dar. Doch wie sieht es aus, wenn wir damit beginnen, die neuen Layout-Module zu verwenden (Mehrspaltigkeit, Alternative Box-Modells, ect)? Das sind layoutkritische Elemente, was wenn hier Bugs auftreten, weil die ersten Implementationen noch nicht ausgereift waren - aber noch nicht vom Browsermarkt verschwunden sind?

Thema HTML5: Auch hier hat die Entwicklung deutlich an Fahrt gewonnen. Im letzten Jahr gab es reichlich Tutorials, wie HTML5 schon heute angewandt werden kann. Doch auch hier werden wir bei der aktuellen Geschwindigkeit Mühe haben, dass ältere Browsergenerationen von FF und Co. bereits aus den Statistiken verschwunden sind, bevor wir damit richtig anfangen zu arbeiten - oder wir warten bis 2020 (das will niemand wirklich, oder?). Dem Firefox 2 kann man nur sehr mühevoll den Umgang mit den neuen Elementen beibringen, vernünftiges Styling ist fast unmöglich. Für den IE7 und 8 gilt das gleiche, doch beide werden uns vermutlich noch eine ganze Weile begleiten.

Es bleibt spannend und unberechenbar ...

In die Browserwelt ist sichtlich Bewegung gekommen. HTML5 und CSS3 nehmen Woche für Woche weiter Fahrt auf. Die Performance-Entwicklung der JavaSript-Engines von Google, Safari und Opera (v10.5) eröffnet Möglichkeiten, die vor 1..2 Jahren noch völlig undenkbar waren - ganz unabhängig von den zahlreichen neuen Features, die uns durch jedes Browserupdate beschert werden. Jetzt also, wo der IE6 so langsam von der Bildfläche verschwindet, haben wir nicht zwingend Eitel Sonnenschein. Stattdessen wird sich der Focus einfach etwas verschieben, weg von dem einen zentralen Problembrowser hin zu den zahlreichen alten Browsergenerationen, welche die neuen Webtechnologien unzureichend oder fehlerhaft implementiert haben.

Nach so vielen vagen Gedanken würde mich Eure Meinung interessieren:

• Wie geht mit der wachsenden Versionsvielfalt und den damit verbundenen Leistungsunterschieden um?
• Wie reagiert Ihr auf Browserbugs, die sich nicht mehr so leicht fixen lassen, wie im guten alten Internet Explorer 6?
• Wie handhabt Ihr die unterschiedliche Unterstützung von Standards (HTML5, CSS3)?

Entfernen wir uns wieder von “Graceful Degradation” und “Progessive Enhancement” weil die Leistungsunterschiede im Vergleich zu heute tendentiell geringer werden oder bleiben wir als Webentwickler so tolerant wie bisher und sorgen uns in Zukunft auch um die älteren Guten, auch wenn deren Aufkommen in der Statistik geringer sein wird als es der IE6 momentan noch ist?

One day, Mike in Seattle pulled into his section of the parking garage, where there were dozens of open spaces that never fill up. “Rather than doing a 12-point turn to get right next to a concrete column, I just pulled in and called it good enough. Apparently I had been taking liberties with Mother Earth that day or something, as I was later blessed with this gem tucked under my wiper blade.”

Trix says her Dad spotted this variation on the same theme while strolling through Portland, Oregon — “a well-known haven for parking-space-hugging liberals.”

And of course, the irrational assumptions go both ways. Amber in Whitinsville, Mass. — who happens to be gainfully employed, thankyouverymuch — found this under her windshield wiper one day.

Lara in Arlington, Virginia bore the brunt of an even more retrograde brand of passive-aggressive paternalism when she committed the sin of parking a smidge over the yellow line.

related: Herbie Goes to Washington

So I've been thinking and talking to folks about this idea of having one-stop shop for all your minification needs. Minification of JS and CSS as well as image optimization helps site performance by reducing download sizes. This is good. But not a lot of people do it.

People don't do it, because it's a PITA It's simple enough, but with deadlines upon you and all that, you don't want to do an extra step. That's why having a build process helps, by automating this. But setting up a build process is yet another PITA. So it goes.

So my idea was to help busy designers and developers, that wouldn't invest their time researching which minifiers are good, downloading setting up, learning about the 10+ PNG optimization tools... That's how the the idea for the one-click OMG tool came about. (One-drag is more appropriate, come to think of it...) One tool that runs on all operating systems - Win, Mac, Linux - and delivers all minification and optimization tools you need as one package.

Running

Running the tool is as simple as drag/dropping a bunch of files and directories. Here I've dropped "wordpress" directory. The tool recursively looks into the dropped files for things it can optimize. More information here.

Download

Version 0.0.1 is here. It doesn't do image optimization, only JS and CSS minification, but please feel free to download and give it a shot. Unzip the package for your OS and run omg.exe (Windows), OMG.app (Mac), or the omg binary (Linux)

• Windows
• Mac
• Linux

Open source

The code is on GitHub. Fork and enjoy.

The developer's notes are there too - how to setup, run, package. Also a list of todos if you want to help.

Next?

This is just a preliminary version. Feel free to join, comment, suggest. Hate the name? Say so

Personally, looks like my plate is very full for the next moth or two, so I probably won't be actively working on the tool. I hope though the foundation is good enough and relatively documented, should be easy to pick up if anyone's interested in contributing.

Built with XUL

This has been a learning experience for me with XULRunner. I loved it. I love the idea of being able to create cross-OS desktop apps with JavaScript alone.

Behind the scenes, I'm using my JavaScript port of YUICompressor's CSSmin and Doug Crockford's JSMin. JSMin should be replaced with YUICompressor (or Google closure compiler) in the next release.

This article was writt by Anthony Ricaud, French OpenWeb enthusiast.

Why you need classList

A dynamic web application usually needs visual feedback from its inner mechanism or needs to display different visual elements based on users’ actions.

To change the user interface easily, you can add/remove/edit elements through the DOM API (document.createElement, div.removeChild, elt.style.color, …) but it’s easier to just update the elements’ class attribute to change how they are displayed and styled by CSS.

Let’s take an example. Suppose you want to display a form with two modes: a basic mode, and an expert mode with extra options.

This can be done with CSS rules: each mode has its own class and set of CSS code.

#anexpertinput.basic { display: none; } #anexpertinput.expert { display: inline; }

To dynamically change the classes of elements, you can use element.className. However, you may want to add, remove, or toggle just one class. There used to be two ways to do this, by using a library or by writing complex code with regular expressions. There is now another way with the new HTML5 API called classList, which is implemented in Firefox 3.6.

Let’s see how it can simplify your code and improve performance at the same time.

The classList API

Here is an example to show you what the classList API looks like:

// By default, start without a class in the div: <div class=""/>   // Set "foo" as the class by adding it to the classList div.classList.add('foo'); // now <div class="foo"/>   // Check that the classList contains the class "foo" div.classList.contains('foo'); // returns true   // Remove the class "foo" from the list div.classList.remove('foo'); // now <div class=""/>   // Check if classList contains the class "foo" div.classList.contains('foo'); // returns false: "foo" is gone   // Check if class contains the class "foo", // If it does, "foo" is removed, if it doesn't, it's added div.classList.toggle('foo'); // class set to <div class="foo"/> div.classList.toggle('foo'); // class set to <div class=""/> Demo

Let’s go back to our initial example of a form with both a basic and an expert mode – check out the live demo to see it in action.

As you can see in the code below, you can switch between the two modes with one line of JavaScript.

<button onclick="document.getElementById('box').classList.toggle('expert');"> Toggle expert mode </button> <div id="box"> <label for="nick">Name: <input type="text" id="nick" /></label> <label for="status">Status: <input type="text" id="status" /></label> <p id="help"> Blablablablabla...</p> <label for="postpone">Postpone: <input type="checkbox" id="postpone" /></label> <label for="lang">Lang: <input type="text" id="lang" /></label> </div> #box.expert > #help, #box.expert > label[for="postpone"], #box.expert > label[for="lang"] { display: none; }

See the Mozilla documentation and the HTML5 specification for more details on classList.

Performance

Using the classList API is not only easier, it’s also more powerful. Take a look at what we observed using Firefox 3.6.

Interoperability

Since other browser vendors have not yet implemented the HTML5 classList API, you still need fallback code. You can use this sample code as fallback.

To know more about the current implementation of classList in well-known JavaScript libraries, see:

• YUI
• Prototype
• jQuery (and here)
• Base2

A few of you might have already noticed: Surfing with Firebug, the Firefox extension particularly useful for developers, reveals our ever-innovative path when it comes to getting new talents on board.  The moment you open up the Firebug console, our screen welcomes you (click to enlarge):

You can then see all our positions (and the Boolean value for their awesomeness) by inspecting the Object:

Feel free to check the source code here.

If your individual coding awesomeness also gets a 1 – apply now! Of course, there’s still the conventional way as well – the careers at XING website. This article – and many more can also be found in the XING Devblog!

You can then see all our positions (and the Boolean value for their awesomeness) by inspecting the Object: