Skip Content

Becoming a front-end master

15 Mar 2020  ⁃  Notes

Recently, I encountered an article last November from Chris Coyer which was very helpful. This last year has been really rough for a number of reasons. I haven’t felt like myself, much less a front-end master. Chris’ article prompted me to explore some new things in the free moments I have and practice my skills in small but meaningful ways. In the following weeks and months I followed the recommendations—and I’ve learned a lot.

Try out a static site generator

Check. This site uses Eleventy for static site generation. Changes are tracked with Git and pushed to a Github repo using command line. The site is deployed automatically by Netlify using continuous deployment.

Read a bit about Serverless

This was an area where needed to do some reading. With so many services out there, there’s a lot to follow. Often the best way to get started is to build something. The next challenge was helpful.

Build a beautiful form in HTML/CSS

I spent some time to learn all about form validation and see how much can be done in just HTML, then HTML plus some CSS, then with some vanilla JavaScript. I cannot get over how easy it was to implement a form with Netlify forms. Take a look and say hello.

Install the Axe accessibility plugin for DevTools

Landmarks must have an accessible name

Landmarks (i.e. <main>, <header>, <nav>, etc.) need to have a unique role or label. In addition, it was also a good time to review how to section your HTML (I had an <aside> inside the <article>).

Alternative text should not be repeated as text

This can be a more annoying one to achieve when working with a CMS or templated build. Especially when the image is used as navigation. It’s easy to just reuse the label for the page name instead of a creating a new value for the ALT attribute.

Spin up a copy of Fractal

This has helped me think about how I would build a front-end as components. Fractal isn’t tied to a specific framework, which I really like. I have experimented with React and ... for this purpose in my day job, but I’m not ready make a decision. Fractal gives me a chance to build and document a strategy ahead of time without any commitment.

It was helpful to see how others have structured their Pattern Libraries in Fractal. Perch Pattern Library and Bits for 24 Ways are a few good examples.

Implement an SVG icon system

Icon fonts are so easy to implement, but also have some negatives. Inline SVGs are a great approach especially if the icons are used in the build template. Chris’ book, Practical SVG introduced me to a lot more than I knew existed about SVG for web.

This site is all about simplicity so it uses in-lined SVG—a pretty good icon system. For the larger application I work on, maybe something like this. For a large application, icon fonts are still somewhat appealing because of the ease of caching.

Implement a service worker

Read a book about them. Do something very small. Check out a framework centered around them. Service workers install the front-end of this site directly on your device after the first visit. In practice, a service worker can offer great performance benefits that go beyond traditional caching.