A frontend guide to the terminal
source link: https://frontendfoc.us/issues/538
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Frontend Focus Issue 538
Frontend Focus
🇺🇦 #538 — April 20, 2022 | Read on the web
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 tips and tricks along the way.
Josh W. Comeau
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.
Adam Argyle
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.
Telerik UI for Angular sponsor
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.
Vitaly Friedman
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.
Jecelyn Yeen (Chrome Developers)
⚡️ Quick bits:
- A U.S. appeals court has reaffirmed that web scraping is legal.
- WebAssembly 2.0 is now in first public working draft.
- Here are the dev-focused release notes for Firefox 99.
- Media query ranges are set to ship in Chrome 104.
- The Gamedev.js Jam 2022 is on right now if you want to join in and build your own JavaScript-powered game.
- It's not one of ours, but we wanted to extend a congratulations to Zoran for hitting 500 issues of CSS Weekly! Quite the achievement.
📙 Tutorials, Articles & Opinion
▶ 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.
Jake Archibald & Ada Rose Cannon
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.
Marc Edwards
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.”
Anil Dash
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 💻
TLDR Newsletter sponsor
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.
Dave Rupert
'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.
Tyler Sticka
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”.
Jeremy Keith
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.
Bramus Van Damme
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.
Nelson Michael
The Struggle of Using Native Emoji on the Web
Nolan Lawson
Common Accessibility Issues That You Can Fix Today
Hidde de Vries
How to Fix Your Low-Contrast Text
Ben Myers
Add a CSS Lens Flare to Photos for a Bright Touch
Shimin Zhang
Fullstack Developer — Konrad is hiring Fullstack developers to join our team in building products for the world’s most exciting companies.
Konrad Group
Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs
Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired
🔧 Code, Tools & Resources
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.
Vladimír Macháček
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.
Griffin Johnston
How to Go from 1x Deploy a Week → 1x a Day → Many Times a Day
Sleuth sponsor
PWA Resources: A Curated and Categorized Collection of Resources for Progressive Web Apps
shareup
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.
Zach Leatherman
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.
picmo
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK