#333 — How display:contents works, Chrome DevTools tips and a focus on SVG

#333 — March 28, 2018 Read on the Web Frontend Focus ✏️ A Focus on SVG This week we've brought together a collection of tools, tips and tutorials on all things SVG. The vector graphics format is now heavily supported across all major browsers and is being used in increasingly creative ways. A section of the newsletter dedicated to a particluar technology or tool is something new that we're experiementing with — so, as ever your feedback and thoughts are appreciated. Just hit reply and we'll see your email. 🙂 — Chris Brandrick, Editor How 'display: contents' Works — display: contents makes an element’s children appear as direct children of the element’s parent, ignoring the element itself. This explains how it works and why you might want to use it. For now, it’s only in the current releases of Firefox & Chrome but support is growing. Ire Aderinokun 12 Chrome DevTools Tips and Tricks — The DevTools gain new features all the time, so it’s always worth keeping an eye on ways to use it. Here’s a collection of quick tips that may prove handy. Flavio Copes Angular, React or Vue? — How do you choose one JavaScript framework over another for your next web application? Our new whitepaper gives insight into the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now. Progress Kendo UI sponsor Working with the New CSS Typed Object Model — The CSS Typed Object Model brings types, methods, and a flexible object model to working with CSS values in JavaScript. (Part of the Houdini effort and initially shipped in Chrome 66.) Eric Bidelman Bringing Interactive Examples to MDN — Mozilla has been working on a project to bring interactive examples to pages on the wildly popular MDN Web Docs site. Some examples: rotate3d, clip-path, and ‘audio’ element. Mozilla Hacks How to Create a Snake Highlight Animation with 'anime-js' — A look behind the scenes at a simple but effective SVG line animation that moves as focus shifts on a Web form. Mikael Ainalem Sparks: A Font to Display Sparklines without Code — Uses OpenType features to replace numbers with basic bar, dot, or dot-line charts. GitHub repo. After the Flood Introducing the Microsoft Edge DevTools Protocol — Designed to align closely with the Chrome DevTools Protocol. Microsoft Edge Development ▶  The Future of Web Layout — Rachel Andrew, Jason Pamental, and Jeremy Osborn discuss advances in web layout techniques that will impact web developers. Jeremy Osborn Using Ethics in Web Design — Considers the role of ethics, norms, and expectations and how they relate to the digital works you create. Morten Rand-Hendriksen 💻 Jobs JavaScript Engineer (Berlin) — Provide state of the art A/B testing, tracking data collection and analysis services on our Product Analytics team. ZALANDO 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 — Create your profile and we’ll connect you with top companies looking for talented front-end developers. Vettery 📙 Tutorials Accessible HTML: A Crash Course in ARIA Landmark Regions Genevieve Nelson How to Access MongoDB Directly from Your Web or Mobile App MONGODB sponsor Get Started Building .NET Webapps That Run in the Browser with Blazor — An experimental .NET framework using C#/Razor and HTML that runs in the browser with WebAssembly. Microsoft ▶  A Primer on CSS Blend Modes and Why To Use Them Una Kravets Adding Favicons in a Multi-Browser Multi-Platform World — A refresher on what needs to be done to have a favicon show up everywhere you’d expect it to. Ruadhán O'Donoghue Sticky as a Local Fixed? — A CSS transform on a fixed element can create a local context for a nested position: fixed element, as in this example. Chris Coyier    ✏️ A Focus on Scalable Vector Graphics (SVG) A Practical Guide to SVGs on the Web — A superb, single page guide packed with practical advice and tips on how best to use SVGs on your sites. Jake Giltsoff ▶  SVG Can Do That? — A dive into the creative wilds of this graphic format built with math. Sarah Drasner ▶  The Wonderful World of SVG — How to style SVGs with CSS, animate them with JS, and more. Chris Coyier Making Multi-Colored Icons with SVG Symbols & CSS Variables Sarah Dayan Bounty: An SVG-Based Odometer Effect Library — Both a neat visual effect and a good example of explaining a library, and how it works, in a slide-deck. The library itself is here on GitHub. Michał Skowronek Coördinator: Turns an SVG Into Many X, Y Coordinates — Quite a specific tool but very well put together. The Why. Aliza Aufrichtig ▶  Why Inline SVG is Best SVG Front End Center Customizable SVG Patterns and Background Designs Matthew Lipman A Comprehensive Guide to Clipping and Masking in SVG Dennis Gaebel 🔧 Code and Tools Axe 3.0 Released: The Automated Accessibility Testing Library Marcy Sutton CSS Gradient Generator — A nice, simple to use CSS gradient generator, with options for both linear and radial outputs. Moe Amaya Get the Best, Most Complete Collection of Angular UI Controls: Wijmo — Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, & the best data grid. GrapeCity Wijmo sponsor Micron.js: A Micro Interaction Library — Add visual interactions to DOM elements Powered by CSS animations. Webkul Tabler: An HTML Dashboard Theme Built on Bootstrap 4 Paweł Kuna DrawerJS: A Customizable HTML Canvas Drawing Tool — Live demo here. Carsten Schäfer Build Better Apps Faster with a Single, Enterprise-Ready Framework: Ext JS Sencha, Inc. sponsor A Gradient Shadow in Pure CSS Fabien Tungu

by via Frontend Focus