#341 — May 23, 2018

Read on the Web

Frontend Focus

Getting Started with Web Push Notifications — Microsoft Edge now supports web push notifications via the Push API and to celebrate the Edge team has put together a superb introduction to the concepts involved.

Microsoft Edge Team

Let’s Explore the Feature Queries Manager DevTools Extension — The Feature Queries Manager makes it easy to toggle @supports feature queries during development to help you develop for older browsers. Here’s a look at what it does, why, and how.

Ire Aderinokun

Cheat Sheet: Functional Programming with JavaScript — JavaScript developers, here’s a handy resource for your reference stack. This cheat sheet structures some of the language features most commonly used by JavaScript developers interested in writing functional style code. Check it out.

Progress Kendo UI sponsor

Why to Never Forget type=’button’ on Generated Buttons — Buttons with no type attribute can be treated as submit buttons by default which isn’t always what you want.

Lea Verou

Evolving Chrome’s Security Indicators — If your site isn’t being served over HTTPS, Chrome shows a ‘Not Secure’ warning but later this year, HTTPS sites won’t show the ‘Secure’ messaging in the location bar as HTTPS will be assumed the sensible default.

Google

Hyphenopoly: A Polyfill for Client-Side Hyphenation — Hyphenates text if the browser doesn’t support CSS hyphenation (intriguingly, this is one case where Chrome is the weaker browser).

Mathias Nater

Building a CSS ‘Dark Theme’ in a Day — A walkthrough of using modern CSS to create a darker ‘night mode’ for an app (a desktop app but the principles could apply to the Web too).

Marcin Wichary

?  PWAs: Building Bridges to Mobile, Desktop, and Native — A 40 minute talk from Google I/O that goes into how browser vendors are enabling developers to use the web to build installable desktop apps and store-distributed mobile apps, as well as how Google is launching its own PWAs at scale.

Google I/O ’18

The Slow Death of Internet Explorer and the Future of Progressive Enhancement — Oliver Williams argues we can and should develop sites for modern browsers but without breaking backwards compatibility.

A List Apart

Implement 200+ Tools with the Flip of a Switch – Get Started for Free

Segment sponsor

? 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

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Front-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Take a few minutes to join our platform.

Vettery

? Tutorials

Working with Dynamic Bézier Curves and SVG in React — This is a gorgeous (and interactive!) tutorial.

Josh Comeau

Overriding Default Button Styles — A look at CSS to help eradicate button style headaches, rather than skipping them for a or divs. Plus, a related article that goes more into what new styles to apply.

Chris Coyier

New Course: Master Automated Web Testing With Selenium — The course includes 30+ lessons, screencasts, code downloads and Q&A sessions with the author.

Selenium.Academy sponsor

Bootstrap Grid: Mastering the Most Useful Flexbox Properties — Ahmed Bouchefra introduces key Bootstrap CSS classes for building layouts with the Bootstrap grid system, along with a quick introduction to using Flexbox.

SitePoint

Creating Accessible CSS-Only Floating Labels

Pablo Eugenio Lujambio Martinez

Making An Animated Navigation Component

Eder Diaz

?  Overlapping on the Web, Graphic Design Made Easy with CSS Grid

Jen Simmons

Extensions in Firefox 61 — Now in beta, Firefox 61 includes numerous WebExtensions API related changes and improvements.

Mike Conca (Mozilla)

One-Directional Data Binding Without Frameworks — Uses an ES6 proxy to detect changes to an underlying variable.

Jack Tarantino

How To Build a Responsive Blog Design with Bulma CSS

Zaydek

? Code and Tools

Keyframes: A Simple CSS Animation Creator — Has a visual timeline to help create, view, and run animations without having to go back and forth between browser and editor.

Mitch Samuels

Linux Cloud Hosting Starting at 1GB of RAM for $5/mo

Linode Cloud Hosting sponsor

ScrollHint — A JavaScript library to suggest that elements are scrollable horizontally, with the pointer icon. Demo here.

Hori Godai