DEV Community: Jr. Dev 👨🏾‍💻

Creating a Compiler with JavaScript: Theory

Jr. Dev 👨🏾‍💻 — Wed, 15 Sep 2021 06:34:47 +0000

Overview

As JavaScript developers, we rarely need to think about low-level computing functionality. We do not have to concern ourselves with how the computer executes the code that we write. But have you ever wondered just how this happens?

This multi-part series aims to give you an introduction to just how compilation works, and what better way to learn, than to create our very own programming language along the way!

Follow along on YouTube

Benefits of learning compiler theory
Definition
Examples
How compilers works
Diagram
Conclusion

Benefits of Learning Compiler Theory

It will help you understand how computers execute our programs
You will better understand errors, and therefore improve your debugging skills
It will make you a better programmer as the techniques used can be transferred to general software design

Definition

Compilers convert human-readable code to machine code, so that a computer can understand and run programs.

In this series, we will technically be creating a transpiler, so let us give that a definition too:

A transpiler converts code from one language, to another language, that has a similar level of abstraction.

Examples

Babel

https://babel.dev/docs/en/ is a JavaScript transpiler which transpiles newer versions of EcmaScript to older versions for browser compatibility.

TypeScript

https://www.typescriptlang.org/ is a programming language, which is transpiled to JavaScript.

G++

GNU C++ compiler compiles C++ to generate an executable target file.

How Compilers Work

The compilation process is split into multiple stages which each play a crucial part to convert your code into machine instructions.
We will be focusing our attention to arguably the 3 main tasks listed below:

Scanner

The scanner is responsible for reading the source input, one character at a time, and grouping these characters in to tokens.

Parser

Given a formal syntax specification, the parser reads the tokens, outputted by the scanner, and checks the semantics of the source code.

Generator

The generator maps our source input into the target code.

Diagram

Conclusion

To conclude, compilation is the process of translating the code you write, into code that a computer understands. It does this by scanning and parsing your source input, and mapping this input to the target output which your computer can understand.

Now that you have a basic understanding of compilation, the next step is to create our very own programming language to compile!

See you then 😊

Header photo by Greg Rakozy on Unsplash

How to Display the Progress of Promises in JavaScript

Jr. Dev 👨🏾‍💻 — Mon, 06 Sep 2021 07:33:10 +0000

Overview
Implementation
Conclusion

Overview

Displaying the progress of multiple tasks as they are completed can be helpful to the user as it indicates how long they may need to wait for the remaining tasks to finish.

We can accomplish this by incrementing a counter after each promise has resolved.

The video version of this tutorial can be found here...

Our desired output will look something like this, as the tasks are in progress.

Loading 7 out of 100 tasks

Implementation

Let's start with the markup!

All you need is a script tag to point to a JavaScript file (which will be implemented below), and one div element, whose text will be manipulated to update the progress counter of tasks completed.

<!DOCTYPE html>
<html>
<body>
    <div id="progress"></div>    
    <script src="app.js"></script>
</body>
</html>

Next up, the JavaScript!

We will begin by creating a function which resolves a promise after a random time has passed.

We do this as it closely resembles how it will work in a real-world application, e.g. HTTP requests resolving at different times.

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

Secondly, we will create an array of 100 promises and update the progress text to inform the user when all of the tasks have finished.

const loadingBar = document.getElementById('loadingBar');

(async() => {
  const promises = new Array(100)
    .fill(0)
    .map(task);

  loadingBar.textContent = `Loading...`;
  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

Now imagine if this takes 30 seconds to complete. All the user will see on screen is the text 'Loading...' whilst it is in progress.

That is not a very useful message!

Let's improve this now by updating the progress text after each task has resolved.

The code snippet below is the full implementation.

const loadingBar = document.getElementById('loadingBar');

async function task() {
  return new Promise(res => {
    setTimeout(res, Math.random() * 5000);
  })
}

function loadingBarStatus(current, max) {
  loadingBar.textContent = `Loading ${current} of ${max}`;
}

(async() => {
  let current = 1;
  const promises = new Array(100)
    .fill(0)
    .map(() => task().then(() => loadingBarStatus(current++, 100)));

  await Promise.all(promises);
  loadingBar.textContent = `Loading Finished`;
})();

Now, you can see that as each promise is resolved, the counter is incremented and displayed to the user.

Conclusion

In short, all you need to do is update the progress as each promise is resolved.

I hope you found this short tutorial helpful.

Let me know your thoughts in the comments below. 😊

6 Tips to Survive Your First Year as a Junior Developer

Jr. Dev 👨🏾‍💻 — Tue, 18 Aug 2020 06:05:02 +0000

Your first job as a developer can be daunting! Imposter syndrome kicks in. You don’t feel good enough. You are overwhelmed by the huge code base you have to work in. You have no idea what your colleagues are talking about… We have all been there my friend.

Here are 6 tips to help you on your journey.

1. Write it down

When you start your first job, there is so much information that needs to be retained that it would be impossible to remember it all. Whenever you ask a question, write down the answer. It is much better to refer to your notes than to keep asking your colleagues the same question over and over again.

Writing down your answers also allows you to look over your notes to recap important bits of information. And don't just think its programming-related knowledge which needs to be retained. You will also have to learn the companies git workflow, the companies process of moving tickets through the board, the software itself, etc.

2. Ask questions

Ask questions all the time. Do not sit in silence struggling. Also, do not be afraid to ask the same questions you have previously asked. As stated in the point above, there is a lot of information to be gathered, and retaining all of it is more or less impossible.

3. Understand your feelings are normal

Starting your first developer job is daunting. In my first role I felt clueless, I felt way out of my depth and I honestly didn’t think I could stick it out. Every single developer has had this feeling! Your feelings are normal.

Software companies know that junior developers take some time before the company starts benefiting from them in business-terms. Do not feel that you should know everything after a couple of months, heck, even senior developers who join the team would take a lot longer than that to learn a whole new code-base.

4. Play around with the code

Don’t be nervous about touching the code. It is one of the best ways you can learn a code-base. Try and figure out what parts of the system does what; change some code, re-run the program and see what happens. Hopefully before this point, a member of the team has shown you around the repository, so you shouldn’t be clueless when it comes to this point.

If no one has shown you around the code-base, refer to step #2.
And don’t worry, if you screw up you can always revert your changes and start again; assuming your place at work uses a source control such as git to keep track of changes.

5. Learn in your spare time

Some may be reading this shaking their heads right now, but first let me say this; this list is not a definitive guide, you do not have to do what is stated in this article; but doing so will accelerate your progress tenfold.

Whatever you are struggling with during the working day, dedicate an hour or so on the evening to mastering this tool. For me, I struggled with git when I first started, I had only used git for sole projects and I was therefore unaware of a lot of commands which can help in a team setting. After dedicating some time to git and understanding its internals, it has not once bothered me since!

6. Rotate your pull requests

Every member of the team will have their own individual skill set. Use this to your advantage to maximize your potential. You will learn a lot more!

When I first started my job, I would always send my code to be reviewed by one of the three seniors who would always seem to plaster me with comments. Each senior had their own criticisms so it was wise to vary the reviewer of my code.

There were a lot of similarities in the comments I would receive, so of course as time passed, I would already be aware of some of the common pitfalls I was making with my code during development time.

Conclusion

So there you have it; 6 tips to help you survive your first year as a developer.

Good luck!

Header photo by Sushobhan Badhai on Unsplash

Why I Took a 50% Pay Reduction to Become a Software Developer

Jr. Dev 👨🏾‍💻 — Mon, 10 Aug 2020 20:34:42 +0000

Well… it was actually a 55.5% decrease in salary but 50% reads better. But why did I accept this? Was it a stupid mistake? I know my partner probably thought so at the time, albeit she was very supportive of my decision.

TLDR
Long story short; programming enticed me. I became addicted to the art of programming.

Background

Growing up I always had a love for technology. I loved to game on my Super Nintendo back in the day. I loved going on my dad’s old IBM PC when the internet had just become a thing. And, I loved gadgets; from walkmans to mobile phones, and even recently a VR headset.

I loved all things IT that much, that during my high school years, I had selected IT as one of my choices to take forward to obtain a qualification in (it is now mandatory). IT in school focused more so on how to use Microsoft Office tools more than anything else, but I still liked it.

Of course, IT wasn’t my only hobby. I also had a love for sport, football mainly. When I started college, I had chosen the following 3 subjects to study; IT, Physical Education and Psychology. I failed IT in my first year, I began to hate the subject. I was no longer motivated to pursue it and instead of choosing to re-sit my exam, I dropped the subject completely. Instead, I pursued down the path of sports.

After college I went straight to University to pursue a career as a Physiotherapist. I graduated in 2013 and made every bit of effort to make it work. I volunteered to physio for regional semi-professional football teams to gain some experience. I even started my own clinic in the local gym for a year all whilst applying for physio-related jobs. I finally accepted an offer to become a physio contractor in the Royal Air Force. The money was great, and so was the job.

Where it all began

My job as a contractor in the RAF required me to live on base. During my first few months I had no problem with this, in fact I loved it! I was loving life; working during the day and spending my evenings playing Rocket League on my Xbox One and watching TV series from the walking dead to Game of Thrones. On the weekends I would come home to spend time with my partner and my family.

Eventually, I got bored of basically doing nothing productive on the evenings during the working week. I wanted to make a bit of extra cash and utilize my time better. I was alone during the week, I had no distractions, I felt it was important to do something more. I certainly had the time for it. I remember one day googling something along the lines of: How to make money on the side?. The answer which kept popping up all over... you guessed it... Programming!

From this point, January 2017, I dedicated 4-5 hours on an evening after work to programming. I started with HTML & CSS, and moved on to JavaScript and PHP as time went on and my skills progressed.

My intention was not to study 4-5 hours an evening, I planned to spend 1-2 hours. I still wanted time to relax. However, I became hooked instantly to programming, that I could not stop myself from doing just a little bit more.

Applying for jobs

It took 20 months, 7 telephone interviews and 3 failed person-to-person interviews before I got my first developer job. The job was located 40-minutes away from my house. I had been living away from home for 3 years and the idea of me being back sounded great.

There was of course one catch. The money. I had accepted a significant reduction in pay from my previous job.

At the time I was not sure if my partner understood or appreciated this. She had just begun a full-time Nursing degree which would mean predominantly relying on my income for the next 3 years.

I had researched the development prospects of a software engineer prior to applying for jobs of course, and I was every bit confident that the money would come in time. It did.

Conclusion

I have been working professionally as a software developer now for 2 years. I am still shy from the salary I used to be on as a physio, but I am confident that this will come in time, and even be surpassed!

Do I regret my decision to leave my University degree behind? Not one bit. My partner finally came round to understanding, accepting and admitting; that this move was the right thing to do. She loves having me around the home more... I think.

Thank you for reading.

Header photo by Chris Lawton on Unsplash

How to Create a Singleton Logger in Your Server Applications with Webhooks

Jr. Dev 👨🏾‍💻 — Tue, 04 Aug 2020 06:58:40 +0000

Introduction
Setup
Creating a logger factory
Creating a singleton
Using our logger
Configurations
Overview

Introduction

Motivation
Logging is a fundamental part of applications. Logs can inform us of many useful things such as; errors, warnings, stack traces, order of operations, events, and more.

With this information handy, we are able to find, and therefore resolve bugs more quickly, and ensure our applications are running correctly. They also allow us to develop more easily (console.log anyone?).

Logs can be stored to many storage devices, such as slack channels and server logs, making them more accessible to us.

Why a singleton?
A singleton is a creational design pattern whose purpose is to ensure that only one instance of a class exists. We want our logger to be a singleton as we only want one logger instance to be running and logging information at any one time.

What is a transport?
A transport is a location where your logs get stored. For example; they can be stored in a file on your server, sent to a slack or Microsoft teams channel, or just logged to the console, etc.

Setup

We will be using winston as our logging library, which supports multiple transport hooks.

In this article, we will be creating 3 transport hooks:

Console
Daily rotate file
Slack channel

As you could probably guess, the console transport hook will log to the console. The daily rotate file transport hook will log to files on our server which we can configure, for example, we could configure log files to be deleted after a specific number of days. The slack channel transport will send logs to a specified channel.

The console transport is built-in to the winston library. The other 2 transports will need installing in to our project.

Install libraries

npm install --save winston winston-daily-rotate-file winston-slack-webhook-transport

Creating a logger Factory

A factory is another creational design pattern which is responsible for creating objects. Our logger factory will be responsible for creating our logger transports.

// require in our libraries we have just installed
const winston = require('winston');
const WinstonSlackTransport = require('winston-slack-webhook-transport');
const WinstonRotate = require('winston-daily-rotate-file');

function createConsoleTransport(options) {
  return new (winston.transports.Console)(options);
}

function createFileRotateTransport(options) {
  return new (WinstonRotate)(options);
}

function createSlackTransport(options) {
  return new (WinstonSlackTransport)(options);
}

// we pass this function an array of transport objects
// each transport object has 2 properties: type & options
function getLoggerTransports(transports) {
  return transports.map((transport) => {
    const {type, options} = transport;

    switch (type) {
      case 'console':
        return createConsoleTransport(options);
      case 'file-rotate':
        return createFileRotateTransport(options);
      case 'slack':
        return createSlackTransport(options);
    }
  });
}

// our export function which will be invoked by our singleton
module.exports = function create(transports) {
  return winston.createLogger({
    transports: getLoggerTransports(transports)
  });
}

Notice how our create function takes a transports argument. This will be an array of objects, specifying the type of transport we want, along with their configurations.

Creating a singleton

Our singleton will invoke our factory with the logger transport options, and return the one instance we will use throughout our application.

const create = require('../factories/loggerFactory');

// our config which we will populate shortly
const loggerTransports = [];

module.exports = create(loggerTransports);

This is essentially all our singleton needs to do. It invokes the create method from the logger factory, and we export an instance. Now whenever we want to use our logger, we import this file and we will be using the same instance every time.

Using our logger

Now, to use our logger we just need to import it in to the files we want, and use it like so...

const logger = require('./src/utilities/logger');

logger.info('hello world');
logger.warn('warning');
logger.error('arghhh!!');

However, as we have not setup any transports yet, we won't be logging anywhere! An error will present itself in the console to alert you of this.

Let's resolve this next.

Configurations

Create a console configuration
Push the console configuration in to our loggerTransports array in our singleton file.

...

const loggerTransports = [
  {
    type: 'console',
    // specify options here
    options: {}
  }
]

...

When we run our application, you will now notice the application will begin logging errors to the console.

Create a file rotate configuration
Push the file-rotate configuration in to our loggerTransports array in our singleton so it now looks like this...

...

const loggerTransports = [
  {
    type: 'console',
    options: {}
  },
  {
    type: 'file-rotate',
    options: {
      filename: 'filename.log',
      dirname: './logs'
    }
  }
]

...

When we run our application now, you will notice that we have a logs directory with a file in it, where our logs are been written to. Pretty neat, eh?

Checkout more configurations for this transport hook here.

Create a slack configuration
There is a bit more to do with our slack channel. First we need to create a new channel in slack and allow incoming webhooks in to it. You can do this by installing the Incoming webhooks plugin from Slacks app directory and adding the new channel we just made to the configurations. You will receive a webhook url to use in our application, make note of it.

Push the slack configuration in to our loggerTransports array in our singleton so it now looks like this...

...

const loggerTransports = [
  {
    type: 'console',
    options: {}
  },
  {
    type: 'file-rotate',
    options: {
      filename: 'filename.log',
      dirname: './logs'
    }
  },
  {
    type: 'slack',
    options: {
      webhookUrl: 'https://hooks.slack.com/services/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',
      username: 'MY APP'
    }
  }
]

...

Notice the options we specified for our slack transport. We used the webhookUrl property and assigned the url we received from slack. You can optionally specify a username, this will show in the slack channel as the user posting the log messages.

More configurations for this transport can be found here.

Overview

Logging is an essential aspect to creating applications. This article has shown how to make them more accessible and convenient to us, by creating 3 transports to log to.

You can even specify different transports for each environment your application will run in; by placing your logger transport configurations in to your application configurations. Check out this article to understand how to setup different configurations for different environments.

Header photo by Aaron Burden on Unsplash

The Battle of the Array Titans: Lodash vs Vanilla - An Experiment

Jr. Dev 👨🏾‍💻 — Tue, 28 Jul 2020 04:41:45 +0000

Aim
Method
Results
Discussion
Limitations
Conclusion

Aim

To test the performance of common array methods between lodash and vanilla JavaScript.

Method

We will use 2 different arrays in our experiment:

An array of integers
An array of objects

We will test the following methods:

We will run 3 tests, per array type, per method, and take the average time. Performance will be calculated using the native JavaScript performance API.

Data
Our integer array will be a sorted array of 999,999 elements, with the values between 1 and 1,000,000.

Our object array will consist of 99,999 elements, each consisting of 4 properties; with string, integer and boolean property values.

The following script shows how this data will be gathered.

// array of integers
const integerArr = [];
const intLen = 999999;
for (let i = 0; i < intLen; i++) {
  integerArr[i] = i + 1;
};

// array of objects
// age, gender and isProgrammer property values are
// decided at random
const peopleArr = [];
const peopLen = 99999;
for (let i = 0; i < peopLen; i++) {
  const obj = {
    name: 'Alex',
    age: Math.floor(Math.random() * 100),
    gender: Math.floor(Math.random() * 2) === 1 ? 'male' : 'female',
    isProgrammer: Math.floor(Math.random() * 2) === 1
  }

  peopleArr[i] = obj;
}

// export these arrays so we can use them in our test script
module.exports = {
  integerArr,
  peopleArr
};

Test script
The following script shows the methods used to perform the test with, along with the actual results gathering.

We import our arrays and define some helper functions to help perform the tests and print the results.

const {performance} = require('perf_hooks');
const {reduce, map, filter} = require('lodash');
const {integerArr, peopleArr} = require('./data');

// helper function, which receives a function to perform,
// invokes that function, and returns the time taken to perform
function perfTest(test) {
  const start = performance.now();
  test();
  const end = performance.now();

  return (end - start).toFixed(3);
}

// a helper function which logs the time between 2 tests
function logTimes(time1, time2) {
  console.log(time1);
  console.log(time2);
}

Next, we create our functions for testing. Each testing function returns an object with 2 methods; one for testing the array of integers, the other for testing the array of objects.

// each function returns an object of 2 methods
// 1. the test to perform on the integer array
// 2. the test to perform on the object array

// FILTERS
// 1. filter on even numbers
// 2. filter on females
function myFilters() {
  return {
    int: function(num) {
      return num % 2 === 0;
    },

    obj: function(person) {
      return person.gender === 'female';
    }
  }
}

// MAPS
// 1. multiply each value by 2
// 2. add a further property to object, isGodly, which is determined
// by whether the person is a programmer or not
function myMaps() {
  return {
    int: function(num) {
      return num * 2;
    },

    obj: function(person) {
      person.isGodly = person.isProgrammer;

      return person;
    }
  }
}

// REDUCE
// 1. return the sum of elements
// 2. return the sum of ages of people
function myReduces() {
  return {
    int: function(sum, num) {
      return sum += num;
    },

    obj: function(sum, person) {
      return sum += person.age;
    }
  }
}

Finally, we perform the tests and log the results!

// invoke each test so we can easily access the individual tests
const filterTests = myFilters();
const mapTests = myMaps();
const reduceTests = myReduces();

/************ ROUND 1: FILTER *****************/
// lodash integer filter vs vanilla integer filter
const ft1 = perfTest(() => filter(integerArr, filterTests.int));
const ft2 = perfTest(() => integerArr.filter(filterTests.int));

// lodash object filter vs vanilla object filter
const ft3 = perfTest(() => filter(peopleArr, filterTests.obj));
const ft4 = perfTest(() => peopleArr.filter(filterTests.obj));


/************ ROUND 2: MAP ********************/
// lodash integer map vs vanilla integer map
const mt1 = perfTest(() => map(integerArr, mapTests.int));
const mt2 = perfTest(() => integerArr.map(mapTests.int));

// lodash object map vs vanilla object map
const mt3 = perfTest(() => map(peopleArr, mapTests.obj));
const mt4 = perfTest(() => peopleArr.map(mapTests.obj));


/************ ROUND 3: REDUCE *****************/
// lodash integer reduce vs vanilla integer reduce
const rt1 = perfTest(() => reduce(integerArr, reduceTests.int));
const rt2 = perfTest(() => integerArr.reduce(reduceTests.int));

// lodash object reduce vs vanilla object reduce
const rt3 = perfTest(() => reduce(peopleArr, reduceTests.obj));
const rt4 = perfTest(() => peopleArr.reduce(reduceTests.obj))

/************* RESULTS ************* */
console.log('MAP INTEGER');
logTimes(mt1, mt2);

console.log('MAP OBJECT');
logTimes(mt3, mt4);

console.log('FILTER INTEGER');
logTimes(ft1, ft2);

console.log('FILTER OBJECT');
logTimes(ft3, ft4);

console.log('REDUCE INTEGER');
logTimes(rt1, rt2);

console.log('REDUCE OBJECT');
logTimes(rt3, rt4);

Results

Filter

Integer array
Lodash: 26.670(ms)
Native: 26.689(ms)

Object array
Lodash: 5.525(ms)
Native: 2.885(ms)

Map

Integer array
Lodash: 7.612(ms)
Native: 18.743(ms)

Object array
Lodash: 8.349(ms)
Native: 3.411(ms)

Reduce

Integer array
Lodash: 5.028(ms)
Native: 21.073(ms)

Object array
Lodash: 6.392(ms)
Native: 2.482(ms)

Discussion

Filter

Filtering on an array of integers shows no significant difference, in terms of performance, between vanilla and lodash.
Filtering on an array of objects shows that the vanilla filter method performs over twice as quick than the lodash variation.

Map

Mapping on an array of integers shows the lodash variation been over twice as quick than the vanilla map.
The vanilla implementation of map performed twice as quick than lodash, when mapping over an array of objects.

Reduce

Reducing an array of integers shows that lodash performed over 4 times as quick than the vanilla variation.
Reducing over an array of objects shows the vanilla reduce performing 3 times quicker than the lodash version.

Limitations

This experiment is of course not perfect and it comes with some limitations that you should be wary of before deciding which you should consider using in your applications.

The results are only applicable to the length of the data-sets tested.
The results are only applicable to the array of data-types tested.

Conclusion

When looping over an array of integers, the lodash methods seem to perform a lot quicker than their vanilla counterparts.
When looping over an array of objects, the vanilla methods out-perform the lodash variations.

Header photo by Adlan on Unsplash

How to Create Configurations for Different Environments in Your Node Applications

Jr. Dev 👨🏾‍💻 — Tue, 21 Jul 2020 06:10:56 +0000

Having multiple configurations can be handy for your node applications. It is quite probable that your applications will run in different environments and require slightly different configurations between them. For example, when you are developing, you may be using your local mysql for your database connection; this will not be the case in a production or stage environment.

This article will show you how to set up different configurations, for different environments, across your applications.

Basic setup
Creating your npm scripts
Configurations
Implementation
Conclusion

Basic setup

What you need to do:

Create your package.json file using npm init.
Save the config dependency in your application.
Create your index.js file, which will be your entry point specified in step 1.
Create your configuration files inside a config directory.

npm init    # accept defaults
npm install –save config
touch index.js

# create configuration dir and files
mkdir config
touch config/default.json
touch config/production.json

Npm scripts

Now, create 2 scripts, which:

set your NODE_ENV to test and runs your application
set your NODE_ENV to production and runs your application

The NODE_ENV should be set to the same name as one of your configuration files. If it is not, then the default configuration will be used.

In this example, you set your NODE_ENV to test and production. As test does not have its own configuration file, the default will be used. Production does have its own configuration file, therefore your production configuration will be used, when running production script.

Linux

“scripts”: {
  “test”: “export NODE_ENV=test && node index.js”
  “production”: “export NODE_ENV=production && node index.js”
}

Windows
Notice the lack of a space before the ampersands.

“scripts”: {
  “test”: “set NODE_ENV=test&& node index.js”
  “production”: “set NODE_ENV=production&& node index.js”
}

Configurations

Now, add your configurations:

Default configurations
Configurations to be used in production

The default configurations will be used across all environments. When a property cannot be found in its specific configuration mode, then it will check to see if it exists in the default configuration before throwing an error.

config/default.json

{
  “database”: {
    “host”: “localhost”,
    “port”: 3306,
    “username”: “root”,
    “password”: “Passw0rd!”,
    “dbName”: “app”
  }
}

config/production.json

{
  “database”: {
    “host”: “192.168.1.1”,
    “username”: “root”,
    “password”: “somethi1ngAbitM0r3Secur3”,
    “dbName”: “app”
  }
}

Notice how the port property is not set in the production configuration.

If you are running in production, and you try to access the port property, it will retrieve the port value from your default configuration, as it is not specified in the production.json.

Use the default configurations for common properties that occur between all your environments.

Implementation

In order to access your configurations, you need to do 3 things:

Require in the config dependency.
Check the existence of your configuration property using the has method.
Get the value of your configuration property using the get method.

If a configuration property is not found, and you try to access it, an error will be thrown. Therefore, it is good practice to check the existence of a property using the has method, as seen in the example below.

Index.js

const config = require(‘config’);

// the NODE_ENV you set in your package.json scripts
console.log(process.env.NODE_ENV);

// Does the property exists? If so assign the values to variables, else assign null
const host = config.has(‘database.host’) ? config.get(‘database.host’) : null;
const port = config.has(‘database.port’) ? config.get(‘database.port’) : null;

if (!host || !port) {
  console.error(‘database configuration settings not set’);
}

console.log(`${host}:${port}`);

Conclusion

If you are running your applications in multiple environments, consider using this approach, especially if you have a lot of configurations to be set, e.g. database connections, email settings, remote logging configurations, etc.

Be aware that you do not add any sensitive information to your source control if you are using public repositories for your applications.

Header photo by Adi Goldstein on Unsplash

6 Things Every Software Engineer Should Know to Standout

Jr. Dev 👨🏾‍💻 — Tue, 14 Jul 2020 06:42:37 +0000

1. Data Structures & Algorithms

Why?

Data structures and algorithms are the backbone of computer science. An algorithm refers to the logical computational steps it takes to solve a problem. A data structure is a way to organize and store data effectively.

Learning the common algorithms and data structures will help you solve problems more efficiently in your applications.

Resources

Books

Courses

2. Computer Networking

Why?

Networking refers to the communication of data between networks. Understanding the basic concepts of computer networking will help you as a developer understand the magic behind how computers send and receive data.

Resources

Books

Courses

Computer Networking Complete Course - Beginner to Advanced

3. Operating Systems

Why?

Studying operating systems will give you an understanding of how computers work under the hood. You will learn how processes and memory are managed, and how applications are able to run concurrently with other processes, among many other things.

Resources

Books

Courses

Operating Systems

4. Database Management

Why?

A database is an organized collection of data, allowing storage and retrieval of data. As a developer you will be working with a lot of data; knowing how to effectively store and retrieve this data will go a long way.

Resources

Books

Courses

Database Management Essentials

5. Design Patterns

Why?

Design patterns are reusable solutions to commonly occurring problems in software development. Learning design patterns will help you conquer problems you are faced with as a developer more effectively. Having good knowledge of design patterns will allow you to weigh up the pros & cons of potential solutions, allowing you to pick the best tool for the job.

Resources

Books

Courses

6. Compiler Design

Why?

Compilation refers to the translation of high-level code down to machine code so that your CPU is able to understand it. By understanding the compilation process, you will understand how programming languages are made, which will allow you to make better use of a language; such as being able to optimize code better, as well as improve debugging skills, and more.

Resources

Books

Courses

Compiler Design

Header photo by Jessica Ruscello on Unsplash

How to Create a Priority Queue With JavaScript

Jr. Dev 👨🏾‍💻 — Tue, 07 Jul 2020 04:39:32 +0000

A priority queue is a special type of queue, where the elements within the queue have a specified priority-level.

In a traditional queue, there is a First-In-First-Out (FIFO) rule, similar to queuing up in a shop. A priority queue would enable someone with a higher priority to jump the queue and go all the way to the front of the line.

Heaps
Terminology
Implementation
Analysis
Use Cases
Challenge

Heaps

Heaps are a tree-based data structure, usually implemented as an array, which represent a priority queue. There are two types of heaps:

Min Heap
Max Heap

Once you know one of these, it is simple to know the other, as it is just the reverse.

In this article we will be looking at max-heaps. Afterwards, it would be a good exercise to see if you could implement a min-heap using the knowledge you have gained from this article.

In the image above, you will see we have a sorted array, which can be represented as a binary tree, with the elements: 26, 24, 20, 18 & 17

Notice how each element is added to the tree from left to right. If a new element was to be inserted, it would become the left child of the node which has a priority level of 20, assuming the element had a lesser priority than this.

The first node, 26, is called the root node, in a max-heap this is the largest number, i.e. the node with the highest priority which should be extracted next. Each node can have a left child, and a right child. Notice how the children of each node are lesser than the priority value of the parent node. Each node, other than the root node, has a parent node, which is just one element up from the node you are looking at.

Elements with any priority value can be inserted in to the heap. With every insertion, there is an ordering completed to correctly position the newly inserted element.

Elements are dequeued/extracted from the root, which similar to insertion, is also followed by an ordering operation, in order to correctly position the next element with the highest priority at the root of the tree.

Terminology

Node: An element within the tree.
Branch: The edges which connect the nodes together.
Root: The top level node. This is the element with the largest value in a max-heap, and the element with the lowest value in a min-heap.
Children: Each node can have up to 2 children; a left child, and a right child. Both which should be lower in value than their parent.
Parent: If you follow the branch up from a node one-level, you will reach the direct-parent of that node.
Height of the tree: The distance from the root of the tree, to the lowest node in the tree.

Implementation

Public Methods:

swap
peek
insert
extractMax
heapify

Helper Functions
Firstly, we will create some helper functions so we are able to work out from any node; what index the left and right child of that node are, and what index its parent is.

const leftChild = (index) => index * 2 + 1;
const rightChild = (index) => index * 2 + 2;
const parent = (index) => Math.floor((index - 1) / 2);

In order to get the position of a left child of a node, we multiply the index by 2, and add 1 (2n + 1).
In order to get the right child of a node, we multiply the index by 2, and add 2 (2n + 2).
In order to get the parent of a node, we subtract our index by 1, and divide by 2. We round down any floating numbers we get from dividing an odd number ((n - 1) / 2).

Constructor
This initialises our heap as an empty array.

function maxHeap() {
  this.heap = [];
}

Swap
Swap swaps two elements in an array. This is used during insertion and extraction.

MaxHeap.prototype.swap = function (indexOne, indexTwo) {
  const tmp = this.heap[indexOne];
  this.heap[indexOne] = this.heap[indexTwo];
  this.heap[indexTwo] = tmp;
}

Peek
Peek shows you the current root of the heap. It does not extract the root node from the tree.

maxHeap.prototype.peek = function() {
  // the root is always the highest priority item
  return this.heap[0];
}

Insert
Insert pushes an element on to our heap.

After we have inserted the element, we correctly position the element in our heap by comparing the values of the newly inserted element with its parent. If the newly inserted elements priority is greater, then the newly inserted element is swapped with its parent. This is recursively called until the element is rightly positioned.

maxHeap.prototype.insert = function(element) {
  // push element to the end of the heap
  this.heap.push(element);

  // the index of the element we have just pushed
  let index = this.heap.length - 1;

  // if the element is greater than its parent:
  // swap element with its parent
  while (index !== 0 && this.heap[index] > this.heap[parent(index)]) {
    this.swap(index, parent(index));

    index = parent(index);
  }
}

ExtractMax
ExtractMax extracts the root from the heap, and calls heapify to reposition the rest of the heap, placing the next highest priority item at the root.

maxHeap.prototype.extractMax = function() {
  // remove the first element from the heap
  const root = this.heap.shift();

  // put the last element to the front of the heap
  // and remove the last element from the heap as it now
  // sits at the front of the heap
  this.heap.unshift(this.heap[this.heap.length - 1]);
  this.heap.pop();

  // correctly re-position heap
  this.heapify(0);

  return root;
}

Heapify
Heapify re-positions the heap by comparing the left and right child of a specific node, and swapping them as necessary. This is recursively called until the heap is correctly re-positioned.

maxHeap.prototype.heapify = function(index) {
  let left = leftChild(index);
  let right = rightChild(index);
  let smallest = index;

  // if the left child is bigger than the node we are looking at
  if (left < this.heap.length && this.heap[smallest] < this.heap[left]) {
    smallest = left;
  }

  // if the right child is bigger than the node we are looking at
  if (right < this.heap.length && this.heap[smallest] < this.heap[right]) {
    smallest = right;
  }

  // if the value of smallest has changed, then some swapping needs to be done
  // and this method needs to be called again with the swapped element
  if (smallest != index) {
    this.swap(smallest, index);

    this.heapify(smallest);
  }
}

Use Cases

The main use case for a priority queue is a scheduler of tasks of some sort. They are useful when you need instant access to the largest item (or smallest item in a min-heap).

For example, a priority queue could be used in an Accident & Emergency setting. Patients are walking in with injuries, and the patients with the most severe injuries need to be treated first, regardless of whether they walked in first or not.

Another example would be that you have a backlog of features you want to implement for your cool new app, and you need to prioritise the features which customers are constantly asking (begging) for and complete these first.

Analysis

insert - O(log n)
peek - O(1)
extractMax / extractMin - O(log n)

Can you identify why the upper bounds are as they are?

When we insert, we are only comparing one half of the tree. We compare the new elements priority value against its parent(s), recursively, until we get to the root, and we only compare them once, hence O(log n).

Extraction is O(log n) as we run the heapify method during this operation to maintain the heap property.

Challenge

Now see if you can create a min-heap. The methods are the same except the extractMax() method will be called extractMin(). The min-heap is the reverse of the max-heap, that is the smallest element is at the root of the heap.

Header photo by Lilian Velet on Unsplash

1 Simple Trick to Boost Performance Using Reduce

Jr. Dev 👨🏾‍💻 — Tue, 30 Jun 2020 05:34:52 +0000

Have you ever realised that using a map followed by a filter, or vice versa, is quite common? Did you know that you could half the computation time needed if you just used a reduce instead?

We will begin by recapping the three array methods. Feel free to jump ahead to section 5 if you are already comfortable with these.

Overview
Map
Filter
Reduce
Map + Filter = Reduce
Performance

Overview

Map, filter and reduce are all methods on the Array prototype. They are used for different purposes, but they all involve iterating over the elements within an array using a callback.

Map

Map returns an array of the same length of the original array it was called on. It takes one parameter, a function, which can take 3 arguments:

The current item to iterate over
The index of the current item
The original array

Map does not mutate the original array, it creates a new array, so the value of a map must be assigned to a variable like so:

const nums = [10, 20, 30, 40, 50];

// assign value of map into result variable
const result = nums.map(function(item, index, arr) {});  // RIGHT

nums.map(function(item, index, arr) {}); // WRONG!

Let's take a look at an example where we have an array of years, and we want to get the age that these years represent, and we also want to keep the original year value too. This means that our array of integers, will be mapped to an array of objects, with each object having 2 properties: year and age.

Example:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const ages = years.map(function(year) {
  const age = currentYear - year;

  // each element will now be an object with 2 values: year & age   
  return {
    year,
    age
  }
});

We now have an array, ages, which looks like this:

ages = [
  {year: 1991, age: 29},
  {year: 1999, age: 21},
  {year: 2000, age: 20},
  {year: 2010, age: 10},
  {year: 2014, age: 6}
]

Filter

Filter, as it sounds, filters the elements we want from an array into a new array, disregarding any elements we do not want.
It takes one parameter, a function, which can take 3 arguments:

The current item to iterate over
The index of the current item
The original array

The function acts as a predicate, and returns the contents of the array, as they originally were, into the newly assigned variable. Unlike map, filter does not necessarily return an array with the same length as the array it was called on.

Like map, filter does not mutate the original array, so the value of a filter must be assigned to a variable.

Let's take a look at an example where have a years array, which represents the year people were born, and we want a new array which contains only the years which would equate to a person being over the age of 18.

Example:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const over18 = years.filter(function(year) {
  // if the year equates to over 18, then put that year
  // into our new over18 array
  return (currentYear - year) > 18;
});

We now have an array, over18, which looks like this:

over18 = [1991, 1999, 2000];

Reduce

Reduce reduces an array down into a single value. That single value could be any JavaScript type; such as a string or a number, or even an array or object.

It takes two parameters:

A function which takes 4 arguments:

a. An accumulator

b. The current item to iterate over

c. The current items index

d. The source array
The initial value of our single value we want to return

Like map and filter, reduce does not mutate the original array, so the value of a reduce must be assigned to a variable.

Example:

const nums = [10, 20, 30, 40, 50];
const sum = nums.reduce(function(total, num) {
  total += num;

  return total;
}, 0);

console.log(sum);  // 150

This could also be written like this:


const nums = [10, 20, 30, 40, 50];

const reducer = (total, num) => total += num;
const sum = nums.reduce(reducer, 0);

We initialise our array, nums, and our reducer function which just adds a number to our current total value. We then initialise sum and call the reduce method, passing our reducer as the first argument, and our initial value we set our total at, which in this case is 0. As 0 is our initial value, this will be the value of total during the first iteration.

Map + Filter = Reduce

Now that we have recapped what map, filter and reduce do, and how they differ from each other, let us now understand the title of this article.

It is quite common in programming that you may want to filter elements in an array, as well as change their contents slightly. I use the word change lightly, as we know that using these methods do not mutate our original array.

Remember:

A filter retains the elements from an array that we are interested in, and assigns it to a new variable
A map always assigns an array to a new variable of the same length as the array it was called on

So why call a filter and a map, when you can essentially get the task done in half the time using a reduce?

Using a reduce we can complete the task we need of filtering and mapping the contents of an array in one step, instead of two.

Let us look at an example where we have a years array, which represents the years people were born in, and we want to retain only those who are over the age of 18, as well as work out the age of the people.

Example:

const years = [1991, 1999, 2000, 2010, 2014];
const currentYear = (new Date).getFullYear();

const reducer = (accumulator, year) => {
  const age = currentYear - year;

  if (age < 18) {
    return accumulator;
  }

  accumulator.push({
    year,
    age
  });

  return accumulator;
}

const over18Ages = years.reduce(reducer, []);

We have now essentially combined the examples which we had in the filter section, and map section, in to a reduce. This is the result:

over18Ages = [
  {year: 1991, age: 29},
  {year: 1999, age: 21},
  {year: 2000, age: 20}
]

Our original array, years, had 5 elements, if we used a map followed by a filter, we would have completed 10 iterations to get the same result that we got in 5 iterations with a reduce. However, under the hood, map, filter and reduce do slightly different things, so does it actually make a difference in performance?

Performance

Let's see what an extreme, unrealistic, but simple example shows...

let arr = [];

// populate array with 100,000,000 integers
for (let i = 0; i < 100000000; i++) {
  arr.push(i);
}

// calculate time taken to perform a simple map,
// of multiplying each element by 2
const mapStart = performance.now();
const mapResult = arr.map((num) => num * 2);
const mapEnd = performance.now();

// calculate time taken to perform a simple filter,
// of only returning numbers greater than 10,000
const filterStart = performance.now();
const filterResult = mapResult.filter((num) => num > 10000);
const filterEnd = performance.now();

// calculate time taken to perform a simple reduce,
// of populating an array of numbers whose initial value
// is greater than 10,000, then doubling this number
// and pushing it to our total
const reduceStart = performance.now();
const reduceResult = arr.reduce((total, num) => {
  const double = num * 2;

  if (double <= 10000) {
    return total;
  }

  total.push(double);

  return total;
}, []);
const reduceEnd = performance.now();

console.log(`map time (ms): ${mapEnd - mapStart}`);
console.log(`filter time(ms): ${filterEnd - filterStart}`);
console.log(`reduce time(ms): ${reduceEnd - reduceStart}`);

// map time (ms): 2415.8499999903142
// filter time(ms): 3142.439999995986
// reduce time(ms): 3068.4299999993527

I was extreme to push 100,000,000 integers into an array, but I wanted to show you the performance difference in seconds. The results show that it took reduce 3.14 seconds, using a reduce, to compute what was essentially done in 5.56 seconds using filter and map. And bear in mind this is just dealing with an array of integers. The computation time would have taken longer if dealing with strings or objects.

conclusion

When you see yourself using a map followed by a filter, or vice versa, consider using a reduce instead and complete the computation in half the time! As a programmer you need to weigh up the pros and cons, as what you may gain in terms of performance, you may lose in readability in your code.

Reduce has many use cases, this is just one.

Happy programming 😊

Header photo by chuttersnap on Unsplash

Oi You! Stop Requesting Everything: A Simple Guide to Memoization

Jr. Dev 👨🏾‍💻 — Tue, 23 Jun 2020 06:53:45 +0000

Oi you, stop making expensive function calls to request the same data you just retrieved 2 minutes ago! How, you ask? well that’s easy, using memoization of course.

Definition

Memoization is an optimization technique in dynamic programming, which involves storing the values of expensive function calls in memory, so that when you need to retrieve these values again, you can do so much, much quicker!

Aims

To understand the basic concepts of memoization.
To recognise when you should use memoization.
To recognise when you should not use memoization.

Prerequisites

Although not necessary, this article will be better understood if you already have some knowledge of:

Overview

Memoization is a form of caching, which involves storing the return value of a function in memory. When the function is called, the cache object is checked to see if the value already exists for the input passed, if it does, then the cached result is returned. If it does not exist in the cache, then the heavy computation is done, and the returned value is also stored in the cache, to be retrieved quicker the next time it is needed.

Let’s take a look at a basic example...

Basic Example

1. Let’s create a closure

We use a closure to encapsulate our cache object, which we initialise as an empty object. We also add the function which will be checking the cache, and doing the heavy work.

const memoizeFn = () => {
  // our cache object
  let cache = {};

  return (input) => {
    // the contents of the function which will be doing the heavy work
  }
}

2. Let’s create our function within the closure

In this example, we will be using a function which doubles the input, which is clearly not a high demanding function, but it serves for this example.

const memoizeFn = () => {
  let cache = {};

  return (input) => {
    const result = input * 2;

    return result;
  }
}

3. Now, time to memoize

All we really need to do, is add an if..else condition in our inner function, to see if the value exists in the cache.

const memoizeFn = () => {
  let cache = {};

  return (input) => {
    // lets log our cache here so we can see what is stored
    // when we call our function
    console.log(cache);

    // have we got the result of this input already from a previous call?
    if (cache[input]) {
     // nice, we do! No need for any heavy computation here!
      return cache[input];
    } else {
      // it’s not in our cache!
      const result = input * 2;

      // store the result in the cache so next time it is called with this input
      // we can retrieve it from our cache
      cache[input] = result;

      return result;
    }
  }
}

As you can see from the example above, we have a closure, memoizeFn, which initialises our cache with an empty object, and returns a heavy computational pure function, which takes a number as an input. This input is used as our key in the cached object. Each time the function is invoked, the cache is checked to see if we already have a result for our input.

4. Let’s see it in action

// this invokes the first function and initialises our cache object
const doubleInput = memoizeFn();

doubleInput(10); // console log = {}
doubleInput(20); // console log = {10: 20}

// 10 is in our cache. No heavy computation needed
doubleInput(10); // console log = {10: 20, 20: 40}

The memoizeFn is invoked and assigned to the doubleInput variable, this variable can now access the cache object when it is invoked. First we call doubleInput with the value 10, at this point our cache object is empty, so the heavy computation of doubling this number needs to be done. Next, we pass 20 as our input, again, the this needs to run through the heavy computation section of the function as it does not exist in our cache. Finally, we pass 10 again to our function, the cache object is checked to see if a value with the key 10 exists, which it does, so the value is retrieved from the cache!

So, Where Would I Use This in the Real World?

Let’s take a look at a more real-world example. Say you are creating a SPA social media platform where a user can have a list of friends, and when the user clicks on one of their friends, it returns that user’s profile. We will need to call an API which returns the data related to that profile, right? Correct. But what if the user, as they are navigating round the website, returns to a profile they visited previously, do we want to call that API again? We could, or we could use memoization. Here’s how:

const memoizeUser = () => {
  let cache = {};

  return async (userId) => {
    if (cache[userId]) {
      return cache[userId];
    }

    // it's not in our cache, we need to hit the API
    // this could take a little while...
    const data = await fetch(`https://myapi.com/users/{userId}`);

    const user = await data.json();

    cache[userId] = user;

    return user;
  }
}

Here’s is our function, which looks very similar to our first example. Next, let’s see how we can use it.

// get access to the cache
const getUser = memoizeUser();

// add a click event listener to a button which gets a user’s profile
// this button will have an id of the users id that it accesses
document.querySelector('#getUserButton').addEventListener('click', async (e) => {
  const userId = e.target.id;

  // have we visited this user before? 
  const userData = await getUser(userId); 

  // rest of function which returns users profile using the
  // userData retrieved above
});

when a users profile is clicked, we get the user id from the button, we then call getUser, which returns the users data. This will hit an API, unless we already have it in our cache from previously visiting this users profile, which in this case, the call to the server is not necessary, and we can get the data directly from the cache.

Simple, right? This covers the basics of memoization.

Time to Take it up a Notch

If you want to be really clever, you could even pass the heavy computational function to the closure itself, which could take a variable amount of arguments.

const memoize = (fn) => {
  let cache = {};

  return (...args) => {
    // as this now takes variable arguments, we want to create a unique key
    // you would need to define this hash function yourself
    const key = hash(args);

    if (!cache[key]) {
      cache[key] = fn(...args);
    }

    return cache[key];
  }
}

// some functions we can pass to memoize
const add = (num1, num2) => num1 + num2;
const subtract = (num1, num2) => num1 - num2;

// these 2 will have different cache objects thanks to closures
const add2Numbers = memoize(add);
const subtract2Numbers = memoize(subtract);

const result1 = add2Numbers(10, 20);
const result2 = add2Numbers(20, 30);

const result3 = subtract2Numbers(10, 5);

Pretty cool, right? We can define this memoize wrapper, and pass a number of functions to it, which each take a variable amount of arguments.

Some Do's and Don'ts

When can memoization be useful?

When retrieving fixed data from an API.
When performing demanding computation which may regularly reoccur for a given input.

When not to use memoization

When retrieving data from an API whose data changes regularly.
Simple function calls.

To Summarise

Memoization is a form of caching, which stores the result of a demanding function.
It is a simple technique which can be easily implemented in to existing code-bases to improve performance.
Memoization is useful when dealing with fixed-data APIs, and regularly-occurring heavy computational functions.

How to Write a Cover Letter to Land Your First Dev Job

Jr. Dev 👨🏾‍💻 — Tue, 16 Jun 2020 15:06:24 +0000

What is a Cover Letter?

A cover letter is a document which is sent accompanying your CV as part of a job application, and it is usually the first thing a recruiter will read, so it is important you get it right.

What Are We Going to Cover?

Why it is important to have a good cover letter.
Some tips on how you can improve your cover letter as part of your job application.

Motivation

At the beginning of the year, I began accompanying the HR manager and the lead developer in conducting interviews for web developers. Throughout the year I have been filtered through some CV’s and cover letters to offer my opinion on whether the candidate should be brought in for interviews. I have seen some good cover letters, and I have some seen some pretty poor ones (as well as CV’s but this a blog for another time). This is what has motivated me to create this article.

Why Should I Care?

The cover letter is most likely going to be the first thing the recruiter is going to read in your application. If your cover letter does not excite the recruiter, then you better have a pretty impressive CV!

I am sure you are familiar with the phrase that it only takes several seconds of meeting someone for them to form a first impression of you; well that sentiment applies here too. I could not believe the amount of cover letters I saw which were clearly copied and pasted from application to application; what a wasted opportunity.

If you are a junior developer, applying for your first dev role, then there is extra importance in a cover letter, because you really need to sell yourself. Following are some tips which can help you do just that…

Got Any Tips?

Firstly, this article does not intend to outline how you should structure your cover letter, or how you should sign and close it, etc. There are plenty of articles on the internet surrounding this topic and you should do your research on this matter if you are not familiar with it. Instead, I am going to tailor this article towards developers who are either; juniors trying to get their foot in the door, or experienced developers looking to level up and apply for higher positions than what they are currently working at.

Firstly...

first and foremost, do not copy and paste! If you do, all you are showing the recruiter is that you are; lazy, lack willingness and that you do not actually care about working at their company.

You need to tailor your cover letter by researching the company you are applying for. You can gather a lot of useful information in just a simple 5-minute search, which will help you with your application.

... It's Not All About You...

If you have followed the point above, then you have hopefully gained some insightful information about the company. Information which may help includes:

Why are the company hiring? Are they expanding? Is a new office opening? Is the position opening as another member has been promoted?
What is it that the company does? How and when did it start? Can you get an insight in to how the business has done in the last year or so?

With the information gained above, you can make your application a whole lot more personal. For example, a snippet of how you could use this information may include:

"I can see that you are expanding and I am confident I would become a key member of the team..."

"I have previously dealt with a very similar client base to yours..."

"I have a keen interest in working in the {industry name} industry due to…"

"I believe I can help {company name} continue its current rate of success by..."

Notice the subtleties in the above statements and apply them to your application. They make a big difference.

... But Some of It Is

I understand that you may be eagerly applying for every junior position under the sun, but there must be something about a particular position that excites you. My current position is at an aviation company who produce software for the ground staff and flight crew to interact with each other. At the time, I didn’t know I wanted to work in the aviation industry, but when I read the application, and I looked in to the product that they create, along with the company itself, it sounded pretty darn cool and I wanted them to know I thought that.

Bear in mind, that as a junior developer, you may be up against some candidates with more experience than you. Or, perhaps you are a self-taught developer and you are competing with computer science graduates, but this is not all a company is looking for when selecting applicants. They also want; someone with good soft skills, someone who will fit well in to their current teams, among other non-tech related skills. So just because you are competing with someone with a stronger technical background than you, it does not mean you are out of the race just yet!

You need to sound enthusiastic, eager to learn and confident in your current skills. Usually in a job advert, the application will outline what skills they are looking for. Pluck these words out of this list that suits you, and sell yourself on them. An example of required skills in a job ad might look something like this:

Strong problem-solving skills
Good communication skills, both written and verbal
Able to work as part of a team
Excellent attention to detail
Good organisational skills
Eager to learn
A strong work ethic
Being able to manage your own workload and prioritise accordingly
Good working knowledge of HTML and CSS
Knowledge of JavaScript and it’s common frameworks

Pick your strongest attributes from this list and sell yourself. It is a good idea to pick a couple of soft and hard skills here. Honestly, some of these are just buzzwords and you don’t even need to go in to much detail on them. Some example snippets may be:

"I pride myself on my communication skills..."

"Over the past year, I have been improving my knowledge of JavaScript by learning thoroughly which shows my eagerness to learn..."

"I can see that you are looking for someone who has good organisational skills and has excellent attention to detail and I believe I have just that..."

"I have good working knowledge of HTML and CSS, please refer to my website outlined in my CV..."

Finally

I know I said I wasn’t going to make this a lesson on structure, but a couple of points to bear in mind are:

keep the length of a cover letter to about half a side of A4, approximately 3-5 short paragraphs.
If you have a name to address from the job application, use it. It makes it more personal.

To Summarise:

Do not copy and paste cover letters between applications.
Research the company you are applying for and include the relevant information you have found in your cover letter.
Use the job advert to help you focus on the skills the company is looking for in a candidate and use this in your application.
Keep your cover letter short, relevant and concise.

What Did We Learn?

Hopefully, now you know the importance of a cover letter, and you have some new tips on how to improve your applications in order to land that job.

Good luck!

DEV Community: Jr. Dev 👨🏾‍💻

Creating a Compiler with JavaScript: Theory

Overview

Follow along on YouTube

Contents

Benefits of Learning Compiler Theory

Definition

Examples

Babel

TypeScript

G++

How Compilers Work

Scanner

Parser

Generator

Diagram

Conclusion

How to Display the Progress of Promises in JavaScript

Contents

Overview

Implementation

Conclusion

6 Tips to Survive Your First Year as a Junior Developer

1. Write it down

2. Ask questions

3. Understand your feelings are normal

4. Play around with the code

5. Learn in your spare time

6. Rotate your pull requests

Conclusion

Why I Took a 50% Pay Reduction to Become a Software Developer

Background

Where it all began

Applying for jobs

Conclusion

How to Create a Singleton Logger in Your Server Applications with Webhooks

Contents

Introduction

Setup

Creating a logger Factory

Creating a singleton

Using our logger

Configurations

Overview

The Battle of the Array Titans: Lodash vs Vanilla - An Experiment

Contents

Aim

Method

Results

Filter

Map

Reduce

Discussion

Limitations

Conclusion

How to Create Configurations for Different Environments in Your Node Applications

Contents

Basic setup

Npm scripts

Configurations

Implementation

Conclusion

6 Things Every Software Engineer Should Know to Standout

1. Data Structures & Algorithms

Why?

Resources

2. Computer Networking

Why?

Resources

3. Operating Systems

Why?

Resources

4. Database Management

Why?

Resources

5. Design Patterns

Why?

Resources

6. Compiler Design

Why?