Forem: Atharva Shankar avhad

Javascript map() function

Atharva Shankar avhad — Thu, 15 Dec 2022 03:22:29 +0000

1. theory

The map method in JavaScript is a method that is used to create a new array from an existing array by applying a callback function to each element in the original array. This allows us to transform the elements in the original array into new elements that are added to the new array.

The general syntax for using the map method is as follows:

const newArray = originalArray.map(callbackFunction);

Here, the callbackFunction is a function that is applied to each element in the original array. This function takes in the current element being processed and returns the new element that should be added to the new array.

For example, if we have an array of numbers and we want to double each number in the array, we can use the map method like this:

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

// Double each number in the array
const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In this example, we pass a callback function to the map method that takes in a number and returns the number doubled. This results in a new array with each number doubled.

The map method is very useful for transforming arrays of data into new arrays that can be used for other purposes, such as creating HTML markup or performing calculations.

2. example

this is gonna be a straightforward names section in react. and to display names, we are gonna use the map() function.

Vs Code Zero to Hero setup

Atharva Shankar avhad — Sun, 11 Dec 2022 06:00:06 +0000

1. first of all

get Rickroll'd

The vscode is a nice editor for web dev. And the broad variety of extensions that you can use to customize Vscode code is at another tier. and the settings are bonkers. like you are just writing a little code, and you want to change a podcast but you don't want open Spotify, then just go down and click the button and boom!

2.color themes

there are soo many color themes in the vscode. like are the worst to the best and these are themes that I use (also these are sorted ranking wise worst to best).

Dracula This theme is one of the most popular themes for vscode. this theme looks nice, but its slightly off.

monokai pro

this theme is the hottest theme for vs code but in the long term, you will get bored soon.

community material this is also a very popular theme. It supports more than 6 variants. but they are all same.

Atom one dark this theme is the cleanest theme on the list. it is not too flat not too contrasty. but it's not cool as the last one.

Sweet vscode this is soo underrated theme. and this theme is the best of all. it's just 💜

3. snippets extension

ES7 React/Redux/GraphQL/React-Native snippets

a superb extension if you are using react, or just normal javascript.

tabnine very powerful intelligence for programming, not just for javascript but also for python c, c++, or anything

svelte for vs code *olny if you are using svelte

Tailwind CSS IntelliSense if you are using tailwindcss this is compulsory

prettier

5.eslint

react native tools this is not only for react native, it's also for react

Vetur

Vue Language Features

9.markdown all in one

generals 1.codesnap

2.vim

3.gitlens

5. settings (finally!)

Final words (only for blog)

Now your Vscode looks like this

The "MERN" Stack is in danger.

Atharva Shankar avhad — Mon, 05 Dec 2022 04:13:44 +0000

First of all, I'm not saying the MERN stack is going anywhere. I'm saying, the tech is moving at the speed of a flash. in around 2 years, react.js is gonna look like angular. express I don't think express is gonna get replaced, and also for MongoDB and Node JS.

1.MongoDB

MongoDB Is a pretty fun database. It's a pretty easy-to-use database. Just install a library, and you are on your way. MongoDB is pretty damn fast! There are almost no complaints about MongoDB.

Replacement for MongoDB is gonna be tuff. Soo the replacement for MongoDB is Metamask. This was very tuff. But "tech is moving at the speed of a flash". Metamask is not a database but it can hold nfts, so you know what I am talking about.

2.Express.js

The same story applies, here express is cool, it's good, and it's also pretty fast. This was a wild one. I chose Astro because it's good as express.

3.react

I am just not talking about react read my previous blogs, you will just understand it. Just use svelte. svelte is fast, easy, and reliable.

4 (and last one). NodeJS

This thing is not Replaceable.

The Stack

This Is The MASN stack, which stands for METAMASK, ASTRO, SVELTE, AND NODE JS. Better than the MERN stack.

"REACT" is dying

Atharva Shankar avhad — Sun, 04 Dec 2022 03:51:11 +0000

So.. In my some blogs. I have been discussing how react is getting bad. Like react is not fast as solid. not easy as svelte. or not reliable as Vue. react is just popular. It has been 10 years for react. soo there too much problems. Like I have been using react for just 2 years and ohh my god the problem for just update a hook frick!!.

soo decided to create this blog.

see.

too create most simple clicker game in react. you have to write this:

import {useState} from 'react';

const app = () =>{

const [count, setCount] = useState(0)

return(
<h1>{count}</h1>
<button onClick={() =>setCount(count+1)}></button>

)
}

And svelte

<script>
let count = 0;
</script>
<h1>{count}</h1>
<button on:click={count=count+1}></button>

Like most of the syntax is confusing. thing image on top is best. it explains most things about react. like how much time did take to learn react. like I took around 1 month for learning hooks, functions, props. and svelte this thing took just an hour, to master it. not because now I am familiar with learning new frameworks because svelte is easy.

also react is too slow. like I have been talking too new startups. and they are saying.

"we are not using react because its just too slow. to kill competition we need blazingly fast reload time and speed." like imagine best websites are made from react. but speed of them is just a*s .like most of the speed you can earn is from svelte.

react have a big advantage of being popular. more jobs in react, more answers for question for react and more libraries in react.
svelte is less popular. but it gaining popularity.

just try svelte. look at the chart below

so react is currently dying. react is getting bad Instead for getting better.

top 3 JavaScript one-liners

Atharva Shankar avhad — Tue, 22 Nov 2022 03:14:18 +0000

JavaScript is very fun language. Like it is more simple and superior that python, ok. I am not that python is bad, but can python do this

1. console.log(console)

console.log(console)

OUTPUT:

: 
ƒ assert()
clear
: 
ƒ clear()
context
: 
ƒ context()
count
: 
ƒ count()
countReset
: 
ƒ countReset()
createTask
: 
ƒ createTask()
debug
: 
ƒ debug()
dir
: 
ƒ dir()
dirxml
: 
ƒ dirxml()
error
: 
ƒ error()
group
: 
ƒ group()
groupCollapsed
: 
ƒ groupCollapsed()
groupEnd
: 
ƒ groupEnd()
info
: 
ƒ info()
log
: 
ƒ log()
memory
: 
MemoryInfo {totalJSHeapSize: 64942465, usedJSHeapSize: 51569489, jsHeapSizeLimit: 2095841280}
profile
: 
ƒ profile()
profileEnd
: 
ƒ profileEnd()
table
: 
ƒ table()
time
: 
ƒ time()
timeEnd
: 
ƒ timeEnd()
timeLog
: 
ƒ timeLog()
timeStamp
: 
ƒ timeStamp()
trace
: 
ƒ trace()
warn
: 
ƒ warn()

its pretty crazy. you can mess with it here is the blog for more information:thanks Jai-dewani

2. document.designMode = on

Oh my god this is the best one here. literally list can stop here.
this make your website or any website customizable.

go to youtube
inspect document and click console tab.
type document.designMode = on
and click on any text and press backspace. 4.type anything gibberish.

3(and last one). windows.open()

this is also crazy. this thing makes a browser for you. don't believe me just try it.

let win = window.open("https://www.youtube.com/@atharvashankar","my web Browser","width-300,height-300")

conclusion

these one liner can change whole website. and remember chrome can give you security warnings. but just ignore it.

bye!

check out my youtube channels:-Main,

extras,

shorts,

also check me out on hashnode :-all blogs are here also

Why React Is Bad (alternatives)

Atharva Shankar avhad — Mon, 21 Nov 2022 04:36:08 +0000

1.react is too slow

so this is not so surprising. we all know that react is slow. but this not the thing that make you stop using react. but it is not worth. imagine you spent 7 days working on a project you deployed it on netlify. and the only one response you got is "your app have Sh*t performance" just look at benchmarks

2.react router dom

I am not saying that react router is not bad.
the point is , I am saying react is used for create SPA (single page application) and you have to install third-party package to link things and creating routes. Ands its not even Facebook's package.

3.create react app

create react app is too slow. you have too wait for half an hour. like the time mind waiting. best way to create a react app is using VITE.

4.react is expensive

it costs moneys. because of server fees. react is bulky to use. take a lot of storage. if have billion dollar server this thing doesn't matter.

5(and last one). head component

see. to change the title of webpage you have to go to public folder. enter index.html and then change title. and after lot of work. closed your editor and you saw that. there is typo in title. this freaking thing is too annoying.(based on true story)

conclusion (and alternatives)

React is bad. all above points are true just try it your self.

alternatives

there is one one alternate look at image down below/

Best Design Trends for 2023

Atharva Shankar avhad — Sun, 20 Nov 2022 13:33:16 +0000

Long story shorts

I was just wandering in figma and, wondering about life

until,, I though how professional I can get While just making small changes.
so I created very simple design

so we'll gonna start list

1. minimalism

so this is just a simple design you can just make it. but this is where new programmers or designer get lost. ok for stater create a minimal file then do anything, like [color theory, glassmorphism, noemorphism , anything].

2. drop shadowing

Now this design you will use, when your doing backend only, or just programming practice ok :).
this is design is very simple. just as minimal as first one. but it looks good.

3. color theory

this just basic. I was going for a RICH design. so I use golden color. and I also needed smooth colors. so I lower saturation and contrast.

4. Images

This thing can make design make or brake. I just went to pexels.com and downloaded the photo. Its simple

5. Dark mode

Naa, I am Not going talk about it just look at it its too simple just turn background black

6. big typography

I read somewhere that big typography looks awesome. so I tested it and its pretty good.

remember keep position crazy not in center

7. glassmorphism

this is last one

this design has been trending for for around a year. to make it better add good image and video.
I Just Recommend Video

conclusion

Be Experimental

see, don't use just a single design. try mixing them. just look above and look below.

this is me experimenting dark mode and color theory

Bonus
**

add glow in dark mode

this is me experimenting dark mode, color theory and big typography

just added Glassmorphism here

Forem: Atharva Shankar avhad

Javascript map() function

1. theory

2. example

Vs Code Zero to Hero setup

1. first of all

2.color themes

3. snippets extension

5. settings (finally!)

Final words (only for blog)

The "MERN" Stack is in danger.

1.MongoDB

2.Express.js

3.react

4 (and last one). NodeJS

The Stack

"REACT" is dying

top 3 JavaScript one-liners

1. console.log(console)

2. document.designMode = on

3(and last one). windows.open()

conclusion

bye!

Why React Is Bad (alternatives)

1.react is too slow

2.react router dom

3.create react app

4.react is expensive

5(and last one). head component

conclusion (and alternatives)

React is bad. all above points are true just try it your self.

alternatives

Best Design Trends for 2023

Long story shorts

1. minimalism

2. drop shadowing

3. color theory

4. Images

5. Dark mode

6. big typography

7. glassmorphism

this is last one

conclusion

Be Experimental

Soo Be experimental

bye!!