March 7, 2018 #330 — March 7, 2018Read on the WebFrontend FocusYes, Frontend Focus looks totally different today!We got bored with the weird purple we used to rock, so as part of our redesign and new template, we’ve switched to ‘HTML5 orange’. There’s still a lot to do, but the newsletter will continue to get better over the coming weeks ?.As always, thanks for your ongoing support, and if you want to submit anything (links, feedback, etc.) just hit reply and we’ll see your email. — Peter Cooper and Chris Brandrick, editors? Featured? How to Write CSS That Works in Every Browser, Even the Old Ones — A great collection of videos from Jen Simmons with techniques and advice for writing resilient CSS.Mozilla HacksResponsive Components: A Solution to the Container Queries Problem — Container queries would let us style elements based on the size of a containing element rather than the viewport, but they’re still not available – this post presents a viable alternative.Philip Walton New Course: REST & GraphQL API Design in Node.js, v2 — Create an API from the ground up using Node.js, Express and MongoDB. In this course, you’ll build a production-ready REST API, and migrate it over to GraphQL.Frontend Masters sponsorWhat’s New in Chrome 65 for Web Developers — There’s a lot to enjoy in Chrome 65, including the CSS Paint API, the Server Timing API, and display: contents support. The DevTools also got support for local overrides. Or maybe you’d prefer a 3 minute video roundup?Pete LePageA Curated List of Frontend Case Studies — Do you appreciate a good explanation of how and why a company took a particular approach to a frontend development project? You’ll find something to enjoy here.Andrew RomanovLesser Known CSS Quirks and Advanced Tips — A collection of “some of the weirdest CSS features, along with tips and tricks for advanced CSS users”. Stuff like having multiple backgrounds on a single element.Peedu Tuisk3 Techniques for Performant Custom Font Usage — Make your custom Web fonts faster by making them smaller, loading them earlier, and using the font-display property.Ollie WilliamsThe 5 Most Popular Frontend Frameworks Compared — More summarized than compared, but still. A quick look at Bootstrap, Foundation, Semantic UI, Pure, and UIkit.Ivaylo GerchevReal-Time Error Monitoring, Alerting, and Analytics for JavaScript ? — Report JS errors to Rollbar with full stack trace and diagnostic data.ROLLBAR sponsor? JobsSoftware Engineer Web Framework (Berlin) — Join us and tackle the challenge of evolving our Mosaic architecture, working on backend for frontend API orchestration and more.ZalandoFull Stack Developer & Team Lead — Booking.com is looking for a Team Lead – Front End Developer to join our development team in the heart of Amsterdam.Booking.comFind a Job You’re Passionate About — Vettery connects you directly to hiring managers at over 4,000 top companies. Make a profile today and land your dream job.Vettery? Articles and TutorialsChrome Flash Usage Declines from 80% in 2014 to 8% Today — Should be 0% by Chrome 87. No, this is not a joke, Flash should be toast in 2020.Catalin CimpanuCSS Techniques and Effects for Knockout Text — Goes deep into the visual effect of having text reveal a background. There’s more to it than you might think..PreethiWhat Houdini Means for Animating TransformsAna TudorThe Road to Layout Animations on the Web — More interesting now that Chrome (but only Chrome) supports Resize Observers.Vincent Riemer slidedeck? WebAssembly: What and What Next? — Two Googlers cover WebAssembly right from the basics up.Ben Titzer and Andreas Rossberg videoWe Write CSS Like We Did in the 90s, and Yes, It’s Silly — Guilty as charged. But Jens has some suggestions as to the “modern” approach.Jens Oliver Meiert? Code and ToolsBoxy SVG: A Web-Based SVG EditorJaros?aw Foksa Fontanello: See Font Info from Web Pages on the Fly — A Chrome and Firefox extension that reveals the typographic styles of any selected text by right-clicking it.OktavillaProject Tracking, Teamwork & Client Reporting Like You’ve Never Seen Beforemonday.com sponsor28 CSS Menu Examples From CodePen — Both inspirational and handy to learn from.Freebie SupplyDelighters.js: Trigger CSS Animations as a Page is ScrolledQ42FilePond: A Flexible JS File Uploader with Great UX — It’s GPLv3 licensed, however, so take care.Rik SchenninkWoah.css: A Collection of ‘Eccentric’ Animations — Perhaps keep these for your internal demos only..Joe RezendesSave Time with the Best, Fastest Angular Spreadsheets & UI ComponentsGrapeCity JavaScript Solutions sponsor Source link