CSS / SASS

My key responsibility for this project was to write the CSS using SASS to style the front end using designs provided by the designer I worked with. These designs were provided as a mix of full page mockups and component styles, such as headings and buttons, allowing me to interpret the designs to style pages without the designer having to mock up every single template. This approach meant there was some room to interpret the designs and implement some of my own design decisions where specific decisions had not been made by the designer. This process would finish with a review and some feedback / alterations from the designer.

As this was quite a large site the architecture and naming styles of the CSS were an important feature and these are areas of CSS authoring that can often be neglected, despite their importance, as they can go unnoticed by stakeholders until it is too late. Making the website look like the designs was a goal that would please the client and on the face of it, go a long way to getting the site ready for launch. However I put in significant consideration in to the structure and class naming of the CSS so that future development was as painless as I could make it. This meant careful consideration of class names choosing abstract over specific where possible, separation of SASS files, allowing for reusable classes where appropriate, but being specific where such classes could actually cause issues, detailed commenting (see figure above) and use of SASS functions such as variables (which were carefully named), amongst other things.

PHP

The nature of this project, particularly the customisation to Woocommerce that was required, along with the heavy usage of Advanced Custom Fields for content management, meant that there was a lot of PHP functionality. I worked with a backend developer on this project and with that support I was able to assist with PHP tasks and in many cases complete them alone, allowing the backend developer to focus on the most complex backend challenges of the project.

The main area I worked on was the functionality of the templates. This meant writing the logic to output the correct markup based on things such as admin options/content and areas of the site, e.g. different markup for different taxonomies.

Along with backend tasks that blur in to the frontend, such as the templating tasks mentioned, I also worked on some functions which could be considered entirely backend. These functions ranged from things like looping through items and updating their data in a database to an image rewrite helper that fetched images from our test server when my local development URL was detected (so that I didn't need to copy over hundreds of images).

Javascript

Javascript was used throughout the site to add some basic functionality, most often to aid the user experience. I was responsible for the majority of this code and was allowed to dictate much of how the functionality and/or interactions were implemented. Some of this functionality was a case of initiating a plugin with the chosen settings for the scenario it was used for, though there was some small custom functions written such as for the navigation and for choosing product attributes.

Content management

A high level of content management was required for this project. The client required the ability to be able to edit large areas of the site. This meant they could do things such as choose which product categories to show on the homepage, which questions to show (if any), which product information tables to show, and to edit content on and arrange product information panels. This functionality was built with the help of Advanced Custom Fields.