DEV Community: CoderZ90

5 Overpowered VSCODE Extensions! 🔥

CoderZ90 — Mon, 10 Jul 2023 03:46:21 +0000

Hey there everyone 😁, Hope are you doing good...
So....In this post, we will explore the top 5 best VS Code extensions that can supercharge your development workflow. From generating random data, javascript console in vscode and many more.

1. VSCode Random Data Generator:

Generating random data for testing or populating sample content is a common task for developers. The "VSCode Random Data Generator" extension simplifies this process by allowing you to generate random data directly within VS Code.

Whether you're building a web app or testing API endpoints, this extension saves you time and effort by automating the data generation process.

Preview:

Link to the extension: https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random

2. VSCode Snippet Creator:

Code snippets can significantly speed up your development process by providing ready-to-use code templates. The "VSCode Snippet Creator" extension is a powerful tool for creating and managing code snippets directly in VS Code.

you can easily define custom snippets for repetitive code patterns, boilerplate code, or complex structures. Organize your snippets, assign triggers, and let this extension handle the rest. Say goodbye to repetitive typing and embrace the efficiency of code snippets. 😁

Preview :

Link To Download This Extension : https://marketplace.visualstudio.com/items?itemName=wware.snippet-creator

3. Quotes Toggler:

Switching between single and double quotes in your code can be a tedious task, especially when you have numerous instances to update. The "Quotes Toggle" extension simplifies this process by allowing you to quickly switch between single and double quotes with a keyboard shortcut.

No more manual search-and-replace or editing each quote individually. This extension streamlines your coding workflow and saves you valuable time by providing a seamless quote toggling experience.

Preview:
No preview for this lol... 😂

Link to Download this Extension: https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes

4. Console Ninja:

Debugging and understanding runtime errors can be challenging, but the "Console Ninja" extension makes it easier. With this extension, you can view console.log output and runtime errors directly within your VS Code editor while running your browser or Node.js applications. This eliminates the need to switch between different tools or context. By connecting values to your code and displaying them ergonomically, Console Ninja enhances your debugging process and improves overall productivity.

Preview:

Link to Download this Extension: https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja

This extension was actually really helpful not gonna lie 😂

5. Prettier - Code Formatter

So.. Sometimes Maintaining a consistent code style across a project can be challenging, especially when multiple developers are involved. Manual formatting is time-consuming and may lead to human error. This is where Prettier - code formatter comes to the rescue.

Preview:

No preview for this... ¯_(ツ)_/¯

Link to Download this Extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Thankyou for devoting your time and reading this post :) I hope these extensions really helped you with your coding workflow and if you like my work go check out my youtube channel too i post videos there 😁
https://youtube.com/codingfire ....do subscribe :))

Create A Random Quote Generator with HTML, CSS, and JavaScript

CoderZ90 — Sat, 08 Jul 2023 04:36:48 +0000

## Introduction:
In this blog post, we will explore how to create a random quote generator using HTML, CSS, and JavaScript. We will walk through the code step by step and explain how each component contributes to the functionality of the generator.

If you are too lazy too read this like me XDDDD
Check out this video:
.
In this video i have coded the quote generator
And yeah dont forget to Subscribe :))

## HTML Structure:
Let's start by examining the HTML structure of our quote generator. We have a basic HTML file that includes a container div with a title, a quote text element, and a button. Here's the HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta tags and CSS link -->
  </head>
  <body>
    <div class="container">
      <div class="title">Quote Generator</div>
      <div class="quote_text">"In the middle of difficulty lies opportunity. - Albert Einstein"</div>
      <button onclick="generateQuote()" class="gnBtn">Generate <span id="cog">⚙</span></button>
    </div>

    <!-- JavaScript file -->
    <script src="app.js"></script>
  </body>
</html>

## CSS Styling:
To make our quote generator visually appealing, we apply CSS styles. We import the Google Fonts library to use the "Poppins" font. We define some color variables using CSS custom properties, which we later utilize in our styles. Here's the CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
/* Colors that will be used in the making of this website */
:root {
  --bg-color: #111314;
  --box-color: #1a1f22;
  --title-color: #a6a7ff;
  --gnBtnColor: #262d31;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins";
}

body {
  background-color: var(--bg-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
}

.container {
  background: var(--box-color);
  padding: 20px;
  border-radius: 10px;
  text-align: center;

  width: 500px;
}

.container .title {
  font-weight: 700;
  color: var(--title-color);
  font-size: 2.2rem;
}

.quote_text {
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 20px;
  color: #dadada;
}

.gnBtn {
  width: 80%;
  height: 50px;
  margin-top: 25px;

  background-color: var(--gnBtnColor);
  cursor: pointer;

  outline: none;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}

#cog {
  color: var(--gnBtnColor);
}

## JavaScript Functionality:
To make our quote generator dynamic, we utilize JavaScript. We define an array called quotes that stores various quotes as strings. Then, we create a function called generateQuote() that randomly selects a quote from the array and updates the quote text on the webpage. Here's the JavaScript code:

var quotes = [
  "The only way to do great work is to love what you do. - Steve Jobs",
  "In the middle of difficulty lies opportunity. - Albert Einstein",
  "Believe you can and you're halfway there. - Theodore Roosevelt",
  "Success is not final, failure is not fatal: It is the courage to continue that counts. - Winston Churchill",
  "The future belongs to those who believe in the beauty of their dreams. - Eleanor Roosevelt",
  "The best way to predict the future is to create it. - Peter Drucker",
];

let quoteText = document.querySelector(".quote_text");

function generateQuote() {
  var randomIndex = Math.floor(Math.random() * quotes.length);
  var quote = quotes[randomIndex]
  quoteText.innerHTML = '"' + quote + '"'
}

Conclusion:
By combining HTML, CSS, and JavaScript, we have created a random quote generator. The HTML structure provides the foundation for the webpage, while CSS styles enhance its visual appearance. JavaScript adds interactivity by generating random quotes and updating the quote text accordingly. Feel free to modify the code and add more quotes to customize your own quote generator.

That's it! I hope you found it helpful in understanding how to build a simple random quote generator using HTML, CSS, and JavaScript. Happy coding! 😁

**_

_**: https://www.youtube.com/@CodingFire ❤

Show me your vscode setup :)

CoderZ90 — Sat, 23 Jul 2022 05:13:13 +0000

Show me your vscode setup, interested in seeing your pro setup for developement

My setup:

Theme: Dainty - One Dark Pro
font: Fira Code

Make your VSCode Look Clean!

CoderZ90 — Fri, 20 May 2022 10:42:09 +0000

Let me tell you a thing when i downloaded vscode i was satisfied by it but then it became boring so i started discovering new themes, new vscode icons, etc.. but nothing really satisfied me and i bet this happened to you too (most of you)

but one dayyy i finally got a perfect vscode theme + icons combo and here it is

Font - Cascadia Code

Theme

The theme is Vitesse theme made Anthony Fu

Theme Github - https://github.com/antfu/vscode-theme-vitesse
Theme Link - https://marketplace.visualstudio.com/items?itemName=antfu.theme-vitesse

File Icons

The File Icons i am using is vscode icons made by vscode team

File Icons Github - https://github.com/vscode-icons/vscode-icons
File Icons Link - https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Product Icons

Product icons are these icons on the left side

The Product Icons i am using is Carbon Product icons made by Anthony Fu too

Product Icons Github - https://github.com/antfu/vscode-icons-carbon
Product Icons Link - https://marketplace.visualstudio.com/items?itemName=antfu.icons-carbon

Important

Make sure to use this settings to have the best experience

Settings ( personal ) - https://gist.github.com/CoderZ90/7a1956d4f6e236a166e132e98a650edf

I hope you loved it, please like this post and follow me for more

also subscribe to my youtube channel for great content - https://youtube.com/codingfire?sub_confirmation=1

Build WEB 3.0 Login With Metamask | MORALIS AND REACT JS

CoderZ90 — Sat, 26 Feb 2022 03:31:01 +0000

## Introduction

As you all know that web 3.0 is the new technology for the year 2022 and web 3.0 devs are earning a lot and the demand for web 3.0 developers is also increased.

So in this small video you will learn about web 3.0
this video gives you an idea on how you can create a simple login page using web 3.0, metamask and with moralis authentication.

Trust me it is a very great and helpful video. most of the web 3.0 applications you will require a login page, so in this video i open you the door to web 3.0

Before Getting Started

So before starting this project you must do these steps

Install Metamask extension in your browser
Create and setup your Moralis account

Links will be required

Moralis Link - https://moralis.io
React Moralis DOCS - https://docs.moralis.io/moralis-server/tools/react-moralis

And finally here is the tutorial video to start coding and making your project

Thankyou

thankyou so much for reading this blog and i hope that you liked it also if you want more of this blogs and tutorial videos make sure to (Subscribe)[https://youtube.com/codingfire?sub_confirmation=1] to my youtube channel and follow me

SUBSCRIBE 💗 - https://youtube.com/codingfire?sub_confirmation=1

Source Code (Github) - https://github.com/CoderZ90/web3.0-login

Please help me 🙏😊

CoderZ90 — Sun, 05 Dec 2021 15:53:34 +0000

Hello guys, yes from title you already know what i wanted to say. Guys please help me grow in youtube i want to help people share my knowledge and i also want to be big youtuber + a great coder in my life

Subscribe please 🙏🙏 - CodingFire

About me - I am a 14 years old coder.

I want to share 🎇 my knowledge with you and wanted to help you with my tutorials i made. Want to make things easier for you .

This small things can help you with your big projects Thanks for giving your time 😊

Previous Blogs ( Might Help You ) -

Anyways, Happy Coding And Yes Be Safe! 😊

Dev.to Code Problem ?

CoderZ90 — Thu, 02 Dec 2021 08:38:07 +0000

Hello guys this thing is showing in my dev.to website when i open it is it for me or is it showing for others also ?

Youtube Video - On How to create a rickroll website

CoderZ90 — Tue, 30 Nov 2021 03:40:13 +0000

Only for educational purposes

As you know there are a lot of people rickrolling each other. Hahaha using the youtube link but we developers use the power of coding to rickroll

So in this video we are gonna create a rickroll website using html, css and javascript

Expected in the website :- When the user goes to the website it shows the loader for 4-5 seconds [loader is the best option to make the person stay on the website] and then goes to the youtube rickroll page and Boom! rickrolled

Here is the video on how to create a rickroll website using Html, css and javascript - https://www.youtube.com/watch?v=isTfYeKUL_c&t=118s

Written Tutorial -

HTML File -

here we basically create one div with the class of loader
and then we are just gonna style it. Create a css file and link it to your html file or you can use internal css [thats nothing but using css in the html file] too

   <!-- Only for educational purposes 😊 -->
  <!-- lets make loading so that user stays on the website -->
  <div class="loader"></div>

CSS File -

here we puts a little dark white background to our website and then center our loader to the center and then we make our loader in circle shape after doing this much stuff we use border-top-color: transparent to make our loader top transparent color (it looks cool). and then we use keyframes to animate it and make it move in circle at one position :D and our CSS is done Noice!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f1f1f1;
}
.loader {
  border: 10px solid #222;
  width: 80px;
  height: 80px;
  /* bringing to middle */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border-top-color: transparent;
  /* addding spin */
  animation: spin 0.7s linear infinite;
}
/* i am stoping the animation for now */
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Javascript File:-

Now the main part, in here we are setting a time of 4 seconds in our webpage and when the time is completed/over then we will redirect our website to the youtube rickroll video and thats all we need to do.

The main code which does the work is this - window.location.href="https://youtu.be/dQw4w9WgXcQ"; this command redirects it to the youtube link we put there and Boom!

  <script>
    // also we need to make the O small
    setTimeout(() => {
      window.location.href="https://youtu.be/dQw4w9WgXcQ";
    }, 4000);
    // 4000 = 4 seconds ( 1000 = 1 second)
  </script>

I hope you like this blog and had fun making this.

Also dont forget to subscribe 🙏💖🙏 - https://youtube.com/codingfire?sub_confirmation=1

Stay safe and be happy. 😊🙏

Making the chrome dino game play itself using Javascript

CoderZ90 — Tue, 23 Nov 2021 09:46:46 +0000

Hello, guys in today's blog we are gonna hack chrome dino ( automating it ) using javascript

Chrome dino game is made by Google. this game is available in chromium based browsers like brave, chrome, edge and other browsers out there

you can play this game by turning off your internet/wifi or going to chrome://dino 😊

Anyways lets automate it

Watch this video to get better understanding
https://www.youtube.com/watch?v=r0b4j8JUVUc&t=236s

first we make a function with the name autoPlay()

Note (these are the objects in the chrome dino game) :-

------ DINO ------
tRex - Is the DINO

------ CACTUS ------
CACTUS_SMALL - is the smallest cactus
CACTUS_LARGE - is the largest cactus

------ BIRD ------
The name of the bird is pretty hard 🤣
PTERODACTYL - the bird

In the code i have given comments and tried to explain you each line of code :)

function autoplay() {
  setTimeout(function () {
    myinstance = this.Runner.instance_;
    myobstacles = myinstance.horizon.obstacles;

    // if my tRex is ducking then
    if (myinstance.tRex.ducking) {
      // make my tRex to duck
      myinstance.tRex.setDuck(true);
    }
    if (myinstance.crashed) {
      //   When the game is over then
      console.log("Game Over... Paste the code again to automate the game");
      return;
    }
    if (myobstacles.length > 0) {
      action = "JUMP";
      obstacle_type = myobstacles[0]["typeConfig"]["type"];

      // Defining which action to perform if it match the following cases
      if (obstacle_type == "CACTUS_SMALL" || obstacle_type == "CACTUS_LARGE") {
        action = "JUMP";
        // i know its a hard name ( actually PTERODACTYL its the bird )
      } else if (obstacle_type == "PTERODACTYL") {
        if (myobstacles[0]["yPost"] == 75 || myobstacles[0]["yPost"] == 50)
          action = "DUCK";
      }

      // Making the action work
      if (myobstacles[0].xPos <= 100) {
        console.log(myobstacles[0]);

        // Perform the action
        if (action == "JUMP") {
          console.log("Jumping.. Yahoo");
          // we get the current speed of our dino
          curr_speed = myinstance.currentSpeed;
          // then making it jump
          myinstance.tRex.startJump(curr_speed);
        } else if (action == "DUCK") {
          console.log("Ducking.. Oo");
          myinstance.tRex.setDuck(true);
        }
      }
    }
    autoplay();
    // setting the timer for 20 mili seconds
  }, 20);
}
console.log('Done.. Automated the game, Now Start')
autoplay();

And Voila! we are done 😀👍 so i hope you guys enjoyed this blog and had fun! Have a nice day and be safe guys 💖

Dont forget to subscribe to my youtube channel for more amazing videos - https://youtube.com/codingfire?sub_confirmation=1

Opensource Covid Tracker - India

CoderZ90 — Wed, 17 Nov 2021 04:00:08 +0000

Live Website - https://covid-tracky.vercel.app

Hello, Welcome to this blog about the my covid tracker website CovidTracky an alternative to covid19india.org. This website aims to provide you the latest and the most accurate data for covid19 cases. I do this because it affects all of us. Today its someone else who is getting infected; tomorrow it could be me, who knows. We need to prevent the spread of the virus. We need to document the data so that people with knowledge can use this data to make informed decision.

The data for covid19 cases is provided by The Indian Institute Of Hydrebad used for getting updated covid19 cases.

About me

I am a 14 years old developer who wants to be the best developer on this planet. I maintain and made this website ( using the source of covid19india.org ). Thanks to covid19india.org team for their outstanding work in creating the original portal, and for making their code base public

5 Best Javascript Projects Ideas

CoderZ90 — Tue, 26 Oct 2021 03:27:11 +0000

1. Create A Markdown Editor

A Markdown editor is an intuitive and lightweight text-to-HTML conversion tool for web content writers. You can use it to format lists, headers, and for emphasis, as well as to incorporate links and images. The idea is to produce web content that is as easy to read as plain text.

It is very easy to create you can you use library if you want to.. 👍

2. Build A Code Editor

A Code Editor is a special text editor program designed to write and edit source code and computer programs. It helps programmers write and edit source code and programs easily by differentiating elements and in-built routines

if you have doubt that how you can create i will give you a hint. you can use a library called "Ace.js" to create it

Ace.js CDN Link 🔗 - https://cdnjs.com/libraries/ace

Video Tutorial On How to create A Code Editor - Click Here

3. Build A Screen Recorder

Building a screen recorder is a very good project to build and you can easily build it using html css and javascript without using any backend ( if you think it uses ). i also recently made on and thought to post it to my youtube channel that how we can create it

Video Link - Part 01
Video Link - Part 02
Video Link - Part 03 will be out soon

4. Build A Notes App

Building a notes app, is very useful and a great project you can save your notes in this web app and you can also use localstorage to save notes in the website, add a dark mode / light mode button and more to make this project greater

Addition Features you can add are :-

Use firebase to store / save notes and users in the website ( using firebase database or any other thing )
Mark a note as Important
Deploy The Website

5. Build A Website Using Html, CSS & JS ( College website with firebase login / logout system )

Now this is a big project to make and it can take a lot of time ( not a lot kinda maybe 3 days maximum [depends on you btw] ). you can add login system in this website and registration and connect it to a database to store user and its data. you can add study materials, quiz in this website & many thing etc..

So i hope you liked these projects. and also Don't forget to subscribe 😀

Subscribe - i post coding tutorials

Top 5 Best Online Code Editors

CoderZ90 — Tue, 19 Oct 2021 07:02:20 +0000

Hello Guys 👋 In this blog post i will tell you the top 5 best online code editors (No Downloads!).

Before we move further please subscribe to my youtube channel ( i post coding tutorials ) - https://youtube.com/codingfire?sub_confirmation=1

No 1. Stackblitz

Stackblitz claims to be the fastest, most secure
dev environment on the planet and in my opinion it is actually very fast.. Stackblitz is also very easy to use.

Website Link - https://stackblitz.com/

No 2. Codesandbox

Codesandbox it is pretty famous and i guess many of you who know this website right ?. But for those who dont know let me tell you. it is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.

The best part of codesandbox is that codesandbox is not only available for pc but also for tab / android devices. Good thing right ? 😊

Website Link - https://codesandbox.io/

No 3. Replit

Replit allows users to write code and build apps and websites using a browser. Not only apps and websites but you can also code python in the browser and more. The site also has various collaborative features, including capability for real-time, multi-user editing with a live chat feed. Coooolll...

Website Link - https://replit.com/

No 4. Codepen

Now codepen is not just an online code editor. in codepen you can also share your projects with others, discover other projects, follow each other, fork pens and more

Website Link - https://codepen.io

No 5. Jsfiddle

JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'.

Website Link - https://jsfiddle.net/

So i think all done. Thankyou for giving your time and reading this blog i hope you liked it

Also dont forget to subscribe to my youtube channel 😊 - https://youtube.com/codingfire?sub_confirmation=1 🙏