--- title: "An Introduction to Web Payments" publication: "Frontend Focus" issue: 360 published_at: "2018-10-03" canonical_url: "https://frontendfoc.us/issues/360" --- This Week's HTML5, CSS, Browser, and Frontend News #360 — October 3, 2018 [Read on the Web](https://frontendfoc.us/issues/360) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/czppmgmxiclfcdmgcf2j.jpg)](https://developers.google.com/web/fundamentals/payments/) [An Introduction to Web Payments](https://developers.google.com/web/fundamentals/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](https://css-tricks.com/the-shapes-of-css/) — A pretty epic demonstration of producing a variety of shapes (I counted 45!) using CSS and pseudo elements. Chris Coyier [![\](https://copm.s3.amazonaws.com/1884225e.png)](https://www.telerik.com/campaigns/kendo-ui/wp-functional-programming-with-js-cheat-sheet?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-funcwithjs&utm_content=primary) [Functional Programming with JavaScript. Did you Get the Cheat Sheet?](https://www.telerik.com/campaigns/kendo-ui/wp-functional-programming-with-js-cheat-sheet?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-funcwithjs&utm_content=primary) — 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](https://blog.chromium.org/2018/10/trustworthy-chrome-extensions-by-default.html) — 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](https://www.thebasement.be/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](https://www.smashingmagazine.com/2018/09/representing-web-developers-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](https://vscodecandothat.com/) — [VS Code](https://code.visualstudio.com/) 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](https://twitter.com/umaar/status/1045655069478334464) than you might think. Burke Holland and Sarah Drasner [CSS Fonts 3 Now a W3C Recommendation](https://www.w3.org/blog/2018/09/css-fonts-3-is-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)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. [Join X-Team](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend). x-team [Sr. Front End Engineer - Web Animations (San Diego/Remote)](https://www.mjdinteractive.com/careers/senior-front-end-engineer-2/) — 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](https://www.hired.com/frontend) — 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](https://blog.scottlogic.com/2018/09/21/d3-financial-chart.html) Colin Eberhardt [How Do Top Developers Deliver Video? - Download the 2018 Video Report](https://hubs.ly/H0dZn7v0) Bitmovin sponsor [Preventing a Grid Blowout](https://css-tricks.com/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](https://www.sitepoint.com/creating-css-grid-layouts/) — 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](https://hackernoon.com/how-to-create-a-pwa-game-using-preact-in-5-steps-tutorial-c8b177037c80) Seif Ghezala [5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18](http://twilio.com/blog/why-developers-attend-signal/?utm_source=frontend-focus&utm_medium=cooperpress&utm_content=signal-2018) Twilio sponsor [Audio Visualisation with the Web Audio API and React](https://www.twilio.com/blog/audio-visualisation-web-audio-api--react) — How to listen to a microphone input and show a waveform to visualise the data. Phil Nash [Unearthing ClojureScript for Front-End Development](https://www.toptal.com/clojure/clojurescript-tutorial-react-front-end) — 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](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) — 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?](https://www.viswiz.io/?woo_campaign=201810&woo_source=frontendfocus&woo_medium=ad) — 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](https://tailwindcss.com/) Adam Wathan, Jonathan Reinink, et al [Sal: Lightweight Scroll Animation Library](https://mciastek.github.io/sal/) — Coming in at just 2.8KB, this vanilla JavaScript library is performance focused and has no dependencies. [GitHub repo](https://github.com/mciastek/sal). Mirosław Ciastek [ekill: A Chrome Extension to 'Nuke' Annoying Elements on a Web Page](https://github.com/rhardih/ekill) René Hansen [GRID: A Simple Visual Cheatsheet for CSS Grid Layout](http://grid.malven.co/) — 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](https://github.com/jamesseanwright/wax) — An interesting idea that brings a JSX-style approach for managing audio nodes. James Wright A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom