Must‑Know Front‑End Developer Tips: Tools, Testing, and Workflow Hacks

This article records advice from two engineers for web developers: Rebecca Murphey, who shares practical tools and techniques, and Philip Walton, who offers insights on overcoming browser development challenges.

Learn ECMAScript 2015 with resources such as "Understanding ES6", ES6 Rocks, BabelJS, and Axel Rauschmayer's "Exploring ES6". Focus on asynchronous calls, callbacks, and promises rather than mastering every detail.

Use Modules

Murphey believes modules should be the building blocks of client‑side web applications. She uses webpack for modularity and hopes ECMAScript standard modules become widely supported.

Test Your Code

She stresses writing tests and keeping code testable, preferring Mocha over Intern, and recommends Michael Feathers’s "Working Effectively with Legacy Code".

Automate Build Processes

She tried Grunt and Gulp but settled on Yeoman for scaffolding new projects and standardising third‑party JavaScript, mentioning Broccoli as a possible future replacement.

Write High‑Quality Code

She advises refactoring code that violates well‑defined style guides and using lint tools such as JSCS or ESLint.

Use Git

She recommends feature branches, interactive rebase to clean commits, and running hooks via ghooks before pushes and commits.

Generate HTML on the Server

For performance, she suggests pre‑generating static HTML in large projects, serving it quickly and manipulating it client‑side when needed.

Embrace Node

She urges web developers to master Node.js basics: initializing a project, setting up an Express server, and using the request module for proxying.

Insights from Philip Walton

Walton, a Google engineer, argues that great front‑end engineers distinguish themselves by deep thinking rather than tool knowledge. He stresses truly understanding code execution, not just getting it to run.

Deep Dive into Code

He encourages thorough investigation of how code works, which saves time in the long run.

Stay Ahead of Browser Changes

Developers should monitor browser updates that may break existing code. Example: in IE10 the following code fails:

var isIE6 = !isIE7 && !isIE8 && !isIE9;

Read Specifications Carefully

Walton highlights the importance of reading specs, citing flexbox min‑width defaults as an example where Firefox correctly follows the spec while other browsers differed.

Code Review

Reviewing others’ code broadens perspective and is essential since most work involves modifying existing codebases.

Work with Smart People

Early in a career, work in a team to learn from experienced members; later, contribute to open‑source projects.

Avoid Reinventing the Wheel Unnecessarily

While reinventing can be harmful for business, it can be valuable for learning; sometimes writing your own code is beneficial.

Document Your Experience

Walton’s final advice is to write about what you learn—writing, speaking, and building demos force deep understanding, even if no one reads the material.