DEV Community: yusufcodes

Reflection: My First 3 Months at Moonpig as a Software Developer

yusufcodes — Tue, 22 Mar 2022 14:35:36 +0000

Introduction 👋🏽

So, I’ve hit three months as an Associate Software Engineer at Moonpig, and I thought it would be good to reflect on my time so far. Time flies, and I often forget what I’ve worked on, so I hope this blog post helps me remember what my initial three months were like 😅, and I hope this gives anyone reading the perspective of a new engineer joining the company.

Understanding How Moonpig Operate 🌝🐽

Moonpig are a large organisation, with a few different teams, each looking after a different area of the customer experience. This ranges from the user’s initial interaction to select a category for a card they are purchasing, to being able to attach gifts to their purchase, all the way up to fulfilling the order once a user has paid.

A big part of my first three months was getting to grips with all the different areas (this is a work in progress!), but I’ve definitely got a better understanding with how all of this works from a technical point of view.

Learning New Technologies 🛠️

Backend and Serverless

Coming from a front-end role, there was a lot for me to learn in terms of back-end. For example, the company use AWS infrastructure and Serverless which I had never worked with before. I started by understanding what Terraform is (Infrastructure as Code to deploy resources into AWS), followed by the different resources you can use in AWS.

One area of Serverless which Moonpig heavily invest in is Lambda - these are small, single purpose functions which are deployed into AWS which performs some operation and returns. The function is called when it needs to be executed, meaning you only pay for the time your functions execute - much cheaper than keeping a server running 24/7, which most of the time will be idly waiting for requests! I was really surprised by the power of Lambda, and just how much of the company’s backend operations rely on it.

Architecture diagram showing how different AWS services interact with one another

Testing 🧪

I’ve also been getting used to Test-Driven Development, where tests are written for any backend / frontend work we do. This often involves writing a test for the functionality you want to add first, which requires a different way of thinking, as opposed to just writing the feature without tests.

Different Working Environment 🌱

Moving from an Agency to a Product Company 🏢

My first role in the industry was at an agency, building apps in React Native. We had a variety of clients, and depending on the workload, I could find myself working on multiple projects at once. New features and designs would come from our end client, and we’d log time worked on tickets to ensure we correctly bill the client.

Things are a little different in a product company. Everyone is working towards one product instead, which I’ve enjoyed. It’s allowed for me to slow down and focus a little more. Each team at Moonpig has a Product Manager and Designer, who are the main points of contacts for new features, upgrades / enhancements and new designs. Also, there’s no time tracking in product companies (well, at Moonpig at least), which certainly took the pressure off of me a little bit!

Pair Programming 🍐

In my previous role, I would work independently most of the time. The concept of pairing was totally new to me coming into Moonpig (working alongside another engineer on a single ticket). A huge benefit I’ve found with pairing is the amount that I am able to learn in a short space of time - I’ve learned a lot about not only the technical domain of the team I’m in, but also using my tools more efficiently (for example, discovering that rebasing in Git was a thing 👀). It’s also super easy to fire questions to the other person if you’re unsure - when working independently, it isn’t as easy to get help so quickly.

Hybrid Working & Networking 👥

As Moonpig have an office in Manchester, it’s been really nice going in once or twice a week to change my working environment up. This has also meant that I’ve been able to meet fellow Moonpig colleagues face to face, learning more about who they are and what sort of work they do. My previous role was fully remote, meaning all my interactions with colleagues were over the internet. It’s been nice to have an office space to go into since working at Moonpig.

Working with Agile & Scrum 📝

There are various processes in place to help keep the team working together efficiently, which come from Agile and Scrum. A couple of examples I was new to at Moonpig were the following sessions: refinement and retrospectives.

Refinement is time for the team to go through upcoming work (tickets in the backlog) and ensure there is enough information to attempt the work, ahead of pulling the ticket into “to do”. This is a good time to identify any blockers and dependencies on a task ahead of time.

Retrospectives are reflective sessions where the team are able to openly discuss how things have gone over a timeframe (e.g. every two weeks), and identify areas to improve on. It’s also a nice time to celebrate any wins that the team have had, keeping the team morale high.

Getting Involved with Working Groups 🙋🏽‍♂️

Moonpig have a concept called a “working group”, each having their own focus to improve a particular area of the business. One that caught my eye from day one was the Associate Working Group, whose aim is to improve the Associate Engineer in the company. Given that I was a brand new associate, I thought it would make sense to try and get involved however I could.

I started by sharing learning resources that I found helpful for different technologies I was currently learning, followed by attending collaborative meetings which gave me a chance to voice my thoughts and opinions to others in the group.

When you join a new company, it can sometimes feel like you aren’t providing tons of value, but fortunately this working group gave me an instant feeling of satisfaction as I contributed to the different activities going on in the group

Dealing with Anxiety and Impostor Syndrome 🧠

Joining a new company, whilst still fairly early on in my career, certainly hasn’t been easy. I’d constantly be questioning whether I deserved to be in my new role, and seeing how much there was to learn at the beginning made me feel like I wasn’t good enough to learn it all. I’d tell myself that I somehow fluked my way through the interviews, somehow pulling a wool over my interviewer’s eyes.

As outlined in this post, there was a lot for me to get to grips with, which triggered the anxiety a little as well. There were many unknowns, and I often felt like I had no control over all of the things I needed to learn. I wasn’t sure if I’d “do well” as a result, contributing to the feelings of anxiety.

Despite all of my worries and doubts, I was really happy to receive some positive feedback from my manager and those who I had worked with so far, as I came to the end of my three month probation. I definitely feel more settled and acquainted with the new tech I’ve been learning, and the new ways of working.

What’s Next? 👀

For the remainder of the year, I’ll be rotating across different teams, which will give me a flavour of what different teams do in the business, and also help me find which side of the tech stack I’m truly passionate about (I love both front and back-end at the moment!). I started on the Loyalty team, and have recently rotated onto the Attach team. I’ll be on the Attach team for three months, after which I hope to write up another blog post on what my experience has been like.

I hope this post was interesting and gave you an insight into what it is like to join Moonpig as a new engineer!

Avoid These Mistakes as a Junior Developer

yusufcodes — Fri, 04 Jun 2021 11:53:22 +0000

Introduction 👋🏽

Last year, I took my first steps into the industry as a part-time Junior Developer whilst completing my Computer Science degree. In this post, I want to reflect on some mistakes I’ve made, hoping to help other developers who are early into their careers.

Not asking for help 😨

As an early-career developer, it is so easy to feel like you need to know everything. You feel like you need to prove yourself to your team, and prove that you belong in the role you've landed, so you want to take everything on without asking for help. However, the honest truth is everyone needs a helping hand at some point, no matter what seniority level they're at.

As a junior, your colleagues will not expect you to know how to do everything. They are there to help you, and have probably faced the issues you are facing before, so you will save a lot of time by reaching out for help! Asking for help is not a reflection of your ability to do your job. So, when you find yourself struggling, make sure to reach out to someone for help!

Asking for help in the wrong way 🤔

The time of your colleagues is precious, so you want to make sure you've tried everything you can with your skills and knowledge with any problems you face. An example of this is searching online for solutions, or consulting the documentation for the technologies you are working with. After doing some research, you are in a better position to ask for help. See the following example of asking for help:

OK Approach: "Hi, I am struggling with Problem X. Any ideas what to do?"

Better Approach: "Hi, I am struggling with Problem X. I have read this article (link), and had a look at this tutorial (link), and tried applying these, but I am still having problems. Can anyone guide me further?"

Explaining what you have already tried can save time for your colleagues, and can help them identify whether your approaches were correct in the first place. Take the time to look into your problems a little further, and you may be able to fix things yourself! (And, if not, you will have a much better way of approaching your colleagues).

Avoiding tasks outside of your comfort zone 🙅🏽‍♂️

Alright, hear me out with this one. I'm not saying you must take on the most difficult ticket on day one. However, as you build up in knowledge and confidence, you will be in a better position to attempt harder tasks. You can use guidance from your management to help you move onto harder tasks. If you stick with the same tasks you always do, without trying to move up in complexity, it will take longer to advance as a developer. Your employer will favour your willingness to try harder things, and in the end it will only help you grow as a developer - so keep pushing yourself! (But not too hard, burnout is real 😅).

Not breaking down big tasks ✍🏽

When you first get started as a dev, it can be easy to just follow a single ticket through without thinking about the magnitude of the task. However, if you try and think about the individual blocks of tasks you need to carry out, you could break down a larger task into smaller ones.

The benefit of this is it will help you work in a more Agile way, allowing you to deliver smaller chunks of work in a quicker timeframe. This can help you receive feedback from your colleagues much sooner, helping you deliver the best piece of software in a better timeframe.

Putting yourself down 😔

If there is anything I excel at, it is putting myself down. When I make progress with a task, I will dismiss it two seconds later and identify what I must do next. This is not a great way to work, because you will never feel satisfied with the progress you're making at such an early stage of your career. It may seem small in the moment, but these little wins will contribute to larger successes as you work on more tasks.

Conclusion ✅

These were just a few little mistakes I've identified in myself as an early-career developer. I hope I can continue identifying and learning from my mistakes, and that these are useful for any other early-career developers out there!

Can you think of any other mistakes to avoid? Let's generate a discussion in the comments below 🤔!

Why I Left My Developer Internship After Two Months

yusufcodes — Thu, 16 Jul 2020 21:07:33 +0000

Introduction 👋🏼

In Summer 2019, I started an Industrial Placement, due to last 12 months, as part of my BSc Computer Science degree. It was my first ever experience as a Software Developer. Unfortunately, I decided to leave the position after two months, taking the rest of the academic year (2019-20) as a gap year. In this article, I want to talk about the things which led me to leave so early on.
Disclaimer: This is not a post where I bash my previous employer, but rather, the things which I experienced which were too much for me, a newbie to the industry who suffers from anxiety. The purpose of this article is to help anybody out there in a similar position to me.

So, what happened?

Burning Out

After two months, I believe I reached a point of burnout. If you haven't heard of this before, I've included a definition below:

Burnout is a state of emotional, physical, and mental exhaustion caused by excessive and prolonged stress. It occurs when you feel overwhelmed, emotionally drained, and unable to meet constant demands - HelpGuide

A lot of people may reach this point because they have too much to do. In my case, I felt I had too much to get to grips with in a short space of time, rather than an excessive workload, and for this reason I believe I burned out.

Dealing with Imposter Syndrome

Due to the working environment I was in, it was fast paced from day one. I had a lot of knowledge and working practices to get to grips with, and believe me when I say, I was giving it my all every single day. I can remember getting up each morning and putting on a positive, brave face to try and make progress with my day. However my anxiety would, more often than not, catch up to me. I'd often wake up to a new day thinking: "I can't do this". Did this stop me from going in to work? It actually did on two days where I called in sick. I've worked before this job and never felt like taking a day off like this, so I knew this wasn't a good sign for me. (Note: nothing wrong with taking days off when you don't feel like your best self, it just wasn't ever a thing I had to do before!)

Back to the point I'm trying to make here, I just didn't feel good enough. The work environment I was in meant I needed to be more bold and confident in my work, and I wasn't quite there yet as a new developer.

Needing More Support

Due to how new I am to the development world, the work environment I was in wasn't supportive enough for me. There was often tons of things going on, meaning I had to grapple with everything that came my way, with little breathing room. This just added on to my anxiety as I felt I was holding back my employers in the work that they were trying to achieve.

Personal Expectations

I wanted to be perfect from day one. Read that again. I wanted to be perfect from day one. Is this even possible for a brand new developer? In most cases, no (unless you're that super genius kid we all want to be). Was I going in with this expectation of myself each day? Yes. I wasn't comfortable with making mistakes and being vulnerable, and that hindered me a lot. I was giving myself undue stress which wasn't necessary - this itself will have impacted my performance and ability to do my role.

What Have I Learned From the Experience?

Leaving the placement so early on made me feel like a complete failure, and sometimes still does. However if anything, that was the best decision I could've made for my own mental sanity. If I didn't think of my mental health first, who knows how I would've ended up a few more months down the line. Leaving something for the sake of looking after yourself doesn't equate to failure - we just like to make ourselves feel like we've failed because...we're human.

Below are some points regarding what I learned from my experience:

Put your mental health first before anything, and talk to someone about what you're going through;
Don't aim to be perfect in a new role, but be open to failing and learning from said failure, working to ensure it doesn't happen again;
Talk to your management team sooner rather than later, your workplace may be more accommodating than you think!
When job searching, try and imagine if the environment you're looking into is the best fit for you. You could spot a bad environment for you before you accept any prospective offer.

Summary

This was a quick overview of my first developer experience as a student, purposefully kept quite brief. It has taken me a while to pluck up the courage to sit and write about my first ever developer experience, being that of one that wasn't quite as planned. However, I've learned and grown from the experience, and actually picked up some team leading skills this year (on my gap year) as I was a Team Leader at M&S Foodhall - during a global pandemic! The soft skills gained this year are invaluable and I look forward to applying them to my next future developer role, which I hope to find for 2021 (hope to finish my Computer Science degree by then!)

I hope you find this article useful, and if you're interested in following my student and developer journey, just tap on the links below:
▶️ Instagram - yusufcodes
▶️ Twitter - yusufcodes
▶️ LinkedIn

A Quick Introduction to CSS Grid

yusufcodes — Mon, 20 Jan 2020 17:45:45 +0000

Introduction

In this article, I will be covering the basics of CSS Grid, defining what it is and how to get started with it. This is to aid my own learning and hopefully give something quick and useful back to the community.
Follow along as I break down this awesome bit of technology! 😄

What is CSS Grid?

CSS Grid gives you the ability to divide a given section into a bunch of rows and columns, hence the name CSS Grid. This is useful when building layouts, because you can position elements in any area of the grid, by specifying where you want the item to go in your CSS.

Getting Started with CSS Grid

To get started, you need a parent container which you'd apply a special property to, to activate the Grid. Any items that you want to be a part of this Grid are then placed within this parent container.

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

.container {
  display: grid;
 }

To activate the Grid, we apply the display property with the grid value. This tells the browser that we want the specified container to be a Grid, that's it.
This then allows us to use a bunch of different properties associated to CSS Grid to start building our layout.

CSS Grid Properties

grid-template-columns: Specify the size and number of columns
grid-template-rows: Specify the size and number of rows

Example Usage

.container {
    ...
    /* Defining two columns with the size of 60px */
    grid-template-columns: 60px 60px;
}

When using these properties, you are explicitly defining the Grid, meaning that you are defining exactly how the Grid should behave.

If we defined our columns without specifying any rules for the rows, CSS will implicitly create the rows for us, depending on the size of the elements.

grid-gap: Create some space between the different rows and columns of the Grid

Example Usage

.container {
    ...
    /* Create 10 pixels of space on the top and bottom of each Grid element,
    and 20 pixels of space on the left and right sides. */
    grid-gap: 10px 20px;
}

grid-auto-rows: Defines the size of implicitly created rows
grid-auto-columns: Defines the size of implicitly created columns

Example Usage

.container {
    ...
    grid-auto-columns: 1fr;
}

Using the example above, what happens when we define this property is that any other columns that are added to the Grid, implicitly, will use up 'one free space' available on the page automatically. Note: fr does not stand for free space, but it's a neat way to think of how this unit works.

grid-column (shorthand)
grid-row (shorthand)

grid-column is shorthand for the following properties:

grid-column-start
grid-column-end

grid-row is shorthand for the following properties:

grid-row-start
grid-row-end

The -start properties tells the Grid where to initially place an item, and the -end properties tells the Grid at which point the element to be placed should stop at.

The value you specify refers to the Grid Line. Thinking of a square box, the line on the left would be Line 1, and the line on the right would be Line 2.

Example Usage

.container {
    ...
    /* Start at column line 2, end at column line 4*/
    grid-column-start: 2;
    grid-column-end: 4;

    /* Shorthand */
    grid-column: 2 / 4;
}

Grid Template Areas

Grid Template Areas are a way to name the different sections of the Grid. The property used is called grid-template-areas. Below is the basic syntax for its usage:

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
}

The syntax roughly follows the structure of the actual Grid. So, the first three columns that are present will be called sidebar-1, content, and sidebar-2 respectively.

To continue defining the other areas of the Grid, such as rows below it, you continue on a new line with either the same name to define a whole area, or a new name to identify a new section of the grid.

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
      "sidebar-1 content sidebar-2"
      "footer footer footer";
}

Using your pre-defined class names for each of the elements on the page, you can use the Grid Template Area names to define where to place such elements. An example is shown below:

.footer
{
    grid-area: footer;
}

.item1
{
    grid-area: sidebar-1;
}

.item2
{
    grid-area: content;
}

.item3
{
    grid-area: sidebar-2;
}

This is saying that, for each item selected, place it in the defined area of the grid that we have specified. The element being placed will naturally position itself into the named section of the grid, using grid-area.

Conclusion

This was a very quick introduction to CSS Grid, as I wanted to summarise the basic concepts I learned through the following resources:
Wes Bos: CSS Grid Course
Mozilla Developer Network: CSS Grid Layout

Thank you for reading 👋! If you're interested in following me on my Web Development journey, follow me on Instagram and Twitter 😄

✏️ Learn ES6 With Me: Part Two

yusufcodes — Sat, 16 Nov 2019 17:28:47 +0000

Introduction 👋🏼

Welcome to part two of this four-part series, where I'll be documenting the concepts I am currently learning as part of my journey to better understand the JavaScript Language.

In this part, I will be covering the following topics:

Arrow Functions: Basics
Arrow Functions: Lexical ‘This’ Keyword
Destructuring

If you want to start from the beginning of the series, below is a link to Learn ES6 With Me: Part One ⬇️

✏️ Learn ES6 With Me: Part One

yusufcodes ・ Nov 9 '19 ・ 7 min read

#javascript #beginners #tutorial #webdev

Arrow Functions: Basics ➡️

Arrow functions are a new way to write out functions in ES6. The syntax is simpler and allows for a much more cleaner look to your code.

For your reference, below is the basic syntax in a generic format, which I've taken directly from Mozilla Developer Network as it's nice and clear:

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

Now, onto a basic example. Let's start off with a regular function that we'd write in ES5. Here, I write a function declaration with the name ES5Func, passing in a parameter called name. This is then output to the console in a simple statement:

function ES5Func(name) 
{
    console.log(`Hey ${name}!`);
}

ES5Func('Yusuf'); // Output: Hey Yusuf!

Now, I've written the same code as above but using the ES6 Arrow Function syntax. I'll break it down below:

const ES6Func = (name) => console.log(`Hey ${name}!`);
ES6Func('Yusuf');  // Output: Hey Yusuf! (same as above)

We declare a const value called ES6Func - this is the name of our new function
We then supply any arguments to the function, in this case, we have name
- Note: When you only have one argument, you can omit the parentheses if you want
We then introduce the use of an arrow => - this is identifying the beginning of our function.
- Notice how, in this example, we have no curly braces like we usually do in ES5. This is because we're only writing a single line of code, and for simplicity, you don't need to use curly braces when there's only one line of code to execute.

Let's explore another example that has a bit more going on within it:

// Method to square the number entered by the user and return the value
const squareValue = (numToSquare) => {
    console.log(`The number that is going to be squared is: ${numToSquare}`);
    return numToSquare * numToSquare;
};

let valueSquared = squareValue(5);
console.log(valueSquared); // Output: 25 (5 x 5 = 25)

Notice how in this second example, we do have curly braces as we're writing multiple lines of code.

Now, although our functions can be written using ES6 Arrow Function syntax, one thing we need to consider is that the behaviour of the 'this' value is different when we use this syntax. In the next section, I've tried to briefly describe this, although I know that it could be explored in more depth.

Arrow Functions: Lexical 'This' Keyword

With a regular ES5 function, each new function would define it's own this value which was determined by how the function was called - this is not the case with Arrow Functions!

Arrow Functions use the this value of it's surrounding environment, and because the value of this is affected by the location of the function, it is described as being lexical.

Below is an example of us writing an Arrow Function, simply displaying the this property in the console:

let exploreThisKeyword = () => console.log(this);
exploreThisKeyword();

When running this function, the output resolves to the Window object. This is because the current parent scope is Window, the global scope of the browser.

More could be said with the explanation of exactly why this is happening, but I don't want this article to become too long! If you're interested in this topic of JavaScript, I recommend You Don't Know JS Yet: Scope & Closures.

The takeaway point of this section is that Arrow Functions do not create their own value for the 'this' keyword but rather, inherit the value assigned from their surrounding scope. So, keep this in mind as you start to use Arrow Functions.

Destructuring ⛏️

Destructuring is the process of breaking down a data structure into constituent variables. This allows for multiple variables to be quickly defined, without having to individually extract each value you want.

Let's say you have some array, foo, and you want to store the values of this array in some variables. Below is an example of how you would traditionally do this:

// ES5 - storing values from an array into variables
let foo = ['one', 'two', 'three'];

let red = foo[0];
let yellow = foo[1];
let green = foo[2];

Although it works just fine, it's pretty long for what we're trying to achieve. Luckily we have destructuring!

Examples below show how destructuring is possible for Arrays and also Objects.

Arrays

// ES6 - storing values from an array into variables
let foo = ['one', 'two', 'three'];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

Objects

// ES6 - storing the value of some properties of an object into variables
let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

Hopefully you can see how easy it is to extract data using this new feature of ES6.

Conclusion

In part two of this four-part series, I've covered the following ES6 JavaScript concepts:

ES6 Arrow Functions: the basic syntax and the behaviour of the 'this' keyword
Destructuring

Stay tuned for the next two parts of this series, which I'll post links to below once they've been released.

Some space for the next unreleased two parts of this series!

Want to read part one of this series? Click below

✏️ Learn ES6 With Me: Part One

yusufcodes ・ Nov 9 '19 ・ 7 min read

#javascript #beginners #tutorial #webdev

Note: I am in no way, shape or form, an expert when it comes to JavaScript. My idea and motive behind these posts are to help myself better understand these concepts as I learn them, whilst trying to give something back to the DEV community.
If there is anything fundamentally wrong with the information I've shared, please let me know. We're all still learning, and we can certainly do that together! 😊

Find me on Instagram and Twitter, where I post about the tech that I'm currently working with, and document my journey as a Computer Science student🙂.

✏️ Learn ES6 With Me: Part One

yusufcodes — Sat, 09 Nov 2019 18:00:21 +0000

Introduction 👋🏼

Welcome to part one of this four-part series, where I'll be documenting the concepts I am currently learning as part of my journey to better understand the JavaScript Language.

In this part, I will be covering the following topics:

Variable Declarations with Let and Const
Blocks and Immediately Invoked Function Expressions
Strings in ES6

Once I write and release the next parts, I will link them right below this line!
[empty space of nothing until I write and release the next parts]

Variable Declarations with Let and Const 📦

In ES6, there are two new ways of declaring variables using the following keywords: 'let' and 'const'.

Defining variables in ES6

// Two methods of declaring variables
let counter = 0;
const name = 'Yusuf';

console.log(counter); // Output: 0
console.log(name); // Output: Yusuf

Effectively, the two statements above will do the same thing, such that two new variables, counter and name, are defined and set to some value.

What's the difference between 'let' and 'const' then?

The major difference between 'let' and 'const' is:

'let': used for values which may change throughout the lifecycle of your JavaScript application.
'const': used for values which cannot, and should not, change at any point in your application. These can be thought of as 'constant' values. **

** Thank you David for raising an excellent point in the comments - you can change values contained within a const structure itself (such as array elements) but not the entire variable itself (such as replacing the whole array contents). His input is below:

Comment Not Found

Another really good bit of explanation of const below:

Comment Not Found

Thinking back to the example of the counter and name variables we defined above, we used let for the counter and const for the name. This makes sense, right?

counter: this could be incremented or decremented in our program (changed), so it is appropriate to use let for this variable.
name: in most cases, a person cannot change their name, so we would want this to be defined using const, so it cannot be changed.

In fact, if we attempted to change the value of a variable defined using const, we will be greeted with a lovely error:

const name = 'Yusuf';
// Attempting to re-assign the value of name throws an error
name = 'new name!';
console.log(name);

This feature enables developers to define and save variables with one value, knowing that they won't be able to change it, intentionally or unintentionally, without JavaScript kicking up a fuss about it. Neat stuff I think.

Variable Declarations: Function Scoped vs. Block Scoped 🔍

With the introduction of let and const, the way that the JavaScript Engine accesses these variables is different to how it is normally done when declaring variables with the var keyword in ES5.

We can describe let and const variables to be block scoped, and variables defined using var as function scoped. A scope can be thought of as the 'space' in which a particular value is accessible.

Block Scope: Variables defined in this scope are only available within the block that it is defined in
Function Scope: Variables defined in this scope are available throughout the function which it is defined in, even within other inner scopes

Below is a simple example of these two types of scopes, with an explanation afterwards:

// ES5: 'var'
function testingScopesOne()
{
    var num =  1;

    // Creating a new Block Scope
    {
        var num =  2;

        // Output: 2
        console.log(num);
    }

// Output: 2
console.log(num);
}

// ES6: 'let'
function testingScopesTwo()
{
    let num =  1;
    // Creating a new Block Scope

    {
        let num =  2;

        // Output: 2
        console.log(num);
    }

    // Output: 1
    console.log(num);
}

testingScopesOne();
testingScopesTwo();

Code Explanation 👀

Above I have defined and executed two functions, testingScopesOne and testingScopesTwo.
I'll try to break down what I did in each function, the outcome, and how this links to the concepts of Function Scope and Block Scope:

In each function, I defined a variable called num, assigning it the value 1. The difference between them is that I use var in testingScopesOne and let in testingScopesTwo
After the variable definition and assignment, I create a new block using curly braces { ... }
Within the newly created block scope, I create a variable with the same name, num, and assign a new value of 2:
- testingScopesOne: I used var and output the value within the current block scope.
- testingScopesTwo: I used let and also output the value here.

Both output a value of 2, which is expected. Once we escape this block scope, however, we get a different outcome in the output statements:

Upon leaving the block scope, I once again output the value of 'num' in testingScopesOne and testingScopesTwo.
testingScopesOne output is 2, whereas testingScopesTwo outcome is still 1, which is the initial value we assigned to it in the beginning.

Why is this happening? 😮

The testingScopesOne function is demonstrating the concept of Function Scoping.

Explanation: We defined a variable num using var, assigned it one value, then reassigned it another value within another scope of the function. This newly assigned value, 2, overrode the initial value of 1, showing that the scope of variables defined using var are Function Scoped.

The testingScopesTwo function, on the other hand, is demonstrating the concept of Block Scoping.

Explanation: We defined the variable num using let, and then within another scope of the function, we assigned a different value (2) to num. Instead, what happened here is, this new value did not save as it did in testingScopesOne, so when we output the value at the end of the function outside of this scope, the value remained at 1.

This is because, when we declared the variable num again within the block scope, it created a completely new variable, even though the name matched the initial variable we declared (num). This therefore demonstrates the concept of Block Scoping, where any variable defintion using let is only bound to the current block scope it is defined in.

Blocks and Immediately Invoked Function Expressions 🏃🏽

A block is any code which is encased within a set of curly braces:

{
    // Some code
}

Blocks are commonly used in control structures such as if, for, else, etc. but is not limited to be used in these.

In ES6, we can use the concept of blocks to simplify the way we write Immediately Invoked Function Expressions (IIFEs).

Recap: What is an IIFE?

An IIFE is a function which is executed straight away (🏃🏽) upon definition - the JavaScript Engine recognises this as a function which needs to be executed right away.

The important thing about an IIFE is the ability to encapsulate all of the data that is used and defined within it. This means that access to anything from inside of an IIFE is not possible, unless such data is publicly defined. The reason for this is because, upon execution of an IIFE, a new scope is created, which is separate to the main parent scope.

IIFEs: ES5 vs. ES6

In ES5, we had to do the following to create an IIFE:

Declare an anonymous function
Wrap this function within parentheses
Add a pair of parentheses outside thse parentheses

A lot of work, right? Not to mention how messy the structure ends up looking.
Luckily, all we need to do in ES6 is write our code within a lone pair of parentheses...and that's it.

// ES5 IIFE
(function() {
    // Code
})();

// ES6 IIFE
{ 
    // Code
}

ES6 IIFE: Example

Below is a simple example where we define an IIFE and declare a variable, myName, within it.
Accessing this variable within the IIFE works fine, whilst trying to access it from outside of the IIFE causes an error.

{
    const myName = 'Yusuf';
    console.log(myName); // Output: Yusuf
}
console.log(myName); // Error: myName is not defined

Strings in ES6 🧵

The way we manipulate and interact with strings is considerably better in ES6.
There is one feature in particular, which is probably one of my most favourite things about ES6. And that is...string literals.

String Literals

Remember when you'd want to print out a string with some variables, such as a person's name? You would've had to do the following to achieve this:

// ES5 Strings
console.log('Hello' + name + ', welcome to this application!');

With string literals, the awkwardness of adding the + operator between variables and starting / ending the string between each variable is now gone🥳! The above console log can be achieved by doing the following:

// ES6 String Literals
console.log(`Hello ${name}, welcome to this application!`);

Notable differences:

Use backticks instead of normal quotes
Enter any variables using the following syntax: ${ ... }, where ... represents the variable you want to display

You can also enter other simple snippets of JavaScript code within the ${ ... } structure, such as a call to a function. This function may return some value that you want to be displayed, in which case, you can just enter it directly into the string.

function returnName()
{
    return 'Yusuf';
}

console.log(`Hello ${returnName()}, welcome to this application!`);
// Output: Hello Yusuf, welcome to this application!

ES6 String Methods

Aside from string literals, ES6 also comes with a few new functions that can be used on strings. Below is a simple demonstration of each:

// Method Name: startsWith
console.log('coffee'.startsWith('cof'));
// Output: true

// Method Name: endsWith
console.log('coffee'.endsWith('ee'));
// Output: true

// Method Name: includes
console.log('coffee'.includes('offe'));
// Output: true

// Method Name: repeat
console.log('hey '.repeat(4));
// Output: hey hey hey hey

Conclusion

In part one of this four-part series, I've covered the following ES6 JavaScript concepts:

Using let and const to define variables, and comparing this to using var
Briefly touched on scopes, although more could be said on this as an entire article!
Covered Immediately Invoked Function Expressions and how we can achieve this using blocks
ES6 String manipulation and some new methods associated with them

Stay tuned for the next three parts of this series, which I'll post links to below once they've been released.

Some space for the next unreleased three parts of this series!

Find me on Instagram and Twitter, where I post about the tech that I'm currently working with, and document my journey as a Computer Science student🙂.

👨‍💻 What I learned from my first week as a Software Developer Intern

yusufcodes — Sat, 24 Aug 2019 20:52:55 +0000

Introduction

In this post, I'd like to detail a few bits of advice upon starting my first job as a Software Developer Intern.

💡 To quickly introduce myself, I'm currently studying my Bachelor's in Computer Science in the city of Manchester, UK. As part of this degree, I've taken a year out to gain some Industrial Experience, which will form part of my degree. I started working over a week ago, so thought I'd get this post out following my experiences so far, as well as general tips which I feel will help anyone starting out in a new job.

What I've learned and my tips 👍🏼

You won't know everything straight away, and that's OK 🤯
I felt bad about all of the things I didn't know, despite being new to the company. I had to adjust this mindset so that, instead of feeling bad about myself, I'd simply try my best with a given task and see what I could achieve. Over time, you will get to grips with things - just know that this will take time.

Don't be afraid to ask for help 🗣️
As nice as it may be to get on with a task for some time to try and make progress, there may come a point where you aren't getting anywhere. This is the time to ask for help. You don't want to be hitting the same brick wall which, if you had asked for help earlier, could've avoided completely. The way I'm trying to approach this is to try my best with a given task and when I'm feeling completely stuck, I will ask for guidance.

Don't be afraid to make mistakes ❌
Let's be honest, the last thing you want to be doing as a new employee is making a mistake - whether it be a small mistake or a catastrophic one. But these things happen sometimes. Why shouldn't you be afraid of these mistakes? Because: you will genuinely learn from such an experience. You'll want to ensure that the same mistake won't happen again, so you will do what you need to do in order to really learn from the mistake you made.

Reflect on your experiences regularly 📖
The process of reflecting can really help you look back on all of the things you've achieved so far, and help you identify areas which you'd like to work on more. I'm personally trying to write down all of the things I've done at the end of each week, reflecting on both my progress at work and also my feelings throughout the process. I feel like this will help me as I progress in my career as a developer. As a student, I'll have something to look back on, before eventually starting my career once I've graduated from university.

If you aren't feeling totally comfortable - speak to someone about it
Starting a new job, no matter what level you are at, can be daunting. You may have a bunch of thoughts and emotions running through your mind, and sometimes just talking to someone about things can help you make sense of all of this. This could be with someone at your new workplace, or someone you know in your personal life.

Conclusion

I hope this quick post helps you out in some way, and if you found it useful, please share it with friends and family who you think may find it useful too! Thank you for taking the time to read my post☺️
Find me on social media 👋🏽:
-Instagram
-Twitter

📘 Study tips from a Computer Science student

yusufcodes — Sat, 17 Aug 2019 21:10:42 +0000

Introduction

After completing the first two years of studying my bachelor's in Computer Science, achieving a first class so far, I thought I'd share a few tips which I feel have helped me. Note that people have different strategies to learning, but these are the things which I feel have helped me. Let's begin! ⬇️

My study tips ✏️

Make notes 📝
Notetaking is something I do regularly, an example of my notes are in the header image of this post (no, they don't need to be super neat!). When I take notes, I feel like I'm taking the time to really understand what I'm trying to learn. I'm having to read some information, and process it by writing it into my own words. I can then read over these multiple times to help me retain the information.

Learn from multiple sources
Although the book that your lecturer strongly recommends is packed with information, there may be a topic which just doesn't make much sense to you. And that's ok. We're in an era where information can be easily accessed online - use this to your advantage. There's a high chance that searching online for the topic you're struggling with will yield a large amount of resources for you to try and learn from - more books, articles, videos, and anything else in between.

I'd often search for a secondary resource to supplement my university resources, even if my primary resource was completely fine. This enabled me to broaden my knowledge on the topic I was studying, sometimes outside the scope of my curriculum, but this can really help you understand the concepts you need to know better.

Practice with old examination papers 📄
Most curriculums will have past examination papers: exams which previous students have sat. These are helpful because they give you an idea of what the examination format will be like, for example, indicating the type of questions to expect and how you'll be expected to present your information (short answer questions, essay questions, etc.)

You can use this to aid you during your exam preparation, ensuring that you're able to take all the information you've been studying and apply it to the exam that you will be taking.

Make a study plan 📅
If I don't have a study plan in place, I just know I won't be able to study effectively. I'll either end up procrastinating or focusing on the topics which I like (raise your hand if you're guilty of doing this🙋‍♂️🙋!).
Below is a rough guide on how I'd plan out my studying:

Make a list of the topics you need to study
Having a list of the things you need to study will help you keep track of the topics you have covered and the topics which still need covering.
Gather the resources you plan on using to study these topics
This will make it easy for you to crack on with the studying rather than waste time trying to find those lectures and books you need!
Set a day that you'd like to study each topic, and state how long
Example: Monday 2PM to 3PM - study Big O Notation and Time Complexity. I tend to write plans for a couple days ahead at least.
Reflect on the things you learned
At the end of the day, I'd quickly confirm the topics which I felt OK at and more importantly, areas that still needed a bit of work. I could then amend any study plans I had in place to account for these weak areas. (Study plans can change - that's fine!)

Ask for help when needed 🗣️
A helping hand is always useful, whether it be from a fellow student or your lecturer. A quick explanation of something could solve that road block you're facing with a difficult topic!😌

Reward yourself for your hard work ☕
In that all important study plan we talked about earlier, set aside time to do things you like. The sort of thing you'd rather be doing than studying at times. Taking time off to relax will help you stay focused and motivated when you come back to studying again.

Conclusion

Like my other posts, I like to keep them short and sweet (so you don't get bored)!
I hope this condensed post helps you out in some way if you're looking for ways to make the most out of your studying. If you have any questions, comment down below or find me on Instagram or Twitter and contact me over there🙂. Thank you for reading this post!

How I stayed organized whilst studying a Computer Science degree and working a job📝

yusufcodes — Sun, 11 Aug 2019 20:30:37 +0000

Introduction👋
Have you ever wondered what it's like to study and work, and how to handle it? I hope to go over these things in this quick post.

At the time of writing this, I've completed the first two years of my Computer Science degree and during those years, I needed to work to aid myself financially.

For reference, I worked in retail as a Customer Assistant, between 20-30 hours a week, so a lot of the information will be based off of that experience.

What it's like to work and study👨‍🎓
Working and studying can be difficult but rewarding. You're able to earn money, which you'll probably be needing, whilst still being in full-time education. Alongside that, you're building on many 'soft' skills which employers actively look for, including: teamwork, organisation, communication and time management.

As great as this is, it can slightly diminish your university experience. For example, you may need to turn down some social events, or struggle to actively participate in university societies. This really depends on how many hours you are required to work.

However, you can certainly find your balance, and participate in the things you want to do whilst working! I'll move onto some tips I can offer to help the study-working life experience.

My tips to handle working and studying☑️
• Write all of your deadlines down in one place

I kept a list which looked like this in Evernote. This meant that I could see all of my deadlines in one place, and plan my studies to target each deadline - ensuring I'm working towards each deadline / examination as equally as possible.

• Create weekly and daily plans
Planning is something which I think every student should do - irrespective of whether they have a job or not. This allows for you to allocate time to your studies, but also time can be set aside for your personal life.

In my case, I would open up Google Calendar and plot the following things:

My class schedule
My work schedule

From this, I could use the 'free' blocks of time to allocate towards my personal study time, and any other things I had going on that week.

Once I had done this, I'd be able to create a daily plan. For example, I could plan a Monday in the following manner:

Classes: 9-12PM
Personal study: 1-4PM
Work: 5-10PM

I'd go into more detail for my personal study, for example: "Spend 1 hour on the Algorithms and Data Structures unit" - in this study session I could be brushing up on some lecture notes, or working on some lab work.

Each day would differ as I'd have more classes on some days compared to others. I had days in the week where I did more studying than others.

In summary, planning is a way for you to plan ahead, stay on top of your workload, and ensure you stay focused and on-track all week - all whilst managing to work your job.

• Take your studies seriously right from the beginning of the academic year
Yes - I'm indirecting those who leave things to the last minute - do not do this if you have a job! You'll only make things more difficult when your deadlines and exams approach, and you're left with insufficient time to prepare because you still need to keep working at your job. Your job won't suddenly stop when you have a bunch of exams and deadlines coming up.

Once you've been set an assignment, get that deadline written down and start working on it as soon as possible. For exams, I'd advise keeping up with your lecture content right from the beginning - I'd write all my notes up for each week as consistently as I could, well ahead of the examination date. After that, keep reading over those notes at regular intervals so it stays fresh in your head.

The benefit of doing all of this? Once your deadlines and exams approach, you'll be one step ahead because you started studying early on. This will mean that you'll be able to successfully work the shifts for your job whilst sitting exams and submitting assignments.

• If needed, take time off work using any holiday / annual leave
You'll probably have some sort of holiday or annual leave system in place at work. If you know that certain study periods will be busy, you can always book these times off. I'd advise letting your employer know as soon as possible, because last minute accomodation for time off is a tricky thing to do - especially in a fast paced sector like retail.

Conclusion
So that concludes this post about working and studying. I wanted to keep it brief yet try and provide as much information as I can. Find me on Twitter and Instagram, and reach out to me if you have more questions. Alternatively, leave a comment on this post and I'll get back to you.

If you found this useful, share it with others who may find it useful! Thank you for reading😊👋🏽

How I Got an Internship in Software Development as a Computer Science student🎓

yusufcodes — Sat, 10 Aug 2019 21:54:27 +0000

Introduction👋
I’d like to share the different stages involved in finding an internship/placement as a Computer Science student. I’m going to keep this information as brief as possible, but if you have any questions feel free to send me a message (contact details at the end of the article)!

I applied for my internship during the second year of my degree (2018–19), and you should start applying as soon as your second year begins. Internships vary in how long they are from a few weeks to an entire year. The length of your internship is totally up to you. If you go for a year-long placement however, you will need to take that year out of your degree, increasing the length of your studies by 1 year.

I study in the UK so things may be a little different where you are from — but I imagine most things are the same.

Stages Involved in Finding an Internship🔎

• Write a CV (Curriculum Vitae) / Resume
This should be a 1–2 page collation of all of your experiences to date. This should include academic attainment and any work experience you may have.

• Search for jobs
You should be searching for jobs including ‘placement’ or ‘internship’, for example ‘Software Developer Placement’, and so on. Places that I used to search were: my university’s job posting site, GlassDoor, RateMyPlacement and Indeed. I’m sure there are other sites that also advertise these vacancies. If you know of a company you would like to work for, you could check their website directly and see if they are running any internships.

• Write a Cover Letter (if required)
Most vacancies will require you to submit both a CV and a cover letter. A cover letter is a short written piece where you explain why you are interested in the internship, and affirm that you are a suitable candidate. Employers usually read these and then go through your CV, so making sure this is written well is important!

• Keep track of all the places that you’ve applied to
I made a basic spreadsheet and detailed the following things:

Company name
Date applied
Vacancy details: name, deadline for applications, job description

This is really helpful when you’ve applied to a few companies, because it means you won’t forget where you’ve applied to. You can come back to this spreadsheet as and when you receive invitations to interviews (or sadly, any rejections) to keep on top of all of the companies that you have applied for.

• Set up a Personal Portfolio or a GitHub account
This gives a company a way to see the types of things you’ve worked on, which could increase your chances of getting a job if they like what they see.

I personally have a couple of my university work posted on my GitHub. You don’t need to have dozens of projects or a super pretty website — just some way to show an employer what you have done. Remember, these employers aren’t looking for a perfect coder, just someone with a genuine passion to excel in the field. Showcasing your work is a great way to highlight this.

• Prepare for the interviews
Great — you’ve been invited to an interview with a company — now what?

I was left feeling overwhelmed when I received offers from places that I applied for — mainly due to my lack of self-confidence. If you end up feeling like this, you’re not alone!

Preparing for interviews is a very broad topic which, if you searched online, you’d find many different resources. I’ll give a little bit of information on what I personally did, but I recommend you also do your own research into interview preparation.

‣ Research the company
Company research is so important. You’re going to be asked to show your interest in the role you applied for and the company itself, so you’ll need to do a bit of research on them. Find out exactly who they are, what they do, and things that you find interesting about them. This way, you’ll be able to demonstrate you passion and enthusiasm for both the role and the company.

‣ Brush up on any technical skills
For example, if they’re advertising a position working with JavaScript, make sure you know the basics. Most companies will tell you whether or not you will be undertaking a technical interview, in which case it should indicate what you may need to prepare for it.

A great way to brush up on your general programming skills is by using websites like HackerRank or LeetCode. Both websites are similar on the basis that they provide you with programming exercises to complete, of varying levels of difficulty, in most programming languages.

Algorithms and Data Structures is an important topic to cover as well. I personally went over my university unit which covered all of this information, but if you haven’t studied the topic yet, there are many resources online to read up about it!

‣ Know what you’ve written on your CV and Cover Letter
The employers will most likely have the CV and Cover Letter right in front of them, so make sure you know exactly what you’ve put on there. It will make it easy for you to explain the different areas of your academic experience and other work experience you may have.

‣ Dress appropriately
Dressing in smart or smart-casual attire is the best idea. I’d personally stay clear of wearing casual clothes to an interview — show the company that you care by taking care of your appearance!

My Tips
• Make use of your university’s careers services.
• Make sure your CV and Cover Letter are perfect — no errors in spelling or grammar.
• Tailor your CV and Cover Letter to each vacancy — generic applications aren’t generally taken seriously and decreases your chances of being invited to an interview.
• Attend networking events — your university may host employability events where employers come in to talk about what they do and the jobs they have to offer. These can help you massively during the application process if an employer remembers you!
• Don’t give up! — Placements and internships are very competitive, so rejections are totally normal. Don’t let it knock your confidence and continue to search for and apply to more internships.

Conclusion
I hope this brief post is useful to you if you’re looking for a student placement / internship. Follow me on Instagram and Twitter to keep up to date with my life as a student, and things I get up to! You can also contact me through these platforms if you have any questions.

If you found this post useful, I’d greatly appreciate you sharing it on your own platforms to benefit other people! Thanks for reading😊👋