There’s more to color on the web than meets the eye, and it’s about to get a lot more interesting! In this article, we’ll take a look at the best ways to use colors in a design system, and what we can expect from our colors in the not-too-distant future.
I recently had the priviledge of chatting to Phil Burgess on the IT Career Energizer Podcast about my journey into web development, and advice to new developers starting out on that path. You can listen to the episode here — it’s also available on all your favourite podcast platforms (Spotify, Apple Podcasts and more)!
I’m not one for taking loads of courses. It’s hard to find the time, and when it comes to learning I always feel that, for me, doing beats reading any day. That said, I’ve dipped into a few great courses recently that I’ve learned loads from, so I thought I’d share them with you fine folks here.
I recently received some great advice from Scott O’Hara on improving the accessibility of a demo featuring a reduced-motion toggle (for this article). The demo sets the play-state of the animation depending on the user’s motion preferences (using the
prefers-reduced-motionmedia query). Users could also click the button to toggle motion on and off, which also changes the text of the button to “Turn on motion” or “Turn off motion”. Here’s the original version:
The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, we’ll look at how to use it today to make your sites more accessible.
There has arguably never been a better time to be working with CSS. We have so many more tools available at our disposal than even just a couple of years ago. Scroll snap, Motion Path, Level 5 Media Queries and CSS functions
clamp()are just some of the CSS features that have got me excited in the last year or two, but even these are old-hat compared to the buzz around container queries, or LCH colours, for instance. It can be hard to keep up with the pace of change, but as a developer I would argue that one of the most important qualities to have is curiosity. That doesn’t mean instantly adopting new tools and features the second they arrive (and burning yourself out trying to keep up). It means being open to the possibility that there might be a better way of doing something, and being able to evaluate it objectively when the need arises.
Ahmad Shadeed recently published an article where he dug into Facebook’s implementation of the
border-radiusproperty on their card components. He had noticed, upon inspecting Facebook’s CSS, that the value for
border-radiusseemed quite convoluted for what amounted to a value of
In this tutorial we’ll talk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative colour palette.
The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.
:where()pseudo-selectors are relatively new additions to CSS, which allow us to target elements that meet the criteria in their parentheses. For example, using
:is()we can target any
ulelement with a class of
One of the key skills of a front-end developer is to be able to take designs and turn them into code. These designs are often presented as static mock-ups, which visualize the “ideal” experience of browsing the website.
Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s really no substitute for learning by doing. In fact, I’d do so far as to say that this is probably the best way for anyone to learn front end coding (and perhaps most other disciplines too!). That’s not to say that the above resources aren’t useful — I still use of them frequently. But I consider them supplementary to actually learning “on the job”. Here I’d like to share what’s been successful for me when learning new front end skills, and some things that might help you too.