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

2022 has simultaneously been both my most productive and unproductive year at the same time.

2022 in review


2022 has simultaneously been both my most productive and unproductive year at the same time, which really doesn’t make sense. But, I say that because my definition of what it means to be productive and making progress is changing. It used to be solely career focused, for example, how much tech knowledge am I learning? Am I working towards promotion? Is my personal brand growing? How many people am I helping? That was fine, but there was a whole area of my life that it didn’t include. The “life” part of the sought after “work/life balance”. This year life became my main priority and work and work related interests took a back seat.

I’ve been trying not to feel guilty about this, but I have spent so many years focused on growing my career that it’s been pretty difficult to put it on pause. It’s like seeing an F1 car whizzing around a track at 200mph on its way to their first win and saying wait, pause for a second, why don’t you focus on this other thing while every other driver passes them. But, it was necessary. In an ideal world, work would be a means to an end, not my whole identity. Even though I have fewer tech related milestones to talk about this year, in reality that’s actually a good thing.

## Work

**I got promoted!** In 2021 I left the Financial Times and joined Google Health, I now work on a [product for Clinicians](https://health.google/caregivers/care-studio/). I got to go on my first ever business trip to San Francisco where many of my colleagues are based. I visited the HQ in Mountain View and a bunch of the new offices they’ve just built out there.

One of the coolest projects I got to work on was part of the Black Googler Network. We ran our annual hackathon and invited students from across the UK to join, and win prizes. Around 40 students came to the offices, worked all weekend to design and create their ideas and they presented them to a panel of judges who are senior leaders at Google. One of them was an angel investor that wanted to invest in the winning team’s idea because he thought it could be a great business.

## Speaking

**I was on a podcast!** My public speaking this year was almost non-existent, but I was invited by the lovely Glowing in tech team to talk about a range of tech topics. I also spoke at a school for their careers day about what it’s like to be a Software Engineer, which I often get invited to do and love doing.

## Writing

**Meh?** Honestly this has been my biggest fail! I’ve had a draft article in progress since October 2021, but could I bring myself to finish it and post? No. But, 2023 is the year. I’ve already put in place lots of dedicated time to focus on writing and sharing what I’ve been learning, starting with this review of the year! I’m looking forward to doing this more.

## Teaching

**Also meh?** I would love to get back into teaching, but since my role as a bootcamp instructor for the Black Codher bootcamp finished, I haven’t made the time. I met some previous students at Google and it’s so cool to see the girls I taught progressing in their new tech roles and say they remembered what I taught them 🥲. I would love to do this more. I have taken on some mentees and have been flexing my mentoring muscles. Though, this is a skill I definitely need to get better at!

## Life

**I became a wife!** Planning a wedding is something I would very happily never do again, but maybe it improved my project management skills? In hindsight a small, intimate (and cheaper) wedding would have been the way to go.

We also moved into our own place, so it was the double whammy of life updates, getting married and moving house, within the space of a few months was pretty stressful.

## Other cool things

**I travelled!** All cancelled trips were back on and as well as my work trip to America, I had a beautiful honeymoon in Santorini and also visited Paris and Barcelona. I went to so many weddings (Love is sweet o!). And I really enjoyed the Google perks. The Black Googler Network had a cool party to celebrate Black History Month with Stonebwoy and Adekunle Gold, and the tech Christmas party was probably one of the biggest parties I’ve ever been too.

## 2023

This year I’ve relaxed my goals. I still have them but they are higher level instead of the detailed goals I’ve had in previous years. I want to see where God takes me. I did set a word for the year inspired by a show I watched recently — my word is **“growth”**. I want to see growth in all dimensions, spiritually, mentally, physically, career wise, health wise, marriage, everything. Let’s see what this year brings. God willing, it will be another great one.

Sometimes life takes over and you just have to go with it. I’m honestly so glad I did. 2022 has been amazing.

Twelve months ago, in the midst of COVID-19, lockdowns, quarantining and social distancing, I was one of many people to start a new job

One year later — Lessons learned from remote onboarding


Twelve months ago, in the midst of COVID-19, lockdowns, quarantining and social distancing, I was one of many people to start a new job. I joined the FT in April last year, about a month after the first lockdown started in the UK. I’ve not yet met my team and I only know some people in the company solely by their Slack profile picture / cartoon character!

The FT like most other companies had to quickly switch to remote everything, including figuring out remote onboarding on-the-go. Time has somehow flown by, but also felt incredibly slow moving, and while compulsory remote working started out as a novelty, it has now become our new normal. After 12 months at the FT and over 12 months of remote working it seems like a good time to reflect on what I have learned through the experience…

## 1. Be intentional about networking and meeting new people

I always knew that working remotely would make meeting people more difficult, I wouldn’t get the impromptu moments of bumping into someone in the coffee area or sitting next to someone new in a company meeting. Onboarding at home definitely hindered my opportunities to quickly develop working relationships.

In my first few weeks, meetings were scheduled for me with each member of my new team, which was a great way to be introduced to the people I would be working with day-to-day. Continuing this momentum was difficult though, especially when the only opportunities to talk to people were in more “official” team meetings so I didn’t have much non-work chat which, let’s be honest, makes work a lot more enjoyable! Some of my interviewers also messaged to welcome me to the FT, they were the only people I knew when I started so it was nice to have them reach out during my first few days/weeks.

In my previous role I had already built relationships with work colleagues over years and I had a good handle on the work I was doing! No longer having this in a new company felt pretty isolating. But, it forced me to be extra intentional about finding ways to develop those working relationships, so I reached out to people individually when there was a non-awkward reason to do so! It definitely helps to know more people across the company.

I wasn’t the only person in the new starter boat though, there were a few initiatives that started across our group and department to give us all the opportunity to connect informally. There was already a company wide coffee roulette Slack group that randomly pairs you with someone else to have a catch-up with. This is a great chance to meet people across the business, though it was a big group for me as I mainly wanted to meet others in my department to start with. We also tried a more manual smaller version within our Customer Products group which worked well until we had logistical challenges keeping the random pairings going!

I felt the most welcomed when I was invited to a small Slack group for random chats and hype, though, this relies heavily on some friendly colleagues making the effort to include you in a group!

## 2. Great onboarding is massively underrated

Working from home has been a good test of the onboarding process for a lot of companies! If you don’t have many new people, you may not consider the importance your onboarding process can make to a new starter. When you’re not working remotely you can get away with a lot by just showing a new person around the office and introducing them to lots of people in the space of a few minutes. On the other hand, working remotely means trying to find the right balance between ensuring your new starter is supported and not overwhelming them with video call fatigue.

After going through the onboarding process myself I was interested in working on the FT’s onboarding process, so I started the work to do this with help from other new starters at the time. My colleague, Jenn and I ran an onboarding retro for recent starters and their buddies to get an idea of what worked and where there was still work to be done. There were lots of good things raised like the friendliness of team members, and the useful communication and proactiveness from our Tech Leadership.

On the other side we saw lots of inconsistency with each person’s onboarding experience, some people had great experiences, others didn’t get so much support. Some had been assigned a buddy, while others didn’t realise that was an option. There was also a desire for a learning plan to help get up to speed with our tech stack, tools and best practices quickly.

The retro was a great way to learn straight from the people who have recently gone through the experience. The first thing it prompted was a new process to be introduced so we could get some consistency across the group. We crowd sourced ideas and created a Trello board template for each new starter. The board has a number of cards with tasks to be completed over their first 6 months. We also created a similar one for Line Managers, Tech Leads, Delivery Managers and Buddies to collaborate on, so they can ensure they’ve got everything ready for their new starter before they join.

We’ve already had a bunch of great feedback from introducing a more formal process but still plan to address more of the feedback from the initial retro and keep iterating on this process.

## 3. Be kind to myself

I’ve seen many people say that remote working under normal circumstances is very different to remote working in a pandemic. I’ve only experienced the latter so I can’t comment on how true that statement is, but I can say that working during a worldwide pandemic has not been normal. I’m usually pretty organised when it comes to career development and jumping on new opportunities with the aim to grow my skills and meet my career goals. I expected to be doing the same after a few months of settling in and getting to know how things work at the FT. In hindsight, this was ridiculous thinking.

Work did become a welcome distraction from the likes of Covid, Black Lives Matter protests and SARS protests, but all these were still having an effect on my mental health and I needed to look after that. Fortunately, the FT leadership was clear that they didn’t have the same delivery expectations from us in these “unprecedented” times and we still celebrated the milestones we did achieve which was encouraging.

What I did end up doing was being more flexible with my working hours, starting later in the morning sometimes and starting earlier in the morning other days and taking some opportunities to work in my PJs, in bed. The extra wellness days the FT have provided have also been valuable for extra downtime.

We’ve all had similar experiences over the last year and there is something quite humbling about us all being in the same bubble of talking on mute, talking while not on mute, children joining meetings, doorbells ringing and video call fatigue. But, it’s still been a year of learning and I’ve been grateful for that!

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>

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

A Tech Lead is a software engineer responsible for leading a team and alignment of the technical direction

Technical Leadership in Customer Products at the FT


> “A Tech Lead is a software engineer responsible for leading a team and alignment of the technical direction” — Pat Kua [1](https://www.patkua.com/blog/the-definition-of-a-tech-lead/).

While this is a useful high-level definition of the Tech Lead role, it’s not very specific to an actual business. You’ll find that technical leadership roles vary greatly between companies and even departments within the same companies. So, as someone who is fairly new to The Financial Times I wanted to better understand what the Tech Lead role looks like here, especially in the Customer Products group that I’m a part of, to see if it could be a good fit for the future me 🙂.

To do this, I went straight to the people that are doing the job currently, some of the Tech Leads in Customer Products, and got lots of great insight into how they lead their teams. I quickly started to understand some of the main themes between their roles, as well as some of the tasks that were unique to their individual teams. I see these themes fitting into four categories, our Tech Leads are:

1. Advocates for their team members
1. Responsible for technical direction
1. The technical representative for the team
1. Software Engineers

## Advocates for their team members

This came across the biggest and most important responsibility for each of the tech leads I spoke to, which makes sense as it fits into the leadership part of the role. As I understand it, being an advocate for your team members can include a number of tasks, such as:

- Finding and creating growth opportunities
- Providing general support
- Championing their achievements
- Ensuring a safe environment for them to learn and grow
- Shielding them from outside pressure (when completely necessary)
- Being honest with them

James, the Tech Lead for the US Growth team, shared the benefits of having one-to-ones with each team member. James uses this as an opportunity to understand how each person is doing and a way to find out what they need. This can help with a bunch of the areas in the above list, and I’ve personally found it useful with Tech Leads I’ve worked with to develop rapport and build that working relationship.

Tech Leads have a good oversight of all of the different tasks happening within the team as well as the interesting initiatives happening at the wider programme level. This puts them in a great position to find opportunities to help the personal growth areas of each team member. Rowan, the Tech Lead for the apps team, mentioned that this could include delegation of Tech Lead responsibilities for those wanting to develop their leadership skills, and this would also work just as well for non-leadership specific skills like programming and communication.

Glynn, the Tech Lead of the Content Innovation team, talked me through the importance of ensuring psychological safety in this team. This is around making sure that team members know that they won’t be punished if they make a mistake and that they can be their authentic selves at work, which is essential for any team to perform well. Part of the Tech Lead role is to make sure people are comfortable sharing their thoughts and concerns so we can get the best out of them, enabling them to build better products.

Also, as part of my chat with Rowan, we discussed the interesting topic of protecting team members from outside pressures and company politics. Rowan has learned that it can actually be a good thing to allow team members to see some of those pressures. It can give them exposure to the realities of the role, and can also be another career development opportunity. It reminded me of a great talk at a Lead Dev conference I went to. Nickolas Means gave the talk called [Eiffel’s Tower](https://www.youtube.com/watch?v=RNGZTkM2xOU), in this talk it was noted that the common take on leadership has been to protect your engineers from all external pressures and act as the “poop” umbrella (💩☂️). While this has benefits, your team can become disconnected from the goals of the company which is useful for their role. Nickolas instead introduced the idea of the Heat Shield (🔥🛡) usually used in space. The heat shield doesn’t completely stop heat from coming through, but it shields enough heat to keep you alive. As a lead, you shouldn’t be the barrier between your team and the business, but instead you should let some of the heat in and block the really big fires that happen in your organisation!

## Responsible for tech decisions and direction

Depending on the company and department you’re in, the responsibility of deciding the tech direction and making the decisions isn’t always on the Tech Lead. Sometimes this sits with a Technical Architect or a Principal Engineer. Here, in Customer Products a lot of this work is the responsibility of a Tech Lead, although for much larger cross-team changes the Principal Engineers will also be responsible.

Nick, the Tech Lead for the Acquisitions team, shared how autonomous the teams are. Each team is trusted to make the best decisions for their team, giving them the freedom to choose how they work. Tech Leads aren’t left alone to do this, they have regular catch-ups with other Tech Leads and Principal Engineers in the group to discuss these kinds of decisions, especially where it could benefit or impact other teams.

While Tech Leads regularly meet as a group to share information, many of the Tech Leads also regularly catch-up with the Product Manager and Delivery Manager within their team. This is what Rowan shared as the three amigos approach to team leadership, where, in our case, there is a representative from Product, Tech and Delivery. This can include deciding the next big thing to work on, discussing priorities for the next sprint and generally combining the interests of Product, Delivery and Tech. Practically, Tech Leads will be involved in roadmapping, providing estimates, and setting OKRs for the team. This is also a big part of Jen’s role as the Tech Lead for the Ops Cops team, which has a slightly different setup. Ops Cops is responsible for handling incidents that arise across the Customer Products tech estate and has rotating team members each week. This team doesn’t have a dedicated Product Manager so the prioritisation tasks and general management of what the team works on is all part of Jen’s role.

One of the things I learned from James was the importance of knowing how you’ll measure success for the work the team plans to do. Before starting work on any new project or task, we should be able to know afterwards if that change was beneficial. This is all discussed as part of the three amigos meetings.

## The Technical Representative for the team

Umberto, the Tech Lead for the Content Discovery team, and Rowan both shared how Tech Leads are naturally the point of contact for technical questions. Fielding a wide variety of questions from external stakeholders, being the tech representative present in meetings, and sharing thoughts on things like technical feasibility are all responsibilities that will fall to the Tech Lead. Since they have the official title it makes sense to reach out to the lead if you have a general tech question. Being the technical representative also includes answering questions from within the team; engineers tend to go straight to the Tech Lead with areas they need clarification on.

On the flip side, it’s also up to the Tech Lead to surface technical risks to the stakeholders. Tatiana, Tech Lead for the Accounts team, shared the importance of ensuring stakeholders understand the risks of unmaintained tech to the users.

These areas are great opportunities to start delegating parts of the Tech Lead responsibility to others in the team, which is what Glynn does in the Content Innovation team. This gives people development opportunities and lessens the load on the Tech Lead.

As a Tech Lead you automatically have a bigger impact in the company given the nature of the role, this was something I talked to Glynn about. Tech Leads are the team representative in regular tech lead catch-ups, and are involved in larger tech strategy conversations which is a good opportunity to have a say in making things better for the product, our readers, and also the people we work with.

## A Software Engineer

And finally, the thing that seems the smallest, but is still an important part of the Tech Lead role. While being a Tech Lead is about leading a group of engineers, you are still a software engineer. So, writing code, keeping up-to-date with new technologies, pairing with your team members and generally delivering software are still part of the Tech Lead role. Almost everyone I spoke to wished they had more time to spend on this!

One of the big differences in going from a Software Engineer role to a Tech Lead is that big reduction in how much time you’re able to spend writing code and figuring out problems by yourself. James spends a good chunk of time pairing with team members, giving advice on code and reviewing PRs; these are the tasks of many software engineers, but they are also leadership tasks. Similarly, Umberto talked about spending time reviewing PRs as a great way to get team members unblocked. This is actually one of our [Tech Principles](https://www.ft.com/tech-principles) at the FT, we treat unblocking others as our priority.

## But, what are the differences?

I’ve shared a lot about the similarities of the Tech Lead role between teams after talking to these Tech Leads, but there were differences. This is mainly because of the differences in what each team is responsible for. The Ops Cops team does a lot less stakeholder management, so Jen, unlike many of the other leads, also does product management, making sure work is clear, divided up and ready to be picked up by rotating team members. The Content Discovery team is the opposite of this and a lot of work is done with the Editorial team which takes time away from other tasks like fleshing out stories to be picked up by the team.

Also, I learned from Glynn that each Tech Lead leans on their own personal strengths; if they are naturally inclined to support other engineers then it’s easy to spend a big chunk of your role doing that, otherwise if you’re great at handling stakeholders then that can become the priority. Either way there is a lot of opportunity to make the role something that suits you, while incorporating the four themes I outlined.

---

It was really interesting to hear everyone’s experiences of being a Tech Lead in Customer Products. Learning about the role from each person’s perspective made the idea of being a Tech Lead here a lot less daunting! Advocating for team members, ensuring they get personal development opportunities and celebrating their achievements, is definitely a part of the role that appeals to me, though, I don’t need to be a Tech Lead to do that part!

On the other hand, I would benefit from getting more opportunities to make decisions about technical direction. Or, work with a Tech Lead as they go through the process of doing this for their team. I think this would put me in a better position to do this role effectively.

So, is the Tech Lead role a good fit for the future me? I think it could be…

---

Thanks to all of the amazing Tech Leads across customer products for taking the time to share their experiences with me!

---

[1](https://www.patkua.com/blog/the-definition-of-a-tech-lead/) The Definition of a Tech Lead — Pat Kua

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) :)
