Quick Tip

How to stop Figma using your work to train their “AI” models

A really quick video to show you where the right settings are and what settings to disable to protect your work.

Define delay for each property in the transition shorthand

You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.

Prevent squishy elements with flex none

You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.

Use transparent borders and outlines to assist with high contrast mode

It’s tempting to use a sharp box shadow for focus styles to both remove the default focus ring and to get around sharp outline corners. With this method, you can create problems for Windows High Contrast users, so this quick tip will help you get the best of both worlds.

Disable client-side React with Next JS

Frameworks like Next JS output a lot of heavy-duty client side JavaScript, so this quick tip stops that to have a huge positive impact on performance.

Add inline SVG directly in your CSS

Add scroll margin to all elements which can be targeted

We can add an extra bit of space to targeted elements, thanks to modern CSS!

Control changing numbers with font variant numeric

Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

Convert a 2D array into a flat, 1D array of unique items

Convert a messy multidimensional array into a nice single dimension array of unique items.

Use CSS Clamp to create a more flexible wrapper utility

A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.

Load all focusable elements with JavaScript

A handy helper function that will load all user-focusable elements inside a parent element for you.

Dynamic footer copyright date in Eleventy

That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.

Flow CSS Utility

Create a JSON feed with 11ty

Picture element as a progressive enhancement

Use grayscale filter to see where you are relying too much on colour

Create a line break while maintaining inline status

Squishy button active state

Aligning description lists with CSS Grid

Contains CSS attribute selector

Easy horizontal and vertical centering in CSS

A safer way to vertically fill the viewport

Make a button element look like a link

Limit line lengths to increase readability

Responsive borders with CSS outline

Use a set to remove array duplicates

How to use the lesson project files to rescue your project

Sometimes you get a bit stuck in a course, so this quick tip teaches you how to get back on track

CSS Logical Properties

Create spacing that works regardless of the direction of your content or the environment of your users.