#369 — December 5, 2018 |
Frontend Focus |
A Look At CSS Resets in 2018 — A review of CSS reset options (to cancel out the default styles browsers apply to HTML) and how they try to strike a balance between correcting user-agent styling ‘errors’, removing opinionated styling, and staying as consistent as possible. Ire Aderinokun |
Is Microsoft Building a Chromium-Powered Browser To Replace Edge? — This week the Web has been abuzz with the idea that Microsoft is going to divert attention away from working on its EdgeHTML engine and start to use Blink/Chromium instead. But with the news based on ‘anonymous sources’ and no official confirmation, we’ll need to keep an eye on this story. Zac Bowden |
Planning an Angular Application: Whitepaper — Angular devs—take a look at this checklist of things to consider when planning your next Angular app. Make an informed decision about tooling choices during development all the way through deployment. Get your free copy today. Progress Kendo UI sponsor |
Should We Use JavaScript to Load Our Web Fonts? — Browser support for new and safer CSS-only font loading strategies have left some devs wondering: are JS methods to load web fonts now necessary/useful? Zach Leatherman |
Bridging the Gap Between CSS and JavaScript: CSS-in-JS — As front-end components continue to be built with lashings of JavaScript, the idea of writing CSS within that JavaScript to style things at the component level has become more popular. Matija Marohnic |
Preventing Content Reflow From Lazy-Loaded Images — Lazily loading images is a good performance practice but what happens when those images load and change dimensions within the existing page layout? Reflow. But here’s how to avoid it. James Steinbach |
💻 Jobs |
Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. x-team |
Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details. Hired |
📘 Tutorials |
Mistletoe Offline: Building A Custom Offline Page — Advice for building an offline page, for when a visitor can’t reach your site. Jeremy Keith |
Creating My First Chrome Extension — Bills itself as a ‘generous measure of know-how’ on the subject of creating extensions for Chrome. Jennifer Wong |
Get Festive with Manifold’s 12 Days of Cloud Services 🦌🎅❄️ — A blog post each day featuring a new service for you to learn about. Manifold sponsor |
Create Scalable and Lightweight Web Screenshots with SVG — How to generate SVG webpage screenshots that are infinitely scalable while being over 10 times smaller in file size than a detailed PNG screenshot. Checkbot |
'Can I Use' Now Tracking 'Picture-in-Picture' Support — Picture-in-Picture support is a new, and still experimental, idea for the Web where videos can be watched in a floating window while interacting with other pages. Can I Use |
▶ Making Future Interfaces: Unusual Shapes — A neat 6 minute video covering the ideas behind breaking away from boring rectangles and using things in the CSS Shapes spec to create different shapes and wrap other elements around them. Support isn’t too bad, though there’s nothing on Edge yet. Heydon Pickering |
The Ecological Impact of Browser Diversity — Following reports that Microsoft may kill off EdgeHTML, this article on browser diversity from earlier this year is worth revisiting. Rachel Nabors |
Too Much (Web) Accessibility? — “if you’re really fretting about screen readers misinterpreting the nuanced usage of your semantic emphasis… you can relax on that one.” Chris Coyier |
Front-End Developers Have to Manage the Loading Experience Chris Coyier |
🔧 Code and Tools |
DevTools for Designers — Links to a variety of posts and videos about Web developer tools aimed more at designers. Chris Coyier |
Screenshoteer: Make Web Page Screenshots from the Command Line — Controls headless Chrome with Puppeteer behind the scenes. Vladimir Carrer |
⚒ Retool — The New Way to Build Web Frontends Retool sponsor |
CSS Animation 101: How to Bring Animation to Your Web Projects — A free ebook on how, and why to use CSS animation on your web pages. Available on the web, and as a PDF or ePUB. Donovan Hutchinson |
Displaceable: Smooth Element Displacement on Mouse Move — A tiny JavaScript library that handles ‘super smooth’ element displacement on mouse move. Demo here. Dino Hamzić |
NES.css: A NES-Style CSS Framework — A retro 8-bit style CSS framework, inspired by the Nintendo Entertainment System. Repo here. B.C.Rikko |
A Complete Wedding Web Site — A happily married couple have open sourced the elegant wedding site (complete with RSVP feature) and encourage you to use it for your own. Ram Patra |
Transactional Email SaaS for Busy Developers Emailwizard sponsor |
3D Animated Bar Chart — Makes use of React, WebGL and 3D CSS - complete with mouseover hover effects. Nick Matantsev |
Dynamically Generated Alt Text with Azure's Computer Vision — A neat, practical demonstration of the Computer Vision API. Sarah Drasner |