Tags: source

CSS { In Real Life } | Cool Tools

I knew of most of these front-end development tools (like Utopia, obviously), but some were new to me.

Generative AI: What You Need To Know

Generative AI: What You Need To Know is a free resource that will help you develop an AI-bullshit detector.

You can read all the cards on one page, print them out, or print to PDF.

WPDS - Accessibility | Resources

I didn’t know the Washington Post had a design system or that the system has this good section on accessibility.

Accessibility for designer: where do I start? by Stéphanie Walter - UX Researcher & Designer.

Stéphanie has gathered a goldmine of goodies:

Articles, resources, checklists, tools, plugins and books to design accessible products

Learn Privacy

Stuart has written this fantastic concise practical guide to privacy for developers and designers. A must-read!

1. Use just the data you need
2. Third parties
3. Fingerprinting
4. Encryption
5. Best practices

ongoing by Tim Bray · The LLM Problem

It doesn’t bother me much that bleeding-edge ML technology sometimes gets things wrong. It bothers me a lot when it gives no warnings, cites no sources, and provides no confidence interval.

Yes! Like I said:

Expose the wires. Show the workings-out.

Learn HTML

This is a great step-by-step guide to HTML by Estelle.

12 Days of Web

All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.

Mona Sans & Hubot Sans

Two new lovely open source variable fonts from Github.

An Interactive Guide to Flexbox in CSS

This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!

The Thorny Problem of Keeping the Internet’s Time | The New Yorker

This story of the Network Time Protocol hammers home the importance of infrastructure and its maintenance:

Technology companies worth billions rely on open-source code, including N.T.P., and the maintenance of that code is often handled by a small group of individuals toiling away without pay.

Remix Icon - Open source icon library

I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.

Lean Web Club

New from Mr. Vanilla JS himself, Chris Ferdinandi:

A learning space for people who hate the complexity of modern web development.

It’ll be $29 a month or $299 a year (giving you two months worth for free).

Color and Contrast.com

A lovely website (or web book?) dedicated entirely to colour contrast, complete with interactive illustrative widgets.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

Canned web development — Jeremy Wagner

Our mental model for how we build for the web is too reliant on canned solutions to unique problems.

This is very perceptive indeed.

Compounding this problem is that too few boot camps are preparing new web developers to think critically about what problems are best solved by JavaScript and which aren’t — and that those problems that are best solved by JavaScript can be solved without engaging in frivolous framework whataboutism. The question developers should ask more often when grappling with framework shortcomings shouldn’t be “what about that other framework?”, but rather “what’s best for the user experience?”.

Start at the beginning: the importance of learning the basics - localghost

I’d recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.

Excellent advice for anyone new to web develoment.

Once you start getting into interactive website territory, with API calls and fancy stuff, that’s where you need JavaScript (JS) knowledge. More specifically, vanilla JS: plain JS with no additional frameworks or plugins. The JS that your browser understands without having to do any pre-processing. It makes working with frameworks a whole lot easier, and it’ll help you to know when not to use a framework (and avoid making users download massive JS bundles when all you need is a tiny bit of code).

Manrope – free sans-serif variable font

This font is a crossover of different font types: it is semi-condensed, semi-rounded, semi-geometric, semi-din, semi-grotesque. It employs minimal stoke thickness variations and a semi-closed aperture.

Can I include a tag to a tag? Based on HTML Spec WHATWG

A neat little tool when you need a reminder about what elements can go in other elements.

Tiny Helpers

A very comprehensive collection of standalone little tools for web design and development—tools that do one thing.