#368 — November 28, 2018

Read on the Web

Frontend Focus

An Extensive Guide to Progressive Web Applications — Progressive Web Apps (also known as PWAs) use modern Web technologies to provide powerful, app-like experiences in the browser. This post acts as a sort of primer to the whole concept and what those technologies are (such as service workers).

Ankita Masand

Implementing a Variable Font with Fallback Web Fonts — With variable fonts, more typographic richness and influence can come to the Web and at a relatively small file size.

Zeichenschatz

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

The Front-End Checklist — A front-end development and deployment checklist of ideal things to do when rolling out a Web site (e.g. produce favicons, check 404 pages, print stylesheets).

David Dias

Building an Interactive Infographic with Vue.js — A thorough guide to building a dynamic and interactive infographic using Vue.js, SVG and GreenSock (for animation).

Krutie Patel

HEAD: A List of Things That Go In Your Pages’ head Element — Meta tags, link tags, Twitter card info, browser-specific directives, and more.

Josh Buchea

Avoiding the Pitfalls of Automatically Inlined Code — Overusing inline CSS or JS code, as opposed to serving code through static resources, can harm the site’s performance if not done right.

Leonardo Losoviz

? Jobs

Software Engineer, Front-End (Browser Extensions) – San Francisco — We’re looking for an Engineer to join our Browser Extension team to help achieve our mission of improving lives by improving communication.

Grammarly

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

? Articles & Tutorials

Hacking CSS Writing Mode for Design Purposes — The writing-mode CSS property sets horizontal and vertical text direction. While meant for multilingual purposes, it can be exploited for design purposes.

Tipue

Responsive Images on the Apple Watch — If you’re keen for your sites to look good on the Apple Watch’s browser and its 136 pixel wide viewport, consider these points.

Eric Portis

A More Secure Domain Registrar — Securely register and manage your domain with no-markup pricing that eliminates surprise renewal fees and hidden add-on charges.

Cloudflare Registrar sponsor

The Current State of Styling Scrollbars

Chris Coyier

Fast Google Fonts with Cloudflare Workers — A look at improving the performance of sites using Google Fonts using streaming HTML modification in a serverless worker.

Patrick Meenan

What, Exactly, Is The DOM? — Breaking down what the ‘Document Object Model’ actually is — essentially an API to the page, allowing programs to read and manipulate the page’s content, structure, and styles.

Ire Aderinokun

Handling Addresses from All Around the World — A look at how the Shopify team has handled a variety of problems in dealing with physical addresses around the world.

Shopify Engineering

?  A Quick Look at Google’s Native Lazy Loading Feature — A 6 minute screencast.

Eric Portis

Frontend Platform Builders: Sharing our Engineering Insights With the Community

Wix Engineering sponsor

?  Why I Use The BEM Naming Convention for My CSS

Kevin Powell

Comparing HTTP Request Libraries for 2019 — Surface level summaries of Supertest, the Fetch API, Axios, Request, and SuperAgent.

Chidume Nnamdi

? Code and Tools

Demoboard: A Live Code/Demo Editor That Integrates with npm

James K Nelson

Replace Chrome’s Default New Tab Page with Useful Info for Developers

Initab sponsor

Palx: Automatic UI Color Palette Generator

Brent Jackson

WordPress 5.0 Release Candidate Released — The first release candidate for WordPress 5.0 is now available.

WordPress

Wenk: A Lightweight Pure CSS Tooltip — Coming in at only 733 bytes when minified/gzipped. Demo here.

Tiaan du Plessis