#285: Debugging Tips and Tricks for Front-End Developers

Datetime:2017-04-13 06:19:44         Topic: Front-end Development  Coder          Share        Original >>
Here to See The Original Article!!!

FrontEnd Focus
Issue 285 — April 12, 2017

Debugging Tips and Tricks for Front-End Developers

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

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 or for free on BrowserStack.


:blue_book::sparkles: The 2017 Front-End Handbook - Free and Open Source

A free, thorough and open source guide anyone could use to learn about the practice of front-end development.

Frontend Masters    Sponsor

A Guide to ARIA for Web Accessibility: A W3C Editor's Draft

A practical guide on how to add accessibility information to HTML elements using the WAI-ARIA (Accessible Rich Internet Applications) spec.


Lighthouse: An Automated Web Page Quality Tool

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

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?

Thoughts on why React has become so popular, so quickly, along with a demonstration of the core principles.

Samer Buna


Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

Chrome Introducing 'Scroll Anchoring' to Eradicate Page Jumps news


Getting Started with Neat 2.0, A Lightweight and Flexible Sass Grid tutorial


Case Study: My First Practical CSS Grid Layout tutorial

Tyler Sticka

CSS Grid Layout and PostCSS: Now 'KISS' 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) tutorial

Alexandra Etienne

Individualizing CSS Properties with CSS Variables tutorial

Dan Wilson

Block Formatting Contexts and Lists with 'display: flow-root' tutorial

Resolves the issue of weird padding/margins around floated elements.

Paul Bakaus

Debugging CSS for UI Responsiveness 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

Our team has coded thousands of web and mobile projects. Learn how we hire the best front-end developers.

Code My Views   Sponsor

Automated Web Accessibility Testing with aXe video


Creating Music with the Web Audio API video

A well produced 30 minute talk.

Rich Williams

Stylelint: A Modern CSS Linter With Over 150 Checks tools

.. and support for the latest CSS features.

Maxime Thirouin, David Clark, Richard Hallows

mq-scss: A Sass Mixin for Formulating Media Queries tools

Daniel Tonon

Try Bugsnag, and Get a Free T-Shirt :shirt: tools

For a limited time, get a free shirt when you sign up and try Bugsnag for automatic JavaScript error monitoring.

Bugsnag   Sponsor

Embedo: A Modern Social Media Embed Plugin code

For Facebook, Twitter, Instagram, YouTube and Pinterest content.

Shobhit Sharma

SVG Icons for Popular Brands and Technologies code

Quite developer/tech focused and lots to choose from.

Simple Icons

Across Tabs: Easy Comms Between Cross Origin Browser Tabs code

Further info, documentation and a demo .


Curated by Peter Cooper and Chris Brandrick and published by Cooperpress . Like this? You may also enjoy: JavaScript Weekly , Node Weekly , and React Status .

Stop getting FrontEnd Focus :Change email address : Read this issue on the Web

© Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK