Content filed under “Quick Tip”
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.