Uses

A little more information about what I use and how I use it.

It's a fun / interesting time to be working on the front end, new technologies like ES6 are slowly being adopted but older tech like jQuery is still very much alive in legacy systems and smaller projects that don't require the complexity that full blown applications will bring.

On this page

Code

Modernizr

Modernizr is used to detect what the users browser is capable of. I use it to allow modern browsers to use the latest technologies, and provide fallbacks for older ones.

Modernizr

Sass

Sass is a CSS preprocessor. It allows me to define variables, nest, and organise my stylesheets into multiple files before converting it to regular CSS for the browser to read. I use the SCSS syntax.

Sass

Command Line

GUI's are awesome but for things like git, npm, and gulp I use a terminal. On my Mac I use the Homebrew package manager to install software and keep everything up to date. For a text editor, I'm Team Vim.

Build Tools

Babel

Babel is a compiler that turns the latest version of Javascript into ES5 code that can run in current browsers.

Babel

Gulp

Gulp is a task runner, it automates time-consuming tasks like compiling, minifying, and cache busting.

Gulp

npm

npm is a package manager, I use it to install and manage project dependencies.

npm

Webpack

Webpack is a module bundler, it packages the modules that make up my code into static assets for the browser to use. For some projects I'm also starting to use Webpack as a task runner (replacing Gulp).

Webpack

PostCSS

PostCSS is a CSS processor, it's incredibly flexible and allows me to pick and choose what I want it to do. I use PostCSS for linting, optimising my CSS, supporting older browsers, and future proofing by polyfilling real W3C standards.

PostCSS

Software

PhpStorm

PhpStorm is my editor of choice, as a full IDE it centralises many of the tools I use when writing code. It can also understand the files in a project and validate them on the fly.

Icon PhpStorm

Adobe Creative Cloud

I have a Creative Cloud subscription that allows me to use the whole Create Suite. Mostly I use Photoshop, but also Illustrator, XD, and InDesign.

Adobe

Git

I use the Git version control system for tracking changes made to code by myself or team members. And to rewrite my development history

Git

Testing

Nightwatch

I use Nightwatch for functional testing. It acts exactly as a user would

Nightwatch

Jest

Jest is a JavaScript testing framework, I primarily use it for unit-testing React components along with Enzyme.

Jest

Pa11y

I use Pa11y for automated accessability testing.

Pa11y

Ghostlab

I use Ghostlab for cross-device testing, it allows me to synchronise a website across multiple physical devices. There is absolutely no better way to test how a site will look than actually seeing it run on the device, and Ghostlab means I can control the same website on several devices and browsers simultaneously.

Ghostlab

Hardware

I'll admit it: at this point I'm well and truely invested in the Apple ecosystem. My Mac allows me to remotely debug Apple and Android devices, and can easily run Windows. MacOs is also a Unix based system but has excellent access to commerical apps that I wouldn't have on Linux.

  • Macbook Pro - 13" with Touchbar (2016) - Laptop
  • Magic Mouse 2 and Magic Keyboard
  • 2x Acer 21.5" monitors - external displays
  • AirPort Time Capsule - an external drive that allows me to wirelessly back up my laptop while also acting as a high speed wifi router
  • iPhone X

A few others...

  • caniuse-cmd - command line version of caniuse, it provides browser support information for front end technologies.
  • Codepen - a browser based code editor. I use it for rapid prototyping and testing.
  • Github - a version control hosting service, it's where I store my source code.
  • FontAwesome - an icons library.