Hey 👋🏾 I'm Tara, I'm a Senior Software Engineer, Speaker, Writer and Instructor.

Have you ever seen a cage fight? Where two MMA fighters go head-to-head until one of them concedes?

2020 in review


Have you ever seen a cage fight? Where two MMA fighters go head-to-head until one of them concedes? 

I think of it as the more gruesome older sibling of boxing. Every so often there is a fight where one of the fighters gets completely destroyed. Just imagine, you are an MMA fighter jumping into the cage. You’re feeling hyped and ready to prove that this is your time. The fight starts off well. You get in a few punches, start getting confident, maybe even a little cocky. Then the other fighter shows you who is really stronger. You get a jab to the face that makes you feel dizzy, a right hook to the ribs which has you in agony and an uppercut to the jaw that floors you. You’re trying to find the inner strength to get back up, but the other guy is on you throwing punch after punch until they are dragged off you because they’ve knocked you out completely. Before you even know what’s happening the fight is over. You’ve lost and you’re left in need of serious recovery and time to heal.

That for me, is the story of 2020...

**Covid 19**. Jab.

**#BlackLivesMatter**. Right hook.

**#ENDSARS**. Uppercut.

**Grief**. Sucker punch.

**Everything else**. Punch after punch after punch.

What’s wild is that we can’t really be in recovery yet as none of this is over, it may never be over, so we’re just getting by. Which for some people it has meant putting goals on hold, or even goals in the bin, and for others they’ve had the time they’ve needed to excel and put the work in. I’m definitely on the former side considering some of [the goals and achievements I had last year](https://www.taraojo.com/post/2019-in-review). Though, I’ve had bursts of "productivity". So, while 2020 has been an absolute ‘mare, I will still reflect on the good things that have happened in 2020.

## Work

I got a new job! 🎉

I bid farewell to the amazing people at FutureLearn after working there for over 2 and a half years. This year I started at the Financial Times as a Senior Software Engineer. It has been an interesting change to go from my Tech Lead role at FutureLearn to the role I have now at the FT. In my time here I’ve worked on some interesting and challenging problems on FT.com and in the app and on all parts of the stack. My technical skills have already grown lots and I’m looking forward to developing them more.

## Speaking

I didn’t attempt any conference talks this year, not that there were as many this year, but towards the end of the year I spoke on two panels.

1. The first was at the [Black Girls Tech Summit](https://www.girlstalklondon.com/opportunities-events/the-black-girls-tech-summit/) in November where we talked about navigating the workplace as black women.
2. In December I spoke at a [LeadDev panel](https://leaddev.com/culture-engagement-motivation/strategies-creating-environment-continuous-learning) on strategies for creating an environment of continuous learning.

I find panels much more daunting than giving pre-prepared talks and I still need a lot of practice! I want to get better at these so I’m keeping an eye out for tips and articles for being a great panelist.

## Writing

At the start of the year I had the aim of writing something once a month to work on improving my writing skills. I did start my blog and managed a whole seven out of twelve posts (not including this one!) which considering how this year has been, that’s not too bad 😎

I’ve predominantly written about career development and some front-end development bits I’ve learned. The most popular has been the one I wrote on [animating list reordering with React hooks](https://www.taraojo.com/post/animating-element-reordering) which has been seen almost **5000** times 😱

## Teaching

I have always enjoyed teaching through learning hours and giving talks, but this year this role became more official when I became an Instructor for the [Black Codher programme](https://blackcodher.com/). Black Codher is a six month coding bootcamp for black women, empowering them to progress into digital roles. I taught JavaScript and React and learned a lot about teaching, and teaching remotely, that I shared in this [thread on Twitter](https://twitter.com/tara_ojo/status/1322144457832222720?s=20).

I’ve also started using Instagram as a way to document and share what I’ve been learning, I’ve spent a lot of the last few months getting to grips with data structures and algorithms. As I’ve translated that content into Instagram posts it’s helped me understand the topic better and has been a nice way to get to know some of the tech community on Instagram too. So far I’ve talked about Big O notation, recursion and binary search. Take a look at my [Instagram page](https://www.instagram.com/taraojo/).

## Other cool things

I started learning to touch type this year and honestly it is great and has made me more efficient already. I was a slow typer before, keeping my eyes on the keyboard, which is why I decided to learn. It was pretty difficult to build up the new muscle memory and for a while it completely slowed down my typing as I tried to adjust to the new way. I am much faster now than I was previously and I plan to keep improving my number of words per minute. I have been using Typing club to learn which is really good.

## 2021?

Let’s not even go there, I just pray I’ll be alive to see it through…

------------------------

<div style="display: flex;justify-content: center;">
    <blockquote class="twitter-tweet">
        <p lang="en" dir="ltr">
            There will be a lot of posts soon with people sharing how much they achieved in 2020, in the midst of a global pandemic, etc. But in case someone needs to hear this, I’m here to tell you that just making it to Dec 2020 is an achievement. That alone will be something to celebrate.
        </p>
        &mdash; Julia Rock (@thejuliarock) 
        <a href="https://twitter.com/thejuliarock/status/1338283727286308867?ref_src=twsrc%5Etfw">December 14, 2020</a>
    </blockquote>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

------------------------

I like this effect where instead of swapping a placeholder image with the real image, we reveal the image with CSS opacity transitions with the Intersection Observer API.

Lazy-load images with the Intersection Observer API and React


The Intersection Observer API allows you to observe and react to changes when an element enters the viewport or a parent element. It's very commonly used for lazy loading but can also be used for things like animations or changing the active state of links in a navigation bar as you scroll to different sections of a page. Lazy loading images stops the user from having to download resources on initial page load, instead, deferring it until a more appropriate time.

I've been playing around with different effects for lazy-loading images and I like this one where instead of swapping a placeholder image with the real image, we're instead revealing the image with CSS opacity transitions.

## Install and import packages and styles

To do this let's start with some imports, we'll be using React hooks, CSS modules and the classnames package to get this working. You can see the completed code below in the CodeSandbox using `create-react-app`.

```javascript
import React, { useState, useEffect, useRef } from "react";
import classnames from 'classnames';
import styles from "./styles.module.scss";
```

## Create the component

We'll create a functional component that returns a div element that we'll use as our placeholder. We'll also use the `useRef` hook to get a reference to our placeholder in the DOM. Later we can use this ref to see if the placeholder has come into the viewport.

```jsx
export default function App () {
  const placeholder = useRef();

  return (
    <div className={styles.wrapper}>
      <div
        className={styles.placeholder}
        ref={placeholder}
      />
    </div>
  );
}
```

The `useRef` hook gives you a way to store a mutable value using the `.current` property on the object returned. I won't go into why this can be useful, but in our case when we do `ref={placeholder}` on our placeholder element, React sets the `.current` property to the corresponding DOM node and keeps that value up-to-date whenever it changes.

## Add styles

The styles for this are pretty minimal, the element wrapping the image and placeholder has its `display` set as `relative` to constrain the absolutely positioned placeholder. Essentially, the placeholder is a yellow box with a bottom padding set to match the aspect ratio of the image we're using. Adding the transition property means we can use CSS to fade out our placeholder when we programmatically add the `hidePlaceholder` class.

```css
.wrapper {
  position: relative;
}

.placeholder {
  position: absolute;
  padding-bottom: 67%;
  margin-bottom: 4rem;
  width: 100%;
  background: #ffdd28;
  opacity: 1;
  transition: opacity 2s ease;
}

.hidePlaceholder {
  opacity: 0;
}
```

At this point we'll have nothing but a yellow rectangle on the page… exciting!

The next step is to make that box fade out, we've already created the CSS class so we just need to add it to the placeholder `div`. First, we'll create a new piece of state with the `useState` hook to let us know whether our image should be shown or not. By default this is `false`, we don't want to show our image on first render. Then, we'll use our `showImage` state to decide when to add our `hidePlaceholder` class. To do this, I like to use the [`classnames`](https://www.npmjs.com/package/classnames) package, because it's a bit cleaner than writing it myself and handy for doing conditional logic with class names.

```javascript
const [showImage, setShowImage] = useState(false);
  
const placeholderStyles = classnames(
  styles.placeholder,
  { [styles.hidePlaceholder]: showImage }
);
```

Now that is sorted we can update our placeholder element to use the new classes variable.

```jsx
export default function App () {
  const placeholder = useRef();
  const [showImage, setShowImage] = useState(false);
  
  const placeholderStyles = classnames(
    styles.placeholder,
    { [styles.hidePlaceholder]: showImage }
  )

  return (
    <div className={styles.wrapper}>
      <div
        className={placeholderStyles}
        ref={placeholder}
      />
    </div>
  );
}
```

## Add our image

Now we're at the point where our box will fade to nothing when the value of the `showImage` state changes. Though, we still need to actually show the image, so let's do that next. I've picked an image and created a variable for it outside of my component called `IMAGE_URL`. We already have our `showImage` state so we can also use this to conditionally render our image.

```jsx
<div className={styles.wrapper}>
  <div
    className={placeholderStyles}
    ref={placeholder}
  />
  {showImage && <img src={IMAGE_URL} alt="Girl wearing VR headset" />}
</div>
```

## Set up the Intersection Observer

All we have left to do is change the value of our state when the placeholder comes into view. We need to set up the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

The Intersection Observer takes two parameters, the first is the callback. This is what will be called when your element comes into view, in our case, when our placeholder comes into view. _Do note that this callback will also be executed the very first time the observer tries to watch your element._ 

The callback will be given a list of [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) objects as its first parameter. Each item in the list represents each item being observed who's intersecting status has changed. In our case the list will always have a length of one, as we're only watching one element (our placeholder).

```javascript
const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      setShowImage(true);
    }
  });
};
```

We can check the value of the isIntersecting property on the entry to see if our placeholder is inside the viewport and when it is, then we should update our `showImage` state to true.

The second parameter passed into the Intersection Observer is the options object. There are a few different options we can set to configure the observer but we'll just focus on the `threshold`. The threshold determines when the callback should be run. It can either be one number or an array of numbers. By default this is 0, so if 1 pixel of the element we're watching comes into the viewport then our callback is fired, I've changed this to 1.0 which means our `showImage` state will not change until the whole placeholder is in the viewport. This also means we can watch it fade in smoothly.

```javascript
const options = {
  threshold: 1.0
};
```

Now we can create our new instance of the Intersection Observer, passing in our `callback` and `options`, and use it to observe our placeholder.

```javascript
useEffect(() => {
  const callback = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setShowImage(true);
      }
    });
  };

  const options = {
    threshold: 1.0
  };

  const observer = new IntersectionObserver(callback, options);
  observer.observe(placeholder.current);
}, []);
```

You'll notice that I've put it all inside of a `useEffect`. We use the `useEffect` hook to run code (an effect) after the render when our components are on screen. We need to wait for this to happen before we observe our placeholder. By default the `useEffect` will run after every render, but we can change this to run when specific values have changed.

We can do this by passing an array as the second value to the `useEffect` hook, this array should include any dependencies your effect uses to ensure it always has the up-to-date value. In our case the effect doesn't have any dependencies and we only want to set up the Intersection Observer once so I have left the array empty. This means the effect will only run once on first render.

## `useEffect` cleanup

We should also ensure we run cleanup functions in a `useEffect` we can do this by returning a function inside the `useEffect` which will be called when the component is destroyed.

```javascript
useEffect(() => {
  // intersection observer set-up

  return () => observer.disconnect();
}, []);
```

Here we are using the `disconnect` method on the observer to stop it from watching all of its target elements for visibility changes. This means it will stop watching our placeholder.

## We're done!

Once you've added enough content above your image you'll see as you scroll down your image fades in smoothly after the placeholder is completely in view. Check the CodeSandbox below to try it out. 🙂

Thanks for making it this far! Follow me on [Instagram](https://www.instagram.com/taraojo/) for other JavaScript tips and tutorials 👩🏾‍💻

<iframe src="https://codesandbox.io/embed/intersectionobserverreact-zek38?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="IntersectionObserverReact"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>


Smoothly transition each element in a list from its first position to its second position

Animating list reordering with React Hooks


A little while ago I was given a cool design for an Instagram story styled bubble component where each bubble would smoothly slide into its new position when we got its new order from the API.

While it can be straightforward to do a whole load of animations and transitions with CSS, it took me a while to find an example of animating the reordering of list items, especially with React. Since I’ve also started to get used to the concepts of React Hooks I wanted to use them to implement this animation too.

I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the `componentWillReceiveProps` function call from the class components, this was hard to do.

I was under the (incorrect) assumption that there would be loads of React hooks examples out in the wild. I honestly just wanted a copypasta solution that I wouldn’t have to tweak too much 👀. I also didn’t want to bring in some huge, usually overly flexible package to reorder one small thing. I did come across a great post by Joshua Comeau (linked below). It explains how to do exactly what I needed, but with class components. With React hooks I needed to re-think some of the concepts to get it to work, but I’ve based the majority of this work on that post.

What we want to happen:

1. Keep an eye out for when our element list is going to change
2. When it changes we want to calculate the previous positions and the new positions of each element in the list before the DOM updates
3. Also before the DOM updates with the new order of the list we want to “pause” the update and show a smooth transition of each item in the list from its old position to its new position

Let’s start with a parent component that just renders the children that is passed into it, `AnimateBubbles`:

```javascript
import React from "react";

const AnimateBubbles = ({ children }) => {
  return children;
};

export default AnimateBubbles;
```

Then we can use that component by rendering our items inside of it. In my case I’ve created a `Bubble` component that adds the styles to make each image a circle, [the full code is here](https://codesandbox.io/s/reorder-elements-with-slide-transition-and-react-hooks-flip-211f2?file=/src/Bubble.js). The `Bubble` component also forwards the ref onto the DOM element. This is important as we can use the ref to find where the element is rendered in the DOM, then we can calculate its position. Another important prop is the `key`, this is not only needed for React when mapping over elements, but we can also use later to uniquely identify each item and match its old and new positions in the DOM.

```jsx
import React, { useState, createRef } from "react";
import Bubble from "./Bubble";
import AnimateBubbles from "./AnimateBubbles";
import initialImages from "./initialImages";

export default function App() {
  const [images, setImages] = useState(initialImages);
  return (
    <div>
      <AnimateBubbles>
        {images.map(({ id, text }) => (
          <Bubble key={id} id={id} text={text} ref={createRef()} />
        ))}
      </AnimateBubbles>
    </div>
  );
}
```

Now that we have the foundations of our components we can start building out the logic of our `AnimateBubbles` component.

## Keeping an eye out for React rerenders
With React hooks, we no longer have access to lifecycle methods like `componentWillReceiveProps` or `componentDidUpdate`, instead it’s all about effects. If we want to do something when a prop changes we can do the work inside of a [`useEffect`](https://reactjs.org/docs/hooks-effect.html). The `useEffect` hook tells React that our component needs to do something after it renders. In our case we only want to do any work if our list changes and the new order is rendered. Adding children as a dependency allows us to do that.

```javascript
const AnimateBubbles = ({ children }) => {
  useEffect(() => {
    // do some layout-y stuff
  }, [children]);

  return children;
};
```

## Measure each position in the the DOM
To calculate the position of each child in the DOM whenever the children prop changes, we can use [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). I created a separate helper function to do this:

```javascript
import React from "react";

const calculateBoundingBoxes = children => {
  const boundingBoxes = {};

  React.Children.forEach(children, child => {
    const domNode = child.ref.current;
    const nodeBoundingBox = domNode.getBoundingClientRect();

    boundingBoxes[child.key] = nodeBoundingBox;
  });

  return boundingBoxes;
};

export default calculateBoundingBoxes;
```

In this function we pass in `children` as an argument and use the `forEach` function on React.Children to iterate over them, getting the measurements of each item in an object that we can later store in state. This is where setting a key on each child is important as we store each box with its key as the object key so we can match up the old position with the new position later. It is also why creating a ref for each child is important, as we use that to find the element in the DOM and measure the bounding box for it. Now, when we call this function inside of the `useEffect` we will get the bounding box for each child updated every rerender 🎉.

```javascript
const AnimateBubbles = ({ children }) => {
  const [boundingBox, setBoundingBox] = useState({});

  useEffect(() => {
    const newBoundingBox = calculateBoundingBoxes(children);
    setBoundingBox(newBoundingBox);
  }, [children]);

  return children;
};
```

The problem now is we’re only getting the new positions, but we also need the old positions so we can do the slide animation from old position to new position.

## Getting the previous state/props with the usePrevious hook
One way in which we can get the old positions of the children is by keeping track of the previous state of the children. The React docs already suggest a hook for this called `usePrevious`. They say that it may be provided out of the box in the future since it’s considered a common use case. Using [`usePrevious`](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state) means we can do the exact same thing to measure the bounding box of the old positions as we do for the new positions.

```javascript
const AnimateBubbles = ({ children }) => {
  const [boundingBox, setBoundingBox] = useState({});
  const [prevBoundingBox, setPrevBoundingBox] = useState({});
  const prevChildren = usePrevious(children);

  useEffect(() => {
    const newBoundingBox = calculateBoundingBoxes(children);
    setBoundingBox(newBoundingBox);
  }, [children]);

  useEffect(() => {
    const prevBoundingBox = calculateBoundingBoxes(prevChildren);
    setPrevBoundingBox(prevBoundingBox);
  }, [prevChildren]);

  return children;
};
```

I’ve put this into a separate `useEffect` as they don’t need to be done together and they both have different dependencies. These previous positions will now be recalculated every time children change.

Now we have these two important pieces of information, we can move on to the actual transition 😅

## Making moves
When making the actual animation I looked more into [FLIP](https://aerotwist.com/blog/flip-your-animations/) as was talked about in Joshua Comeau’s post. FLIP stands for First, Last, Invert, Play, coined by Paul Lewis as a principle for rendering more performant animations.

So in our case, we find the first position of each child. We have this stored in state in `prevBoundingBoxes`. Then we find the last position of each child. We also have this stored in state in `boundingBoxes`. The next step is to invert, which is to figure out how each child has changed and apply those transformations to each child so it looks like it is in its first position.

We can set up a new useEffect to do this with dependencies on `children`, `boundingBoxes` and `prevBoundingBoxes` as we’ll use all of those values in the effect. Remember when React rerenders, it instantly updates the view with the new state, but we can use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to tell the browser that we want to perform an animation. The browser will call the function you give it before the next repaint.

```javascript
const AnimateBubbles = ({ children }) => {
  // calculate bounding boxes from previous examples code goes here

  useEffect(() => {
    const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;

    if (hasPrevBoundingBox) {
      React.Children.forEach(children, child => {
        const domNode = child.ref.current;
        const firstBox = prevBoundingBox[child.key];
        const lastBox = boundingBox[child.key];
        const changeInX = firstBox.left - lastBox.left;

        if (changeInX) {
          requestAnimationFrame(() => {
            // Before the DOM paints, invert child to old position
            domNode.style.transform = `translateX(${changeInX}px)`;
            domNode.style.transition = "transform 0s";
          });
        }
      });
    }
  }, [boundingBox, prevBoundingBox, children]);

  return children;
};
```

This we can do with `first - last = inverted-value` on the `left` values of the box. Since we also have a reference to the DOM node, we can apply the transform straight onto the node with a transition of 0 seconds so it inverts instantly.

The final step is to play the animation. To do this we wait for the child elements to be inverted, then we remove the transform and apply a smooth transition. The elements then slide into their new positions 💃🏾💃🏾💃🏾.

```javascript
const AnimateBubbles = ({ children }) => {
  // calculate bounding boxes from previous examples code here

  useEffect(() => {
    const hasPrevBoundingBox = Object.keys(prevBoundingBox).length;

    if (hasPrevBoundingBox) {
      React.Children.forEach(children, child => {
        const domNode = child.ref.current;
        const firstBox = prevBoundingBox[child.key];
        const lastBox = boundingBox[child.key];
        const changeInX = firstBox.left - lastBox.left;

        if (changeInX) {
          requestAnimationFrame(() => {
            // Before the DOM paints, invert child to old position
            domNode.style.transform = `translateX(${changeInX}px)`;
            domNode.style.transition = "transform 0s";

            requestAnimationFrame(() => {
              // After the previous frame, remove
              // the transistion to play the animation
              domNode.style.transform = "";
              domNode.style.transition = "transform 500ms";
            });
          });
        }
      });
    }
  }, [boundingBox, prevBoundingBox, children]);

  return children;
};
```

## Remove the glitch
While I started work with `useEffect` I found that it was looking super glitchy, then after digging around in the React docs I found this tip:

> “Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously. In the uncommon cases where they do (such as measuring the layout), there is a separate useLayoutEffect Hook with an API identical to useEffect.” - [React docs](https://reactjs.org/docs/hooks-effect.html#detailed-explanation)

Since our aim is to measure the layout of elements in the DOM, what we actually need is [`useLayoutEffect`](https://reactjs.org/docs/hooks-reference.html#uselayouteffect). As noted, `useLayoutEffect` has an identical API to `useEffect` so I could easily switch out one for the other and it made the whole animation look super smooth 😎


<iframe
   src="https://codesandbox.io/embed/reorder-elements-with-slide-transition-and-react-hooks-flip-211f2?fontsize=14&hidenavigation=1"
   style="width:100%; height:300px; border:0; border-radius: 4px; overflow:hidden;"
   title="Reorder elements with slide transition and React hooks - FLIP"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>


## Extras
- Joshua Comeau’s [Animating the Unanimatable](https://medium.com/developers-writing/animating-the-unanimatable-1346a5aab3cd) post was the foundation for this work, Joshua talks a lot more about DOM rendering and FLIP.
- I initially tried this using the “Magic Move” concept based on [Ryan Florence’s React.js conf talk](https://www.youtube.com/watch?v=z5e7kWSHWTg). The [codesandbox for this is here](https://codesandbox.io/s/reorder-elements-with-slide-transition-absolute-positioning-6jv6z?file=/src/Bubbles.js), but this version is pretty complex and incomplete.


"In any job I regularly think about whether I’m Learning, Earning and Advancing. I don’t stay anywhere if I’m not getting at least two out of three of them."

Evaluating your role and comparing it with others

Are you Learning, Earning and Advancing?


I once got great advice while overhearing someone else’s conversation. My old tech lead was chatting with another engineer in my team and he said something along the lines of:

> “In any job I regularly think about whether I’m **Learning**, **Earning** and **Advancing**. I don’t stay anywhere if I’m not getting at least two out of three of them.”

I have followed this advice for years and it has really helped me to evaluate positions I was in and compare potential job opportunities. My old tech lead went into a little detail on what he meant by each of them, but I’ve since made up my own criteria for assessing them.

## Learning

This one is pretty self-explanatory. I don’t want to be in a place where my knowledge is getting stale, or where the company I work for does not understand the value of learning new skills on the job.

It’s important to know what you’re aiming for, as with all of these areas, so I’ll have a target in mind for what areas I want to develop in. Currently, I want to get better at building out bigger and more complex features, and I want to learn more about the architecture of applications.

I also think about how I like to learn and whether that can be catered for. I’m an online course and conference kind of gal. Though, I know others can be book people or are happy with online articles. Check that these can be organised for you!

### Questions I ask myself

- What do I want to learn?
- Will this job give me the opportunities I need to learn it?
- Will this job pay for my learning opportunities?

We can’t know everything, but having the opportunity to spend time learning new skills at work is a great way to check that you will grow in your role.

## Earning

Money is important.

The more you learn and advance in your career, the more you would expect your salary to increase too. In the classic talk / book ‘Drive’ by Dan Pink he talks about what really motivates people at work and money is one of them. He outlines how lack of motivation can come from salary and benefits being too low.

Though, there is a limit. Apparently more money as an incentive for a job like a software engineer can lead to poorer performance.

> “Pay people enough that you take the issue of money off the table” — Dan Pink

We want to be paid enough to feel comfortable, which is a different amount for each person. I would also say that “feeling comfortable” isn’t just earning enough to pay the bills, but being paid fairly in the context of your industry, geographical area and in-line with your colleagues doing similar roles.

I deffo recommend watching the talk Drive if you haven’t seen it, I picked up a lot of gems from that video when it came out many years ago. I also recommend sites like Payscale to get a better idea of how much your skills are worth.

### Questions I ask myself

- How much could I be earning in a role like this with my experience?
- What salary do I want to be earning?
- How much is this job willing to pay?
- What is the lowest amount I could earn to feel comfortable?

While people like to tell me “it’s not all about the money”, a really big part of work actually is.

## Advancing

So this one is a bit wishy washy but, it’s about getting formal advancements in your career, i.e. promotions, job changes or extra responsibilities.

Again, it’s useful to think about where you want to get too in your career and the steps you could take along the way. This could be a promotion into a more senior version of your role or the opportunity to transition into a different role that you’re interested in. Like going from a Software Engineer to a Site Reliability Engineer or from a Data Engineer to a Product Manager.

I see myself in some type of senior leadership role some day. So, while I am developing my skills as an engineer, I am also thinking a lot about improving my leadership skills and looking for opportunities to work on problems that aren’t just technical.

While I’m a long way away from actually doing that role, there are steps in between that I can take sooner rather than later. In the past I’ve taken up line management and tech leadership responsibilities, which have both been huge learning curves and soo useful.

### Questions I ask myself
- Are there advancement opportunities into other roles?
- Are there extra responsibilities I can take on formally?
- Will I get support in moving to other roles?
- How often do those roles open up?

Having formal steps in the direction you want to go in is a great way to prove that you’re making progress towards your desired goal.

---

There is definitely crossover between the three areas and if you’re working in the sweet spot where all three areas crossover, then lucky you.

I also think there are different phases in my life where different areas are more important. Right now, learning and earning are more important than advancing as I’m enjoying the role that I’m in. On the other hand, I can totally envision a time where advancing becomes the most important thing for me.

---

As a side note, I spend a lot of time looking to other people in tech to get inspiration for what my future career could look like. I’ve found it useful to remind myself that while other people’s careers always seem to be super inspiring and wildly unachievable, I am on my own path and making the decisions that suit my skills and interests. My journey isn’t a straight line to some promised land, it’s a squiggle. I try things out here and there and change my mind about what I want to do almost every week. C’est la vie 🤷🏾‍


Over the years, my understanding of what it takes to grow as an engineer and climb my career ladder has changed dramatically...

Widen your impact as an engineer


Over the years, my understanding of what it takes to grow as an engineer and climb my career ladder has changed dramatically. When I started out, I was confident all I needed to do was to become an amazing coder. I thought I just needed to know how to build complicated features.

Though, when I looked at the careers of more senior people in technology, this didn’t really add up. Most CTOs and Technical Directors aren’t spending their time in the codebase and worrying about code quality in their day to day roles. Even technical architects and leads don’t always spend lots of their time writing code. While it’s still important, writing code isn’t their highest priority.

Now, my thoughts on growing as an engineer are pretty different. Seniority develops as your impact grows. Particularly as your work starts to impact and influence larger groups of people. When you think of a CTO, their job isn’t about the details. It’s more about the wider questions that impact the team they look after. When you think of a principal or an architect they’re all about defining technical strategy for the future, and making sure engineers have everything they need to do their jobs and do it well.

I’ve grown most as an engineer when I was doing things that were unexpectedly widening my impact. Firstly, I started **developing my specialism**. This meant people would start to come to me for support as someone experienced in a specific area. And secondly, I **made things happen**, thinking less about what could be better and instead taking action to make things better.

## Develop your specialism

When you’re confused about a concept and can’t figure it out, who do you go to for help? For me it depends on the subject. If it’s a weird React thing then I know just the person for that, if it’s infrastructure related then I know the girl for that too. If it’s an accessibility question, I know a guy.

While there are lots of great full-stack developers out there, I generally go to specific people for more specialised questions. Lara Hogan has this great concept of developing a [manager Voltron](https://larahogan.me/blog/manager-voltron/) and I like to give it a technical spin. The idea is to have a diverse group of people that you can reach out to for support for different things. In my case, React, Accessibility, Infrastructure, CSS, etc. To flip this idea around, what could you help with in someone else’s Voltron?

Maybe people already come to you with certain questions because you have a bunch of domain knowledge in that area. Otherwise, think about what you would want that area to be. While it’s still important to develop a foundation in different areas, picking one or two as your “specialism” will help you focus your learning. The next step is making sure people know you’re the person to ask if they have questions. Be vocal about that topic and share your opinions in discussions, pull requests and essentially at any opportunity you get!

Having base knowledge in a wide variety of areas, and developing depth in some specific areas is commonly known as having T-shaped skills. As a new engineer, you’re generally feeling different areas out, but as your skills develop you’ll start to find areas to develop technical depth and as people come to you with questions, you’ll start to widen your impact.

## Make things happen

I’ve met so many people in life with great ideas but lack the motivation to actually make them happen. I refuse to be one of those people! You’ve probably had ideas yourself of things that could be improved or potential solutions to problems. Act. On. Them. I had to force myself to push through the “I don’t know what I’m talking about barriers” and I still need to on a regular basis. So, even if you aren’t the person to do the actual change, make your thoughts known and make things better.
I’m essentially talking about being **proactive**.

### proactive - adjective

1. (of a person or action) creating or controlling a situation rather than just responding to it after it has happened.

I found this a pretty big mental shift, especially as a technical lead. As an engineer you can spend time picking off a to do list of tasks that someone somewhere in the company has decided is important. When you become more senior, people look to you to make those decisions!

You can only really prepare yourself for this is by doing it. Keep an eye out for opportunities that support the growth of your colleagues and see if you can work on it on the side of your normal role.

As an example, I did a 12 month graduate scheme at Marks and Spencer. I was one of nine engineers hired as a graduate software engineer, and we were distributed around the company. Some of the teams were iOS, Android, APIs and I worked on the front-end team. I was super nosey and wanted to know what others were working on around the business. I also wanted to learn a bit more about how the other teams in the business worked. I organised what I called a “Grad show and tell” where the nine of us would get together and share what we’d been working on. It was super low pressure because there were no senior people in the room and I got to see how my fellow grads were building things in Java, Swift and Python. We learned from each other and went away with wider knowledge about what was happening in other parts of the business. This is a small-scale example, but I saw an opportunity and then I made it happen.

You can apply this idea to lots of things. Generally, it’s about influence. You need to show that the thing you want to do is a good idea so you’ll need to consider how you’ll get people on board.

When I was offered an internal role outside of my grad scheme, I really put this into practice when asked for a pay increase. I gathered a bunch of data about current salaries in London for an engineer and asked for feedback from my team, so I could prove that I was at the mid-level I hoped I was. My influencing tactic was completely data-driven so when I walked into the meeting I booked with the director of the department, I only had to show him all my evidence and he agreed to the salary I wanted! This also had the benefit of bumping up salaries of my colleagues that would also be starting in similar roles.

Public speaking is another great way to widen your impact in the external tech community. You’re sharing your opinion in a very visible way with people from other companies. Not only is speaking great advertisement for the company you work for, but it can be great exposure for you personally. If you have a topic idea that not many people speak about or have a unique perspective on a popular topic, conferences and meetups will always want you.

When I say “Make it happen” I mean take the lead and do the work to improve things for your team, your department, your company and even the wider tech community. Whether that is making a refactor to make building features easier or giving an external talk to help with hiring, it’s all worth it 😊.

---

Focusing on these areas generally makes work life better for everyone you work with, as well as helping you build those skills that will help you to climb the so-called “career ladder.”

---

This post is a written and updated version of a section from my talk [Junior.next()](https://www.youtube.com/watch?v=6sVRVCAcNh8). Over the upcoming weeks I also plan to write about the other parts of the talk too :)


When you stretch yourself and work outside of your comfort zone, you lay the groundwork for future returns. That’s essentially how things have worked for me so far.

Stretching yourself as a new engineer


So, I don’t mean this to sound cringey, because it sounds cringey in my head, but I think stretching yourself and setting stretch goals in your tech career is so important. When I first started out as a software engineer my aim was to say yes to everything.

- “Tara you’ll need to learn Angular” — cool
- “Tara can you fix this bug?” — I’ll give it a go
- “Build a pattern library” — erm sure?
- “Tara can you present the project to our stakeholders” — wait, what?!

I’d like to say I stretched myself within reason, but I didn’t, I had no social life (not that I could afford one) and regularly took work home with me so I could learn more and get more done (that wasn’t healthy and I do not recommend giving your employers your free labour 👀).

When you stretch yourself and work outside of your comfort zone, you lay the groundwork for future returns. That’s essentially how things have worked for me so far. In this industry that is constantly evolving, it is impossible to get to the point where you know everything. I feel uncomfortable when I come across things I don’t know, and when I feel uncomfortable I stop talking.

My biggest challenge in my career has been my ability to communicate well. If you know me you know that I speak quietly and rarely. I naturally speak when I feel like I have something “correct” or important to say. At school I didn’t speak at all 🙈. Every parents evening, my teacher would tell my parents how shy and quiet I was and that I needed to “speak up”. I still haven’t been able to get rid of that feedback 🙃.

I’ve personally worked on it by stretching myself in a bunch of different ways which has helped me immensely. Looking back, there were some key things I did along the way.

## Figure out your limits

There is such a thing as stretching too far. Sure, you want to develop your skills, but not at the expense of feeling stressed, exhausted and burned out.

This diagram visualises it well, the smallest zone is the comfort zone. When you’re in the comfort zone you feel relaxed and safe, sometimes even a bit bored. When you come out into the stretch zone though, you start to feel challenged in a way that helps you develop. It’s exciting, but can also have you feeling vulnerable and nervous! This is the sweet spot for learning new things or taking new approaches. To people smarter than I am, this is also known as the [zone of proximal development](https://youtu.be/0JyFHYzpX7g?t=88).

Outside of the stretch zone is the panic zone. If you find yourself in the panic zone, you’ve gone a step too far. Work here is too difficult and you get stressed out. This is where learning stops happening. Sometimes, all you need to do is imagine yourself doing the activity, and it’s enough to trigger a response in your body which freaks you out. Listen to your body, it knows what’s best.

Things don’t stay in the same zone forever. As you grow and develop, your comfort zone grows and things that were in your panic zone move into your stretch zone.

## Set your goals

Now you know where the sweet spot is for the level of goal you should set, it’s time to start setting them. If you’ve already got goals in mind or things you want to achieve, then there isn’t much work to do here, I already knew I wanted to improve my communication. I also wanted to practice speaking and get better at inputting into conversations. On top of this, I also had a whole heap of other things I wanted to work on but there is only so much I can focus on at once!

If you’re not so sure though take a look at some career development frameworks. Ideally one from the company you work in, but if they don’t have one, there are other companies that share theirs publicly. I did a simple search and found ones by [Spotify](https://labs.spotify.com/2016/02/15/spotify-technology-career-steps/), [Medium](https://medium.com/s/engineering-growth-framework/engineering-growth-tracks-b1fad620787e) and [GitLab](https://about.gitlab.com/handbook/engineering/career-development/career-matrix.html). Scan through the kind of things they want from their employees and see if there are things you want to get better at or things that will make you more valuable at your company. Remember to set them within your stretch zone!

## Share your goals!

This is the most important step if you ask me. There is something about being accountable to someone that makes me get stuff done. I tend to share my goals with my line manager, in the hope that they’ll be able to help me find useful opportunities to achieve them. If you don’t think your line manager is the best person to share them with you could share them with anyone else — friends, family or even Twitter 👀.

When I was on my graduate scheme I worked with my line manager to set objectives for my goals around communication, he suggested I present something I had recently learned at an all-hands meeting. In this case I’d just learned about ES2015 updates, so I gave a very reluctant and awkward talk about the updates that I liked the sound of vs. the ones I couldn’t get my head around. It was reeeally out of my comfort zone, but a good first step into improving my speaking skills.

He also encouraged me to consider giving an external talk, but I really didn’t think I had anything worth sharing. He taught me that we really don’t hear much from junior engineers, but they have a very unique perspective that people should be reminded of. After a year or so of thinking about it and hyping myself up I eventually did it 🙈 and my Junior.next() talk was born which went down well at a bunch of events 💃🏾

Whether your goal is around getting better at coding, teaching or communication. Set your stretch goals, share them with as many people as possible and achieve them! 🎉

---

I gave a talk called [Junior.next()](https://www.youtube.com/watch?v=6sVRVCAcNh8) at a few different events. This is a written version of a section in that talk. Over the upcoming weeks I also plan to write about all the other parts too :)


In my attempt to write more in 2020, I want to start by looking back and reflecting over 2019.

2019 in review


In my attempt to write more in 2020, I want to start by looking back and reflecting over 2019. In 2018 I enjoyed a busy year of travel, speaking and breaking out of my comfort zone in my day to day work. After the whirlwind of that year, 2019 was about dialling back and enjoying life outside of work, I really needed to recuperate 😅

## FutureLearn

At FutureLearn I moved teams, twice. I’d spent about a year and a half working in a consumer focused team. We worked on features aimed at helping our learners to find the right course for their needs and find them quickly. As much as I loved this team, I also wanted to try something new and learn different skills. In March I moved to a team focused on learning and course creation which was a great opportunity to flex my React muscles some more 😁

It was in that team that I got the opportunity to take on an interim tech lead role while our tech lead went away on paternity leave. I had never had an official “leadership” role before and I didn’t actually see myself as leader 👀 but this was a great chance to try before you buy 😂

Being an interim tech lead was an eye opening 2 months of working a whole bunch of skills that I had barely used before. And, as someone who doesn’t like being bad at anything, I jumped at the opportunity to be a tech lead for realsies in a new product team continuing to grow those skills 🎉.

I ended the year as a tech lead for the scalable platform team with the aim of removing barriers to delivery for product teams. They’re an amazingly skilled team that I love. I worked on infrastructure for the first time ever and we’ve made a number of changes to the platform already that have improved the lives of other engineers in the tech team.

## Speaking

I dialled back hugely on the speaking in 2019. I rinsed my Junior.next() talk in 2018 and learned that even with the same talk, speaking takes a lot of work. In 2019 I spoke at 3 conferences and 2 meetups:

- At You Got This conference I gave my [Junior.next()](https://2019.yougotthis.io/tara) talk about progressing in your career as a new engineer and how senior engineers can better support them.
- I went to the stunning Verona for JS Day and spoke about using [webpack to streamline your code](https://www.youtube.com/watch?v=fPjJW_34W84).
- I teamed up with my colleague [Sam](https://twitter.com/wannabefro) at [London JS](https://www.meetup.com/London-JavaScript-Community/events/262991721/) to talk about the grief we went through to move from jQuery to React at FutureLearn.
- Towards the end of the year I gave my first ever keynote at ITNEXT Summit. I talked about [learning together](https://www.itnextsummit.com/sprekers/tara-ojo/) in the workplace as a way to upskill and keep everyone on the same page. I also gave this talk at [Front-end London](https://www.youtube.com/watch?v=ur1Wn7wAA3E) about a month before.

Although I did less external talks, I was still doing internal talks at FutureLearn at things like sprint reviews and learning hours. I’m not sure if I actually dialled back that much on this front 🙈

## Conferences

The best way to go to a conference is definitely as a speaker, mainly for the royal treatment! Though, I went to 3 conferences in 2019 that I was really excited about:

- The first was the [Christian Leadership Conference](https://www.leadershipconference.org.uk/) by Alpha at the stunning Royal Albert Hall. I have never left a conference so inspired and rejuvenated. It was great to go to a conference that was not about tech but helping and supporting people in their everyday lives.
- I also bagged a free ticket to the [Lead Developer](https://theleaddeveloper.com/) conference in London, which after speaking the previous year I couldn’t miss! The speakers are always great.
- The [BYP Conference](https://www.bypconference.com/22) was its first year running. The conference was aimed at black young leaders to network and learn skills from prominent leaders. It was an epic event.

> “Whenever I feel like I’m somewhere I shouldn’t be, I know it’s somewhere I should be, as I have something different to add to the conversation” — BYP Conference panelist


## Other cool things

- I was on a podcast! [Quadrithm](https://quadrithm.co.uk/) are an agency and I went to uni with some of the founders. I was a guest on their podcast [talking about my career](https://open.spotify.com/episode/3Vzs4oybWUJTr0h30LtWwb?si=aKRa4qnxTFuMy4tMR-Nrcg) and progression into tech.
- I joined the first Lead Developer CFP review committee and helped review talks for the Lead Dev Berlin. I also chose the speakers for the JS track of ITNEXT Summit, as one of their conference chairs. Both were great chances to get a view of the hundreds of CFPs that come in and understand what makes some stand out over others.
- I did some MCing, I was extra nervous about this as I’m not the most confident when it comes to impromptu talking. But, I MC’d the JS track at ITNEXT Summit and it went ok!
- I moved house, again 🙃

## 2020

I’m not sure what 2020 holds yet as I have no concrete plans. What I do know is that I want to get better as a leader and a software engineer. And, I want to travel, but for a holiday, not just for a speaking event!

Thanks to Ire Aderinokun for the [blog post idea](https://medium.com/@ireade/2019-59e4aeb13651) :)
