The DesignLab Internship

Two months of work experience at The Design Lab.

Overview

evidence

Work Placement

During semester one I completed 2 months of work experience as a junior developer at The Designlab creative agency in Basingstoke.


Purpose of Placement

The purpose of my placement was to gain an understanding of how a small creative agency works and what it is like to work as a web developer within the industry.


Development


My Development Role

My main role at The Designlab was to work through maintenance and bug fix issues assigned to me through the freshdesk ticketing system. The ticketing system acted as a point of contact between the developers and clients. Bugs and and other tasks raised by the clients were added to the system in the form of a ticket. The ticket was then assigned to the most appropriate developer for that particular job.


Below I have detailed some of the stand out jobs completed during my time at The Design Lab I was unable to list them all as I was working there 4 half days a week and forgot a lot of the smaller jobs I worked on. Unfortunately I was kept quite busy during my time there and some code screen grabs and examples are not included as I didn’t have time to collect them while working (I also can’t get them at the time of writing this as they have revoked my access to the servers after finishing my work experience there) however I have done my best to describe how I worked through each job and provided links to demonstrate the final outcomes of each one.


Waterline Ships

evidence

Problem

One of the first bugs I worked on was for a website called waterline ships built with a very old php framework called zen cart. The owner of this site had been receiving spam accounts and contact form submissions and need some form of spam protection added to the site.


Lead Developer Renee had made use of Zen cart plugin that allowed you to implement googles captcha anti spam tool. However after being implemented it wasnt appearing on the sign up page but keep requesting that the box was checked before continuing. This was preventing new users from being able to sign up.


Fix

As quick fix to allow users to sign up and proceed with checkouts on orders I removed the line of php that called the captcha into the page, I did this so that the client would not miss out on any potential orders while I searched for the issue.


After some research I discovered that there were two different versions of the sign up form file being used on the site. One could be accessed through the register button while the other was accessed through the checkouting system. The reason for the two files was that the one that can be reached through the checkout system also included a login box for returning customers. When Renee had added the plugin initially he had missed this detail. To fix the issue I added the captcha box back to the signup form I had removed it from and also added to the form called during the checkout phase.


Knowledge Acquired

Working on this bug provided me with knowledge of how to use Google Captcha within a website, more specifically a zen cart website but I highly doubt I will be working on many other zen cart projects in the future.


Waterline Ships Website

Pace Centre

evidence

Task

Pace Centre is an organization/care centre for children with disabilities. Over the christmas period they were running a fundraising event to raise money for a minibus that would allow them to take the children on trips. They wanted a web page on their site that would go into more detail about the possibilities this minibus would provide the children.


The page was set up and designed by Jack Smith (Marketing Executive) using WP Bakery (previously named visual composer) however this plugin had a few limitations preventing Jack from making it look exactly like his designs.


For this reason they asked be to finish of some of the frontend the fixes I needed to implement included adding a new colour class to the style sheet so that it could be applied to one of the boxes on the page. A newly styled button for linking to the just giving donation page, add css flexbox to text and image containers in order for them to size relative to each other and add hand prints to background.


Development

To begin I started with the simplest tasks adding the colour class and styling the donate button. To add the colour class I create a new css class called grey and added the provided HEX code to the background colour property. To style the button I gave it a class name prefixed with ‘hh’ I used this to identify my additional styling for the helping hand page, this also prevented me from manipulating style on other areas of the site by accident.

evidence evidence

To make the content boxes the same size as the images I added a series of flexbox properties to the overall container of the image and text box along with the items inside. I also changed the images so that they were set as the background of their container rather than within the container. This allowed for the content box to scale with the image on different size screens.

evidence

To add the handprints I needed to find an obscure way of pushing the behind the content as WPBakery made this difficult to do. Renee suggested looking into the CSS before and after selectors. These allow you to insert something before the actual content of the selected tag. As I needed to add four hand prints to the page a used before container, before body, after container and after body. Once these were in place I used the transform and left, right, top, bottom properties to position and rotate the hands.

evidence

Knowledge Acquired

During this task I was able to learn a few new CSS tricks such as the use of the before and after selectors and flexbox. I also gained experience in working with Wordpress and the WPBakery plugin. The final outcome for this page can be view with the link below.


Pace Center Helping Hand Page

Genesis MA

evidence

Task

Genesis MA is another wordpress site I worked on however this task was more testing focussed than bug fixing. Recently a new version of wordpress had been released which meant the site along with some of its plugins needed updating and testing.


Development

The first thing I had to do was create a duplicate of the site that could be uploaded to a testing subdomain. By doing this I was creating a safe testing environment encase of any bugs that arose during testing. To make a copy of the site I used a plugin called duplicator. The duplicator plugin packs a copy of the site into a zip file and generates php index file.


I then uploaded the zip file to the testing server and navigated to the index.php file provided by the duplicator plugin. The index file acted as a wordpress set up page and unpacked the website ready for the the updates to be installed.


Finally after installing the updates I worked my way through each of the pages testing functionality. In this case none of the updates caused any issues with the site.


Knowledge Acquired

This job provided me with the knowledge needed for updating and testing wordpress sites without risking down time on the actual live site. This knowledge will likely be extremely useful in my career as a web developer in the future.


Genesis MA Website

4 Aces

evidence

Task

This job was one of my favourites as it involved creating a series of slide out menus using javascript which for some reason I find really fun. It was also a new experience as I had never written a slide out function for code html markup that wasn’t written by me.


4 Aces is an ecommerce site that sells wholesale paper cups to small cafes across the UK. Within there site they have a featured products page that displays large images displaying some of their special cups. Originally this page had slide out menus that provide more information about the cups however it had stopped working after what I believe was the site changing servers.


Development

The first thing I did when fixing this bug was search through the file to find the different parts required within the function making a note of their IDs and Class names. I then made use of jquery to write a new function that would hide and show the menus, having done this for hamburger menus on many of my previous sites I was able to this really quickly. It was only after implementing the function that I started to notice a few issues.


One of the first and more simple problems was that the contact button was missing, this was simple enough to add I basically duplicated the pdf button code and swapped out the link for a link to the contact us page. I then added some css styling to reduce the width of the buttons and make them display side by side.

evidence

The more complex issue was making the menus slide out from the left and then right side of the page as all this code was contained within a foreach loop. Renee told me to look into the css odd and even child selectors. These selectors allowed me to add different stylings based on whether the child element was odd or even. The odd and even selectors were also used in jquery function to ensure that when a specific button is clicked it would only open the corresponding side menu. I raised a question to Renee about the odd and even function triggering additional menus unintentionally if the client added another featured product however said to leave it for now (as there were other bugs that need fixing) and it could be changed if the client ever noticed the issue.

evidence

Knowledge Acquired

During this task I gained knowledge of how to manipulate and assign different style characteristics to looped through pieces of html. This knowledged proved useful later in the semester when working on my Project Box website and styling the post loops on that website.


4Aces Featured Project Page

Conclusion

Overall I had a good experience during my time at The Designlab. I was able to achieve my goals of learning about the day to day life as web developer and experiencing how a creative agency works.


I was also provided with new challenges such as figuring out and making changes to other people's code, something I had never thought about at university having only built projects from the ground up. This proved challenging at first but as I worked through more and more bugs I became familiar with the file structures of websites built with CMS systems like WordPress and Magento. Once I had acquired this knowledge it made debugging and fixing much easier.


If I could have gained anything else out my experience it would have been working on a new project to see how the way creative agencies develop websites from the ground up compares to the methods I use on personal projects.


Additional Text


Special Thanks

Kevin and The Designlab team for having me on board.


Note for Assessors

I would like to apologies for the lack of code snippets and evidence provided within this write up as stated previously I was kept extremely busy during my time at The Designlab as this was a busy period for them. In hindsight I should have made time to create a collection of screenshots from each project while working on them. If you would like to confirm my contribution to the projects detailed in this write up please contact The Designlab.


The DesignLab