August 16, 2017 Frontend Focus Issue 303 — August 16, 2017 Bootstrap 4 Beta ReleasedTwo years in the making, the popular front-end framework is taking some key steps forward. For starters, it’s switched from Less to Sass and is now Flexbox based. Mark OttoWeb Fonts: When You Need Them, When You Don’tDavid Gilbertson makes a plea that “if you’re making a site, and you’re just about to go searching for that perfect web font, please, at least consider using system fonts instead”. Hacker NoonPerformant Web Animations and Interactions: Achieving 60 FPSA high frame rate often equals a high level of responsiveness and user satisfaction, but what’s involved in getting high frame rates for Web pages? Emily HaymanPolymer Summit 2017 is coming to Copenhagen on 22-23 AugustThe Polymer Summit will be taking place in Copenhagen, Denmark on 22-23 August! Attend talks and workshops with Polymer & Google engineers! If you can’t attend in person, you can watch the livestream on the event site. Google, Inc. SponsorUsing the Paint Timing API in ChromeThe Paint Timing API landed in Chrome 60 and allows us to gather paint timing metrics from end users. Jeremy WagnerThe Average Web Page Is 3MB. How Much Should We Care?Page size matters, but Tammy Everts outlines how it’s perhaps not in the way you think. Tammy EvertsBuilding a Simple AI Chatbot with the Web Speech API and NodeA complete walkthrough of bringing together browsers’ speech recognition support with Node and a third party natural language processing service. Tomomi ImuraChrome 61 Beta Now With JS Module Support, Web Share API, WebUSBA lot of new features in this test release, including 8- and 4-digit hex color support in CSS, the Smooth Scroll API, and the Device RAM API. GoogleFrame by Frame Animation with CSS and JavaScriptMichael Romanov explains how to build a frame-by-frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers. SitePointJobs Lead Frontend Developer/React.js at Mosaic (New York)Be a cornerstone in the development of an innovative project management tool using cutting edge technology, React.js. Mosaic Manages Teamwork Front End Engineer at EDITED (London)Join us to impact how the world’s biggest retailers operate by making a web app with great UX and DX using React, Redux and Glamor EDITED Frontend Developer at X-Team (Remote)We are 100% remote. We’ll work with you 1-on-1 to motivate and fund you to learn, grow and build a legacy. Join X-Team. X-TeamCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefProposal to Republish Previous Versions of HTML and XHTML as Obsolete Recommendations newsW3CBuilding a simple To Do web app with Stitch, React, and MongoDB tutorial This short tutorial will get you started with MongoDB Stitch.MONGODB SponsorDrawing a Horizontal Tree Using CSS Pseudo Elements tutorialGaurav SehrawatThe Difference Between Explicit and Implicit Grids tutorial Grids are flexible enough to adapt to their items, so just how explicit do you have to be?Manuel MatuzovicLazy Loading Images using Intersection Observer tutorial How you can lazy load images without tapping the scroll event.Dean HumeOffline POSTs with Progressive Web Apps tutorial Providing a great offline experience in your PWA.Andreya GrzegorzewskiThe Web Font Loading Glossary tutorial A beginner-friendly glossary of terms relating to web fonts.Zach LeathermanDesigning The Perfect Feature Comparison Table tutorialVitaly FriedmanHow to Create a QR Code Reader for Your Mobile Site tutorial ..using just HTML, CSS and JavaScript.Dmitri LauWebAssembly: What Is It And What Does It Mean for the Web? tutorialPhilipp Spiess and James SwiftUsing Passive Event Listeners for Better Scroll Performance tutorialWeb Incubator CGCSS Hex Colors Demystified tutorial In-depth but relatively beginner level.Dave GashSVG Can Do That? slidedeck A great slidedeck exploring the possibilities of what SVG can achieve.Sarah DrasnerDon’t Mistake Common UI Patterns for Best Practices opinion A hard look at how the browse experience translates in the digital space.Callie de Roussan$20 Free on a new Linode account Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.Linode Cloud Hosting SponsorOnline WebP Converter tools Convert your image files into the more efficient WebP format.Gradient World: CSS Gradients Generated From Nature Photographs toolsCharlie Clark Source link