featured

How to guarantee a coding job by writing the perfect cover letter

By / Last updated on May 24, 2024

So who told you nobody reads cover letters?!

If you really believe that then prepare for a massive shock…

83% of hiring managers absolutely DO read cover letters.

And they’re not just skimming through — 60% of hiring managers spend at least 2 minutes reading your resume!

Cover letters are the unique selling point that gets you chosen over people with dangerously similar qualifications.

Learn the perfect to write them once and stand out in every job application. Every job platform: Upwork, Indeed, and so much more.

Blind mass applying leads to failure

Don’t behave like those irritating email spammers.

Sending the same old generic message to thousands of addresses hoping for 2 replies.

Your cover letter needs to be personalized to:

  • The job description
  • The company’s mission and values.

It shows you’re genuinely interested.

Make sure to include these gems

1. Attention-grabbing intro

If you mess up the intro everything that follows is automatically worthless.

Get straight to the point without using so much formal baggage.

Recommended: Quickly state your niche and intentions to “learn more” about the company 😉

Example:

I’m a passionate full-stack web developer with over 6 years of experience interested in learning more about the Coding Beauty team.

2. What have you achieved recently?

Solutions before features.

Recruiters care more about concrete real-world achievements than the dry technical details behind them.

Example — for the full-stack web developer role:

Over the past 3 years, I helped my company generate over $2 million in additional revenue by spearheading the development a new e-commerce web platform.

Wow, amazing achievement! Who is this guy?

Then leading up to your experience, you say:

And now I’m thrilled to continue my journey by contributing and growing with Coding Beauty. These are three things that make me a perfect fit for this position:

3. Experience

Alright, I’m now much more curious to see the skills & experience you gained to help you reach such majestic heights:

Firstly, at XYZ Corp, I spearheaded the migration from AngularJS to React, enhancing the user experience and improving performance by 30%. My focus was on creating reusable components, which streamlined the development process and fostered collaboration. I believe in writing clean, maintainable code and mentoring junior developers, which I did by conducting weekly code reviews and workshops.

Secondly, while at ABC Solutions, I led a project to integrate a Node.js backend with a MongoDB database, reducing data retrieval times by 50%. I am passionate about efficient architecture and robust security practices, which I implemented by designing a comprehensive API and setting up automated testing, ensuring a seamless and secure application.

Notice how they state something about themselves in relation to the experience they gained in both cases.

Making it unique to the individual — rather than some random generic rambling no one cares about.

4. Why this company?

Why do you want to work here?

Show how you resonate with the mission and values of the company:

Example:

Finally, I’m drawn to Coding Beauty’s mission because it aligns perfectly with my belief in empowering developers to reach their fullest potential. By fostering personal growth, promoting the enjoyment of coding, and facilitating avenues for financial success, Coding Beauty embodies values that resonate deeply with me.

5. Strong conclusion

Confident but not too brazen:

Example:

I’m sure my background aligns sufficiently with Coding Beauty and this role. I am enthusiastic about leveraging my expertise to contribute meaningfully to Coding Beauty’s objectives and look forward to hearing back.

Putting it together

I’m a passionate full-stack web developer with over 6 years of experience interested in learning more about the Coding Beauty team.

Over the past 3 years, I helped my company generate over $2 million in additional revenue by spearheading the development a new e-commerce web platform.

Firstly, at XYZ Corp, I spearheaded the migration from AngularJS to React, enhancing the user experience and improving performance by 30%. My focus was on creating reusable components, which streamlined the development process and fostered collaboration. I believe in writing clean, maintainable code and mentoring junior developers, which I did by conducting weekly code reviews and workshops.

Secondly, while at ABC Solutions, I led a project to integrate a Node.js backend with a MongoDB database, reducing data retrieval times by 50%. I am passionate about efficient architecture and robust security practices, which I implemented by designing a comprehensive API and setting up automated testing, ensuring a seamless and secure application.

Finally, I’m drawn to Coding Beauty’s mission because it aligns perfectly with my belief in empowering developers to reach their fullest potential. By fostering personal growth, promoting the enjoyment of coding, and facilitating avenues for financial success, Coding Beauty embodies values that resonate deeply with me.

I’m sure my background aligns sufficiently with Coding Beauty and this role. I am enthusiastic about leveraging my expertise to contribute meaningfully to Coding Beauty’s objectives and look forward to hearing back.

Thanks,

Coding Masters

Keep it short

Don’t write a book — everything we’ve gone should be done in 4 or 5 paragraphs.

No need to impress with fancy vocabulary or formal language.

Lean towards a conversational, semi-formal tone.

Follow these tips and tricks and you’ll drastically improve the quality of your cover letters for Upwork, Indeed or general job listings.

10 amazing tools that every web developer should know

By / Last updated on May 21, 2024

10 fantastic web dev tools to level up your productivity and achieve your coding goals faster than ever.

From breathtaking animations to rapid project creation, these tools will boost your workflow and make a lot of things easier.

1. Fira Code

Most code editors’ default fonts are boring (like Consolas).

Use this beautiful, monospaced font instead:

Font ligatures have always been a genius, standout feature — merging common coding character groups in stylish, intuitive ways:

Changing your VS Code font is effortless; go to Settings you’ll see it up there among the “Commonly Used” options:

2. Barba JS

Add creative flair to your webpages and wow your users with delightful transitions:

It uses client-side routing of course, giving you that app-like experience:

3. Consola

I mean I just bashed Consolas, so no it’s not a typo.

It’s a beautiful, user-friendly console wrapper.

Perfect for making sophisticated looking CLI tools:

JavaScript
// ESM
import { consola, createConsola } from "consola";

// CommonJS
const { consola, createConsola } = require("consola");

consola.info("Using consola 3.0.0");
consola.start("Building project...");
consola.warn("A new version of consola is available: 3.0.1");
consola.success("Project built!");
consola.error(new Error("This is an example error. Everything is fine!"));
consola.box("I am a simple box");
await consola.prompt("Deploy to the production?", {
  type: "confirm",
});

4. Preact JS

A lightning-fast alternative to React — over 10 times lighter!

Dive in and you’ll find hooks, JSX, functional components… it’s essentially a drop-in replacement.

Just check this App component — I can literally count the differences with my right hand (or maybe left).

JavaScript
import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
  const [input, setInput] = useState('');

  return (
    <div>
      <p>
        Do you agree to the statement: "Preact is awesome"?
      </p>
      <input
        value={input}
        onInput={(e) => setInput(e.target.value)}
      />
    </div>
  );
};

render(<App />, document.body);

And over 36,000 GitHub stars — they mean business.

5. Carbon

No need to bore people to death with dry dull-looking code snippets.

Spice things and bring beauty to the world with Carbon:

Multiple themes to choose from:

6. Firestore

Probably the best NoSQL database ever.

Generous free limits make it amazing for trying out new ideas, as I’ve done severally.

You’ll find it extremely easy and intuitive as a JS dev.

JavaScript
import { collection, addDoc } from "firebase/firestore"; 

try {
  const docRef = await addDoc(collection(db, "users"), {
    first: "Cristiano",
    last: "Ronaldo",
    born: 1985
  });
  console.log("Document written with ID: ", docRef.id);
} catch (e) {
  console.error("Error adding document: ", e);
}

You can even use it on the client side and skip server requests entirely — boosting cost savings and app performance.

I once used as a free web socket server and it worked perfectly — with server-side protections.

7. react-input-autosize

Input autosizing: An ubiqitious web design problem:

Which is why react-input-autosize started getting many millions of weekly downloads after it solved it:

Very easy to use UI component:

JavaScript
<AutosizeInput
	name="form-field-name"
	value={inputValue}
	onChange={function(event) {
		// event.target.value contains the new value
	}}
/>

8. Live Server for VS Code

Powerful tool for rapidly crafting static HTML pages — 48 million downloads!

No need to ever manually reload a webpage again — it loads it in the browser and syncs the display to the file contents.

9. Parcel

Parcel: a zero-config bundler with zero setup required — far more flexible than dinosaur Create React App.

Supports all the latest web technologies with excellent performance:

JavaScript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- ✅ index.jsx directly -->
    <script src="index.jsx" type="module"></script>
  </body>
</html>

We can rapidly create a React app from scratch with the index.jsx:

JavaScript
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <div>Count: {count}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>
          Increment
        </button>
      </div>
    </div>
  );
  
}

10. SendGrid

A powerful, popular API to send marketing and transactional emails with a 99% delivery rate.

Design beautiful, engaging emails that land straight in inboxes — skipping spam folders.

Final thoughts

Use these awesome tools to level up your productivity and developer quality of life.

Recreate the Material Design text field with HTML, CSS, and JavaScript

By / Last updated on May 18, 2024

No doubt you’ve seen the beautiful text field if you’re one of Gmail’s 2 billion active users:

It’s fluid, it’s intuitive, it’s colorful 🎹.

It’s Material Design: the wildly popular UI design system powering YouTube, WhatsApp, and many other apps with billions of users.

Let’s embark on a journey of recreating it from scratch with pure vanilla HTML, CSS, and JavaScript.

1. Start: Create basic input and label

As always we start with the critical HTML foundation, the skeleton:

The text input, a label, and a wrapper for both:

HTML
<!-- For text animation -- soon -->
<div class="input-container">
  <input
    type="text"
    id="fname"
    name="fname"
    value=""
    aria-labelledby="label-fname"
  />
  
  <label class="label" for="fname" id="label-fname">
    <div class="text">First Name</div>
  </label>
</div>

2. Style input and label

I find it pretty satisfying: using CSS to gradually flesh out a stunning UI on the backs of a solid HTML foundation.

Let’s start:

Firs the <input> and its container:

CSS
.input-container {
  position: relative; /* parent of .label */
}

input {
  height: 48px;
  width: 280px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 16px;
}

.label {
  /* to stack on input */
  position: absolute;
  top: 0;
  bottom: 0;

  left: 16px; /* match input padding */

  /* center in .input-container */
  display: flex;
  align-items: center;
}

.label .text {
  position: absolute;
  width: max-content;
}

3. Remove pointer events

It resembles a text field now, but look what happens when I try focusing:

The label is part of the text field and the cursor should reflect that:

Solution? cursor: text

CSS
.label {
  ...
  cursor: text;
  
  /* Prevent blocking <input> focus */
  pointer-events: none;
}

4. Style input font

Now it’s time to customize font settings:

If you know Material Design well, you know Roboto is at the center of everything — much to the annoyance of some.

We’ll grab the embed code from Google Fonts:

Embed:

Use:

CSS
input,
.label .text {
  font-family: 'Roboto';
  font-size: 16px;
}

5. Style input on focus

You’ll do this with the :focus selector:

CSS

input:focus {
  outline: none;
  border: 2px solid blue;
}

✅

6. Fluidity magic: Style label on input focus

On focus the label does 3 things:

  1. Shrinks
  2. Move to top input border
  3. Match input border color

Of course we can do all these with CSS:

CSS
input:focus + .label .text {
  /* 1. Shrinks */
  font-size: 12px;

  /* 2. Move to top input border */
  transform: translate(0, -100%);
  top: 15%;

  padding-left: 4px;
  padding-right: 4px;

  /* 3. Match input border color */
  background-color: white;
  color: #0b57d0;
}

All we need to complete the fluidity is CSS transition:

CSS
label .text {
  transition: all 0.15s ease-out;
}

7. One more thing

Small issue: The label always goes to the original position after the input loses focus:

Because it depends on CSS :focus which goes away on focus lost.

But this should only happen when there’s no input yet.

CSS can’t fix this alone, we’re going to deploy the entire 3-tiered army of web dev.

HTML: input value to zero.

HTML
<input
  type="text"
  id="fname"
  name="fname"
  value=""
  aria-labelledby="label-fname"
/>

CSS: :not selector to give unfocused input label same position and size when not empty:

JavaScript
input:focus + .label .text,
/* ✅ no input yet */
:not(input[value='']) + .label .text {
  /* 1. Shrink */
  font-size: 12px;
  transform: translate(0, -100%);

  /* 2. Move to top */
  top: 15%;
  padding-left: 4px;
  padding-right: 4px;

  /* 3. Active color */
  background-color: white;
  color: #0b57d0;
}

And JavaScript: Sync initial input value attribute with user input

JavaScript
const input = document.getElementById('fname');

input.addEventListener('input', () => {
  input.setAttribute('value', input.value);
});
JavaScript
const input = document.getElementById('fname');

input.addEventListener('input', () => {
  input.setAttribute('value', input.value);
});

✅

That’s it! We’ve successfully created an outlined Material Design text field.

With React or Vue it’ll be pretty easy to abstract everything we’ve done into a reusable component.

Here’s the link to the full demo: CodePen

Why [‘1’, ‘5, ’11’].map(parseInt) returns [1, NaN, 3] in JavaScript

By / Last updated on May 14, 2024

Alex, the self-proclaimed coding whiz, prided himself on quick hacks and short code.

Despite being very new to the industry, he always saw himself as superior to the rest of the team, stubbornly doing whatever he felt like; all their well-meant advice falling on deaf ears.

But Alex was soon to meet his catastrophic downfall. A painful, humbling experience he would never forget.

It all started when Alex and Cody were assigned a project task. To let users view the products for the ongoing eCommerce website the team had been working on.

They were still in startup phase so all the data was stored and updated in a CSV file.

The product name, price, quantity… all the usual stuff you’d see on sites like Amazon.

Alex arrogantly scoffed when he learned of the planned collaboration.

“I don’t need to work with ANYONE okay?” He smirked at Jake, the good-natured head of engineering, as he typed on his PC. “It’s literally just to fetch from the DB and show in the JSX”.

“Alex you need to learn how to work with others, I keep telling you this.”, Jake responded with a patient, forced smile. He was used to this man’s self-obsessed antics.

“I don’t need to work with anyone, I can do this alone. Cody will only slow me down with all his nonsense talk about readable code”.

“Cody is one of our best and takes his time for a reason. I keep telling you it’s not all about writing code quickly or concisely…”.

“You always keep telling me things but you NEVER listen to me. I just want to work on my own this time, okay?”. “Please?”, Alex quickly added to avoid sounding too rude — keeping that snobbish smirk on his face of course.

Jake sighed.

“Alright, I’ll let you work you alone if you can convert this string array”, as he wrote on a nearby sheet of paper, “to the same array of numbers”.

Alex couldn’t believe it. On the paper was a simple array.

JavaScript
['1', '5', '11']

This had to be a trick question. He looked up at Jake suspiciously.

“Seriously? How dumb do you think I am that I can’t parse this?”

“Do it, you only get one chance”. Jake deserved a self-control medal for his astounding patience with this youngster.

With a smug look on his face, Alex opened up a new VS Code terminal and smugly typed out the seemingly obvious solution in Node:

JavaScript
['1', '5', '11'].map(parseInt)

He smirked triumphantly, only to turn and see a knowing smile on Jake’s face — he was thrown off balance instantly.

“You sure about that Alex? Why don’t you press Enter and let’s see what the resulting array actually is”.

A little unsure of himself, he scanned through the short CLI code to ensure absolute certainty, before the final moment.

What he saw next shook him to his very core.

How on earth was this possible? Was parseInt broken? Was there a bug in map()?

He looked up frantically, eliciting a sharp, unnerving laughter from Jake.

“Alex, you’re fired”.

“WHAT?!”, Alex screamed.

“Pack your things and get out of here before I close and open my eyes, you arrogant buffoon!”

…

You see, Alex’s downfall was NOT his failure to understand map and parseInt — though that could have helped.

It was his obsession with making code as short as possible, at the expense of readability and clarity…

The fact is in 99% of cases this is how we use map and parseInt

JavaScript
const doubles = ['1', '5', '11'].map((num) => num * 2);

console.log(doubles); // [2, 10, 22]

const num = parseInt('5');

console.log(num); // 👍 5 -- not NaN!

But you may be shocked at what happens when you use map with console.log:

JavaScript
const doubles = ['1', '2', '3'].map(console.log);

It logs 3 pairs of numbers for each item!

That’s because the map() callback actually takes 3 arguments:

So you’re actually calling parseInt with 3 args:

JavaScript
// parseInt take 2 args max but JS compiler doesn't complain
['1', '5', '11'].map(parseInt)

// parseInt('1', '0', ['1', '5', '11'])
// parseInt('5', '1', ['1', '5', '11'])
// parseInt('11' '2', ['1', '5', '11'])

Alex never knew that parseInt takes either 1 or 2 arguments and behaves differently for each:

When there’s a 2nd arg it becomes a base for the 1st number arg:

JavaScript

// 👇 invalid positive number, ignore
parseInt('1', '0'); // 1 ✅

parseInt('3', 'blah blah'); // 3

// 👇 invalid base (1)
parseInt('2', '1'); // NaN

parseInt('5', '1'); // NaN ✅

// 👇 '10' is 2 in base 2 (remember?)
parseInt('10', '2'); // 2

parseInt('11', '2'); // 3 ✅

Despite his average knowledge of map and parseInt, he could have avoided all of these by simply being explicit:

JavaScript
['1', '5', '11'].map((num) => parseInt(num));

Shortening code can be great for reducing clutter but we should always prioritize clear and readable code:

Especially when the added length is not that big of a deal, you know?

JavaScript
async function setTimeout() {
  // ❌
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log('Coding Beauty');
}


async function setTimeout() {
  // // ✅
  await new Promise((resolve) => setTimeout(() => resolve(), 1000));
  console.log('Coding Beauty');
}

10 rare HTML tags that nobody ever uses

By / Last updated on May 11, 2024

There’s way more to HTML than <div>, <a>, and <p>.

So much more sophisticated and powerful tags that you’ve probably never used.

From modern list visualization to 🎹 colorful highlights, let’s look at 10 little-known but capable HTML tags.

1. abbr

The <abbr> tag defines an abbreviation or acronym, like HTML, CSS, and JS.

And LOL too – though that’s more of a standalone word these days.

I'm reading about
<abbr title="Hypertext Markup Language">HTML</abbr>
tags at
<abbr title="Coding Beauty">CB</abbr>
The abbreviation is indicated with a dotted line by default.
Dotted line for abbreviation.

We use the title attribute of the <abbr> tag to show the description of the abbreviation/acronym when you hover over the element:

Hover over <abbr> to show the full form:

Hovering over the <abbr> element.

2. q

The <q> tag indicates that the text inside of it is a short inline quotation.

<q>Coding creates informative tutorials on Web Development technologies</q>

Modern browsers typically implement this tag by wrapping the enclosed text in quotation marks:

The text in the <q> tag is wrapped with quotation marks.

3. s

<s> strikes through.

To correct without destroying the change history.

Buy for <s>$200</s> $100
Indicating price change with the <s> tag.

The <del> and <ins> pair are similar but semantically meant for document updates instead of corrections.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      del {
        background-color: lightsalmon;
      }

      ins {
        text-decoration: none;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    My favorite programming language is <del>JavaScript</del>
    <ins>TypeScript</ins>
  </body>
</html>
Indicating editorial changes in a document with the <del> and <ins> tags.
Indicating editorial changes in a document with the <del> and <ins> tags.

4. mark

Marks or highlights text.

Coding <mark>Beauty</mark> Website

Yellow background color by default:

The <mark> tag applies a bright yellow background to its enclosed text.

Like how browsers show search results.

Display search results for the letter "e" with the <mark> tag.
e e e e e e ….

5. wbr

<wbr> tells browser, “You can only break text here and there”

So the browser doesn’t get lousy and start break crucial words all over the place.

That’s why it’s wbr — Word BReak Opportunity

<p>this-is-a-very-long-text-created-to-test-the-wbr-tag</p>
The text is broken at a location chosen by the browser.
Browser is joking around.

But now with <wbr />

<p>this-is-a-very-long-te<wbr />xt-created-to-test-the-wbr-tag</p>

Broken precisely after ...-te:

The text is broken at the location set with the <wbr> tag.
Obviously no reason to break there in real-world code though.

6. details

<details> is all about expanding and contracting — like the universe.

<details>
  <summary>Lorem Ipsum</summary>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti eos
  quod fugiat quasi repudiandae, minus quae facere. Sed, quia? Quod
  cupiditate asperiores neque iste consectetur tempore eum repellat incidunt
  qui.
</details>

Contract:

A closed disclosure widget.
The disclosure widget is closed (default state).

Expand:

An open disclosure widget.
The disclosure widget is open.

7. optgroup

The name says it all — grouping options.

You can usually group gigantic option lists into clear hierarchies, and <outgroup> is here to help.

<select name="country" id="countries">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="fr">France</option>
  </optgroup>
</select>

Countries → continents.

An open dropdown list contains grouped options.

8. datalist

<datalist> is all about making inputting text effortless.

With dropdown lists for autocomplete:

<form>
  <label for="lang">Choose a language:</label>
  <input list="langs" name="lang" id="lang" />

  <!-- 🔗<input> list to <datalist> id -->

  <datalist id="langs">
    <option value="English" />
    <option value="French" />
    <option value="Spanish" />
    <option value="Chinese" />
    <option value="German" />
  </datalist>
</form>
An input with an available list of options.
A list of available options for the input is displayed in a dropdown list.
An input with a responsive list of options.
The available options change according to what the user types in the input.

9. fieldset

A set of fields — farmers must find it useful.

Creating a clean visual separation to easily understand the forms.

<form>
  <fieldset>
    <legend>Name</legend>

    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" /><br />
    <label for="mname">Middle Name:</label>
    <input type="text" id="mname" name="mname" /><br />
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" />
  </fieldset>
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br /><br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

We use the <legend> tag to define a caption for the <fieldset> element.

Input elements, some grouped with a <fieldset> tag.

10. sup and sub

<sup> — superscript.

<sub> — subscript.

<p>This text contains <sub>subscript</sub> text</p>
<p>This text contains <sup>superscript</sup> text</p>
The text contains both subscript and superscript.

Something more intense: neutralization reaction đŸ§Ș

&#x1D465;<sup>2</sup> - 3&#x1D465; - 28 = 0. Solve for &#x1D465;. <br />
<br />
H<sub>2</sub>SO<sub>4</sub> + NaOH &#8594; Na<sub>2</sub>SO<sub>4</sub> +
H<sub>2</sub>O

Conclusion

In this article, we explored some of the least known and utilized tags in HTML. These rare tags can be quite useful in particular situations despite their low usage.

How to earn full or side income as a freelance developer in 2024

By / Last updated on June 29, 2024

Don’t waste time cold applying to job listings.

Your success rate will be painfully low after all that time invested. There is a better way that many never use.

Many have used it to guarantee responses and interviews every single time. This is my #1 way to find clients.

I use LinkedIn as a case study, but the strategy applies to any place you interact with other people.

It’s all about referrals at its core.

Referrals drastically improve your chances of getting a job at any company.

But you need to do it right.

Follow this ultimate step-by-step guide to landing high-paying, flexible freelance + full-time jobs.

1. Plan: Know what you want

This is extremely important, especially for future jobs.

The broader your niche the more jobs for you — but there’s more competition.

Example: “Web developer”.

Smaller niche makes you the big fish in a small pond — less jobs but standing out takes far less time.

Example: “Next.js developer, implements social media integrations into web apps”. Super specific.

If you’re just starting without much experience, start small. Then you can slowly broaden your niche as you gain experience and social proof.

2. Find jobs in your niche the right way

Now start action.

Find jobs in your niche don’t apply directly.

What are the best places to find jobs?

Wellfound

I previously talked about the massive number of software jobs from rapidly growing startups on Wellfound.

It has over 49,000 jobs on there right now with not enough people to fill them — incredible opportunity.

LinkedIn Jobs

LinkedIn is full of the latest job listings from high-quality companies. Filter by your niche and add to your collection.

3. Create a unique LinkedIn profile

It’s the first thing anyone checking you out will see — make it incredible.

First impression matters everywhere and LinkedIn is no exception.

Great photo

Use a high-quality face photo with great lighting that shows confidence.

You can smile to appear friendly and approachable — not necessary though! Too fake for some.

Attention-grabbing bio

Forget about being quirky or cute here.

You mean business and the first piece of text describing you must show this.

What should you put in your bio?

1. Your niche

You know your ideal job type, now make it known to the world. Let people know you’re qualified.

2. Impressive achievement

Include a notable achievement to grab attention.

Example: 1,000+ stars on GitHub.

3. Open to work

Add “freelancer” if you’re specifically doing freelance.

Many won’t want to waste even a little energy to ask if you’re open to work; Let them be sure from the start.

Also use the #OpenToWork LinkedIn feature.

4. Start building your network with intent — like this

You’ve built up your LinkedIn profile beautifully, now it’s time to find valuable people.

Don’t just add any random person — focus on people who meet these criteria:

1. Connected to the target job

People who work at the companies of the job openings you found.

And people who know those people — 2nd-degree connections.

2. Something in common

  • Is their industry and niche similar to yours? More on this shortly.
  • Did they go to the same school as you?
  • Are you two from the same city? Or the same not-so-popular country?

We are tribal and more likely with people similar to us in an important way.

3. Creators

Target software developers like yourself. Then designers, writers, authors — creators in general. But prioritize people who code professionally.

Focus on quality AND quantity connections.

The more people in your network the more likely opportunities will come your way.

And you can add up to 30,000 connections!

5. Nurture your relationships

Adding people is NOT enough — You must patiently strengthen your connections with them.

And how do you do that?

Engage

If you don’t show up in people’s lives, they’ll forget about your existence.

Leave genuine thoughtful comments on their posts.

Like posts that resonate with you — but don’t just like every post or you’ll cheapen the value — like a chronic flatterer.

Send them personal messages offering value. Ask them for advice and make them feel valued and invested in you.

Create posts

Another great way to offer value and maintain the relationship.

Share what you know and what you’ve done. Don’t give us coding platitudes — everybody knows about <br /> tag. We all know about HTTP POST.

Try not to always share cold impersonal facts; sprinkle in your thoughts and opinions. Make jokes without causing painful cringe.

6. Ask for referrals

The best way to do this: Ask to meet them physically or virtually to learn more about the role or company.

Prepare engaging questions in advance to show genuine interest in the company — not just about getting a job.

If you’ve built a cordial relationship at this point, they’ll probably ask you if you want a referral — ✅.

If not, you can say something like, “This sounds like an amazing place to work! Would it be possible to get a referral if I applied?”.

You don’t even have to tie the referral to any specific role — you can ask them to keep you posted with job requests.

If they’re a great developer they’re probably high in demand and get more offers than they can handle. With a strong relationship, they’ll be more than happy to refer you.

People trust people they know. You’re far more likely to get the job with referrals than with cold job listings.

Final thoughts

Follow this strategy focus and intent, and you’ll start landing high-paying freelance jobs faster than you think with high certainty.

Resolve a promise from outside in JavaScript: practical use cases

By / Last updated on May 3, 2024

It’s one of those “cool” things you can do in JavaScript that are actually immensely powerful when put to good use.

JavaScript
let promiseResolve;
let promiseReject;

const promise = new Promise((resolve, reject) => {
  promiseResolve = resolve;
  promiseReject = reject;
});

promiseResolve();

Powerful practical use cases

Action B waiting for action A

A is ongoing but the user wants to do B but A needs to happen first.

Example: Social app where users can create, save, and publish posts. Like Medium.

HTML
<p>
  Save status:
  <b><span id="save-status">Not saved</span></b>
</p>
<p>
  Publish status:
  <b><span id="publish-status">Not published</span></b>
</p>
<button id="save">Save</button>
<button id="publish">Publish</button>
A simple app where users can create, save and publish posts.
Publish doesn’t happen until after save.

What if the user wants to publish the post when it’s saving?

Solution: Ensure the post is saved before publishing happens.

JavaScript
saveButton.onclick = () => {
  save();
};

publishButton.onclick = async () => {
  await publish();
};

let saveResolve;
let hasSaved = false;

async function save() {
  hasSaved = false;
  saveStatus.textContent = 'Saving...';
  // ✅ Resolve promise from outside
  await makeSaveRequest();
  saveResolve();
  hasSaved = true;
  saveStatus.textContent = 'Saved';
}

async function waitForSave() {
  if (!hasSaved) {
    await new Promise((resolve) => {
      saveResolve = resolve;
    });
  }
}

async function publish() {
  publishStatus.textContent = 'Waiting for save...';
  await waitForSave();
  publishStatus.textContent = 'Published';
  return;
}
Post is saved before publish happens.

It gets even better when you abstract this logic into a kind of Deferred class:

JavaScript
class Deferred {
  constructor() {
    this.promise = new Promise((resolve, reject) => {
      this.reject = reject;
      this.resolve = resolve;
    });
  }
}

const deferred = new Deferred();

// Resolve from outside
deferred.resolve();

Refactoring✅:

JavaScript
// ...

const deferredSave = new Deferred();
let hasSaved = false;

async function save() {
  hasSaved = false;
  saveStatus.textContent = 'Saving...';
  // ✅ Resolve promise from outside
  await makeSaveRequest();
  saveResolve();
  hasSaved = true;
  saveStatus.textContent = 'Saved';
}

async function waitForSave() {
  if (!hasSaved) await deferredSave.promise;
}

async function publish() {
  // ...
}

And it works exactly like before:

The functionality works as before after the refactor.

Deferred is much cleaner, which is why we’ve got tons of NPM libraries like it: ts-deferred, deferred, promise-deferred…

Promisifying an event stream

It’s a great setup I’ve used multiple times.

Doing an async task that’s actually waiting for an event stream to fire, internally:

JavaScript
// data-fetcher.js
const deferred = new Deferred();

let dataDeferred;
function startListening() {
  dataDeferred = new Deferred();
  
  eventStream.on('data', (data) => {
    dataDeferred.resolve(data);
  });
}

async function getData() {
  return await dataDeferred.promise;
}

class Deferred {
  constructor() {
    this.promise = new Promise((resolve, reject) => {
      this.reject = reject;
      this.resolve = resolve;
    });
  }
}

// client.js
const { startListening, getData } = require('./data-fetcher.js');

startListening();

const data = await getData();

Final thoughts

Resolving promises externally unlocks powerful patterns.

From user actions to event streams, it keeps your code clean and flexible. Consider libraries like ts-deferred for even better handling.

The 5 most transformative JavaScript features from ES9

By / Last updated on May 4, 2024

JavaScript has come a long way in the past 10 years with brand new feature upgrades in each one.

Let’s look at the 5 most significant features that arrived in ES9; and see the ones you missed.

1. Async generation and iteration

Async generators was a powerful one from ES9.

Just like normal generators but now it pops out the values after asynchronous work like a network request or something:

JavaScript
function* asyncGenerator() {
  yield new Promise((resolve) =>
    setTimeout(() => resolve('done this ✅'), 2000)
  );
  yield new Promise((resolve) =>
    setTimeout(() => resolve('done that ✅'), 3000)
  );
}

So when we call .next() we’ll get a Promise:

JavaScript
const asyncGen = asyncGenerator();
asyncGen.next().value.then(console.log);
asyncGen.next().value.then(console.log);

It’s such a powerful tool for streaming data in web app in a structured + readable manner — just look at this function that buffers and streams data for a video-sharing app like YouTube:

JavaScript
async function* streamVideo({ id }) {
  let endOfVideo = false;
  const downloadChunk = async (sizeInBytes) => {
    const response = await fetch(
      `api.example.com/videos/${id}`
    );
    const { chunk, done } = await response.json();
    if (done) endOfVideo = true;
    return chunk;
  };
  while (!endOfVideo) {
    const bufferSize = 500 * 1024 * 1024;
    yield await downloadChunk(bufferSize);
  }
}

And now to consume this generator we’ll use for await of — async iteration:

JavaScript
for await (const chunk of streamVideo({ id: 2341 })) {
  // process video chunk
}

I wonder if the actual YouTube JavaScript code uses generators like this?

2. Rest / spread operator

No doubt you’ve stumbled upon the modern spread syntax somewhere.

A genius way to rapidly and immutable clone arrays:

JavaScript
const colors = ['🔮', 'đŸ””', '🟡'];

console.log([...colors, '🟱']);
// [ '🔮', 'đŸ””', '🟡', '🟱' ]

We never had it before ES9, and now it’s all over the place.

Redux is big one:

JavaScript
export default function userState(state = initialUserState, action){
  console.log(arr);
    switch (action.type){
      case ADD_ITEM :
        return { 
             ...state,
             arr:[...state.arr, action.newItem]
        }

      default:return state
   }
}

And it works for objects too:

JavaScript
const info = {
  name: 'Coding Beauty',
  site: 'codingbeautydev.com',
};

console.log({ ...info, theme: 'đŸ””' });
// { name: 'Coding Beauty',
//   site: 'codingbeautydev.com',
//   theme: 'đŸ””' }

Overrides props:

JavaScript
const langs = {
  j: 'java',
  c: 'c++',
};

console.log({ ...langs, j: 'javascript ' });
// { j: 'javascript ', c: 'c++' }

This makes it especially great for building upon default values, especially when making a public utility.

Or customizing a default theme like I did with Material UI:

With the spread syntax you can even scoop out an object’s copy without properties you don’t want.

JavaScript
const colors = {
  yellow: '🟡',
  blue: 'đŸ””',
  red: '🔮',
};

const { yellow, ...withoutYellow } = colors;

console.log(withoutYellow);
// { blue: 'đŸ””', red: '🔮' }

That’s how you remove properties from an object immutably.

3. String.raw

When I use String.raw I’m saying: Just give me what I give you. Don’t process anything.

Leave those escape characters alone:

JavaScript
// For some weird reason you can use it without brackets
// like this 👇

const message = String.raw`\n is for newline and \t is for tab`;
console.log(message); // \n is for newline and \t is for tab

No more escaping backslashes:

JavaScript
const filePath = 'C:\\Code\\JavaScript\\tests\\index.js';

console.log(`The file path is ${filePath}`);

// The file path is C:\Code\JavaScript\tests\index.js

We can write:

JavaScript
const filePath = String.raw`C:\Code\JavaScript\tests\index.js`;

console.log(`The file path is ${filePath}`);

// The file path is C:\Code\JavaScript\tests\index.js

Perfect for writing regexes with a stupid amount of these backslashes:

Something like this but much worse:

From this✅:

JavaScript
const patternString = 'The (\\w+) is (\\d+)';
const pattern = new RegExp(patternString);

const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']

To this✅:

JavaScript
const patternString = String.raw`The (\w+) is (\d+)`;
const pattern = new RegExp(patternString);

const message = 'The number is 100';
console.log(pattern.exec(message));
// ['The number is 100', 'number', '100']

So “raw” as in unprocessed.

That’s why we have String.raw() but no String.cooked().

4. Sophisticated regex features

And speaking of regexes ES9 didn’t disappoint.

It came fully loaded with state-of-the-art regex features for advanced string searching and replacing.

Look-behind assertions

This was a new feature to make sure that only a certain pattern comes before what you’re searching for:

  • Positive look-behind: Whitelist ?<=pattern
  • Negative look-behind: Blacklist ?<!pattern
JavaScript
const str = "It's just $5, and I have €20 and £50";

// Only match number sequence if $ comes first
const regexPos = /(?<=\$)\d+/g;

console.log(str.match(regexPos)); // ['5']

const regexNeg = /(?<!\$)(\d+)/g; // ['20', '50' ]

console.log(str.match(regexNeg));

Named capture groups

Capture groups has always been one of the most invaluable regex features for transforming strings in complex ways.

JavaScript
const str = 'The cat sat on a map';

// $1 -> [a-z]
// $2 -> a
// $3 -> t

// () indicates group
str.replace(/([a-z])(a)(t)/g, '$1*$3');
// -> The c*t s*t on a map

So normally the groups go by their relative position in the regex: 1, 2, 3…

But this made understanding and changing those stupidly long regexes much harder.

So ES9 solved this with ?<name> to name capture groups:

JavaScript
const str = 'The cat sat on a map';

// left & right
console.log(str.replace(/(?<left>[a-z])(a)(?<right>t)/g, '$<left>*$<right>'));
// -> The c*t s*t on a map

You know how when things break in VS Code, you can quickly Alt + Click to go to the exact point where it happened? 👇

VS Code uses capture groups to make the filenames clickable and make this rapid navigation possible.

I’d say it’s something like this:

JavaScript
// The stupidly long regex
const regex =
  /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/gi;

// ✅ String.raw!
const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`;

const extractor =
  /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/i;

const [path, lineStr, charStr] = filePoint
  .match(regex)[0]
  .match(extractor)
  .slice(1, 4);

const line = Number(lineStr);
const char = Number(charStr);

console.log({ path, line, char });

// Replace all filePoint with <button> tag
// <button onclick="navigateWithButtonFilepointInnerText">{filePoint}</button>

5. Promise.finally

Finally we have Promise.finally 😉.

You know how finally always run some code whether errors are there or not?

JavaScript
function startBodyBuilding() {
  if (Math.random() > 0.5) {
    throw new Error("I'm tiredđŸ˜«");
  }
  console.log('Off to the gym 👟đŸ’Ș');
}

try {
  startBodyBuilding();
} catch {
  console.log('Stopped excuse🛑');
} finally {
  console.log("I'm going!🏃");
}

So Promise.finally is just like that but for async tasks:

JavaScript
async function startBodyBuilding() {
  await think();
  if (Math.random() > 0.5) {
    throw new Error("I'm tiredđŸ˜«");
  }
  console.log('Off to the gym 👟đŸ’Ș');
}

startBodyBuilding()
  .then(() => {
    console.log('Started ✅');
  })
  .catch(() => {
    console.log('No excuses');
  })
  .finally(() => {
    console.log("I'm going!🏃");
  });

The biggest pro of Promise.finally() is when you’re chaining lots of Promises:

It also works well with Promise chains:

JavaScript
getFruitApiUrl().then((url) => {
  return fetch(url)
    .then((res) => res.json())
    .then((data) => {
      fruits.push(data);
    })
    .catch((err) => {
      console.error(err);
    })
    .finally(() => {
      console.log(fruits);
    });
});

Brought forth by ES9.

Final thoughts

ES9 marked a significant leap forward for JavaScript with several features that have become essential for modern development.

Empowering you to write cleaner code with greater conciseness, expressiveness, and clarity.

I found a massive remote job site for software developers ($300K+ per year)

By / Last updated on April 28, 2024

Job searching with sites like LinkedIn and Indeed can be really frustrating, especially if you’re self-taught, just out of college, or spent months looking for work.

Especially if you’re self-taught or you don’t have much “professional” experience.

Luckily today we’ll dive deep into Wellfound (formerly AngelList), a powerful way to get freelance and full-time jobs without much work experience quickly.

A way others have used and found massive success:

With Wellfound you gain access to tens of thousands of remote jobs from the world’s hottest startups.

Rising startups are much more willing to hire you than the huge, well-established FAANG companies. You’ll get to have a significant impact on the company at the critical formative stages.

And don’t think this means they pay low. Many of them pay from $100k to $220k and above — Some as high as $300K.

They’re swimming in investor money and expanding quickly, which means they need as many hands as they can get.

Their rapid growth also means you stand to gain a lot with their lucrative stock options.

How to apply for remote jobs at Wellfound

Once you go to wellfound.com/remote you’ll see a massive number of well-paying remote tech & startup jobs.

Right now you can see they’re almost 50,000 jobs! Not enough people to fill them — something I heard is pretty common for tech jobs.

Serious opportunity here


Look how detailed the information is for each job; Here we have GitLab a powerful GitHub alternative.

We see they have 3 juicy jobs all over $150,000, their actively hiring, they’re wildly acclaimed, they’ve got strong financial backing, and a great work-life balance.

That’s a lot of information in one go.

You can use the right side pane to narrow down your search to specific roles like the full-stack engineer role, for full-stack web developers.

Look it’s Calm, a wildly popular meditation and sleep app with over 50 million downloads on the Play Store alone.

To apply you’ll fill out a bunch of fields to create your Wellfound account and upload your resume.

Full name, email, password, location, years of experience, desired salary, cover letter, CV, and more.

That’s definitely a lot, but don’t worry: Once you create an account all the information you entered will be used for every successive application.

So you’ll just have to enter one or two details, like the cover letter.

The best companies to target if you have no experience

If you don’t have any professional experience then you’ll have much higher success targeting those seed to mid-size startups just getting started and in incredibly high demand for employees.

So maybe not Calm. Perhaps something like


Xverse – less than 50 employees.

Or Sprinter Health – early and growing fast!

You’ll take on such a powerful and influential role at these crucial growing stages in the company lifetime.

Tips for writing a good application letter

1. Tailor it to the job

Don’t use a generic cover letter.

Look at the job description closely and identify the skills and experience they’re looking for to write something personalized to the role.

2. Hook them early

Start with a strong opening that grabs their attention.

Talk about how excited you are for the position and highlight a relevant accomplishment or two. If you don’t have much of that, then focus more on your zeal to make a difference and your desire to learn as much as possible.

3. Solutions over features

Focus more on how you can solve the problems the role demands, not just your skills and experiences.

4. Keep it clear and short

Go straight to the point with 3-4 paragraphs. Don’t try to show off your vocab – they don’t care. Use conversational language.

Final thoughts

Wellfound offers a goldmine of high-paying remote jobs at exciting startups. Skip the brutal FAANG competition and make a real impact with companies overflowing with opportunity.

Don’t let a lack of experience hold you back – target fast-growing startups for your big break. With Wellfound, your dream remote job is just a click away.

5 unnecessary VS Code extensions you should uninstall now (#2)

By / Last updated on April 24, 2024

EVERY new extension you add to VS Code increases the memory and CPU power it gobbles up:

We need to keep this number as low as possible to minimize this resource usage — and stop these extensions from clashing with one another or with native functionality.

And you know, there’s a significant number of extensions in the Marketplace that provide functionality VSCode already has built-in.

Usually they were made when the feature wasn’t added yet; but once that happened they became largely redundant additions.

So below, I cover a list of these integrated VSCode features and extensions that provide them. Uninstalling these now dispensable extensions will increase your editor’s performance and efficiency.

1. HTML tag auto-renaming

A powerful feature I didn’t discover for months after I started using VS Code!

You just start editing the starting tag and the ending tag auto-updates to match:

Extensions for this

  • Auto Rename Tag (17.7M downloads): “Automatically rename paired HTML/XML tag, same as Visual Studio IDE does”.

But feature already built-in

I use this setting to easily get tag auto-rename without installing anything:

  • Editor: Linked Editing: “Controls whether the editor has linked editing enabled. Depending on the language, related symbols e.g. HTML tags, are updated while editing.” Default is false“

2. Auto-trim trailing spaces

This handy feature removes ending whitespace from all the lines of your file to maintain consistent formatting.

Extensions for this

  • Trailing Spaces (2.0M downloads): “Highlight trailing spaces and delete them in a flash!”.
  • AutoTrim (35.4K downloads): “Trailing whitespace often exists after editing lines of code, deleting trailing words, and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor”.

But feature already built-in

VSCode has a built-in setting that can automatically remove trailing spaces from a file.

It automatically trims the file when it is saved, making it a background operation you no longer have to think about.

Trailing spaces are removed from the file on save.
Trailing spaces are removed from the file on save.

Here’s the setting:

  • Files: Trim Trailing Whitespace: “When enabled, will trim trailing whitespace when saving a file”. It’s false by default.
The auto trimming setting in the VSCode Settings UI.
The auto trimming setting in the Settings UI.

Add this to your settings.json file to enable auto trimming:

settings.json

JavaScript
{
  "files.trimTrailingWhitespace": true,
}

You might want to turn this setting off for Markdown files since you have to put two or more spaces at the end of a line to create a hard line break in the output, as stated in the CommonMark specification. Add this to your settings.json file to do so.

settings.json

JavaScript
{
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

Alternatively, you can simply use a backslash (\) instead of spaces to create a hard line break.

3. HTML tag auto-wrapping

I can’t count how many times I’ve needed to wrap one HTML element in a new one — usually a div.

With this feature I can instantly wrap the <p> tag in a <div> without painfully inserting one <div> above and one </div> below.

Extensions for this

  • htmltagwrap (674K downloads): “Wraps selected code with HTML tags”.
  • html tag wrapper (458K downloads): “wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too”.

But feature already built-in

Thanks to the built-in Wrap with Abbreviation command I can rapidly wrap a tag in any tag type.

Did you see how the new wrapper’s name changed according to your input?

4. Colorful indentation

Indentation guides make it much easier for you to trace out the different indentation levels in your code.

Extensions for this

  • Indent Rainbow: “This extension colorizes the indentation in front of your text, alternating four different colors on each step”

But feature already built-in

So yeah, once again VS Code has this as a built-in feature.

We just change the Editor > Guides: Bracket Pairs setting from active to always show the colorful indents.

To go from this:

To this✅:

Beautiful.

5. NPM integration

In every serious project you’ll probably have tools to automate testing, linting, building, and other tasks.

So this feature makes it easier to start those tasks with as little as the click of a button. No need to switch context whatsoever.

Extensions for this

  • NPM (6.8M installs): “This extension supports running npm scripts defined in the package.json file”. I always saw this as a recommended extension after opening any project with package.json

But feature already built-in

With the built-in NPM scripts view I can easily see all the scripts in my project’s package.json and run any I want:

Ugh, but now you have to drag your mouse all the way over there just to run a simple task.

So much better to go with the Tasks: Run Task command:

“Tari it’s still too slow!!”

Alright fine, if you know the exact script you want, then just Ctrl + ` to open the built-in terminal and feed your CLI desires:

Final thoughts

These extensions might have served a crucial purpose in the past, but not anymore for the most part, as much of the functionality they provide have been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.