--- title: "Getting the most out of variable fonts" publication: "Frontend Focus" issue: 452 published_at: "2020-08-05" canonical_url: "https://frontendfoc.us/issues/452" --- Plus this week's browser, HTML and CSS links. #452 — August 5, 2020 [Web Version](https://frontendfoc.us/issues/452) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1596623671/xsdlhtyxxwh3dvohqqw8.gif)](https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/) [Getting the Most Out of Variable Fonts on Google Fonts](https://css-tricks.com/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](https://www.recursive.design)). Stephan Nixon [Can You Design A Website For The Five Senses?](https://www.smashingmagazine.com/2020/08/design-website-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 [![\](https://copm.s3.amazonaws.com/98a7bb30.png)](https://go.logianalytics.com/designing-responsive-dashboards-fef.html) [6 Best Practices for Responsive Dashboard Design](https://go.logianalytics.com/designing-responsive-dashboards-fef.html) — 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?](https://wattenberger.com/blog/css-percents) — 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](https://engineering.fb.com/web/facebook-com-accessibility/) — 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](https://twitter.com/TheRealNooshu/status/1290218637400387584?s=20), 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](https://hacks.mozilla.org/2020/08/changes-to-samesite-cookie-behavior/). - This in-beta Firefox browser extension lets you [browse the web with your voice](https://voice.mozilla.org/firefox-voice/). It's English only right now though. - Google is [testing 'trust tokens'](https://www.engadget.com/google-tests-ad-trust-tokens-223104543.html), its replacement for third-party ad cookies. - The Internet Archive [has responded](https://blog.archive.org/2020/07/29/internet-archive-responds-to-publishers-lawsuit/) to the lawsuit brought against it regarding its Controlled Digital Lending practice. - Version 3.1 of the web framework Django [is now available](https://www.djangoproject.com/weblog/2020/aug/04/django-31-released/). 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — 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](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — 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](https://booking.cooperpress.com/jobs)_. 📙 **Tutorials, Stories & Opinion** [A Look at What's New in Chrome DevTools in 2020](https://css-tricks.com/whats-new-in-devtools-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](https://joshbradley.me/object-collisions-with-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](https://gerireid.com/forms.html) — 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 🚀](https://buildkite.com/?pk_campaign=fefocus_speed_nocr_rk_aug_20&pk_source=cp&pk_medium=newsletter) — 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](https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-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](https://stuffandnonsense.co.uk/blog/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?](https://dmitripavlutin.com/what-is-string-in-javascript/) Dmitri Pavlutin **🗓 Upcoming Events:** - **[Frontcon](https://2020.frontcon.com)** (August 12 - 14) — A frontend conf based in Latvia that's now [taking a hybrid approach](https://twitter.com/FrontCon/status/1278240866121977856), offering both online and on-site attendance options. - [Front-End Focus](https://aneventapart.com/event/online-0820) (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](https://lithuania.yglfconf.com)** (August 24-28) — This now online event will feature five talks over five days. [Here's the speaker line-up](https://twitter.com/yglf_lt/status/1288731049082724353). - **[International JavaScript Conference](https://javascript-conference.com/london)** (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1596620090/hoa5rimsjke7lrrgerqp.jpg)](https://www.snippetshot.com/) [Snippet Shot: Generate Screenshots From Your Code Snippets](https://www.snippetshot.com/) — 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](https://waypoint.netlify.app/) — Makes navigating functions, classes, variables, etc. in your JavaScript codebases easier via fast search, filters, bookmarking, importing, and more. [GitHub repo.](https://github.com/Raathigesh/waypoint) Raathi Kugarajan [Whitespace Characters to Copy and Paste](https://qwerty.dev/whitespace/) — 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](https://codepen.io/louflan/full/JjGVbjY) — An amazing recreation of Vermeer’s Girl With A Pearl Earring with no SVGs, just CSS. Louise notes it took [over 30 hours](https://twitter.com/flangerhanger/status/1290214626194411520) to put together. _It’s best viewed in Chrome or Firefox_. Louise Flanagan codepen [![\](https://res.cloudinary.com/cpress/image/upload/v1596620311/c2vxwubqky1tznisdfab.jpg)](https://codepen.io/louflan/full/JjGVbjY) [Teenyicons: Tiny Minimal 1px Icons](https://teenyicons.com/) — 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](https://github.com/navendu-pottekkat/nsfw-filter) — Regardless of your stance on the matter, what’s interesting here is that [TensorFlow.js](https://www.tensorflow.org/js) is being used to locally screen out ‘NSFW’ images without any data being sent to a third party. Navendu Pottekkat A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom