Forem: Sahil Thakur

Using Dgraph as your database

Sahil Thakur — Sun, 16 Jan 2022 04:27:09 +0000

The link to the original article with images -> https://easyontheweb.com/using-dgraph-as-your-database/

For the past couple of months I’ve been working on a project which has been using Dgraph as the database and I’ve been fairly happy with Dgraph, hence, I thought of writing this article on how anyone can start off by using Dgraph as the database of choice for their next project.

We will discuss the pre-requisites for Dgraph, for what projects is it most suited for and also the pros and cons of using Dgraph in this article but before all that we should first know what Dgraph is and equally importantly, what graph databases are in general.

Graph Databases and Dgraph
A graph database stores nodes and relationships instead of tables, or documents. Data is stored just like you might sketch ideas on a whiteboard. Your data is stored without restricting it to a pre-defined model, allowing a very flexible way of thinking about and using it.

Neo4j docs
I think the way the Neo4j docs explain is the simplest way that graph databases can be explained.

Most developers are familiar with the Table based relational databases like MySQL, PostgreSQL or the document based databases like MongoDB. Our minds have been trained to think of storing data in those table-based or document-based paradigms but what graph databases bring in is a completely different way to think how data is stored in the databases – in graphs.

We can think of graph databases as data being modeled like we would on a white board.

If you would like to get deeper into graph database knowledge I’d highly recommend you go through the Neo4j What are graph databases? series.

Dgraph is a graph database just like MySQL is a table based relational database and hence it is vital that we have a grasp of what graph databases are before working with Dgraph.

Where to use graph databases?
There are some clear advantages that graph databases provide over conventional database solutions like :-

Navigate deep hierarchies
Find hidden connections between distant items, and
Discover inter-relationships between items.
You would most likely want to use Graph databases if your project comes under the following categories –

Fraud Detection
360 Customer Views
Recommendation Engines
Network/Operations Mapping
AI Knowledge Graphs
Social Networks
Supply Chain Mapping
Why Dgraph
Okay, so you’ve decided to use a graph database for your next project seeing the advantages we saw above. Then what’s so special about Dgraph as a database? Why not some other graph database?

There were two main reasons for choosing Dgraph over other graph databases for us: –

It gives the ability to query the database in either its own specific domain language called DQL or the much popular GraphQL. The ability to being able to use GraphQL for queries was very important.
You do not have to create endpoints or resolvers for Dgraph if you give it a proper schema.

Now the second point is a bit confusing right? What does it mean? It means that the Dgraph creates a structure for resolvers ( handlers for CRUD endpoints etc.) on it’s own if you just provide it with a schema file. Think of it like you just structure the tables in MySQL and it readies the CRUD endpoints for you on it’s own, without having to write any additional code.

I’ve to be honest and say that sometimes, there has been a need to write additional code because logic can be very custom even for CRUD queries but because DGraph does provide an automatic structure in place, this makes it very easy to start off with it.

It’s not just cakes and roses with Dgraph though, there are certain aspects of it which particularly frustrate me, most of these are a result of it being a relatively new database. Not being able to query in the reverse edge sometimes, having to use @cascade in places where I do not want to etc are some of the problems the database still has but I’m sure going forward would be solved.

In my opinion, if you do plan on going over Dgraph then the great tutorial A Tour Of Dgraph is a must for you to learn the know hows.

My personal experience with DGraph
I would say my personal experience of using Dgraph as a database has been fairly positive. The positives certainly outweigh the negatives but I still have not made any statistical analysis of choosing it over a MongoDB or MySQL.

Even though I do believe a couple of years down the line Graph databases, in general, would be much mature and widely used, I still believe they are just a single step behind being used for enterprise-level projects. Nevertheless, I think it is a great choice for personal or small projects and certainly a technology to dip your hands in.

For other web development articles please check the Blog section of the website and if you would like to join me and some other web developers in a Facebook group, here is the link.

Mongodump and mongorestore with Docker

Sahil Thakur — Thu, 21 Jan 2021 13:36:20 +0000

The original post is written here on my blog -> https://easyontheweb.com/mongodump-and-mongorestore-with-docker/

Taking data backup and restoring that data is one of the most commonly used things in any database (okay not that common but you catch my vibe, right?). MongoDB, which is one of the most widely used databases right now provides two simple yet powerful commands – mongodump and mongorestore for backing up and then restoring your data. In this article we’ll see how you can use mongodump and mongorestore but with a slight twist – when you’re mongo instance is running inside a Docker container.

Mongodump and mongorestore
Let us just take a quick look at what mongodump and mongorestore commands are and what they do before getting into how you can use them with your Docker mongo instance.

So, basically these two sibling commands work in compliment of each other – mongodump creates the backup of some data while mongorestore restores that backup into some other database.

How this happens is by creating a BSON file which can then be read by mongorestore and be used to fill data in some other mongodb database.

Both mongodump and mongorestore are utilities that come bundled when you installed mongo on your system so if you’re reading this, I assume you have these utilities installed as well.

Mongodump is the first of the sibling utilities that is used to create the “dump” of the data and convert the data into BSON. There are a whole lot of options that the mongodump command provides and it is best that you read those options in the official documentation rather than me pointing half of them out.

No matter you want to use srv strings or remote hosts or whatever, mongodump has an option for you.

Example of mongodump command with the uri option
The result of the mongodump command is a directory called dump in which you’ll have your data backed up in BSON format and a metadata for the same.

Once you have this bson file with you, you can use it to restore all your documents and collections (if you have dumped them as well) into any mongodb database.

Example of a mongorestore command [Run this command from your shell, not mongo shell]
Just like mongodump mongorestore has a plethora of options and flags that I’d recommend you to check out in the documentation.

A thing worth noting is that if the database or the collection that you are restoring do not exist, mongo will automatically create them for you.

Dumping and restoring data in a container
Let us see how you can follow the dumping and restoring process when your mongo is being run as a docker container.

There is nothing much to it as the process of creating a bson and restoring is still fundamentally the same. The only difference is that we need to run the commands within the docker container and then move the bson file into or out of the container (depending on whether you’re dumping or restoring).

Taking mongodump inside a container
So, let us assume we want to take the dump of data from within the docker container. The first thing we’ll need to do is get into the container first :-

This command takes you into your container and runs it with the bash command. Once you are inside the container you treat it just as you treated your bash (or whatever shell you use) of your local system and run the mongodump command the same way you would outside.

The same dump directory would be created with the bson file inside the particular database name directory.

The next step though is to move this file from within the docker container to your system outside. Well, as it turns out that’s a very simple docker command for this as well.

Oh, and yeah, run the above command from your system’s command line, not from within the container. I guess the arguments are pretty self explanatory and if run successfully, you’ll have your dump file/directory in your local filesystem.

Mongorestoring data in a container
Now that we have the dump in our local system, we’ll copy it into the container, then access the container and run mongorestore inside it. I guess you had figures it out yourself 😛

Pretty easy, you have successfully restored data in the mongo running as a container.

For more articles on mongodb please check out the section on Mongo here -> Mongo articles

What is React-query and how to use it

Sahil Thakur — Wed, 13 Jan 2021 15:54:26 +0000

The article is originally written here with images and code samples - https://easyontheweb.com/what-is-react-query-and-how-to-use-it/

In this article, we’ll be taking a look at an awesome library called React-query and see what react-query is, why we should use it in our React applications, and of course how we can use it in our applications.

Fetching data asynchronously and maintaining it in your React application is one of the most frustrating things to do, even though it isn’t difficult at first – things get complex real quick with fetching data and maintaining state of the fetched data.

I personally have used Redux as a cache store for fetched data before and it was really not a pleasant experience doing that. React-query in that sense is an absolute lifesaver, just like it’s sibling react-table.

Advantages of using react-query
I don’t like to blog a lot about particular libraries but react-query has quickly become one of my favourites of all time and therefore I would really like to stress on the advantages of react-query early on in the article to get you guys onboarded with me on the hype train.

Some of the advantages of react-query are :-

Automatic caching of data
Automatic refetching of fresh data on user actions
Super clean syntax
Prefetching
Using cached data
Loading, success and error state management by default
Infinite queries
To be honest, this list would just go on and on and it’s not even in the scope of this article to discuss each of the points. That is also not the aim of the article, the aim is to make you aware of the benefits of and give you a glimpse of the powers that react-query gives to us.

For going in deeper and checking out everything that react-query provides you can always check out the documentation.

Lesser Code

If you’ve ever found yourself writing code like this, or code similar to this inside a hook (yes, all you smarty pants), then react-query is the tool for you. Personally, I hate to use the loading and error states everywhere – even if you write custom hooks to do that, react-query just offers so much more.

react-query example
This is the refactored code using useQuery from react-query. One thing you’ll notice directly is how react-query is returning isLoading, error and data . These were things we had to manage ourselves in the first version of the code.

All you need to do is import the useQuery hook from react-query and pass three arguments to it – a unique key for the query, a function that is the actual query and an optional config object we’ll discuss later.

Hence, react query decreases a whole lot of code. And when it comes to code, the lesser the surface area of the code, the lesser chances of bugs.

Now if you extract this to a hook as well, voila! You’ve DRY’ed out your code even further. But I’ll leave that to you guys..

Cached data
One of the biggest advantages of react-query is it’s caching and synchronization mechanism. With options like initialData, staleTime, cacheTime etc. it is so easy and wonderful to work with, I can’t begin to explain.

Let’s think about what normally happens in a React application, you would store the data you want to cache in either Redux or whatever global state management mechanism you use and whenever you enter a component, you most probably have a useEffect where you fetch new data (or don’t, based on comparison with your cached data) and again store the newly fetched data into your global state.

This is hectic, buggy and does not give your a lot of options (unless you write those options yourself, again, increasing the surface area of the code).

With react-query, all this becomes a breeze. It uses the concept of something called stale data. If react-query sees that the data is stale, it tries to fetch newer data. By default the stale time is 0, ie, data becomes stale as soon as it is fetched.

The first option to consider is that of staleTime , longer the stale time, longer will react-query wait before considering the cached data as stale and try to fetch new data.

It is noteworthy that react-query does not implement polling in any sense, instead, it uses user activities to trigger the next synchronization of stale data.

Stale queries are refetched automatically in the background when:

New instances of the query mount
The window is refocused
The network is reconnected.
The query is optionally configured with a refetch interval.
All of these are configurable though using refetchOnMount, refetchOnWindowFocus, refetchOnReconnect and refetchInterval.

If you do not wish to keep on listening for user activities mentioned above, you can increase the staleTime for the query.

How is the caching of data done? Caching of data is based on the key + queryFunction combination that you use inside useQuery. Each unique combination is used to cache particular data.

Moreover, you will never have to see the ‘loading’ on your screen if a query has already been run once. Post that, the cached data will appear on screen initially and it will be updated once the synchronisation is complete. Slick, right?

To understand the complete caching lifecycle I highly recommend you to go through Caching Examples.

Paginated queries

What do you think happens when we have this piece of code and we change the page number? Unfortunately, what happens is that the user sees the ‘loading’, i.e, the query goes into the loading state and then into the success state on every page change.

This happens because the key + queryFunction combination has changed with the change in the pageNumber. Therefore, react-query is not able to use the cached data. Well, even without react-query 99% of the apps work this way.

With react-query though, you have a great option called keepPreviousData. When this option is set to true in the configuration object, the data from the previous query is available even when the query changes and the data gets swapped with the new data as soon as the new data arrives. This is a better user experience as the user does not have to see the loading message again and again.

To read more about paginated queries check this out -> Paginated Queries.

Mutations
useQuery is the hook we’ve been using so far, useQuery though is only used for GET queries. What about updation queries like PUT/DELETE/POST ? What does react-query have for us while working with these?

Just like the useQuery hook we react-query provides us with another cool hook called useMutation.

The official useMutation example from the docs
The syntax for useMutation is slightly complex when compared to that of useQuery. The useMutation hook itself accepts a function and a configuration object as arguments (note that there is no key here).

To call the mutation method though, you need to use the mutation.mutate method with the argument to be passed into the function used inside the useMutation.

All the states that were available to us in useQuery like error, isLoading, isSuccess etc are available for mutations as well.

Mutations also have callback methods that can be used in the configuration object for the useMutation hook. One of the most commonly used combinations is that of onSuccess and invalidateQueries.

react-query allows us to invalidate any or all queries and their cached data. Now, let us take a very common scenario – You add a new record in the database with the useMutation hook, in nearly 95% of the cases what you would like to do next is to fetch all the records again so that the new updated record gets displayed. To do this, we can use the invalidateQueries functionality.

When we invalidate any query, think of it as removing the cached data for that query and re-fetching the data for that query and storing the data in the global cache again.

Official example of useMutation with invalidateQueries
Note that in this example we are invalidating the data for two particular queries – todos and reminders and therefore react-query will automatically run the useQuery hook for these two and refetch and set the new data.

Semi Final words…
React-query is such a vast library with so many cool features that I cannot explain them all. As mentioned before, the goal of this article is not to act as documentation for react-query at all but to make developers aware of this awesome library that makes lives so much easier.

If you would like to learn more from the creator himself, do check this amazing video out on YouTube -> All about react-query

For more articles on ReactJS you can checkout the ReactJS section of the blog and it would be great if you join me and other web developers on this facebook group here – Easy on the web facebook group.

Serving a React application with Nginx and Docker

Sahil Thakur — Tue, 05 Jan 2021 15:21:29 +0000

The original article with code samples and images is available here ->
https://easyontheweb.com/serving-a-react-application-with-nginx-and-docker/

If you have been through my Blog before, you’ll probably know I’m a big fan of React. What I wasn’t a big fan of earlier was Docker, guess why? Because I did not know anything about Docker. Over the last few months I’ve had a chance to work with and study about Docker and to be honest, there’s everything to love about it. In this article, we’ll see how we can serve a React application using Nginx and Docker with the help of docker-compose. We’ll take a look at all these four things briefly but our main focus would be on how to make all of them work together.

Also, it is not important for you to serve a React application as such, you can actually serve ANY application – be it an Express app, a Ruby on Rails app or just about anything running on a port. For this article though, let’s keep ourselves to React.

Setting up the React application
If you have an already created React application, that’s well and good, you can basically skip this entire section then.

If not, let us quickly use create-react-app to hack up a React application for us. I’m assuming you do have Node and npm installed on your system to set up this application (even though you won’t ACTUALLY be needing it with Docker later). If not, a simple google search on how to install them would bring you more results than I can begin to explain..

Using npx to create a react application
Here’s a quick anecdote for some of you who don’t know it –

npx stands for Node Package Execute and it does not require you to install a package before being able to use it on your machine. It directly executes the package from the npm registry itself.

Also, npx only gets installed with npm v5.2 and above

Just running these three small commands should get your React application up and running. If you know React and would like to make changes to your application – go ahead.

In this article though, we’ll be using the blueprint created React app itself.

Dockerizing the React application
The next step for us is to dockerize our React application. If you do not know what Docker is please check this article out – Docker for absolute beginners.

To dockerize our React app, we must create two files inside our React app directory, namely – Dockerfile and .dockerignore .

Dockerfile is the file that contains all the configuration for us to create a docker image and then run that image as a container.
.dockerignore is a file just like .gitignore and to be honest, I just copy and paste the contents from .gitignore to my .dockerignore like 99% of the times.

Oh, and also – Please install Docker on your system in case you don’t have it. None of it will work without it 😛

Dockerfile for our react application
Let us go through this Dockerfile a bit :-

FROM – A command that chooses the base image for your React application. As React works on Node, it is good to have any base Node image. We chose alpine here as it is the smallest in size.
WORKDIR – The working directory inside your docker container where all the application code will live in. It is a good practice to not have the application code in the root of the docker container so we chose /node/app.
COPY – We copy the package.json file from our current directory (ie, root of the React application) and paste it into the /node/app directory (where our react code will live inside the docker container).
RUN – We want to run npm install after we have copied the package.json file in the docker container.
COPY – Copying all the other files in the directory into the React directory in the docker container.
EXPOSE – The port we want to expose from our docker container to the host machine. 3000 because that is what our React application is running on.
CMD – The command to run when the docker run command is run on the shell for this container.
Even though I’ve explained all of the different commands used in the Dockerfile, you can google any one of them to know what they do in more detail.

One thing that might seem weird to you is why we copy package.json separately and then all the other files separately.
This is done because while creating containers, docker uses caching and each layer is cached. Therefore, if we copy everything at once and then run NPM install, the NPM install command would run every time inside the container. The way we have done it, it will only run again if the contents of package.json have changed (pretty neat, eh?) else it will use the previously cached layer.

After you have successfully created your dockerfile, you can use it to create an image.

Running this command from where your Dockerfile exists will use your Dockerfile and create an image called my-react-app.

This image is then to be used to run a container with Docker.

With this command, we are running a container with the image my-react-app, naming the container my-react-application and binding the port 3000 of the host machine to the port 3000 of the docker container (that we had exposed in the dockerfile). The flag -d is used to run the container in a detached mode in the background.

If your command was run successfully, you’ll be able to check out your application on port 3000 in your browser, congratulations! We won’t actually be needing this though when we run the container through docker-compose later with Nginx .

Nginx

nginx as a reverse proxy
Even though I assume you do know what Nginx is and how it serves multiple purposes , I’ll just explain in brief how we are planning to use Nginx as a reverse proxy for our goal.

A reverse proxy is basically a web server that sits in front of your application servers and routes the traffic coming from clients to different application servers. The application servers maybe Node, React or basically just about any technology. For other Nginx uses and benefits I would highly recommend you to take a read here – Nginx.

In our case we want to route traffic to a single React application but you would like to use Nginx as a reverse proxy to route traffic to different application servers if you have many running on a single machine.

You actually don’t need to set up Nginx on your machine as we’ll be using Docker to create a container with the Nginx image and with personal experience I kind of do like this method of working with Nginx as I think it is much cleaner and easier to operate.

So, create a folder called Nginx (or anything you’d like) and inside that folder we first need to create an Nginx config file which would look something like this :-

Nginx config file
You can name this file anything but be sure to have the extension as .conf , Nginx actually works on the basis of these .conf files. You do not need to understand most of the things written in this file (even I do not 😛 ) but the main things here are location and proxy_pass .

So basically, we are routing all the requests to the location “/” to “http://my-react-app:3000” . Just hold onto your seats for now, we’ll see where this comes from just next.

Note that you can create different conf files for different application servers you want to route to but make sure you name them appropriately.

The other file we would need in this Nginx directory is our good old Dockerfile, perhaps the simplest one you’ll ever write.

You know what the copy command does write, so we are basically just copying our conf file into the directory Nginx expects it to be in (inside the container we’ll be starting).

You can now successfully create you Nginx container as well but it won’t be of any use as of now.

Using docker-compose
Docker compose is a great tool to have to manage all your micro-services and containers.

It makes it super easy to deploy multiple containers at once and for them to communicate with each other. Make sure you have it installed though.

What you need to do is create a docker-compose.yml file and write this configuration in it :-

This is what our docker-compose file would look like. Both the build properties here are directories to both our services respectively and docker-compose expects a Dockerfile to exist in both these directories as it will use that Dockerfile to run the containers from.

We also expose ports from both the services here, (80 & 443 from Nginx as those are the ports for HTTP and HTTPS and that is how our Nginx would be exposed to the world). ports can be thought of as an alternative to the -p flag that is used during the docker run command.

You can see how we have named our react service as my-react-app and this exactly what we had used in the proxy_pass as well. Now the two and two connect right?

The last thing to do is run the final docker-compose up command and see all your services in action.

1
docker-compose up -d
Now, when you visit the port 3000 on the browser – you’ll be able to see your React application live. Congratulations!!!

For other devops articles please check this link here – Devops .
If you would like to join a facebook group with other web developers including me, please join us here – Easy on the web facebook group .

CSS modules in ReactJS

Sahil Thakur — Wed, 16 Dec 2020 15:28:37 +0000

This post is originally written here with images and code samples -> https://easyontheweb.com/how-to-use-css-modules-in-reactjs/

CSS modules for ReactJS are an absolute gift of God if you’ve ever suffered from issues related to global CSS names clashing. Some of you might not have the smallest bit of idea what I’m talking about here but for the ones who do, I feel you, I really do.

I have had experience with a project where all the CSS was written in a single file and we had no naming convention like BEM followed. Even though writing CSS this way when you’re starting with a project might seem faster and easier, in the long run – it is a nightmare.

In this article, we’ll explore using CSS modules in ReactJS to write and structure the CSS for the our React components and we’ll see how using them can get us out of an unplanned mess in the future.

What are CSS modules
According to their own repo,

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules Repository
What this means is that even though you’ll write your CSS code in a normal CSS file as you do, they will not be globally scoped but instead be locally scoped by default, ie, those classes will only be available in the components you import them into and use them.

Under the hood, CSS modules compile to something called interoperable CSS but we as developers do not really need to care about that, we write CSS in a file normally as we would.

A very important thing to keep in mind is that the concept of CSS modules is not something that is implemented on the browser side but instead this takes place during compilation with the help of a module bundler like Webpack or Parcel.

We’ll see how this CSS gets served to the browser but what you need to keep in mind is that our application gets built with the CSS format itself and nothing happens on the browser end.

Let’s see an example of how classes get formed by CSS modules and how they keep the CSS local to the component they are used in.

Your React component

The Sidebar.module.css file
Ignore the syntax of importing and using the modular CSS for now, but it must be apparent that we are using the SidebarWrapper class for our div and the CSS file has no special naming.

But you’ll be pleasantly surprised when you check the browser and inspect your div and see something of this sort :-

Do you notice the name of the class? This is how CSS modules implement localisation. They format the name of the class in such a way that they do not collide with each other (Unless you have written a class with this name, in which case – WOW :P) .

How to use CSS modules in ReactJS
The first question that might have come to your mind after all this discussion is how you can use CSS modules in your ReactJS application.

If you are using create-react-app v2 or higher then there’s some really good news for you. CRA2 has in-built support for CSS modules and you do not actually need to do anything except get going with it. You can totally skip this section in that case.

If you are using create-react-app but version 1 then I would highly recommend you to upgrade it to at least version 2.

In case you are not using create-react-app at all then you may use one of these two modules – react-css-modules or babel-plugin-css-modules and let your package manager handle the heavy stuff for you.

Writing modular CSS
Once your React application is ready to work with modular CSS the only thing left for us to do is write the modular CSS.

Let us see what steps do you need to take for this and then we’ll expand on each step one by one :-

Create your CSS file with naming convention as [filename].module.css (a must for CRA).
Add your classes and animations to this css file.
Import your file in whatever components you want it to be imported into.
Add the classes to the className attribute of your JSX elements.
Creating the css file
What I usually follow and would recommend you to follow as well is to create a separate css file for each component of your React application. Isn’t that why we are using css modules for in the first place? Separation of concerns, right?

The naming convention to be followed has to be your filename followed by .module.css as the file extension. This enables CRA to understand that these are modular CSS files.

Adding your classes and animations
Once you’ve created your file the next thing to do is just writing your CSS code as you normally would. One thing widely followed in modular CSS files is to follow camel case for naming our classes instead of using – separated names.

This is done because it is easier to access the class names in our components when we do use these written classes.

Importing and using the CSS in components
We’ll merge step 3 & step 4 into this single section because they both involve including our written CSS in our components.

Importing styles is just like importing any other Javascript module. You can destructure the object being imported during the import as well and import only certain classes if you would like.

As you can see in the examples we are importing the styles in the object styles, you may use any name you like but styles and classes are the most commonly used ones.

The classes that we wrote in our CSS files are available as properties on this object. We can extract any property and use them as className in the JSX of our component like we did with the div in the above example.

You know what happens next as we’ve already discussed the localisation of CSS classnames and how the browser is given a different formatted name instead of the class “Sidebar” directly.

Using compose with CSS modules
Another cool feature that you get with CSS modules is the ability to compose your CSS classes. What this means is just like in OOPs we compose object classes using other classes we can make a CSS class that is made up of properties from other CSS class.

If you’ve worked with SCSS before, it’s like the @extend keyword.

The concept of composing classes in CSS is a very powerful one that let’s you reuse already written code. As you can see in the above example, composition is even allowed from classes written in a different CSS module altogether.

I hope you will try out CSS modules in your next React project, trust me they are super cool.

For more articles on React please check out the rest of the blog here -> React articles.
If you’re on Facebook and would like to join me and other web developers in the Easy on the web group please click here.

How to use iframe in HTML

Sahil Thakur — Wed, 09 Dec 2020 14:52:38 +0000

This post is originally written here with all the images and code samples -> https://easyontheweb.com/how-to-use-iframe-in-html/

Even though I had used iframe in HTML before it was not until very recently when a teammate of mine used them and I went through his code that I understood them better. So, I decided to learn more about them and then share what I had learned through this article in which we see how to use iframe in HTML.

If you have no idea about what iframes are then let me just make you aware of them – I’m sure you must have visited websites where a video or an advertisement starts playing. No? Have you visited websites where there is a youtube window embedded? Well, whenever there is a website that shows the contents of some other website inside it, they are most probably using iframes.

iframes are HTML tags that enable a sub-window to be opened in the window of your HTML page. The content of the sub-window could be anything, it doesn’t even matter. What matters is that by using iframes, we are actually embedding a completely different HTML page into our parent HTML page.

When are iframes used?
The first time I used an iframe was for embedding a youtube video to an HTML page that I had created. Even though I did not know the internal workings of the tag back then, I knew that it could be used to display content from some other website on ours.

Displaying content from third-party websites is what the primary use of iframes is. You can show content from Youtube, Google maps, RSS Feeds etc. You can basically load content from any public webpage.

Another use of iframes is to display content from another part of your application or even a different microservice of your application on the page. I’ve seen people embedding a microservice in some other microservice through iframes. This keeps the embedded microservice isolated but still useful from the other one.

Some of the advantages of using iframes are :-

We do not need to update the data on the third party website as the people managing that site do it themselves.
Iframes provide a way to a different isolated microservice into our application.
Iframes are much easier to integrate than say integrating through packages.
Even though there are clear advantages of iframes, many developers still do not prefer using them. Here are the disadvantages of iframes :-

Security threats – Security is an issue when we are embedding content from some other website onto ours.
Lack of control – Even though iframes can somewhat control content inside them to a small degree, irritating content like autoplaying videos and popups can cause a bad user experience.
The iframe HTML tag
Even though the entire documentation on the iframe HTML tag can be found in the Mozilla documentation, I think it’ll be helpful if we do discuss the tag a bit in this article as well.

iframe tag example
One of the most interesting things about the iframe tag is that the content inside the tags is only used as a fallback, ie, it is usually not shown. The content will only be shown in case the browser does not support or allow iframes. When the iframe loads successfully, obviously the content of the embedded webpage would be shown.

When it comes to the attributes for this HTML tag the most important one is obviously the src attribute which is the URL of the webpage to be embedded using the iframe. Some of the other important ones are:-

height – The height of the iframe window
width – The width of the iframe window
loading – “eager” or “lazy” depending upon whether you want to load the iframe immediately or wait for it to be on the viewport
sandbox – list of restrictions that you can apply on the embedded webpage window, eg – no popups. (Refer to the documentation for a complete list of sandbox options).
srcdoc – accepts HTML and overrides the src attribute
Communication between the windows
A very important aspect when it comes to having an iframe in your webpage is the interaction with that iframe. This thing is even more important when it comes to integrating some other microservice/application window into your webpage when you have developed the other one as well.

The communication between the windows takes place through two main functions – postMessage and onMessage. Both of these functions are not specific to iframes though, they are methods on the Window object and well, as iframes themselves are nothing but a window themself, we communicate with them using these methods.

window.postMessage for iframe example
This very simple code is used to access the iframe element and then post a message onto that window. The variable iframeWindow is the target window for the message to be posted to.

The arguments for the postMessage function are an event and the targetOrigin. For more information on targetOrigin please refer to the documentation. For now, we’ve kept it as a wildcard * that will basically allow all.

The code above is to be written in the window that you are sending the message from, ie, the parent window. But, just sending the message is not enough. Your target window (running in the iframe) must also be listening to the message that was posted.

To listen for the posted message, you must write the onMessage method in the target window (or there must exist one if you’re using third party webpage and want to interact with that).

window.onMessage for iframe example
This code is to be written in the webpage that is being loaded in the iframe. Here, e is the event that is being passed from the parent window in the postMessage function, and on the basis of that, any operation is carried out in the embedded window. Simple, right?

One last thing between inter-window communication would be when you want to send a message to the parent window from the embedded window. Well, as we know, the postMessage function is actually a method on the Window object therefore we can use it communicate upwards as well.

From the embedded webpage we use window.top.postMessage to send messages to the parent window. The window.top method will give us access to the parent and then postMessage works the same way. Note that you’ll also listen to this message using onmessage in the parent window as well.

A very cool example of this communication is available here and I would recommend you try it out for a while or two.

That is it for this article where we discussed how to use iframe in HTML and I hope you did get something out of this article.

To explore more HTML/CSS articles please check out the Web Design section of the blog.

Also, if you want to be a part of a great facebook group with other developers including me, please join the Easy On The Web facebook group.

History of modules in javascript

Sahil Thakur — Thu, 03 Dec 2020 12:09:39 +0000

The original post is written here with images and code samples -> https://easyontheweb.com/history-of-modules-in-javascript/

Modules are a very important yet unique part of Javascript. I’m calling modules unique because you might be confused about how they are used, how they are written and how they are bundled as “modules”. You might have seen different pieces of Javascript code use different types of modules syntax and therefore to understand all that, in this article we’ll be going through the history of modules in Javascript.

I usually do not study or write about the history of any particular feature or syntax of a language but modules in Javascript are somewhat of an exception. Why? Because I personally was super confused by the way they worked with different projects and different developers using them in different ways.

Till date, I see many different ways in which modules are being written, exported and imported. We’ll try to explore all those ways in this article.

Inline scripts and script tags
When Javascript was it’s in early stages, we included it on our webpages using inline scripts with the script html tag.

As you can see in the image, with this method, we just inline all our Javascript code inside the HTML file itself with the script tag.

There were two major problems to this approach :-

Polluting the global namespace -> If a function called printHello was declared inside this script tag, that name can not be used for a variable again.
Non-reusable code -> Say we write a function printHello inside our home.html file, but we need the same function inside our other webpage called contact.html. How do you think this could be achieved using the inline script method? Answer – you needed to copy the entire function and paste it inside the script tag of the other file as well.
I don’t believe you’ll be seeing inline script Javascript code much these days unless it is to load something like a Google analytics or hotjar onto your main HTML file.

Both these issues were something that needed to be improved upon as they made writing Javascript code more painful than useful. The next solution in line were script tags with a reference to a javascript file.

Using this method, we could write our javascript code in one file and then load that javascript file onto different HTML pages and the javascript code would be available for those particular pages. We can even have multiple script tags in the same page.

Even though this solves the issue of reusability of code this actually does not do anything when it comes to polluting the global namespace. In fact, you are more likely to forget and declare variables of the same name in different files than in a single one!

Other than that, this method brought in another issue of it’s own – that of dependency order. If you have multiple script tags in your html file, you need to make sure that the script tags are loaded in the correct order. By correct order I mean is that if we are using a function A in file 2 that has been written in file 1, we need to make sure that the script for file 1 is loaded before the script in file 2.

Script tags are still common in use and are mostly used to include libraries like Bootstrap or actually any other third party library in your project.

IIFE (Immediately invoked function expression)

Next in the history of modules in javascript came IIFEs, they are called so because they are called as soon as they are declared.

As we can see in the example as well, the entire file is wrapped in parenthesis which are then called. All the functions in this method are attached to a single object declared at the top of the file (myClass in this example).

IIFEs did solve the issue of the pollution of the global namespace as only one variable gets attached to the window in this case. All the functions that we want to use are then attached to that variable. But, the problem of order of scripts still existed.

CommonJS & Browserify
Now we come to module bundling. Module bundling is the process of putting together all your javascript code before it gets put up on the browser. Module bundlers read through all our javascript files and create a single JS file as a result.

CommonJS brought in a syntax that you would still see in many projects today as well.

The module.exports and require syntax finally brought us to a point where we could use modules the proper way. We no longer needed to be aware of the scripts order as we could just require any function we needed from some other file into our file with an easy to use syntax.

ES6
With the introduction of Ecmascript 6 Javascript finally brought in modules into the language using a very efficient and clean syntax.

As you can see in the example above, in the first file, we are exporting two different functions – one named hello which is then imported in file 2 in the first line and also an anonymous function which is being exported as the default value from this file.

The import-export syntax that we got in ES6 is probably the cleanest way to structure your projects using modules as this gives you fine-grain control as well as high-level control on what your files should export and how those functions are reused in some other files.

The only issue that exists when it comes to ES6 is that it still isn’t supported by all the browsers and that we have to use a bundler like Webpack or parcel to convert it into older javascript and then run it on the browser. (For an article on different module bundles click here).

But on the coding side of things, it is all well and good using ES6.

Conclusion
Due to a lack of a proper module system in Javascript early days, you may see many different ways that developers have broken their projects into modules (even more methods than I explained in this article) but with the introduction of ES6 we more or less are moving towards an import-export world of modules.

I hope that this article will help you understand the history of modules in javascript and how they have evolved through the years. For more Javascript articles you can check out this link here => https://easyontheweb.com/category/javascript/

Also, if you wish to join a facebook group with other web developers including me, please join the easy on the web group here -> https://www.facebook.com/groups/503230450489995

How to use short circuit evaluation

Sahil Thakur — Sat, 07 Nov 2020 15:59:36 +0000

This article is originally written here with images and code snippets -> https://easyontheweb.com/how-to-use-short-circuit-evaluation/

How to use short circuit evaluation, huh ? So after a bit of a hiatus for nearly 20 days I’m back into writing blog posts again and I thought of many different ideas to begin writing again but eventually settled down on something very beginner friendly and easy to understand if I may say because to be honest even I’m a bit rough on the edges and diving into a topic that was complex or difficult to write about would’ve been kind of pushing myself as well 😛

I remember being taught short circuit evaluations during my college days and on hearing the term I expected it to be something really fancy and overwhelming. Now, to be frank with you, it is nothing fancy, nothing overwhelming but extremely useful. I use it all the time, my colleagues over the years have been using it all the time and it’s like stupid not to use it. I mean why wouldn’t you ? It’s great.

In the simplest of terms (and I don’t know how to even say this in non-simple terms) short circuit expressions are the ones which stop in between as soon as their value becomes clear. They do not continue evaluation any further if they know what are they going to result into.

Before I tell you how to use short circuit evaluation let us take a quick small reminder on logical operators (in Javascript) by reading up on them here => https://www.w3schools.com/js/js_comparisons.asp

Understanding short circuit evaluation
So, as I mentioned earlier as well short circuiting means to stop the evaluation of an expression in between when it’s value becomes obvious.

This is done to utilise lesser computing power because the value would still remain the same even if the entire expression is computed till the end. Let us take this example and see what I mean.

true || false

This is an expression that is using two boolean values and a single logical operator OR (||). We know that OR returns true if one of the two values it is applied on is true. So, when a computer starts computation over this statement, what do you think happens ? Well, first it reads the value “true”, okay, done. Then it moves onto the || operator, okay, done as well. Now, think about it, does the computer actually even need to check what the second value is ? No, right ? Because the first value is already true. Therefore, the computer skips over seeing/evaluating the second value and as we say short-circuits the evaluation.

Now, this was just a simple example with two direct booleans but what if the second value was a very complex operation that say needed to fetch data from a database and run a mathematical calculation on that value ? Short circuiting is thus a very simple but powerful technique that certain programming languages leverage to save computing power.

Where and how to use short circuit evaluations
One of the most widely used places for short circuit evaluation expressions is in variable assignment based on some expression. This use case involves the same example as above with the || operator.

Another use case for short circuiting is in conditionals like if where we have multiple conditions to check inside the conditional. We might not want to even check for the other conditions if the first condition is met.

The third and my favourite method of usage is in libraries like React, where we use short circuiting to decide whether or not to actually render a component. Well, that might come in the if-else category but I’d like to keep it separate as I find it really cool.

Let’s see all three of them in action and figure out how do they work.

short circuit evaluation examples
Let us go through each of these examples one by one then. In the first example, the expression gets short-circuited at 4. Why ? Because it is the first value that Javascript considers as truthy. Rest all the values that we try to assign to f before that are falsy values in Javascript. But once Javascript hits d, ie, 4 – that value gets assigned to f and the system doesn’t even bother to check the value for e.

With the second example, it is pretty clear I guess, we run the first function foo, check it’s return value, if that is a truthy value the conditional will get short circuited , else we’ll move onto the next function call and so on and so on.. You probably get the idea now.

The third example is also the same and again, I’ve just included that to include it as trick if you do not use it as of now. This is a very cool trick that I started using after I initially used ternary operators and I used to return null in the else statement . Well, I still do use ternary operators when I need to render two different things based on the conditional. But whenever I have to return null in the else block, I mostly use short circuiting and render what needs to be rendered.

I hope this was an article where you got to learn something new and if not, your memory got refreshed on something and if even that did not happen xD, here is the link to my other Javascript articles that you’d might learn something from => https://easyontheweb.com/category/javascript/

Also, if you’d like to join me and some other web developers’ facebook group for discussions and articles, please join us here => https://www.facebook.com/groups/503230450489995

In memory mongoDB for testing

Sahil Thakur — Tue, 13 Oct 2020 13:49:13 +0000

This post is originally written here with images and code samples -> https://easyontheweb.com/in-memory-mongodb-for-testing/

When it comes to testing, one of the most fragile places to test is the interaction with the database. Over the years developers have been using mocks to replicate what their database would ideally behave as and use those mocks in their tests to test the functionality that they are testing. Mocks are great ! I like them too to an extent but I also felt that mocking functions does not give me the same level of confidence that an actual database call would. In comes in-memory mongoDB for testing.

Then, one day I found a great package called mongodb-memory-server and I think it’s really good as it uses an in-memory MongoDB for testing. Now, what does that mean and how we can use the above mentioned module for testing code in our application ? We’ll cover both these things in this article but let’s first discuss on why an actual db call is what I prefer to test my code over mocks.

Why an in-memory database for testing ?
Assume you are writing code that heavily relies on making database queries, writing and updating the database and all sorts of different things related to your DB. To test this piece of code you begin by writing the business logic and then proceed to write the tests for the database interactions. Now, what I did earlier and what many people do (even me at times) is write a mock function that will just replicate the behaviour that the database is expected to do for that particular action on it.

Mocks are good that they do not actually need a real database and you can just ‘mock’ it and not much hardware is used to run them (they are just blocks of simple code that you have written yourself). But, there is an issue with mocks – well, you write them yourself ! So ? Well, if you write them yourself no matter how precise a code you write you might make a mistake in replicating your database’s behaviour.

Being fully confident in your mock function is not possible according to me. No matter how closely you try replicating it, it is not a real database function and well, as I said the level of confidence you’ll get using that mock is not very high.

In come in-memory databases. What are in-memory databases ? In-memory databases are databases that do not actual touch your hard-drive and are spun up, run and then closed in your main memory itself. They are faster than regular ones because they do not actually make any changes to the disk and are well suited for testing as they are destroyed instantly.

Let us see the advantages and disadvantages of in memory databases next.

Advantages and disadvantages of in-memory databases
Advantages of using in memory database for testing :-

Faster development time as you do not need to create mocks for every query.
More reliable tests as you eradicate the possibility of human error while writing mocks.
Closer to the actual application as you are really working with a database.
Disadvantages of using in memory databases for testing :-

The database needs seeding (filling up with data).
Tests take longer to run as they are actually interacting with a database.
More memory usage
Now that I’ve listed both the pros and cons for in memory databases it’s upto you whether you want to use them for your tests or would you prefer writing mocks, that’s totally a personal choice.

In the next section, let us use the npm package mongodb-memory-server to test our node code and see how easy it is to set up and use !

Testing nodeJS with mongodb-memory-server
1
npm i --save-dev jest supertest mongodb-memory-server @types/jest @tyeps/supertest ts-jest
Note that you only need to install the first three packages if you are working with Javascript rather than Typescript.

You see that we are using jest as our testing library of choice and it is one that I highly recommend. So, in your package.json file make the following changes :-

Here also, no need to set the preset in “jest” if you are not using typescript. (We installed ts-jest in the last command).

The setupFilesAfterEnv is a very important property for us because it lets us define a file that will be run to setup our testing environment for jest. As you can see we call this file setup.ts and this is where we’ll be working and setting up our in memory-database.

In this file, we use three test lifecycle methods of beforeAll(runs once before all the tests), beforeEach(runs once before every test) and afterAll(runs after completion of all the tests).

What we see is that we spin up a new in memory mongo database in the line mongo = new MongoMemoryServer and then connect it to our mongoose ODM layer using a connection string just like we do our real database. The difference here is that this in-memory one will be connected to our mongoose only in a testing environment.

The beforeEach and afterAll functions are also quite self-explanatory but you can leave a comment down if you did not get what they are supposed to be doing.

Let us see how you can easily test some piece of code that expects a mongo doc back or involves any sort of database operation :-

Yep ! No more mocks, just a simple API call that will be taken care of itself by the in-memory database we just spun up.

There are a whole lot of configuration options for you to explore with this package here -> https://github.com/nodkz/mongodb-memory-server

This is it for this article on using in memory-databases for testing your applications. I hope you found the stuff in this article interesting and you’ll be taking a look at using this in one of your projects and trying it out if this is suitable for you or not.

If you want to read my other articles on MongoDB please check out this link here -> https://easyontheweb.com/category/mongo/ .

Also, if you want to join a facebook group with other web developers and bloggers including me please join here -> https://www.facebook.com/groups/503230450489995

What is hoisting in Javascript

Sahil Thakur — Thu, 08 Oct 2020 14:35:39 +0000

This article is originally written here with code snippets and images => https://easyontheweb.com/what-is-hoisting-in-javascript/

One of the most commonly asked questions in Javascript has to be “What is hoisting in javascript ?” or well, the same questions phrased in a different way. Nevertheless, the point is that hoisting is something that is expected of developers that it is known and understood by them.

I myself have faced this question in an interview before and luckily was able to give a satisfactory answer to this. Hoisting in javascript is a very important concept especially if you come from languages that do not hoist their values.

In this articles, we’ll see what hoisting values means and how hoisting works in general in Javascript.

What is hoisting ?
Hoisting is the behaviour of moving variables and functions to the top of the current execution context or environment.

If this definition sounds very technical and you did not get what it actually means let us take a code example in javascript and C and compare them to understand hoisting.

Javascript

C
So, what would happen here is that in Javascript we will not face any error even though the function declaration for bark() is after it is called. This is because Javascript supports hoisting and this function has actually been moved to the top of the execution context during compilation.

In C though, we will get an error, because the variable myVar is declared after it is being used. So, when it is being used, there is no such thing as myVar.

I hope this example was good enough to illustrate the point of hoisting and what does it actually mean to take things to the top of the execution environment.

Different languages implement hoisting while many do not. It has it’s pros and cons like any other programming concept and you may be a fan of it or hate it.

Hoisting in Javascript
Javascript is one of the languages that does have hoisting. When it comes to javascript, variables and functions are hoisted to the top of the current execution context during the creation phase of the context, ie, compiling.

Let us see what actually happens during hoisting and how the compiler works with this concept – so what happens is that during the compilation phase, the compiler runs through the entire code block and searches specifically for the terms ‘var’ and ‘function’. These are the only two things that get hoisted in Javascript.

So, every time the compiler encounters one of these terms, it reserves a memory space for them. That is, it knows that it needs to reserve memory beforehand because they will take up memory later.

Also, note that I specifically mentioned the terms var and function because only these two terms get hoisted. Not const, no let and a lot of other tiny things that we’ll discuss ahead.

Another very important thing is the fact that variables get partially hoisted whereas functions are completely hoisted. What does that mean ? Let us see this in action in the next section.

Variables get partially hoisted whereas functions are completely hoisted
Let us now see what it means to be partially and completed hoisted. I talked before that variables get partially hoisted.

NOTE: const and let do not get hoisted. This is because the compiler specifically only searches for the keyword var and hoists it.

Now, the var variables get hoisted partially. Let us first see a code example and then discuss what that means.

Why did we get undefined ? Well, that is the answer to partial hoisting. Had the variable myVariable not been hoisted, we would have gotten a reference error (Just like in C) and had it been completely hoisted, we would have console logged the value “Amit Patial”. Because of variables being partially hoisted, we got undefined.

What happens under the hood is that when it comes to var, javascript just allots memory to that variable and does not instantiate it. Therefore, undefined gets stored in it, which we see as the console log. If we console log after the manual declaration we’ll see the expected Amit Patial printed.

Therefore, it is very important to remember that variables are only partially hoisted in Javascript.

Next are functions, which are completely hoisted in JS. And as you may have guessed by now, complete hoisting means that you can use them before the declaration just as you would after their declaration. I’m not going to give an example of a successfully hoisted function because it is the same as in the last section but I’ll be talking about a few gotchas for functions here.

As I’ve been pointing out again and again it is the keyword ‘function’ that the compiler looks for during the compilation and then it reserves the place in memory for the function itself. What about something like the next code snippet ?

Why do you think we got an error in the second one ? Because the compiler searched for the first term as ‘function’ and for the second function the first letter was ‘(‘ , therefore, this function was not hoisted which resulted in an error.

Another thing that you must have figured out by now is that function expressions are also not hoisted for the same reason. But a very interesting thing happens with something like this (NOTE: It only happens in certain JS environments and not all).

This happens only on certain JS environments
So, why do you think this happens ? Well, because ‘hello’ gets hoisted but is set to undefined just like any other variable. Therefore, we cannot call it as a function.

Points to remember..
A few points to remember regarding hoisting are :-

Compiler only hoists var and function keywords.
let and const are not hoisted (are hoisted but not initialised actually).
Variables are partially hoisted whereas functions are completely hoisted.
Function expressions are also not hoisted.
If you liked this article and would like to read more articles related to Javascript please check out this link => https://easyontheweb.com/category/javascript/

If you want a facebook group with other web developers and me please join this group here => https://www.facebook.com/groups/503230450489995

How to schedule tasks in Node.js

Sahil Thakur — Fri, 02 Oct 2020 15:07:28 +0000

This post is originally written here along with code samples and images -> https://easyontheweb.com/how-to-schedule-tasks-in-node-js/

I still remember when I first heard of the concept of cron-jobs and how to schedule tasks in general, not just in Node.js. The problem statement of having to run something again and again was always in my mind but till that point of time I actually did not ever need to have a scheduler in any of my projects. So, when the day finally came I was amazed at how easily it could actually be done.

So, in this article we’ll be discussing how we can schedule tasks in Node.js, what cron jobs are and also about a very cool NPM package called node-cron.

But, first let us just take a look at what scheduled tasks are and what problems we can solve by scheduling tasks. A scheduled task is something that runs periodically based on time intervals – this task is not dependent on an action occurring and then it being triggered to run but instead it solely depends on the time. For example, you might want to take a backup of your database every two hours – for that you can run a scheduled task and set it’s timing for two hours. Another case maybe that every night at 12 you might want to run some kind of analysis script on certain data of your application and update certain aggregate numbers for them.

Different applications may have different needs for scheduled tasks but if you ever come across a requirement in your application that makes you go like “Man, I wish think happened on it’s own every X hours” , that is an indication for you to schedule that task.

Cron-jobs
According to very informative HostGator article here – cron is a Linux utility which schedules a command or script on your server to run automatically at a specified time and date. A cron job is the scheduled task itself. Cron jobs can be very useful to automate repetitive tasks.

That pretty much is a very clear and concise introduction to cron jobs. Again, cron jobs are just a different name for scheduled tasks and the possibilities are really endless here, you may set up any script as a cron job on your server and it will be executed seamlessly (as long as you don’t botch up the script that is 😛 ).

Under the hood, there is cron daemon (background process) that controls the running of scripts at their scheduled time by looking at the crontab which is a table of scripts and their times.

Using node-cron to schedule tasks
First and foremost here is the link for the node-cron NPM package -> https://www.npmjs.com/package/node-cron

As we discussed before, there is a crontab that the system maintains and uses to run scripts at particular times. Now, this article is not on how you can schedule tasks in your linux system but how you can schedule tasks in Node.js . Nevertheless, a great thing is that the node-cron package actually uses the exact same scheduling syntax as the crontab one. Therefore, if you know how to do it at one place, you nearly know how to do it for the other one as well (in terms of syntax).

The node-cron module is a very lightweight and purely Javascript based scheduler that is super easy to use and does the job perfectly. Therefore, we’ll be using it to schedule our tasks in Node. Note that there are plenty of other packages that do the same as well but I just prefer node-cron for the ease of it’s use.

The crontab syntax
Before actually using the node-cron module in an application, I think it’s important to discuss the crontab syntax once as it is well… an interesting one least to say.

# ┌────────────── second (optional) (0-59)
# │ ┌──────────── minute (0-59)
# │ │ ┌────────── hour (0-23)
# │ │ │ ┌──────── day of month (1-31)
# │ │ │ │ ┌────── month (1-12)
# │ │ │ │ │ ┌──── day of week (0-7) 0 is sunday
# │ │ │ │ │ │
# │ │ │ │ │ │
# * * * * * *
This is a diagram that can help you with the crontab syntax but to be honest no one actually memorises this stuff, you just google and find how to do it. But it’s good to have some familiarity with it at least.

A few examples of set up cron jobs
In the above image are some examples of how to work with the crontab syntax to set up cron jobs on particular times and dates.

Even though the syntax is simple it sometimes does mess up with your mind so what I would suggest is not overthinking it and just letting your instincts type the crontab syntax. NO ! Please google the crontab syntax to confirm it once 😛 I mess it up all the time myself.

node-cron in node.js application
First of all, we need to install the node-cron module into our application using npm / yarn.

npm install --save node-cron

Yes, it’s as easy as this ! This will schedule a cron for 5:00 AM every day which will console log this statement. But as it is very clear, the second argument is for you to provide a function as an argument that would carry out the task you want to schedule – maybe send a good morning email to someone at 5 ?

There’s an awful lot of crontab syntax that you could manipulate in order to achieve more fine grain control of how you want to schedule your jobs. A very cool tool that can help you out and generate the crontab syntax that you need is this here -> https://crontab-generator.org/

You might also want to explore the shelljs package so that you can it from within your node code to run commands on the terminal (something you need to do for many scheduled tasks, maybe taking a database backup ?).

This is a simple node script using which we are taking a backup of your sqlite database every night at 11:59 PM. We’re using the shelljs package to run the shell commands from within the node code.

The concept behind scheduled tasks and cron jobs is very powerful and yet we are able to execute them so easily thanks to the clean API provided by node-cron and a very cool crontab syntax. The applications for this are for you to think and well actually, dependent on what is needed in your app but now you know how easy it is to implement them !

If you liked this article and would like to see other cool articles on NodeJS check this link here -> https://easyontheweb.com/category/node/

Also, it would be great if you join this Facebook group with me and other web developers to interact and talk to ! -> https://www.facebook.com/groups/503230450489995

Working with JSON in Javascript

Sahil Thakur — Thu, 24 Sep 2020 15:01:45 +0000

This post is originally written here with code samples and images -> https://easyontheweb.com/working-with-json-in-javascript/

I still remember my early days of learning web development, coming across the term JSON and getting scared for no reason at all. The term seemed daunting to me, mostly because I had no idea what it was. As it turns out, JSON is no mountain and in fact is your friend on the web. Therefore, in this article we’ll explore working with JSON in Javascript (the language of the web, ain’t it ?)

What exactly is JSON ?
Let us take a leaf directly out of JSON’s official documentation and just discuss a bit what JSON is and why should we be bothered about it ? Well, let’s answer the second question first.

JSON is important because we as web developers have decided to use it as the format in which we exchange data between servers and browsers and if you think about it, that is basically the entire web in a single line. So yeah, JSON is pretty important considering that it is the main format of information exchange on the web.

The JSON format is super lightweight which makes it an easy choice for the exchange of info., is actually just text but formatted in a very particular way such that it resembles objects when it comes to Javascript (or hashtables or whatever different names we’ve got for a DS that stores key-value pairs). Nearly every language has support for such a data structure and therefore can easily parse JSON.

Example of JSON
As you can very clearly see, the keys in JSON are strings (we’ll learn how to work with them in Javascript in the next section).

JSON and Javascript
JSON – Javascript Object Notation.

JSON literally has the word Javascript in it. Even though JSON is language independent it is written as Javascript Object Notation.

JSON itself exists as a string and Javascript actually provides a global module called JSON to work with it which we will take a look at later in this article.

Two terms that might come in handy are serialization and de-serialization. Serialization is to convert our data to a string so that it can successfully be transmitted as JSON whereas de-serialization is to accept string JSON data and convert it into usable data for us as developers or browsers to work with that data.

We will take a look at the JSON global module in Javascript but let us first take a look at how we can serialize and de-serialize data using the same module in Javascript.

JSON.stringify and JSON.parse
The two main functions that Javascript provides us to work with JSON data using it’s aptly named JSON global module are JSON.stringify() and JSON.parse(). They are used to serialize and de-serialize JSON data in Javascript so let us see how do they work.

JSON.stringify()
As we discussed before, when information needs to travel between server and browser, it needs to do so as text (or string as we know it). Therefore, what if we want to send some object data from our server (say any written on Node) to the browser ? We cannot do that as direct javascript object form. We first need to stringify the data and then send it through to the browser.

The JSON.stringify() function can be called with one or two parameters. The first parameter is the value that has to be converted into a JSON string.

JSON.stringify() example
As you can see in the code example every value that is passed into the function is wrapped as a string, even arrays and objects ! Also, another thing to note is that values like NaN, undefined etc. are all converted to null when JSON.stringify() is run on them.

One very interesting thing is a toJSON property that objects can have. If any object has this property then JSON.stringify() will only stringify based on this property’s rules. Let us see an example :-

This is a very powerful technique that I have myself used many times , mostly to filter data that should be. or should not be sent when a particular object is stringified into a JSON string.

The same thing can also be achieved by passing a second argument to the JSON.stringify() function called the replacer. The replacer is also used to filter out properties from the value to be stringified (but please note that the toJSON method can be used to do a whole variety of things, filtering was just an example).

The replacer can be a function or an array. If we pass it as an array, then only the values inside that array will be stringified and all the other values will be ignored. Let us see an example of the same thing we did above but by using the replacer array.

Using an array replacer is supercool and easy to do when it comes to filtering properties from the object but if you want a bit more fine grain control like the toJSON function you can use the replacer as a function.

This works nearly similar to toJSON so I guess you can use any that you like and that suits your needs actually.

Next, let us see how we can work with JSON data when we receive it rather than send it.

JSON.parse()
A sibling to the JSON.stringify() function is the JSON.parse() function which does the exact opposite of its brother.

What JSON.parse() does is take in a JSON string and converts it into it’s equivalent Javascript object (or any value for that matter).

This function takes in two arguments – one being the JSON string that needs to be converted into JS and the other being an optional function in which you can do a transformation of the object while parsing it. Let use see a simple example first :-

Pretty simple, right ? The main objective is clear – we just want to take in the json string and convert it into a Javascript value so that we can easily work with it in our program. Nothing special about it.

Let us also see an example of the optional second argument that you can pass into the JSON.parse() function.

Example from MDN docs
This function is just similar to the transformer we use with JSON.stringify() .

Two very important things to keep in mind that often trip developers up are these :-

JSON.parse() throws an error if the JSON string has trailing errors.
JSON.parse() throws an error if the JSON string has single quotes instead of double as key wrappers.

All three of them throw syntax errors
Final words
Even though working with JSON is pretty easy and especially in Javascript you can basically do it with just two of these functions, I think underestimating or getting overwhelmed by JSON is a bad thing. It is a great format to exchange information and we as web devs should leverage and appreciate it’s benefits.

For more information on JSON please check the MDN docs => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

For more javascript tips, tricks and content please check out the Javascript section of the blog here -> https://easyontheweb.com/category/javascript/

And if you want to be a part of a facebook group with other great web developers and also me please join this facebook group -> https://www.facebook.com/groups/503230450489995