DEV Community: Doaa Mahely

A day in the life, Ramadan edition

Doaa Mahely — Fri, 23 Apr 2021 15:21:09 +0000

It's that time of year again, when billions of Muslims start fasting from dawn until dusk. Ramadan timings depend on the Islamic lunar calendar, which makes it shift around 10 or 11 days every year. So for the last decade, it always happened in the summer when it is very hot and humid where I live. Luckily, summer vacation meant that I didn't have to go to school or university while fasting. This year is my second year fasting while working full time, and I thought I'd share how it's going and the impact it has on me.

Since I live in a majority Muslim country, work hours are reduced by law during Ramadan. The usual 9-hour work day in the private sector is reduced to 7 hours, minus the extra hour or half hour that was for your lunch break. At my current workplace, I was able to choose whether to work 9AM - 3PM or 10AM - 4PM. Being anything but a morning person, I opted to start the day at 10AM. Some companies take it even further and allow for more flexibility, only maintaining that employees work their hours whenever suits them.

Many people report that they can focus better and reach a flow state easier while fasting. Unfortunately, that isn't the case for me! In the last few years, I realized a couple of things about my productivity: I'm pretty slow in the morning, and I get my first burst of energy in the afternoon. Then I really get going and produce my best work late at night.

Because of this, I try to do certain types of work during particular hours. For example, I don't like starting the day with meetings or talking to people. My favorite morning activity is debugging or conducting code reviews because I can just focus on one thing without having to think too much, and I don't have to do any synchronous communication. Then, in the afternoon, I usually get to follow ups and meetings and start coding.

I'm an insomniac and no matter what, I always get a lot of energy close to 10PM. I used to pick up some work tasks at night if I felt I was behind or just didn't have anything better to do. However, since the pandemic started and working from home has been thrust upon us, I've been careful to separate my working hours from my non-working hours.

Now, I wouldn't say I'm necessarily into music, but I only realized how hard it is for me to get into a flow without it last Ramadan. That's because I stop listening to music during the month out of discipline. I experimented with podcasts, audiobooks and those deep focus music videos on YouTubes with no luck. Then, I started playing TV shows and movies in the background just so I can have something to hear, and that helped me focus (and understand and catch up on a lot of pop culture!).

Personally, Ramadan is the only month a year I can maintain a daily routine. That's because every day looks more or less the same: I wake up, work, eat, pray, read and unwind at the same time. Plus, my social calendar gets cleared up, as I don't schedule any appointments and cut back on gatherings and going out. So I grabbed the opportunity and started spending two hours a day on dedicated learning and working on side projects. It's been fun being consistently productive and I hope I'll be able to continue this trend till the end of the month.

Thanks for reading 👋 Until next time.
Cover photo by Rawan Yasser on Unsplash.

All About Closures

Doaa Mahely — Tue, 06 Apr 2021 20:58:39 +0000

I know what you're about to say. I, too, have read dozens of posts on JavaScript closures. But closures haven't really clicked for me until I read the MDN page three times then attempted to explain the concept to my mentor, @tryggvigy. Everything I learned from our conversation is written below.

What is a closure

One of the reasons I couldn't get a good grasp on closures is because they don't mean anything to me in a regular context. In plain English, a closure is the process or act of closing something, and what am I gonna close in JavaScript except for my editor when I get one too many undefined is not a function errors?

People have different ways of explaining what a closure is. The short version is that a closure is a function's ability to access variables that are defined outside of it. If we have a function B inside another function A, any variables that are defined in function A can be accessed by function B.

function A() {
  const one = 1;
  const two = 2;

  function B() {
    console.log(`${one} plus ${one} equals ${two}`);
  }

  B();
}

A();

The above will log "1 plus 1 equals 2". This snippet calls function B inside of function A, so that function B executes whenever function A is called, such as in the last line.

A useful attribute of closures is that they create variables that are private to a function. For example, the variable one cannot be accessed outside of function A. This encourages us to declare variables only in the scope we need them in, and avoid unnecessary global variables.

Naming

Now that we understand what closures are, why did they choose to call them that? Some people say that function A closes over function B, since it is effectively protecting it from being read elsewhere in the code.

And that's it for closures! But we can go a little bit further and relate them to two more concepts in JavaScript that are very closely related: higher order functions and lexical scope.

Higher order functions

Most examples I've seen online will not look like the previous one, but will instead utilize higher order functions. A higher order function is a function that returns another function. Since higher order functions include outer and inner functions by definition, this means that every higher order function uses closures. However, not every function that has a closure is a higher order function, like we saw in the first example. The same snippet can be rewritten to use higher order functions:

function A() {
  const one = 1;
  const two = 2;

  return function B() {
    console.log(`${one} plus ${one} equals ${two}`);
  }
}

A()();

In this case, using A() will return the body of function B, so we're using A()() in order to execute function B.

I'm using ES5 syntax but all of these concepts exist in ES6 as well.

const A = () => {
  const one = 1;
  const two = 2;

  return B => {
    console.log(`${one} plus ${one} equals ${two}`);
  }
}

A()();

Lexical scope

The other concept is lexical scope. I'm not even sure what lexical means, but in JavaScript, a function's scope starts from its opening curly bracket and ends with its closing bracket.

The innermost white bracket in the image is the local scope of function B. The middle red bracket is the local scope of function A, and the identical green line is the lexical scope of function B.

That's because the lexical scope of a function is the function's own local scope plus the local scope of its surrounding function(s). This means that the local scope of an outer function equals the lexical scope of an inner function.

Now we can rewrite our definition of closures from a function's ability to access variables declared outside of it to a function's ability to access variables in its lexical scope. Some definitions even equate a closure with the function's lexical scope.

Every function has a closure and lexical scope, even if it doesn't have a visible outer function. For instance, in front-end JavaScript, any function that you write has access to the global window variable because it's in its lexical scope.

TL;DR

A closure is a function's ability to access variables declared outside of it (or in its lexical scope)
By definition, all higher order functions use closures
Lexical scope of a function is the function's local scope plus the local scope of any surrounding functions

Thanks for reading! Until next time 👋

Cover photo by Paweł Czerwiński on Unsplash

Module Management in Node

Doaa Mahely — Sun, 10 Jan 2021 17:46:29 +0000

I regularly work with a Node project at work where functionality in a certain file is imported in other files using the require keyword, and exported to be used in other files using the module.exports keyword. More recently, I started working on a side project using create-react-app, where files are imported using the import keyword and exported using the export keyword. Although both projects use the same programming language, I never questioned this difference until now.

What is a module?

To make code more DRY, we're often told to extract code that is used in many places to a separate function that is imported in all the files that need it. For example, a date parsing function that is used application-wide. In JavaScript speak, this function would be called a module. A module, however, isn't always necessarily a function, but can also be a number of related functions, a class or even a single variable.

Node's solution

Node's module management system is called CommonJS, and it uses the aforementioned require keyword. For example, here's a very simple function that checks token validity on a fetch request. The last line allows us to export this module to be used in other places:

// utils/isTokenValid.js
const isTokenValid = (err) => {
    if (err.status === 401) return false;
    return true;
};

module.exports = isTokenValid;

And this is how we'd use it in another file:

// index.js
const isTokenValid = require('../utils/isTokenValid');

const response = await fetch('/');
if (!isTokenValid(response)) 
    throw new Error('Authentication error');

And then came ES6

With this revision of the language, a native module management system was introduced. Now, we can rewrite the above example in this way:

// utils/isTokenValid.js
const isTokenValid = (err) => {
    if (err.status === 401) return false;
    return true;
};

export default isTokenValid;

// index.js
import isTokenValid from '../utils/isTokenValid';

const response = await fetch('/');
if (!isTokenValid(response)) 
    throw new Error('Authentication error');

This example uses a default export for isTokenValid. Alternatively, it can be rewritten as export { isTokenValid } then imported in index.js as import { isTokenValid } from '../utils/isTokenValid'.

Using `import/export` in Node

Now does that mean we have to remember where to use each of these two syntaxes if we're building a full stack JavaScript application? Thankfully, Node is already on it and has started to offer support to ES6 import/export syntax. At the moment, the support is experimental and unstable and therefore not recommended to be used in production. Using it is not straightforward either, as you have to change each file from a .js to a .mjs along with changes in your package.json.

The other way to get started using import/export in your Node app is to install Babel which can take care of transpiling all your ES6 code to ES5. Personally, I opted to keep using CommonJS syntax in my backend and ES6 syntax in my frontend, now that I understand the difference between them.

Thanks for reading. Until next time 👋
Cover photo by Danny Lines on Unsplash

How I deployed a full stack React/Express app to production

Doaa Mahely — Mon, 28 Dec 2020 18:52:46 +0000

I recently launched a web application that consisted of a React frontend that communicated with an Express server. It was my first time working with this stack and everything worked smoothly on my local, but then came the time for deployment. Cue the ominous music.

There are many many articles and tutorials on how to deploy this kind of app to production, to the point where I decided not to follow any of them and make up my own way. I had been wanting to practice using AWS so all the services used here are on that platform. I'm not claiming this is the best way but it's just what worked for me.

TL;DR

Domain name registered on Route 53
React frontend deployed to Amplify
Express backend hosted on a Lightsail instance

Deploying the Frontend

Amplify is an AWS service for hosting SPAs. It connects directly with your GitHub or GitLab repository, has continuous deployment set up on each push on master, and is totally free. It also has other awesome services such as deploying test branches, or generating preview builds when a PR is created.

Start by navigating to the Amplify console in AWS and click on the Connect App button.

After selecting your code hosting provider, Amplify will ask for read-only access to your account and you can go on with selecting a repo and a branch to deploy from.

Afterwards, you'll be asked to verify the build process generated for you, and soon enough your app will be live! 🙌 Amplify's generated URLs follow this format branchName.randomCharacters.amplifyapp.com, so your website URL may look something like this https://master.d1dgz538iqckwr.amplifyapp.com/.

In my code I was using an environment variable, and I was confused on how Amplify will be able to read it since the .env file was in .gitignore and therefore not committed, and I had no way to access the server on which the app is hosted. Then my eye caught the side menu where Environment Variables is written. Here, I was able to add the key and value pair for my environment variable.

Updating environment variables requires redeploying the site, so go back to the app page and click on any of the steps shown in green. This will show you your build history and related data, plus a redeploy this version button which you should click. Now, your deployed app can use the environment variable you specified. 👏

Another great thing about using Amplify is that you get an SSL certificate installed on your website and automatic redirection from HTTP to HTTPS.

Registering the Domain Name

Route 53 is a DNS service offered by AWS that integrates nicely with Amplify. It allows you to get your own domain name and connect it to your deployed app easily.

First, go to the Route 53 page in the AWS console, where you'll see the following component letting you know that you can create a new domain or transfer an existing domain into Route 53. In my case, I needed a brand new domain.

Just type in the domain name you'd like to have and you'll get a list of all the available options with prices, plus some related suggestions. Once you settle on a domain, add it to your cart and check out. You'll be asked for your contact details for verification.

Now go back on your application in the Amplify console, click on Domain Management in the side menu, and you'll be able to see the Add domain button.

Note that the domain name takes a while to get set up, and you'll get an email when it's finished. Mine was ready in about 15 minutes. A glass of water and some stretches later, visit your domain name to see your deployed frontend application. 🥳

Deploying the Backend

There are a lot of options for deploying an Express backend. I wanted to try out serverless but I found it too complex. I saw a lot of tutorials using EC2 because it's included in the free tier, but it also requires a lot more setup. I opted to use AWS Lightsail which is a lightweight version of EC2 that lets you spin up virtual servers in no time.

Simply navigate to the Lightsail console in AWS console, and click on Create instance. Here, you'll need to pick an operating system for your server, a geographical region and a blueprint. The blueprint is a preconfigured image already set up to run your applications. I selected a Node.js blueprint.

I chose the smallest instance size, with a memory of 512MB, 1 virtual CPU and 20GB of SSD storage. All of this comes at a cost of $3.50 a month, with the first month being offered for free. After your instance is created, you'll be able to see it in the Lightsail console.

Chances are your Express application is running on a custom port like ports 3000 or 4000. All of these ports are closed by default to protect the instance. You can open custom ports by clicking on the three vertical dots in the instance component and clicking on Manage then clicking on the Networking tab. In this page, you can attach a static IP address for your instance for free, so that the IP address doesn't keep changing every time the instance is rebooted or taken down and restarted. A little further down under Firewall, you can add a rule to open up your port to all IP addresses.

Now that the server is set up and accessible on the internet on the specified port of the attached static IP address, you can ssh into it and get your application code. Lightsail allows ssh via a browser terminal, but you can also download the private key from your account page and use your own local terminal. After logging into the server, I cloned the backend repo from GitHub, installed dependencies then reloaded the sever. I used PM2 as a process manager. Now my endpoints are accessible on the internet! 🎊 I also went back into the Route 53 to add an A record to my hosted zone to have a subdomain for my backend: https://api.example.com.

This setup means that whenever I make changes in the code, I have to ssh into the server, run git pull and pm2 reload app, which is too manual for my liking. I looked into GitHub Actions that continuously deploy to Lightsail instances but didn't find any good options. I'm fine with keeping it like this for the moment, since I know my backend repo won't have a lot of changes.

Connecting the two

When I was developing on my local, I had a proxy option added in package.json in my frontend. It was hardcoded to the value of my backend url, and after a bit of research it seemed that replacing the hardcoded value with an environment variable was too much of a hassle. Instead, I removed the proxy option and added the environment variable in each fetch request.

const token = await fetch(`${process.env.REACT_APP_BACKEND_URL}/token`);

At this point, my frontend is live and has the URL for my backend which is also live, so they should be able to talk to each other, right? Not so fast! My frontend was being served over HTTPS while my backend was served over HTTP. The browser rightly didn't allow me to make a request from a secure domain to an insecure one.

With bitnami, you can install an SSL certificate on your server for free with one command: sudo /opt/bitnami/bncert-tool. More info on that here. This tool also lets you enable automatic HTTP to HTTPS redirection. After this step, I could type in my server URL with an HTTP and see it get resolved into an HTTPS on the browser.

At this point, I reloaded my frontend via the Amplify console to try to get the API requests going. In the browser's network tab, I was able to see that the request is going to the correct URL: https://api.example.com:4000/, but my request is failing without even reaching the server! On a closer look, I noticed the error shown next to the failed status: NET::ERR_SSL_PROTOCOL_ERROR. Here I realized that I've been trying to access a custom port using the HTTPS protocol.

I thought of a couple of options: either run my Express server on port 443 to be served over HTTPS, or somehow make my custom port be served over HTTPS. After checking out a lot of options, I was able to get it working by setting up the Apache virtual host to redirect all traffic from ports 80 and 443 to port 4000.

Finally, my full stack application was truly up and running! 🎉 If you're curious what the application is, check out my announcement post.

Thanks for reading 👋 Until next time.
Cover photo by Marek Szturc on Unsplash

Introducing Artest: a music quiz game 👩‍🎤

Doaa Mahely — Mon, 21 Dec 2020 21:12:56 +0000

I'm happy to launch my new side project today 🎉 Artest is a music quiz game that challenges players to guess the artists by showing them a bunch of random album covers. Features include:

Selecting how many rounds to play 🎱
Getting musical trivia after each round 👁
Hundreds of albums and artists as questions 👩‍🎤
Sharing results to social media 📲

Background

I started this project as a way to improve my front-end skills, specifically with UI design and React. It was supposed to be a simple project but it kept growing bigger, and with the support of my awesome mentor @tryggvigy I ended up learning tons.

Development process

Being a developer more comfortable in the backend, I usually start my side projects with hooking up to whatever API I needed and rendering that on the screen. I would only do the bare minimum to make the UI look presentable. This time however, I took the complete opposite route by starting with design, then building the frontend components and then finally working on the APIs and backend to get actual data.

I started the design phase in the beginning of August, and ended up catching the design bug. I spent hours on Dribbble being inspired by artists and designers and tweaking my own wireframes. Starting with designing the UI allowed me to think of the functionality I wanted and how I would build it. I made three pretty different designs and settled on the cleanest one.

Only when the design phase was finished, I started creating the React components with dummy data. I tried to keep as close as possible to the design. I started with a create-react-app template and had the frontend call the Spotify APIs directly. However, create-react-app doesn't allow for truly secret environment variables, and I didn't want my Spotify credentials to be exposed. At this point, the game was playable and could've been deployed as is, but even though this is a small side project I didn't want to compromise on security.

Therefore, I decided to build my own Express backend and refactor the frontend to call my APIs that will in turn call the Spotify APIs. This was definitely the biggest refactor I did in this project, and probably ever. Here is the git diff for that PR:

I spent some time afterwards learning about and writing unit tests, and finally when most of the bugs were squashed and the game was playable in my local, I set about in deploying the application to production. This part warrants a full-length post but I ended up using AWS. I spent the last couple of weeks tweaking and manually testing the site on my own.

The code is all open source and available on my GitHub, so take a look if you're interested. The frontend repo is here and the backend repo is here ⭐️

What I learned

This has been an incredible learning opportunity for me. Throughout this project, I worked on all kinds of different things I didn't have a chance to use before. That includes UI design, writing unit tests, using ES6 classes and deploying a full stack application to production. I used CSS variables, React hooks, the Fetch API, ESLint, Prettier and Jest. I owe a lot of thanks to my mentor Tryggvi whose help has been invaluable!

I still have a lot of ideas that I want to implement with Artest including adding hints and a leaderboard, and I welcome and appreciate your feedback!

Thanks for reading 👋 Until next time.

PM2 listening on port 443 shows EADDRINUSE: address already in use :::443

Doaa Mahely — Mon, 09 Nov 2020 16:34:28 +0000

I have a Node/Express app running on an AWS Lightsail instance with PM2 as a process manager. The app is currently running on port 4000. The IP address for the instance is attached to a subdomain that has a valid SSL certificate and automatically redirects from HTTP to HTTPS. Visiting https://example.com at the moment shows the 'Congratulations! You are now running Bitnami Node.js 12.18.3 in the Cloud.' page.

Currently, all the Express endpoints are only accessible through http://example.com:4000/endpoint, but I want the Express app to run on port 443 so that the endpoints are accessible immediately on https://example.com/endpoint.

I read that PM2 is able to listen on ports 80 and 443 and tried the method mentioned in the documentation, but whenever I change the port number in the .env file to 443 and reload the app using pm2 reload app, I get the following error:

0|app    | Error: listen EADDRINUSE: address already in use :::443
0|app    |     at Server.setupListenHandle [as _listen2] (net.js:1313:16)
0|app    |     at listenInCluster (net.js:1361:12)
0|app    |     at Server.listen (net.js:1447:7)
0|app    |     at Function.listen (/opt/bitnami/apache/htdocs/node_modules/express/lib/application.js:618:24)
0|app    |     at Object.<anonymous> (/opt/bitnami/apache/htdocs/app.js:44:5)
0|app    |     at Module._compile (internal/modules/cjs/loader.js:1137:30)
0|app    |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
0|app    |     at Module.load (internal/modules/cjs/loader.js:985:32)
0|app    |     at Function.Module._load (internal/modules/cjs/loader.js:878:14)
0|app    |     at Object.<anonymous> (/opt/bitnami/node/lib/node_modules/pm2/lib/ProcessContainerFork.js:33:23) {
0|app    |   code: 'EADDRINUSE',
0|app    |   errno: 'EADDRINUSE',
0|app    |   syscall: 'listen',
0|app    |   address: '::',
0|app    |   port: 443
0|app    | }

App.js

const express = require('express');
const dotenv = require('dotenv');

const app = express();
app.use(express.json()); // for parsing POST bodies
dotenv.config();

app.get("/hello", (req, res) => res.send("Hello World!"));

app.listen(process.env.PORT, () => {
    console.log(`🥁 App listening on port ${process.env.PORT}!`);
});

.env

PORT=443

The output of pm2 status at the moment:

Any help would be appreciated!

3 simple steps to connect your Express and React apps

Doaa Mahely — Fri, 06 Nov 2020 20:42:03 +0000

Having your frontend and backend in two separate repositories rather than combining both is a common enough pattern. Follow the steps below to connect your React project that is running on port 3000 with your Express server that is running on port 4000.

1. Add a proxy in your frontend

In your React app, open up package.json and add the following line anywhere:

// React app, package.json

"proxy": "http://localhost:4000"

This will let your React app know that when you do fetches that look like they're for resources on the same server, for example fetch('/'), it will look for that endpoint on the proxy server you specified, i.e. your Express server.

2. Add an API endpoint

Add an example endpoint:

// Express repo, app.js

app.get("/hello", (req, res) => res.send("Hello World!"));

And an example fetch request:

// React repo, src/App.js

useEffect(() => {
  const fetchResource = async () => {
    const response = await fetch("/hello");
    const responseVal = await response.text();
    console.log(responseVal);
  };

  fetchResource();
}, []);

3. Try it out!

Start up both servers in localhost. Again, your React app will run on port 3000 and your Express server will be on port 4000.

Since the fetch method is wrapped in a useEffect, it will run as soon as the React server starts and the page is rendered. You can now open up the console in the frontend and see that the pinged endpoint's response is being logged correctly.

Common issues

If you see "You need to enable JavaScript to run this app" as a response, chances are you forgot to add the proxy in package.json.
If the browser network tab shows that the url specified in the fetch doesn't exist (a 404 error), try replacing localhost with 127.0.0.1 as the proxy value.
If it's anything else, write it down in the comments.

Thanks for reading! Until next time 👋
Cover photo by Hans-Peter Gauster on Unsplash

Using Moment's isBetween()

Doaa Mahely — Fri, 16 Oct 2020 12:21:30 +0000

This post uses Moment.js version 2.29.1. Moment.js is currently considered to be in maintenance mode and isn't encouraged to be used in new projects. More here.

This week I was working on a cron job that pulls data from an external API to check if any values were added in the last 10 minutes. The API didn't allow filtering by time, so I had to pull all the data that was added that day, then go over them and check if any values were added in the last 10 minutes.

Working with dates and time is always tricky, and this was no exception. For this feature, I opted to use Moment.js over native JavaScript because it's easier to read and it was already a dependency. Let's say we want to appreciate anyone who takes the time to comment on our posts. The example I'll use will get all comments made today, then filter them out to return the comments made in the last 10 minutes so we can like them or reply to them with an emoji 🦄.

We'll start with creating the function and defining the format that the comments' dates and times are returned in from the API.



const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";
};

We will need two other variables, the start time and end time we'll be filtering between. The start time will be the current date and time minus 10 minutes, and the end time will just be the current date and time.



const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now
};

We can use moment() only to get the current date and time, but with calling format() on it, we can get a neatly formatted string back instead of the entire moment object.

Next, let's see how we can check if the comment's date and time is between our two variables. Moment.js has this handy function named isBetween() that returns a boolean. This method takes two moment-like objects as parameters, where a moment-like object can be a moment object, string, number, date or array. In our case, we'll be using the strings we created above. It's worth noting that this function is exclusive by default, but accepts an additional parameter to specify inclusivity.

The next natural step for me was to do something like this, where I first create a moment object of each comment's publishing date and time, then format it as I did with the previous variables:



const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now

  const latestComments = todayComments.filter((comment) => 
    moment(comment.dateTime).format().isBetween(start, end)
  );
};

But here, we'll start to notice two things in the console:



// console

"Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

TypeError: moment(comment.dateTime).format().isBetween is not a function. (In 'moment(comment.time).format().isBetween(start, end)', 'moment(comment.dateTime).format().isBetween' is undefined)

This is because Moment.js doesn't know what format the date and time we're passing it is in, so it's not able to reformat it. We can easily fix this by passing the format the comment's date and time will be in.



moment(comment.dateTime, dateTimeFormat).isBetween(start, end);

Notice how I removed the subsequent format(), and that's because the format() function returns a string, while moment() returns an object, and we need an object so we can call the isBetween() function on it. So this is what our complete function will look like:



const getLatestComments = (todayComments) => {

  const dateTimeFormat = "M/DD/YYYY hh:mm:ss A";

  const start = moment().subtract(10, "minutes").format(); // now minus 10 minutes
  const end = moment().format(); // now

  const latestComments = todayComments.filter((comment) => 
    moment(comment.dateTime, dateTimeFormat).isBetween(start, end)
  );

  return latestComments;
};

Assuming that today is the 16th of October, 2020 and the current time is 12:10 PM, let's see our function in action.



// example input
const comments = [
  {
    comment: 'I would love to do something similar in my website.',
    username: 'Barbara',
    dateTime: '10/16/2020 12:04:13 PM'
  },
  {
    comment: 'Great job!',
    username: 'Jane',
    dateTime: '10/16/2020 12:01:07 PM'
  },
  {
    comment: 'Keep up the good work 😊',
    username: 'Jess',
    dateTime: '10/16/2020 11:57:55 AM'
  }
 ...
];

const latestComments = getLatestComments(comments);
console.log(latestComments);
// output 
[
  {
    comment: 'I would love to do something similar in my website.',
    username: 'Barbara',
    dateTime: '10/16/2020 12:04:13 PM'
  },
  {
    comment: 'Great job!',
    username: 'Jane',
    dateTime: '10/16/2020 12:01:07 PM'
  }
]

Thanks for reading! Until next time 👋

Cover photo by Heather Zabriskie on Unsplash.

What is a polyfill?

Doaa Mahely — Fri, 02 Oct 2020 14:17:14 +0000

If you're like me, chances are you heard the word polyfill used before in a context where it wasn't easy to deduce a meaning. Thanks to my new tendency of writing down things I'd like to learn about and a subsequent discussion with @tryggvigy , I was able to get a better understanding of what polyfills are.

A polyfill is code that acts as a backup when certain properties, functions or syntax aren't supported in a browser or environment. It's not language-specific, although I've seen it mostly used with JavaScript and CSS. If that doesn't make sense, let's look at MDN's definition:

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

New features are never supported on all browsers out of the box. Imagine wanting to refactor your code to use new ES2019 features such as the nullish coalescing operator or Array.prototype.flatMap. In this case, your code will break because older browsers will not recognize it as valid JavaScript. A polyfill can provide a backup in this case to ensure new features are backward-compatible.

Let's take a closer look with the example code from MDN's page on the nullish coalescing operator:

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

Now let's try running it on Safari 13.0 (currently not supported):

SyntaxError: Unexpected token '?'

At the time of writing, the ?? operator is supported for 77.08% of global users. If you're using it in production, you're ignoring a very big slice of potential users. To work around this, you can search for a ?? polyfill and add it to your code so that the new syntax will work with supported browsers, and the polyfill will work for the older unsupported browsers.

Thankfully, you don't actually need to go out and search for polyfills and manually add them to your codebase. Babel is an example of a tool (also referred to as a compiler, transpiler or transcompiler) that enables us to write the newest and latest JavaScript syntax without having to worry about keeping track of polyfills.

With Babel installed in our codebase, we can write this:

var foo = object.foo ?? "default";

and have it automatically be converted to:

var _object$foo;

var foo = (_object$foo = object.foo) !== null && _object$foo !== void 0 ? _object$foo : "default";

Another interesting example is the polyfill for Array.prototype.map which can be found here.

To end with, it's worth mentioning that using polyfills exclusively, as opposed to browsers and environments working to natively support new features, is not a good idea for performance and functionality reasons.

Thank you for reading. Until next time 👋
Cover photo by T.H. Chia on Unsplash

Resources

Refactoring every .forEach to a .map

Doaa Mahely — Fri, 25 Sep 2020 16:19:35 +0000

I often read JavaScript articles and noticed that many of them focus heavily on map, filter and reduce, more so than other array methods. In my current React project, I noticed that I've used map more but also that I unconsciously used forEach a bunch of times, so I decided to dig into it more.

First, let's go over what we know about the two functions.

`.forEach`

Goes over the array it is called on and executes the callback function on each element
Changes the original array
Returns undefined

// MDN's example

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

`.map`

Goes over the array it is called on and executes the callback function on each element
Does not change the original array
Returns a new array with the result

// MDN's example

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

As we saw, both functions do the exact same thing, and both are supported in all browsers. However, the way they work under the hood differs.

Differences

1. Use cases

map returns a new array without mutating the original, so it makes sense to use it if we are planning to use the returned array elsewhere. However, if we don't mind mutating the original array and aren't planning to use it somewhere else, using forEach is recommended. Per MDN:

You shouldn't be using map if you're not using the array it returns and/or you're not returning a value from the callback.

2. Approach

Because of map’s nature, people who prefer a more functional approach will lean towards it. Functional programming is an approach to building software by using pure functions that take an input and return an output. In functional programming, functions do not modify variables outside of their scope, state is not shared and data is never mutated. This approach greatly diminishes the number of bugs that may be introduced into your application.

3. Performance

According to this post, map seems to be much more performant than forEach. However, I've since learned there's a big deal of controversy around this particular benchmark. It's not fair to compare the following two pieces of code

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

let doubled = arr.map(num => {
    return num * 2;
});

since the return statement in the first example serves no purpose. Moreover, the performance of these functions depends on the implementation of JavaScript engines in different browsers, so the comparison is not so cut-and-dried.

4. Asynchronous programming

As stated by MDN, forEach expects its callback to be synchronous, so it won't play well with any fancy async code you may have. map however will be more tolerant.

Refactoring

In my project, I was using forEach to iterate over my rounds array, which looks like this:

"rounds": [
{
    "artists": [
    {
        "name": "Three Days Grace",
    },
    {
        "name": "IDK",
    },
    ...
    ]
},
...
]

I have an array of strings that contains images of the current round's artists, and I wanted to iterate over each artist and add the image property to the object. This is how I first achieved that:

const artistImages = getArtistData(artistData); // returns an array of strings
rounds.forEach((round, index) => {
   round.artists[currentRound].image = artistImages[index];
});
return rounds;

I was calling this function in a component then assigning the returned array in state. Now, the state looked like this:

"rounds": [
{
    ...
    "artists": [
    {
        "name": "Three Days Grace",
        "image": "https://i.scdn.co/image/2a9ec8d494f8d0a52fd67c3239efc2b9e79a4ced"
    },
    {
        "name": "IDK",
        "image": "https://i.scdn.co/image/6594334f1d1a2e65394d27eb457ccff203886411",
    },
    ]
},
...
]

Refactoring to use map was quite simple and achieved the same result. It is exactly the same line of code, but now I'm returning something inside map and saving it in a variable, then returning that variable to my component.

const artistImages = getArtistData(artistData); // returns an array of strings
const roundsWithImages = rounds.map((round, index) => { 
   round.artists[currentRound].image = artistImages[index];
   return round;
});

return roundsWithImages;

And now hopefully my code is a little more readable and the likelihood of me messing up due to mutated variables is a little smaller!

Thank you for reading. Let me know how I can make this article better. Until next time 👋

Cover photo by Oliver Hale on Unsplash.

The day our web server reached 100% capacity 💾

Doaa Mahely — Sun, 06 Sep 2020 19:07:02 +0000

How it began

One day a few months back, the QA engineer texted me on Slack saying that he couldn't log into the web application. Naturally, I tried to login with his credentials and was able to. I thought he forgot his password, so I sent it to him and he said that he could login now. I didn't think anything of it.

2 hours later, right about log off time, I get an email from a client saying they're not able to login. I dismissed it thinking they forgot their password, intending to get back to them first thing tomorrow. Then, a mobile developer on my team said the same thing.

So I get to investigating. I went to the website and tried to login and I couldn't. The page would reload when I hit Enter without showing any errors.

I quickly started debugging when a colleague mentioned it could be an issue with the database connection. We had recently moved from using a single database instance to a database cluster, and assumed this might be causing an issue or that one instance was taking on too much load. Since this change had been the biggest and most recent one, we narrowed our focus on it. However, the database console looked fine, and didn't show any extra load on any specific instance.

This issue only happened on production, so it was safe to assume it was not related to any code changes. At this point, we started getting more and more complaints from clients, so I decided to do something dangerous: debug on production.

I connected to the server using Cyberduck, navigated to the login view file and logged something like logging in. To my surprise, when I hit save, the file didn't get saved. Cyberduck showed a vague error I can't remember and didn't understand at the time.

After a couple more hours of debugging, we realized that the server has reached 100% disk usage. That day, I learned two useful unix commands: du and df. From the man page:

The du utility displays the file system block usage for each file argument and for each directory in the file hierarchy rooted in each directory argument.

The df utility displays statistics about the amount of free disk space on the specified filesystem or on the filesystem of which file is a part.

This meant one thing: we had to upgrade the disk size. Thankfully my colleague figured out how to do that with no downtime.

Crisis was averted. People were able to login.

The end... Not

Believe it or not, but due to the immense workload we had at the time, no further action was taken to monitor the server disk space or dig deeper into why this happened. So somewhat unsurprisingly, two months later, the server reached 100% capacity again!

We were better prepared and quickly identified the issue and upgraded the disk size. This time around, I took the time to dig into why this happened, since we didn't upload a lot of files within the last two months that would justify filling up around ~90 Gigabytes.

Again, I utilized the du and df commands to pinpoint the directory that's eating up the disk space:

$ du -sh /var
...
170.3G    /mail
...

Imagine that, the mail directory was taking up 170 Gigabytes, almost 80% of the entire server's disk space! Further digging showed that the culprit was crontab. We had several cron jobs running, and crontab sends emails to the root user that get stored in /var/mail. This was listed clearly in the crontab file as shown below, but the output of a particular cron job was returning a lot of junk that somehow managed to fill up the directory quite quickly.

$ crontab -l
...
# Output of the crontab jobs (including errors) is sent through
# email to the user the crontab file belongs to (unless redirected).
...

Now what?

The plan of action was to first stop further emails, then to delete the existing emails to free up the server.

$ crontab -e
MAILTO="" # to disable cron emails

$ sudo rm /var/mail/ubuntu

Smarter and wiser, we figured let's set up a monitoring service to catch this particular issue in case it happens again. The service of choice was Monit and it was surprisingly easy to start using. It creates a dashboard that allows us to visualize all the numbers we need easily, from disk space to CPU usage to memory, and sends emails alerts on custom events. This great article is very helpful in setting up Monit on an Ubuntu server.

And the rest is history. We didn't face an issue with disk space again. So far.

Thanks for reading! Until next time 👋

Cover photo by Taylor Vick on Unsplash

Remembering the difference between GET and POST 💡

Doaa Mahely — Sun, 30 Aug 2020 18:14:39 +0000

I was reminded recently of the difference between GET and POST requests, after joining a colleague of mine on a project that uses Express, while knowing exactly nothing about Express. I thought this write-up will serve as a good reminder of the differences between those two HTTP methods and how to use them.

Going in blind

Being a learn-by-doing type, I got to work seeing the existing code and trying to follow along. My first task was to retrieve a user's profile details. This was obviously a GET method since we'll just be retrieving data and not creating anything new. I went to the users route file and added the following endpoint router.get('/profile', users.getProfile);

Then, I went to the users controller and created the following getProfile function, which was basically copied and pasted from an existing POST endpoint:

getProfile: async (req, res) => {
    let user_id = req.body.id;
    if(!user_id) 
        res.send("Invalid id");

    let profile;
    try {
        profile = await User.getProfile(user_id);
    } catch (error) {
        res.send(500, error);
    }

    res.send(profile);
}

In this function, we first get the user's id from the request's body, then pass it to the model which will check for it in the database and hopefully return some data to us. Next I tried to connect to this endpoint by providing a valid user id using Postman.

Notice how I'm sending data in the GET request's body, we'll come back to this later.

and I got the following response:

{
    "id": "11",
    "mobile": "050-5555555",
    "email": "example@example.com",
    "full_name": "Jane Doe",
    "bio": "Live Laugh Love!"
}

Great! 👏 Naturally, the next step is to show this data in the view layer.

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile',
            type: 'GET',
            data: {id: id},
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

Now when I refresh the page, this AJAX request should hit the endpoint we specified and log the data. Perhaps unsurprisingly, this logs Invalid id. Let's try to send the id another way.

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile?id=' + id,
            type: 'GET',
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

Hmmm, this also logs Invalid id. Weird. At this point, and because I was in a hurry, I just changed the route method from GET to POST, and changed it in the AJAX request as well, and I started seeing a result in the console.

router.post('/profile', users.getProfile); // changed to post

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile',
            type: 'POST', // changed to post
            data: {id: id},
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

Since this worked and I was short on time, I moved on to other endpoints which incidentally were all retrieving data but ended up being written as POST requests. A couple of weeks later, I had some time off and I was still thinking about this behavior, so I decided to revise HTTP methods and properly learn Express.

Learning

What I had forgotten was the main difference between GET and POST methods. Per MDN, GET requests should not have a body. Instead, the data should be sent in the request URL, in contrast to POST requests which hide the data in the request body and are therefore more secure. This great example from freeCodeCamp illustrates the concept:

// GET request using query strings
route_path: '/library'
actual_request_URL: '/library?userId=546&bookId=6754' 
req.query: {userId: '546', bookId: '6754'}

// GET request using route parameters
route_path: '/user/:userId/book/:bookId'
actual_request_URL: '/user/546/book/6754' 
req.params: {userId: '546', bookId: '6754'}

// POST request
route_path: '/library'
actual_request_URL: '/library'
req.body: {userId: '546'}

However, Postman allowed us to embed data in a GET request's body which caused the confusion. Let's see the correct way to pass data with a GET request in Postman.

Note: make sure you're on the 'Params' tab instead of the 'Body' tab which I was on earlier. Force of habit!

Refactoring

Now, let's refactor our function to use a GET request as it was intended to. First, let's turn back our AJAX request to use the GET method.

<script>
$(document).ready(function() {
    let id = '11'; 
    $.ajax({
        url: '/users/profile',
        type: 'GET', // change this back to GET
        data: {id: id},
        async: false,
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

And update our route to use GET as well:

router.get('/profile', users.getProfile);

Next, on to our controller

getProfile: async (req, res) => {
    let user_id = req.query.id; // use req.query, instead of req.body
    if(!user_id) 
        res.send("Invalid id");

    let profile;
    try {
        profile = await User.getProfile(user_id);
    } catch (error) {
        res.send(500, error);
    }

    res.send(profile);
}

And voila! We're successfully getting a response in our AJAX GET request 🎉

{
    "id": "11",
    "mobile": "050-5555555",
    "email": "example@example.com",
    "full_name": "Jane Doe",
    "bio": "Live Laugh Love!"
}

TL;DR

GET requests do not have request bodies while POST requests do.
Be careful when testing a GET endpoint using Postman. Make sure you pass the data in the 'Params' tab instead of the 'Body' tab that is used with POST requests.
Use req.query to view the data sent with the GET request, if you're not using route parameters or named segments. If you are using route parameters, use req.params to view your data.

Thanks for reading! Let me know how I can make this article better. Until next time 👋
Cover photo by Samson on Unsplash. Other photos from Undraw.

DEV Community: Doaa Mahely

A day in the life, Ramadan edition

All About Closures

What is a closure

Naming

Higher order functions

Lexical scope

TL;DR

Module Management in Node

What is a module?

Node's solution

And then came ES6

Using import/export in Node

How I deployed a full stack React/Express app to production

TL;DR

Deploying the Frontend

Registering the Domain Name

Deploying the Backend

Connecting the two

Introducing Artest: a music quiz game 👩‍🎤

Background

Development process

What I learned

PM2 listening on port 443 shows EADDRINUSE: address already in use :::443

3 simple steps to connect your Express and React apps

1. Add a proxy in your frontend

2. Add an API endpoint

3. Try it out!

Common issues

Using Moment's isBetween()

What is a polyfill?

Resources

Refactoring every .forEach to a .map

.forEach

.map

Differences

1. Use cases

2. Approach

3. Performance

4. Asynchronous programming

Refactoring

The day our web server reached 100% capacity 💾

How it began

The end... Not

Now what?

Remembering the difference between GET and POST 💡

Going in blind

Learning

Refactoring

TL;DR

Resources

Using `import/export` in Node

`.forEach`

`.map`