The Difficult Search for Front-end Engineers

My company, Prosper.com, is having a difficult time finding front-end engineers. We’ve gone through many résumés, screened many people, and brought in a few for interviews. But none have the chops. This has made me very thoughtful about my role and my career.

A coworker of mine said that she knew several recently jobless people who know “more than front-end” as if the “more than” would sell them to me. I might have been kind of rude when I said “I don’t want more than front-end.” I just want a couple people who know front-end development well.

I think the role is under-appreciated by everyone. A service we used to find engineers matched us with back-end programers, but their front-end candidates were all a bust. Why? Because even professional technology screeners don’t know what to look for and there are very few good front-end web developers. The difference between Paul Irish and 99% of web developers is vast. The job seems easy perhaps, but a foundation is key.

For example, many front-end engineers (all I’ve interviewed) do not know CSS specificity well. That is, they don’t know the rules that determine what style an element will have. This is important to know! It removes the guesswork from styling and saves developers a lot of time. And if you don’t know it well, you will write poor markup and CSS and create hell for your client and anyone who inherits your code. You curse them basically, forcing them to write even worse markup and CSS to gain control.

Here is a list of questions I’m asking front-end candidates this week. I’ll also give the kinds of answers one would want to hear, so that screeners have a guide.

What are the rules that determine what style will be applied to an element?

element -> class -> id -> inline

———–> (increasing specificity)

(!important) element ->  class -> id -> inline

———–> (increasing specificity)

Why would you use a JavaScript framework?

1) reduce cross-browser worries. 2) cleaner, simpler code. 3) plugin library.

What are some elements introduced with HTML5?

Ex. video, audio, canvas, aside, section, nav, footer, time, input type=”tel”, input type=”email”….etc.

How might you use new HTML5 elements while supporting browsers that do not recognize the new elements?

HTML5shim (“shiv”) for < IE 9.

What are some neat things you can do with CSS3?

Animations and transformations. Alpha transparency…

What online resources do you use?

MDN would be a good answer. W3Schools would not be.

What are your favorite webdev blogs?

Remy Sharp, Paul Irish, adactio.com, CSS-Tricks, A List Apart

What’s a closure?

Enclosing code in a function, and a good practice.

How might you keep a resource from being cached on the front-end?

Add a random string as a query parameter to the resource URL.

What are some ways to improve page speed?

Defer JavaScript, minify and combine linked resources, use better compression for images, use the Google Library API for common scripts, CDN, image sprites…

What is the last web development book you read?

Introducing HTML5, The Book of CSS3, Mobile First are good examples.

How might you transfer state between pages?

Cookies, HTML5

When would you use gif, jpeg and png?

PNGs compress better than GIFs and are very well supported by modern browsers, so use PNGs. JPEGs for photos. GIFs for simple animations possibly if you had to.

When would you use Flash, Canvas and SVG?

Canvas elements are raster images and so if you want to manipulate pixels, use canvas. SVG is vector art. Don’t use Flash.

 

Relic Source Found

I got a blank page today, and I wondered why. So I looked at the source, and these are the contents:

<title></title></head>
<!– Redirection Services SJL01WRED05 H1 –>
<frameset rows=’100%, *’ frameborder=no framespacing=0 border=0>
<frame src=”http://www.somedumbwebsite.com/index2.htm” name=mainwindow frameborder=no framespacing=0 marginheight=0 marginwidth=0></frame>
<frame src=”/?a8734haka8dr781346=true” NAME=a33 frameborder=no framespacing=0 marginheight=0 marginwidth=0></frame>
</frameset>
<noframes>
<h2>Your browser does not support frames.  We recommend upgrading your browser.</h2><br><br>
<center>Click <a href=”http://www.somedumbwebsite.com/index2.htm”>here</a> to enter the site.</center>
</noframes></html>

Upgrade my browser to support frames?! When could this have been written? Was there a time when frames were a new feature that old browsers didn’t support as opposed to an old features that new browsers do not? Wow.

Seems evil — no title, just frames. Good thing I got a blank page!

The Difference Between Pseudo-Classes and Pseudo-Elements

A pseudo-class is a feature of an HTML element that can be styled but is not available via the document tree. Pseudo-classes are often used with the anchor tag: a:link, a:hover, a:visited, and a:active. Some pseudo-classes can accept values such as lang :lang pseudo-class: p:lang(fr), :lang(de).

Pseudo-elements are abstract sub-elements of an html document: ::first-letter and ::first-line are examples.

If you were an HTML element the state of your eyes being closed, open or squinting would be a pseudo-class, and your pinky toe would be a pseudo element. Go ahead and do this exercise yourself to sort pseudo-classes and pseudo-elements. 🙂 What would your grandmother be? (hint: “behind”)

Previously, pseudo-classes and pseudo-elements have looked exactly the same: element:pseudo-something. Which is kind of nasty considering the mental energy that goes into separating these ideas. But the Level 3 recommendation has improved the visual distinction. Pseudo-classes continue to use one colon, and pseudo-elements, going forward, use two.

Pseudo-elements with one colon will always be supported for existing pseudo-elements, but that’s not true for pseudo-elements that are introduced, so we aught to get in the habit of using two colons.

Burn the following selectors into your mind:

::after
::before
::first-letter
::first-line
::selection

and to contrast:

:target
:focus
:enabled
:disabled

Should we worry about browser support for the new syntax of pseudo-elements? Nah, progressive enhancement, Baby! It is indicated that earlier versions of Internet Explorer do not support two colons but I have confirmed that IE 8 supports all, with the exception of ::selection, perhaps. In this case I would use two colons and not try to write both in your style sheets.

symbols

Dingbats and Symbols for Web Developers

Here are some nice symbols which you can simply and safely use to decorate web pages. I’ve confirmed these HTML entities work in IE7+, Firefox, Opera, and Webkit.

Instead of showing you all the boring symbols that water down the list making hard to find exciting ones* like poison and snowman, I’ve ordered them not by number, but by how useful I imagine they are for web development, and how “cool” I think they are.

The HTML Entities as well as the translated CSS and JavaScript hex codes are provided for your webdev convenience.

*exciting for a web developer

Glyph HTML CSS JavaScript
&#x2620; \2620 \u2620
&#x2606; \2606 \u2606
&#x2605; \2605 \u2605
&#x2604; \2604 \u2604
&#x2603; \2603 \u2603
&#x2601; \2601 \u2601
&#x262e; \262e \u262e
&#x2600; \2600 \u2600
&#x263E; \263E \u263E
&#x2654; \2654 \u2654
&#x2655; \2655 \u2655
&#x2661; \2661 \u2661
&#x2602; \2602 \u2602
&#x260E; \260E \u260E
&#x260F; \260F \u260F
&#x2614; \2614 \u2614
&#x2619; \2619 \u2619
&#x2618; \2618 \u2618
&#x261C; \261C \u261C
&#x261D; \261D \u261D
&#x261E; \261E \u261E
&#x261F; \261F \u261F
&#x262F; \262F \u262F
&#x2639; \2639 \u2639
&#x263A; \263A \u263A
&#x263B; \263B \u263B
&#x263C; \263C \u263C
&#x266A; \266A \u266A
&#x266B; \266B \u266B
&#x2666; \2666 \u2666
&#x2693; \2693 \u2693
&#x2698; \2698 \u2698
&#x2699; \2699 \u2699
&#x269B; \269B \u269B
&#x26A0; \26A0 \u26A0
&#x26A1; \26A1 \u26A1
&#x2704; \2704 \u2704
&#x2708; \2708 \u2708
&#x270C; \270C \u270C
&#x270D; \270D \u270D
&#x270E; \270E \u270E
&#x2712; \2712 \u2712
&#x2714; \2714 \u2714
&#x2717; \2717 \u2717
&#x271D; \271D \u271D
&#x271E; \271E \u271E
&#x271F; \271F \u271F
&#x2720; \2720 \u2720
&#x2721; \2721 \u2721
&#x2722; \2722 \u2722
&#x2723; \2723 \u2723
&#x2724; \2724 \u2724
&#x2725; \2725 \u2725
&#x2726; \2726 \u2726
&#x2727; \2727 \u2727
&#x2729; \2729 \u2729
&#x272A; \272A \u272A
&#x272B; \272B \u272B
&#x272C; \272C \u272C
&#x272D; \272D \u272D
&#x272E; \272E \u272E
&#x272F; \272F \u272F
&#x2730; \2730 \u2730
&#x2731; \2731 \u2731
&#x2732; \2732 \u2732
&#x2733; \2733 \u2733
&#x2734; \2734 \u2734
&#x2735; \2735 \u2735
&#x2736; \2736 \u2736
&#x2737; \2737 \u2737
&#x2738; \2738 \u2738
&#x2739; \2739 \u2739
&#x273A; \273A \u273A
&#x273B; \273B \u273B
&#x273C; \273C \u273C
&#x273D; \273D \u273D
&#x273E; \273E \u273E
&#x273F; \273F \u273F
&#x2740; \2740 \u2740
&#x2741; \2741 \u2741
&#x2742; \2742 \u2742
&#x2743; \2743 \u2743
&#x2744; \2744 \u2744
&#x2745; \2745 \u2745
&#x2746; \2746 \u2746
&#x2747; \2747 \u2747
&#x2748; \2748 \u2748
&#x2749; \2749 \u2749
&#x274A; \274A \u274A
&#x274B; \274B \u274B
&#x274D; \274D \u274D
&#x275B; \275B \u275B
&#x275C; \275C \u275C
&#x275D; \275D \u275D
&#x275E; \275E \u275E
&#x2776; \2776 \u2776
&#x2777; \2777 \u2777
&#x2778; \2778 \u2778
&#x2779; \2779 \u2779
&#x2780; \2780 \u2780
&#x2781; \2781 \u2781
&#x2782; \2782 \u2782
&#x2783; \2783 \u2783
&#x278A; \278A \u278A
&#x278B; \278B \u278B
&#x278C; \278C \u278C
&#x278D; \278D \u278D
&#x2794; \2794 \u2794
&#x2798; \2798 \u2798
&#x2799; \2799 \u2799
&#x279A; \279A \u279A
&#x279B; \279B \u279B
&#x279C; \279C \u279C
&#x279D; \279D \u279D
&#x279E; \279E \u279E
&#x279F; \279F \u279F
&#x27A0; \27A0 \u27A0
&#x27A1; \27A1 \u27A1
&#x27A2; \27A2 \u27A2
&#x27A3; \27A3 \u27A3
&#x27A4; \27A4 \u27A4
&#x27A5; \27A5 \u27A5
&#x27A6; \27A6 \u27A6
&#x27A7; \27A7 \u27A7
&#x27A8; \27A8 \u27A8
&#x27A9; \27A9 \u27A9
&#x27AA; \27AA \u27AA
&#x27AB; \27AB \u27AB
&#x27AC; \27AC \u27AC
&#x27AD; \27AD \u27AD
&#x27AE; \27AE \u27AE
&#x27AF; \27AF \u27AF
&#x2668; \2668 \u2668
&#x2638; \2638 \u2638
&#x2691; \2691 \u2691
&#x269C; \269C \u269C

Yet another way HTML5 is cleaner

I don’t think I’m a total neat-freak. However, it’s so satisfying to change a doctype such as this: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

to the HTML5 version: <!DOCTYPE html>

Looking at the source code of HTML5 evangelists, I’m noticing script tags that look like this: <script>boo();</script>

instead of this: <script type=”text/javascript”>eek();</script>

Isn’t the type attribute required? No longer, and thank goodness. Here’s what the spec says:

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is “text/javascript”.

This is small, but kinda not so, considering how often we use it. I mean, we’ve been adding the required “type” to our script tags when 99.99% of our scripts have always been text/javascript. In ten years I don’t think I’ve ever included another browser scripting language this way. Now it’s the default as it should be. Nice!

10 Things a Web Developer Should Do

After simply delivering content, here are ten things we should do to make web sites better.

  1. use semantic HTML
  2. defer JavaScript
  3. change doctype to HTML5
  4. have content load top down
  5. check JavaScript with JSLint
  6. minify CSS
  7. use HTML5 input types now
  8. avoid content shifting onready
  9. consider the mobile view
  10. load resources with the Google Libraries API

This is a short list; there are many other things you can do. But this is a good list. Make sure you have these things covered, or have a good reason why not. (Um, what’s your reason?)

I’ve looked for other practical web to-do lists online, and I found none. Searching “ten things a web developer should do” returns lists of “ten things a web developer should know”, or collections of topics — “HTML5”, “Mobile”, “Social” — which are not specific tasks, and not very helpful.

So there you go. I hope you do these things. And I hope that I can get to the content of your site, quickly and without going nuts, on my iPhone with AT&T service. 🙂

Google Chrome Frame as the ultimate polyfill

Google Chrome Frame is a plug-in that makes Internet Explorer (6,7,8) act like a modern browser in two big ways; basically it 1) speeds up Javascript, and 2) allows some HTML5 tags.

This is delightfully obnoxious; Google decides it needs to lift these slow, lingering versions of a competitor’s browser to the modern age, using the name “Google Chrome Frame”? You suck Microsoft browser, and I’m going to upgrade you with myself!

But why would IE 6 users, for example, add the Google Chrome Frame plug-in instead of just upgrading their browser? If the users are at all savvy, if they realize the need for a browser with faster JS and a toe pointing towards standards, would they be using IE 6?

And why run IE (6,7,8) + Google Chrome Frame instead of simply Chrome, Safari, Firefox, or Hell, Opera? It’s like adding another engine to a 1980 Ford Fiesta or something — not inside it but on top of it. You look a mess! Get a new car!

But that’s me missing the point, I think. GCF is not for Internet Explorer users, but for web developers who want to be free from supporting this very large group. We simply add a line to our page which directs users to install GCF, and in this way we can justify no longer supporting “non-modern” browsers to our bosses. Your boss will be easily swayed — the slightest argument works on them in this case. It worked on mine.

GCF is like the ultimate polyfill, a term Remy Sharp coined to mean “a shim that mimics a future API not currently supported in existing browsers.” But what makes it nice for web developers is that in this case the polyfill isn’t extra code we must write, but instead something we get our users to do for us, but mostly FOR THEMSELVES. Did I mention way faster Javascript?

HTML hunk Paul Irish uses it in HTML5 Boilerplate, so it is totally endorsed, and must be good. It’s a symbiotic way for Google and web developers to speed the evolution towards HTML5 along.

Smooth text everywhere!

My web browsing experience, at least at work, is still not beautiful. The text that I read has no font smoothing on Windows XP, in any browser but Internet Explorer.

As an aside, here’s why: Microsoft has ClearType turned on in Internet Explorer in XP (The most common OS) by default. The result of this is that all the other browsers look poor in comparison. This seems like a blatantly evil move by Microsoft, but maybe more evil is not having ClearType turned on in Windows XP by default. Poor Windows XP users.

I realize that I can turn on ClearType, but as a frontend web developer, I should try to see what my users are going to see (current OS stats), and therefore I leave it off. It’s hard to know how many XP users leave ClearType off, but I’m guessing the majority.

Getting back on the topic…. In Windows browsers, my text is ugly and jagged. But there is a way to render beautiful, smooth text. Well, there may be more than one way, but the solution I have is Cufón.

Cufón takes a font file, strips it of all the glyphs you don’t need, converts it to an SVG font, then to SVG paths which are converted to VML paths, and then into JSON with functional JavaScript. Converting to VML paths ensures that font replacement is very fast in Internet Explorer. Also, I like that the font can be customized and reduced to just the glyphs you need; since font files can be very large, this compression is a nice benefit. The “cost” of this is a font file and a Javascript file that add up to be about 50K, although you should serve your Javascript gzipped.

You can read more about the details of how Cufón works here.

One gotcha with Cufón-generated text is that it is not selectable, which may not be very accessible or adhere to web standards.

As users we can optimize our web browsing experience however we like, but as fronted developers our job is to make our pages look as good as possible, for as many people as possible. We can’t just ditch our browser. But the extra effort pays off, because for those who are not used to seeing text rendered nicely, a slick heading, for example, really stands out.

@font-face: the good news and the bad news

We can now use custom fonts in our CSS in every major browser, including IE 6, with very little effort.* This is very exciting, and it seems very powerful, but we don’t see custom fonts all over the web. Why not? I’m going to try to explain this as simply as possible.

One reason is that font files are big – sizes very widely but they can easily be 1.5M – and gzipping won’t save much more than 50%. A font will take a while to load into your browser – custom fonts are not free. The side effect of using a font file is different on different browsers. From memory, my impression is that Safari shows no text until the font is loaded and Firefox shows you FOUT (Flash Of Unstyled Text). Neither behavior is desirable.

Another is the licensing issue. How can I legally use Helvetica Neue® in my web application? That’s a topic of it’s own, but if you were planning on using Gotham Medium headings because your web designer heard about @font-face, just forget about it.

On the bright side, Google Web Fonts alleviates both font size and licensing issues by hosting a library of well-compressed Open Source fonts. Phew! Now it’s again very exciting (although less so, because it’s not all fonts) and powerful (but fonts are still heavy and need to be downloaded by browsers). But to that point, other web sites may use the same Google-hosted web fonts you do, and those fonts may be cached by your user’s browser. Now are they free? Hm. Maybe.

I thought perhaps I could relax about custom fonts at this point, but I ran into an issue with Safari. The Google Web Fonts I included simply didn’t work in Safari (for both Windows and Mac, I think), although we are told Safari is supported. Maybe the issue has been fixed, but it made me lose some faith – do I want to be at Google’s mercy for hosting these fonts and ensuring they work in all browsers?

I decided to be untrusting and conservative, and instead considered providing my own font files. I thought about how fonts do not have to be large – some have less information, fewer characters…  I looked for and found some light and license-free fonts, and here I share my bounty with you:

Font Squirrel (the ones that don’t say “offsite” download for free)
10 Great Free Fonts for @font-face embedding
104 Free Fonts for Web Designers and Logo Artists

Don’t forget to gzip your fonts.

*IE simply requires an extra css declaration.