April 19, 2017 Read this e-mail on the WebFrontEnd Focus Issue 286 — April 19, 2017 It’s Time To Start Using CSS Custom Properties CSS Custom Properties (aka CSS variables) are now supported in all major browsers and they offer a lot of possibilities to Web developers, as seen in this thorough overview. Serg HospodaretsReplacing a Bootstrap Layout with CSS Grid“Now that CSS Grid Layout is a reality, I wanted to see what it would take to replace an existing grid framework with CSS Grid.” Dan BrownSmooth Scrolling and AccessibilityHeather Migliorisi covers two accessibility issues to keep in mind when implementing smooth scrolling: focus management and animations. CSS TricksA Netflix like Live and VoD Streaming Experience in HTML5An easy to integrate and versatile HTML5 based MPEG-DASH and HLS player for desktop, mobile, VR Headsets, Chromecast, AirPlay, AppleTV and SmartTVs. Including a WebGL based VR and 360 video component and a completely customizable HTML5/CSS UI. Bitmovin SponsorPersonalization with CSS Variables and ReactHow and why Geckoboard uses CSS Variables in combination with React to re-style their web app on the fly. Dan BahramiA Brief Overview of Responsive Navigation PatternsResponsive Web design has changed the way we build sites. Here, Smashing Magazine looks at responsive navigation techniques, in particular. Chris PoteetStickybits: An Alternative to ‘position: sticky’ Polyfills position: sticky doesn’t work in Edge yet, but this provides similar ‘sticky header’-style functionality in under 2KB. Dollar Shave ClubFirefox Simplifying Its Release ChannelsThe Firefox team are getting rid of the Aurora channel and basing the Developer Edition on the beta build. Mozilla HacksJobs Frontend Developer at X-Team (Remote)We seek a developer with extensive Frontend knowledge. We’re 100% remote and provide the funding needed to help you achieve your goals and grow. X-Team Frontend Engineer at FR8StarWe are looking for a Frontend Engineer to help us revolutionize the trucking industry. FR8Star Frontend Web DeveloperCreate an exceptional community experience for over 100 million Runtastic.com users. Join our team now! Runtastic GmbHCan’t find the right job? Want companies to apply to you? Try Hired.com.In BriefCSS3 Pseudo-Classes: The Basics tutorial Some uncommon ones here such as :read-only and :in-rangeGoldstein, Lazaris and WeylFocusing a background-image on a Precise Location with %ages tutorialJay SitterOn Hiding Content tutorial How the hidden attribute works, how it differs from aria-hidden and how it relates to just hiding with CSS.Hidde de VriesCreating Testable, Modularized Chrome Extensions tutorialNathaniel WoodthorpeEncoding Data in CSS to Be Reused in JavaScript tutorialAlex GyoshevBuilding a CSS Grid Overlay tutorialAndreas LarsenFull-day Workshop: Using ES6 and React with Netflix’s Brian Holt course React eschews the traditional MVC architecture, a counter-intuitive approach Brian explains along with JSX, React best practices, and the React component lifecycle.Forward Courses SponsorA Modern Front-End Workflow video In 30 minutes, learn various DevTool secrets and how to adopt a modern development and debugging workflow.Umar HansaThe Benefits of Server-Side Rendering Over Client-Side Rendering opinionWalmart LabsStop Using Device Breakpoints opinion “Content breakpoints give people better experiences no matter what size device they have.”Adam Silver3 CSS Grid Features That Make My Heart Flutter opinionUna KravetsChrome Debugging Protocol Proxy: A Reverse WebSocket Proxy tools If you want to debug the debugger..Mateusz Gajewskicssnano: A Modular Minifier, Built On Top of The PostCSS Ecosystem toolsBen BriggsCSSPeeper: A Smart CSS Viewer Tailored for Designers tools A Chrome extension for inspecting items and styles.Dawid M?ynarz and J?drzej SadowskiSQL Source Control: track each change to your SQL Server database tools Get a full history in your source control system. See who made changes, what they did & why. See howRed Gate SponsorRAGrid.css: A Grid Framework with Auto-Layout Features codeAdam ArgyleWebVR Experiments demo Google recently launched WebVR Experiments, a site featuring a dozen or so interactive WebVR apps and their source code. Associated blog post here.GoogleA Pure CSS Crossword using CSS Grid demoAdrian RoworthCurated by Peter Cooper and Chris Brandrick and published by Cooperpress. 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