2019 in Review

Mon Dec 30 2019

I’m going to try to keep this 2019 retrospective brief, but like many people, I find it cathartic to look back at the year’s triumphs and disappointments (not dwelling for too long on the latter), and ready for myself for the year ahead.

I prefer to avoid setting myself unrealistic or unattainable goals for the year ahead. But I do like to set myself small, achievable ambitions and milestones, which won’t bring the world crashing down if I pivot from the goal, or if life gets in the way, but will bring a bit of satisfaction to have something to check of the list by this time next year. So, please excuse me while I take a (slightly self-indulgent) look at the year just gone.

This blog

I’m constantly blown away by the (relative) success of this blog. Over the past year I’ve received so many nice messages that have boosted my confidence, from people who have found my articles helpful, as well as a few people in the industry I really look up to and admire for their work. It never gets tiring to hear, and constantly reminds me why I write. So, thank you, if you’ve read this blog and learnt something, or shared it with your friends.

I set myself the aim of publishing at least two articles per month, and I’ve stuck to that – allowing myself the occasional dry spell of a few weeks, but always making up for it later. This feels about right, and I have no plans to decrease the output in 2020.

One goal I set myself at the end of last year was to do more illustration for this blog. I’ve done reasonably well at illustrating concepts for articles, but not really as much as I’d like. Hopefully I can improve on that a bit more in 2020.

A couple of (controversial?) decisions I took in 2019 were, firstly to allow ads on the blog, and secondly to add analytics. I was approached by Carbon about advertising on this platform, and although I was initially skeptical, a bit of investigation (including recommendations from well-known industry figures) convinced me that they are a reputable partner. Ads are currently limited to the bottom of articles, so they are as unobtrusive as possible. Rest assured, I’m not making huge amounts of money from this, and I’m not currently planning to expand the advertising any further, so you won’t see intrusive ads creeping in during the coming year.

Adding analytics was a personal decision, and one that I contemplated for a while before taking the plunge. I find it useful and interesting to see what kind of articles people are reading on the site, and seeing a gradual increase in users over time is more rewarding than the instant-hit validation of Twitter. But I still consider this a trial period, and it might be something I remove a little way down the road.

What’s next for CSS {IRL}?

Top of the list is I’m considering a move away from Gatsby, the static site generator this blog currently uses. I don’t hate Gatsby, and it has a lot to recommend it – notably the process of getting started was super smooth, with great documentation and tutorials. But as the site has grown, I’ve found it more challenging to add new features, and come up against a few roadblocks.

While I was using React daily, it made sense to continue to use a React-based SSG, but now that I’m no longer using it for my day-to-day work I feel this is a good opportunity to branch out and try something new. I’m considering 11ty, and both Andy Bell and Mike Riethmuller have published starter kits, which I expect to learn a lot from, or even use directly. Another possibility is Gridsome, which is Vue-based. I’m starting to learn Vue for work, so it seems like it could be a good opportunity to try something new.

I want to completely rebuild the site from the ground up, and that includes a brand new redesign too. A lot of the functionality feels bolted on, rather than being integral to the design from the beginning, so it would benefit from due consideration. I want the redesign to include a better way to search for articles, and find other articles related to the one you’re reading.

This alone is a pretty ambitious goal, and one that I anticipate taking up a fair bit of time. Aside from that, I don’t foresee any major changes from a content standpoint. I find myself naturally writing a little less about CSS Grid these days and a little more about other CSS features specifications that interest (like scroll snap and custom properties, but I won’t be leaving Grid behind entirely. As I use it more and more in my daily workflow, I’m sure I’ll always find new things to write about it. I hope next year I’ll find some time to really explore the possibilities that subgrid brings.

Speaking

In 2019 I became a Mozilla Tech Speaker, and spoke at a total of nine events. While that’s not a lot for some people, it’s certainly enough for me! Some personal highlights were Upfront (a conference I’ve attended several times), State of the Browser (which I was honoured to be invited to speak at for the second year in a row!), and London CSS, run by the dynamic duo, Ana Rogrigues and Oliver Turner. While there are elements of speaking at conferences that I really enjoy, and I’m grateful for the opportunities that speaking has brought me, I find the whole process quite stressful. Make no mistake, preparing a talk takes a lot of work! Between speaking and writing articles, I’ve spread myself pretty thinly this year, and in 2020 I want to give myself sufficient time for creative personal projects. I still plan to do some speaking (I have a couple of engagements lined up already), but I’ll be more selective about which opportunities I say “yes” to.

Writing

As well as writing on this blog, this year I’ve written articles for Web Designer magazine, LogRocket and 24Ways. The latter is a web developers’ advent calendar I’ve been reading for years, so closing the year by having one of my articles published on it felt like a huge personal achievement. I was blown away by the reception the article got and am honoured to be in such great company!

Being asked to write a cover feature for Web Designer magazine was an exciting new challenge, and gave me the perfect excuse to explore some new CSS specifications I hadn’t previously had the chance to dig into.

I’m open to writing for other publications in 2020, but want to maintain a healthy balance, reserving most of my writing for this blog.

Work

After a year of working with React Native at mobile ordering startup Ordoo, in November I returned to agency life, as lead front end developer at Atomic Smash. A year of (mostly) writing Javascript has been enormously valuable to me as a developer, but I ultimately wanted to be working on the web again, and especially with CSS. I’m excited to be working with such a great team, and to tackle some exciting challenges in the New Year. Every week provides me with new discoveries, and my work has already furnished me with a growing backlog of writing topics – which I hope to explore on here in the months ahead.

Personal

More generally, as we’ve reached the end of a decade, I want to take a moment to look back and feel proud. I can scarcely believe I transitioned from a career in events management less than five years ago, and managed a large part of that major career change while raising my son. My journey into tech was a gradual process (maybe I’ll write about it someday), it hasn’t always been easy, and I’m thankful for the support of my family. For anyone beginning their journey, especially under similar circumstances, please know that it is possible. If you need any resources or guidance, please send me a message and I’ll do the best I can.

CSS

This being a CSS blog, I can’t leave without a few thoughts on what excites me about CSS for 2020!

Subgrid

Towards the end of 2019, Firefox shipped support for subgrid, part of the CSS Grid Level 2 specification. This has the potential to be a bit of a game changer, and could inspire a whole lot of people to adopt CSS Grid who have otherwise resisted until now...but unfortunately, at the time of writing, no other browsers show signs of implementing it. Until Chrome jumps on this, any real-world use is going to be limited at best. (There is an open issue.) Let’s hope 2020 is the year that other browsers move towards support.

Custom properties

I’ve written quite a lot about custom properties on this blog, and I’m finding more uses for them all the time (I collated some here). As adoption increases, I think we’ll see more and more creative and useful applications for them.

Logical properties

In a nutshell, where we have CSS property names that refer to the left, right, top or bottom of an element (think margin-left or border-top), logical properties reframe these to refer to the start or end of the block or inline axis. In a horizontal left-to-write language (like English), margin-left becomes margin-inline-start, for example. But in a right-to-left language, this would be the same as using margin-right.

There’s a lot to unpack here, and this article by Adrian Roselli is a good starting point. The implications for designing and developing internationally and inclusively for the web are pretty exciting.

Variable fonts

I’ve had a lot of fun experimenting with variable fonts in the latter half of 2019, and can’t wait to see what new variable fonts become available in 2020. As well as potentially significant performance improvements, variable fonts open up a whole host of creative possibilities. I hope we’ll see designers and developers grasping these as the technology develops and more foundries jump on the bandwagon. For inspiration, look no further than Mandy Michael’s 24 Ways article, Interactivity and Animation with Variable Fonts.

Personalisation

Perhaps 2020 will be the year the idea of “pixel perfection“ finally dies a death. We already have very little control over how users consume our content – device type and screen size are all unknowns, as are things like whether someone is using a screen reader or keyboard navigation, or has zoomed the web page or adjusted their font size, not to mention the environmental conditions in which someone is using your website (low-light conditions, for example). With the advent of Level 5 media queries, we can cater for all sorts of possible scenarios and provide a more tailored experience (such as providing a dark theme by using the prefers-colour-scheme media query), while recognising that our websites are absolutely not going to look the same for everyone using them.

Flex gap

Firefox has already shipped support for the gap property in flexbox – a seemingly little thing that could make building flex layout a lot easier! Now let’s hope some other browsers follow suit (looking at you, Chrome).

No doubt there’s much more that I’m forgetting right now. But the future of CSS is looking bright!

Likes: 0

Reposts: 0

Mentions: 2