DEV Community: Ike-Nwako Chukwudi

Setting up an Angular Project

Ike-Nwako Chukwudi — Fri, 07 Jan 2022 21:20:08 +0000

Angular, today, is one of the popular front-end platforms in use. Angular provides you with various tools to use for standard software development. Alongside these tools, there are design patterns that help you build your software in a maintainable way. This makes Angular robust and makes software development easy.

Some of the reasons you might want to use Angular are it is built with TypeScript, applications built with it are mobile and desktop ready. Also, it has a large ecosystem and is actively maintained in contrast to AngularJS whose active support ended December 31, 2021.

Do not get off track by the “robustness” of Angular, is neither complex to set up nor use on your machine. Setting up an Angular project will require us to have the Angular CLI installed and this is done easily.

Install Node.Js

To start, we need to download and install Node.Js. If you have this installed, you can proceed to the next step. You might ask, why? Node.Js allows JavaScript to run on our machines and it also gives us access to the Node Package Manager (NPM) so we can download packages our software needs.

To download Node.Js, run a google search for node js. Visit their website and download of node designed for your machine. After the download is done, open the installer and follow the steps. Do not be worried about the options to select, the default options would work just fine.

When Node.Js is installed in your machine, open the command line terminal on your device and run the following command to test the installation

node --version

You will get a response showing the version of Node.Js running on your device if it was installed without a hitch.

Install Angular CLI

Next, run this command

npm install -g @Angular/cli

This command installs the Angular CLI globally on your machine through the node package manager. If you do not want to install Angular globally, omit “-g” in your command. The effect of this is the Angular CLI can only be accessed from the location you installed it in. I will advise you to install it globally.

After the command runs, you would get a success message at the bottom when the installation was successful and an appropriate error message when it does not. If you get the success message, we can proceed to check the version of Angular in our machine. We can do this with this command

ng --version

Create Project Environment

Now, we have Angular running comfortably on our machine. Next, we create our project. There are various methods of doing this but I do feel this one is straightforward to follow.

Create a folder for the project in your desired location. If you are on a PC, hold down the shift key and right-click on the folder. Select the option of “Copy as Path”. If you are on a Mac, select the folder and press this key combination, option + command + c. This copies the absolute path of the folder to the clipboard. Open the command line terminal on your device and run this command

cd file_path_you_just_copied

You are currently in the folder of the project you want to create. Run this command

ng new project_name

This then creates a new Angular project in the folder. You would need to answer a couple of question on if you would like Angular routing in the project and which stylesheet format you want to use. After you answer these questions, the installation runs and you are all set to work. You might see some warnings displayed in the output too. They can be ignored.

Open the folder in your favourite IDE and get to work. One benefit of Angular is you are not constrained to a particular development environment, you can use any one of your choices and it doesn’t affect the project. This is because the Angular CLI is the development centrepiece.

To build your Angular project and then view it in a browser, run this command

ng serve -o

This builds the project and opens it in your default browser.

At this stage, your Angular project setup is complete and it works. You can get down to creating those amazing ideas.

JavaScript: A Wonderful Language for a Beginner

Ike-Nwako Chukwudi — Sun, 22 Aug 2021 22:24:48 +0000

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. It is the programming language of the web, having various applications. Over 97% of websites use it client-side for web page behaviour. All major web browsers have a dedicated JavaScript engine to execute the JavaScript code on the user's device.

JavaScript is an easy language to learn and use. It does not require a lot on initial setup. What you need to deploy applications are a major web browser and an editor. I see JavaScript as an excellent language for a beginner to learn programming with. Hopefully, at the end of the article, you would agree with me.

Brief History

JavaScript was introduced about 26 years ago. It was officially released on December 4, 1995. It was developed by Brendan Eich.

In the early days of the web, web pages were only static. They lacked dynamic behaviour once loaded. Netscape, the company that owned Netscape Navigator – the most widely used web browser at that time – decided to add a scripting language that would allow dynamic content to be served to their browser and Eich was hired.

A common misconception is JavaScript and Java are directly related but that is not so. The idea behind the name JavaScript has been seen to be a marketing strategy by Netscape to make their new language gain popularity as Java as the new programming language making great headway at that time.

Features of JavaScript

One of the features of JavaScript is it is a multi-paradigm language. This makes it very flexible and easy to use. Instructions can be written in different styles and they would still run as expected. For a beginner, this can be viewed as a haven. You would not have to bother about the structure of code, just follow the basic rules of the language and it would be alright.

This “loose” nature of JavaScript makes it very beginner-friendly. It is not required that you end each line of code with a semi-colon. You can omit it and the code will function properly. It is not required but it is recommended you end lines of instructions with a semi-colon. Many programming languages end their instructions with a semi-colon, it is a good way to train yourself to do so. You can also write two or more instructions on the same line of code and it would not throw any errors. When doing this, you would need to end each separate instruction with a semi-colon.

These lines of code

let sum = 4 + 5
console.log(sum)

and these lines

let sum = 4 + 5;
console.log(sum);

would both give the same expected output with no errors. Also, writing

let sum = 4 + 5; console.log(sum);

would work just fine too.

Typing is not strict in JavaScript as a variable can hold various types of data throughout the execution of the program without throwing any exceptions. In other words, it supports dynamic typing. The various data types JavaScript supports are Strings (“name”, “16 September”, “”), Numbers (1, 17.557, 31e12), Arrays ([“lord”, 16, [“award”]]), Objects({name: “France”, capital: “Paris”}), Booleans (true and false) and undefined.

JavaScript supports Object-Oriented Programming (OOP). You can create objects, assign them properties and methods and use these properties and methods in code to achieve certain tasks.

Linking JavaScript to an HTML file

For you to visibly see the effects of the instructions you write in a JavaScript file, you should link it to an HTML document.
In an HTML document, JavaScript is written with the script tag.

The script tag can be placed in the head or the body of the HTML document.

Screenshot of code showing Script tag in the Head Element

Screenshot of code showing Script tag in the Body Element

JavaScript files can be written in the HTML document as shown in the snippets above or they can be written in separate .js files and then linked to the HTML document.

The linking can also be done absolutely by using the URL to the JavaScript as the value for the src attribute.

What can JavaScript do?

As a programming language, JavaScript provides you with features other languages have. JavaScript supports different selection and looping constructs. When you have to run a particular block of code when a particular condition is met, you are making a selection. A selection statement checks a certain condition and allows for the execution of a block of code if the condition is met. Selection statements supported in JavaScript include the if statement, the if … else statement, the if … else if statement and the switch statement.

The if statement can be used when there is a block of code to be run if a certain situation is encountered. When the condition set is not met, it does not run the code and moves on with the program execution as intended. In natural language, this can be put as perform this action if this happens. For example, if you see a dog, shout dog.

An if statement that outputs the value of the variable animal if it is equal to dog

The if … else statement in JavaScript allows you to state a certain condition to be passed and when the condition is passed, the code in the if block gets executed and the code in the else block is neglected. When the condition is not passed, the code in the if block is neglected and the code in the else block is executed. In natural language, you can put it as if this happens, perform this action, else, perform that action. For example, if a sports car passes, shout “a sports car”, else, shout “a normal car”.

An if … else statement that checks if the type property of an object car is equal to "sports car"

The if … else if statement is similar to the if … else statement. The first condition is checked and if it passes, the code contained in that if block is executed and the code in the other blocks are neglected. If the first condition set does not pass, it checks the next condition. If the next condition passes, the code in its block is executed with the rest neglected and if it does not pass, it checks the next condition. It repeats this process till all conditions are checked. You can choose to give your if … else if statement an else block and the code contained in it will run when no initial conditions set are met. For example, listen to the scores the teacher calls out in class if the score is above 90 and below or equal to 100, write A, else if the score is above 80 and below 91, write B, else if the score is above 70 and below 81, write C, else write F.

The if … else if statement for the example stated above

The switch statement works like the if … else if statement but here, a condition, usually an expression, is given and then different cases of expected outputs are provided. Each case having instructions that are to be executed if the output matches it. Switch statements usually have a default case that gets executed when the other cases are not matched. At the end of each case, a break statement is written, this ensures other cases do not get checked after a case has been matched. It “breaks” out of the selection construct once a case is matched. For example, if we are to read input from a user and display different content based on the user's input, a switch statement is a good fit.

A switch statement that displays an ouput message based off a user's input

In a switch statement, you can merge two or more cases if they will all execute the same block of code if any of them gets matched.

A loop is a sequence of instructions that is continually repeated until a certain condition is reached. Loops are handy, if you want to run the same code over and over again, each time with a different value. They help you reduce writing unnecessary lines of code and help you stick to the DRY (Don’t Repeat Yourself) principle.

Let us take into consideration the code below

Here, I was trying to extract all the elements of the cars array and store them in a carList variable. The cars array has 6 elements so it was easy to write this out. Now, let us imagine that the cars array had 100 elements, writing this out, line by line would take a couple of minutes. Now, say I have to fetch this array from an API where all the names of all cars in the world were stored and the total number of elements in the array is over 10,000. You would agree with me that writing it out line by line would be burdensome and time-consuming.

Another case is if I do not know the total number of elements in the array. I would not know where to stop indexing at. So, we need a way to extract all the elements without undue stress and uncertainty. This is where a loop comes in.

Loops are meant to terminate, hence, a condition or limit is put and when the condition for the running of the loop is met, the loop terminates. If the condition is wrongly set that it would never be met or is omitted totally, the loop will run infinitely and this can cause problems for your program. When using loops, be careful to set a condition that will ensure the loop will terminate when it has run for the number of times it is expected to run for. Loops supported in JavaScript are for loop, for … in loop, for … of loop, while loop and do … while loop. These loops mostly do the same thing but differ in syntax and implementation.

The for loop has this syntax

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Statement 1 is used to initialise the variables used in the loop, statement 2 is the condition at which when met, the loop terminates and statement 3 is used to increment or decrement the value of the initial variable initialised. For loops can be used to loop through arrays, strings, node lists and so on. Let us use a for loop to solve the problem we ran into earlier.

The for … in loop in JavaScript loops through the properties of an Object. It is written like this

for (key in object) {
  // code block to be executed
}

The for … in loop iterates over the object. Each iteration returns a key. The key is used to access the value of the key. The value of the key is object[key]. The value can then be used as the programmer wishes.

A screenshot of a for … in loop that iterates over an object

The for … of loop loops through the values of an iterable object. It lets you loop over iterable data structures such as Arrays, Strings, Maps, Node Lists and so on.

for (variable of iterable) {
  // code block to be executed
}

For every iteration of the iterable, the value of the next property is assigned to the variable. The iterable is an object that has iterable properties.

A screenshot of a for … of loop that loops through the values of an array

The while loop loops through a block of code as long as a specified condition is true.

while (condition) {
  // code block to be executed
}

If you forget to increase or decrease the variable used in the condition, the loop will never end. This will crash your browser.

The do-while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

In a while loop, it is possible for the while block of code not to run, that is, when the condition is not met, but in the do … while loop, the do block of code would run, at least once because the condition is checked after the execution of the do block.

Furthermore, JavaScript is an event-driven and functional programming language. With this, it is widely used for HTML DOM manipulation. The Document Object Model (DOM) is the data representation of the objects (elements) that comprise the structure and content of a document on the web. The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory.

With JavaScript, HTML elements are accessed through the DOM and can be edited. HTML elements’ contents can be changed with JavaScript. Their attributes can be changed also, styles applied to those elements can be edited and even the display and visibility status of the elements can be controlled with JavaScript. JavaScript can add more elements to the DOM and also remove existing elements from the DOM. The DOM is not a programming language but just a representation of a web page. The DOM can be accessed by calling the document object and using the available methods to manipulate the element(s).

DOM methods for accessing elements in the DOM

The manipulations to the DOM with JavaScript are usually event triggered. Various HTML events can occur in the course of viewing a web page. As you would guess, JavaScript employs the use of event listeners to detect when these events happen. These event listeners have provisions for functions to be executed when the event they listen for has occurred. Events can be grouped into different categories. Examples of common events are click event, dblclick (double click) event, mousedown event, mouseenter event, mouseleave event, drag event, play event, ended event, etc.

Adding a click event listener to an element

In addition, JavaScript provides a lot of functions and methods that allow you to control and handle audio and video files. At the occurrence of certain events or completion of functions, you can play your audio and video. Some people take advantage of this and create their custom audio and video player as built-in players by browsers that might have limited functions. When designing a custom media player, HTML and CSS comes in also. Common audio and video methods you can take advantage of in JavaScript are load(), play() and pause() and common events associated with audio and video are ended event, play event, timeupdate event, volumechange event and so on.

It is also vital to note that JavaScript can connect to web servers, get information from them and also post information to them. This can be done asynchronously using AJAX (Asynchronous JavaScript And XML). AJAX is not a programming language. With AJAX, you can update a web page without reloading the page and send data to a web server - in the background.

Applications of JavaScript

JavaScript has grown over the years. It was initially created for making web pages dynamic and now, we see it used in different aspects like server-side scripting and even hybrid application development.

JavaScript is applied in front-end development. With the development of various frameworks and libraries, front-end development is easier and also more powerful as these frameworks and libraries give you the platform to harness the full power of JavaScript in your web application stress-free.

JavaScript can be used in server-side scripting though it was originally meant for front-end web development. Node.Js is an open-source development environment that allows you to run JavaScript on a server. This is helpful for front-end developers with JavaScript knowledge as they can write server-side scripts in JavaScript and it would run efficiently. There is no need to learn another language.

Writing JavaScript for the server-side is possible, also writing JavaScript for mobile applications and desktop applications is also possible. Apache Cordova is a free mobile application development framework that allows you to develop an application in HTML/JavaScript and then it wraps it into a native container that can access the device functions of several platforms and hence enables the web app to work on mobile devices. Electron is a free and open-source framework for creating native desktop applications with web technologies. It allows building cross-platform desktop apps with JavaScript, HTML, and CSS. There are other examples of such development frameworks that exist like Ionic and NativeScript.

Understanding Subresource Integrity (SRI)

Ike-Nwako Chukwudi — Wed, 11 Aug 2021 12:17:54 +0000

There are numerous benefits of embedding files and scripts hosted by third parties, such as a Content Delivery Network (CDN), in your HTML documents. But this comes with its vulnerabilities and most times, we are not aware that we (site owners and site users) are open to such attacks. Using Subresource Integrity can help prevent some of these attacks.

What is Subresource Integrity?

Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match. In simple terms, it is a feature used by browsers to validate resources fetched from third parties have not been manipulated by comparing them to a hash key and if they do not match, the browsers do not serve up the resources.

Being new to HTML, I wondered about the use of the integrity attribute in some HTML elements and sometimes, I removed it and its value from the element. I was ignorant of its use as it isn’t something that pops up most times. Going further and being more security conscious, I discovered the integrity attribute holds the cryptographic hash of the resource to be embedded. This hash could be (but not be limited to) an SHA-256, SHA-384 or SHA-512 hash.

<script src="https://inchukwudi.example.com/lib-example/example.min.js"
    integrity="sha512-6QWD5OGReFYm4dnWc1Qt5Ntv9qYdvdihz0PPSiiqn/o4EaG7TubfWGUrM"
    crossorigin="anonymous"></script>

A code snippet showing a script element with an integrity attribute

JavaScript, A Helpful Yet Dangerous Tool

JavaScript is the scripting language of the web. It can perform basic stuff from creating, displaying and hiding new elements, to changing the attributes of elements. It can do more complex functions from posting data to and getting data from APIs. All these can be done without the knowledge of the site user sometimes when a certain event is triggered, for example, clicking on an element or hovering over an element.

You would agree with me that JavaScript is a powerful tool. An attacker can use JavaScript to mislead users of your site by adding or editing content that you did not put. Phishing links can be added and undue redirection can be initiated. Even, the action attribute of a form can be changed and the information a user inputs in a form is sent elsewhere and vital information exposed.

SRIs can help against embedding such malicious content unknowingly in your website. Yes, unknowingly as most times, malicious content are embedded without your notice.

Ways Malicious Content Get Served

When you visit a website, your browser sends a request to the server and the server processes the request and then sends a response to your browser. Your browser interprets this response and then displays the content you see.

The response sent back from the server can be thwarted in many ways and we might just be oblivious to it. Let's say a user is connected to a network where all requests and responses pass through a proxy server. An attacker with access to such requests and responses can swap or edit a file before it reaches the client and the client gets compromised.

Another plausible example is an attacker gains access to a trusted CDN vendor and then edits the files on their server and different users using websites that embed such files get comprised. This is just a highlight, the list goes on and on.

SRI Working Mechanism

Let us use libraries as a case study. The content of a version of a library is fairly constant and is not expected to change. When there are major changes to be made, a new version is released. Knowing this, adding the integrity attribute with a cryptographic hash of the particular version of the library you intend to use in your HTML document will safeguard against an altered form of the library to be served to your users. Most times, the cryptographic hash of the particular version of the library is provided by the vendor of the library but in some cases, you might have to hash it down yourself.

integrity="sha512-atM3QqRcbCn6ewmpxcLAHGaDjpEB4xZd47q7pAP+gi5Yu8hFgoh"

Code snippet showing the integrity attribute and its cryptographic hash (SHA-512) value

When the browser is linking the external library, it will hash it according to the hash algorithm specified in the integrity attribute, in this case, SHA-512, and if the output of the hash does not match the hash specified in the integrity attribute, it tries other known hashing algorithms, for example, SHA-256, and it still does not match, it does not load the file. To illustrate this, here is an example using the jQuery library version 3.6.0.

A screenshot of the end of the minified version of the jQuery library v3.6.0 as gotten from the jQuery Website

The image above is an image of the jQuery library v3.6.0 as gotten from the jQuery website. Now here is an image of the same file but with a commented line I added myself for the purpose of demonstration of how SRI helps protects you against changes in the resource.

A screenshot of the end of the minified version of the tampered jQuery library v3.6.0

When the edited jQuery file attempts to get loaded, the browser checks and then displays this error message in the console.

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js' with computed SHA-256 integrity '4ca6xP/WMfyyRx+MmirFEms71HApLgbRdTy0XavPeQA='. The resource has been blocked.

The edited file does not load and I am free from potential attacks if it was a malicious code that was added to the file. Most modern browsers support SRI so you do not have to worry as most users of your site would be protected from such attacks.

Best Practices When Embedding Content

Some people may advise you self host all resources you might use. Well, this makes the origin of the files trustworthy but it does not stop the files from being manipulated when a response is made. An integrity attribute is needed. Also, you would have to make sure you download such files from the owners of the libraries as there are various counterfeits all over. This might be expensive as it will take up a substantial amount of bandwidth.

Using a third party resource is beneficial and in most cases cheaper than hosting the files yourself. Many resources owners have CDNs and provide you with the links to access the resource over the internet. Some of these links have the integrity attributes with cryptographic hash values already, some do not. Caution should be exercised when searching for links to CDNs and other resources as attackers might host already tampered files and hash it and make it look trustworthy, so be mindful of the websites you get links to resources from.

Using this online tool, SRI Hash Generator, you can generate a cryptographic hash of the stylesheet or script you want to embed and add use it in your document and even share for others to use.

SRI Drawbacks

The benefit of SRI is evident but it has its drawbacks. The file that does not match the cryptographic hash won’t be loaded and this may break a lot of things especially the structure of the page and certain functionalities put in place. If a stylesheet is affected, all elements that use classes defined in the stylesheet would not appear as they ought to and the look of the site may not be palatable to the user of the site.

Also, when attacks are launched and are countered by using SRI, the owner of the website is not aware that such an attack occurred. A user with no technical expertise would not know too and would think the website is just quirky then might move on to another website and if the website does not make use of SRI, the user can be compromised.