DEV Community: Grace Valerie Anyango

Event emitters in node js

Grace Valerie Anyango — Fri, 31 Dec 2021 06:54:38 +0000

EventEmitter is a class of the event module that can be used to raise and handle custom events. This module facilitates communication between objects in Node and is at the core of asynchronous event-driven architecture. This class has properties like on which is used to bind functions on events and emit which fires events.

emit() function

this function is used to create an event and it takes one parameter which is the event name.

const events = require('events')

const eventEmitter = new events.EventEmitter()
eventEmitter.emit('nameOfEvent')

on() function

This function binds an event with an event handler JavaScript function and it takes two parameters:

name of event to bind
EventHandler Function

// we require the module events
const EventEmitter = require('events')

const customEmitter = new EventEmitter()
// the event _myEvent_ is bound to the function parameter
customEmitter.on('myEvent', (name, age ) => {
   console.log(`My name is ${name} and I am ${age} years old`)
})
//myEvent is triggered
customEmitter.emit('myEvent', 'Grace', 22)

Async patterns in node js

Grace Valerie Anyango — Thu, 30 Dec 2021 06:23:12 +0000

A code in node js should be nonblocking to avoid halting the execution of lines of code ahead of it. Implementing functionality that could take time is done asynchronously in order to take the execution part of that function out of the main loop.
There are three asynchronous patterns:

1. Callbacks
A callback is a function that is passed as an argument to another function and should be invoked whenever the asynchronous work is finished.

const { readFile } = require('fs')
console.log('start of program')
readFile('./myFile.txt', 'utf-8', (err, myfile) => {
  if(err) {
console.log(err)
    return
}
console.log(myFile)
})
console.log('End of program')

the readfile function is asynchronous and therefore the program will move on to the next instruction while the function continues to run in the background.
The output is as follows:

start of program
End of program
content inside the text file myFile

Promises The promise object represents the eventual completion of async operations, regardless of the results(success or failure). It is also defined as a proxy for a value not necessarily known at the time it is created.

const { readFile } = require('fs')
const readMyFile = (path) => new Promise((resolve, reject) => {
  readFile(path, 'utf-8', (err, context) => {
    if (err) {
      console.log(err)
      return
}
else {
   console.log(context)
}

})
})
readMyFile('./files/myFile.txt')
.then((result) => console.log(result)
.catch((err) => console.log(err)

A promise can exist in either one of these states:
Pending - this is the initial state where it is neither resolved or rejected.

Fulfilled - The promise will be in this state if the operation has been completed successfully.

Rejected - the state when the operation has failed.

Promisify

This function is defined in Node's util module as a standard and its goal is to convert callback to promise.

const { readFile } = require('fs')
const util = require('util')
const readMyFile = util.promisify(readFile)

async function start() {
  try {
      const myText = await readMyFile('./myFile', 'utf-8')
      console.log(myText)
   }
 catch (error) {
   console.log(error)
   }
}

Async / Await A method in which the parent method is declared with the async keyword and inside it await keyword is permitted.

Components of machine learning

Grace Valerie Anyango — Wed, 29 Dec 2021 10:43:39 +0000

The three main components of machine learning include :

Machine Learning Model
Model training algorithm
Model Inference Algorithm

Machine learning model

This is a file that has been trained to recognize a certain type of pattern on a dataset and providing it an algorithm that it can use to solve different problems.
The model can further be broken down into two subtypes: Supervised and Unsupervised Learning .
Machines are trained using labelled data therefore the datasets contain both input and output parameters.

Types of supervised learning

Continuous label (Regression)
This technique consists of mathematical methods which help in finding the correlation between variables and enables us to predict the continuous output variable based on one or more predictor variables.
Categorical label (Classification)
This technique allows a program to learn from the given dataset or observations and then classify new observations into a number of groups.

other types include :

Naive Bayesian Model
Random Forest Model
Neural Networks
Support Vector Machines

Unsupervised Learning

This technique has input data but no corresponding outputs. The goal is to find the underlying structure of a dataset and group it according to similarities, then represent that dataset in a compressed format.
Types

Clustering This is the process of grouping similar data together. The aim is to find similarities in the data point and group similar data points together.
Association This technique checks for the dependency of one item on another data item and maps accordingly so that it can be more profitable.

Model training algorithm

the algorithm is provided with training data which must contain the correct answer. it finds patterns in the training data that map the input data algorithm to the target and it outputs an ML model that captures these patterns.

Model Inference Algorithm

Using a trained model to generate predictions.

Event loop in node js

Grace Valerie Anyango — Tue, 28 Dec 2021 15:53:08 +0000

What is an event loop?

JavaScript code runs in the sequence it is defined since it is synchronous.
The event loop is what allows node js to perform non-blocking I/O operations(operations that allow a single process to perform multiple requests at the same time) despite the fact that JavaScript is single-threaded.

How it works

The node js environment is made up of input/output terminals, the Call stack, node APIs and the Callback queue. if your program is synchronous you will only need to focus on the call stack.

With the non-blocking behavior, all the synchronous events are executed first while the asynchronous functions are processed in the background while waiting to be executed.

Suppose we have a program

console.log('Hello, I am first')
setTimeout(()=>{
 console.log('Finally, I get executed')
}, 0)
console.log('Let me wait for asynchronous function')

The output is as follows

Hello, I am first
Let me wait for asynchronous function
Finally, I get executed

When the program starts executing, an anonymous main() function is usually added to the call stack which wraps up the code. The first and last console.log are pushed to the call stack and executed in the output terminal since they are synchronous. The setTimeout function is asynchronous and is therefore not processed in the call stack but is added to the Node API where its events are registered and a callback function is waiting to be processed in the background.

Phases of the event loop

Timers
These are functions that execute callbacks after a set period of time. This module has two global functions, setInterval() and setTimeout() where you can define code that will execute after a certain time period.
I/O Callbacks
This phase allow for non-blocking I/O operations. Asynchronous I/O requests are recorded in the queue so that the main call stack can continue its operations.
code example

const {readFile} = require('fs')
console.log('first task has started')
// checking the file path and returning context of the text file
readFile('./myFile/text.txt', 'utf8',(err,result) => {
if (err) {
  console.log(err)
  return 
}
console.log(result)
console.log('First task has been completed')
})
console.log('starting my second task)

The output is as follows

first task has started
starting my second task
I am content inside the text file
First task has been completed

Idle
This is the phase where the event loop performs internal operations of any callbacks.
Poll phase
All JavaScript code written is executed from the beginning to end. The event loop manages the I/O workload, calling the functions in the queue until the queue is empty.
setImmediate()
This is a special timer in node js which runs as soon as the poll phase becomes idle.
Close events
Is used to clean the state of the application when the event loop is wrapping up one cycle and is ready to move on to the next one.

Machine Learning Introduction

Grace Valerie Anyango — Mon, 27 Dec 2021 06:07:24 +0000

How Artificial Intelligence is related to Machine Learning

AI is a field of computer science that is focused on building smart machines to perform activities using human-like intelligence.
Machine learning is a branch of AI which allows computers to automatically learn and improve their accuracy using data and algorithms to imitate how humans learn without needing to be programmed.

Methods used in Machine Learning

Supervised Learning In this machine learning technique, every training sample from the dataset has a corresponding label or an output value associated with it.
Unsupervised Learning
The training samples are not labeled. Machine learning algorithms are therefore used to analyze the unlabeled data and eventually discover the underlying patterns of data without needing human intervention.
Semi-supervised Learning
The training uses a smaller labeled data set to guide classification and feature extraction from a larger, unlabeled data set.
Reinforcement Learning
The model learns what actions to take through trial and error.

Traditional Algorithm Models Vs Machine Learning

Traditional models solve a problem by taking the problem and a program e.g. algorithm or code as inputs for the model.
In Machine learning we solve or predict problems by using historical data and desired results for the model.

HTML AND CSS GUIDE

Grace Valerie Anyango — Mon, 29 Nov 2021 20:50:53 +0000

This guide is a walkthrough on how to create a simple website using html and CSS. I will list the steps to follow and explain them.
What is html
html is a markup language that is considered as a building block for the web.
Designing the layout of your website using html
First step is to instantiate your website as DOCTYPE html, wrap all elements inside a html tag define the basic layout with a head and body tag.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body
</html>

Most html tags require an opening and closing tag with a few exceptions such as img tag which can otherwise be self closing.
head tag
Inside the head tag we can add external links
Semantic HTML
This concept introduces meaning to the code for both the developer and the browser.
The following semantic elements can be used in a web browser as shown

The section element defines a specific section of the html document while the article element specifies independent, self-contained content. These two elements can be interchangeable be nested inside the other.
The nav element is intended for a major block of navigation links e.g

<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</nav>

href is a html attribute used to reference the location of the element

<details> and <summary>

these semantic elements act as an accordion which is a way to fill lengthy content is small space

<details open>
  <summary>Tutorial</summary>
  <p>Extensive HTML and CSS documentation and tutorial</p>
</details>

CSS
css specificity
This is how the browser the most specific rules that should be applied to a html element when there are two or more conflicting rules.
specificity based on selector type

Universal Selector(*)
this selector has no specificity and therefore any rule that follows will override it.
Element / pseudo-element selector
(div, ::selection)
has slightly higher specificity and can only override the universal selector.
Class / pseudo-class selector
ID selector
-Inline style attribute
this specificity will override ant CSS rule and take effect. It has the highest specificity.

CSS Units

They are divided into two: absolute and relative units
Absolute units are fixed values therefore they appear exactly as their value on every display screen size.
Example units include: cm, pt, px, pc, mm
Relative units
they are highly preferable for responsive web design over absolute units because of their flexibility.
em vs rem
em unit is assigned depending on the font size of the parent element while rem is dependent on the root element's font size.
use CSS columns to set the number and widths oc columns in a single declaration.

Css Animations

**
Define the animation css styles within the @keyframes which will gradually transform the element to the animation style.
The keyframe name is then bounded to a CSS element for the animation to work
Animations can also be defined within svg's as follows

<div class="pattern1">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <pattern id="polygons" x="0" y="0" width="28" height="49" patternUnits="userSpaceOnUse">
                <path id="flipper" style="fill:#ff003c;fill-rule:evenodd; fill-opacity:0.9; fill-rule:nonzero;" d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"> </path>
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#polygons)"></rect>
        <animate xlink:href="#flipper" attributeName="fill" dur="20s" keyTimes="0; .15; .3; .45; .6; .75; .9; 1" keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;" repeatCount="indefinite" values="#ff003c; #ffae00; #ff6200; #00e6ff; #ff006f; #f700ff; #7b00ff; #0011ff;" />


    </svg>
    <div class="glass"></div>
    </div>

:root {
--polygonColor: #0015ff;
}
body,
html {
height: 100%;
display: grid;
background-color: #fff;
overflow: hidden;
background-image: radial-gradient(
circle closest-corner at center,
hsl(11, 10%, 50%),
hsl(3, 8%, 30%),
hsl(160, 0%, 0%)
);
}

.pattern1 {
margin: auto;
background-color: #151515;

width: 40rem;
height: 20rem;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(5px);

}

</div>`

Introduction to Version Control Systems

Grace Valerie Anyango — Mon, 29 Nov 2021 14:21:38 +0000

A version control system is a software tool that helps the developer team to make changes and track the codebase. The codebase is simply the source code collection that was used to build a particular system or application. Version control is important because it helps the developer team to manage changes made to the source code and keep record of who made the changes.

Types of Version Control Systems

- Local Version Control Systems
This system keeps track of files within your local computer. Any changes made to a particular file is stored as a patch and every patch set will only contain the changes made to the file since its last version.

- Centralized Version Control System
A single repository contains all the versioned files where developers can commit changes to files. this system allows for collaboration among developers however the repository is the single point of failure which can affect other developer's working on it.

- Distributed Version Control System
This system contains multiple repositories and each user has their own working copy.

Benefits of Version Control

Distributed version control systems enabled individuals from around the world to make contributions to projects remotely and make collaborations.
Ability to track changes made to software and connect it to software testing tools.
History logs of every file where when and who makes changes are tracked to enable future debugging of the system.
Users can have multiple backups locally therefore preventing loss of data in case of a system failure.

Best Version Control Systems

Although there are many systems in the marketplace, a few of them standout and are mostly used by developers. They include:

GitHub
Developers host their projects on this platform in repositories. They can easily track code changes and do rollbacks on app versions when necessary.
GitLab
It has continuous integration capabilities which you can use to perform automatic tests and deliver code.
Perfoce
it has a system known as HelixCore which comes with a single platform for seamless team collaboration, and support for both centralized and distributed development workflows.
BeanStalk
This software is ideal for remote workers as it is based on browser and cloud, allowing users to code, commit, and deploy on the browser.