November 15, 2017 Frontend Focus Issue 316 — November 15, 2017 Introducing the New Firefox (57): QuantumA major update that’s “over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine.” It’s time to revisit Firefox if you haven’t recently. Mark MayoUsing SVGs as Placeholders, and Other Image Loading TechniquesA frontend developer from Spotify looks at several approaches to showing something in place of an image before that image loads. José M. PérezKendo UI and Angular 5—The Perfect PairKendo UI—the premium JavaScript UI component library for jQuery, Angular, React, and Vue, is pleased to announce full support for the new Angular 5 release. Kendo UI combines the power of feature-rich components with easy integration. Kendo UI SponsorOn Declining Complexity in CSSDespite the latest edition of CSS: The Definitive Guide dwarfing earlier ones, Eric Meyer suggests CSS is not any more complex than it was, just more capable. The book’s out now. Eric MeyerWebAssembly Support Now Shipping in All Major BrowsersApple and Microsoft are shipping WebAssembly support in the new versions of Safari and Edge, so all 4 major browsers can now run code compiled to the super-fast wasm format. Judy DeMockerHow Firefox Got Fast Again and Where It’s Going to Get FasterMozilla’s major reboot of Firefox came out yesterday — here’s an accessible look at the work that went into its retooling. Lin ClarkThe Current State of Element QueriesWhat element queries are and where community consensus currently finds itself amongst developers and standards working groups. Dennis GaebelJobs Senior Software Engineer with ReactJS+ReduxJoin a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more. Discovery Digital Media Senior Front End Software EngineerApply now for this job on Indeed Prime and you’ll also be considered for similar jobs at leading companies for free. Esurance in partnership with Indeed PrimeIn BriefFirefox Quantum 57 for Developers news A more practical list of things you need to be aware of in the latest Firefox release, including Firefox’s new CSS engine, Stylo.MozillaBe a Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics course MongoDB University courses are free and give you everything you need to know about MongoDB.mongodb SponsorThe Contrast Swap Technique: Improved Image Perf with CSS Filters tutorialUna KravetsGo Beyond console.log with the Firefox Debugger tutorialMozilla HacksCross-Origin Communication with postMessage tutorialAdam LakiCreating a TripAdvisor-Style Text input Highlight Effect tutorial A line under the text field highlights as you type more text.Petr GazarovA Cute Way to Highlight Images Lacking ‘alt’ Attributes tutorialMatt Smith on TwitterFlexbox and Grids, Your Layout’s Best Friends tutorial Debunking myths around Flexbox and Grid, and showing you the power of these two technologies working together.Eva FerreiraCreating a Loading Placeholder with Sass tutorial Using animation to simulate loading text content.Lee Robinson6 CSS Code Smells tutorialRobin RendleDesigning Grids video This talk delves into grid design theory and makes it applicable for today’s web.Mark BoultonAnalyzing Your Page’s Layers with Chrome DevTools’ Layers Panel videoGoogle Chrome DevelopersShould We Stop Using Google’s Font Service and Self Host? opinion ..as Google can change how fonts look on the fly.GoogleMonitor, Analyze, and Optimize Web App Performance tools Start collecting and correlating real-time metrics from over 200 technologies in minutes. Try it free.Datadog SponsorTailwind: A Utility-First CSS Framework for Rapid UI Development codeAdam Wathan, Jonathan Reinink, et alShards: A UI Toolkit Based on Bootstrap 4 code Source link