October 3, 2018 #360 — October 3, 2018Read on the WebFrontend 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 DevelopersThe 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 sponsorTrustworthy 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).GoogleWorking 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’HollanderRepresenting 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 DrasnerCSS Fonts 3 Now a W3C Recommendation — Developers can now use CSS Fonts 3 features (some of which are outlined here) with confidence.Chris Lilley? JobsFrontend 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-teamSr. 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 InteractiveJoin 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? TutorialsBuilding a Complex Financial Chart with D3 and d3fcColin EberhardtHow Do Top Developers Deliver Video? – Download the 2018 Video ReportBitmovin sponsorPreventing 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 CoyierCreating 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.SitePointHow to Create a PWA Game using Preact in 5 StepsSeif Ghezala5 Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18Twilio sponsorAudio Visualisation with the Web Audio API and React — How to listen to a microphone input and show a waveform to visualise the data.Phil NashUnearthing 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 ToolsCreate 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 AbramovTired 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 sponsorTailwind: A Utility-First CSS Framework for Rapid UI DevelopmentAdam Wathan, Jonathan Reinink, et alSal: 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 Ciastekekill: A Chrome Extension to ‘Nuke’ Annoying Elements on a Web PageRené HansenGRID: 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 Source link