--- title: "#325: Using Variable Fonts in the Real World" publication: "Frontend Focus" issue: 325 published_at: "2018-01-31" canonical_url: "https://frontendfoc.us/issues/325" --- #325: Using Variable Fonts in the Real World This Week's HTML, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/325) Frontend FocusIssue 325 — January 31, 2018[How to Use Variable Fonts in the Real World](https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604?utm_source=frontendfocus&utm_medium=email)Using variable fonts (now [supported](https://caniuse.com/#search=variable%20fonts) across multiple browsers) in a real production context can be tricky. Here’s how studio Clearleft achieved it for a new conference website. Richard Rutter [Recreating the GitHub Contribution Graph with CSS Grid](https://bitsofco.de/github-contribution-graph-css-grid/?utm_source=frontendfocus&utm_medium=email)Recreating layouts is a great way to learn new frontend technologies, and recreating GitHub’s famous contribution graph is an interesting task. Ire Aderinokun [The Increasing Nature of Frontend Complexity](https://blog.logrocket.com/the-increasing-nature-of-frontend-complexity-b73c784c09ae?utm_source=frontendfocus&utm_medium=email)The rise in frontend complexity stems from an increased diversity of clients, a higher quality bar, and huge market growth. Kevin Ball [![Progress\](https://copm.s3.amazonaws.com/ee0c0527.png)](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary)[Planning a React Application: Whitepaper](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary)Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. [Get your free copy](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary). ProgressSponsor [Automated Browser Testing from Windows 10](https://www.smashingmagazine.com/2018/01/automated-testing/?utm_source=frontendfocus&utm_medium=email)An overview of the concepts and techniques involved in running test scripts against browsers using WebDriverJS on Windows 10 and Microsoft Edge. Smashing Magazine [Video: New Adventures in Responsive Web Design](https://vimeo.com/251516830?utm_source=frontendfocus&utm_medium=email)Smashing Magazine’s founder Vitaly Friedman on crafting flexible responsive design systems using the latest web technologies. Vitaly Friedman [Indexed Database API 2.0 Now a W3C Recommendation](https://www.w3.org/TR/2018/REC-IndexedDB-2-20180130/?utm_source=frontendfocus&utm_medium=email)The next version of IndexedDB, an API for working with a client-side database of records holding simple values and hierarchical objects. W3C Jobs - [Technical Writer (Full Time / Part Time / Remote)](https://nick1214.typeform.com/to/WMkrRk?utm_source=frontendfocus&utm_medium=email)Do you like writing for a technical audience? Looking for a bit of extra income, a part-time or a full time role, drop us a line. Raygun - [Frontend Web Engineer at Citymapper - Junior and Senior](https://citymapper.workable.com/jobs/629000?utm_source=frontendfocus&utm_medium=email)We're looking for more incredible frontend web engineers to help with our React powered consumer websites and complex map based tools. Citymapper - [Front-end Dev Jobs at 4,000+ Companies](https://www.vettery.com/tech?utm_medium=cooper-frontendfocus&utm_campaign=ad-1713&utm_source=newsletter&utm_content=grouped&utm_term=tech)Try Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. Vettery In Brief [Safari 11.1: Service Workers, Payment Request API, and more](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html#//apple_ref/doc/uid/TP40014305-CH14-SW1?utm_source=frontendfocus&utm_medium=email) news A few compelling new features in the latest Mac and iOS browser. Apple [WCAG 2.1 Now A W3C Candidate Recommendation](https://www.w3.org/blog/2018/01/wcag21-cr/?utm_source=frontendfocus&utm_medium=email) news The latest Web Content Accessibility Guidelines (WCAG). Andrew Kirkpatrick [Enter The 'Dragon (Drop)': Accessible List Reordering](https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering/?utm_source=frontendfocus&utm_medium=email) tutorial [Dragon Drop](https://github.com/schne324/dragon-drop) is a drag-and-drop list reordering module that works well with screen readers and other assistive technology. Harris Schneiderman [Serverless Development with Node.js, AWS Lambda & MongoDB Atlas](https://www.mongodb.com/blog/post/serverless-development-with-nodejs-aws-lambda-mongodb-atlas?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY19Q1&utm_content=brief&utm_medium=display&utm_source=frontendfocus&utm_date=20180131) tutorial mongodbSponsor [Choosing Web Fonts: A Beginner’s Guide](https://design.google/library/choosing-web-fonts-beginners-guide/?utm_source=frontendfocus&utm_medium=email) tutorial Google Design [Phone Number Links and Accessibility](http://allthingssmitty.com/2018/01/29/phone-number-links-and-accessibility/?utm_source=frontendfocus&utm_medium=email) tutorial Styling phone numbers on different clients while following WCAG 2.0 guidelines. Matt Smith [The Building Blocks of Web Workers and 5 Cases for Their Use](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a?utm_source=frontendfocus&utm_medium=email) tutorial A way to run JS in background threads in the browser. Alexander Zlatkov [The Compact Guide to Web Maintainability: 200 Tips and Resources](https://meiert.com/en/blog/maintainability-guide-2/?utm_source=frontendfocus&utm_medium=email) tutorial Jens Oliver Meiert [How to Style a Form with Tailwind CSS](https://css-tricks.com/style-form-tailwind-css/?utm_source=frontendfocus&utm_medium=email) tutorial Nick Basile [Building a Modal Component with Vue.js](https://alligator.io/vuejs/vue-modal-component/?utm_source=frontendfocus&utm_medium=email) tutorial Filipa Lacerda [What's New in Chrome 64's DevTools in 3 Minutes](https://www.youtube.com/watch?v=90wNAn05Cf4) video Google Chrome Developers [Why Your Site is Slow](https://pantheon.io/resources/why-your-site-slow?utm_medium=Online%20Advertising&utm_source=Front%20End%20Focus&utm_content=Why%20Your%20Site%20Is%20Slow%20webinar&utm_ad_group_name=Brief%20link&utm_campaign=2018%20Front%20End%20Focus) PantheonSponsor [Debugging CSS Performance with Chrome’s Profiling Tools](http://adadevacademy.tumblr.com/post/170121818942/debugging-css-performance-with-chromes-profiling?utm_source=frontendfocus&utm_medium=email) story How a tricky problem was analyzed using Chrome’s tools. Dan Roberts [A Tale of Two Rooms: Understanding Screen Reader Navigation](https://developer.paciellogroup.com/blog/2018/01/a-tale-of-two-rooms-understanding-screen-reader-navigation/?utm_source=frontendfocus&utm_medium=email) opinion Ryan Jones [Please Stop Using 'Local Storage'](https://www.rdegges.com/2018/please-stop-using-local-storage/?utm_source=frontendfocus&utm_medium=email) opinion Why you should stop using it to store session data. Randall Degges [Challenges for Web Developers](https://paul.kinlan.me/challenges-for-web-developers/?utm_source=frontendfocus&utm_medium=email) opinion Paul Kinlan shares some of the challenges he believes developers now face every day. Paul Kinlan [Why Japanese Web Design Is (Still) the Way It Is](https://info.moravia.com/blog/why-japanese-web-design-is-still-the-way-it-is?utm_source=frontendfocus&utm_medium=email) opinion Doug McGowan [Bulma: A CSS Framework to Consider in 2018](https://matwrites.com/bulma-css-framework-for-2018/?utm_source=frontendfocus&utm_medium=email) opinion Mat Writes [Get the Best, Most Complete Collection of Angular UI Controls: Wijmo](https://www.grapecity.com/en/angular?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_01-18) tools Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, and the best data grid. GrapeCity WijmoSponsor [Clippy: A CSS 'clip-path' Maker Tool](https://bennettfeely.com/clippy/?utm_source=frontendfocus&utm_medium=email) tools Bennett Feely [purgecss: A Tool to Remove Unused CSS](https://github.com/FullHuman/purgecss?utm_source=frontendfocus&utm_medium=email) tools Full Human [Sockette: The Cutest Little WebSocket Wrapper](https://github.com/lukeed/sockette?utm_source=frontendfocus&utm_medium=email) code A 339 byte wrapper around WebSocket that auto reconnects if the connection drops. Luke Edwards Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/325) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK