Content filed under “Quick Tip”
How to use the lesson project files to rescue your project permalink
Sometimes you get a bit stuck in a course, so this quick tip teaches you how to get back on track
Responsive borders with CSS outline permalink
Use a set to remove array duplicates permalink
Limit line lengths to increase readability permalink
Make a button element look like a link permalink
Easy horizontal and vertical centering in CSS permalink
A safer way to vertically fill the viewport permalink
Contains CSS attribute selector permalink
Aligning description lists with CSS Grid permalink
Squishy button active state permalink
Create a line break while maintaining inline status permalink
Use grayscale filter to see where you are relying too much on colour permalink
Picture element as a progressive enhancement permalink
Create a JSON feed with 11ty permalink
Flow CSS Utility permalink
Dynamic footer copyright date in Eleventy permalink
That time of the year is coming up, so this trick will keep your website footer up to date on your Eleventy site.
Load all focusable elements with JavaScript permalink
A handy helper function that will load all user-focusable elements inside a parent element for you.
Use CSS Clamp to create a more flexible wrapper utility permalink
A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.
Control changing numbers with font variant numeric permalink
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 permalink
Convert a messy multidimensional array into a nice single dimension array of unique items.
Add scroll margin to all elements which can be targeted permalink
We can add an extra bit of space to targeted elements, thanks to modern CSS!
Add inline SVG directly in your CSS permalink
Disable client-side React with Next JS permalink
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.
Use transparent borders and outlines to assist with high contrast mode permalink
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.
Prevent squishy elements with flex none permalink
You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.
Define delay for each property in the transition shorthand permalink
You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.
