August 23, 2017 Frontend Focus Issue 304 — August 23, 2017 Custom Elements v1: Reusable Web ComponentsA great introduction to Custom Elements – they allow web developers to define new HTML tags, extend existing ones, and create reusable web components. Eric BidelmanA Look Inside a Super Fast CSS EngineA 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? New, Updated: Deep JavaScript Foundations with Kyle SimpsonJoin 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 Masters SponsorYou Can Now Run Multiple Versions of Chrome Side-by-SideChrome 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. GoogleCreating HTML and CSS Presentations with WebSlidesIvaylo Gerchev guides you step by step in creating attractive HTML and CSS web presentations using the WebSlides framework. SitePointHow To Create A Sketch Plugin With Front-End TechSketch 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 SchuesslerThoughts On Retiring The Green PadlockAlthough the padlock remains an iconic indicator of security, Matt Holt proposes a ‘trust indicator’ to take its place. Matt HoltA Web Animations Deep Dive with AngularDominic 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. thoughtramJobs Frontend Developer at X-Team (Remote)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. X-Team Frontend Developer (Portland, Oregon) CloudFourCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefFrom Firefox 55 On, Selenium IDE Will No Longer Work newsSeleniumMozilla Pondering Collecting Anonymized Browsing Data? newsMozillaMaking The Web Smoother with Independent Rendering news Changes to the Edge rendering engine.Bogdan BrinzaBuilding a simple To Do web app with Stitch, React, and MongoDB tutorial This short tutorial will get you started with MongoDB Stitch.MONGODB SponsorBe Careful with Sub-Elements of Clickable Things tutorial Gotchas when attaching event handlers to sub-elements.Chris CoyierUsing Code Snippets in Chrome Developer Tools tutorialAlex Kras9 Tips for More Maintainable CSS tutorialJoe Reynolds‘font-size’: An Unexpectedly Complex CSS Property tutorial A run-through of the hidden complexities of the CSS font-size property.Manish Goregaokar150 Tips For Using Chrome DevTools tutorial Over 150 handy animated gifs showcasing how to use Chrome DevTools.Umar HansaCreating Photorealistic 3D Graphics on the Web tutorialEngin ArslanMaking the Web More Accessible With AI story The tale behind a Chrome extension that auto-populates ‘alt’ text on images.Abhinav SuriCoder Frozen in 2009 Awakens to Find Frontend Development Not Awful storyRichard Schneeman.NET and WebAssembly: Is This the Future of the Front-End? opinionScott HanselmanChris Coyier on the Future of Web Development in 4 Videos videoMedia TempleTurbocharge your website in minutes ? tools Over 150,000 developers trust Pusher to add features like real-time chat & live UI updates to their websites.Pusher SponsorGridzilla: A Responsive, Mobile-First Flexbox Grid System codeMostafa FouadSongbird: Spatial Audio Encoding on the Web code A real-time spatial audio encoding JavaScript library for WebAudio applications. Repo here.GoogleA Pure CSS Textured Neon Text Effect demoCodePenCSS-Only Directionally Aware Hover demo This is a neat little demo, showing a directionally aware hover effect in pure CSS.Giana Blantin Source link