--- title: "#304: A Thorough Guide To Custom Elements v1" publication: "Frontend Focus" issue: 304 published_at: "2017-08-23" canonical_url: "https://frontendfoc.us/issues/304" --- #304: A Thorough Guide To Custom Elements v1 This Week's HTML5, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/304) Frontend FocusIssue 304 — August 23, 2017[Custom Elements v1: Reusable Web Components](https://developers.google.com/web/fundamentals/architecture/building-components/customelements?utm_source=frontendfocus&utm_medium=email)A great introduction to Custom Elements - they allow web developers to define new HTML tags, extend existing ones, and create reusable web components. Eric Bidelman [A Look Inside a Super Fast CSS Engine](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/?utm_source=frontendfocus&utm_medium=email)A fantastic exploration of how work on the experimental _Servo_ browser is beginning to feed into regular Firefox, starting with a new high performance CSS engine. Lin Clark [![Frontend Masters\](https://copm.s3.amazonaws.com/4cf37b30.png)](https://frontendmasters.com/courses/javascript-foundations/?utm_source=frontendfocus&utm_medium=email)[🎉 New, Updated: Deep JavaScript Foundations with Kyle Simpson](https://frontendmasters.com/courses/javascript-foundations/?utm_source=frontendfocus&utm_medium=email)Join Kyle Simpson, author of the popular “You Don’t Know JavaScript” book series, as he deep dives into JavaScript's core mechanics like scope, closure, this and prototypes ..plus new features in ES6 and more. Frontend MastersSponsor [You Can Now Run Multiple Versions of Chrome Side-by-Side](https://blog.chromium.org/2017/08/run-multiple-versions-of-chrome-side-by.html?utm_source=frontendfocus&utm_medium=email)Chrome Beta and Chrome Dev releases can now be installed and used at the same time as stable Chrome on Windows, Android and Linux. macOS is yet to come in the future. Google [Creating HTML and CSS Presentations with WebSlides](https://www.sitepoint.com/how-to-create-beautiful-html-css-presentations-with-webslides/?utm_source=frontendfocus&utm_medium=email)Ivaylo Gerchev guides you step by step in creating attractive HTML and CSS web presentations using the WebSlides framework. SitePoint [How To Create A Sketch Plugin With Front-End Tech](https://www.smashingmagazine.com/2017/08/create-sketch-plugin-front-end-technologies/?utm_source=frontendfocus&utm_medium=email)Sketch is an increasingly popular design tool on macOS. This tutorial explains how to use WebViews to create a plugin for Sketch using HTML, CSS and JS. Zachary Schuessler [Thoughts On Retiring The Green Padlock](https://medium.com/@mattholt/retiring-the-green-padlock-149010086e6d?utm_source=frontendfocus&utm_medium=email)Although the padlock remains an iconic indicator of security, Matt Holt proposes a ‘trust indicator’ to take its place. Matt Holt [A Web Animations Deep Dive with Angular](https://blog.thoughtram.io/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html?utm_source=frontendfocus&utm_medium=email)Dominic Elm takes a look at a few different approaches to motion in modern web apps, including Angular’s built-in animation system based on the Web Animations API. thoughtram Jobs [![Supported by Hired.com\](https://s3.amazonaws.com/s3.cooperpress.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q3-17-frontend-focus%29&utm_content=newsletter) - [Frontend Developer at X-Team (Remote)](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q1-17)We are 100% remote. We'll work with you 1-on-1 to motivate and fund you to learn, grow and build a legacy. [Join X-Team](https://x-team.com/frontend-developer/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=front-weekly-q1-17). X-Team - [Frontend Developer (Portland, Oregon)](http://frontenddeveloperjob.com/job/59975dd99912ee0004132a4a?utm_source=frontendfocus&utm_medium=email) CloudFour Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q3-17-frontend) In Brief [From Firefox 55 On, Selenium IDE Will No Longer Work](https://seleniumhq.wordpress.com/2017/08/09/firefox-55-and-selenium-ide/?utm_source=frontendfocus&utm_medium=email) news Selenium [Mozilla Pondering Collecting Anonymized Browsing Data?](https://groups.google.com/d/msg/mozilla.governance/81gMQeMEL0w/OVf_NL7yCgAJ?utm_source=frontendfocus&utm_medium=email) news Mozilla [Making The Web Smoother with Independent Rendering](https://blogs.windows.com/msedgedev/2017/08/17/making-web-smoother-independent-rendering/?utm_source=frontendfocus&utm_medium=email) news Changes to the Edge rendering engine. Bogdan Brinza [Building a simple To Do web app with Stitch, React, and MongoDB](https://docs.mongodb.com/stitch/getting-started/todo-web/?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY17Q3&utm_content=sponsored&utm_medium=display&utm_source=frontendfocus0823) tutorial This short tutorial will get you started with MongoDB Stitch. MONGODBSponsor [Be Careful with Sub-Elements of Clickable Things](https://css-tricks.com/slightly-careful-sub-elements-clickable-things/?utm_source=frontendfocus&utm_medium=email) tutorial Gotchas when attaching event handlers to sub-elements. Chris Coyier [Using Code Snippets in Chrome Developer Tools](https://www.alexkras.com/using-code-snippets-in-chrome-developer-tools/?utm_source=frontendfocus&utm_medium=email) tutorial Alex Kras [9 Tips for More Maintainable CSS](http://joereynoldsaudio.com/programming/articles/maintainble-css?utm_source=frontendfocus&utm_medium=email) tutorial Joe Reynolds ['font-size': An Unexpectedly Complex CSS Property](https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/?utm_source=frontendfocus&utm_medium=email) tutorial A run-through of the hidden complexities of the CSS `font-size` property. Manish Goregaokar [150 Tips For Using Chrome DevTools](https://medium.com/@umaar/increase-your-web-development-skill-set-150-animated-tips-on-chrome-devtools-4a30155e6b8e?utm_source=frontendfocus&utm_medium=email) tutorial Over 150 handy animated gifs showcasing how to use Chrome DevTools. Umar Hansa [Creating Photorealistic 3D Graphics on the Web](https://css-tricks.com/creating-photorealistic-3d-graphics-web/?utm_source=frontendfocus&utm_medium=email) tutorial Engin Arslan [Making the Web More Accessible With AI](https://hackernoon.com/making-the-web-more-accessible-with-ai-1fb2ed6ea2a4?utm_source=frontendfocus&utm_medium=email) story The tale behind a Chrome extension that auto-populates ‘alt’ text on images. Abhinav Suri [Coder Frozen in 2009 Awakens to Find Frontend Development Not Awful](https://www.schneems.com/2017/08/09/coder-frozen-in-2009-awakens-to-find-frontend-development-not-awful/?utm_source=frontendfocus&utm_medium=email) story Richard Schneeman [.NET and WebAssembly: Is This the Future of the Front-End?](https://www.hanselman.com/blog/NETAndWebAssemblyIsThisTheFutureOfTheFrontend.aspx?utm_source=frontendfocus&utm_medium=email) opinion Scott Hanselman [Chris Coyier on the Future of Web Development in 4 Videos](http://mediatemple.net/blog/tips/chris-coyier-future-web-development/?utm_source=frontendfocus&utm_medium=email) video Media Temple [Turbocharge your website in minutes 🔥](https://www.pusher.com/?utm_source=frontendfocus&utm_medium=email&utm_campaign=Aug23&utm_term=sponsoredlink&utm_content=cooperpress) tools Over 150,000 developers trust Pusher to add features like real-time chat & live UI updates to their websites. PusherSponsor [Gridzilla: A Responsive, Mobile-First Flexbox Grid System](https://teefouad.github.io/gridzilla/?utm_source=frontendfocus&utm_medium=email) code Mostafa Fouad [Songbird: Spatial Audio Encoding on the Web](https://google.github.io/songbird/?utm_source=frontendfocus&utm_medium=email) code A real-time spatial audio encoding JavaScript library for WebAudio applications. [Repo here](https://github.com/google/songbird). Google [A Pure CSS Textured Neon Text Effect](https://codepen.io/AllThingsSmitty/pen/VzXrgY/?utm_source=frontendfocus&utm_medium=email) demo CodePen [CSS-Only Directionally Aware Hover](https://codepen.io/giana/pen/YZWjQy?utm_source=frontendfocus&utm_medium=email) demo This is a neat little demo, showing a directionally aware hover effect in pure CSS. Giana Blantin Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/304) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK