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
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.
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.
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.
Gulp is a task runner, it automates time-consuming tasks like compiling, minifying, and cache busting.
npm is a package manager, I use it to install and manage project dependencies.
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).
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.
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.
Adobe Creative Cloud
I use the Git version control system for tracking changes made to code by myself or team members. And to rewrite my development history
I use Nightwatch for functional testing. It acts exactly as a user would
I use Pa11y for automated accessability testing.
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.
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.