DEV Community: Tom Walsh

My Web Development Journey

Tom Walsh — Thu, 27 Aug 2020 11:10:59 +0000

My web development journey actually started off as a graphic design journey - which I've come to realise is actually fairly common.

I studied graphic design at sixth-form at Rossall School in Fleetwood, UK. I enjoyed the freedom of graphic design, if you wanted to make a poster out of photographs of food; you could. If you wanted to write a message by scratching the burnt bits off of toast; you could. If you wanted to design a new crisp (potato chip) brand using house hold objects photoshopped to within an inch of their lives; you could (yes these are all projects that I did during my two year sixth form course). But even before joining Rossall school, I played nerdy online games that allowed users to personalise their profiles by using BB codes and very basic HTML. I was fascinated with the fact that simple, english readable code such as color=blue actually changed the colour of my text to blue - incredible. My fascination grew during school and I learnt basic HTML, CSS and jQuery which allowed me to build basic websites. I stripped apart free online templates and continued to teach myself throughout high school and sixth form.

I enjoyed graphic design so much, that I decided that I wanted to continue studying it, and ended up studying a Bachelor of Arts degree in Graphic Design at the University of Huddersfield, UK. I really enjoyed University. I played rugby for the majority of the time (just like in the first few seconds of this clip where I catch the ball from the first kick-off, and drop the ball in the first tackle - Welcome to rugby league). My graphic design course wasn't what I had expected. We focused more on the theory of graphic design, and didn't get our hands as dirty as I would have liked. I managed to steer all of my projects into directions that I enjoyed and felt passionate about however, so it all worked out in the end.

My favourite project while at university was my Final Major Project. I opted to brand a mobile coffee service (this was 2015 so they weren't so popular back then). I didn't stop at branding though; I travelled to Germany and bought a Piaggio Ape van, renovated it from absolute ruin to a modern looking, fully working, mobile coffee van! I even fitted an ex-Costa Coffee hipster barista style coffee machine which was in perfect working order. As you can see in the picture below. On the left is how the van was bought, and on the right is how it ended up!

Before I had even graduated from University, I saw a job ad for a junior graphic designer at a really cool tech startup in Manchester called Formisimo. The opportunity sounded amazing, so I applied, and to my surprise I got the job! I started pretty much straight away, and even had to book a day off to go to my University graduation! Which I thought was pretty cool; Here I am at my University graduation and I already have a job in the field that I studied.

Being the only designer (and a junior one at that), I hung around with the developers at Formisimo. We went for walks to clear our heads, daily trips to Booths to collect our free coffees, and generally enjoyed each others company, which was a huge relief to me at my first job. I started chatting to them about Dev, and the fact that I had a VERY basic understanding of what they were talking about. Before I knew it, I was building basic landing pages, email templates and wordpress templates. I learned so much in such a short space of time, because I was being thrown so far into the deep end, that I had to figure it out on my own. I even learnt the basics of SASS - all while being paid. The 2 hour round trip to Manchester at 6am eventually got the better of me though, and I decided that I wanted to move slightly closer to home (also form analytics isn't all that interesting and I wanted to move into something that I was more passionate about).

I applied for a few jobs as a junior developer, in Leeds, as that was the closest BIG city, and had the most to offer. I eventually got two interviews lined up for the same day! One was at Brass Agency (RIP), and the other was at Joe Browns. A few days later I got an offer from Joe Browns, and I was over the moon, but I was really holding out for an offer from Brass Agency. I saw more opportunity for growth in a digital agency like Brass. A few days later I received a phone call offering me the job at Brass and I was over the moon!

At Brass I worked on loads of different projects, but the majority were Wordpress builds, with a custom theme. I grew to love Wordpress, I knew it inside-out and ended up doing some fairly cool things. I also worked on Magento sites, Umbraco sites and Drupal sites, so I really was getting a good taste for web development, and learning new skills. I met some great people at Brass, some of which I'm still good friends with today.

18 months after starting at Brass was one of the single worst days in my career to date. I was called into a meeting by my production manager, who was also my line manager, and a creative director. Almost robot-like, my line manager read a sheet of A4 paper, which explained that I was being made redundant. The company had to save money somewhere, and this was where they thought they could save the most money, most efficiently. Tonnes of emotions ran through my head, but the most prominent one was anger. I felt personally attacked. I've come to realise that this is business, and decisions are usually made with the business in mind, sometimes at the detriment of the staff. Earlier this year (2020), Brass went into administration, and all of the 80+ staff lost their jobs on the spot, so I should consider myself lucky that they gave me a months pay after making me redundant.

Within two weeks of being made redundant at Brass, I had already had a few interviews, and had been offered a new job at a small SEO focused agency in the centre of Leeds! Blueclaw are a funny old agency. A lot of the clients and projects that I worked on were I-Gaming or Gambling related. The main purpose of the projects was to increase traffic and clicks through to client websites. The projects usually, consisted of quizzes, celebrity culture, and click-bait. One of the main benefits of working at Blueclaw was the freedom that we had over the development side of things. While there I was exposed to Vue.js and React.js which are javascript frameworks, which make it super easy to create single page applications, which are perfect for click-bait style content campaigns.

I was at Blueclaw for just over a year when I got what I thought was the offer of a lifetime! LEAD DEVELOPER the stars in my eyes were shining! The opportunity to lead a small team to greatness! Alas, it was too good to be true, and although I was leading the development team, thats because I was the only one in it. Thats not to say that I didn't enjoy my time at Digitronix, because I really did. The people were great, the projects were great, and the designers really tested my development capabilities and we produced some really interesting websites! https://www.h21.green/ and https://growmed.tech/ were two projects that I built that I'm particularly proud of. My only two disappointments about working at Digitronix were that in the 16 months that I was there, I didn't get the opportunity to manage anyone which was the reason I had joined, and that I wasn't able to progress my javascript knowledge because all of the sites that we built were Wordpress, and time restraints meant that I wasn't able to learn anything new to slip into a project. I decided that I needed to rejoin a team of developers with a focus on modern technologies, with React at the forefront of my mind. For the first time ever, I handed in my notice letter without securing another job, because I needed a kick up the backside to get my career development back on track.

A few interviews later, and I accepted a role at Home Agency as a Full Stack Javascript Developer. Since being at Home, I have learnt so much. I now consider myself a proficient javascript developer and I'm getting more and more comfortable with the fundamental concepts of react such as props and a state. The team here seem to be infinitely knowledgable, and if there is a subject that we're not quite sure about we have an abundance of learning material around us to learn from, we also have business Udemy accounts, which means that we can watch any course on the entire website for free.

My journey is nowhere near over. In fact, I'm basically just getting started, but I'm now at a place where I feel I can really spread my wings, and learn. I'm encouraged to question what we're doing. I'm encouraged to learn new technologies, processes and concepts. I'm rewarded for hard work, and when I'm struggling I'm offered the support I need to get me back on track.

So, from a self taught graphic designer turned web developer - you can be whatever you want to be. Just give it a go!

A quick intro to local state in react

Tom Walsh — Wed, 29 Jul 2020 17:49:05 +0000

Originall posted on TM––WLSH

State in react can be a fairly intimidating concept. Storing memory all around your application for different components to access seems scary - but when we talk about state, we are referring to one of two things; Global State and Local State.

Global state is the big scary application memory that all of your components can access. I'm only just getting my head around how to use that at the minute, and so far it doesn't seem too straight forward. If someone would like to provide a guest blog post on the basics of using global state, please get in touch at hello@tmwlsh.co.uk.

Local state however, is a very simple concept, that comes in handy in almost every component that I build! The best example in my opinion is a hamburger menu. When you break it down, a hamburger menu has two states; Open and Closed. Let's build a little component that allows us to demonstrate how to switch between the two. A working version can be found on the homepage to this very website!

// here we are importing react, but we are also importing
// the useState hook, that is used to control local state
import React, { useState } from 'react';

// here we are simply declaring our hamburger component
const Hamburger = () => {

  // by calling the useState hook here, we are declaring a
  // state variable. In this case, out state variable is called
  // hamburgerOpen. setHamburgerOpen is also declared, and this
  // is a function to change the state of hamburgerOpen. Lastly
  // we are setting the initial state of hamburgerOpen to false
  // because we want the hamburger menu to be closed.
  const [hamburgerOpen, setHamburgerOpen] = useState(false);

  // here we are creating a new function called toggleHamburger
  // that we will use to change the state of our hamburger menu.
  const toggleHamburger = () => {

    // here we are calling our setHamburgerOpen function so that
    // we can alter the state of the component. We are passing in
    // the current value of hamburgerOpen, but because we are prefixing
    // the value with an exclamation mark, that means the opposite.
    // So the below simply means set hamburgerOpen to the opposite of
    // it's current value. In our case, the current value is false,
    // so when this function runs, it will be set to true.
    setHamburgerOpen(!hamburgerOpen)
  };

  // here we are returning the html for our component.
  return (

    // react handles events slightly differently than regular html
    // but its fairly straight forward - you can see here that we have
    // an onClick event handler, which when performed, will invoke our
    // toggleHamburger function.
    <button onClick={toggleHamburger} className="hamburger">
      <span className="hamburger-line" />
      <span className="hamburger-line" />
      <span className="hamburger-line" />    
    </button>
  )
}

export default Hamburger;

It might seem slightly scary at first, but there are really only three steps to local state:

Setting the state variable.
Creating a function to alter the state variable.
Invoking your function.
Let's break it down in code snippets:

// here we are creating the state variable hamburgerOpen and
// setting it's value to false.
const [hamburgerOpen, setHamburgerOpen] = useState(false);

// here we are creating a function that will alter our state
// variable and change it to a value that we are passing in.
const toggleHamburger = () => {
  setHamburgerOpen(!hamburgerOpen)
};

// could also be written slightly more consicely like this:
// const toggleHamburger = () => setHamburgerOpen(!hamburgerOpen);

// and lastly we are invoking our function whenever anybody
// clicks on the hamburger button!
<div onClick={toggleHamburger} className="hamburger">

I hope that all made sense, but if you do have any questions, comments or criticisms, please do not hesitate to get in touch with me at hello@tmwlsh.co.uk and I'll be sure to take everything on board!

My three most used javascript array methods

Tom Walsh — Wed, 29 Jul 2020 17:45:39 +0000

Original post here: TM––WLSH

Methods in javascript are awesome - they are very powerful and allow you to do some pretty incredible things. Here is my list of my three most used javascript methods (not in order).

Map() Although I said these weren't in order, Map() is by far the javascript method that I use the most. Rather than copy and paste a definition from Mozilla, I'm going to try and define it myself, but the official explanation can he found here.

Map allows you to iterate over items within an array, and perform a function on each item. It then returns a new array, which includes the result of that function on each item.

Here is a small example:

// this is the original array
const array = [1, 2, 3, 4, 5];

// here we are adding 3 to each number in the array
const newArray = array.map(number => number + 3);

// this is us console logging the new array
console.log(newArray);

// the new array will be [4, 5, 6, 7, 8]
As you can see in the above, we iterate over each number in the array, perform the function (in this instance we add 3 to each number), and a new array is returned containing the new numbers.

Push() Push() is a simple method, but it's very useful, and comes in handy almost every day! The official definition of Push() can be found here, but I think I'll be able to explain it quite well.

Push() does two things; it adds zero or more items to the end of an array, and it also returns the length of the amended array.

For example:

// this is our original array
const shoppingList = ['Bread', 'Milk', 'Chocolate'];

// using the push method returns the length of the array
const newShoppingListLength = shoppingList.push('Crisps');

// this is us console logging the count of the amended array
console.log(newShoppingListLength);

// the above will log: 4

// this is us console logging the amended array
console.log(shoppingList);

// the above will log: ['Bread', 'Milk', 'Chocolate', 'Crisps];
This method comes in handy when counting up things, such as a shopping list, or users, or anything else that you might add to a list. It allows you to add an item to the end of the list, and also allows you to quickly find the length of that list.

Filter() Filter() is another really useful method. Filter() allows you to do a check on every item in an array, and then return a new array containing all of the items that passed that check.

For example:

// here is our original array
const colours = ['dark red', 'light blue', 'pink', 'light red', 'red', 'blue'];

// here we will filter the array based on colours that
// include the string 'red'
const redColours = colours.filter(colour => colour.includes('red'));

// this is us console logging the new colours array
console.log(redColours);

// the above will log: ['dark red', 'light red', 'red'];
This is a good method for filtering array items based on a string, a text length, or anything else. As you can see in this example, we have performed another method; the Includes() method, within the filter method.