November 8, 2017 Frontend Focus Issue 315 — November 8, 2017 The Front-End ChecklistAn exhaustive list of all the elements you need to have/test before launching your site. Brandon MorelliCreating a Star to Heart Animation with SVG and Vanilla JavaScriptA step-by-step how-to for smooth transitions from one shape to another. Ana TudorBuilding a Responsive Accessible Table in DetailA detailed look at what it takes to create a responsive, accessible table. Adrian RoselliGet Flexgrid, the Best JavaScript Data Grid: Fast, Flexible, No DependenciesWith no dependencies and a small footprint, Wijmo FlexGrid is built for speed and extensibility. GrapeCity Wijmo SponsorAdvanced CSS-Only Form StylingLearn about selectors both new and old that you can use to style form inputs based on requirement, validity and more. Jonathan HarrellCould type=’country’ for ‘input’ Elements Make Sense?Rather than code our own country selectors all the time, could the HTML standard take care of things? Terence EdenCritical: Extract and Inline Critical-Path CSS in HTML PagesVersion 1 has just been released and it uses Chrome Headless under the hood. Addy OsmaniAn Intro to Accessibility Testing with ChromeAddy Osmani chats with Rob Dodson, a developer advocate on the Chrome team, about his workflow for accessibility testing. Google Chrome DevelopersFrappe Charts: Modern GitHub-Inspired Web ChartsA new zero-dependency chart library with elegant, responsive SVG output. Offers bar, line, and GitHub-style heatmap options so far. Prateeksha SinghJobs craigslist seeks JavaScript Developers (San Francisco, CA)CL seeks JS developers to join our small (~50) team. Come help us save the world, or at least our corner of the Internet. craigslist 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 MediaIn BriefW3C Designates WebRTC 1.0 Feature Complete newsProgrammableWebCall for Review: HTML 5.2 is a W3C Proposed Recommendation newsW3CRelease Notes for Safari Technology Preview 43 newsJon DavisWhich Technologies Do the World’s Leading Video Developers Use? Get the 24 page report on current video technology usage and planned usage for 2018.Bitmovin SponsorThe Contrast Swap Technique: Improved Image Performance with CSS Filters tutorialUna KravetsThe CSS attr() Function Got Nothin’ On Custom Properties tutorial Chris Coyier runs through some use cases for using the attr() function to read data.CSS TricksUnderstanding The Vary Header tutorialAndrew BettsUsing SVG As Placeholders: More Image Loading Techniques tutorialJosé M. PérezBypassing Browser Security Warnings with Pseudo Password Fields tutorial Don’t do this, but be aware of the problem.Troy HuntHow Payment Methods Work in The Payment Request API tutorialEiji KitamuraBasic Debugging from the Chrome DevTools Console tutorialMicha? WitkowskiHigh-Performance Service Worker Loading tutorial Ensure you’re getting the best performance out of your service worker implementation.Google Developers$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 SponsorWebpack Monitor: A Tool for Monitoring Webpack Optimization Metrics tools A configurable Webpack plugin that captures relevant stats on production builds, and offers an analysis tool to help better understand bundle composition.Jon Roach, Gordon Yu, Balal ZuhairOrion Icon Library: A Collection of Over 4,000 Free SVG Vector Icons toolsPixedenManaging Font Loading CSS Was Painful — Not Anymore tools Introducing the postcss-foft-classes plugin.Zach LeathermanPaperCSS: The Less Formal CSS Framework codeRhyne Source link