#334 — April 4, 2018

Read on the Web

Frontend Focus

Progressive Web Apps on iOS Are Here — iOS 11.3 added support for several PWA technologies (such as Service Workers) meaning apps can now be installed on iOS without App Store approval. There are limitations, of course, and here’s a rundown of what you need to know.

Maximiliano Firtman

Introducing Network Error Logging — Server logs are useful, but what if you could request logs from clients? It turns out the W3C’s Web Performance Working Group are working on an approach called Network Error Logging.

Douglas Creager

New Course: From Fundamentals to Functional JavaScript, v2 ? — Learn the techniques you need to write professional, modern JavaScript. This course starts with the basics and takes you to mastering key functional methods like map, reduce and filter…plus promises and ES6+ asynchronous JavaScript.

Frontend Masters sponsor

Understanding Logical Properties and Values — The CSS Logical Properties and Values spec is still at an early stage but logical properties and values will allow us to control layouts through logical, rather than physical, mappings and it’s worth having an idea of how they work. There’s also a PostCSS plugin if you want to start using them now.

Rachel Andrew

How to Get Started with Coding Email Layouts — An increasingly common task for front-end developers with lots of quirks to be aware of.

Caity G. O’Connor

The Critical Path: Optimizing Load Times with Chrome DevTools — Improvements you can make and measurements to keep track of in order to optimize load times on a complex web application.

Ben Dilts

Calling All Web Developers: Here’s Why You Should Be Using Firefox — “In my opinion, Firefox Quantum has superior performance compared to other browsers.” Here’s why.

Ibrahim Nergiz

5 Things with Anders Hejlsberg – Why TypeScript is for you — Quickly learn 5 quick tips about TypeScript and why it’s for you.

Microsoft sponsor

?  An Introduction to Viewport Units — A look at how you can use vw, vh, vmin, and vmax in creative ways.

Jen Simmons

?  Cropping Images on the Web with Object Fit

Jen Simmons

The Inside Story of Reddit’s Redesign

WIRED

Jobs

Web Backend Developer (Fairfax, VA) — City State Entertainment is looking for an ASP.NET dev to help create Camelot Unchained, an RvR fantasy MMO for its studio in VA.

City State Entertainment

Frontend Developer – Milan, Italy — MotorK is looking for passionate Junior and Senior frontend devs to join the team. Great place to work and career opportunities.

MotorK

Front-End Expert? Sign Up for Vettery — Create your profile and we’ll connect you with top companies looking for talented front-end developers.

Vettery

? Tutorials

Designing Systematic Colors — How to make themable, flexible, WCAG 2.0 compliant color ramps for a design system.

Jeeyoung Jung

Easy Accordions with the ‘details’ and ‘summary’ Elements

Chris Coyier

Super-Powered layouts with CSS Variables and CSS Grid — A look at using CSS variables to control CSS grid layouts.

Michelle Barker

A Simple Guide to Taking a Web Page Offline, using Service Workers

Adeyinka Adegbenro

Creating Vue.js Transitions & Animation: Live Examples

Snipcart sponsor

Recreating Iron Man’s Arc Reactor Using CSS3 Transforms and Animations

Kunal Sarkar

Contextual Styling with Custom Properties — A look at how using custom properties might make contextual styling (i.e. multiple themes on the same page) a bit easier.

Simurai

Measuring the Hard-to-Measure — A quick tip to measure how many of your users turn up on a device with no JavaScript capabilities.

Harry Roberts

? Code and Tools

loaders.css: Fast Pure CSS Loading Animations — See them all in action here.

Connor Atherton

Pose: A Declarative Animation Library for HTML, SVG and React — The powers of SVG, React, and CSS combine to make easily declared and triggered element animations.

Popmotion

imaging-heap: A Command Line Tool to Measure The Efficiency of Your Responsive Image Markup — ..across viewport sizes and device pixel ratios.

Filament Group

Get the Official Bulma Book & Learn How to Create Your Own Interface

Bleeding Edge Press sponsor

Bulma: A Flexbox-based CSS Framework

Jeremy Thomas

A CSS Grid-Powered Expanding ‘Box Filled’ Menu

Mary Lou