Getting the most out of variable fonts

#452 — August 5, 2020 Web Version 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) ⚡️ Quick bits: The most popular browser used to access the British government's web sites is... Safari? It's true, although this will be due to a large number of iOS users rather than macOS Safari users 😏 The default SameSite cookie behavior is changing industry-wide. Here's what you need to know. This in-beta Firefox browser extension lets you browse the web with your voice. It's English only right now though. Google is testing 'trust tokens', its replacement for third-party ad cookies. The Internet Archive has responded to the lawsuit brought against it regarding its Controlled Digital Lending practice. Version 3.1 of the web framework Django is now available. 💻 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 🗓 Upcoming Events: Frontcon (August 12 - 14) — A frontend conf based in Latvia that's now taking a hybrid approach, offering both online and on-site attendance options. Front-End Focus (August 17) – It's got the same name as this newsletter but it's nothing to do with us. It's from the An Event Apart team though and has some fantastic speakers lined up. You Gotta Love Frontend (August 24-28) — This now online event will feature five talks over five days. Here's the speaker line-up. International JavaScript Conference (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online. 🔧 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 The Girl With A p̶e̶a̶r̶l̶ CSS Earring — An amazing recreation of Vermeer’s Girl With A Pearl Earring with no SVGs, just CSS. Louise notes it took over 30 hours to put together. It’s best viewed in Chrome or Firefox. Louise Flanagan codepen 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

by via Frontend Focus