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.
Read more
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-motion media 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:
Read more
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.
Read it on Smashing Magazine
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 min(), max() and 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.
Read more
Ahmad Shadeed recently published an article where he dug into Facebook’s implementation of the border-radius property on their card components. He had noticed, upon inspecting Facebook’s CSS, that the value for border-radius seemed quite convoluted for what amounted to a value of 8px:
Read more
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.
Read it on Codrops
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.
Read it on Smashing Magazine
The :is() and :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 p, h2 or ul element with a class of test:
Read more
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.
Read it on Smashing Magazine
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.
Read more
A few weeks ago I blogged about inspecting sizes in the browser dev tools, lamenting the lack of a way to toggle between different unit types for length values:
Read more
Somehow it escaped my knowledge until recently that the CSS element() function is supported in Firefox. In fact, it has been for a good while (although it still needs a prefix). “What is the element() function?”, I hear you cry. It’s a way to render a HTML element as an image value for use in our CSS. The example given on MDN is using an image rendered on a <canvas> as a background image. That’s a pretty cool use case, although the CSS Paint API already allows us to create a paint worklet and use it in our CSS – check out this tutorial by Temani Afif. Perhaps that’s one reason why browser support seems to have stalled?
Read more