December 6, 2017 Frontend Focus Issue 319 — December 6, 2017 Web Content Accessibility Guidelines For People Who Haven’t Read ThemA detailed look over the WCAG – a starting point in making your sites work better for all. Alan DaltonHow Stripe Designs Beautiful WebsitesExamining the tips and tricks used to make Stripe’s frequently copied site design a notch above the rest. Lee RobinsonLint the Web Forward with Sonarwhal Sonarwhal is a linting tool for accessibility, security, and other Web best practices. Stephanie DrescherTry SpreadJS, the Most Powerful JavaScript Spreadsheet Component: Fast, Flexible, No Excel DependencyDeliver intuitive, efficient, multi-functional, pure JavaScript spreadsheets for enterprise apps. GrapeCity SpreadJS SponsorCascading Web Design with Feature QueriesAn introduction to the concept of ‘cascading web design’, an approach made possible with feature queries. Chen Hui JingThe (Far) Future of CSSA speculative look into the future of CSS and Houdini’s goal of making CSS user-extensible. Tab AtkinsDebugging React Perf with React 16 and Chrome DevToolsAn in-depth step-by-step visual walkthrough demonstrating how to audit JavaScript runtime performance and find slow rendering components. Ben SchwarzThe Front-End ChecklistA more dynamic front-end development and deployment checklist based on an article we linked last month. David DiasJobs 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 Software Engineer with ReactJS+ReduxJoin a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more. DISCOVERY DIGITAL MEDIA Front-End EngineerIndeed Prime is a free service that connects you to hundreds of companies. Indeed PrimeIn BriefEvolution of ‘img’: GIFs Without the GIF in Safari news Safari Technology Preview is now supporting loading MP4 videos via img tags.Performance CalendarW3C Invites Implementations of CSS Color Module Level 3 newsW3C$20 Free on a New Linode Account Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.Linode Cloud Hosting SponsorDebugging CSS Grid Layouts with Firefox Grid Inspector tutorialChen Hui JingProviding Alternate Content for Screen Reader Users tutorialSam JoehlManageable Utility Systems with CSS Variables tutorial A look at the difference between Sass variables and new CSS variables.Kasey BonifacioHappier HTML5 Form Validation tutorialDave RupertA Frontend Developer’s Guide to GraphQL tutorialCSS TricksHow to Use CSS Gradients on the Web tutorial Plenty of examples here for getting to grips with using gradients on the web.Adi PurdilaProgressive Image Loading using Intersection Observer and SQIP tutorial SQIP is an SVG-based LQIP (Low Quality Image Placeholders) technique.Performance CalendarLive Coding Session: Deploying Node.js Web Apps to App Service on Linux Learn how to build & package a Node app & deploy it through a CI system to Azure App Service on Linux.Microsoft SponsorAudioWorklet: What, Why, and How video Hongchan Choi, a software engineer on the Chrome team, goes in depth about what the new AudioWorklet is, why it’s a great step for Web Audio, and how it works.WebAudio PDXWhy CSS Grid Is Better Than Bootstrap for Creating Layouts opinionPer Harald BorgenBauble Toggle: A Christmas Bauble Toggle Control demoCodePen‘Strike Off’ ToDo List Animation demo code When you tick an item, it gets struck out with an animation.Code My UI Source link