DEV Community: Rishav Jadon

How does JS execute "use strict"?

Rishav Jadon — Sun, 23 Jan 2022 07:43:11 +0000

I'm curious if anyone knows what goes on behind the scenes when we write "use strict" in a JS script?

So in use strict we:

cannot use undeclared variables.
that means no hoisting. How is that handled🤔?

Star Rating system with HTML, CSS,JS

Rishav Jadon — Fri, 14 Jan 2022 14:01:36 +0000

In a very minimal way, how would you implement a star rating system?
I was able to do it 😁 Here is my code, corrections are welcome :)
https://codepen.io/Rj456/pen/dyVwgbX?editors=0011

How do you create a Redux store for Login functionality?

Rishav Jadon — Tue, 21 Dec 2021 14:29:06 +0000

How do you think when you have states for email, password, and other states like dateRange values, and you have to implement a Redux store for them?
What kind of action creators do you write, should you use Redux toolkit, and what's the most simplest way to do this?

Stop using if else

Rishav Jadon — Thu, 14 Oct 2021 12:34:45 +0000

Recently, I had a take home assignment for a front end role, and I had to make a sort of Dashboard. I thought I did everything right, but I was rejected, partly on my carelessness, and also due to my code. I was using too many if/else statements everywhere! And I didn't know any better. But now I do, and I'm here to share that with you.

Most of us use if/else and switch statements whenever there is some conditional logic to handle. Although it might be a good idea to do that for one or two conditions here and there, using multiple if else statements chained together or big switch statements will make your code look very ugly, less readable and error prone.

function whoIsThis(character) {
    if (character.toLowerCase() === 'naruto') {
        return `Hokage`
    } else if (character.toLowerCase() === 'sasuke') {
        return `Konoha's Strongest Ninja`
    } else if (character.toLowerCase() === 'isshiki') {
        return `Otsutsuki being`
    } else if (character.toLowerCase() === 'boruto') {
        return `Naruto and Hinata's son`
    }
}
whoIsThis('')

You see that we are repeating ourselves many times by writing multiple console.logs and if statements.

But there's an Object-Oriented way of doing this, and that is by using Objects.
Instead of writing if else blocks we just define an object which has the values we use in comparisons as keys, and the values we return as values of the objects, like so:

function whoIsThis(character) {
    const listOfCharacters = {
        'naruto': `Hokage`,
        'sasuke': `Konoha's Strongest Ninja`,
        'isshiki': `Otsutsuki being`,
        'boruto': `Naruto and Hinata's son`
    }

    return listOfCharacters[character] ?? `Please provide a valid character name`
}

By using objects, we were able to make a sort of dictionary to look up to, and not use multiple if-else statements.

We can also make this better by using the Map object instead of using an object. Maps are different from normal objects:

They remember the original order of insertion
Unlike objects, we can use any type of data as key/value, not just strings, numbers and symbols.

function whoIsThis(character){
const mapOfCharacters = new Map([
['naruto', `Hokage`],
        ['sasuke', `Konoha's Strongest Ninja`],
        ['isshiki', `Otsutsuki being`],
        ['boruto', `Naruto and Hinata's son`]
])
return mapOfCharacters.get(character) ?? `Please provide a valid character name`
}

Thanks for reading this short article, if you liked it, you can support my work at https://www.buymeacoffee.com/rishavjadon

The only guide you'll ever need to understand Promises and Async await

Rishav Jadon — Tue, 12 Oct 2021 11:26:49 +0000

When it comes to **Promises* and Async await which are closely related concepts in Javascript, people are always confused even after watching tutorials or reading numerous articles about them. Well, worry not because I assure you if you read this article thoroughly you will have a better understanding of what they are and how they work.*

The Evolution of Asynchronous programming

Callback functions --> Promises --> Async await

Don't worry, we will understand what this evolution is all about and why it took place, further in the article.

Javascript is synchronous, or is it?

Javascript is a synchronous language, meaning that every statement is run line by line in a sequential manner, and only when a line of code is done being executed is when the next line will run.

Now, what if something takes a long time to execute than usual, and it blocks the whole program? This is bad, we don't want to slow down our program just because a single line of code (which might be an API call to get an image resource) is blocking our entire script.
That is why we needed asynchronous code, which does not block the code after it, and can run in the background. There are a lot of ways we can do asynchronous programming in JavaScript: callback functions, Promises and Async await.

Callback functions

Callback functions are basically functions passed to functions as arguments to be executed later, and they can be synchronous or asynchronous. One most popular example of this is the s*etTimeout* function.

setTimeout(function() {
  console.log('Hello World!');
}, 500);

This code does a console.log after 500 milliseconds and runs asynchronously.
A synchronous callback function might look like this:

let numbers = [1, 2, 4, 7, 3, 5, 6]
numbers.sort((a, b) => a - b)
console.log(numbers); // [ 1, 2, 3, 4, 5, 6, 7 ]

The function sort() has an anonymous arrow function that works as a callback to sort the array, and we print it on the console.
Notice that the arrow function runs before the console and therefore we get the sorted array, but if you would have sorted the same array with a setTimeout then the console will print unsorted array:

let numbers = [2, 1, 4, 7, 3, 5, 6]
// numbers.sort((a, b) => a - b)
setTimeout((a,b) => {
    numbers.sort((a,b) => a-b)
    // console.log(numbers)
}, 0)
console.log(numbers); // [2, 1, 4, 7, 3, 5, 6]

This is because asynchronous code runs after all synchronous code is finished executing, that is why even though the setTimeout had 0 wait time, it still ran after the console.log, even though console.log comes later in code.

Callbacks are good for asynchronous programming as long as you have very few async actions, but if you want to run more functions asynchronously, then callbacks become an ugly mess!

Imagine if you have a number of requests and you want to run them in callback functions. The code might look like this:

const url1 = 'https://fakeapi.com/1/'
const url2 = 'https://fakeapi.com/2/'
const url3 = 'https://fakeapi.com/3/'

function callback(url,msg){
// calls api here
console.log(msg)
}
setTimeout(() => {
    callback('first message')
    setTimeout( () => {
        callback('second message')
        setTimeout( () => {
            callback('third message')
        },0)
    }, 0)
},0) 
// first message
// second message
// third message

These nested callbacks create what is infamously called the Callback Hell, and this type of code can become unmaintainable very quickly.
To solve this, Promises were introduced in ES6( Ecmascript 2015).

All these Promises you do

Promises in JS are like promises in real life, it either is resolved or never completed.
There are certain things you need to know to understand Promises better. A Promise can be in one of the three states:

resolved
rejected
pending

Promise objects can be made by the Promise() constructor, which takes in an executor function, which in turn takes two functions as parameters: a resolve function and a reject function.
This is how you make a new promise:

const aPromise = new Promise( (resolve, reject) => {
  resolve("promise resolved")
})

aPromise.then(( value) => {
  console.log(value)
})
.catch( (error) => {
  console.log(error)
})

This "executor" function terminates with the invocation of resolve or reject function depending on the value of the Promise, meaning that the executor function runs some code, and calls resolve function if the Promise gets resolved or reject function if it throws an error.

After your promise is resolved or rejected you can chain it with the methods .then() and .catch() respectively. These methods themselves return Promises.
You can also chain multiple .then() methods to modify the value that comes back from a resolved Promise:

aPromise.then(( value) => {
  return value = 'changed value'
})
.then((value) => {
  console.log(value)
})

We usually use these methods while making an api call.
Let's use the fetch API to fetch list of Pokemon from the PokeAPI. The fetch(). function returns a Promise so we can attach our .then() and .catch() methods:

const url = 'https://pokeapi.co/api/v2/pokemon?limit=100&offset=200'
fetch(url)
  .then((response) => {
    return response.json()
  })
  .then((data) => {
   console.log(data)
  })

This will give us a list of 100 Pokemon with other properties. Promises did make our lives easier but our code still looks like it's bulky with all these chaining methods. Async await made this much more cleaner and allowed us to write asynchronous code that looked very much like our good old synchronous code.

Async await

Remember that Async await is kinda like Classes in Javascript, it might look like we are writing entirely different code, but under the hood, we are still using Promises. It's just that the syntax and readability got better.

Async await is used in place of .then() and .catch() when working with Promises. We need to assign a function ASYNC and then inside of it we can have the await keyword before the asynchronous actions we'd like to perform ( meaning the code we think might take longer time). Like this:

const loadData = async () {
    const url = 'https://jsonplaceholder.com/todos/1/'
    const res = await fetch(url)
    const data = res.json()
    console.log(data)
}
loadData()

Can you see the difference between this and Promises? This is so much cleaner and doesn't even look like we are doing something asynchronously. Just define an async function and add await before anything you'd want to run asynchronously.

Using async on a function, with await inside on any operation( like an API call) will say to JS : "Hey man just don't return this function until this thing with the await is done, after that do whatever you gotta do"

Things to remember about Async await:

always assign the function you want to have asynchronous code in as an async function.
you can only use await inside of an async function.
An async function returns a Promise, so you can chain multiple async functions.

try-catch block

Just like the .catch() block we used in Promises, we use try-catch for error handling in Async await. This makes the code much cleaner and more organized.

const loadData = async () {
try{
    const url = 'https://jsonplaceholder.com/todos/1/'
    const res = await fetch(url)
    const data = await res.json()
    console.log(data)
  }
catch(err){
   console.error(err)
 }
}

Async functions also return a promise. So get this, a fetch or an Axios request returns a promise, an async function also returns a promise. We can either do a .then() chaining or another async await on a Promise.

Promise.all()

If you need to make multiple requests to an API, and you go by the approach of async await, it will take the sum of time it takes for all requests to return data. So let's say each request takes 1 sec, and for 3 requests, we will have to wait 3 secs if we just await on every single request like this:

/* Wrong approach */
const loadData = async() {
  try(){
    const url = 'https://jsonplaceholder.com/todos/1/'
    const url2 = 'https://jsonplaceholder.com/todos/2/'
    const url3 = 'https://jsonplaceholder.com/todos/3/'

    const res = await fetch(url)
    const res2 = await fetch(url2)
    const res3 = await fetch(url3)
    const data = await res.json()
    const data2 = await res2.json()
    const data3 = await res3.json()
    return  [data, data2, data3]
   }
   catch(err){
    console.error(err)
   }
}

With Promise.all(), each request runs parallel to each other, resulting in a much quicker response.

/* Right approach */
const loadData = async() {
  try(){
    const url = 'https://jsonplaceholder.com/todos/1/'
    const url2 = 'https://jsonplaceholder.com/todos/2/'
    const url3 = 'https://jsonplaceholder.com/todos/3/'
    const results = await Promise.all([
      fetch(url),
      fetch(url2),
      fetch(url3)
     ])
    const dataPromises = results.map( res => res.json())
    const finalData = await Promise.all(dataPromises)
    return finalData
   }
   catch(err){
    console.error(err)
   }
}

( async() => {
const data = await loadData()
console.log(data)
})()

That's all. We learned a lot of things, what is asynchronous programming, how do callback functions work, about Promises and Async await.

For further reading:

Thanks for reading!

If you like my work you can support me on https://www.buymeacoffee.com/rishavjadon

Windows or Linux/Mac : which one is better for development?

Rishav Jadon — Fri, 29 Jan 2021 16:08:56 +0000

Which one is better in terms of workflow, developer experience, etc?

Stop being lazy and learn Git!

Rishav Jadon — Tue, 26 Jan 2021 13:21:06 +0000

"I have never messed up while using git" - said no one, ever.

Git is something that if learned properly in beginning of your career as a software engineer, can serve you so well in the coming years!

Hey there 👋 I'm Rishav, and this is my new article series called "Bookmark Devouring🔖🥩" in which I will clear all my bookmarks on all platforms and in the process, learn new things and teach you too!

In this article, we will learn about the most popular "version control system" that is git. At the end of this article, you will have a solid understanding of how git works, the problems we might face, and how to fix those problems.
Let's eat a potato like Sasha and start!

Short Intro to Git 🖧

Git is a distributed version control system. Okay what? Let me break it down:

distributed meaning all our code, including full history of changes is mirrored on each user's computer.
version control system keeps track of the project files, history of changes, support for branching, merging and other things.

There is a different kind too, called Centralized VCS in which all code is stored on a server, and people (clients) pull code from server, make their changes, and then push changes directly to server. So there is no collaboration with other developers, and only connection is with the server.

We use git for project management and efficient, error free collaboration with other developers. Storing code change history and using features such as branching helps us for better collaboration, which is one of the most important aspects of programming.

Before getting into why is git needed, and the problems it solves, we need to understand some basic concepts about git.

Repository: A repository is the place where all your project files will be stored along with a .git folder containing all the stuff git records. We have local and remote repositories. Local ones are saved in our own system, whereas remote repositories are hosted online on platforms like Github, Gitlab, etc.
Commits: When you make changes into your code or add/delete files, you need to commit the changes to the branch you are in. You can think of this as saving your work in git history.
Branching and Merging: All work is done on branches. After you have just initialized your git repository, everything will be saved in the default Master Branch. If you want to work on some features and don't want to mess your main codebase, you create a branch. After working on the features ,when you want to add your changes to master branch, you merge the two branches.
Staging Area: Before commiting changes, we need to add it to the Staging area. This tells git to commit all those changes which are staged.

Why git?

Git is cool but why do we need it? We will look into the story of Sasha, retired Survey Corps soldier transitioning into tech.

Sasha is a newbie developer and is assigned to a new project at work. It is an ongoing project so she takes all the project codebase and copies into her personal system and takes it home. She happily works on all the things she were assigned to, and later comes back with her copy of the project, which has changes of her own.

But there were other newbies too, and they were all assigned to this project and they had changes of their own. What a disaster! How do we solve this? Everybody has a different copy of the project, and all of those changes need to be done in the main project. Some changes might conflict with other changes, like the same file having different code from the actual onsite project, and some files might be deleted by the newbies which we don't really want.

Unlike all the other newbies, Sasha did some research, and found out about this open source tool called Git. She told all the other newbies that we can collaborate and merge our changes into the main project hassle free with Git. She gave some instructions to everyone on how to work with git.

Initial Steps

Sasha told everyone to go home and taught them some basic commands. But before that they needed to install Git. She gave them this link. After installing git, they were told to run:

git init

in their working directory. This will initialize a new git repository(aka directory aka folder), and from here git will start recording changes. Now what we need is get local copy of our main project, which is on a public remote repository(stored on Github). On the repo webpage of this remote repo(we'll call it repo instead of repository), we will see a link to clone their webpage:

Copy this https url and run:

git clone https://github.com/rjitsu/CSS-Cheat-Sheet.git

This will clone( download ) the repo in our system. Now that everyone has the fresh copy of project, they can work on it as they want and make their changes.

"But how?" - asked one newbie to Sasha.

Branching and collaborating

Git has a feature called Branching for safe collaboration. When you create a git repo, and work on it without branching, by default all changes are done to Master branch. When you want to add a feature, or just work seperately so that if you mess up, the master branch will not be affected, you make a branch. You do it by:

git branch new-branch

This will create a new branch. To see all branches, you run:

git branch

This will list all repositories. But git branch new-branch does not switch to the newly made branch, it just makes it. So to switch to it we use:

git checkout new-branch

Okay. Now we have a new branch. We make our changes to the code. Now we want to stage them and commit them. To stage all files we run:

git add .

The " . " is depicting we need to stage all files to the staging area. If you just need to stage some particular files, you do git add following the filenames. To commit files and finally save them in our history we run:

git commit -m "add all files"

The -m flag is for adding a commit message which is followed by the message itself. If you omit the -m flag, git commit will open a text editor to add the commit message.

You can watch all commits done on the branch you are on by :

git log

Hot Tip 🔥: use git log --decorate --oneline --graph --all to see a cleaner and prettier git log output

Now we will push our code to our branch by:

git push

Now, you need to merge your branch to the master. Before that, you checkout to the master branch.

git checkout master

After that run:

git merge new-branch

This will create a merge commit in git history, and will merge your branch into the master, meaning all your changes including history of changes is added to the master branch.

Hooray! Your branch is merged with the master branch. But all these changes are on our local repository with no connection to our main project which is hosted on a remote repository online on Github 😱.

Turns out we already created a connection with our remote repository when we ran git clone. Some commands in git are like a list of commands run together one by one. For example, when we ran git clone, it ran these commands as well

git init
git remote add origin https://github.com/rjitsu/CSS-Cheat-Sheet.git
git pull origin master

Now push all your changes by:

git push origin master

This will push all the changes from your local master branch to the origin.
Phew!

Sasha explained all this to the newbies, and therefore they could all work hassle free on their local branches via git!

If you read through all that, congratulations to you🎉.

To recap, we learned about:

what git is, the important terms related to it.
how to initialize, add, commit and push to branches.
how to merge branches.
a git workflow describing a real life situation of Sasha👧

Thanks for reading. If you liked this article, be sure to check my other ones too!
For further reading, read the docs on Atlassian.

Can css art and generative art be considered as projects to put on a portfolio?

Rishav Jadon — Thu, 08 Oct 2020 14:02:36 +0000

Introduction to creative coding with p5.js

Rishav Jadon — Tue, 06 Oct 2020 12:10:18 +0000

"Creating a process which makes the process"

Creative coding is addictive, if you really tune into it! It has immense possibilities, and that is why I decided to write this article, to introduce all of you to this wonderful genre of coding with a Javascript library called p5.js, where you can communicate to your audience more artistically than ever before!

What is creative coding?

In my terms, creative coding is just making some art, pattern, background, models, sketches, data visualization, animation, etc with the help of code, in a sort of iterative way to express something. It is about creating something expressive rather than functional, with code. Creative coding is a discipline which is an intersection of technology, art and design.

Didn't get it? Let me show you some examples.

You must be thinking right now : "Whattt? These art forms are made from 'code'? I can't believe it! ". That's what I initially thought, but once you get into this beautiful practice, you'll start to understand how nature itself is just a bunch of repetitive processes which ultimately makes this world, which is kinda what we do in coding, right? We create an algorithm, to solve our problems. The only thing that changes in creative coding is that we create algorithms for expressing something, in the form of art.

p5.js

You could do creative coding with C++ too! But it's not meant for that, that's why we have frameworks specifically for creative coding. Processing is the most famous platform for this, and it uses Java, but it has other variants for other languages as well, and p5.js is the platform we use for creative coding on the web. It obviously, uses Javascript, so it is very easy for web developers to get started with this, which was the primary reason it was made by Lauren McCarthy. So let's just get started.

For a quickstart, just open the p5.js web editor. Now that you have a p5 editor, let's get into some code. So, there are two functions that are most important in p5:

setup()
draw()

So setup() is an inbuilt function which runs only once, at the start of the program, and draw() is also an inbuilt function which runs on loop, which means it runs infinitely by default. Let's understand them individually.

1. function setup()
This is the function in which we put all the things that we want to do initially and only once. It basically sets up the environment and things like screen size, background color, for our "sketch" : which is what we call our program files in p5.js. A very generic setup function looks like this:

function setup(){
 createCanvas(500,500);
 background(120);
}

As we can see, we have a function createCanvas(), which creates a canvas of 500x500 units, and a background() function, which sets up the color for our canvas. If we provide a single argument, it will be a value from 0 to 255, 0 being black and 255 white. If we provide three arguments, it will use RGB color notation, each value ranging from 0 to 255.

2. function draw()
This is where most of the action happens. Here we use various functions, loops, and self made algorithms to make our final artwork. You can work with sound, data, webcams, sensors, and other things to interpolate in your sketch to make it interactive, but that is out of scope of this article. So if we wanna draw a line, circle, rectangle or any shape, we have functions for that:

function draw(){
  fill(233,11,44); // color to fill the shapes
  stroke(1); // stroke color
  strokeWeight(2);
  line(20,20,160,60); // line from (20,20) to (160,60)
  fill(23,44,223); 
  rect(170,170,120,70); // rectangle on (170,170) with 120x70 size
  fill(223,212,44);
  ellipse(120,130,100,100); // ellipse on (120,130) with height 100 and width 100, which makes it a circle
  noLoop();
}

So the code above will produce something like this:

The functions are self explanatory, and by the comments you might have understood what's going on. There was one function at the end called noLoop() , which actually does nothing but stops the draw() function from running infinitely. This is useful in scenarios where you might want to run draw() for a particular number of times.

There are some inbuilt variables in p5 too, which can add complexity to our sketches. Some of them are mouseX and mouseY. They are variables used to store x and y co-ordinates of the mouse cursor.
Look at this sketch:

function setup() {
  createCanvas(400, 400);
  background(200);
}
function draw(){
  fill(233,11,44);
  stroke(1); 
  strokeWeight(2);
  makeShapes();
}
function makeShapes(){
  fill(random(200),random(200),random(200));
  ellipse(mouseX,mouseY,50,50);
  rect(mouseX,mouseY,120,70);
}

The result:

The possibilities

As this is just to introduce you to p5.js, I can't go into complex sketches but I've laid down a path for you, and hopefully you'll create some beautiful things after venturing into the art of creative coding. For inspiration, here are some of my sketches :)

If you've reached till here, thank you for reading! Hope it helped you in some way. If you're interested in CSS, I also write some interesting articles on my website CSS Kenpai.
Some sources for further reading:

Make Pixel art 10x faster ✨💫

Rishav Jadon — Tue, 25 Aug 2020 14:05:01 +0000

You'll never have to use the box-shadows again

So this article will be short and simple so you can just take this technique and start making wonderful pixel art!
Before stumbling on this, I used to make pixel art with box-shadow, and it is so painful! Just copy pasting values and then changing the values again and again.

If you're unfamiliar with making pixel art with box-shadows, I'll just give you a small introduction. box-shadow is a property in css which attaches one or more shadows to the element it is applied on. So if you want to make pixel art , you just create a small box, and then define ( a lot ) of box-shadows positioned differently around the screen so that you can create a nice pixel art like effect.

Problem with the box-shadow

By now you also might be able to see the problem in box-shadow which is the sheer work. Defining each box-shadow again and again is just too much work! Now you might be thinking why even bother making pixel art from code, as there are multitude of software like Jhey Tompkin's pxl. My answer to that is CREATIVITY. Things like pure CSS art, one div art, no div art, and pixel art are not for any productive purpose, it's for the purpose of showing your personality,creativity,imagination, and in this process you learn the deeper concepts more clearly!

The answer is in CANVAS

When box-shadow is too much of a hassle, use canvas!. I always use a reference image. We will use this image for the purpose of this article.

The basic idea is : We will use the canvas API in javascript and will define our pixels by making a 2-D array, which will have our pixel values mapped perfectly along each row, and then we will fill our canvas by using nested for loops and taking values from array and fill in canvas pixel by pixel. This is much faster in comparision to the box-shadows technique!

Now let me show you how to do it with a step-by-step approach.

Step 1 : Set up our canvas

Make a canvas in your HTML of any size you want.

<canvas height="500" width="500" id="board">
</canvas>

Step 2 : Set up variables

We need to make variables for the size of pixels, for colors you will use in making your art. We will do this in our JS file.

var pixelSize = 15;
var _ = "transparent",
         b = "#000000",
         o = "orange",
         p = "hotpink";

Step 3 : Define our array

Now we need to fill these color values into our array according to our reference image. Just count how many pixels we need by row and by column, and we will make our grid accordingly.
Here, we need a 30 x 30 pixel grid ,so we will define an array which has 30 color values in a column, and we'll make 30 of those rows.

 var image = [
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, b, b, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, b, b, _, _, _, _, _, _],
[_, _, _, b, o, o, o, o, b, _, _, _, _, _, _, _, _, _, b, o, o, o, o, b, _, _, _, _, _],
[_, _, b, p, b, b, o, o, o, b, _, _, _, _, _, _, _, b, o, o, o, b, b, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, b, b, b, b, b, b, b, b, b, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, o, o, o, o, o, o, o, o, o, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, b, o, o, o, o, o, o, o, o, o, o, o, _, _, _, _, b, p, p, b, _, _, _, _],
[_, _, _, b, b, o, o, o, o, o, o, o, o, o, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, _, b, o, o, b, b, b, o, o, _, _, _, _, _, b, b, b, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, b, _, _, _, _, _, _],
[_, _, _, b, o, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, _, b, _, _, _, _, _],
[_, _, _, b, _, _, b, _, b, b, b, _, _, _, _, _, b, b, b, _, b, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, b, b, b, _, _, _, _, _, _, _, b, b, b, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, b, _, _, b, _, _, b, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, _, b, _, _, _, _, _, _, b, b, _, b, b, _, _, _, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, b, o, o, _, _, _, _, _, _, _, _, _, _, o, o, b, b, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, _, b, _, _, _, _, _, _, _, b, _, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, p, p, b, _, _, _, _, _, b, p, p, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, _, b, p, p, b, _, _, _, _, _, b, p, p, b, _, o, b, _, _, _, _, _, _],
[_, _, _, _, b, _, _, _, b, b, _, _, _, _, _, _, _, b, b, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, _, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, _, _, _, b, b, b, b, b, b, b, _, _, _, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, b, p, p, b, b, _, _, _, _, _, _, _, b, b, p, p, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]];

It looks like a really big array, but trust me, if you know the pain of making pixel art by box-shadows, this will definitely help a lot!

Step 4: Filling our canvas

The only thing left to do is fill the canvas by applying nested for loops, and filling our pixels by the colors in our array.

var canvas = document.getElementById('board');
var ctx = canvas.getContext('2d');
ctx.lineWidth = .25;
for(var i=0;i<29;i++) {
 for(var j=0;j<29;j++) {
   ctx.fillStyle = image[j][i];
   ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
     }
   }

After positioning our canvas, and adding some styling to it, the finished art looks like this:

That's it! Now I want you to make your pixel art, and show it to the world!