Becoming a front-end master
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.