Issue 538 - A frontend guide to the terminal (20)

The Front-End Developer's Guide to the Terminal — If you’re looking to learn a modern JavaScript framework (like React) you’ll need to be familiar with the terminal. As Josh points out, many tools assume you have a good working knowledge of the CLI. So, consider this your ‘missing manual’ for all things Terminal — looking at all the important high-level fundamentals, and running through some...

Building a Dialog Component — This is a solid, foundational overview of how to build color-adaptive, responsive, and accessible ‘mini and mega modals’ with the <dialog> element.

Dark Patterns in UX — Dark patterns manipulate or trick users, rather than help them. It’s easy to try and trick your users with your UI, but don’t—it only breeds distrust in both you and the internet. Learn what not to do to your users from this blog post.

Designing a Better Carousel UX — Let’s be real: Carousels generally don’t have a good reputation… But here, Vitaly highlights just some of the ways we can make them more useful, looking at best practices/guidelines to improve them with honest scrolling direction, labels, thumbnails and grouped prev/next-buttons.

What's New In DevTools for Chrome 101 — Import and export user flow as JSON, support hwb() colors, view cascade layers in the Styles pane and more.

▶  What Key Was Pressed? (You Won't Believe How Keyboard Events Work) — A half-hour video diving into the intricacies of keyboard events and the best ways to go about handling user input.

SVG Passthrough Precision — If an SVG is imported into a design tool, then immediately exported as another SVG, how much precision is kept? What’s added, removed, or altered? Let’s dive in.

A Web Renaissance — “Thanks to the mistrust of big tech, the creation of better tools for developers, and the weird and wonderful creativity of ordinary people, we’re seeing an incredibly unlikely comeback: the web is thriving again.”

Keep Up with the Latest in Startups, Tech, & Programming in Just 5 Min — TLDR is a daily newsletter with links and TLDRs of the most interesting stories in startups 🚀, tech 📱, and coding 💻

Seven Web Component Tricks — A few things that may not be ‘super obvious’ about working with Web Components. Presented in a straightforward manner with code examples.

'Childish Font Sizes' — When it comes to a baseline font-size, the arguments for setting a default of 16 pixels are widely accepted. But Tyler makes the case here that there are plenty of reasons to go even larger, and shares some of the resistance that they've seen to bumping things up a bit.

Declarative Design — Thoughts on how we approach web design, with a focus on developing the right mindset: “focus on creating the right inputs rather than trying to control every possible output”.

The Future of CSS: CSS Toggles — Here’s a quick look at what a toggle property — a mechanism for associating toggleable state with a DOM element — may look like in practice. Note: It’s very early days on this proposal (it’s not even at the draft stage) so very much experimental at this point.

CSS Color Module Level 5 Reference Guide — A simple reference guide for the new color specification methods available with the (in-draft) CSS Color Module Level 5.

Stylify: A Library That Generates Utility-First CSS Based on Your HTML — This is kind of wild. You write HTML class names that look almost exactly like inline styles, then this tool will generate the right amount of CSS, along with the ‘mangled’ HTML to match.

Loaders — Here's a nice collection of two-dozen simple, lightweight loaders and spinners for your next project. Made with HTML, CSS and SVG. React, or copy/paste. The GitHub repo is here, npm package here — zero dependencies.

details-utils: A Suite of Utilities to Add More Features to The <details> Element — These, perhaps unsurprisingly, use JavaScript and you can try some examples here, which include click outside to close, animation, close via ESC key, and more.

PicMo: A Plain JavaScript Emoji Picker — Gives you the option to use platform-native emojis or cross-platform ones via Twemoji, and you can even add your own custom emojis. Try some demos here.