October 8, 2017 Frontend Focus Issue 310 — October 4, 2017 Essential Image Optimization for the WebA free ebook on modern image optimization techniques. Formats, decoders, techniques for efficient compression and more are covered. Addy OsmaniCSS Grid Gotchas And Stumbling BlocksCSS Grid is such a different way of approaching Web layout that a variety of questions often pop up, some of which are answered here. Rachel AndrewThe Future of Accessibility for Custom ElementsA look at how the Accessibility Object Model may help custom elements with semantics. Rob DodsonIntroduction to Vue.js with Sarah DrasnerGet up and running in a hurry with the Vue.js JavaScript framework. Learn how to build and maintain complex applications quickly and efficiently in this practical guide to Vue.js by Sarah Drasner. Frontend Masters SponsorFundamentals of Responsive ImagesA good explainer of the key concepts for responsive images, and an overview of a few different responsive image tactics. Marc DrummondHTML 5.1 2nd Edition is a W3C RecommendationThe Web Platform Working Group has published a W3C Recommendation of HTML 5.1 2nd Edition. W3CIntegrating SVG Into Your SiteDudley Storey gets into why you should be using Scalable Vector Graphics (SVG) and how you can easily integrate them into your site in a variety of ways. Heart InternetJobs Frontend Developer at X-Team (Remote)We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. X-Team Senior NodeJS Engineer, E-commerce/Shop TeamWe’re looking for an experienced Node dev to build infrastructure to support our dynamic content engine and build tooling. Casper Senior Front End Developer – Booking.com (Amsterdam)We’re seeking a Developer to take initiative on larger technical needs of the product and focus on moving the business forward. Booking.comIn BriefEverything You Ever Wanted to Know About Secure HTML Forms tutorialRandall DeggesUsing SVG clip-path to Change A Logo’s Color On Scroll tutorialEduardo BouçasImplementing a Collapsible Widget with Pure CSS tutorialAlligator.ioVoiceOver, Safari and `list-style-type: none` tutorial A fix for when VoiceOver doesn’t play nice when reading out unordered lists from Safari.Unfettered ThoughtsHow to Write Better CSS with the BEM Naming Convention tutorialRaymon Schouwenaar2017 Video Developer Report – Free Download Get the 24 page report on current video technology usage and planned usage for 2018.Bitmovin SponsorHow 18F Created A Large-Scale Design System for the US Government storyMaya BenarieBay’s Font Loading Strategy story The considerations and strategy behind eBay’s switch to using a custom font.Senthil PadmanabhanMicrosoft Edge Extensions, One Year Later storyMicrosoft Edge TeamWhat You Need to Know About Variable Fonts opinion An interview with Tim Brown and Bram Stein of Adobe Typekit.Ulrik HogrebeHow CSS Grid Went From Idea to Reality videoMicrosoftEmbedding a CMS anywhere you want, with any framework A CMS that works on any website and any platform. It’s simple to install & easy for your whole team to use.Component IO SponsorStripe Elements: Build Beautiful, Smart Checkout Flows tools Pre-built UI components for creating ‘pixel-perfect’ checkout flows across desktop and mobile.StripeCSS Grid Layout + Firefox = ?? code A detailed walk-through on learning CSS Grid layout.MozillaSentinelJS: Detect New DOM Nodes using CSS Selectors codeAndres Moreya11y-dialog: A Very Lightweight and Flexible Accessible Modal Dialog codeEdenspiekermannA Comic Book Style Layout Example with CSS Grid and ‘clip-path’ demo codeRen Aysha Source link