#360 — October 3, 2018

Read on the Web

Frontend Focus

An Introduction to Web Payments — The folks over at Google have put together some documentation on how the emerging Web Payments standard works to provide a generalized way to handle payments on the Web.

Google Developers

The Shapes of CSS — A pretty epic demonstration of producing a variety of shapes (I counted 45!) using CSS and pseudo elements.

Chris Coyier

Functional Programming with JavaScript. Did you Get the Cheat Sheet? — JavaScript developers, here’s a handy resource for your reference stack. Download this handy resource containing short definitions, tips, code examples of arrow functions and more. Get your copy.

Progress Kendo UI sponsor

Trustworthy Chrome Extensions, By Default — In Chrome 70+, users will be able to restrict what pages in-browser extensions have access to. Some other policies are also being enacted to improve security (such as not allowing extensions that use obfuscated code).

Google

Working with Babel 7 and Webpack — Goes through setting up a project with Webpack and Babel 7, highlighting the basics of Babel plus some cool features of what it can do with your code.

Jan D’Hollander

Representing Web Developers in the W3C — Rachel Andrew writes about her work with the CSS Working Group, why it’s important Web developers understand what is being worked on, and how to have a say.

Rachel Andrew

?  Visual Studio Code Can Do That — VS Code is one of the most popular editors in the Web development space, so this collection of tips and videos could come in very handy. VS Code can do a lot more than you might think.

Burke Holland and Sarah Drasner

CSS Fonts 3 Now a W3C Recommendation — Developers can now use CSS Fonts 3 features (some of which are outlined here) with confidence.

Chris Lilley

? 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. Front End Engineer – Web Animations (San Diego/Remote) — You enjoy finding cool designs on Dribbble and making them a reality. You have an online profile with some rad CSS and JS animations.

MJD Interactive

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

? Tutorials

Building a Complex Financial Chart with D3 and d3fc

Colin Eberhardt

How Do Top Developers Deliver Video? – Download the 2018 Video Report

Bitmovin sponsor

Preventing a Grid Blowout — Oversized elements (e.g. large images) in CSS Grid cells can cause big layout problems. Here’s how to prevent the issue.

Chris Coyier

Creating Layouts with CSS Grid — Here, Tiffany Brown covers grid formatting context, explicit versus implicit grids, creating flexible grids with flex units, using the grid-template shorthand property, and more.

SitePoint

How to Create a PWA Game using Preact in 5 Steps

Seif Ghezala

5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18

Twilio sponsor

Audio Visualisation with the Web Audio API and React — How to listen to a microphone input and show a waveform to visualise the data.

Phil Nash

Unearthing ClojureScript for Front-End Development — Functional programming may seem esoteric but ClojureScript is a particularly neat way to pick it up.

Luke Tomlin

? Code and Tools

Create React App 2.0: Babel 7, Sass, and More — A significant release of a project that’s had a huge effect on the adoption of React by making it easier to get a project started.

Joe Haddad and Dan Abramov

Tired of Manually Checking Your Apps for Bugs? — Test your app visually to catch unexpected UI changes early. Flexible, multiple SDKs and works with GitHub PRs.

VisWiz.io sponsor

Tailwind: A Utility-First CSS Framework for Rapid UI Development

Adam Wathan, Jonathan Reinink, et al

Sal: Lightweight Scroll Animation Library — Coming in at just 2.8KB, this vanilla JavaScript library is performance focused and has no dependencies. GitHub repo.

Miros?aw Ciastek

ekill: A Chrome Extension to ‘Nuke’ Annoying Elements on a Web Page

René Hansen

GRID: A Simple Visual Cheatsheet for CSS Grid Layout — A list of visually displayed properties available in CSS Grid Layout. Tap or click to copy to keyboard.

Malven Co.

Wax: An Experimental, JSX-compatible Renderer for the Web Audio API — An interesting idea that brings a JSX-style approach for managing audio nodes.

James Wright