Breaking Web News 2020

By Matt,

March 2020

Web Dev
After a hectic first couple of months of 2020, Matt has finally caught up with some interesting web news.

Custom Styling Form Inputs With Modern CSS Features

If you've been using pseudo elements for styling custom checkboxes and radio buttons, you'll know it can be a fiddly beast. Modern CSS features give some new ways to manage these. Custom properties, support queries, not pseudo classes can make this a bit nicer but the real bonus is being able to add pseudo elements to input fields!

This post by Aaron Iker over at CSS Tricks is a good run down of how to upgrade your custom checkbox fu.

Read the post Custom Styling Form Inputs With Modern CSS Features

Creating a full bleed CSS utility

Not sure how many times I've needed to do this, but its lots. Andy Bell's technique for breaking out of a fixed-width container and going edge-to-edge is great. Like all great CSS "tricks" it made us all wonder how we never thought of it (nice new site design too)

Read the post Creating a full bleed CSS utility

Utopia Responsive Typography... er... thing

This looks like a very clever bit of CSS for scaling your type on a modular scale. I like how they've split the explanation into a designer perspective and a developer perspective. Disclaimer: I don't fully understand this yet 🥴

Read more about Utopia

Why the GOV.UK Design System team changed the input type for numbers

Great post from the must-read tech blog from the GDS folks. Really interesting and some good points on why the number field is problematic and probably doesn't work like you would expect and some tips on how to get a text field to work more like you'd want the number field to.

Read the post Why the GOV.UK Design System team changed the input type for numbers

Bonus reading: Phil Nash on using some of the same techniques and some cool autocomplete values to improve the UX of one time code fields - HTML attributes to improve your users' two factor authentication experience

Google Fonts does variable fonts now

If you don't know what variable fonts are, go take a look online. They are pretty cool.

Check out the variable font options at Google Fonts

Tiny Dev Helpers

Here's a handy site with a bunch of useful single-purpose online tools to help with web dev

Check out Tiny Helpers

Composer plugin for installing and managing Twig bundles

A handy plugin so you can install and manage a bundle of Twig files in your templates directory. Super handy for installing and updating your code across multiple projects.

Github link to Twig Bundle Installer

Handling Whitespace in Twig

This tweet showing the cool ways you can handle whitespace in Twig is definitely one to bookmark

See Tweet from @nystudio107

While You Weren’t Looking, CSS Gradients Got Better

CSS Gradients: Brilliant but I can never remember how to wrote them. The recent updates are going to make that part a little bit easier. This post by Ana Tudor at CSS Tricks explains all.

Read While You Weren’t Looking, CSS Gradients Got Better

Have you seen any cool stuff lately? Why not tell us all about it on Twitter