October 8, 2017 Frontend Focus Issue 309 — September 27, 2017 CSS font-display: The Future of Font Rendering on the WebGiulio Mainardi explains the new font-display property and how it will help CSS developers improve rendering of fonts during page load. SitePointThe Mega HTML5 CheatsheetA lot of stuff packed into this huge infographic from tags and events to canvas methods and a support grid. Bradley NiceGeneric Sensor API: Sensors For The WebA set of interfaces which expose sensor devices within Chrome (for now). Google DevelopersBuilding an Accessible Data GridMost applications require some use of a data grid, and making a grid accessible can be a big challenge. Take a look at how Wijmo made FlexGrid accessible with ARIA standards and more. GrapeCity Wijmo SponsorReact 16: A Look Inside React’s API-Compatible RewriteReact 16 has been released and redesigned from the ground up to support asynchronous rendering without changing the public API. Facebook CodeWeb Performance in The Real World: How to Make Fast SitesAn exploration of work the Microsoft Edge team does to help developers build faster sites, and how to think of performance as an investigative activity, beyond a checklist approach. Nolan LawsonHow Trivago Went from Neglecting to Embracing AccessibilityHow travel site Trivago went from neglecting accessibility to making it an important part of what they do. Ian DevlinFirefox ‘Quantum’ Lands in Beta, Developer EditionThe beta of a whole new Firefox is out now, one that’s powered by a completely reinvented, modernized engine, called Firefox Quantum. MozillaAddressing Common Misconceptions About the Payment Request APIEiji Kitamura, a developer advocate at Google, calls out some common misconceptions about the API and tries to comprehensively address them. Google Dev ChannelJobs Software engineer to grow & sustain local food systemsHelp us build an online grocery experience that revolutionizes how food is sourced, bought and enjoyed. Good Eggs Distributed Systems Engineer at Ably (Remote in EU)If consensus algorithms get your mental juices flowing, come join the team behind a global & fault-tolerant messaging platform. Ably realtime Front-End Developer (Berlin) N26Can’t find the right job? Want companies to apply to you? Try Hired.com.In BriefNew WebKit Features in Safari 11 on iOS 11 and macOS High Sierra news It adds WebRTC, WebAssembly, Variable Fonts, Timing APIs and more.Jon DavisChanges to Chrome’s Video Autoplay Policy news Muted autoplay will be fine, but for audio to play some conditions must be met.François BeaufortChrome 63 To Label FTP Servers As ‘Not Secure’ newsZeljka Zorz2017 Chrome Developer Summit is coming to San Francisco news Join us in San Francisco & on the live stream as we explore building beautiful and performant experiences.Google, Inc. SponsorIntriguing CSS Level 4 Selectors tutorial Including :placeholder-shown and :user-errorDennis GaebelDesigning Websites for the iPhone X tutorial Advice from the WebKit team for handling the iPhone X ‘notch’.WebKitPlaying With Color: Vibrant Options For Apps And Websites tutorialNick BabichAn Introduction to WebRender: Firefox’s New 2D Renderer storyNicolas SilvaExploring Animation And Interaction Techniques with WebGL storyKarim MaaloulUsing JavaScript for Speech Recognition in the Browser videoWes Bos5 Things CSS Developers Wish They Knew Before They Started opinionAndrés Galante$20 Free on a new Linode account tools Linux cloud hosting starting at 1GB of RAM for $5/mo. Use promo code HTML520 and get $20 credit.Linode Cloud Hosting Sponsor3 Tools for Working with Web Animations in Firefox toolsMozillaDiffee Checker: Check Visual Differences Between Sites tools It uses CSS blend modes to do it.Una KravetsLogo Crunch: The Multi-Resolution Logo/Favicon Maker tools Uses computer vision to make a high-res graphic more legible at lower resolutions.Brandmarkwinamp2-js: An HTML5 Reimplementation of Winamp 2.9 code Demo.Jordan EldredgeAR.js: Efficient Augmented Reality for the Web codeJerome EtienneWretch: A Tiny Wrapper Around Fetch with an Intuitive Syntax codeJulien Elbaz Source link