Zach’s ugly mug (his face)

Zach Leatherman

A Front End Engineer’s Manifesto

September 02, 2012

Early last year at Nebraska Code Camp 2011, I gave a talk to a bunch of .NET developers about my own personal perspective on the world of Front End Engineering.

True to form, I developed the slide deck for the web using BigText, sausage.js, and a few other self-developed but yet-to-be released plugins. I uploaded it world wide for my presentation but never published the URL publicly. Unexpectedly, last week a developer from France found it and shared it on Twitter. Well, the cat is out of the bag.

I’ve been reluctant to share the slides because I certainly don’t want developers to take them as dogmatic truth. Rather, I’d love for people to see a forest using trees they’ve planted themselves. Try to take a step back and see the big picture when you’re problem solving on the front end and figure out what’s important to you.

So with a bit of trepidation but without further adieu:, A Front End Engineer’s Manifesto

If you’d like to see this talk live, let me know in the comments.

The site is also available on GitHub.

Talk Description

In the fast paced world of Front End Engineering, change reigns supreme. Dormant for years, the Browser Wars are back and have broken web development wide open. Led by competing vendors championing their own implementations of HTML5, CSS3, and other Web Standards, they’re unchaining us from the desktop computing environment. We’re seeing web browsers in our favorite Mobile Phones, E-Book Readers, and Tablet devices. Does your web site work with the Android Browser? On the iPad? How about the Kindle browser? IE9? Do you even know what version Google Chrome is on?

As web programmers, how do we keep up with this blistering, nauseating pace while still taking time to improve our skills? I’ll go through a set of principles and guidelines I use to simplify the world of Front End Engineering. These criteria will help you write better future-compatible flux-resistant code. They will help you evaluate new toolsets, APIs, frameworks, and even file formats and codecs. They will improve the quality of your web sites and applications.

Many thanks to Nate Koechley, who influenced some of this manifesto with his talk on Professional Front End Engineering, and to the countless other developers and designers who have made equally important community contributions.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Performance in Responsive Web Design (2012)
CSS3 Job Transition
12 Replies
    1. Matt Steele Disqus

      02 Sep 2012 at 11:41PM
      Might be a good talk to give at Barcamp?
      1. Without JavaScript or CSS, or without mobile Webkit, my site may not look pretty but will still be functional. Not every web application can be functional without JavaScript. My sites will be functional without JavaScript only if it's possible and profitable.I acknowledge that Performance is CriticalIt depends on scale of enterprise. Again, it's not always profitable and should be considered.I will learn at the root, not the abstraction: JavaScript before jQueryI hope you know lambda calculus already.I am front end engineer too.
        1. Well... I think you might add CSS to allowed HTML tags.
          1. @ciemborPerformance optimization is always critical and profitable. Everyone notices the boost in speed. Smaller latency is better conversion. Should be a priority even for the smallest projects.
            1. Shirsendu Disqus

              03 Sep 2012 at 04:46PM
              Please upload a version on SlideShare. This needs to spread!
              1. @WojtekSometimes, good architecture is much more important than efficiency. This is why people use Ruby on Rails over CGI in C or Backbone over pure functional JS. Sometimes it's more profitable to use libraries with needless code instead of writing code from zero.
                1. I just noticed it can be even more rationalized!Assume that your time is as valuable as the time of users.delta_t - difference of the time of code usage before and after optimizationx - prognosed number of code usagesy - time spent on optimizing the codez - prognosed waste of time in future development processprofit = y + z / x * delta_d
                  1. Oh, should be:profit = x * delta_d / y + zof course
                    1. Kent Brewster Disqus

                      04 Sep 2012 at 03:10AM
                      I love this, and I think I understand where it's coming from. Question: how do you feel about supporting IE6?
                      1. Zach Leatherman Disqus

                        11 Sep 2012 at 09:52PM
                        @Matt: It sure would have. Your talk was, of course, brilliant.@Kent: Of course, I fall in the camp of Yahoo's graded browser support and have relegated it to C-grade.
                        1. Ruma Bhat Disqus

                          24 Oct 2012 at 07:23PM
                          I have got to say I really enjoy your site, the way you write is wonderful!
                          1. Black Hat SEO Disqus

                            20 Apr 2013 at 06:17AM
                            In practice, Google identify 'bad neighbourhoods' by devaluing back-links from the same IP subnet. In order to offset the fact that this text generally reads horribly it will often be placed at the bottom of a page and in a very small font size. In this age of computers, people are looking for information on the internet and they visit various websites where the particular piece of information they want is found.
                              Social Card Image Preview

                              This is what will show up when you share this post on Social Media:

                              How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)