What I Learned in 2018

I write a post like this every year and it feels like it gets harder each time. There was a time when I could rattle through a list of new tech, tools or libraries that I'd been using. It feels like I'm much more focused on soft skills these days or firming up what I already know.

Running Workshops

This year I've started running workshops to share knowledge with other developers. I've run short half hour workshops on Semantic HTML, Sass, Web Workers, Service Workers and Flexbox. I'm not a natural teacher or presenter but it's been great to give other developers dedicated time to learn something new and by putting together a workshop it's made me firm up my knowledge of each subject. I'd definitely recommend it as a worthwhile activity to anyone.

Design System

After a period of research and seeing what other companies are doing, I've started a design system, documenting UI patterns and styling advice. It feels good to have things documented in one place rather than in my head or having to go back and find the most recent or best usage. I've built a base system which loads HTML pages and then created a HTML page for each design element. This gives the flexibility to be able to move the content into another environment in the future without having to start from scratch. It makes heavy use of CodePen embeds to demo the result and share the HTML and CSS.

Design Audit

I've learned about design audits and ways of going about bringing designs of separate sites or software together. This is the method we're planning to adopt:

1. Select a design element, e.g. buttons.
2. Go through every page of your site or app and screenshot every different variation which you find.
3. Put all of the screenshots into an audit document.
4. Present these differences so that others are aware of the scale of the inconsistency.
5. Agree on one correct design with which to move forwards.
6. Change each variation to the new correct design. As you do so, remove that variation from your audit document.
7. Over time the audit document gets smaller and smaller until it is no longer needed.

Web Workers

Learning about Web Workers and how you can send some operations off to be carried out in the background was very interesting. I'm yet to find a real life use case for them but it certainly opens up a lot of possibilities having multiple threads running instead of just one.

Service Workers

This is another area which seems to have a huge potential, not only for performance by loading resources from the cache but also being able to provide offline content and create a Progressive Web App, a web based app which can run offline just like a native app. I'm hoping to create my own app some time in 2019.

Custom Elements

Towards the end of the year a colleague introduced me to Custom Elements. I was vaguely aware of them before but without the browser support hadn't taken too much notice. Now they're usable. Being able to make your own elements that work independently of any framework is very powerful. It means that we're not longer limited to using a single framework or framework version in an app or across teams.

ES6

The final thing that I've been working on is trying to improve my use of ES6, gradually trying to break old habits and write in the newer, easier style. The biggest breakthrough I've found is the backtick syntax, being able to write HTML and use ${variable} within it for binding. It's a lot easier than lots of document.createElement() and then setting innerHTML or textContent.

2019?

Basically I'm aiming to put all of this new learning from 2018 into practice and get some real working examples.