The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

Declan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

Physical, absolute units

When we’re writing CSS, we tend to use relative, responsive units such as rem, em, etc, which scale based on user preferences and such.
Sometimes, I find myself forgetting that CSS even has units of standard, absolute measurements, but we have a lovely collection at our disposal. It is worth keeping in mind they aren’t always accurate on screen, but they usually are when physically printed.

The feedback we get from users is not what it seems! As software creators we apply a lens that makes us take user feedback in many different - often unhelpful - ways from how it was intended. Here's a list of user feedback myths to help jog assumptions.

Perhaps more than any other person in history, Leonardo da Vinci showed the kind of magic that can happen in the overlap between art and science, where much of web development lives. His methods and outlooks are just as applicable to the web today as they were in Renaissance Italy.

• Document Your Thoughts, Ideas, And Work
• Obsess Over Geometry
• Think Right-To-Left
• Find Good Patrons (Or Failing That, Good Employers)
• Iterate, Iterate, Iterate
• Feed Your Inner Polymath

https://mymodernmet.com/leonardo-da-vinci-notebooks-online/

To celebrate the 5th anniversary of my super-popular UI & UX Micro-Tips, I’ve brought together some of the most timeless tips, and bundled them in an 8-Bit format. Why? Just because :)

1. Whitespace is your design friend. Use it to improve your UIs instantly.
2. Choose a base colour, and then simply use tints & shades to add uniformity.
3. Reserve one colour for your Call to Action. Be really selfish with those CTAs.
4. Give the most important elements on the screen more prominence.
5. Present your icons with labels for easier comprehension.
6. To improve the optical balance of your headings, reduce the letter-spacing.
7. Make sure your shadows are coming from one light source. We don’t live in a land of a thousand suns remember.
8. When working with long-form content, style that opening paragraph to draw the user in.

An interactive guide to learn CSS Relative Colors.

400 Bad Request
The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).

401 Unauthorized
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.

500 Internal Server Error
The server has encountered a situation it does not know how to handle. This error is generic, indicating that the server cannot find a more appropriate 5XX status code to respond with.

Why LLMs will transform development but not how you think

it's about how AI tools are enabling a new category of software that simply couldn't exist before.

When someone can describe their specific needs conversationally and receive working code in response, the economics of personal software development shift dramatically.

Think of it this way: just as spreadsheets enabled non-programmers to perform complex calculations and data analysis, AI-assisted development tools are enabling non-programmers to create personal software solutions.

When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

This technique explores using: animation with CSS transition and transform, using the :focus-within pseudo-class, CSS grid, and accessibility considerations for dropdown menus.

Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered:

Create & export mesh gradients as SVG or to Figma. Quickly experiment with grainy noise and blur. Includes a one-click export to Figma for use in designs.

Handcrafted interactions focused on utility & beauty.

About Roel: https://pixelambacht.nl

Depending on whether the information is technical or not, you might want different font features.

29:20 - "Never grab a Monotype font"

font-variant-numeric: tabular-nums;

@font-face {
size-adjust: 110%;
}

https://wakamaifondue.com/
(what can my font do?)

https://pixelambacht.nl/

A look at text wrap balancing in CSS

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths while designing a website or a UI.

A simple guide to building keyboard-activated layout grid overlays with JavaScript and CSS for web development projects.

Here’s my starting point for custom focus outlines:

*:focus-visible {
outline-color: currentColor;
outline-style: solid;
outline-offset: .25rem;
outline-width: .25rem;
}

In this guide, I describe the available Clojure web framework options and give my recommendations.

I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf t…