4 Most Useful features of the Window Object

Aditya Khare — Thu, 24 Mar 2022 18:19:13 +0000

One of the main elements of JavaScript DOM is the global Window Object.
There are many useful methods and objects it provides, but some are just more frequently used than others, which is the reason of me writing this article to introduce you to the features that I found most Useful for me.
So Let's Get Started :

1. setTimeout() :

The first method that I want to talk about is setTimeout().
What this method does is basically call a certain function once after a certain time which you provide.
The method takes two arguments, A callback function and time (in milliseconds) after which you want that function to run.
Imagine if you have to display a success or error modal after submitting a Form after a certain period or if you are just working on a Project Locally and want to imitate a fetch request from an API. Well, the setTimeout() method is the way to go.

In the Example Above we ask if the user wants a custom theme for the website 5 seconds after the page is loaded.

2. setInterval() :

Many times, we want to run a function multiple times after certain intervals. setInterval() is the solution for such use cases.
The syntax of setInterval() is similar to setTimeout() as it also takes the function which you want to run and the interval in which you want the given function to run each time.
But what if you want to stop the function after certain intervals.
Well , there's also a method for just that. The clearInterval() takes the timerId or basically a variable in which the value of setInterval() is stored and stops/clears the function inside setInterval().

In the Above Example, the setInterval method updates our UI each second with an icremental value, thus forming a Timer.
NOTE :There's also a Catch with setInterval(), the function you call inside this can also take up time to execute, hence the interval you passed with the method can take up more time.
For this purpose, if you want to be precise with your delay at regular intervals. I'll Recommend using a nested setTimeout() method instead.
I could try to explain more about the why and how of both setInterval() and a nested setTimeout() in detail, but I think this article here does the job very well.

3. scrollTo()

One of the most Used window method, No website today is complete without a Back to Top button. I mean who doesn't love one such button at the footer of a website which when clicked saves you the hazard to use the Scrollbar to get back to the top of the Page. Also it makes navigating through different sections of your website easy and neat which also increases the User-Experience. With scrollTo(), you can implement this functionality with a single line.
The method takes two arguments, the X and Y (horizontal and vertical) co-ordinates of where you want to scroll to on the page.
the value cannot be negative.
Use this with

html {
scroll-behavior: smooth;
}

in your CSS for enabling smooth scrolling and you are good to go.

The above example shows a button which takes the user to the top of the Page when clicked.

4. Local Storage

This Last one is not a method but an Object with very useful methods.
How many times have you got your UI changes destroyed (removed) after reloading the Page. All your data with your hardwork to make the app work, Gone.
Therefore if you want to persist the changes you made to your website even after you reload the website, you'll need this object methods. Like all Objects LocalStorage stores key value pairs and almost all object methods work on it like any other plain Object.
It mainly uses two methods which are LocalStorage.setItem() and LocalStorage.setItem() to save and retrieve a value from the LocalStorage Object. The Earlier takes key and value as arguments while the later only takes key. The keys and values stored in the LocalStorage object can only be strings. So if you want to store objects within the LocalStorage you can use the JSON.stringify() method like below :


localStorage.user = JSON.stringify({name: "John"});

// sometime later
let user = JSON.parse( localStorage.user );
console.log( user.name ); // John

There's also a LocalStorage.removeItem(key) which removes the item from the storage by it's key.
The best Use Case for using LocalStorage in Authenticating User on the Frontend. You could just save an Authorization Token sent from an API to the LocalStorage and Retrieve it later from the minimum 2MB storage space that all modern browsers provide today.

The Window Object is like a Magic hat which has a lot of other tricks to offer. We'll talk about what other magical things it's hiding in a future Article.

Till then,

Getting started with CSS Custom Properties

Aditya Khare — Sun, 13 Feb 2022 04:54:40 +0000

Do you know that you can use Variables in Vanilla CSS without any preprocessors like SASS or LESS
Let's Find out How...

But first the question arises that Why should you even use these Custom properties when You have Preprocessors.
Well,

Why use CSS Custom Properties over SASS variables

Learning SASS for only using Variables is much of an effort, so why do it.
No need for a compiler to convert your SASS files into normal CSS.
Native, therefore fast and browser compatible.

Now, let's understand What the heck are these CSS Custom Properties.

What are Custom Properties

If you ever used a Programming language before, you know what a variable is.
If not, A variable is something that is defined once, usually at the top of the code, and then can be referenced later anywhere in the code.

So Basically, the custom properties are the variables of CSS which minimizes code repetition and saves time. The custom properties are very helpful in large projects.

In normal CSS you have to redefine a property like color or font repetitively for different elements and it is a hazard.

Well not anymore,
Define once, use anywhere from now on.
A custom property is written with a preceding -- sign before its name with no spaces and called(used) with the var() keyword.

Features of CSS Variables

Flexibility: One great benefit of Custom properties is that you can structure and combine different variables for more flexibility. Any value you can think of can be converted into a variable.

Redefining Your Variables: An Environment is like a world within itself for a code block. The Code within a environment doesn't care anything about anything outside it's environment and obeys the rules of it's own Environment.

With CSS variables, You can also redefine or change the value of a custom property with a new value within a specific element and it will work with that value in its local environment instead of the globally defined custom property.

Using calc() function with your variables: The calc() function can perform basic mathematical operations in CSS. Make your whole layout responsive by using it with predefined custom properties which helps in structuring the sizes of your elements.

You can do so much more with custom properties.
Comment how you utilize and make the best use of CSS custom properties.
This post is a result of my Twitter Thread on the Custom Properties, if you like to see more follow me on my twitter handle.

DEV Community: Aditya Khare