#360 — October 3, 2018 |
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). |
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 |