DEV Community: Kaustav Banerjee

Glam up your form using vanilla js!!

Kaustav Banerjee — Sun, 31 Mar 2024 19:49:34 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I've built an interactive form panel using CSS and Vanilla JS . Already provided with an HTML snippet for the form,I've added a nice simple UX for an user filling the form.

Demo

Code

kaustav1810 / Glam_My_Markup

Please view the live demo here !!

Journey

I learnt about many new CSS pseudoselectors such as :not ::after, ::before among many others. Also I learnt about new dom manipulation techniques using vanilla js for add/update elements in the DOM TreeNode.

Dev username: @kaustav1810

Turn a chicken wrap into css art!!

Kaustav Banerjee — Mon, 25 Mar 2024 16:53:54 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Who doesn't love a nice juicy mouth melting chicken wrap! We know it's absolutely delicous and to increase your appetite even further take a sneak peek here at how I turned a chicken wrap to css art! wohoo!

Demo

Code:

kaustav1810 / CSS_Art_Challenge

Live: https://kaustav1810.github.io/CSS_Art_Challenge/

Journey

I learned about animation keyframes in vanilla css and also how to manage transitions.Proud of making this without writing a single line of Javascript(crazy ikr!!). Hoping to keep sharpening my css skills by building similar small projects and participating in challenges.

Dev username: @kaustav1810

All you need to know about Hoisting in Javascript

Kaustav Banerjee — Mon, 28 Dec 2020 15:35:46 +0000

Introduction

Hi All,this is my 3rd blog.Really enjoying sharing my learning
through these blogs.This is my first blog where
I am covering a purely technical topic!

Javascript works very differently than many other programming languages.
In certain aspects it works completely different than any other languages!.There are many typical concepts in JS and 'Hoisting' is just one of them.Here in this blog I have talked about
how JS works in depth and what hoisting exactly is!

The Execution Context

Before we move on to 'hoisting',let us first understand what JS Execution Context is.
I am sure many people are not aware of what it is.
As a matter of fact,I did'nt know that such a thing existed until
a few days back!!

The Execution context is the heart of any JS program!! Even before our program starts it's execution,the execution context gets created in two phases:

The Memory Creation Phase
The Code Execution Phase

Let us see with a visual aid what this means.

In the memory creation phase,memory is allocated to the variables and functions.In case of variables 'undefined' is allocated and in case of functions,the whole function definition itself.Refer to the below code snippet.

What happens even before the above program starts executing?Well this is the state of the execution context before program execution.

As discussed the variables 'a' and 'b' are assigned 'undefined'(which may be regarded as a placeholder) and the 2 functions fun1() and fun2() are assigned their own function definition only.All this happens in the memory creation phase.

In the next step,i.e. in code execution phase when fun1() and fun2() gets called,a brand new execution context gets created in the code area of the global execution context.These two child execution contexts also have the memory and code
phase as shown below.

As in global execution context,here also memory gets allocated for the local variables,parameters belonging to each function.If any nested function is present then the whole function definition is assigned to that particular function.

Let's see what happens next.This is getting interesting already!

The functions were called with arguments(a & b).So at first 'undefined' was stored in place of 'x' and 'y',but in the next step the actual value gets allocated as shown below.

After each function gets executed,the individual child execution contexts gets destroyed and control comes back to the parent execution context from where the functions were invoked(the global execution context in this case).

Finally at the very end after program finished execution,the global execution context itself is destroyed and popped out from the call stack.

Eww! Call Stack!? What is that!??

Well,the call stack is where JS stores the different tasks to be performed in a particular program one after another.Call stack maintains the order of execution of execution contexts.For our example program,the call stack would be something like this:

At first the global execution context gets pushed into the stack as it is the starting point of the program.Then execution contexts of fun1() and fun2() are pushed respectively.

This was all about the execution context.I know it's quite a lot at first but it is important to know before jumping into 'hoisting'.

Hoisting

Now that we have seen what Execution Context is,let's deep dive into hoisting in JS.There is a common misconception that hoisting means variables are moved at the top of the program or something.This is not true! Nothing gets moved to the top/bottom by JS!! It's all the magic of execution context!!

Refer to the above code snippet.What do you think will be the output?
.
.
.
.
Surprise! Surprise! The output is:

inside fun1!!
undefined

Now why is that you may be wondering,well if you remember our good old friend execution context,even before the program starts execution, fun1() is assigned it's function definition and variable 'x' is assigned 'undefined'.So when fun1() gets called before initialization,it works perfectly....but printing 'x' gives 'undefined'.

Let's see another scenario...can you guess what happens in this case?

Well it prints 'undefined' for 'x' but then when fun1() is called it throws 'TypeError'.This is because fun1 here acts like a variable only and thus initialized 'undefined' just like 'x'.

This is it! yes,this is only hoisting.All you have to understand is the execution context and that's all!!

Well, you might now say that hoisting does not work on all JS objects.Like,'let' and 'const' are not hoisted.Well,that is somewhat true and there is a reason behind that.

Let's see the different type of JS variables!!

Let vs Var vs Const

As many of us know,there are three types of JS variables(let,var & const).
While 'var' was there from beginning, 'let' and 'const' were introduced few years back to avoid this issue of hoisting.

var: This is simple.When a variable is declared with keyword 'var',it gets attached to the global scope(the 'window' object).They can be reinitialized any no. of times and are hoisted.
let: variables declared with 'let' are a little more strict.Redeclaration of these variables are stricly 'NO NO!' and will result in SyntaxError.Also these variables are not attached to the global scope but in a separate scope alltogether(also referres to as the 'block scope').
const: This is pretty much similar to 'let' only.Only that,unlike 'let' variables which can be initialized later,'const' variables must be initialized at the time of declaration only and can't be reinitialized.This is also not present int the global scope but in a different scope like 'let'.

Hoisting in 'let' and 'const'

Since 'let' and 'const' are present in a different scope alltogether,hoisting does not work in a similar way like with 'var' variables.

Why does this happen?Well here also both 'a' and 'b' are assigned 'undefined' in the execution context.But since both are being accessed before initialization,they result in ReferenceError.

But with 'var' it was giving 'undefined' right? Not any 'ReferenceError'!

Yes,and that's because for the time between the declaration of 'let' and 'const' variables till the time they get initialized,they are in so called 'Temporal Dead Zone' and thus inaccessible.As a result when we try to access these
during temporal dead zone,it results in the famous 'ReferenceError'.

It's always a good practice to keep your initializations at the very top of your program to avoid any unforeseen error.

Conclusion

Wow!! This was heavy!!😅 haha!! I hope it was helpfull to some extent.When I first learnt 'hoisting' I learned it in a very wrong way.Don't want anyone to face the same! Just remember nothing gets hoisted to the top or anywhere!! It is just the execution context.

Hope you liked this.In my next blog I will try to cover another important concept in JS.Until then goodbye and thank you for taking the time to read!😊

Beginners guide to programming

Kaustav Banerjee — Mon, 09 Nov 2020 07:44:52 +0000

Introduction

Hello,this is my second post.And in this one I have decided to talk about programming.Nothing in particular,just how you can start learning to code as a complete beginner.
Well let’s be very frank,programming is difficult.As a matter of fact any new thing seems difficult at the beginning right?For someone like me even making poached egg can be difficult simply because I don’t visit my kitchen very often(except for munching on things from the fridge 😂).Anyways,the point is you will be good at something only when you are doing it on a regular basis.

Why you should code?

Yes,you read that right.Let’s talk about why one should be familiar with atleast the basics of programming even if he/she is not looking to choose a developer career.Well…coding is everywhere.Be it the social media you are scrolling on your smartphone(not to mention the smartphone itself!) or even the washing machine/air conditioner in your home.Everything is operating on some prewritten set of instructions(program) telling the machine what to be done. Infact the very website you are reading this blog on is running on code!
As I mentioned,even if one chooses to never touch code again, learning about it can still be helpful. Everyone will be using technology in one way or other no matter what he/she wants to do in the future, and understanding how technology is created and developed is important. Do you want to make video games? Learning to program is a great start. If you want to be an artist, being able to create your own beautiful portfolio website can be helpful. There are lots of jobs that can use coding skills,but one can also make a program just for fun!

Where to start?

This is possibly the most burning question among beginners.Where to possibly start!? There are so many resources be it youtube,online sites(like GFG,tutorialsPoint etc.) or even books! My answer would be a book(considering you are a beginner and looking to learn your first language!).There are many good books available which can get you started on any particular language you are looking to learn.Once you learn the basics you can then refer the internet for learning any additional topics on the way.

How can you practice?

As I have mentioned,once you get comfortable with the syntax, try solving some very basic problems(textbook problems) like finding prime nos within a range or maybe finding the max/min element in an array.Write down the algorithm if you feel uncomfortable with writing the full code straightaway.Once you have figured out the steps to solve the problem,you can then easily wrap it inside syntax.
Now don’t just stop there! Take a sample input,go through each step of your code and check on pen and paper whether your code gives the correct result(often called dry running the code).

Now if you feel you are done and can move on to solving the next problem…that would be a mistake.Always and I repeat always run your code on your machine even if you feel pretty confident about the code you wrote.

How to be good at this?

Well let us talk about a scenario first.Manu(fictional) a class five student is very afraid of Maths.Though he is able to manage other subjects, but somehow Maths tends to slip out of his grasps. To overcome this difficulty,his trainer proposed a quite simple solution. He asked him to do only two problems per day.But to do it everyday!. Manu listened to his trainer and very soon he could see the benefit himself! within a few months he started loving Maths more than any other subject!

I hope you got the point.It’s not about whether you are able to solve the next difficult problem on the internet, but on solving two simple problems everyday. But to keep on doing it everyday! that’s the most important part. Consistency is the key and being good at something,anything requires enough practice.Right?

While running code on your machine,you may wonder what might be the output if line X was omitted,or what if variable X was used instead of Y?Do that change and observe the output.Just by tweaking your code here and there you will be able to learn many concepts around your code!!

“For the things we have to learn before we can do them, we learn by doing them.” ― Aristotle

Conclusion

I hope this helped.Learning a new language can be very daunting and definitely difficult.But all you need to do is interact with it on a daily basis to overcome your fear! Just Do it!As a popular commercial says.

Feel free to drop a message if you liked this one! In my next blog I will try to talk about something more technical. Until then goodbye!🤗

Building Projects vs Doing the next online course.What should You Do?

Kaustav Banerjee — Fri, 18 Sep 2020 16:01:36 +0000

Hello All! This is the first time I am writing a blog!! This is completely new to me which makes it more interesting!!!
Coming to the point straightaway,recently I have seen students debating over whether to do online courses on sites like Udemy,Coursera, Udacity etc. or to build projects on their own in order to gain a new skill. While this is a very common confusion among students let’s talk about the aspects of both.

Online Courses

Let’s talk about online courses.While sites like Udemy,Udacity etc. were already there from before, the online learning curve has seen a steep rise in this pandemic.While people are in their home,everyone is looking to use these sites to their advantage for learning new skills.Be it learning a new language or mastering the new framework currently in the market… curated courses are there for everything you are looking forward to learn!

CAN ONLINE COURSES MAKE YOU A MASTER?

Well…truly you cannot be good at anything unless you give it a try.Online courses are good enough to introduce you to libraries, frameworks,the basics of a language.But unless you yourself go out there and explore more on your own it won’t benefit much.

ARE ONLINE COURSES WASTE OF MONEY THEN?

No of course not.But learning every new course out there just for the sake of certificates definitely is.The job of these sites is to lure you into buying courses which sometimes may not be very useful for you.You yourself have to figure out what exactly you need which will help you get the initial boost.

Building Projects

As I was saying earlier,no matter how many courses you get yourself enrolled into,if you truly want to master something,practice is the only key.
Building a project from scratch truly helps in strengthening your concept.You encounter thousands of difficulties…you search for the correct solution… you learn a lot of other things along the way.That’s how it should be.
After completing a course,instead of jumping into another,take some time.Build something with what you have learnt.Read the docs of the library/framework you came to know about in the course.If a project was built in the course improvise on that.Knowledge is not much of use if you are not applying it.

WHAT SHOULD I DO THEN?

Do what suits you better.Some people are pretty comfortable going through the documentation and building something from scratch right from the start,others(including me) find a course more helpful to begin with.Totally depends on you.

Thoughts

I think I have made my point.While courses can be helpful to get you an introduction,only practice can make you better day by day.

At the end of the day only one thing matters.PRACTICE!

Woah! It’s been quite a long post.Hope you liked it.Feel free to drop a message if you did.

DEV Community: Kaustav Banerjee

Glam up your form using vanilla js!!

What I Built

Demo

Code

kaustav1810 / Glam_My_Markup

Please view the live demo here !!

Journey

Turn a chicken wrap into css art!!

Inspiration

Demo

Code: kaustav1810 / CSS_Art_Challenge

kaustav1810 / CSS_Art_Challenge

Live: https://kaustav1810.github.io/CSS_Art_Challenge/

Journey

All you need to know about Hoisting in Javascript

Introduction

The Execution Context

Hoisting

Let vs Var vs Const

Hoisting in 'let' and 'const'

Conclusion

Beginners guide to programming

Introduction

Why you should code?

Where to start?

How can you practice?

How to be good at this?

Conclusion

Building Projects vs Doing the next online course.What should You Do?

Online Courses

CAN ONLINE COURSES MAKE YOU A MASTER?

ARE ONLINE COURSES WASTE OF MONEY THEN?

Building Projects

WHAT SHOULD I DO THEN?

Thoughts

Code:

kaustav1810 / CSS_Art_Challenge