#369 — December 5, 2018

Read on the Web

Frontend Focus

A Look At CSS Resets in 2018

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' SupportPicture-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