DEV Community: Ilesanmi Temitope

Tips to supercharge your job search

Ilesanmi Temitope — Sun, 17 Jul 2022 19:43:48 +0000

Recently, I’ve had to give several people tips on how to improve their job search. Some of these things I’ve always assumed were either common knowledge or just not worth writing about, hence why I have delayed until now.

Trying to find a new job is the ghetto, really. It’s so frustrating and we’ve all been there (unless you’re a trust fund kid and never had to apply for a job, in which case, I’m so jealous of you). There are so many challenges, including:

Finding the right job to apply to. There are thousands of jobs with any google search or on your favourite job platform and you can’t find the ones that match your exact needs
Crafting the right application: “Is my resume perfect?”, “Does this cover letter make any sense?”, “I’ve sent a thousand applications and none of these companies are replying me, why aren’t they replying me? Do they hate me?”. These are just some of the questions you probably ask while sending out applications
And finally, when they do get back to you, you still need to pass the interviews, all of the hundred stages 🤷🏻‍♂️

In this article, we will address the first challenge: finding the right jobs that match what you’re looking for. Before I proceed, in case you’ve already found the perfect job and would like to answer the second question, Dillion Megida has a really good Cover Letter template that I’ve heard is perfect. You can check it out and modify it to suit the job you’re applying for.

Job boards, duh

Well, the first stop on applying for a new job is often job boards. And there are many job boards depending on what you’re looking for. For the sake of brevity, I’ll list some job boards based on what they’re best for:

Looking for a relocation job to the UK: Otta.com seems to be the best option I’ve come across
Looking for a relocation job to Europe: Otta.com, https://relocate.me
Looking for a (usually high paying) remote role at top startups worldwide: https://startup.jobs
For jobs specific to a particular technology, you can find job boards for that tech, such as
https://vuejobs.com/, https://vuetifyjs.com/en/resources/jobs-for-vue/ for VueJs related jobs.
https://reactjobsboard.com/ For ReactJs jobs.
You get the gist, you can find one or more of these websites for your technology. I’ll include a couple more links in the Appendix and you can add others in the comments if you want.

Pro Tip: Even if it’s possible to send applications on these job boards, I’d recommend not doing so. But rather, find the job on the company’s website and apply directly through their recruitment portal. They will monitor their own hiring board, plus you will be able to fill in their requirements as they want it. Some companies hire directly on Otta.com, so in those cases, Otta does make it easier to apply in bulk with a single profile, but asides that, I’ve found that applying on the company’s job portal directly yields better results

In addition, to the above, if you’re applying on Otta, they give you the power to restrict the jobs you see through a bunch of filters. Don’t be afraid to use those filters. Job application is a game of numbers, but at the same time you don’t want to be applying to jobs you don’t stand a chance for, or jobs you might not like if you get them. This applied to all job boards really, don’t be afraid to filter! Make sure the shots you attempt are shots you actually have a chance at making. Otherwise, you’d be wasting precious time, time you could spend applying to jobs that are a better match for you.

Google Search

While searching on dedicated job boards will yield the best results, you might be missing out on other jobs that don’t make it to the popular job boards. For example, if you’re a junior developer, or write a fringe technology like Flutter 👀, you might be finding it difficult to get enough quality jobs to apply to on these job boards. That’s where a well-constructed google search comes in.

You can type in “Frontend developer jobs” on google and you’d get thousands of results. However, our goal is to find jobs that are tailored to our needs. The good news is you can practically tell Google everything you want in a job, using advanced google search filters and you’d get a well filtered result. Now, this isn’t exactly a “Google search tutorial article”, I’m sure you can find hundreds of those online. Rather, I’d give some examples of searches you could be making.

Target recruitment portals.

A google search technique I’ve used a lot is to target recruitment portals that companies often use. These include: lever.co, breezy.hr, greenhouse.io, workable.com (and a lot more, these are just the most popular). What I do is combine all of these into one google search (you can split them if you want) and add a few keywords. The advantage of this is, companies that use these recruitment platforms are typically serious about the recruitment (versus the jobs simply posted on Linkedin or Indeed), because these platforms aren’t free (or cheap, though I don’t know what they cost). Hence, they’re less likely to “air” you, than those who simply post on Linkedin or indeed.

An example Query is:

backend developer (site:lever.co OR site:breezy.hr OR site:workable.com OR site:greenhouse.io)

The query above will only show backend developer jobs that appear on one of those recruitment portals above.
NB: The site:lever.co means “Only show me results from this site lever.co”. The “OR” keyword is used to add multiple conditions, kind of like a logical condition you’d put in an if-else (Nobody told you you’d find coding jobs by coding your google search eh?). Also, see how I grouped all the conditions together in a parentheses, this allows google to separate it from the rest of my query, and not apply the OR to “backend developer” as well.

Add your keywords

(I started this numbered list because numbering things seemed cool, but I’m starting to think it wasn’t a great idea).

Remember when I said “apply filters on job boards”? Well, it’s all the more important here. A google search as you can imagine, will yield lots of results. Including many you don’t need. So add more filters to your search.

WARNING: Too many filters, or an overly complicated query will probably yield zero results. But hey, you can go back and edit it till it gives you what you want. Anyway, here are some examples I’ve used in the past

(junior OR intern) frontend developer (vue OR react OR javascript) (intitle:remote OR intext:remote) -site:linkedin.com -site:totaljobs.com

Okay, ngl, I’ve not used that one before, but it seems like a cool idea. The query above will show results for junior or intern frontend developers, with “remote” in the title or in the body of the page. Adding a “-” before any text will exclude it from the results. So the search above will exclude linkedIn and totaljobs which for personal reasons I find to be annoying places to find jobs. So you can also include (exclude) sites you hate.

backend (Python OR Go OR typescript OR Node) (intext:London OR intitle:London) (site:lever.co OR site:breezy.hr OR workable.com)

This one I’ve definitely used. you can read the query and guess what it searches for.

Additional tip: Surround essential text in quotes to tell google, “whatever you do, this text must be in the result”.

backend (Python OR Go OR typescript OR Node) (intext:London OR intitle:London) (“visa” OR “relocation”) (site:lever.co OR site:breezy.hr OR workable.com)

This query will is the same as the earlier one, except this will only show jobs that specifically mention visa or relocation in their description. I don’t advise using this solely, many companies that sponsor visa might not include it in their description as I’ve found.

Honorable Mention

**Twitter: **You can find just about everything on Twitter if you look hard enough. Applying the right search on twitter will show you some company executives posting their jobs on Twitter

**LinkedIn: **Okay fine, I’ve been dissing LinkedIn all day. But it’s still one of the best sources for job hunting and connecting with recruiters. I wouldn’t use it as my primary source of job hunting (unless you like disappointments), but definitely watch out for Tech leads and C-suite executives with a “hiring” badge and posting about their open positions. You might even be able to cold-DM them to shoot your shot

Indeed, Angel.co, Glassdoor are still great places to look when you’re bored or the intro of your favourite Netflix movie is playing and you need to get out a quick application.

**RIP: Stackoverflow Jobs 😔. **Used to be one of the best resources, but has been killed because it apparently doesn’t make enough money.

What Next

Like we said earlier, you still need to have a great resume, and a great cover letter. I referenced a cool cover letter template you can use above. maybe someday we’ll talk about how to improve your resume, but here are are a few tips before we close:

Use Google docs to create your resume. It’s better than most fancy resume tools out there. Especially if you want an ATS to read your resume well, also you can see your edit history and use that to maintain different versions
Check out resumeworded.com, it’s a tool you can use to analyze your resume and see improvement areas (for free too!)

Until next time, may the force be with you, or whatever.

This post originally appeared in https://medium.com/@psicliffs/tips-to-supercharge-your-job-search-a0794eacf9ed

The hitchhiker's guide to reusable Icons and SVG sprite generation

Ilesanmi Temitope — Tue, 20 Apr 2021 16:59:16 +0000

Tell me if this sounds familiar: You have a bunch of icons to use in your awesome web project. You don't want to use an icon library (Font awesome, material icons) probably because they're from different sources, or you just want to avoid the huge size that comes with libraries. So you head to icomoon.io (or similar) and upload all of your icons and then generate and download the icon-font set (or SVG sprite) generated for you and you go ahead to use that in your project.

The problem is, in 2 weeks' time, your designer comes along with a bunch of other icons you have to add and you have to upload these new ones, a JSON file from the one you generated earlier, and then generate a new set. This can get pretty monotonous and annoying, and there are a couple of ways things can go wrong; oh and did I mention, boring and monotonous.

In this article, we're going to look at:

how we can automate that process. Such that, whenever you need to add a new icon, you just run a command and your new SVG Sprite is generated for you
creating a reusable component to use the generated icons in the SVG Sprite.

This article shows how to create reusable SVG icons using SVG sprites (you should be using (controversially) SVG sprites as opposed to icon fonts. Here's why: https://css-tricks.com/icon-fonts-vs-svg/, https://www.sitepoint.com/icon-fonts-vs-svg-debate/). However, the same principles can be applied to generating and using icon-fonts as well.

Creating an SVG sprite

The approach we’ll be using in this article allows you to easily add any new SVGs to an icons folder, run a script to generate your sprite, and create a reusable component to make these icons easy to use. This approach also allows you to version control your icons and modify or roll back as you need.

Get a bunch of icons in an svg folder

Let’s create a src/icons - or whatever fits your project structure - folder where we will place all our SVG icons.

Create the SVG sprite

Next, to create the svg sprite, we need to install grunt and grunt-svgstore.

yarn add --dev grunt grunt-svgstore

Now, to create our grunt task, create a Gruntfile.js file in the root folder of your project and put the following contents in it

module.exports = function (grunt) {
  // Project configuration.
  grunt.initConfig({
    // PLUGINS CONFIG
    svgstore: {
      options: {
        prefix: '', // This will prefix each <g> ID in the generated SVG. You do not need it, but you can add it to avoid conflicting icon names with any other SVG sprites
        includedemo: true, // Do you want to generate a demo html file showing how the icons are used?
      },
      default: {
        files: {
          // destination_file (for the sprite): source_files (array of matchers pointing to your svg files)
          'src/assets/svgs/icon-sprite.svg': ['src/icons/*.svg'],
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-svgstore');

  // Default task(s).
  grunt.registerTask('default', ['svgstore']);
};

We have registered the svgstore task as default, hence running grunt should run the svgstore task.

NOTE: The destination file is the generated SVG file path, we have set this to src/assets/svgs/icon-sprite.svg. Feel free to change this to any valid path in your code where you feel more comfortable have the sprite generated. The source_files regex matches all svg files in the src/icons folder we created earlier

Check the grunt-svgstore documentation for more configuration options.

Finally, add the script to your package.json

...
"scripts": {
  ...
  "generate-sprite": "grunt"
}

Now you can run yarn generate-sprite to generate your svg sprite. A demo HTML file will also be generated alongside and you can open up the file to make sure that every icon looks right.

Inserting the SVG Sprite

To use our newly generated sprite, we need to insert it in the <body> tag. We want to insert it as the uppermost item in the DOM.

One way to insert this would be to copy the entire contents of custom-icons.svg and paste it in your index.html or layout component. But this wouldn’t exactly be ideal, now would it (especially if you’re using React or Vue or any other component-based framework that uses webpack to load files).

An alternative, more ideal approach would be to use webpack to load the SVG file as a component.
Using Vue: simply install and configure vue-svg-loader. Then create the CustomSprite component.

<template>
  <div style="display: none;">
    <icon-sprite />
  </div>
</template>

<script>
import IconSprite from 'assets/svgs/icon-sprite.svg';

export default {
  components: {
    IconSprite,
  },
};
</script>

Using React: if your project is built with create-react-app and you have not yet ejected, then you don’t need to install anything, simply create the component below.

If your project has already been ejected, or you’re using NextJs or something similar that allows you to configure webpack, you might want to take a look at @svgr/webpack.

Create the CustomSprite component like such:

import React from 'react';
import { ReactComponent as IconSprite } from 'assets/svgs/icon-sprite.svg';

const CustomSprite = () => {
  return (
    <div style={{ display: 'none' }}>
      <IconSprite />
    </div>
  );
};

export default CustomSprite;

Note that the component is wrapped in a hidden div (and it is styled inline). That’s because we don’t want to show the sprite on the page at all (the inline styling is to prevent a flash before css loads).

Now you can insert your CustomSprite component in the root of the page

<body>
  // your custom icon sprite
  <custom-sprite />
  ...

Using individual icons from the sprite.

Now we need to use our newly minted icon sprite to add any icons on the page.

<svg
  class="icon"
  aria-label="Rotate left"
>
  <use xlink:href="#rotate-left" />
</svg>

We're almost there! But this seems like an awful lot of code to write just to use a rotate-left icon. So we're going to make it into a component instead.

Create a reusable SvgIcon component

Vue:

<template>
<svg
  class="icon"
  :aria-label="label"
>
  <use :xlink:href="`#${icon}`" />
</svg>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      default: null
    },
  },
};
</script>

React

import React from 'react';
const SvgIcon = ({icon, label}) => {
  return (
    <svg
      class="icon"
      aria-label={label}
    >
      <use xlink:href={`#${icon}`} />
    </svg>
  );
};

export default SvgIcon;

That's it! You can now use your icons by using your component with the icon name anywhere.

<svg-icon icon="rotate-left" label="rotate-left icon" />

Or React

<SvgIcon icon="rotate-left" label="rotate-left icon" />

Feel free to modify the process to suit your needs. Now when you have new icons, all you have to do is

Add them to your src/icons folder
Run npm run custom-icons or yarn custom-icons

and your new icons will be added to the sprite.

I hope this helps, if you run into any troubles, please feel free to let me know.