DEV Community: Asif

Cheat The Chrome Dino Game In Just 2 Minutes

Asif — Sun, 05 Sep 2021 09:45:08 +0000

If you are using chrome or chrome based other browsers, you must be familiar with the In-built dinosaur game in the browser. It comes whenever you are offline and trying to browse to the internet.

So, have you ever wondered to achieve the ultimate score of 99999 and see what happens. Technically, Its not impossible if you are super patient and have all day to play. But today, we'll do the impossible just by some tweaking and modifying the code.

The game only starts when you are disconnected to the internet or offline. But you don't have to be offline to play the game. Simply search :

chrome://dino

And the game will appear !

CHEAT !

After some researching the code and the modules. Here's some useful things that I found :

The T-rex is defined as Runner Object.
All the game logics are in the Runner.prototype object.

The game overs whenever the dino hits something

Immortality

Open inspect go to the console tab to implement the code below.

So, first of all we have to disable the gameOver function whenever the Dino hits something. In order to that, we have to re-define the function into an empty function :

Runner.prototype.gameOver = function(){} // Press Enter after

disabling `gameOver` function

BOOM ! Now the game won't stop and you will get unlimited scores !

Why Wait Hours To Get To 99999 Point?

The "T-rex"'s speed is encoded in the Runner.instance_ object.

Runner.instance_.setSpeed(100) // set the speed to 100

You can also set the jump height :

Runner.instance_.tRex.setJumpVelocity(5)

Enjoy and show off with you friends (¬‿¬)

🎶🎶 The End 🎶🎶

🦄 What does The Unicorn Emoji in This Site Mean 🦄 ?

Asif — Thu, 26 Aug 2021 04:26:47 +0000

So, I have been using dev.to for about 8 months. I am really amazed by one of the "8th Wonder" around the world : The unicorn emoji 🦄🦄. I did some research and I have many explanations.

Here are some of my personal opinion:

( Generally in Chatting ) Sometimes Unicorn Emoji means that someone is trying desperate to convince you that something that is fake is actually REAL.
Unicorns are often describes as freedom, magic, purity, innocence and healing. But this doesn't make any sense for a dev blog sites primary emoji.
A Unicorn developer/designer is a person who can design and code. Like a full-stack developer.

Some people often use it as a super-like / rare / unique button.
It leads people giving both heart and the unicorn emoji.
(Killer Point) : A developer who can do the full job is called a unicorn 🦄 Developer. So, in dev.to, a blog explaining about a topic from A-Z with decent explanation should deserve a 🦄.

So, does this blog deserve a unicorn ?? :3 :3

Best VS Code extensions for Front End Dev

Asif — Wed, 25 Aug 2021 10:57:17 +0000

VsCode extensions are the backbone on the text editor. You can add language, keymaps, plugins, debuggers and many other tools by the help of extension. Here are some useful or "Must have" extensions for front end dev like me :)

Javascript Code Snippet

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Polacode

Need asthetic screenshots of your code like this one ?

Polacode is here for you.

All Autocomplete

The best autocomplete to save your time !

Better Comments

Make more human friendly and readable comments.

Auto Import - ES6, TS, JSX, TSX

Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS)

Auto Rename Tag

Automatically rename HTML tags.

Bracket Pair Colorizer 2

This indetifies the matching brackets and colorizing to identify easily.

Code Runner

Runs any code !

Code Spell Checker

check your english spellings in the code

ES7 React/Redux/GraphQL/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

Google Fonts

Browse google fonts from VSCode and also get the CSS import instantly.

Live Server

This browser add-on is an extension for a developer tool in VS Code editor (Live Server). With this add-on installed, along with the VS Code extension, it gives you a functionality to automatically update your website on save; for other files than just .htm and .html.

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size

Tokyo night (theme)

My favourite syntax theme in vscode. :3 :3

🎶🎶 THE END 🎶🎶

Create An IMDB Web Scraper Using JS

Asif — Sun, 22 Aug 2021 16:52:06 +0000

Web scrapping is the process of using bot to get data from a specific website, unlike screen scraping, which only copies pixels of screen, the web scraping extracts the underlying HTML data of a link of a website, including the data from the database that the link provides.So, is this technology using legal? The short answer is Hell YEAH BOI.

This thing may be a challenging task if you try to scrap data from a dynamic webpage. But as a beginner, we will try a static page for scraping.

Difference Between A Scraper and A Crawler:

A crawler simply goes every link and page of the website rather than a subset of the page. On the other hand, web scraper focuses on a specific set of data of a website. So in short, Web scraping has a much more focused approach and purpose while Web crawler will scan and extract all data of a website

What Will We Extract ?

so, our victim page is IMDB.com. Now you are thinking, isn't IMDB a dynamic webpage? yes it is, but we are not scraping the whole website, we are just extract a specific product link's data. Like this link IMDB.com/top-movies

IMDB top movies page which shows the top 250 rated movies

So, our goal is to extract the movie names and the ratings and save this to a TXT or CSV file.

Step 1. The setup :

So, for scraping, we need three packages to start the project. Just paste the code below and install the packages into your node_modules directory.

npm i cheerio fs request

cheerio helps us to parse HTML in nodeJS. It's an affective and powerful technology used in webscraping in sever side implementation.
The FS module should be pre-installed in the node_modules if
you previously used npm init command.

Step 2. Requesting To The WEB :

We will use the request package to send and receive requests to a website.First of all, we will import all the three previously install packages using the require("packagename") syntax.

const request = require("request");
const cheerio = require('cheerio');
const fs = require("fs");

And then, we will define a new constant URL to store our website link.
Now we will create a request function. A request function which assigns 2 parameters. One is the URL you want to send request, the other is like a callback function with three parameters : error , response and body.

const url = "https://www.imdb.com/chart/top/?ref_=nv_mv_250";
// website URL for sending request

request(url , (err , res , body) => {
   if (err) console.log(err) // if something gets wrong
   else {
      console.log("request sent successfully ! ")
   }
})

So, if the URL is broken / invalid or the website server gave a "404 error" we should return err using the conditional handling method. And if you see the message in the line, that means that your request is successful .

Now we have to use the body to extract the data. so We create another function named as parseBody with a single parameter for parsing the body.

Here's the request code :

const url = "https://www.imdb.com/chart/top/?ref_=nv_mv_250";
// website URL for sending request

request(url , (err , res , body) => {
   if (err) console.log(err) // if something gets wrong
   else {
      parseBody(body);
   }
})

3. Parsing the Body :

Now, the fun part begins. The parsing or extracting the inner data from the HTML code we got from the request. We will be using cheerio to parse the HTML.

In this Blog, we will use only the basics of the cheerio package. If you want to know in depth. visit cheerio.org.

Lets create the parseBody function to play with the html body.

function parseBody(body) {
   const $ = cheerio.load(body)

   return $.html() // return the whole html body of the page
}

Here in parseBody, we load the request body to the cheerio module using the .load function.

4. Inspecting The Element You Want To Extract :

Go to IMDB and open the inspect tab. now navigate the HTML element you want to extract. Here, we are going to get the movie name including the ratings.

We will select the item of the class attributes.

so, back to the code :

function parseBody(body , callback) {
   const $ = cheerio.load(body)

  const movieName = $("tbody.lister-list").find("td.titleColumn > a").text()

return movieName

}

cheerio's selector is something similiar to jquery. You can put the class name, ID , and also other attributes.

This will return all the text elements where their className included titleColumn. We did it like a charm, but the names are returned all-together. Like this :

But we don't want this, we want it to create multiple objects that contain the value of the titleName and put it in an array.

To do this, we have to use the .each method of the cheerio package. It simply do a loop with the same name of the elements,

Here the syntax:

$("element").each(function(index) {$("child element")});

so , lets put the each method to our code:

function parseBody(body, callback) {
  const $ = cheerio.load(body);

  const movieName = $("tbody.lister-list > tr").each(function(index) {
     const movie = {

      name : $(this).find("td.titleColumn > a").text()
     }
     console.log(movie)

   })


}

Now, it will do a loop and return all the td element and put this on an object that will return later.

The result is :

Now, lets put the rating with and push the objects to a specific variable.

The final code would be :

const request = require("request");
const cheerio = require("cheerio");
const fs = require("fs");
// importing the modules

const url = "https://www.imdb.com/chart/top/?ref_=nv_mv_250";
// the url we want to scrap

request(url, (err, res, body) => {
  if (err) console.log(err);
  else {
    parseBody(body); // calls the function with body
  }
}); // sending request to the url or the webpage



function parseBody(body) {
  const $ = cheerio.load(body);  // cheerio loads the HTML body
  let array = [];
  $("tbody.lister-list > tr").each(function (index) {
    const movie = {
      name: $(this).find("td.titleColumn > a").text(), // the name of the movie
      rating: $(this).find("td.ratingColumn > strong").text(), // the rating of the movie
    };
    array.push(movie);
  });

  console.log(array);
}

result would be :

To remove the 150 more items... (that will show at the end), just simply replace the console.log(array) to :

console.dir(array , {maxArrayLength : null})

Thank you :) :)

Learn JS Object Destructor With Me

Asif — Sat, 21 Aug 2021 07:27:51 +0000

The new ES6 JS Destructor method allows to to extract properties and bind properties from objects.

It also allows you to extract several properties from a specific object and set a default value if the property does not exist.

so, let's dive in :D :D

1. Why Object Destructor ? :

Imagine you are trying to extract a property from an object and put it in a variable :

const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
}


const sugar = coffee.sugar
const coffeeBin = coffee.coffeeBin;
const milk = coffee.milk;
// pretty messy right ? 

sugar; // '3 teaspoon'
coffeeBin; // '1 teaspoon'
milk; // '100ml'

so we are making a coffee and the requirements are the properties.

Here, the property value coffee.sugar is assigned as sugar, property coffee.milk is assigned as milk.

In such a way to access properties to an object will end up with a "BoilerPlate Code". You have to call different variables for the objects property. By writing const sugar = coffee.sugar you have to mention sugar and so as the others.

Here is why Destructor Method comes to rescue you. With the method, you can assign and read variable without duplicating the property. And also , you can read multiple properties from the same object by just ONE statement !!

implementing Destructor Method:

Lets refactor the above script and put our object destructor syntax.

const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
}


const {sugar , coffeeBin , milk} = coffee
// BOOM ! 

sugar; // '3 teaspoon'
coffeeBin; // '1 teaspoon'
milk; // '100ml'

Here , the const {sugar , coffeeBin , milk} = coffee is the object destructor syntax. the coffee.sugar is defined as a new constant as sugar as well as coffee.coffeeBin , coffee.milkas coffeBin and milk.

comparing the 2 approach to access the object properties :

const sugar = coffee.sugar
const coffeeBin = coffee.coffeeBin;
const milk = coffee.milk;  // very messy

// is equivalent to 

const {sugar , coffeeBin , milk} = coffee; // ooouuh yeah !

It is visible that object destructor syntax is much more handier because neither names nor the object is duplicated.

2. Extracting A Property:

The basic syntax of object destructor is basically simple:

let {identifier} = object;

where identifier use to be the property name of the object. After destructering, the variable identifier should contain the value of the property of the object.

Lets bring the object destructuring in the example :

const coffee = {
    sugar : '3 teaspoon',
    coffeeBin : '1 teaspoon',
    milk : '100ml',
};

const {sugar} = coffee;

sugar; // '3 teaspoon'

The statement const {sugar} = coffee defines the variable sugar and initializes the variable with the value of coffee.sugar property.

Extracting Multiple Properties :

extracting multiple properties using the destructuring method is easy. To destructure the object into multiple properties, enumerate as many properties as you like adding commas , in between

const { identifier1, identifier2, ... , identifierN } = expression;

Where identifier1, …, identifierN are names of properties to access, and expression should evaluate to an object. After the destructuring, the variables identifier1, …, identifierN contain corresponding properties values.

Lets do it again with the example:

    const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
    };


    const {sugar , coffeeBin , milk} = coffee;

    sugar; // '3 teaspoon'
    coffeeBin; // '1 teaspoon'
    milk; // '100ml'

Here , const {sugar , coffeBin , milk} = coffee created three variable containing the value of the specific properties from the coffee object

4. Default Values :

If the destructured property doesn't have the value specified, it will return undefined. Lets see:

const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
    }


const {water} = coffee

water; //undefined

After returning water value , you will get undefined because the water property does not exist in the coffee object.

Fortunately, you can create new property using the distructure syntax. Here's the basic syntax:

const { identifier = defaultValue } = expression;

Where identifier is the property and the expression should evaluate to an object .After distructuring, the identifier contains the property value which assigned as defaultValue if the identifier property doesn't exists

In comparison , here is the the default value feature :

const identifier = expression.identifier === undefined ? 
                defaultValue : expression.identifier;

Let's change the sample code and create a new property of the coffee object

const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
   }

const {water = "100ml"} = coffee;

water; // 100ml

now , instead of being undefined, the constant water is default to "100ml".

5. Aliases :

If you want to use another variable name of the object property. You can use the Aliases feature of Destructuring.

const { identifier: aliasIdentifier } = expression;

identifier is name of the object property, aliasIdentifier is the variable name you would give and expression should evaluate to an object.

Here's the example of using aliases in the given sample :

const coffee = {
        sugar : '3 teaspoon',
        coffeeBin : '1 teaspoon',
        milk : '100ml',
   };

const {milk : cowjuice} = coffee;

cowjuice; // '100ml'

looking at the const {milk : cowjuice} = coffee, the destructring defines a new constant named cowjuice and assigns it to the value of coffee.milk

Summury:

There are also many things you can do with the destructuring method , like extracting dynamic property.Maybe I'll cover that up on a new blog.

The object destructuring method is a really effective syntax to extract one property or multiple property from an object value, I usually use this for extracting multiple property in just one statement and use the Aliases feature.

Hope you find the blog useful and I can clarify the basic of the destructuring syntax

6 advantages-disadvantages of learning coding.

Asif — Fri, 19 Feb 2021 13:31:42 +0000

Ok. First of all I have to say that, If you have a strict vision to be a developer. I am telling you,you are very lucky.Trust me,My name is Asif Zawad. And I am 16 years old. I am a partime web developer.
I started coding in november-2019 with python.I was messing around with the arrays, strings and some super ultra simple projects such as,print("hello world"),or a simple BMI calculator. I didn't had any vision at that time.And also I was not that creative at that time. So my journey on coding was not so long. I started doing some basics HTML,css, JS from some courses.That was the first game changer in my life. I was like,"what was I doing over the past months learning nothing but simple strings and messing around with arrays". Then I started with some simple to advanced level designs. And trust me, that was worth it.

So as my young age experiences,What are the advantages and disadvantages of learning and create a mindset on this type of work.

1.Infinity time :

You know at this age, there is not much job for us. At this age, our main job is to learn and learn and also to learn. So we have enough time to learn something else out of academic studies. We can easily manage the time in our daily schedule of doing something creative or coding.

2. Amazing tech skills :

This thing that I realized that a young kid is more skilled and a fast learner than an adult man. This is one of the biggest opportunity for young generations.They can learn many things faster than other.And also they get a clearer concept from a very small amount of time.

3. CONS, Not have much experience :

You can obviously think that a 25-30 year old developer is way more experienced than a 16-20 year old dev. This is one of the biggest opportunity for 25-30s in the marketplace and they get hired easiy.

4.learning is the passion :

I don't know that this is right.But I saw that our aged guys are more curious about how a tech works, they keep questioning "how" and "why".So this is a very good habit to for this type of career.

5. CONS, Can not attend to bootcamp or colleges :

Actually this not even a disadvantage for us. At this age, we have schools and also higher educations for various topics. And also have exams,so it is a bit hard to attend on a bootcamp ir even a college.But most of the type. We have unlimited courses and many resources out there. We can get them and learn any time,anywhere.

6. Cons, Tutorial hell :

This thing I mostly see that our aged people have experienced the concept of tutorial hell,the main reason of this thing is not having a good mentor,or a guideliner. So this is why we have to decide on our own what to do next.

I ________ for some spelling and some grammatical mistake.This ia my first blog and English is my third language.