#386 — April 10, 2019

Read on the Web

Frontend Focus

(Image: Microsoft)

Microsoft Edge Preview Builds: The Next Step in Our OSS Journey — The first Canary and Developer builds of the new Edge (based on Google’s Chromium open source project) are now available to download on Windows 10 PCs. A Mac version is to follow.

Joe Belfiore (Microsoft)

Native Image Lazy-Loading for The Web: How loading Works — A look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web. Support for this is expected in Chrome 75.

Addy Osmani

New Course: TypeScript 3 Fundamentals — 🏎💨 TypeScript adoption has grown at an astounding rate. TypeScript allows you to catch bugs before they happen, and collaborate with your team more effectively by documenting your code.

Frontend Masters sponsor

How We Used WebAssembly to Speed Up Our Webapp by 20X — A case study exploring how to speed up web apps by replacing slow JavaScript calculations with compiled WebAssembly.

Robert Aboukhalil

Launching the Front-End Tooling Survey 2019 — Each year we link to this popular front-end developer survey as the results are pretty interesting. Take part to help us all find out how our collective front-end tooling habits are changing. There’s a recap of last year’s results here too.

Ashley Watson-Nolan

Digging Into The Display Property: The Two Values Of Display — Rachel Andrew takes a detailed look at Flexbox and CSS Grid Layout, two layout methods that are “essentially values of the CSS display property”.

Smashing Magazine

Chrome to Warn Users About Sensor Access — Until now, accessing light and motion sensors from Web pages has been easy and transparent, but Chrome Canary is now beginning to warn users.

Owen Williams on Twitter

Opera Introduces 'Reborn 3' Browser

Joanna Czajka

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Find A Frontend Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Articles, Tutorials & Opinion

How to Create Clipped, Blurred Background Images in CSS — How to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.

Sebastiano Guerriero

Chrome 74's prefers-reduced-motion Media Query — The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses which then lets you take this into account in your CSS.

Thomas Steiner

Building A Dependency-Free Site in 2019 — Rebuilding a personal site using nothing but HTML and CSS — “It’s quite something when building a website using the most basic technologies imaginable has somehow become revolutionary”.

Michelle Barker

▶  How to Work With the Raw HTML for Emails You Receive — Receive an email and want to see the HTML? Here’s how, and how to convert the raw format into HTML you can edit in your own editor.

Peter Cooper

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective — A temporary disability changed Facundo Corradini’s perspective on accessibility testing. He shares the impact.

A List Apart

Get the Fastest Website Deployments. Ever. — Learn the most effective way to build better apps faster.

Buddy sponsor

The Importance of Readability on the Web

Joanna Ngai

The Hidden Power of CSS Text Align

Ahmad Shadeed

🔧 Code and Tools

html2canvas: A JavaScript HTML Renderer — Take screenshots of pages or elements of pages and render them to canvas. The first release (a release candidate of v1.0) in over a year is just out. There’s also a live demo on its homepage.

Niklas von Hertzen

DropCSS: A Simple and Fast 'Unused CSS' Cleaner — We linked this two weeks ago but version 1.0 has since dropped.

Leon Sorokin

WordPressify: A Modern Workflow for WordPress Development — ..with integrated web server, auto-reload and style pre-processors. ES6 ready.

WordPressify

Shop Like a Developer – Discover and Experiment with Hot New Cloud Services 🔥

Manifold sponsor

Mouthful: Generate a Concatenated File of All CSS Used on a Given Site — It’s pretty neat just how short the code is for doing this.

Mikael Åsbjørnsson-Stensland

VexChords: JavaScript Guitar Chord Renderer — It’s niche, but well executed.

Mohit Muthanna Cheppudira

   🗓 Upcoming Events

IMAGECON, May 1–2 – San Francisco, CA — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.

CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern JavaScript development.

Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference.

CSSCamp 2019, July 17 — Barcelona, Catalunya — A one-day, one-track conference for web designers and developers.