Stand out as a Junior Developer with this 5 step plan

Dear Junior Frontend Developer,

Being good at solving problems directly impacts your ability to code.

A structured approach will not only help you deliver work quicker but means that you always have a plan when people ask. And when you’re just figuring things out, perception is as important as reality.

I’m a Frontend dev and as I’ve learned about the role I’ve written down the things I wish I’d known when I started.

We’re starting with the basics here, but these articles are designed to help you in real-world working environments, maybe even in your first role.

What we’ll cover

  • Understanding what we’re…


Using JavaScript spread syntax in your reducers

I came across a neat pattern when working with a function in a reducer (a useReducer() hook, not redux).

The goal

I needed to remove a particular property from a list (just a plain object) stored in state.

I have the property id, so shouldn’t be too difficult.

As we’re working in a reducer, we need to be wary of state mutation and side effects of our functions. i.e. we want to return the new and updated state without mutating the original state.

Here is an example of my original attempt at the reducer function:

function deleteProperty(state, payload) { const { id…


Comparing things in JavaScript == vs ===, which should I use?

If === is not equal to == then what does it equal???

Huh?

Let’s break it down

First, let us define the two operators:

  • === is known as the Strict Equality Operator
  • == is the Abstract Equality Operator

They both behave the same, in that they both return a boolean value telling us if two expressions are equal.

A === B // returns true or false
Y == Z // also returns true or false

The difference is that the Strict Equality Operator (===) does no type conversion (also called type coercion).

1 == "1" // returns true1 === "1"…


Will a forced culture of working from home have a negative impact on remote working?

Remote-working during a pandemic

I recently started a job as a software developer and part of the draw was that I had the option to work from home.

Over the past 8 months, I’ve gradually adapted to a mixed week of 2/3 days of remote work, balanced with days in our London office.

For those who have been forced to working remotely since COVID-19, I want to assure you, this is not normal.

At this moment, you are not just “working from home.” You are “at your home, during a crisis, trying to work.” — Kelli María Korducki

Working during a pandemic, no matter…


Two ways to quickly remove an element from an array in JavaScript

So you want to remove an item from an array in JavaScript?

Well, you’re not alone!

It’s one of the most upvoted JavaScript questions on stack overflow and can feel a little unnatural considering how simple it is to array.push().

Method 1 — remove an element with Array.filter()

If you want to remove an element while leaving the original array intact (unmutated) then filter() is a good choice!

Removing a single element:

const itemToRemove = 3const originalArray = [2, 51, 3, 44]const newArray = originalArray.filter(item => item !== itemToRemove)console.log(newArray) // [2, 51, 44]
console.log(originalArray) // [2, 51, 3, 44]

Breaking that down.

We define a…


The usePopper hook for React Popper — Popper.js

I recently upgraded the popper in our component library.

The complexities involved in managing the placement, flipping and overflow prevention of a popper make writing your own implementation from scratch intimidating (and above all time-consuming).

Popper.js does a better job than I would at explaining why you should use them.

React Popper 2.× usePopper hook

The documentation on implementing the usePopper hook is relatively limited. (It took me way longer than it should have to get a working version 😅)

The usePopper hook takes three parameters:

  • a reference to the toggle element e.g. a button
  • a reference to the popper element
  • a config object

and…


Creating style extendible components with React and styled-components

Recently I was trying to extend a component from our company component library to make the style fit a more niche use case.

The underlying functionality of the component was relatively complex and well written so I didn’t really want to re-write it.

I went with a standard styled-component extension:

const myThing = styled(existingComponent)`
color: snazzyNewColor;
... or some slightly more useful styles
`

But unfortunately, no extra styling was applied!

I ran into a situation where my styled-component was not extending the existing component.

A little browse through the styled-components docs and I found this:

The styled method works…


Add a display name to your components to help identify them

React dev tools are great for inspecting your components, checking their props or state live. Maybe you want to confirm things are working as planned or to help with your debugging.

It can be tricky though when you’re inspecting your code and there is no reference to your component names.

Checking through would be much easier if each of your components had a meaningful display name.

Well, they can.

Here is a simple custom card component and button (pictured above) in the React Developer Tools:


Take a moment to stop and think before spending time refactoring

Joining a team as a junior developer means that, by default, you’re working on a codebase that you didn’t write.

Chances are, it’s a legacy codebase written over a long period of time by more than one developer.

You will begin to work on different parts of the project, and as you get more confidence, you will start to spot parts of the project which maybe aren’t up to date with modern standards.

But weirdly, the legacy code still works fine.


Add a customisable Material-UI theme to your React app

There are a million tutorials on Create React App, but few walk through adding the minimal code needed to get started with the Material-UI theme.

We’re going to skip the React basics and focus on:

  • Installing Material-UI
  • Adding the default theme to your app
  • Customising the default theme
  • Accessing the theme in your components

Let’s get started!

Install React with Create React App

Open up your terminal and navigate to the folder you’d like the app to live in.

Run the following commands, replacing material-ui-baseline with your project name:

npx create-react-app material-ui-baseline
cd material-ui-baseline
npm start

Install Material-UI

In your terminal, inside the project root folder run:

//…

Kitson Broadhurst

Front end developer at Bright Analytics, London, working mainly with React @kit_son

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store