--- title: "#285: Debugging Tips and Tricks for Front-End Developers" publication: "Frontend Focus" issue: 285 published_at: "2017-04-12" canonical_url: "https://frontendfoc.us/issues/285" --- #285: Debugging Tips and Tricks for Front-End Developers [Read this e-mail on the Web](http://frontendfoc.us/issues/285) Frontend FocusIssue 285 — April 12, 2017[Debugging Tips and Tricks for Front-End Developers](https://css-tricks.com/debugging-tips-tricks/?utm_source=frontendfocus&utm_medium=email)A fantastic round-up of concepts, tools, and things to consider when doing one of a developer’s most important tasks: debugging. Sarah Drasner [EdgeHTML 15, a Major Update to Microsoft's Edge Browser](https://blogs.windows.com/msedgedev/2017/04/11/introducing-edgehtml-15/?utm_source=frontendfocus&utm_medium=email)A major release for Edge that includes WebVR, CSS Custom Properties, Payment Request API, and experimental WebAssembly support. Test in the latest Edge using [a VM image](https://developer.microsoft.com/microsoft-edge/tools/vms/) or [for free on BrowserStack.](https://www.browserstack.com/test-on-microsoft-edge-browser) Microsoft [![Frontend Masters\](https://copm.s3.amazonaws.com/de4700de.jpg)](https://frontendmasters.com/books/front-end-handbook/2017/?utm_source=frontendfocus&utm_medium=email)[📘✨ The 2017 Front-End Handbook - Free and Open Source](https://frontendmasters.com/books/front-end-handbook/2017/?utm_source=frontendfocus&utm_medium=email)A free, thorough and open source guide anyone could use to learn about the practice of front-end development. Frontend MastersSponsor [A Guide to ARIA for Web Accessibility: A W3C Editor's Draft](https://w3c.github.io/aria-in-html/?utm_source=frontendfocus&utm_medium=email)A practical guide on how to add accessibility information to HTML elements using the WAI-ARIA (Accessible Rich Internet Applications) spec. W3C [Lighthouse: An Automated Web Page Quality Tool](https://developers.google.com/web/tools/lighthouse/?utm_source=frontendfocus&utm_medium=email)Available as a Chrome Extension, command line app or Node module, Lighthouse is a Google-built tool for auditing Web pages for a variety of issues. Google Developers [The Invisible Parts of CSS](https://madebymike.com.au/writing/the-invisible-parts-of-CSS/?utm_source=frontendfocus&utm_medium=email)An attempt to shed some light on the invisible parts of CSS, such as the rendering process, the box model, and more. Mike Riethmuller [React Has Been Taking Over Front-End Dev. Why?](https://medium.freecodecamp.com/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76?utm_source=frontendfocus&utm_medium=email)Thoughts on why React has become so popular, so quickly, along with a demonstration of the core principles. Samer Buna Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter) - [Frontend Engineer at FR8Star](https://fr8-revolution.breezy.hr/p/e479bcfd6c1a-frontend-engineer?utm_source=frontendfocus&utm_medium=email)We are looking for a Frontend Engineer to help us revolutionize the trucking industry. FR8Star - [Frontend Lead at 3D Hubs (Amsterdam)](http://frontenddeveloperjob.com/job/58ecf78ca5f1800004c3978a?utm_source=frontendfocus&utm_medium=email) 3D Hubs - [Frontend at Cyza Inc. (Remote)](http://frontenddeveloperjob.com/job/58ed4e66a13d5f00047b9dd8?utm_source=frontendfocus&utm_medium=email) Cyza Inc. Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend) In Brief [Chrome Introducing 'Scroll Anchoring' to Eradicate Page Jumps](https://blog.google/products/chrome/taking-aim-annoying-page-jumps-chrome/?utm_source=frontendfocus&utm_medium=email) news Google [Getting Started with Neat 2.0, A Lightweight and Flexible Sass Grid](https://robots.thoughtbot.com/the-release-of-neat-2-0-a-lightweight-and-flexible-sass-grid?utm_source=frontendfocus&utm_medium=email) tutorial Thoughtbot [Case Study: My First Practical CSS Grid Layout](https://cloudfour.com/thinks/first-css-grid-layout/?utm_source=frontendfocus&utm_medium=email) tutorial Tyler Sticka [CSS Grid Layout and PostCSS: Now 'KISS'](https://medium.com/@SylvainPV/css-grid-layout-and-postcss-now-kiss-5e35f61a6f00?utm_source=frontendfocus&utm_medium=email) tutorial What happens when you combine a new powerful specification with a great processing tool? Sylvain Pollet-Villard [Augmented Reality in 10 Lines of HTML (with AR.js and A-Frame)](https://dev.to/andraconnect/augmented-reality-in-10-lines-of-html?utm_source=frontendfocus&utm_medium=email) tutorial Alexandra Etienne [Individualizing CSS Properties with CSS Variables](https://danielcwilson.com/blog/2017/04/individualized-properties/?utm_source=frontendfocus&utm_medium=email) tutorial Dan Wilson [Block Formatting Contexts and Lists with 'display: flow-root'](https://paulbakaus.com/tutorials/css/block-formatting-contexts-and-lists/?utm_source=frontendfocus&utm_medium=email) tutorial Resolves the issue of weird padding/margins around floated elements. Paul Bakaus [Debugging CSS for UI Responsiveness](https://www.sitepoint.com/debugging-css-for-ui-responsiveness/?utm_source=frontendfocus&utm_medium=email) tutorial CSS properties and values that trigger reflows are costly when it comes to page and UI responsiveness. Tiffany Brown [The Ultimate Guide to Hiring a Front-end Developer](https://codemyviews.com/services/front-end-development?utm_source=newsletter&utm_medium=email&utm_campaign=frontendweekly) Our team has coded thousands of web and mobile projects. Learn how we hire the best front-end developers. Code My ViewsSponsor [Automated Web Accessibility Testing with aXe](https://www.youtube.com/watch?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&v=jC_7NnRdYb0) video A11ycasts [Creating Music with the Web Audio API](https://pusher.com/sessions/meetup/js-monthly-london/music-with-the-web-audio-api?utm_source=frontendfocus&utm_medium=email) video A well produced 30 minute talk. Rich Williams [Stylelint: A Modern CSS Linter With Over 150 Checks](https://github.com/stylelint/stylelint?utm_source=frontendfocus&utm_medium=email) tools .. and support for the latest CSS features. Maxime Thirouin, David Clark, Richard Hallows [mq-scss: A Sass Mixin for Formulating Media Queries](https://github.com/Dan503/mq-scss?utm_source=frontendfocus&utm_medium=email) tools Daniel Tonon [Try Bugsnag, and Get a Free T-Shirt 👕](https://www.bugsnag.com/tshirt-promo/?utm_source=cooperpress&utm_medium=cpc&utm_content=shirt-offer&utm_campaign=2017-tsc&utm_term=frontend-focus-20170412) tools For a limited time, get a free shirt when you sign up and try Bugsnag for automatic JavaScript error monitoring. BugsnagSponsor [Embedo: A Modern Social Media Embed Plugin](https://shobhitsharma.github.io/embedo/?utm_source=frontendfocus&utm_medium=email) code For Facebook, Twitter, Instagram, YouTube and Pinterest content. Shobhit Sharma [SVG Icons for Popular Brands and Technologies](https://simpleicons.org/?utm_source=frontendfocus&utm_medium=email) code Quite developer/tech focused and lots to choose from. Simple Icons [Across Tabs: Easy Comms Between Cross Origin Browser Tabs](https://github.com/wingify/across-tabs?utm_source=frontendfocus&utm_medium=email) code Further [info, documentation and a demo](http://engineering.wingify.com/across-tabs/introduction.html). Wingify Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/285) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK