#452 — August 5, 2020 |
Frontend Focus |
Getting the Most Out of Variable Fonts on Google Fonts — A detailed primer on how variable fonts work, why they matter, and how to use them from someone who has spent the past few years working on one (Recursive Sans & Mono). Stephan Nixon |
Can You Design A Website For The Five Senses? — Good question, though I imagine we’re a way off scratch-and-sniff being a thing in the browser 😅. Anyway I digress — Suzanne Scacca takes a look at ways you can use the senses to put your visitors in a better headspace when they enter your site and interact with your brand. Smashing Magazine |
6 Best Practices for Responsive Dashboard Design — Responsive dashboards and reports are crucial when you need a great application experience on any device. Follow these 6 tried-and-true principles of responsive dashboard design to take your application to the next level. Logi Analytics sponsor |
What Does 100% Mean in CSS? — The rules aren’t exactly straightforward, as you may find yourself asking “the percent of what?”. Thankfully, this is an excellent summary with clear visual explainers. Amelia Watterberger |
Building Greater Accessibility Into Facebook.com — The Facebook engineering team has taken advantage of recent React improvements to build better accessibility into the social network’s foundations, and here’s how. Tatiana Iskandar (Facebook Engineering) |
|
💻 Jobs |
Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team |
One Application, Hundreds of Hiring Managers — Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery |
➡️ Looking to share your job listing in Frontend Focus? More info here.
📙 Tutorials, Stories & Opinion |
A Look at What's New in Chrome DevTools in 2020 — A round-up and brief introduction to some of the newer features available in Chrome DevTools. Umar Hansa |
Simulating Object Collisions on a Canvas — A gentle post walking through what’s involved creating a basic physics simulation using JavaScript and HTML canvas. Josh Bradley |
Best Practice Guidelines for Form Design — A growing resource of best-practice advice from a UI/UX designer who has learnt a lot about forms from her time working on a design system for a bank. Geri Reid |
Faster CI/CD for All Your Software Projects Using Buildkite 🚀 — See how Shopify scaled from 300 to 1800 engineers while keeping their build times under 5 minutes. Buildkite sponsor |
Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business — The story behind the popular utility-first CSS framework, from how it came to be, to the success it enjoys today. Adam Wathan |
Naming Layout Components — The TL;DR here is it doesn’t really matter “as long as they’re unique and somewhat memorable”. Andy Clarke |
What Actually is a String in JavaScript? Dmitri Pavlutin |
|
🔧 Code, Tools and Resources |
Snippet Shot: Generate Screenshots From Your Code Snippets — Use a Gist URL or just paste in your code snippet, select the code language and some gradient options, and download as a PNG. Great for presentations. Marco Slooten |
Waypoint: A VS Code Extension for Navigating JS Codebases — Makes navigating functions, classes, variables, etc. in your JavaScript codebases easier via fast search, filters, bookmarking, importing, and more. GitHub repo. Raathi Kugarajan |
Whitespace Characters to Copy and Paste — One that’s handy to have in your bookmarks — Quickly copy and paste Unicode whitespace characters, and learn how and when to use them. John Bartlet |
|
Teenyicons: Tiny Minimal 1px Icons — Hundreds of simple and elegant icons in outline mode or solid color mode, available in SVG format. Anja van Staden & Mohamed Marhraoui |
NSFW-Filter: A Browser Extension That Blocks NSFW Images — Regardless of your stance on the matter, what’s interesting here is that TensorFlow.js is being used to locally screen out ‘NSFW’ images without any data being sent to a third party. Navendu Pottekkat |