DEV Community: Tanwa Sripan

Introduction to XML

Tanwa Sripan — Sun, 07 Aug 2022 19:00:53 +0000

Hello, hello! 😮‍💨 How the month has flown by! I have not had the time to write anything but that does not mean I have not been learning. While it is fun to learn the newest and latest technologies, you often will have to learn about older technologies as well (especially for jobs).

So, I recently learnt about Extensible Markup Language or XML. I want to write a short introduction about it so I can use it as a reference for myself later on, and of course for anyone who might need to learn about XML 😀.

What is XML?

XML is simple language to store, describe and transport information/data across the network as plain text. It is designed so that the language is human readable with self-describing tags. If you think of JSON as a way of transferring data as plain text in the form of JavaScript Objects, then you can say that XML is a way of transferring data as plain text in a form similar to HTML.

XML is a mark up language like HTML, so it bear a resemblance as it is made up of hierarchical tags which store information. However, unlike HTML, it does not have predefined tags so you can create your own tags however you like to store and structure your data as you see fit. It is said that XML separate information from presentation so XML and HTML complements each other.

It can be used by all sorts of programs and software as a method of transferring data, just like how JSON can be used in all languages.

How does it work?

XML documents often start with XML declaration or a prolog (this is optional), which contains meta-data of the document such as encoding.

It typically look like this:

<?xml version="1.0" encoding="UTF-8"?>

When creating your own XML tags, keep these points (syntax rules) in mind:

All elements must have a closing tag or if it is an empty element you can use the short-form e.g. <emptyTag />.
Attributes must be quoted e.g. <movie genre="comedy" />.
Avoid using characters like <, >, & and use character entities instead e.g. <, &gt; and &.
There must only be one root element or one parent element that contains all other elements.
Tags are case sensitive.
White spaces are preserved (More of a heads up than a rule).

Following the above rules will ensure that your XML document is well-formed.

XML documents, like HTML, follows Document Object Model (DOM) definition, it is a tree-structure with one root node which is the parent to all other elements. This means that you can access, update and manipulate XML documents with programs and scripts.

Example

As usual, the best way to learn is to practice, so open up your favourite code editor and try to create your own XML file with some of you own tags. I will use VSCode. Lets say I wanted to send a list of movies of the year 2020 information, then I could write something like the below code.

<?xml version="1.0" encoding="UTF-8"?>
<movieList year="2020">

<movie genre="action">
    <title>The Old Guard</title>
    <rating>
        <imdb>6.6</imdb>
        <rottenTomatoes>80%</rottenTomatoes>
    </rating>
</movie>

<movie genre="action">
    <title>Birds of Prey</title>
    <rating>
        <imdb>6.0</imdb>
        <rottenTomatoes>79%</rottenTomatoes>
    </rating>
</movie>

<movie genre="comedy">
    <title>My Spy</title>
    <rating>
        <imdb>6.3</imdb>
        <rottenTomatoes>48%</rottenTomatoes>
    </rating>
</movie>

<movie genre="horror">
    <title>A Quiet Place Part II</title>
    <rating>
        <imdb>7.2</imdb>
        <rottenTomatoes>91%</rottenTomatoes>
    </rating>
</movie>

</movieList>

If you open up the file you have created on a browser, it should display the XML document as a tree-structure with collapsible arrow for nested elements (I ran into a problem with FireFox, but works fine on Edge and GC).

Summary

XML is a flexible and extensible mark up language similar to HTML but differ in the way that it is used as a standard for transferring or exchanging data over the network. XML is written with non-predetermined tags, this means you can create your own tags and structure your information/data how you will as long as it conforms to the rules of a well-formed XML document.

This has been a very short overview of XML. There are must more about XML that I have to learn and I hope to write more about this topic in the future, for now thank you for reading 😃.

CSS - Border Radius

Tanwa Sripan — Sun, 10 Jul 2022 21:08:14 +0000

👋 It's a me! Ma-... Just kidding, Mario is a plumber, not a Software Developer... right?

Topic of the day

Anyway, today I want to talk about a very popular CSS property -> border-radius. This property allows you to create awesome looking elements with nice curved edges/corners. You can use it to create nice circular border for profile images or buttons, for example.

The typical usage may be using one argument as a percentage or other units to round the corners, as below:

One value

border-radius: 25px;

border-radius: 50%;

More than one argument

But recently, I learnt that you could have more control over the individual corners with more arguments. This can result in some interesting shapes!

Lets take a look at how providing different numbers of arguments affect the roundness of each corners. But first, take a look at the below image, it shows the order the values applies to the corners. It starts from TOP LEFT moving clockwise to BOTTOM LEFT.

Two values

When you use two values, the first represents the TOP LEFT and BOTTOM RIGHT and the second represents the TOP RIGHT and BOTTOM LEFT (like what I color-coded in the above picture).

border-radius: 50px 20px;

Three values

When you use three values, the first represents... TOP LEFT (remember it always starts there), the second represents the TOP RIGHT and BOTTOM LEFT (they are a pair) and the third represents the BOTTOM RIGHT.

border-radius: 50px 20px 100px;

Four values

You might be able to guess which four values represents which corners... The first value represents the TOP LEFT and it moves clockwise.

border-radius: 10px 30px 50px 80px;

This concludes the basic options that you can use to control the roundness of each corners. But wait...there's more! 😮

More than four values! 8 Values

🤯 Not only can you control each corners individually, if you use 8 values (4 / 4) you can control the horizontal and vertical axes (the semi-major and the semi-minor axes) of each ellipse (circle is a special kind of ellipse) that creates the border radius. This can get a little complicated, but the maths nerd in me found it super fascinating and I spent some time playing (graphing) with the ellipse equation and CSS border-radius to learn more, it was fun.

Lets start simple, any values on the left of the slash represents the horizontal axis of the ellipse and the corresponding value on the right of the slash represents the vertical axis.

Note: Remember one value applies to all corners, so we are setting here, all horizontal axis of the ellipse to be 100px and the vertical to be 20px.

border-radius: 100px / 20px;

You can see that if we provide different values for the horizontal and the vertical, the "roundness" of our corner looks a little off, this is due to the ellipse. As mentioned above, a circle is a special type of ellipse, where both the major and minor axes have the same length, this means that if we set the horizontal and vertical values to be the same, we will get a nice circular border radius.

Note: Here, I used the value 0 for the 3rd and 4th corners so we can see a clear comparison. You will notice that if you leave out the right-hand side values of the slash, it will take the same value as the left.

border-radius: 100px 50px 0 0/ 20px 50px;

Summary

With this, we can fully control how we would like each corner to look like, whether it be fully nice and round or bent out of shape. You can end up with cool blob-like shapes, see below:

To learn more about it, I created a project Border Radius Playground which was inspired by the 8 point full control. I wanted to see how using px would affect the end shape, especially if the values of each point can be much bigger than the size of the container. Please check out "8 Point Full Control" if you want to read their documentation on border-radius and use this tool to create percentage border-radius for your next fancy border!

What is your favourite ES6 feature?

Tanwa Sripan — Wed, 29 Jun 2022 21:17:42 +0000

Helloooo everyone! 👋 It has been a while since I last posted, I have been rather busy the past 2 weeks!

As the title suggests, I am curious to know what your favourite JavaScript ES6 feature is...🤔

I was recently asked this in an interview and it surprised me as I have been learning JS with latest features so I don't quite know which features are ES6 and which are newer... So I answered with what came to mind, and it was Promises. Since I have been learning about backend development with NodeJS, I have learnt a lot about asynchronous programming which is why I chose that answer (I also talked about async/await, which was not introduced until ES7, oops!). Of course, I had to explain why I chose that particular feature and I talked about the benefit of how it helps eliminate callback hell, improve error handling and how you can use Promise chaining to your advantage.

So, I present to you the same question, what is/are your favourite ES6 feature/s and why? (If you are preparing for an interview, this could be a good practice to answer out loud 😉).

JavaScript - Destructuring assignment

Tanwa Sripan — Sat, 18 Jun 2022 15:36:54 +0000

Hey all! 👋 JavaScript ES6 has an awesome feature called destructuring assignment. Let's talk about it 😀.

Introduction - What is destructuring assignment?

Destructing assignment allow you assign array or object properties to a variable in an easy way. This means that you can write less code in order to unpack (grab things from) arrays and objects and assign it to individual variable. The code can look cleaner and it improves readability.

Array destructuring example:

The properties of the arrays are the index, and the syntax resemble an array literal. You can assign a value within the array corresponding to its position in the array and skip values by leaving a blank space (see example below).

// without destructuring

const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];

const first = days[0];
const TGIF = days[4];
const restDay = days[6]

console.log(first, TGIF, restDay) // "monday" "friday" "sunday"

// with destructuring

const [firstDay, , , , fifthDay, , sunday] = days;

console.log(firstDay, fifthDay, sunday) // "monday" "friday" "sunday"

It is also possible to assign the remaining values using the ... spread syntax when destructuring. You might commonly see it as ...rest this basically means to store the remaining elements to the variable called "rest".


const [, secondDay, ...remainDays] = days;
console.log(remainDays) //["wednesday","thursday","friday","saturday","sunday"]

Object destructuring example:

Similar to array destructuring, the syntax of object destructuring resemble the object literal and it allows you to assign the properties of an object to a variable. The left hand-side represents the property/variable names and the right hand-side of the equal sign is the object which you would like to unpack.

If you intend to assign a property to a same name variable, you can simply write { propertyName } (as seen in example 1 below) or if you wish to rename you can simply write { propertyName: desiredVariableName } (as seen in example 2 below). You can also use nested destructuring for more complex objects.

// Example 1
const user = {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
}

const { name, email, phone } = user;

console.log(`${name} has email ${email} and reachable on ${phone}`) // "Leanne Graham has email Sincere@april.biz and reachable on 1-770-736-8031 x56442"

// Example 2
const wrestler = {
  name: "John Cena",
  moves: ["Tornado DDT", "Side Slam", "Five Knuckle Shuffle"]
}

const { name: FullName, moves: [,,bestMove]} = wrestler;

console.log(FullName +" best move is " + bestMove) // "John Cena best move is Five Knuckle Shuffle"

Default values

You can also set a default value for the cases where the property you are trying to extract does not exist (this would typically return undefined).


const [pi = 3.14] = [];

console.log(pi); // 3.14

const { codename = "Twilight" } = { name: "Loid Forger", profession: "Psychiatrist" };

console.log( codename ); // "Twilight"

My recent usage

This is very helpful when you wish to extract only specific property from an object or array. As I work with React, the typically usage for object destructuring is when importing from React library e.g. import React, { useState, useEffect } from 'react', destructuring props passed down the components or destructuring objects returned from API calls. I have also recently used array destructuring to easily swap two elements in an array to solve DSA problems:

const grid = ["empty", "fulled"];
[grid[0], grid[1]] = [grid[1], grid[0]];

console.log(grid); // ["fulled","empty"]

// without array destructuring

const newGrid = ["one", "two"];
const temp = newGrid[0];
newGrid[0] = newGrid[1];
newGrid[1] = temp;

console.log(newGrid) // ["two", "one"]

Summary

Destructuring assignment is a useful syntax that allows you to write cleaner code to assign properties of array and objects to individual variables using similar syntax to the array or object literals. Give it a try 😀.

For more detailed information and example, you can find it here MDN

Thank you for reading, if you have anything to add please let me know.

JavaScript - Hoisting

Tanwa Sripan — Sat, 11 Jun 2022 15:13:48 +0000

Hello everyone! 👋 Let's talk about hoisting in JS.

What is Hoisting in JavaScript?

The term hoist means to "raise (something)" and in JS it is used to describe the behaviour of JS interpreter whereby the use of classes, functions and variables before their declaration does not cause the error: Uncaught ReferenceError: X is not defined. This is because hoisting appears to have moved the declaration up to the top. (The variables and functions are actually saved in memory during the creation phase of the Execution Context, you can read more about it here.)

Below, I will talk about the difference between variable hoisting and function hoisting.

Variable Hoisting

When you declare a variable, you can use var, let and const. Both let and const get hoisted but do not get initialized with a default value, this means that you can still get ReferenceError if you use the variables before its declaration. However, for var, when it gets hoisted it also gets initialized with a default value of undefined so you will not get an error.

Example:

console.log(varThing); // undefined

var varThing = "testingVar";

console.log(letThing);

let letThing = "testingLet"; // Uncaught ReferenceError: Cannot access 'letThing' before initialization

Function Hoisting

When a function gets hoisted this means that you can call/use the function safely without error, this only applies to function created with function keyword and not function expressions.

Example:


console.log(getRandomNumber(2, 5)); // 2

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

console.log(getRandom()); // Uncaught TypeError: getRandom is not a function 

var getRandom = function () {
  return Math.floor(Math.random() * 10)
}

In the example, you can see that the getRandomNumber function can be called before its declaration, this is due to hoisting. However, with getRandom, it has been hoisted as a variable, specifically with value undefined and so you get a TypeError when you try to use it as a function.

Summary

Hoisting is the term used to describe the process in which declarations of classes, functions and variables get saved in memory during the Execution Context. This allows for the program to read (use) these values before declaring them. It can cause some problems so it is good to know what kind of error it can cause but also why certain things work even before you declare them.

It is always best to declare your classes, expression functions and variables before using them to avoid initialization errors.

Thank you for reading, leave a comment if you found it helpful or have any feedback. 😀

JavaScript - JSON

Tanwa Sripan — Sat, 04 Jun 2022 16:56:49 +0000

Hey all 👋 I have been learning a lot about backend development and creating APIs with NodeJS, Express and MongoDB. So, I wanted to write a little bit about JavaScript Object Notation (JSON) and share what I know about them.

Table of content

Introduction
Methods and Examples
Summary

Introduction

Although the name is JavaScript Object Notation, it is actually widely used in many programming languages not just JS. JSON is a way of formatting data and representing them as plain text and it is often written as key-value pairs similar to the JS Objects. It is commonly used for API as it allows for data to be transferred over network requests and it is often used in configuration files of projects (e.g package.json 👀). JSON is very easy to read/write and using them is also easy.

JSON represents data in plain text and it supports many data types such as String, Booleans, Numbers, Arrays, Objects and null. However, it cannot represent Functions, Symbols, etc.

JSON is language independent.

Methods and Examples

The two main methods that you can use when dealing with JSON are JSON.stringify() and JSON.parse() in JavaScript (other languages will have their own versions of this).

JSON.stringify() - When you would like to convert JS Objects into a JSON string in preparation to send data over the web for example, you can use this method. If an object to be stringify has its own toJSON method then JSON.stringify will use that during the process, an example of this is the Date object.

Converting objects to JSON string is sometimes known as serializing or json-enconding.

Syntax and Example:

The full syntax is JSON.stringify(value, replacer, space), where the replacer allow you to modify how you would like the value to be stringify while the "space" option allow you to define the white spaces for better visual representation of the JSON string.

const data = {
  name: "Michael Scott", 
  dob: "15/03/1964", 
  position: "regional manager",
  employees: ["Jim", "Pam", "Dwight", "Angela", "Kevin", "Stanley"],
  lover: {name: "Holly", dob: "03/03/1972"},
  date_added: new Date()
}

const json_data = JSON.stringify(data);

console.log(typeof json_data); // "string"
console.log(json_data); 
// '{"name":"Michael Scott","dob":"15/03/1964","position":"regional manager","employees":["Jim","Pam","Dwight","Angela","Kevin","Stanley"],"lover":{"name":"Holly","dob":"03/03/1972"},"date_added":"2022-06-04T12:33:30.479Z"}'

JSON.parse() - This method allow you to convert JSON string to JS object. You may use this if you wanted to parse some data you received from an API request for example.

Syntax and Example:

The full syntax is JSON.parse(text, reviver), where the reviver allow you transform the value before returning it.

const json_encoded = '{"name": "Jim", "position": "salesperson", "likes": ["ham", "cheese" , "Pam"] }'

const data = JSON.parse(json_encoded);

console.log(typeof data); // "object"
console.log(data.likes[1]) // "cheese"

JSON.parse will not automatically parse into the Date object, so you can use the reviver option to convert the date string into a Date object, for example:


let json_date = '{"date":"2022-06-04T12:33:30.479Z"}'

function reviver(key, value) {
  if (key === 'date') {
    return new Date(value);
  }
  return value;
}

const data = JSON.parse(json_date, reviver);
console.log(data.date.getFullYear()) // 2022

Here, I have defined the reviver function but you could use anonymous function if you wanted to, it takes the key and value pair of the JSON string and if the key matches "date" then we would return a Date object of the value rather than the automatic JSON.parse value.

Summary

JSON is a data representation format that is independent of programming languages. You can use JSON.stringify() and JSON.parse() in JavaScript to convert to (serialize) and from (deserialize) JSON string/text. It can support Primitive values, null, arrays and objects. It is lightweight and easy to use, and you can add options to deal with how you convert to and from JSON.

That is all for today, if you have anything to add please let me know either in the comment below or via Twitter.

JavaScript - Conditional Operator

Tanwa Sripan — Sun, 29 May 2022 11:00:35 +0000

What is the Conditional Operator?

The Conditional Operator is sometimes called the Ternary Operator or "question mark" operator. It is an operator that allows us to write the if ... else statement in a short and concise way. The operator is used with a question mark ? hence the name "question mark" operator. The operator has three operands hence the name "ternary" operator.

Syntax and Example

Normally, you would write an if ... else statement the following way:

let value;

if (condition) {
  value = "true";
} else {
  value = "false";
}

With the Conditional operator, you can write the above code the following way:

// syntax -> condition ? operand2: operand3; 
let value = condition ? "true" : "false";

The first operand is the condition you want to evaluate, followed by a question mark (?). The second operand is the expression you wish to execute if the condition is "truthy", followed by a colon (:). And lastly, the third operand is the expression to execute if the condition is "falsy".

You can see that with the Conditional operator, you can neatly write an if ... else statement block into one line and assign it directly to a variable.

Nesting/Chaining

The Conditional operator is often used as an alternative to if ... else statement block because it is shorter to write, sometimes it is still better for code readability to use if ... else statements. That being said, you can use Conditional operator for if ... else if ... else statements as well.

For example:

function getAgeGroup(age) {
  if (age >= 18) {
    return "adult";
  } 
  else if (age >= 13) {
    return "adolescent";
  }
  else {
    return "child";
  }
}

Here we have a function that return the age terminology based on the parameter "age", the function evaluate the input argument with if ... else if ... else statement and return appropriate term.
If we wanted to use the Ternary Operator, we could do it like so:


function getAgeGroup(age) {
  return age >= 18 ? "adult" 
    : age >= 13 ? "adolescent" 
    : "child";
}

You can see that it much shorter, as for whether it is as readable, I will let you be the judge of that 😃.

(Explanation: In the example, if the first condition is "truthy" it will return the string "adult", otherwise, it will move to the second condition and again check for "truthy" and return the string "adolescent". If the second condition is "falsy" then the string "child" will be returned.)

Summary

The Conditional Operator has three operands and can be used as an alternative to if ... else statement block. It can be difficult to read so it should be used for simple cases. An example of my use case would be in React, where you can't use if condition directly inside the JSX so you could use this conditional operator for conditional rendering.

Thank you for reading, please leave a comment if you found it helpful, or feedback if you found a mistake or would like to add to it.

NodeJS and ExpressJS - Hello World 👨🏻‍💻

Tanwa Sripan — Mon, 23 May 2022 20:25:14 +0000

Hey everyone 👋 I recently finished the freeCodeCamp "Backend Development and APIs", if you are interested you can find it here at FCC. I learnt quite a lot and I thought it was a great introductory to Backend Development with NodeJS. So, I thought why not show you all how to create the classic "Hello World" app using Express and NodeJS.

Table of content

Introduction
Pre-requisites
Server set up
Hello world

Introduction

With NodeJS, you can now write backend code with JavaScript. While, for some people, it might not be too difficult to learn a new language to write server-side code, I think that being able to write both frontend and backend with the same language makes learning full stack developer easier (maybe 😁). So what is NodeJS? - NodeJS is a JavaScript runtime environment that comes with many tools to help you write server-side code using JS. You can learn more about it with nodejs.

ExpressJS is a NodeJS framework which is easy to use. It allows you to write handler functions for different HTTP requests (GET, POST, PUT etc...) for different routes (path/URL). It can also be used to serve static files and dynamically generated content using templates. You can learn more about it at tutorialpoint and express.

Pre-requisites

You should:

Know some JavaScript code
Have NodeJS installed
Have VSCode installed (this is the editor I use, but you can use others you are comfortable with)

If you don't have NodeJS yet, you can download it here at nodejs, this will come with a package manager npm which you can use to install various packages and dependencies, e.g. ExpressJS.

Server set up

After you have installed NodeJS, you can create a new folder (call anything you want) and open it up in VSCode, and within VSCode you can open the terminal and initialize a node project with:

npm init -y

This will start a new NodeJS project and create a package.json file with populated information. You can then run:

npm install express

This will add ExpressJS to the dependencies list in the package.json file and install it along with other node built in modules (you will see the node_modules folder appear).

Next, you will need to create a JavaScript file to start coding the "Hello world" app, you can call it app.js or index.js (or whatever).

Code Hello World App

To begin, let's import ExpressJS using require, as express is a function, you will need to call it and store it in a variable typically called app. We can then start the server by telling app (a.k.a express) to listen on a specific port.

const express = require("express"); // import express
const app = express(); // initiate express
const PORT = 8000;

app.listen(PORT, () => console.log("Server is running on http://localhost:" + PORT));

The second argument to the .listen method lets us define a callback function so we know when the server is up and running.

We can start the server by going to the terminal and run this command (*note: my js file is called index.js, so you will need to use whatever you named your js file):

node index.js

Right now, you won't be able to do much because we have not set up any routes (end-points), but you can still view and check if the server is up and running. You should see the "Server is running on http://localhost:8000" in the console and if you visit that page on the browser you should get a message of "Cannot GET /".

Next, let's set up a GET end-point to the home page or the root URL ("/") and response with a "Hello world". Here we will use .get(), an Express method that tells the server how it should respond to a GET request. The first parameter tells you which route (URL/end-point) you want this to run, in our example we want the root URL ("/") and the second parameter is the handler function which has take two arguments, the request and response object. To print "Hello world", we can use res object and .send the message.

app.get("/", function(req, res) {
   res.send("Hello world!");
});

VOILA! You have done it! If you visit the page now on the browser, you should see that the server has responded to the GET request with a message of "Hello world!" (or whatever message you used). If you don't see anything, try restarting the server by pressing Ctr + C and run node index.js again.

If you followed the steps, hopefully everything should work and you will have coded "Hello world" app using ExpressJS and NodeJS. You can see my example here on replit.

The overall project looks like this:

const express = require("express"); // import express
const app = express(); // initiate express
const PORT = 8000;

app.get("/", function(req, res) {
   res.send("Hello world!");
});

app.listen(PORT, () => console.log("Server is running on http://localhost:" + PORT));

Summary

NodeJS is a JavaScript runtime environment which gives you the power to write JS code on the server side. It comes with many helpful built in tools. ExpressJS is a NodeJS framework that help you deal with HTTP requests and more, you can use these two to create a simple "Hello World" app.

Thank you for reading, if you have any feedback please leave a comment or DM me on Twitter at JustTanwa.

JavaScript - for...of and for...in

Tanwa Sripan — Wed, 18 May 2022 18:23:29 +0000

Hello there! Bonjour! Hej!　こんいちは！👋 Today, I want to talk about when I learnt about for...of and for...in in JavaScript.

Table of content

Introduction
For...in
For...of
Summary

Introduction

If you are learning JavaScript (JS), at some point you will learn about loops in order to run a block of code over and over again. Loops are handy but sometimes they can be the source of your bug/trouble when you don't handle the loop conditions properly, this is especially true with while loops (I have created infinite loops many times, even more than Christopher Nolan 😋). The first loop statement I learnt in JS was a for loop, it was cool to be able to get the computer to repeat a task with set conditions but I did think that it required a fair bit of set up with the three statements when setting up the loop (and many times I forget about the semi-colon...😵).

Later, I started using Array Methods and it was fun to use them and they were very helpful in keeping the code clean while also expanding my knowledge. However, when solving some Data Structure and Algorithm problems, I found that if you need to break out of the loop early, Array methods are not good for those situation as they run on every element in the array, so I learnt about for...in and for...of to use something other than a for loop.

For...in

The for...in loop iterates over the "keys" or "properties" of a JS Object and indexes of a JS Array, to put it simply. However more generally, it loop over the enumerable properties of objects, these are properties which are of String datatype and has an internal enumerable attribute sets to true (almost everything in JS is an object).

The set up looks something like this.

for (const key of object) {
  // something you'd like to do
}

If you want to loop through an object in JS, the for...in loop can be a very easy way to do that as it will iterate over all the properties of the object (including inherited ones) and then you can access the corresponding values. In the above code example, the variable "key" will represent different object properties each iteration.

For example:

const FFMovies = {
  first: "The Fast and the Furious",
  second: "2 Fast 2 Furious",
  third: "The Fast and the Furious: Tokyo Drift",
}

for (const installment in FFMovies) {
  console.log(installment + " is " + FFMovies[installment])
}
// first is The Fast and the Furious
// second is 2 Fast 2 Furious
// third is The Fast and the Furious: Tokyo Drift

It is recommended not to use for...in loop to iterate over an Array if the order of matters, instead stick with for loop or use .forEach() method. This is to do with the implementation of the browser.

For...of

The for...of loop was introduce with ES6 which allow you to iterate over an iterable object in JS e.g. Array, String, Map and etc. To simply put, you can iterate over the values of an array for example. It is important to note that you cannot use for...of on Object directly.

The set up of a for...of is very similar to a for...in loop except one word. So why would you use for...of instead of a regular for loop or a method like .forEach()? I will show you.

Example:

const FFMovies = [
  {name: "Fast & Furious", installment: "4th", rating: 6.5},
  {name: "Fast Five", installment: "5th", rating: 7.3},
  {name: "Fast & Furious 6", installment: "6th", rating: 7}
];

for (let {name, installment, rating: rated} of FFMovies ) {
  console.log(`${name} is the ${installment} of the franchise, it was rated ${rated} of out 10.`);
}

/*
Fast & Furious is the 4th of the franchise, it was rated 6.5 of out 10.
Fast Five is the 5th of the franchise, it was rated 7.3 of out 10.
Fast & Furious 6 is the 6th of the franchise, it was rated 7 of out 10. 
*/

With for...of you can directly use object destructing or array destructing which allow you to "grab" each properties/element and assign them to a variable to use inside your loop, just like the example above.

When dealing with matrix problem, I often use this method to grab the directions so I can perform Breadth First Search for example.

Summary

If you want to iterate through an array where the order of iteration matters, the traditional for loop is still a good method to use, alternatively you could use a .forEach array method. If you want to iterate over an object properties, you could use for...in to iterate over the object keys/properties and do what you want. If you have a more complex Array structure, you could use for...of loop combined with Array Destructing or Object Destructing to write cleaner code.

That's it. I was aware of these two statements but I had never used them until I started solving DSA problems, and now I have this under my tool belt to use in the future 😄.

As always, please leave a comment, like, feedback or whatever you want. Thank you for reading.

JavaScript - Map

Tanwa Sripan — Sat, 14 May 2022 20:15:45 +0000

Hey 👋, hope y'all are well! Lets talk about Map in JavaScript!

Map 🗺️

Map in JavaScript (JS) allow you to store information/data using a key-value relationship. But wait... isn't that the same as an Object in JS? Map does return Object when you use typeof but it is not exactly the same. They are very similar in nature but they have distinct differences that determine their uses.

So what are these distinct differences? Well, if you are using Object the keys must be a String or Symbol datatype whereas the keys in Map can be any datatype including Function and Object. Another thing is that to find the size of an Object you must do it manually, e.g. grabbing all the keys using Object.keys() then counting the length. But, Map has a property .size which return the size of the Map.

Additionally, Objects are not directly iterable while with Maps you can.

Example: Map comes with its own methods and you can see some of them below.

const cypher = {name: "Cypher", color: "white"};
const raze = {name: "Raze", color: "orange"};
const omen = {name: "Omen", color: "blue"};

const characterRoles = new Map(); // create an empty Map.

// add new data

characterRoles.set(cypher, "sentinel");

// you can chain the method to add multiple entries
characterRoles.set(raze, "duelist")
   .set(omen, "smokes");

// check size
characterRoles.size // 3

// iterable
characterRoles.forEach((role, char) => {
    console.log(char.name + " is a " + role)
});

// Cypher is a sentinel
// Raze is a duelist
// Omen is a smokes

As I continue to learn more about Data Structure and Algorithm, I learnt that Map is JavaScript's equivalent to a Hashmap and have been using them to solve some problems.

Summary

To summarise, Map allow you to store data as key-value pairs that are not limited to String (or Symbol) datatype as keys. It also give you the ability to directly iterate through the data. Additionally, Maps have it's own properties and methods that you can use to add, access, edit, and delete the data in the collection.

Thank you for reading this short post, please leave a comment if you want to add information or give feedback 😀.

JavaScript - Set

Tanwa Sripan — Tue, 10 May 2022 21:32:28 +0000

I am currently partaking in the #100DaysOfCode challenge, and everyday I try to solve one Data Structure and Algorithm problem using JavaScript. I have encountered Set and Map and I want to talk a little a bit about the Set object type.

Set

The Set object type was introduced with ECMAScript 2015 (or ES6) which allow you to store all kind of JavaScript data types as a unique set of elements. It is very similar to an Array in JavaScript but it has other syntax that allows you to access, check, and delete elements in the Set. This particular object type comes with its own methods, in particular, the .has() method which allows you to check for elements inside the Set much like Array.prototype.includes, and according to the MDN Docs it is quicker than .includes on average.

The methods that we can use with Set object type are .add(), .clear(), .delete(), and .has(). It also has a property .size which is similar to Array.prototype.length.

Example: Let's look at some of the Set methods.


const twiceTwice = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];

const uniqueNumbers = new Set(twiceTwice);

console.log(uniqueNumbers) // { 1, 2, 3, 4, 5 };

// can add new elements, any data type
uniqueNumbers.add("Rasengan");
uniqueNumbers.add({name: "Tanwa", favouriteColor: "Red"});
console.log(uniqueNumbers);
/* Set(7) {1, 2, 3, 4, 5, …}
[[Entries]]
0: 1
1: 2
2: 3
3: 4
4: 5
5: "Rasengan"
6:
value: {name: 'Tanwa', favouriteColor: 'Red'}
size: 7 */

// check for an element
uniqueNumbers.has("Rasengan"); // True

// delete an element
uniqueNumbers.delete(2); // True

// check size
uniqueNumbers.size; // 6

// clear
uniqueNumbers.clear();

Example use case

To solve 3. Longest Substring Without Repeating Characters on leetcode, I used Set to form and store the substring as I iterate through the string using two pointers, and each iteration, checking the Set using .has() to see if the element already exist before using .add() to append new values or .delete() to remove the element starting from the left. You can see my solution on my website.

Summary

Set is an object type that allows you to store unique elements of any type. And these are the methods:

.add(): you can add a new element to the end of the Set. Returns the new Set.
.clear(): you can remove all the elements in the Set.
.delete(): you can remove a specific value from the Set. Returns false if an element is not in the Set. Returns true for successfully removing the element.
.has(): you can check if an element is in the Set. Returns a Boolean.

Next time you need to remove a specific element from a unique set of values, you can try using Set and its methods.

Thank you for reading, I hope you found it useful. Please leave comments and feedbacks if you have them :)

JavaScript - Event Listeners and Handlers

Tanwa Sripan — Fri, 06 May 2022 18:49:39 +0000

Hey everyone 👋 Let's talk about Event Handling in JavaScript.

Table of content

Introduction
Event Listener and Event Handler
Capture and Bubbling
Example

Introduction

When I started learning JavaScript (JS), I read somewhere that JS is an event-driven programming language, and that the use of JS in the browser was to add interactivity to the web pages.

But what are events in JS? Well, events are just actions that happen when the user is accessing the web pages and it could be the loading of the document, the fetching of data, the clicking of elements inside the document, the pressing of keys or touchscreen and many more.

These actions are known as events in JS and we can respond to these events by calling functions and manipulate the DOM to provide that interactivity and feedback to the user.

Event Listener and Event Handler

Imagine you have a button, and you would like to know when the user has clicked this button so that you can run a block of code. You can attach an event listener to any element you would like to "listen" for an event type by using .addEventListener(). This method typically takes two parameters, the first being the event type you would like to listen out for (as a string) and the second is the callback function you would like to run when the event occurs (sometime referred to as "fires"). The function that runs when the event "fires" is sometimes called the event handler.

Typically, you would grab the element from the HTML DOM by using something like document.getElementById() or document.querySelector(). I like to use the .querySelector because it feels easier since it is the same selector as CSS.

const button = document.querySelector("button");
button.addEventListener("click", (e)=> {
   // some code to manipulate the DOM here
});

You may notice that in the example, the anonymous function takes in an argument e. This argument is the event object, it is an object which contains details about the event that occurred so you can capture things like the target of the event, or the coordinate of the cursor, etc.

You can attach more than one event listener to an element and if they are the same type, the callback function will run in the order the event listener was defined.

There is also another way to apply event listener to an element, and that is setting the event handler property to a function to handle that event. For example, buttton.onclick = doMagic but by adding event listener this way you can only add one handler.

Capture and Bubble Phase

Sometimes, you may have an event listener on the parent element but not on the child, or you have it for both. So, to deal with nested elements situation and when each event handler will run, you need to be aware of the Capture phase and the Bubble phase. "Bubbling" means that the event "propagate", aka move up and outward from the inner most element all the way to the <html> element. And "Capturing" is the opposite, the browser will call the event handler for the outer most element (<html>) down to the inner most element.

The Capture phase always gets called before the Bubble phase, which means that any element with the event listener set to use capture will fire before all element set with bubble. To use capture, we shall return to .addEventListener(), you can add a third argument when attaching the event listener { capture: true }.

Example

I have made something silly with the codepen below. I used window.onload event handler property to make bubbles show up on the screen once the window has loaded. I added an event listener to each bubble so upon mouse entering the element, the bubble would disappear. I also added a small example of capturing and bubbling at the bottom of the JS file, console logging some words when the element is clicked. You can see the code snippet below, take a guess what the console will log, then click anywhere on the screen and check the console to see if you were correct 😀. Note: canvas is the variable name holding the <main> element of the page.


function sparkle() {
  console.log("sparkle");
}

function sparkleTwice() {
  console.log("sparkle, sparkle");
}

function dazzle() {
  console.log("dazzle");
}

document.addEventListener("click", sparkle, {capture: true});
document.addEventListener("click", sparkleTwice)
canvas.addEventListener("click", dazzle);

Summary

So, to recap everything, if you want to listen out for certain actions, events, then you can attach an event listener to the element. When the event fires the event listener will call the event handler, a callback function taking the event object as a parameter and will run a block of code. If you have nested elements, you now know that bubbling will cause the event to propagate up so if you find an odd behavior or issues with your event listener, this could be the reason why. You are also aware of using capture to trigger your event handlers in a specific order.

I believe that the best way to understand any concept is to get out there and try to implement something. If you need a starting point, you can break my code, add more event listeners, change the function, play around with it. Or just create your own from scratch! 😀

Thank you for reading, if you have any comments or feedback please leave them down below.