February 3, 2018 Frontend Focus Issue 325 — January 31, 2018 How to Use Variable Fonts in the Real WorldUsing variable fonts (now supported across multiple browsers) in a real production context can be tricky. Here’s how studio Clearleft achieved it for a new conference website. Richard RutterRecreating the GitHub Contribution Graph with CSS GridRecreating layouts is a great way to learn new frontend technologies, and recreating GitHub’s famous contribution graph is an interesting task. Ire AderinokunThe Increasing Nature of Frontend ComplexityThe rise in frontend complexity stems from an increased diversity of clients, a higher quality bar, and huge market growth. Kevin BallPlanning a React Application: WhitepaperStart your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy. Progress SponsorAutomated Browser Testing from Windows 10An overview of the concepts and techniques involved in running test scripts against browsers using WebDriverJS on Windows 10 and Microsoft Edge. Smashing MagazineVideo: New Adventures in Responsive Web DesignSmashing Magazine’s founder Vitaly Friedman on crafting flexible responsive design systems using the latest web technologies. Vitaly FriedmanIndexed Database API 2.0 Now a W3C RecommendationThe next version of IndexedDB, an API for working with a client-side database of records holding simple values and hierarchical objects. W3CJobs Technical Writer (Full Time / Part Time / Remote)Do you like writing for a technical audience? Looking for a bit of extra income, a part-time or a full time role, drop us a line. Raygun Frontend Web Engineer at Citymapper – Junior and SeniorWe’re looking for more incredible frontend web engineers to help with our React powered consumer websites and complex map based tools. Citymapper Front-end Dev Jobs at 4,000+ CompaniesTry Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. VetteryIn BriefSafari 11.1: Service Workers, Payment Request API, and more news A few compelling new features in the latest Mac and iOS browser.AppleWCAG 2.1 Now A W3C Candidate Recommendation news The latest Web Content Accessibility Guidelines (WCAG).Andrew KirkpatrickEnter The ‘Dragon (Drop)’: Accessible List Reordering tutorial Dragon Drop is a drag-and-drop list reordering module that works well with screen readers and other assistive technology.Harris SchneidermanServerless Development with Node.js, AWS Lambda & MongoDB Atlas tutorialmongodb SponsorChoosing Web Fonts: A Beginner’s Guide tutorialGoogle DesignPhone Number Links and Accessibility tutorial Styling phone numbers on different clients while following WCAG 2.0 guidelines.Matt SmithThe Building Blocks of Web Workers and 5 Cases for Their Use tutorial A way to run JS in background threads in the browser.Alexander ZlatkovThe Compact Guide to Web Maintainability: 200 Tips and Resources tutorialJens Oliver MeiertHow to Style a Form with Tailwind CSS tutorialNick BasileBuilding a Modal Component with Vue.js tutorialFilipa LacerdaWhat’s New in Chrome 64’s DevTools in 3 Minutes videoGoogle Chrome DevelopersWhy Your Site is Slow Pantheon SponsorDebugging CSS Performance with Chrome’s Profiling Tools story How a tricky problem was analyzed using Chrome’s tools.Dan RobertsA Tale of Two Rooms: Understanding Screen Reader Navigation opinionRyan JonesPlease Stop Using ‘Local Storage’ opinion Why you should stop using it to store session data.Randall DeggesChallenges for Web Developers opinion Paul Kinlan shares some of the challenges he believes developers now face every day.Paul KinlanWhy Japanese Web Design Is (Still) the Way It Is opinionDoug McGowanBulma: A CSS Framework to Consider in 2018 opinionMat WritesGet the Best, Most Complete Collection of Angular UI Controls: Wijmo tools Wijmo’s dependency-free UI controls include rich declarative markup, full IntelliSense, and the best data grid.GrapeCity Wijmo SponsorClippy: A CSS ‘clip-path’ Maker Tool toolsBennett Feelypurgecss: A Tool to Remove Unused CSS toolsFull HumanSockette: The Cutest Little WebSocket Wrapper code A 339 byte wrapper around WebSocket that auto reconnects if the connection drops.Luke Edwards Source link