DEV Community: Ajah Chukwuemeka

Vaas App (Data visualization as a service) - DOHackathon submission

Ajah Chukwuemeka — Thu, 07 Jan 2021 22:23:15 +0000

What I built

A data visualization as a service product that enables non-developers to create downloadable charts from their CSV or JSON data as well as developers to create charts using the provided API. It supports file uploads for non-developers, file url where the data can be downloaded and parsed for developers as well as data objects as JSON data. Users can download the data visualization charts and use it in their presentations or within their own apps or any way they see fit and they can title it accordingly so as to be able to access it in future if they come back to the app.

Example visualization output:

Category Submission:

Built for Business

App Link

My app submission can be found here: https://vaasapp.co/

Screenshots

Home page

Non-developers call to action

Developers call to action

Chart types

Data visualization chart display with download button

Pricing page

Pricing page options description

Viewing all created visualizations

Creating a visualization as a non-technical person

Description

The app submission enables non-technical and technical people to create stunning data visualizations using their JSON or CSV data or even raw data objects in HTTP post requests via API. For non-technical people, they can upload their file using the app user interface screen. It can be tried out here: https://vaas-wu4a4.ondigitalocean.app/#try and users of the app can download their data visualizations as PNG images and use it how ever they see fit.

Link to Source Code

https://github.com/ChukwuEmekaAjah/vaas

Permissive License

MIT License
Link: https://github.com/ChukwuEmekaAjah/vaas/blob/master/license.md

Background

The decision to build this particular solution in this contest was spurred by my love for data visualizations. I've always wanted to build a SaaS product that empowers non-developers/non-technical people to create data visualizations of different types with their data easily thereby making it easy for them to get insights from their data. They wouldn't need to know how to use Excel or program in any programming language to be able to create data visualization charts with their CSV or JSON data file. Also, the ability to choose different chart types such as line, pie or bar charts was considered in the capabilities to give to non-technical people since they are the most popular chart types.

In addition to this, bearing in mind that the service can be extended to developers who do not want to go through the process of developing their own visualization service and want to outsource the process to a product, I was motivated to build the product to include developers as prospective customers of the service using a simple-to-use API.

How I built it

In order to build this service, I knew that I needed a Platform-as-a-service product to outsource the handling of hosting and deployment infrastructure. Digital Ocean with its new App platform offering made the process easy to use. Digital ocean's app platform service was easy-to-use and has a competitive pricing structure with app performance insights that would help developers see their product health and status.

The app is built using NodeJS/ExpressJS for the HTTP server and routing, MongoDB for storage, Redis for session storage and Puppeteer for server-side HTML page rendering.

Also, I knew I needed a way to dynamically render data visualization pages for API users and with some Google searches on how I could do that, I got to learn of Puppeteer; the headless chrome engine that can be used on NodeJS servers to render HTML pages. I learnt how to use Puppeteer to dynamically launch browsers and now, I believe I can apply the knowledge learnt to other projects of mine. I also learnt how to deploy apps with Digital Ocean App Platform and it's now a tool in my toolbelt of PaaS providers.

Somehow, I stumbled upon a roadblock in the process of the building the service on the App Platform; the dependencies needed to install Puppeteer on my App instances could not be installed and this led me to do some digging for which I eventually found this link: https://www.digitalocean.com/community/questions/how-to-setup-puppeteer-in-nodejs-app which talks about the fact that the Digital Ocean Engineering team is working to make it possible to use Puppeteer on an app instance. With this setback in mind, I had to extract the Puppeteer component into an external HTTP service so that I could move forward with the app and make it available for developers to consume the API.

Additional Resources/Info

Digital ocean engineering team on work being done to make Puppeteer available
https://www.digitalocean.com/community/questions/how-to-setup-puppeteer-in-nodejs-app

Vaas App Postman API documentation
https://documenter.getpostman.com/view/9506038/TVzNHK6P

Vaas App API documentation
https://vaasapp.co/docs

Data Visualization as a service using the Digital Ocean App Platform - API documentation

Ajah Chukwuemeka — Mon, 04 Jan 2021 07:59:26 +0000

Since a core part of my proposed submission is an API, it is important that I create a robust and concise documentation for how developers who want to create charts via API can go ahead with it. I have successfully created the first draft of the API documentation and I'm looking forward to your comments on the ease of use of the API.

The API documentation can be found here: https://vaasapp.co/docs

I would appreciate your feedback on the clarity of the API documentation and suggestions on how to go about improving it. Thank you.

Also, in my previous article, I talked about how Puppeteer wasn't working on the app platform and how the Digital Ocean Engineering team is working on it, my response was to extract that core component of my submission to an external HTTP service and I've successfully implemented it. Now, you can seamlessly create data visualizations and extract the generated image via API without the app crashing.

Thank you for reading. I'm looking forward to my final submission later this week and hopefully, my product submission would be a top contender for the grand prize and developers with non-developers can start paying for the service once we go out of the present beta testing phase that it is at the moment.

Data visualization as a service on the Digital Ocean app platform - Roadblock

Ajah Chukwuemeka — Sat, 02 Jan 2021 21:00:03 +0000

As part of my proposed solution to the Digital Ocean App Platform hackathon solution, I require Puppeteer for rendering graphs via API and downloading the graph as an image. It works seamlessly on my local machine and hopefully, it should work on the app platform.

However, from the image above, puppeteer fails to launch with the errors above. I tried to look for a way to install the required dependencies all to no avail. I did some quick Google searches to find a solution to it without success. Finally, I found this link with information on the situation in the Digital Ocean community support platform here: https://www.digitalocean.com/community/questions/how-to-setup-puppeteer-in-nodejs-app

Luckily, the problem is being worked on by the Digital Ocean engineering team as stated in the comment found in the link above.

Nonetheless, in order to make sure that the API service is functional by the submission date for the hackathon, I've decided to extract and create the Puppeteer rendering service via an external HTTP service and return the rendered graph image to my App Platform service to store on the DB.

In addition to this, I have updated the home page of my app to enable people to access and try the app functionality without having to go through the process of signing up and verifying their email. You can take a look here: https://vaasapp.co/

Also, I'm happy about the Digital Ocean App Platform insights page which gives insights into CPU and memory usage as well as bandwidth consumption which are necessary data for optimizing your app and checking its health status.

Hopefully, I would be able to bootstrap the puppeteer rendering service soon and be ready to showcase the API by the submission date.

Data Visualization as a Service using Digital Ocean App Platform - Deployment process

Ajah Chukwuemeka — Wed, 30 Dec 2020 11:36:20 +0000

In preparation for the Digital Ocean hackathon leveraging the newly created app platform, I strongly believe that the ease of deployment is one of the selling points of the product and in this article I would be talking about how I deployed my app to the App Platform. This article would contain the step-by-step process as well as the roadblocks I encountered in the process.

After I logged in to my dashboard and decided to create an app on the App platform, I was showed the screen above and I liked the fact that the user interface was easy to understand. Clicking on the Launch App button took me to the next screen:

On this screen, you are required to link your Github profile with Digital Ocean so that a seamless continuous integration and deployment process can be created for you. After linking my Github profile, I was able to select the repository I wanted Digital Ocean to access. The beautiful thing about it all is that you have the capability and luxury to select just a single repository you want to grant Digital Ocean access to without sharing your whole Github repository with them. Unto the next step I went.

In this step, the app requires you to create a name for your app and select the GIT branch you want to continuously deploy. This is good because we could have multiple branches on our GIT repository. Selecting the branch that's the single source of truth is great for having your app function how you want it to be. Also, we are provided with the liberty to choose if we want to auto-deploy our app any time a push or merge is made to our selected branch. I like this feature. However, I would recommend that the developer puts in place testing strategies to make sure that the app is always good to go without breaking changes so it won't disrupt access to your app by your prospective users. Next step is selecting the infrastructure plan required for your app.

My app requires the NodeJS environment and Puppeteer to run effectively. Puppeteer is quite heavy and so I went with the 1GB RAM capacity to cater for the situations where I might be dynamically generating visualization images via the app API. The plans are quite flexible and I believe would suit diverse use cases based on your app needs. This was the final step in the app creation process after which you can now launch your app.

I eventually was able to launch my app without success. The build was successful however the app didn't start. This is because some environmental variables needed to start the app weren't created on Digital Ocean already. I looked through the app dashboard to find where to add these environment variables and could not find any where to do so. I actually had my .do folder created with the deployment yaml file created in it but throughout the app creation process, it didn't ask me for my environment variables. So, this deployment strategy didn't work well for me even though the process was seamless and intuitive. I hope the product team can make adding/updating environment variables as easy as the deployment process.

Nonetheless, I decided to try deployment with the Digital Ocean button in my repository:

The reason I tried this option was to really understand the rationale why as part of the hackathon, it was recommended that we add the deploy to Digital Ocean button to our repo. The process was as follows:

It first asked me to set my environment variables values. I already set the environment variables that my app required in the app deployment template file. This process was straightforward and my gut feeling was that the app would deploy successfully this time around.

After setting the environment variables and requesting that the app be launched, the build process started and as I waited patiently, I eventually got the message I wanted to see; my app had deployed successfully.

I was able to seamlessly deploy the app using the Deploy to Digital Ocean button. Now, I can go back to building my app and not bothering about the infrastructure needed to run it.

On the app side of things, I've been able create the functionality to dynamically create data visualizations using Puppeteer rendering and data url extraction and storage. I hope to be able to make more progress on the app roadmap in the coming days with the ease of deployment and functionality that Digital Ocean Apps Platform provides.

Data Visualization as a Service using Digital Ocean App Platform

Ajah Chukwuemeka — Sun, 27 Dec 2020 20:17:12 +0000

The Digital Ocean App platform provides us with an opportunity to deploy our apps without worrying about the infrastructure required to make it available to consumers. The beauty and ease of deployment via Github pushes is great and I would love to be part of the hackathon creating products using this amazing platform.

I would be contesting under the 'Built for business' category. The project I'm working on is a data visualization as a service product. It allows developers and non-developers to upload their JSON or CSV data and retrieve back a visualization of their choice. Non-developers would have the ability to utilize a user interface to upload their files and select the fields that would make up the X and Y axes as the case may be for the different kinds of supported chart types. They would have the ability to download this charts as images and use them in their presentations or reports or in whatever form they want to utilize the chart.

However, developers would have an extra functionality of creating visualizations using an API that they can send data to with the accompanying fields they want to visualization and receive back either the visualization image or its raw data.

Since it's a holiday season, my development pace has been quite slow but I believe that I've made good progress. You can find the repository here: (https://github.com/ChukwuEmekaAjah/vaas). I've been able to enable user registration, authentication and authorization within the app and non-developer users can now create visualizations and view their created visualizations.

I hope to continue on this with the API component for developers and as well as subsequently add billing functionality when the product is due.

For now, I'm working on the API component and I'm setting up my repository on Digital Ocean. Hopefully by the middle of the week, I would have these components up and running and by the end of the day, the app would have been deployed to Digital Ocean.

How do you log NodeJS program state? Try Logpersist!

Ajah Chukwuemeka — Tue, 26 Nov 2019 18:55:36 +0000

Logpersist is a JavaScript logger library for error and log messages with provisions for console, file and remote logging of program status information. It also makes provision for grouping logs, assigning severity as well as triggering notifications based on severity levels.

Motivation

Logpersist was built because I needed a persistent way to record and query error and log messages while my program is in a production environment and I believe other developers would have the same issues too.

What you get

The ability to persistently log messages to any of: console, file or remote API.
Grouping of messages and assigning of severity levels
Possibility of triggering notifications based on specified severity levels
Recording of stack trace from exceptions thrown within the program

How to use

npm install --save logpersist

const Logger = require('logpersist');
const sendGrid = require('sendgrid');
let configOptions = {
    destination:{type:"file", address:"messages.log"},
    group:"basics",
    environment: "dev",
    notifications : {
        "1":[],
        "2":[],
        "3":[],
        "4":[],
        "5":[]
    },
        notificationService: sendGrid.email
}
const consoleLogger = new Logger(configOptions);
consoleLogger.log("User just signed up"); // logs the message to the file messages.log
let err = new Error("Failed to authenticate user");
consoleLogger.log(err); // logs the error to the file messages.log

let logOptions = {
    destination:{type:"file", address:"messages.log"},
    group: "basics",
    from: Date.now(),
    to: Date.now(),
    severity: 2,
    source: "index.js",
}
consoleLogger.getLogs(logOptions); // returns an array of message objects
/*
    [
        {
            source:String,
            message:String,
            time:Date,
            name:String,
            group:String,
            severity:Number,
            trace:String
        }
    ]
*/

You can create multiple logger objects and if an option argument is not provided at instantiation time, it uses the default configuration which is:

    let configOptions = {
        destination:{type:"file", address:"errors.log"},
        group:"general",
        environment: "dev",
        notifications : {
            "1":[],
            "2":[],
            "3":[],
            "4":[],
            "5":[]
        }
    }
    // notification keys are severity levels and the value is an array of email addresses of people to notify

API

Methods on the logger object

Logger.log()
Logger.getLogs()

Example usage for the API

The log method can take a second options argument which can be used to specify any of the group, severity, name and destination of the log message. If any of the options list of properties is absent, the defaults from the Logger object are used and if the options argument is absent, the defaults from the logger object at instantiation time are used.

    let fileLogger = new Logger();
    fileLogger.log("User just signed in");

    function findUser(userId, function(err,user){
        if(err){
            fileLogger.log(err, {
                group:"userSearchErrors",
                severity:2,
                name:"user search",
                destination:{type:"file", address:"usersearch.log"}
            })
            return err;
        }
        return user;
    });

The getLogs method can take no argument wherein in uses the object instantiation configuration options to search for logs or it takes a single argument which can be a number (in this case it get logs based on the specified severity), a string (in this case it get logs based on their group name) or an object (in this case it gets the logs based on a set of retrieval options)

    fileLogger.getLogs(); // returns an array of logged messages
    let retrievalOptions = {
        destination:{type:"file", address:"messages.log"},
        source:"index.js",
        severity: 2,
        group:"userSearchErrors",
        from: Date.now(),
        to: (new Date("2/2/2020")).getTime()
    }
    fileLogger.getLogs("userSearchErrors");
    fileLogger.getLogs(2);
    fileLogger.getLogs(retrievalOptions)

Contributing

In case you have any ideas, features you would like to be included or any bug fixes, you can send a PR.

(Requires Node v6 or above)

Clone the repo

git clone https://github.com/ChukwuEmekaAjah/logpersist.git

It was quite exciting building this project as I enjoyed every bit of the process and I hope we give it a spin in our next projects. I would appreciate some feedback and possible collaborations to make it better.

Thanks for reading. Mucho gracias mi amigos.

Beautiful-dom; a HTML parser built with TypeScript

Ajah Chukwuemeka — Fri, 23 Aug 2019 16:41:46 +0000

Beautiful-dom

Beautiful-dom is a lightweight library that mirrors the capabilities of the HTML DOM API needed for parsing crawled HTML/XML pages. It models the methods and properties of HTML nodes that are relevant for extracting data from HTML nodes. It is written in TypeScript and can be used as a CommonJS library

What you get

The ability to parse HTML documents as if you were dealing with HTML documents in a live browser
Fast queries that return essential data from HTML nodes
In-place order of HTML nodes after searching and parsing.
Complex queries with CSS selectors.

How to use

npm install --save beautiful-dom

const BeautifulDom = require('beautiful-dom');
const document = `
<p class="paragraph highlighted-text" >
  My name is <b> Ajah, C.S. </b> and I am a <span class="work"> software developer </span>
</p>
<div class = "container" id="container" >
 <b> What is the name of this module </b>
 <p> What is the name of this libray </p>
 <a class="myWebsite" href="https://www.ajah.xyz" > My website </a>
</div>
<form>
  <label for="name"> What's your name? </label>
  <input type="text" id="name" name="name" />
</form>
`;
const dom = new BeautifulDom(document);

API

Methods on the document object.

document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()
document.getElementById()
document.querySelectorAll()
document.querySelector()

Methods on the HTML node object

node.getElementsByClassName()
node.getElementsByTagName()
node.querySelector()
node.querySelectorAll()
node.getAttribute()

Properties of the HTML node object

node.outerHTML
node.innerHTML
node.textContent
node.innerText

Their usage is as they are expected to be used in an actual HTML DOM with the desired method parameters.

Examples for document object


let paragraphNodes = dom.getElementsByTagName('p');
// returns a list of node objects with node name 'p'

let nodesWithSpecificClass = dom.getElementsByClassName('work');
// returns a list of node objects with class name 'work'

let nodeWithSpecificId = dom.getElementById('container');
// returns a node with id 'container'

let complexQueryNodes = dom.querySelectorAll('p.paragraph b');
// returns a list of nodes that satisfy the complex query of CSS selectors

let nodesWithSpecificName = dom.getElementsByName('name');
// returns a list of nodes with the specific 'name'

let linkNode = dom.querySelector('a#myWebsite');
// returns a node object with with the CSS selector

let linkHref = linkNode.getAttribute('href');
// returns the value of the attribute e.g 'https://www.ajah.xyz'

let linkInnerHTML = linkNode.innerHTML
// returns the innerHTML of a node object e.g ' My website '

let linkTextContent = linkNode.textContent 
// returns the textContent of a node object e.g ' My website '

let linkInnerText = linkNode.innerText
// returns the innerText of a node object e.g ' My website '

let linkOuterHTML = linkNode.outerHTML
// returns the outerHTML of a node object i.e. '<a class="myWebsite" href="https://www.ajah.xyz" > My website </a>'

Examples for a node object


let paragraphNodes = dom.getElementsByTagName('p');
// returns a list of node objects with node name 'p'

let nodesWithSpecificClass = paragraphNodes[0].getElementsByClassName('work');
// returns a list of node objects inside the first paragraph node with class name 'work' 


let complexQueryNodes = paragraphNodes[0].querySelectorAll('span.work');
// returns a list of nodes in the paragraph node that satisfy the complex query of CSS selectors


let linkNode = dom.querySelector('a#myWebsite');
// returns a node object with with the CSS selector

let linkHref = linkNode.getAttribute('href');
// returns the value of the attribute e.g 'https://www.ajah.xyz'

let linkInnerHTML = linkNode.innerHTML
// returns the innerHTML of a node object e.g ' My website '

let linkTextContent = linkNode.textContent 
// returns the textContent of a node object e.g ' My website '

let linkInnerText = linkNode.innerText
// returns the innerText of a node object e.g ' My website '

let linkOuterHTML = linkNode.outerHTML
// returns the outerHTML of a node object i.e. '<a class="myWebsite" href="https://www.ajah.xyz" > My website </a>'

Contributing

In case you have any ideas, features you would like to be included or any bug fixes, you can send a PR.

(Requires Node v6 or above)

Clone the repo

git clone https://github.com/ChukwuEmekaAjah/beautiful-dom.git

It was an exciting building this NodeJS module using TypeScript as I recently learned how to use TypeScript and what better way to practice and experiment with new knowledge?

I would appreciate comments and contributions to the project as well as the opening of issues as regards edge cases that I may not have fathomed as well as errors encountered while you use the module.

Utilizing machine capability in NodeJS using the cluster module 1

Ajah Chukwuemeka — Tue, 14 May 2019 15:01:30 +0000

Humans naturally want to live to their full potential. We always believe that we have untapped potential welled within us with the conviction that our genes and nurturing has equipped us enough to be able to live above subpar lives. In building apps with NodeJS, the machines we utilize have different capabilities bearing in mind the number of cores possessed by the machine as well as the power of individual cores.

A single instance of NodeJS doesn't utilize all the machine capabilities since it is single-threaded and you can't afford to let your app suffer from overload when it has dormant server resources that can be utilized to bear the weight of client-server communication. In light of this, NodeJS makes provision for the the cluster module which helps fork multiple processes of a NodeJS app. For a web server, the cluster module helps spun multiple child processes that share a port with their parent process. Ehhh, not like a port can be shared by web servers. Technically, the parent module receives requests and efficiently distributes it to the client processes (just like the great Xavi and Iniesta did for Messi in their heydays). The cluster module is particularly useful for networking applications but it can still shine in other processes where we want to carryout CPU-intensive tasks across multiple workers.

According to the NodeJS official documentation, the child processes (worker processes) are spawned using the child_process.fork() method, so that they can communicate with the parent via IPC (Inter-Process Communication) and pass server handles back and forth.

In distributing incoming connections to the child processes, there are two methods adopted by the cluster module and they are platform related. The first one (and default on all platforms except Windows), is the round-robin approach (turn-based allocation without priority), where the master process listens on a port, accepts new connections and distributes them across the workers in a round-robin fashion, with some built-in smarts to avoid overloading a worker process. The second approach is where the master process creates the listen socket and sends it to interested workers. The workers then accept incoming connections directly.

The workers are all separate processes implying that they can be killed or re-spawned depending on program needs without affecting other workers. As long as there are still hale and hearty workers, the master process would still be accepting connections. NodeJS doesn't bear the responsibility of managing the number of available workers and so, it is the application's responsibility to manage the worker pool based on its own needs.

Now, lets dive into a use case of the cluster module. Remember we said the cluster module shines bright in networking applications? We would use a networking application for our example. We would prop up an http server and distribute requests across child processes based on the number of CPU cores our operating machine has.

const cluster = require('cluster');
const http = require('http');
const number_of_cpus = require('os').cpus().length;

if(cluster.isMaster){
    console.log(`Master with id ${process.pid} is running`);

    // setting up the workers
    for (let i = 0; i < number_of_cpus; i++){
        cluster.fork();
    }

    cluster.on('exit',(worker, code, signal) => {
        console.log(` Worker with process id ${worker.process.pid} died`);
    });
}
else{
    http.createServer((req,res) => {
        res.writeHead(200);
        res.end(`Hello world from ${process.pid}`)
    }).listen(80);
    console.log(`Worker with ${process.pid} started`)

}

Since NodeJS is event-driven, both the master process and the worker processes listen for events and act accordingly (that's if there is provision for handling the events in the code.) We would talk about the events, methods and properties on both sides (worker and master) associated with the cluster module in the follow-up article on this topic. Thanks for your time.

Timers and schedulers in Javascript

Ajah Chukwuemeka — Mon, 06 May 2019 13:51:51 +0000

In building programs that would eventually be integrated into our softwares, sometimes, we need to defer the execution of some part of our program with respect to time. Also, we might want to carry out some routine tasks at specific intervals from a given benchmark. In the bid to do this, Javascript developers mostly leverage on the specification of any of the setTimeout or setInterval global functions so as to achieve their aim. In this article, we would do a deep dive as well as experimentation on the use of these timer functions.

First, we would start with the setTimeout function. It is used to schedule a task that would run only once after the event cycle has elapsed after the specified delay. The setTimeout function accepts a function or string as its first argument, a delay time in milliseconds as its second argument and an optional third or more arguments which are supposed to act as the function parameters. However, when the first argument to the setTimeout function is a string, it wraps it into an eval function internally and executes (this throws a TypeError in NodeJS runtime) and when the delay argument is not provided, it assumes that the delay is 0ms. The return value of a setTimeout function is a reference which can be used to clear the timeout before or after it has executed so as to remove it from the event loop.

Typical usage of the setTimeout function

let timeoutId = setTimeout(function(){
console.log(`Isn't Javascript a cute language?`)
}, 2000)

let timeoutId = setTimeout(`console.log('How are you')`)

const greeter = (name, time_of_day) => {
console.log(`Good ${time_of_day}, ${name}`)
}

// then we call the setTimeout function with the greeter function as an argument
let timeoutId = setTimeout(greeter,2000,'Emeka','afternoon')

setTimeout function does have an anti-matter function which is responsible for cancelling and clearing the timeout function from the event loop. This function utilizes the return reference value of the setTimeout function so as to know which timeout function to cancel. It is used as follows:

let timeoutId = setTimeout(function(name){
console.log(`How are you today ${name}?`)
}, 2000, 'Emeka')

clearTimeout(timeoutId)

Since we have exhaustively talked about the use of the setTimeout function, we can now talk about the setInterval function. Its usage is the same as that of the setTimeout function. However, the beauty of it is that it performs an action after every specified delay time in the function call. More like repeatedly performs an action after the specified delay time in milliseconds. This function is good for time repetitive tasks that are time-bound.

Typical usage of the setInterval function

let intervalId = setInterval(function(){
console.log(`Isn't Javascript a cute language?`)
}, 2000)

let intervalId = setInterval(`console.log('How are you')`)

const greeter = (name, time_of_day) => {
console.log(`Good ${time_of_day}, ${name}`)
}
// then we call the setInterval function with the greeter function as an argument
let intervalId = setInterval(greeter,2000,'Emeka','afternoon')

The first call to setInterval executes its assigned function every 2s whereas the second call executes the assigned function like a loop without any delay.

However, as there is a clearTimeout function for canceling setTimeout functions and removing them from the event loop, there is a clearInterval function for removing setInterval functions also. It utilizes the return value of the setInterval call which serves as a reference parameter for it. It is used as follows:

let intervalId = setInterval(function(name){
console.log(`How are you today ${name}?`)
}, 2000, 'Emeka')

clearInterval(intervalId)

In addition to this, in NodeJS there is also another scheduler function called setImmediate which is executed at the end of the turn of the NodeJS event loop. It works like setTimeout function with a 0ms delay value. It also has the clearImmediate anti-matter for cancelling it and garbage collection.It is used thus:

let immediate = setImmediate(function(name){
console.log(`How are you today ${name}?`)
}, 'Emeka')

clearImmediate(immediate)

In NodeJS, the above timer functions do have extra methods that can only be accessed within the NodeJS runtime. These are the ref, hasRef, refresh (for setTimeout only) and unRef methods that can be used with the return value of the functions.

To read more about timers and schedulers in Javascript, please follow the links below. They helped me a bunch. Thank you for your time.

Scheduling Tasks in JavaScript Using setTimeout & setInterval
Scheduling: setTimeout and setInterval
Timers | NodeJS

Eventish: A wrapper around NodeJS raw events API

Ajah Chukwuemeka — Sun, 03 Jun 2018 21:45:45 +0000

Hello friends! I built a lightweight library to put to practice what I learnt from the NodeJS events API. I require your inputs on the library design, interface, possible uses and every other help possible.

Link to the code is at

Eventish

NPM module is at

Eventish

By the way, this work was inspired by the work done by my friend Adebayoh Shalvah with his beautiful library burns

Thanks for your most anticipated response.

A real-time developers' board to keep up with tech articles on the web.

Ajah Chukwuemeka — Fri, 25 May 2018 00:38:53 +0000

What I built

A platform where developers can post articles they find useful from around the web and others can see these articles and as well glean the available knowledge. It is updated in real-time courtesy of the Pusher channels API.

Demo Link

https://pusher-comp-dev.herokuapp.com

Link to Code

https://github.com/ChukwuEmekaAjah/pusher

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I used NodeJS/ExpressJS for the back-end stack. jQuery and materializecss was used for the front-end code. Pusher channels API for both client and server were also included.
I hosted the app on Heroku.

Additional Resources/Info

The app has features that update in real-time courtesy of the Pusher channels API. These features are the newly added channels, articles, articles liked, articles visited. This hack provides a framework that would allow users of the platform to see new as well as trending articles in real time.
The beauty of real-time communication and the developer board created would be of very much importance to fellow developers in their journey to becoming master software craftsmen leveraging the scattered publicly available knowledge on the world-wide web.

Scoped closures

Ajah Chukwuemeka — Mon, 23 Apr 2018 10:32:15 +0000

JavaScript is an easy-to-grasp cool language with many quirks that justify the reason why some authors wrote books on the good parts of the language. In all these, the coolness of the language is that you can quickly become productive with it without understanding the intricacies of the language or even giving a f*** at the quirks (probably until it bites you).

However, in this article, I intend to help fellow JavaScript developers in understanding the concept of scope and closures. Like I read in the: You Don't Know JavaScript series, a proper understanding of these two concepts would improve your grasp of the language and so for that reason, I would try to give my 2 cents in order to show off my understanding of these concepts and most importantly, help people like me who are seeking for true understanding of the language.

First, we would start with the concept of scope. Scope to me can be viewed like an organisation with different levels of hierarchy. Imagine an organisation with an organisation-wide document access system. At the different levels, there are certain levels of access to documents and managers can view documents created or worked on by their subordinates but the subordinates cannot view the documents created by their managers. Coming back to JavaScript, functions inside other functions have access to the variables created by their parent functions in the outer scope but the parent functions don't have access to variables created in the inner functions. Let's look at an example:

   var outerFunction = function(x,y){
                            var x = x;
                            var y = y;
                            var adder = function (){
                                var z = x + y;
                                console.log(z);
                            }
                            adder();
                            return z;
                       }
   outerFunction(3,2) // we see 5 in the console and Uncaught ReferenceError: z is             
                     //  not defined with the stack trace

As we can see, the line workers in an organization don't have access to top-level information being discussed at the higher levels unless they are explicitly told of it and in our case, that would be through an explicit return statement from the adder function and corresponding assignment of it to a variable z. So if we try to replicate a situation where line workers are given a glimpse of top-level management decisions, the code would look like:

   var outerFunction = function(x,y){
                            var x = x;
                            var y = y;
                            var adder = function (){
                                var z = x + y;
                                console.log(z);
                                return z;
                            }
                            var z = adder();
                            return z;
                       }
   outerFunction(3,2) // we see 5 twice in the console twice from the log and      
                      // return statements respectively.

Now, let's talk about the concept of closures. Closures are cool in the sense that it can be related to the fact that we still have access to information even after it has been removed from the public space or the job of the original information generator is done. Let's go back to our organisational structure analogy. When the line workers generate data from the field, clean it up and probably make them presentable and pass it down to their managers, the job of the line workers may be done but the manager still has access to the document created and can interpret it the way he wants to. Going back to JavaScript, closures provide an avenue for nested functions to still have access to data generated from their parent function even after the parent function has completed its call stack. Although this works only if the nested function is returned. Let's take a look at some code:

   var lineFunction = function(x,y){
                            var x = x;
                            var y = y;
                            var adder = function (){
                                var z = x + y;
                                return z;
                            }
                            return adder;
                       }
   var dataHandover = lineFunction(3,2) // this instantiates the line function
   dataHandover() // this returns 5 on the console. Notice it still had access to 
                   // the x and y arguments even after the lineFunction is called

The beauty of all these for both scopes and closures is that they can be nested to any level that we deem fit although there is need for control so as to retain understanding. Remember that code is mostly read than it is written.

Nevertheless, some people would ask: what are the applications of these concepts? I can get by without them. Scopes are useful when we want to implement sub-routines in main functions that would perform some trivial task whereas closures are good for implementing a module pattern for our code. Closures help in implementing the concept of private and public functions.

I hope to see more scoped closures from you all. Thanks for reading.