Front end technologies

The use of front end web development technologies including HTML, CSS and JavaScript are responsible for the structure, visual styles and interactive functionality of your website or app. Below I’ve outlined just some of the industries leading front end development technologies that I choose to work with.

npm
npm is a popular package manager for developers. It allows for hassle-free installs, updates and management of the dependencies used in my projects. This helps reduce my initial setup time, which means less cost for you and a reduced lead-time on the development of your product.

Webpack & npm scripts
I use Webpack for my main build tool and npm scripts as a task runner. A build tool is essential for modern front end development. It allows me to automate my workflow, which can increase efficiently, minimise errors and reduce cost for you.

Git
Git is an open source version control system. It is used to track changes in my source code during development and allow the coordination of work between multiple programmers.

GitHub
GitHub is a Git repository hosting service. It allows me to have a remote copy of my source code, ideal for redundancy measures, track issues and milestones, collaborate with other developers and automate processes.

Babel
Babel is a JavaScript compiler. It allows me to use modern JavaScript ES6, with a fallback for browsers that do not support the latest version.

SASS
SASS is an extension of the CSS language used to define how your site looks. Its popularity is huge, and unlike traditional CSS it allows me to work in a more efficient and modular way. This includes using both variables and logic to create styles without unnecessary repetition also known as the DRY (don’t repeat yourself) approach.

Foundation Sites, Bootstrap and Burma
Foundation Sites, Bootstrap and Bulma are three industry leading front end frameworks. They include ready-made components that act as a great starting point for me to build upon. The aim of a framework is to allow a developer to build the core of the site / app in less time, whilst providing the flexibility to allow these components to be adapted and styled to suit any design / project.

VirtualBox
Browser testing is an important process during development of a website. I use VirtualBox and Windows official virtual machines to test all my sites prior to launch. This allows me to fully test your site across all supported operating systems and browsers.

Jest
Jest is a JavaScript testing framework created and maintained by Facebook. It allows me to test my code at a unit or integration level and identify any errors. This can lead to less time spent on QA and a protection against future regression.

Enzyme and React Testing Library
Enzyme and React Testing Library are two hugely popular testing utilities for React based projects. They allow me to test if my React components function as expected. This can lead to less time spent on QA and a protection against future regression.

ESLint
ESLint is a tool to find and fix errors in my JavaScript code. When used in a continuous integration workflow, it can dramatically reduce time spent on QA.

Stylelint
Stylelint is a tool to find and fix errors in my SASS code. When used in a continuous integration workflow, it can dramatically reduce time spent on QA.

Prettier
Prettier is an opinionated code formatter. It is used to enforce formatting rules, thus creating a consistent and legible code base.

Storybook
Storybook is an open source tool for developing UI components in isolation and producing documentation. I predominantly use this tool when developing React based projects.


Back end technologies

Back end development technologies like PHP and SQL are responsible for communicating with your web server and database to populate content on your website. WordPress is a framework that is built upon these core back end programming languages. I’ve outlined the core back end development technologies I use below.

MAMP Pro
Every website is run on a server (a computer). When we type a web address into our browser a request is sent to the server for the files required to display the website. Whilst a developer builds your site they’ll create a local server on their own computer. This allows them to develop the site in a faster and more controlled environment, and MAMP Pro is an industry leading local sever application that does just that.

Advanced Custom Fields Pro
Advanced Custom Fields is a WordPress plugin that allows the creation of content fields within a WordPress theme. By default WordPress allows a default set of content fields – a title, some body text and a featured image. ACF allows a developer to extend these default content fields to suit the needs of the client’s website content. Every site I build is powered by this excellent plugin.