December 20, 2017 Frontend Focus Issue 321 — December 19, 2017 In this issue, we’re taking a look back at the most popular links of 2017. It’s a great opportunity to catch up with the bigger stories that caught everyone’s imagination in the world of frontend development this year.We’re now taking a break for Christmas and will be back on January 10. A big thank you for all of your support this year — have a great holiday season. ?– The Frontend Focus team (Peter, Chris and Za’e)The Most Popular Items of 2017HEAD: Everything To Go In Your HTML’s ‘head’Starts from the usual basics (title, charset, etc.) but works up to a significant number of meta and link tags useful in various situations. Josh BucheaA Thorough Guide to Building Layouts with CSS GridA helpful guide to CSS Grid, including a free visual grid builder tool. CoffeeCupDebugging Tips and Tricks for Front-End DevelopersA fantastic round-up of concepts, tools, and things to consider when doing one of a developer’s most important tasks: debugging. Sarah Drasner? New Course: Advanced State in React with Redux, MobX & MoreLearn the patterns to manage state across large React applications. Take a tour through the popular approaches and libraries to state management like Flux, Redux, MobX, Redux Thunks and Redux Sagas in this new course by Steve Kinney. Frontend Masters SponsorDoes CSS Grid Replace Flexbox?In short, not exactly. Some good examples here of where Grid and Flexbox work best. Robin RendleDebugging Tips and Tricks for Front-End DevelopersA fantastic round-up of concepts, tools, and things to consider when doing one of a developer’s most important tasks: debugging. Sarah DrasnerBest Practices for Links Back to the HomepageA site logo linking to the homepage is not always enough. Here’s some best practices for that key link. Nielsen Norman GroupThe State of CSS: 5 Things You Don’t Need Anymore?Five supposedly ‘old-fashioned’ CSS practices that you may not need anymore (like using floats or grid libraries) and what you can use instead. Ryan OglesbyYou Do Not Need A CSS Grid Based Grid SystemWhy you don’t need a grid system to use CSS Grid Layout, due to it already being one. Rachel AndrewFour Key Capabilities of Database Monitoring VividCortex SponsorThe Front-End ChecklistAn exhaustive list of all the elements you need to have/test before launching your site. Brandon MorelliBootstrap 4 Beta (Was) ReleasedTwo years in the making, the beta of Bootstrap version four arrived in August, taking some key steps forward — for starters, it switched from Less to Sass and is now Flexbox based. Mark OttoLearn How To Debug JavaScript with Chrome DevToolsDitch console.log debugging once and for all by learning to use breakpoints to debug code within the DevTools. Brandon MorelliGetting Started with Headless Chrome‘Headless’ Chrome is basically Chrome running without any UI or visible controls, so is ideal for being remotely controlled from JavaScript. Eric BidelmanOptimize Web App Performance with DatadogStart collecting, monitoring & correlating real-time metrics from 200+ technologies in minutes. Try it free. Datadog SponsorLearn How To Debug JavaScript with Chrome DevToolsDitch console.log debugging by using breakpoints to debug code within the DevTools. Brandon MorelliShoelace.css: A Pure CSS Alternative to BootstrapA back to basics CSS starter kit “for when you don’t need the whole boot”. Cory LaviskaJobs Software Engineer – Web Clients, ReactJS+Redux (New York)Join a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more. Discovery Digital Media Frontend EngineerIndeed Prime is a free service that connects you to hundreds of companies. Indeed Prime Source link