February 15, 2017 — Read this e-mail on the WebFrontEnd Focus Issue 277 — February 15, 2017 ‘CSS4’ Selectors: What Can We Expect?Some of the ideas currently in discussion at the W3C regarding the Selectors Level 4 Draft. Arturo CamposHow Stack Overflow Redesigned Its Navigation BarA significant change for one of the most used developer sites in the world. This post digs into the changes made and how they performed during A/B testing. Stack OverflowWhat’s Up with Base64 Encoding and Performance?What is the performance reality of embedding external assets directly into pages or stylesheets? The conclusion is ‘Base64 still feels like a huge anti-pattern.’ Harry RobertsAutomatically capture and fix JavaScript errors affecting your users ?Get real-time crash alerts and collect detailed diagnostics so you can fix errors for your users. See deminified stacktraces with support for sourcemaps. Cut through front-end noise so you can efficiently assess the impact of errors. Learn more. Bugsnag SponsorBridging CSS and JS with Custom PropertiesA simple, practical example of how CSS variables (supported in all major browsers except Edge) can lead to looser coupling and better code when JS needs to interact with CSS. Sérgio GomesAutotrack: Enhanced Google Analytics TrackingBy default, Google Analytics tracks pageviews, but there are many other common on-page events that can be tracked (form submits, scrolling, page visibility). Autotrack makes this easier to do. GoogleAn Element-by-Element HTML ReferenceEssentially a list of 113 HTML elements which link to pages explaining their use and the attributes they support, if any. There’s a similar reference for CSS too. Jeremy ThomasFriendly Webdev Tutorials For Complete BeginnersCovers basic HTML, CSS, the box model, flexbox, floats, etc. Suited for beginners but I found the flexbox page a good primer on its own. Interneting Is HardExperimenting with speechSynthesisThe Web Speech API provides the ability to voice-enable your website by using the SpeechRecognition and the SpeechSynthesis interfaces. Aaron GustafsonJobs JavaScript Application Developer (m/f) – Berlin/UmgebungCivey is seeking an experienced developer with strong JavaScript skills and is familiar with HTTP, REST and Web Applications. Civey Front-End Developer – Florida/Remote Launch Potato Front-End Engineer – Nashville, TN Lonely PlanetCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefEditor’s Draft of CSS Timing Functions Level 1 newsW3CAchieving 60 FPS Mobile Animations with CSS3 tutorial Jose Roasario shares tips for animating elements in mobile contexts.SitepointA Basic Introduction to CSS Attribute Selectors tutorial e.g. href$="5555" for links to URLs ending in ‘5555’.Tiffany BrownCreate data-intensive, feature-rich web and mobile apps with Sencha Ext JS tutorial Learn how to design, develop and test data-intensive web apps that run on desktops, tablets, and smartphones with Sencha Ext JSSencha, Inc. SponsorThe Google Analytics Setup I Use on Every Site I Build tutorialPhilip WaltonExercises in Flexbox: Simple Web Components tutorialZviad SichinavaMore HTML5 Semantics: New Elements and Features tutorialLouis LazarisCreating a ‘Rollover’ Map of the US with SVG and JS tutorialChris CoyierCSS Grid Layout Terminology, Explained tutorialIre AderinokunHTML Canvas Cheatsheet tutorialSkilledHTML5 for the Mobile Web: Browser Forms and Input Types story An overview of new form controls, how they look, behave and are supported on various mobile browsers.Ruadhán O’DonoghueA Battle Rages for The Future of The Web opinion The W3C, led by Sir Tim Berners-Lee, looks set to standardise DRM-enabling Encrypted Media Extensions (EME) in browsers.Ars Technica UKFront-end ? npm; npm ? you tools Bring npm to work to unblock collaboration, quit reinventing the wheel, and build amazing things.npm, Inc. SponsorCSSO: A CSS Minifier with Structural Optimizations toolsSergey KryzhanovskyA Collection of 180 Curated CSS3 ‘Web Gradients’ toolsitmeoScrollDir: Leverage Vertical Scroll Direction in CSS Via a Data Attribute codeDollar Shave ClubSVGO: A Node-Based Tool for Optimizing SVG Files code A long standing project but still getting frequent updates.Rythm.js: Make Elements On Your Page ‘Dance’ code A funny effect but warning: music autoplays.Benjamin PlouzennecSticky-Kit: jQuery Plugin for Sticky Elements code Attach elements to the page when the user scrolls.Fluid Paint: A WebGL-based Painting Experience demo A browser-based WebGL painting simulator. Code.David LiCurated by Peter Cooper and published by Cooperpress. If you like this, you may also enjoy: JavaScript Weekly, Node Weekly, and React Status.Stop getting FrontEnd Focus : Change email address : Read this issue on the Web© Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK Source link