August 31, 2016 Read this e-mail on the WebFrontEnd Focusformerly HTML5 WeeklyThe Case for Custom Elements Rob DodsonGoogle’s Rob Dodson makes the case for why he thinks Custom Elements make sense on the modern Web, particularly within large organizations.Ways To Reduce Content Shifting on Page Load Smashing MagazineAny time a browser has to recalculate the positions of elements in a document, a reflow occurs which can affects performance and the user experience. How can these shifts be minimized?Slicing SVG 9 Ways for Flexible Web Shadows Paul LewisWhile developing a 3D card flip effect for the Web, Google’s Paul Lewis ran into some challenges with making good shadows. This post explores how he overcame them.Building a responsive HTML5 app? Learn the must-know techniques with this free whitepaper Progress SponsoredIf you’re a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web.Memento at the W3C: A ‘Time Travel’ Extension for HTTP Herbert Van De Sompel “The W3C Wiki and the W3C specifications are now accessible using the Memento ‘Time Travel for the Web’ protocol.” Memento is an HTTP extension that adds a ‘time dimension’ to the Web.Upgrading CSS Animation With Motion Curves Nash VailA look at techniques for making CSS animations and transitions feel more natural and professional.Start Building with Web Bluetooth and Progressive Web Apps Uri ShakedHow to use Web Bluetooth to control any Bluetooth Low Energy device directly from your PC or smart phone as a Progressive Web App.Cache Fetched AJAX Requests Locally: Wrapping the Fetch API Peter BengtssonA look at building a wrapper for the Fetch API, step-by-step, to cache fetched AJAX results and avoid repeated requests to the server.A Free Web Accessibility Course by Google and Udacity UdacityBuild some practical experience in making webapps accessible with Alice Boxhall and Rob Dodson in this online course.Jobs Stop wasting time – know what you’ll earn before the interviewOn Hired, sign up in 10 minutes and get offers from top companies like GitHub, Uber, & Stripe. Engineers get an average of 5 offers on the platform in 1 week. Hired.comIn brief W3C Invites Implementations of its Data on the Web Best Practices news W3C News Microsoft Edge and Continuum: Your Desktop Browser On Mobile news Microsoft WebDriver Support Now in Safari 10 news WebDriver is a browser automation API that enables people to write automated tests. WebKit.org Celebrating 15 Years of WebKit news The first commit to the public WebKit repository was made in August 2001. Maciej Stachowiak HTML Spec Changing Behavior of Line Breaks with minlength and maxlength news WHATWG Webinar: 3 Tips to Deliver Fast Performance Across Mobile Web Tips to ensure your responsive web design is high-performance and customer-friendly. Register now. Dynatrace SPONSOR The New Rules of (Web) Form Design tutorial Mike Madaio A Thorough Intro to Spectre: A Lightweight CSS Framework tutorial Baljeet Rathi CSS Positioning Explained By Building An Ice Cream Sundae tutorial Kevin Kononenko Fun Times with CSS Pixel Art tutorial Techniques for producing retro-style ‘pixel art’ for the Web using CSS, Canvas and SVG. Geoff Graham Using WebP Images tutorial Still only supported in Chrome, however. Jeremy Wagner Use Cases for Fixed Backgrounds in CSS tutorial Geoff Graham Webpack from First Principles: A Smooth 15 Minute Intro video Front End Center Demythstifying Web Components: 4 Myths Debunked opinion Daniel Buchner How to find and fix the slowest code in your .NET application tools Find bottlenecks in your code or database and boost performance with new ANTS Performance Profiler 9. Try free. ants performance profiler SPONSOR Grade: Generate Complementary Gradients From Supplied Images code The demo shows it off well. Ben Howdle Badgerly: A CSS 3 Library for Rendering Badges code Steven Hunt React Static Plate: Build Static Sites with React + CSS Modules code Uses ES6, supports hot reloading locally, generates a sitemap.xml file. Yannik Schweinzer Interactive 3D CSS Cubes demo A simple interactive grid in 3D space. The effects are pure CSS. Christine Cha Make a Depth of Field Effect with CSS Animation demo Simulating depth-of-field with HTML and CSS alone is “surprisingly easy”. Demo of it in action. Pixel One Zero Curated by Peter Cooper and published by Cooper Press.Unsubscribe : Change email address : Read this issue on the WebPublished by Cooper Press Ltd. Fairfield Enterprise Centre, Louth, LN11 0LS, UK Source link