DEV Community: Femil Savaliya

Javascript is Funny 😹

Femil Savaliya — Fri, 22 Mar 2024 10:57:54 +0000

Wierd !! JavaScript !!

Javascript is loved by many of the developers all around the world. It is backed by one off the biggest community in internet. ECMA launched many new features, solve many off the loopholes but there is something which can't be fixe now.

Let's blow our mind with this wierd behaviour of javascript and understanding logic behind it.

1. Addition of Empty Array's

[] + []
// Output: ''

The expression [ ] + [ ] in JavaScript utilizes the + operator, which is overloaded to perform both arithmetic addition and string concatenation. When the operator is used with non-numeric operands, JavaScript attempts to convert these operands to strings and concatenate them.

Let's break down the expression:

[ ] represents an empty array.
When the + operator is used with objects (arrays are objects in JavaScript), JavaScript attempts to convert these objects to primitive values for the operation. The default behavior for converting an array to a primitive value results in the array being converted to a string.
The string representation of an empty array [ ] is an empty string "".
Therefore, when you try to concatenate two empty strings ("" + ""), the result is still an empty string "".

2. Comparing Array

[] == []
// Output: false

This is because arrays are objects in JavaScript, and when you compare objects using the == (equality) operator, the comparison checks for reference equality, not value equality.

Here's a breakdown:

Each [] creates a new array object in memory.
Even though both arrays are empty and appear identical, they are separate objects stored at different memory locations.
When you compare these two arrays using ==, JavaScript checks whether the references (memory locations) of these two objects are the same.
Since the two array objects are stored at different memory locations, their references are different.
Therefore, [] == [] evaluates to false because their references do not match, despite the arrays being structurally identical.

TIP : In JavaScript, if you want to check if two arrays have the same values (value equality), you need to compare the elements of the arrays manually or use a function/library that does this comparison for you.

3. Addition of Array's with Values

[1, 2, 3] + [4, 5, 6]
// Output: '1,2,34,5,6'

Drawing from our earlier explanation of why [] + [] prints an empty string '', let's apply a similar logic to understanding why [1, 2, 3] + [4, 5, 6] prints '1,2,34,5,6'.

When you see the expression [1, 2, 3] + [4, 5, 6] in JavaScript:

Each array [1, 2, 3] and [4, 5, 6] is converted into its string representation before the concatenation. The string representation of an array is obtained by joining its elements with commas. So, [1, 2, 3] becomes '1,2,3' and [4, 5, 6] becomes '4,5,6'.
Now, you're effectively doing '1,2,3' + '4,5,6'. In string concatenation, the + operator simply joins the strings end-to-end without adding any additional separators.
The result of this concatenation is '1,2,34,5,6', where the two string representations are joined together exactly at the point where one ends and the other begins, leading to the 3 and 4 appearing next to each other without a comma in between.

4. Adding strings with prefix

'foo'+ +'bar'
// Output: 'fooNaN'

The expression 'foo' + +'bar' in JavaScript may seem a bit tricky at first, but let's break it down to understand why it prints 'fooNaN'.

'foo': This part is a string literal. Nothing complicated here.
+'bar': This might look unusual if you haven't seen it before. The + before 'bar' is a unary plus operator, which tries to convert its operand into a number. Since 'bar' is a string that doesn't represent a numeric value, trying to convert 'bar' into a number results in NaN (Not-a-Number), which is JavaScript's way of indicating that the value is not a valid number.
'foo' + NaN: Now we are concatenating the string 'foo' with NaN. In JavaScript, when you use the + operator with a string and any other type, the other type is converted to a string, and then the two strings are concatenated. So, NaN gets converted to the string 'NaN', and then 'foo' is concatenated with 'NaN'.
The final result is 'fooNaN', which is the concatenation of 'foo' and the string representation of NaN.

5. Typeof NaN

typeof NaN
// Output: 'number'

Yes, in JavaScript, typeof NaN indeed prints 'number'. This might seem counterintuitive at first because NaN stands for "Not-a-Number". However, NaN is a special value that represents a computational error or an undefined or unrepresentable value in numerical calculations. Despite its name, NaN is considered a numeric data type in JavaScript.

Here's a brief explanation:

NaN is a property of the global object, and it's a value that represents a "Not-a-Number" value. It's what's returned when you try to perform a mathematical operation that doesn't result in a specific number.
typeof operator: When used, typeof returns a string indicating the type of the unevaluated operand. The possible types it can return are: "undefined", "object", "boolean", "number", "bigint", "string", "symbol", and "function".
When you apply typeof to NaN, the JavaScript engine recognizes NaN as a value of the type "number" because NaN is technically a numeric data type, despite it representing an error or undefined numerical result.

Therefore, typeof NaN results in 'number', indicating that NaN is categorized under the "number" type in JavaScript's type system.

6. NaN must be instance of Number, Right ?

NaN instanceof Number
// Output: false

The expression NaN instanceof Number evaluates to false because of how the instanceof operator works and the nature of NaN in JavaScript.

NaN: As previously mentioned, NaN is a special numeric value representing "Not-a-Number". It's a primitive value, not an object.
Number: This is a built-in JavaScript constructor function used to create number objects when called with the new keyword (e.g., new Number(123)). When Number is used without new, it converts its argument to a number, but doesn't create a new object.
instanceof Operator: The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object. It's used to check if an object is an instance of a specific constructor function.

Now, putting these together:

NaN is a primitive value, not an object, so it doesn't have a prototype chain. Number, on the other hand, is a constructor function that can create number objects, but NaN itself is not created by the Number constructor; it's just a special value that's part of the Number type.
Because NaN is not an object and was not created using the Number constructor, NaN instanceof Number evaluates to false. instanceof is meant to be used with objects to check their prototype chain against a constructor function's prototype, which doesn't apply in the case of NaN, a primitive value.

Hence, despite NaN being a numeric type (typeof NaN yields "number"), it is not an instance of the Number object, which is why NaN instanceof Number evaluates to false.

Really JavaScript is badass

'b' + 'a'+ + 'd' + 'a' + 's' + 's'

i mean 🍌🍌🍌

baNaNass

Conclusion🧳

Javascript might be confusing sometime but it's blazing fast and easy for beginners to learn.

Happy coding! 🧑‍💻

Boost Your Efficiency: 15 Secret JavaScript Features Unveiled 🤯🚀

Femil Savaliya — Mon, 04 Mar 2024 09:05:02 +0000

Introduction😎

JavaScript, the language of the web, is constantly evolving. From the basic scripting tool it once was, it has grown into a powerhouse of features and functionalities. While many developers are well-versed in the popular aspects of JavaScript, there are several hidden gems within the language that often go unnoticed. In this comprehensive guide, we'll delve into some lesser-known JavaScript features that can enhance your coding prowess and make your applications shine.

Features🚀

1. Optional Chaining

Say goodbye to those pesky 'undefined' errors when dealing with nested objects or arrays. Optional chaining allows you to access deeply nested properties without worrying about the existence of intermediate properties.

const user = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zipcode: '12345'
  }
};

// Without optional chaining
const city = user.address ? user.address.city : 'Unknown';
console.log(city); // Output: Anytown

// With optional chaining
const cityOptional = user.address?.city ?? 'Unknown';
console.log(cityOptional); // Output: Anytown

2. Nullish Coalescing Operator

Building on the concept of optional chaining is the nullish coalescing operator, ??. This operator provides a default value for variables that are null or undefined.

const defaultValue = 'Default Value';
const userInput = null;

const result = userInput ?? defaultValue;
console.log(result); // Output: Default Value

3. BigInt

For handling large integers beyond the limits of Number, JavaScript offers the BigInt type. This type can represent integers with arbitrary precision, making it ideal for scenarios requiring precise arithmetic with big numbers.

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber); // Output: 1234567890123456789012345678901234567890n

4. Private Class Fields

If you're working with classes, private class fields offer a way to encapsulate data within a class, restricting access from outside code. This helps in creating more secure and maintainable code.

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  get value() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.value); // Output: 1

5. Promise.allSettled()

When working with promises, Promise.allSettled() is a handy method that allows you to wait for all promises to settle, whether fulfilled or rejected. This is particularly useful when you need to perform actions after all asynchronous operations are complete.

const promises = [
  Promise.resolve('Resolved Promise'),
  Promise.reject(new Error('Rejected Promise')),
  Promise.resolve('Another Resolved Promise')
];

Promise.allSettled(promises)
  .then(results => console.log(results))
  .catch(error => console.error(error));

6. Intl API

For internationalization and localization of your applications, JavaScript provides the Intl API. This powerful feature enables you to format dates, numbers, and currencies according to different locales.

const date = new Date();
const formattedDate = new Intl.DateTimeFormat('en-US').format(date);
console.log(formattedDate); // Output: 3/4/2024 (or similar based on current date)

7. Web Workers

Last but not least, let's talk about Web Workers. These allow you to run scripts in background threads, separate from the main execution thread of your web application. This can improve performance by offloading tasks that are computationally intensive.

// Create a new worker
const worker = new Worker('worker.js');

// Listen for messages from the worker
worker.onmessage = event => {
  console.log(`Received message from worker: ${event.data}`);
};

// Send a message to the worker
worker.postMessage('Hello from main thread!');

8. Dynamic Import

Dynamic Import is a feature that allows you to import modules on-demand, at runtime. This can be particularly useful for lazy-loading modules, reducing initial bundle size, and improving performance.

button.addEventListener('click', async () => {
  const module = await import('./path/to/module.js');
  module.doSomething();
});

9. Flat and FlatMap

The flat() and flatMap() methods are handy for working with nested arrays. flat() allows you to flatten nested arrays to a specified depth, while flatMap() combines mapping and flattening in a single step.

const nestedArray = [1, 2, [3, 4], [5, 6, [7, 8]]];

const flatArray = nestedArray.flat();
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6, [7, 8]]

const mappedFlatArray = nestedArray.flatMap(num => num * 2);
console.log(mappedFlatArray); // Output: [2, 4, 6, 8, 10, 12, 14, 16]

10. Array Buffer and Typed Arrays

For handling binary data, JavaScript provides ArrayBuffer and typed arrays such as Int8Array, Uint8Array, and more. These allow you to work with raw binary data in a structured manner.

const buffer = new ArrayBuffer(16);
const int8View = new Int8Array(buffer);

int8View[0] = 42;
console.log(int8View); // Output: Int8Array [42, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

11. Object.freeze()

To prevent modification of object properties, you can use Object.freeze(). This method freezes an object, making it immutable.

const user = {
  name: 'Alice',
  age: 30
};

Object.freeze(user);

user.age = 40; // This change will not take effect
console.log(user); // Output: { name: 'Alice', age: 30 }

12. Array.prototype.some() and Array.prototype.every()

Array.prototype.some() checks if at least one element in the array satisfies a provided condition.

const numbers = [10, 20, 30, 40, 50];

const hasLargeNumber = numbers.some(num => num > 30);
console.log(hasLargeNumber); // Output: true

13. GlobalThis

GlobalThis provides a standardized way to access the global object across different environments (such as browsers and Node.js).

console.log(GlobalThis); // Output: [object Window] (in a browser)
console.log(GlobalThis); // Output: [object global] (in Node.js)

14. Numeric Separators

Numeric separators allow you to make large numeric literals more readable by adding underscores.

const billion = 1_000_000_000;
console.log(billion); // Output: 1000000000

15. String.prototype.replaceAll()

Replacing all occurrences of a substring in a string is simplified with String.prototype.replaceAll(). This method replaces all matches of a specified string with another string.

const sentence = 'JavaScript is amazing! JavaScript is powerful!';

const newSentence = sentence.replaceAll('JavaScript', 'JS');
console.log(newSentence);
// Output: 'JS is amazing! JS is powerful!'

Conclusion🧳

These lesser-known JavaScript features can greatly enhance your coding productivity and make your code more elegant and efficient. Incorporate them into your projects to unlock their full potential!

Comment your favourites and don't forget to give a 🫶 if you find this blog useful.

Happy coding! 🧑‍💻

10 Amazing 🤯 react custom hooks you need to know as REACT DEVELOPER ⚛️👨‍💻

Femil Savaliya — Sun, 18 Jun 2023 05:56:52 +0000

It's been 4 years since React Hooks were introduced in version 16.8, and they're taking place over class-based components in React Js. Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.

we will explore ten amazing React custom hooks that will enhance your development workflow and improve code reusability. React custom hooks allow you to extract and share stateful logic across multiple components, resulting in cleaner and more maintainable code. Each custom hook listed below comes with a brief description and example code to demonstrate its usage. So let's dive in!

1. useLocalStorage 🧳

This hook enables you to persist data in the browser's local storage. It provides an easy way to store and retrieve values, such as user preferences or form data, between page reloads.

import { useState } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  const updateValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, updateValue];
};

2. useFormValidation 📝

This hook simplifies form validation by providing reusable logic for handling form inputs, validation rules, and error messages. It helps streamline the process of validating user input and displaying error feedback.

import { useState } from 'react';

const useFormValidation = (initialState, validate) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };

  return { values, errors, handleChange, handleSubmit, isSubmitting };
};

3. useMediaQuery 📲

This hook allows you to conditionally render components based on the device's screen size or media queries. It simplifies responsiveness and enables you to create adaptive user interfaces.

import { useState, useEffect } from 'react';

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    setMatches(mediaQuery.matches);

    const handleChange = (event) => {
      setMatches(event.matches);
    };

    mediaQuery.addEventListener('change', handleChange);
    return () => {
      mediaQuery.removeEventListener('change', handleChange);
    };
  }, [query]);

  return matches;
};

4. useDebounce 🏓

This hook helps optimize performance by debouncing expensive operations. It delays the execution of a function until a certain amount of time has passed since the last invocation, reducing unnecessary recalculations.

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
};

5. usePagination 📟

This hook simplifies pagination logic by providing state and functions to handle page navigation. It helps in dividing large sets of data into manageable chunks and improves the user experience.

import { useState } from 'react';

const usePagination = (initialPage, itemsPerPage, totalItems) => {
  const [currentPage, setCurrentPage] = useState(initialPage);

  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const nextPage = () => {
    setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
  };

  const prevPage = () => {
    setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
  };

  const goToPage = (page) => {
    setCurrentPage(Math.min(Math.max(page, 1), totalPages));
  };

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  const paginationData = {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    startIndex,
    endIndex,
  };

  return paginationData;
};

6. useDarkMode 💡

This hook enables you to implement a dark mode feature in your React application. It manages the state of the dark mode and provides a convenient way to toggle between light and dark themes.

import { useState, useEffect } from 'react';

const useDarkMode = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const body = document.body;
    if (isDarkMode) {
      body.classList.add('dark-mode');
    } else {
      body.classList.remove('dark-mode');
    }
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  return { isDarkMode, toggleDarkMode };
};

7. useKeyPress 🎹

This hook allows you to detect keyboard key presses and trigger specific actions based on the pressed keys. It is useful for implementing keyboard shortcuts or interactive features that respond to user input.

import { useState, useEffect } from 'react';

const useKeyPress = (targetKey) => {
  const [isKeyPressed, setIsKeyPressed] = useState(false);

  const handleKeyDown = ({ key }) => {
    if (key === targetKey) {
      setIsKeyPressed(true);
    }
  };

  const handleKeyUp = ({ key }) => {
    if (key === targetKey) {
      setIsKeyPressed(false);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [targetKey]);

  return isKeyPressed;
};

8. useCopyToClipboard 📋

This hook provides a simple way to copy text to the clipboard. It is useful for implementing copy functionality in your React application, such as copying a generated link or sharing content.

import { useState } from 'react';

const useCopyToClipboard = () => {
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text)
      .then(() => setIsCopied(true))
      .catch(() => setIsCopied(false));
  };

  return { isCopied, copyToClipboard };
};

9. useScrollToTop 🧗🏼‍♂️

This hook allows you to scroll to the top of the page programmatically. It is useful for scenarios where you want to provide a smooth scrolling experience, especially when navigating to a new section.

import { useEffect } from 'react';

const useScrollToTop = () => {
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);
};

10. useInterval ⌛️

This hook provides a simple way to execute a function at a specified interval. It is useful for implementing features like real-time updates or timed animations.

import { useEffect, useRef } from 'react';

const useInterval = (callback, delay) => {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };

    const intervalId = setInterval(tick, delay);
    return () => {
      clearInterval(intervalId);
    };
  }, [delay]);
};

These are just standard definitions of custom hooks, but you can always customize them as per your own usage.
Find more about custom hooks from this amazing website usehooks.
Comment down the thoughts and hooks you like most and gonna use in your next projects😊.
Thank you 🫶.

🆕Femil's Portfolio📢

Femil Savaliya — Sat, 06 Aug 2022 07:45:12 +0000

🤞What I built

Hey folks,
This is going to be the announcement of my new portfolio. I've been working on this for the last two months and I think it is finally ready to launch.

⚒️Tech stack

Framework : Reactjs + vitejs

Packages : axios, gsap, react-router-dom

😎Preview

Portfolio

👁️Screenshots

✍️Description

The landing page needs all the details you need to get to know me in the professional formats - LinkedIn, Github etc.

Fully responsive with animation & !hover effect

Component wise structure

🧑‍💻Source Code

Code

🙏Thanksgiving

I hope you like this guys 🙌.
All feedback is precious ❤️.

Create stunning profile card || HTML & CSS 👌👌

Femil Savaliya — Sun, 28 Nov 2021 05:12:00 +0000

In this blog i coverd how you can make amazing and stunning profile card.

You can use this card to showcase your skills and share your social network for contact.

No need to take a cup of coffee or tea it takes two minutes like Meggie :)

Let's design,

Folder Structure

Profile Card: - index.html; - style.css

1.HTML

Add this code into your index.html file, change name, img and links and other stuff according to your preferences



<html>
   <head>
      <title>Page Title</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <div class="main-container">
         <div class="icons">
            <ul>
               <li>
                  <a href="https://codepen.io/Femil_32/"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
               </li>
               <li>
                  <a href="https://www.instagram.com/femil_32/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
               </li>
               <li>
                  <a href="https://codepen.io/Femil_32/"><i class="fa fa-twitter" aria-hidden="true"></i></a>
               </li>
            </ul>
         </div>
         <div class="layer">
            <div class="text">
               <h4>Femil Savaliya</h4>
               <p>Web designer</p>
               <div class="skill">
                  <i class="fab fa-html5"></i>
                  <i class="fab fa-css3-alt"></i>
                  <i class="fab fa-js"></i>
                  <i class="fab fa-react"></i>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

2.CSS

Now time to give awesome look to our HTML skeleton, add the below style in your style.css file



*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.main-container{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:300px;
    height:400px;
   box-shadow:0 5px 10px rgba(0,0,0,.2); 
   border-radius:10px;
   overflow:hidden;
}
.main-container::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%; background:url("https://images.unsplash.com/photo-1552562739-152fee1f81f3?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Njd8fG1hbGUlMjBwb3J0cmFpdCUyMGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=60") center/cover;
    transition:.7s cubic-bezier(.46, 1.48, .18, .81);
}
.icons{
    position:absolute;
    right:-30px;
    top:130px;
}
ul{
position:relative;
width:100px;
height:150px;
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
    perspective:300px;
}
ul li{
    width:50px;
    height:2px;
    transform:rotateY(-100deg);
    opacity:0;
    transform-origin:right;
}
li:nth-child(1){
    transition-delay:.3s;
}
li:nth-child(2){
    transition-delay:.2s;
}
li:nth-child(3){
    transition-delay:.1s;
}
li a{
    display:block;
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    left:0;
    transform:translate(-50%,-50%);
    border-radius:50%;
    text-align:center;
    line-height:43px;
    font-size:1.4rem;
    text-decoration:none;
    color:#fff;
}
li:nth-child(1) a{
    background:#EA4C89;
}
li:nth-child(2) a{
    background:#dd2a7b;
}
li:nth-child(3) a{
    background:#1DA1F2;
}
.layer{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    transform:translateY(150px);
}
li,a,.layer{
    background:#fff;
    transition:.7s cubic-bezier(.46, 1.48, .18, .81);
}
.text{
    margin:.6rem;
    padding:5px;
font-family: 'Varela Round', sans-serif;
}
.text p{
    color:#bfbfbf;
}
.skill{
    font-size:1.7rem;
    padding-top:.5rem;
}
.fab{
    margin:0 1rem 0 0;
}
.fab:nth-child(1){
color:#E34F26;
}
.fab:nth-child(2){
color:#1572B6;
}
.fab:nth-child(3){
color:#f7df1e;
}
.fab:nth-child(4){
color:#61DAFB;
}
.main-container:hover .layer{
    transform:translateY(0);
}
.main-container:hover:before{
    transform:scale(1.1);
}
.main-container:hover  ul li{
    transform:rotateY(0);
    opacity:1;
}

3.RESULT

Demo

Drop your thought in the comment section below and Thank you for reading ❤❤

8 things every Over-Thinker needs to know ASAP 🧠

Femil Savaliya — Sun, 21 Nov 2021 08:18:54 +0000

This is going to be something different from my previous blogs. I went through overthinking during the pandemic time, and now everything is going well so far, but I decided to write something about it, so that's why I'm writing this blog.

I research about Over thinking and found these 8 tips that I can give you that put overthinking in overthinking.

Let's do it.

1. The Problem is rarely the problem.

99% of the harm is caused in your head, By you and your thoughts.
1% of the harm is caused by reality, what actually happens and the outcome.
Most of the time, the problem isn't the problem. The way you think about the problem is.

2. Avoid self-rejection.

Don't think you deserve that opportunity? Apply for it anyways.
Don't think your article is good enough? Publish it anyways.
Don't think they'll reply to your email? Send it anyways.
Never overthink yourself into self-rejection.

3. An important question.

When you start criticizing yourself for past mistakes, or seeing disaster around every corner, ask yourself: "Is there anything I can do right now to change the past or to positively influence the future."
If the answer is yes, do it - take action. If the answer is no, be at peace let it go.
You have to take action or let it go, everything else is self-harm.

4. Silence and time.

The truth is, most problems aren't solved with more thinking, they're solved with less.
You'll find most of the answers you're looking for in silence, in timeband with a clear mind.
If you can't solve a problem, stop trying to.

5. Acceptance is peace.

No amount of anxiety will change your
future, no amount of regret will change your
past.
Peace is found in acceptance:

Accept imperfection.
Accept uncertainty.
Accept the uncontrollable.

You don't have to understand, tolerate or
even forget something, but if you want peace,
you must accept it.

6. The power of now.

You're not going to overthink your way to a better future.
You're not going to overthink your way to a better past.
All you have is NOW. And what you do with NOW can make right of your past and make good of your future.
Make peace with yesterday, let go of tomorrow, grab hold of now.

7. Fact checks your own thoughts.

Your thoughts will create scenarios in your mind that reflects your insecurities, fears and worries.
So it's important to always fact-check your own thoughts before accepting them, because in highly emotional situations, your thoughts will tell you stories that aren't true.
Fact check yourself.

8. Health starts in your mind.

You can go to the gym, eat healthily, do yoga, drink water, and take vitamins, but if you don't directly confront the negativity in your thoughts, you will never truly be 'healthy'.
Our health isn't measured on scales, by the size of our muscles, or by the width of our waist.
True health is measured by the quality of our thoughts and the peacefulness of our minds. Health starts in your mind.

If you think about the above tips then you will definitely find the reason behind your overthinking and you conquer it.

Thank you for reading 💝💝, make sure you drop your through in the comment section.

Design websites || you wan't believe exist 😎😎

Femil Savaliya — Tue, 16 Nov 2021 12:06:16 +0000

There are many fantastic websites for designer on the internet.

The ones i will show you in this blog will blow you mind !!

Let’s dive into 🏊🏊

1.Happy Hues

Happy Hues is a color palette inspiration site that acts
as a real world example as to how the colors could be
used in your design projects. It's very practical.

2.Design System Checklist

Design System Checklist is An open-source checklist to help you plan, build and
grow your design system. It's highly detailed and
contains all you need to build a design system.

3.Humane by Design

Humane by Design is a resource that provides guidance for designing
ethically humane digital products through patterns
focused on user well-being.

4.UserOnboard

This website is a true gem. It's a library of different
onboarding processes by leadign companies, including
detailed breakdown and explanation.

5.scrnshts

After the app is developed, it's time to publish it on
the app store, for which you'll need some cool cover
images. This website will inspire you.

6.Figma Freebies

A curated collection of freebies for the most popular
design tool. Let's face it - who doesn't like a good freebie? I think we all 'em.

What's your favorite website from above ?? 💝💝
comment below.

Thank's for reading.

Full Stack Developer Road-map 2021 || FREE RESOURCES 🔥🔥( Front-end) Part I

Femil Savaliya — Fri, 12 Nov 2021 16:44:34 +0000

First thing first,
Do you have questions? Here's an answer

What is a full-stack developer??

A Full-Stack Developer is someone who works with the Back End — or server-side — of the application as well as the Front End or client-side.

Why Become a Full-Stack Developer??

A Full-Stack Developer, or someone who can work on both the back-end and front-end of an application, is a rare and valuable person to have on a team. It's why they can earn upwards of $120,000 a year and why companies fight to snag one for their team.

In this blog, I will cover the front-end part. Let's jump into it.

As easy as eating a burger!

If you can digest this burger, then you are good to go 🤣🤣,

Now serious, let's look at this front-end web dev languages and technologies 🙌,

1.HTML

HyperText Markup Language (HTML) is the set of markup symbols or codes inserted into a file intended for display on the Internet. The markup tells web browsers how to display a web page's words and images

HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Resources

2.CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML).

CSS describes how HTML elements are to be displayed on screen, paper, or in other media
HTML consists of a series of elements
External stylesheets are stored in CSS files
CSS saves a lot of work. It can control the layout of multiple web pages all at once

Resources

3.JAVASCRIPT

JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side scripts to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript can update and change both HTML and CSS.
JavaScript can calculate, manipulate and validate data.
JavaScript is the Programming Language for the Web.

Resources

||Frameworks||

The front-end of a website or application is the stuff visible to the user on the website. ... In addition, it includes building user-friendly interfaces and efficiently presenting the data from the back end to a user. Thus, a Front-end Framework is a platform/tool to build the front end of your website.

There are many debet on which frameworks are better, and why, but as per global user this are top five,

Best way to learn and understand each concept in deep, I recommend you to refer to the documentation of a particular framework.

Although there are more technologies for all HTML, CSS, and JAVASCRIPT that will help you to enhance your productivity and make it easy to write code if you ask me first to understand and learn the core language, then go for the framework and their technologies.

Congratulations!!! You’re now a front-end developer. 😎

All the best <p style="life:flex;">Happy Code</p>

Part II will be uploaded soon. Thanks for reading. 💖💖

Awesome Glass Card with Vanilla-tilt 🚀

Femil Savaliya — Thu, 11 Nov 2021 17:17:11 +0000

In this article, we will create a tap bar that you can use in your mobile projects. Let's first look at what are we building:

Let's code...

HTML

<div class="container">
  <div class="card card-1">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div class="card card-2">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>02</h2>
        <h3>Card Two</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div class="card card-3">
    <div class="preview">
      <h4>Hover</h4>
    </div>
    <div class="content">
      <div>
        <h2>03</h2>
        <h3>Card Three</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis consequuntur, quam officiis dolorum est reiciendis </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>

Now let's look at the CSS:

CSS

@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Poppins');
* {
  font-family: Poppins;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #161623;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#f00, #f0f);
  clip-path: circle(30% at right 70%);
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#2196f3, #e91e63);
  clip-path: circle(20% at 10% 10%);
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  flex-wrap: wrap;
  z-index: 1;
}

.container .card {
  position: relative;
  width: 280px;
  height: 450px;
  margin: 30px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

.container .card-1 .content {
  padding: 20px;
  text-align: center;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card-2 .content {
  padding: 20px;
  text-align: center;
  opacity: 0;
  transition: 0.5s;
}

.container .card-3 .content {
  padding: 20px;
  text-align: center;
  transform: translateY(-100px);
  opacity: 0;
  transition: 0.5s;
}

.container .card .preview {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all .6s;
}

.preview h4 {
  color: #fff;
  font-size: 22px;
}

.card-1 .preview h4::first-letter {
  color: red;
  font-size: 32px;
}

.card-2 .preview h4::first-letter {
  color: green;
  font-size: 32px;
}

.card-3 .preview h4::first-letter {
  color: blue;
  font-size: 32px;
}

.container .card-1:hover .preview {
  transform: translateY(-100%);
  opacity: 0;
}

.container .card-2:hover .preview {
  opacity: 0;
}

.container .card-3:hover .preview {
  transform: translateY(100%);
  opacity: 0;
}

.container .card:hover .content {
  transform: translateY(0px);
  opacity: 1;
}

.container .card .content h2 {
  position: absolute;
  top: -80px;
  right: 30px;
  font-size: 6em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.container .card .content h3 {
  font-size: 1.8em;
  color: #fff;
  z-index: 1;
  letter-spacing: 2px;
}

.container .card .content p {
  font-size: 1em;
  color: #fff;
  font-weight: 300;
}

.container .card .content a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  margin-top: 20px;
  text-decoration: none;
  background: #fff;
  color: #000;
  border-radius: 20px;
  transition: transform .2s;
  font-weight: 600;
  letter-spacing: 1.1px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.container .card .content a:hover {
  transform: scale(1.1);
  color: red;
}

Let's add some magic in javascript,
Add this script at in your head tag vanilla-tilt.

JAVASCRIPT

VanillaTilt.init(document.querySelectorAll(".card"), {
  max: 25,
  speed: 400,
  glare: true,
  "max-glare": 0.5
});

Have you done ??

DEV Community: Femil Savaliya

Javascript is Funny 😹

1. Addition of Empty Array's

2. Comparing Array

3. Addition of Array's with Values

4. Adding strings with prefix

5. Typeof NaN

6. NaN must be instance of Number, Right ?

Really JavaScript is badass

Conclusion🧳

Boost Your Efficiency: 15 Secret JavaScript Features Unveiled 🤯🚀

Introduction😎

Features🚀

1. Optional Chaining

2. Nullish Coalescing Operator

3. BigInt

4. Private Class Fields

5. Promise.allSettled()

6. Intl API

7. Web Workers

8. Dynamic Import

9. Flat and FlatMap

10. Array Buffer and Typed Arrays

11. Object.freeze()

12. Array.prototype.some() and Array.prototype.every()

13. GlobalThis

14. Numeric Separators

15. String.prototype.replaceAll()

Conclusion🧳

10 Amazing 🤯 react custom hooks you need to know as REACT DEVELOPER ⚛️👨‍💻

1. useLocalStorage 🧳

2. useFormValidation 📝

3. useMediaQuery 📲

4. useDebounce 🏓

5. usePagination 📟

6. useDarkMode 💡

7. useKeyPress 🎹

8. useCopyToClipboard 📋

9. useScrollToTop 🧗🏼‍♂️

10. useInterval ⌛️

🆕Femil's Portfolio📢

TOC

🤞What I built

⚒️Tech stack

😎Preview

👁️Screenshots

✍️Description

🧑‍💻Source Code

🙏Thanksgiving

Create stunning profile card || HTML & CSS 👌👌

Folder Structure

1.HTML

2.CSS

3.RESULT

8 things every Over-Thinker needs to know ASAP 🧠

1. The Problem is rarely the problem.

2. Avoid self-rejection.

3. An important question.

4. Silence and time.

5. Acceptance is peace.

6. The power of now.

7. Fact checks your own thoughts.

8. Health starts in your mind.

Design websites || you wan't believe exist 😎😎

There are many fantastic websites for designer on the internet.

The ones i will show you in this blog will blow you mind !!

1.Happy Hues

2.Design System Checklist

3.Humane by Design

4.UserOnboard

5.scrnshts

6.Figma Freebies

Full Stack Developer Road-map 2021 || FREE RESOURCES 🔥🔥( Front-end) Part I

What is a full-stack developer??

Why Become a Full-Stack Developer??

1.HTML

Resources

2.CSS

Resources

3.JAVASCRIPT