#350 — July 25, 2018

Read on the Web

Frontend Focus

A Milestone for Chrome Security: Marking HTTP As “Not Secure” — Chrome 68, released this week (more on that below), shows a “Not secure” message in the location bar when accessing a site over unencrypted HTTP. The march to ‘HTTPS everywhere’ continues.

Google

Adding Particle Effects to DOM Elements with Canvas — A neat tutorial showing how to create a basic HTML-to-particle effect. You have to balance a few concepts to make it work but the result is striking.

Zach Saucier

Developer Tools for Every Customer Session – New in FullStory — Your browser developer tools are now available for site sessions other than your own. Easily understand performance issues thanks to page speed metrics, network analysis, downloadable HAR files, and comprehensive stack traces on all your visitors’ sessions.

Fullstory sponsor

Chrome 68 Released: What's New For Developers? — Other than the ‘Not Secure’ marker (above), Chrome 68 provides the Page Lifecycle API for you to detect when your tab has been suspended or restored, the Payment Handler API, and lots of neat DevTools improvements.

Google Developers

5 'Hot' New CSS Features and How to Use Them — Including the CSS Display module (e.g. display: contents), CSS overscroll behavior, conditional rules, and containment.

Daniel Crisp

Blink Signals Intent to Implement 'Portals'Portals (explained here) are a proposed approach for enabling seamless navigation between sites or pages (such as showing one page within another via a ‘portal’ before navigating to it).

blink-dev

The Frustrations of Using CSS Shapes and CSS Exclusions”.. indulge me as I explain my current feelings of woe with CSS Shapes and CSS Exclusions.”

Ben Frain

💻 Jobs

Senior Developer, New York or Remote — We're looking for a Sr Dev to join our team to help build, deliver and produce quality products for our growing customer base.

Apartment Therapy Media

Find A FrontEnd Job Through Vettery — Vettery specializes in developer roles and is completely free for job seekers.

Vettery

📘 Articles & Tutorials

An In-Depth Look at the Page Lifecycle API — A Chrome-only API for now that brings app lifecycle features common on mobile operating systems to the web. It ships with Chrome 68.

Philip Walton (Google)

Getting to Know a Legacy CSS Codebase

Harry Roberts

Converting Images to WebP — The many ways in which you can convert existing images to the WebP format. An excerpt from the recently released ‘The WebP Manual’ ebook.

Jeremy Wagner

Choosing the Right JavaScript Framework: Whitepaper — Learn how Angular, React and Vue compare against a comprehensive set of criteria. Get your copy.

Progress Kendo UI sponsor

4 CSS Tricks I’ve Learnt The Hard Way — Quick box sizing, centering, and positioning tips.

David Mellul

Weird Things Variable Fonts Can Do

Chris Coyier

How to Make a Modern Dashboard with NVD3.jsNVD3.js is a set of chart components built around D3.js.

Dan Englishby

Build an Instagram Clone with Vue.js and CSSGramCSSGram recreates Instagram-style filters using CSS filters and blend modes.

Hassan Djirdeh

Ubuntu 18:04 Is Here and DigitalOcean Has The Info You Need To Know

DigitalOcean sponsor

▶  WebFonts and Performance: 2 Videos from SmashingConf

Smashing Magazine

🔧 Code and Tools

TOAST UI Grid 3.0: A Data Grid Control for the Web — This data grid component works down to IE8, works with many data types, and is easily rethemed.

NHN Entertainment

3 Essential Front-End Checklists for Web Developers

David Dias

Pushbar.js: Simply Creating 'Sliding Drawers' on Your Pages

Biraj Ghosh

4 Things You Can Do with CSS Pointer Events — Change the styling of a parent on hover, make only pseudo elements clickable, and more.

Martijn Cuppens

Unswitch: An Event Handler for Nintendo Switch Controllers on the Web — Based on the Gamepad API.

Colin van Eenige