DEV Community: Benjamin Walsh

11 Lessons Learned From Losing A Job

Benjamin Walsh — Wed, 09 Sep 2020 00:00:00 +0000

So in November 2019 I lost my job. Without warning or reason. And it hit me like a tonne of bricks. 🧱

I'd delivered everything expected of me, built a great team, and increased conversion rates for the business. In 1:1s with my manager I was always showered with praise.

I thought I was safe, even my manager thought I was safe. We were wrong and I was out on my ass.

I spent the best part of three months before I landed my next role, and here are the lessons I learned and some tips that might help you out too.

1. Start looking right away

I made the mistake of taking a month to relax before I started my job search. Under contract I couldn't take another job until a month after my period of garden leave, or the company could refuse to pay me.

I chose to spend that time feeling sorry for myself, and I lost a lot of sleep through anxiety. Four weeks in and the novelty of being off work was wearing off.

2. Keep a record of your applications

As time goes on in your job hunt, it's so easy to lose track of who you've spoken to and which roles you've applied for.

This is probably going to come up, recruiters are going to ask you if you have any applications with companies they might already be working with.

What I do is track my applications Google Sheets. I include information like salary, location, status, date, link to the job spec, and the recruiters information.

Here's a copy of my spreadsheet to help save you a little time. View Spreadsheet

3. Some jobs don't exist

I used LinkedIn, Reed and Indeed for most of my job searching. And between them there's a lot of duplication. Keeping track of the job descriptions helps prevent applying for the same role twice.

Though what I didn't realise is often I would see roles that didn't exist. Roles priced above market rate and in very specific areas of Salford seemed too good to be true!

They were.

When contacting the agency responsible for posting, I never got a callback. The jobs are duplicated, by different agents all working for the same company. I can only imagine that it's some of of technique to boost their listing numbers? 🤷‍♂️

4. Apply for your dream job

You've got nothing to lose by doing that. I found that many of the applications I completed for bigger companies asked probing questions. Those were great for helpings me answer other applications much more easily. See point 5.

Reach out to people you already follow on Twitter or LinkedIn. Sell yourself, use the template in point 7 as a guide to help if you need to. Tell them what value you can bring to their company.

5. Document your application questions and answers

After you submit an application, you don't tend to get a copy of what you submitted. If you get to the next stage interview it's almost certain that you'll get asked about your application answers.

Having a copy of exactly what you wrote will be invaluable. And you may even need to answer similar questions on other applications, so work smart not hard. 🤓

6. Have a cover letter prepared

Cover letters seem like a complete burden. Especially when you're regurgitating the same information that's available on your CV.

But the thing is, they often work. Recruiters and hiring managers don't often have time to read every CV front to back. By spelling out why we're a great candidate for a role, you're chance of being considered is higher.

Bonus points for using plain language, and getting your personality across.

7. Have a summary ready for recruiters

What I found worked well for getting recruiters to notice me was making their job easy.

By summarising the information relevant to a position, I was giving them every incentive possible to contact me.

For a role as Senior Engineering Manager at an ecommerce company I emailed the recruiter the following.

Hi [Recruiter],

I'm interested in the position as Senior Engineering Manager you posted on LinkedIn.

Summary of my experience:

- 14 years working with JavaScript, Vue, and Angular.
- 8 years managing and mentoring teams of developers and designers.
- 10 years of my career spent in ecommerce.
- I specialise in web performance and accessibility.
- Also been a designer for a very long time.

Summary of me:
- I built the new app form in Vue that increased conversion rates by 20%.
- I was made redundant in November and I'm available immediately.
- My favourite part of my job is mentoring people, especially developers.

I'm currently interviewing for other roles with:
- Company 2
- Company 3
- Company 4

If my experience sounds like it could be a good fit for the role, please get in touch.

I've attached my CV and my website benjaminwalsh.co.uk has examples of my work too.

Thanks
Ben
[Mobile Number Here]

8. Some recruiters are awful

While most of my conversations with recruiters were very positive, there was one common trait that frustrated me the most.

Ghosting 👻

It seems that the moment a recruiter knows you're no longer on the short-list for a role, they forget you exist.

9 out of 10 times I'd get rejected without even knowing about it. Having chased the recruiter about the role, I'd get radio silence.

Not cool.

9. Prepare for coding challenges

In my experience live coding challenges aren't a realistic way to assess a developer. They don't show you how an engineer will actually work on the tasks you give them on the job. What they're like as a person, and exclude many who don't do well with anxiety inducing conditions. 🙋‍♂️

Many of the roles I applied for did this anyway. Because even though it's not perfect, it does give the hiring manager some kind of benchmark of technical skill.

So get prepared, there's a lot of resources available on preparing for these online, far too many to mention here.

One of the better experiences I had was at MoneySuperMarket. They gave me a task and a laptop, then allowed me to work how I felt most comfortable to complete their challenge.

So I was able to work without feeling under too much pressure. And nobody was looking over my shoulder at me Googling things. I'm a developer, not an encyclopedia, and there's no shame in that.

10. Build a financial buffer

My family was lucky. Until October 2019 both my partner and I has been working in full time work.

This allowed us to save a good amount for renovating our gardens front and back, but I'm glad we'd not touched it, otherwise we'd have been borrowing money.

As soon as the money stopped coming in. We knew we'd need to use that to keep up with our mortgage payments and bills. And as it's taken me this long to find the right job, you know I'll be making sure to protect myself against this happening in future.

This comes from a position of privilege and I know for many this is an impossibility.

If you're struggling to get into a position where you have 3-6 months worth of finances set aside. Please consider speaking to professional debt management organisation or financial planner.

11. Keep your CV / portfolio updated

I'm so bad at doing this. I always leave things way too late and it makes it difficult to even remember what I've done let alone piece together some good examples of my work.

A good manager will encourage you to keep these up-to-date and might allow you some time to do that. Either way make sure it happens, you won't regret doing so when you actually need it!

Heck, set a reminder to do this often, shouldn't consume too much time but will pay off in the future.

Feedback

Have you had a similar experience? Have I missed anything important? Let me know on twitter, or comment below 👍

Good luck finding your next role!

Dark Mode, why and how.

Benjamin Walsh — Fri, 27 Dec 2019 15:33:45 +0000

To make your product stand out from the competition you've got to go above and beyond to impress your users, so that they become customers.

Background

I'm an advocate for progressive enhancement so I believe it's important that we deliver the best possible experience to users. And recently the web has got some superpowers to help us do this in new ways. And by super powers, I mean new CSS media queries for user preferences.

@media (prefers-color-scheme: dark){}
@media (prefers-reduced-motion: reduced){}

Right now these media queries work in around 80% of all browsers which is great. Source - caniuse.com So for dark mode we need to focus on the first, colour scheme.

Prefers Color Scheme

The prefers color scheme media query takes its configuration from the users operating system settings. So that if, as a user, you prefer darker UIs, websites can make adjustments to their designs to respect that.

Adam Argyle did a great job covering off how this works and why we'd use these media queries at the 2019 Chrome Dev Summit.

Here's the video, I'd recommend you watch the whole thing, but if you're only interested in the new media queries jump to 4:10, or skip to the next section below.

Coming soon

There's a bunch of new user preferences that are coming to the web that will fundamentally shift the way web design is done.

@media (prefers-contrast: high){}
@media (prefers-reduced-transparency: reduced){}
@media (forced-colors: high){}
@media (light-level: dim){}

With these new settings, it will be possible to combine user preference settings to deliver the absolute optimum design for our individual users.

Tweaking text contrast levels based on the current light level, respecting a user choice to use specific colours for links, removing transparency effects when they are causing a distraction or performance issues on low end devices... the list goes on. Really exciting stuff!

Who wants Dark Mode

5% of users were already configured and ready

We started tracking the number of users using dark mode when browsing the website. We did this using a custom script in Google Tag manager that uses matchMedia JavaScript API. We discovered around 5% of users were already configured and ready.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode use recorded
}

Knowing that support for the prefers-colour-scheme media query is going to grow we decided to lay the foundations for these upcoming user preference styles, and bake them directly into the way the website CSS is written.

CSS Custom properties are available in all browsers that support these media queries, so we can leverage these to progressively enhance for any user pretty easily.

We approached this by using our existing design system colours, and building on the available palette with new variations to reduce saturation and tint where needed.

Then when applying styles we used CSS custom properties as the primary setting for the colour, but also back that up with the SASS variable too, like this example on the body tag.


$white:             #ffffff;
$chrome:            #f2f2f2;
$dark-chrome:       #4a4a4a;
$jet-black:         #111111;
$pale-purple:       #9387d8;
$electric-purple:   #604dd5;

:root{
    --body-color: #{$white};
    --text-color: #{$dark-chrome};
    --text-color-accent: #{$electric-purple};
}

.dark-mode {
    --body-color: #{$jet-black};
    --text-color: #{$chrome};
    --text-color-accent: #{$pale-purple};
}

body {
  background: $white;
  background: var(--body-color);
}

So when a browser that doesn't support CSS custom properties visits it'll fall back to the default colour set. in this case that's the light colour scheme.

For browsers that do support this code, they'll load the light style by default. but we've specifically avoided the media query in this code, why?

Well I wanted to allow users to toggle the dark theme on and off, so for this example we applying the theme with a class dark-mode on the body and avoiding the media query for now.

Detecting dark mode in Vue

Using the mounted lifecycle in App.vue we can add a function to detect prefers-color-scheme when it's set to dark and apply our class dark-mode to update the CSS custom properties on the body, allowing the cascade to do most of the work.

<script>
export default {
  mounted() {
      const darkMode = window.matchMedia("prefers-color-scheme: dark");
      if(darkMode) {
          document.body.classList.add('dark-mode')
      }
  }
}
</script>

By using a well thought out set of CSS custom properties in our components, this one setting can control the look of the entire page.

Designing for Dark Mode

The main challenge for me here was working out where our current design system didn't give me enough flexibility to do what I needed. I found the need to introduce a few new colours just to make the design work.

Those colours are pale-purple, almost-black, and light-black. And yes naming things is really hard, but we already had a dark gray.

Designing in the browser

Most websites are already designed with a light background, so it's easy to call that your light design, look you're halfway there, kinda.

Now that we can tailor the look of our site to a users preference we can make sure user sees the right design for them.

To start designing my dark mode settings I used the Vue-CLI to build a prototype homepage that included the components we have on the homepage. This gives me a starting point which I can tinker with. Oh and if you hadn't already guessed I'm a big fan of designing in the browser.

if you hadn't already guessed I'm a big fan of designing in the browser.

Here's a snippet of the homepage as it existed at the time. I'd updated the bullet point check marks in line with our design system and hollowed out the check mark.

Swapping out the background and text colours goes a long way to setting the scene here. The primary call to action purple stands out equally well on both colours so no big changes are required there, but I did take the saturation down a little, that change is almost invisible to my eyes when toggling between the themes.

I changed was the header title accent colour. I used a de-saturated tint of the existing purple to prevent clashing with the black background like this... 🤮

Along with toning down the text accent colour, I also added a subtle glow to the car image in the main hero. Now this isn't an optimal solution, but the pngs currently in use across the site were never designed to sit on a dark background so are rough around the edges, literally. This softens the edges a little giving us chance to roll out these changes before updating the imagery over time.

When swapping out the colours using the method detailed above, I started from the darkest colour in the background and used progressively lighter colours in the foreground.

This reverses the way colours are layered currently in the design, as shown here.

Dark mode SVGs

Well you may have noticed in these images that the city scape background didn't change the same way the rest does site. And you're right, it burns me up inside.

I spent some time over the Christmas break to figure out how I can apply my new colours to my SVGs too.

I really wanted to add unique elements for specific themes as that little something extra. Think about it, a moon and stars in dark mode, or perhaps a bird in light mode? A cool way to add a touch of personality into our designs.

I started with the original artwork in Figma and created some color variations I thought might work well.

I toyed with the idea of adding lights that were left on in the foreground buildings but decided that it was too distracting as these are background images. I also found that using these light blue/purple colours on the building made them pop way too much, distracting from the main vehicle image.

I explored plunging them into almost complete darkness and highlighting the outlines instead, as if moonlight was reflecting off the edges of the buildings and leaving only the lights for the skyscrapers in the backgrounds.

Once I'd settled on a scheme I created a series of CSS classes and manually replaced the inline fills in the SVGs with those classes.

Those classes are used for both color and visibility for the paths in the SVGs

.accent {
  fill: #6accb6;
}
.cloud {
  fill: #333333;
}
.dark-mode .cloud {
  fill: #211e28;
}
.skin{
  fill: #ffffff;
}
.foreground {
  fill: #ffffff;
}
.dark-mode .foreground {
  fill: #151416;
}
.foreground-shadow {
  fill: #c9d3ff;
}
.dark-mode .foreground-shadow {
  fill: #101010;
}
.bg-color {
  fill: #edf1fe;
}
.dark-mode .bg-color {
  fill: #211e28;
}
.outline {
  fill: #333333;
}
.dark-mode .outline {
  fill: #4f4c56;
}
.dark-show {
  opacity: 0;
}
.dark-mode .dark-show {
  opacity: 0.5;
}

.dark-hide {
  opacity: 1;
}
.dark-mode .dark-hide {
  opacity: 0;
}

With a bit of live color tweaking in the browser (as I wasn't 100% happy with the outline colour on the buildings) here is the finished result. It's subtle, blends well with the existing colour scheme and still adds plenty of character above the fold.

Live demo

If you want to have a play with the designs in your browser please feel free, the link to the Live demo is here.