DEV Community: Shivam Singh

7 Advanced TypeScript Concepts Every Developer Should Know

Shivam Singh — Mon, 04 Nov 2024 05:20:53 +0000

TypeScript is a powerful superset of JavaScript that adds static typing and other features to improve the development experience. While many developers are familiar with the basics, mastering advanced TypeScript concepts can significantly enhance your ability to write robust, maintainable, and scalable code. Here are 10 advanced TypeScript concepts every developer should know.

1. Union Types

Union types allow a variable to hold one of several types, giving you the flexibility to handle different data types while still keeping things type-safe. It's like having a multi-tool 🛠️ that can handle different tasks.

Example 1:

let value: string | number;

value = "Hello";
console.log(value); // "Hello"

value = 123;
console.log(value); // 123


Example 2:
type status = "review" | "published" | "expired";

function getJobStatus(status: status): string {
  switch (status) {
    case "review":
      return "Job is on Review";
    case "published":
      return "Job is Published";
    case "expired":
      return "Job is Expired";
    default:
      return "Unknown status";
  }
}

2. Intersection Types

Intersection types combine multiple types into one, requiring a variable to have all the properties of the combined types.

interface Person {
  name: string;
  age: number;
}

interface Employee {
  employeeId: number;
}

type Developer = Person & Employee;

const emp: Developer = {
  name: "Alice",
  age: 25,
  employeeId: 12345
};

console.log(emp);

In this example, we’ve defined two types, Person and Employee, and then used an intersection to create a Developer type that combines both Employee and Person properties. This represents a developer's identity and role in the organization.

3. Type Guards

Type guards help you narrow down the type of a variable within a conditional block, ensuring type safety. Think of them as security bouncers 🚨 at a nightclub, letting only the right types in.

Example

function isString(value: any): value is string {
  return typeof value === "string";
}

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed());
  }
}

printValue("Hello"); // "HELLO"
printValue(123); // "123"

Type guards: because we all need a little security in our lives.

4. Conditional Types

Conditional types allow you to create types based on conditions, offering powerful type transformations. It's like a choose-your-own-adventure book 📚.

Example

type IsString<T> = T extends string ? "Yes" : "No";

type Result1 = IsString<string>; // "Yes"
type Result2 = IsString<number>; // "No"

Conditional types are incredibly powerful, allowing you to create dynamic and flexible types based on conditions.

5. Mapped Types

Mapped types let you transform existing types into new ones by applying a transformation to each property.

Example

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Todo {
  title: string;
  description: string;
}

const todo: Readonly<Todo> = {
  title: "Learn TypeScript",
  description: "Study advanced concepts"
};

// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.


type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

interface User {
  id: number;
  name: string;
  email: string;
}

type NullableUser = Nullable<User>;

type NullableUser = {
  id: number | null;
  name: string | null;
  email: string | null;
};

// In this example, Nullable transforms each property of User to also accept null.

6. Template Literal Types

Template literal types let you create types by combining string literals, making your type definitions more expressive.

Example

type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";

type Theme = `${Brightness}-${Color}`;

const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";

// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.

Template literal types allow you to define a Theme type that must follow the pattern of Brightness-Color. It's like giving your types a style guide to follow.

7. Recursive Types

Recursive types are types that refer to themselves, allowing you to model complex data structures like trees and linked lists.

Example

Creating a recursive type for a tree structure:

interface TreeNode {
  value: number;
  left?: TreeNode;
  right?: TreeNode;
}

const tree: TreeNode = {
  value: 1,
  left: {
    value: 2,
    left: { value: 3 },
    right: { value: 4 }
  },
  right: {
    value: 5
  }
};

Recursive types: because sometimes you need types that go on forever, like an infinite loop (but in a good way).

Conclusion

TypeScript is a powerful tool, and mastering these advanced concepts can make your code more robust, maintainable, and just plain awesome. As you continue to explore these advanced features, you'll find that your code becomes more concise, your type definitions more precise, and your overall development workflow smoother.

Additional Resources

Happy coding! 🎉

What is JavaScript

Shivam Singh — Wed, 10 Apr 2024 05:55:57 +0000

🚀 Introduction to JavaScript

JavaScript is a powerful programming language that brings interactivity to websites. From validating forms to creating animations, JavaScript plays a vital role in modern web development.

💡 Fun Fact:

JavaScript was created by Brendan Eich in just 10 days while working at Netscape Communications Corporation in 1995.

JavaScript is a versatile language that can be used for both client-side and server-side development. It's the backbone of dynamic web applications, allowing developers to build responsive and interactive user experiences.

🌟 Did You Know?

JavaScript is not related to Java. Despite the similar name, they are entirely different programming languages.

🚀 Variables

In JavaScript, variables are containers for storing data values. They are declared using the let, const, or var keywords and can hold various data types such as numbers, strings, booleans, arrays, and objects.

💻 Code Snippet:

// Example: Declaring and initializing variables
let userName = 'John';
const age = 30;
var isAdmin = false;

🚀 Functions

Functions are reusable blocks of code that perform a specific task. They can take inputs, called parameters, and return outputs. Functions are fundamental to JavaScript programming and enable developers to organize and modularize their code effectively.

💡 Tip:

Always name your functions descriptively to indicate their purpose and what they do.

🚀 Control Flow

Control flow statements, such as if, else, for, while, and switch, enable developers to control the flow of execution in their JavaScript code. They allow you to make decisions, iterate over data, and handle different scenarios dynamically.

🔍 Example:

// Example: Using if-else statement to check a condition
let age = 25;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Of course! Here's an additional Instagram post idea with a code snippet example for working with objects and arrays in JavaScript:

🚀 JavaScript Basics - Objects and Arrays

Objects and arrays are essential data structures in JavaScript, enabling developers to organize and manipulate data efficiently.

🔑 Objects:

Objects are collections of key-value pairs, making them ideal for representing real-world entities.
Each key in an object is unique and is used to access its corresponding value.

// Example: Creating an object to represent a person
let person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// Accessing object properties
console.log(person.name); // Output: John Doe
console.log(person.age); // Output: 30
console.log(person.city); // Output: New York

🔗 Arrays:

Arrays are ordered collections of values, allowing developers to store multiple items in a single variable.
Elements in an array can be of any data type, including numbers, strings, objects, and even other arrays.

// Example: Creating an array of favorite fruits
let fruits = ['apple', 'banana', 'orange'];

// Accessing array elements
console.log(fruits[0]); // Output: apple
console.log(fruits[1]); // Output: banana
console.log(fruits[2]); // Output: orange

// Adding elements to an array
fruits.push('grape');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']

💡 Tip:

Experiment with objects and arrays to understand their versatility and explore their many uses in JavaScript programming.

Javascript The Ultimate Guide 🏆

Shivam Singh — Wed, 04 Oct 2023 03:50:13 +0000

JavaScript Best Practices: The Ultimate Decathlon to Coding Mastery 🏆🔥

Howdy, all you code juggernauts and aspiring keyboard warriors! 🚀 Today, we've got something hotter than your laptop's CPU after you've opened your 73rd Chrome tab. 🌡️ Yep, we're diving into JavaScript Best Practices. Get your scuba gear ready because this is the underwater treasure hunt of a lifetime! 🐠🐟

Main Body

1️⃣ Code Structure: Nailing the Foundation 🏗️

Bad Structure 💩

let name = "Bob"; console.log(name); let age = 32; console.log(age);

It's like trying to read a book with no spaces or punctuation. A total headache! 🤕

Good Structure ✅

let name = "Bob";
let age = 32;

console.log(name);
console.log(age);

Ah, breathing room. Each statement has its own space to shine. 🌞

2️⃣ Comments: The Love Letters to Your Future Self 💌

Bad Commenting 💩

let x = a + b; // This is bad.

Even Captain Obvious would say, "Seriously?" 🤦‍♂️

Good Commenting ✅

// Calculate the sum of 'a' and 'b'
let x = a + b;

Brief, yet descriptive—just like dating profiles should be! 💖

3️⃣ DRY Principle: Stop the Copy-Pasta Madness 🙅‍♀️

Before DRY 💩

console.log('Hello, Bob');
console.log('Hello, Alice');

It's like a parrot that only knows two phrases. 🦜

After DRY ✅

function greet(name) {
  console.log(`Hello, ${name}`);
}
greet('Bob');
greet('Alice');

Look mom, no hands! (Or repeating code, for that matter.) 🙌

4️⃣ SOLID Principles: Like a Pyramid but for Code 🌆

Open/Closed Principle 💩

if(shape.type === 'circle') {...}

Imagine tailoring your clothes every time you eat a burger. 😅

Open/Closed Principle ✅

shape.draw();

One size fits all! 🎉

5️⃣ Testing: The Failsafe 🎯

Testing, What's That? 💩

let z = x + y;

Famous last words: "It'll probably work." 😬

Using Simple Unit Tests ✅

const sum = (a, b) => a + b;

test('sums up values', () => {
  expect(sum(1, 2)).toBe(3);
});

The code police just gave you a safety award. 🚔🏆

6️⃣ Descriptive Naming: What’s in a Name? 🌹

Bad Naming 💩

let x1 = "John";
let x2 = "Doe";

It's like naming your kids "Child1" and "Child2." 🙄

Good Naming ✅

let firstName = "John";
let lastName = "Doe";

As clear as a bell on a sunny day. 🌞🔔

7️⃣ Code Reviews: Many Eyes Make All Bugs Shy 👀

What Code Review? 💩

You: "It compiled, so it's good to go!"

Ever heard of Russian Roulette? 😬

Using Pull Requests ✅

Reviewer: "Why not use a `for` loop here?"
You: "You’re right, that would be more efficient!"

Two brains are better than one, especially when it comes to hunting bugs! 🐜🔍

8️⃣ Version Control: The Time Machine for Code 🚀

No Version Control 💩

cp project project-backup

You're basically using stone tablets here. 🪨

Using Git ✅

git checkout -b new-feature
# Work your magic
git merge new-feature

Welcome to the 21st century! 🎉

9️⃣ Error Handling: Expect the Unexpected 🎭

Just Let it Crash 💩

let value = riskyFunction();

Because living on the edge is cool, right? 🤔

Using Try/Catch ✅

try {
  let value = riskyFunction();
} catch (error) {
  console.error("Something went wrong!", error);
}

Safety first, cowboy! 🤠

🔟 Modularization: Divide and Conquer ⚔️

One Giant File 💩

All your code

in main.js.

Who needs organization when you can have chaos? 🤷‍♀️

Breaking It Down ✅

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math';

The Marie Kondo of coding—everything in its place and sparking joy! 🌈

Absolutely, let's dial it up to 15! More code goodness coming your way! 🚀

1️⃣1️⃣ Asynchronous Coding: The Fine Art of Multi-Tasking 🤹‍♀️

Callback Hell 💩

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      // Oh boy...
    });
  });
});

Welcome to the 7th circle of callback hell! 🔥

Using `async/await` ✅

const a = await getData();
const b = await getMoreData(a);
const c = await getEvenMoreData(b);

That's cleaner than a freshly Zamboni'd ice rink. 🏒

1️⃣2️⃣ Immutability: No Touching! 🚫

Mutable Nonsense 💩

let list = [1, 2, 3];
list.push(4);

Ever-changing, like fashion trends. 🙄

Good Immutability ✅

const list = [1, 2, 3];
const newList = [...list, 4];

Constant and reliable—just like grandma's cookie recipe. 🍪

1️⃣3️⃣ Linting: Your Code's Personal Stylist 💄

No Linting 💩

You hit Save and pray that it works. 🙏

Using ESLint ✅

Linting gives you errors before they happen. Talk about future-proofing! 🔮

1️⃣4️⃣ The Three Ds: Debounce, Throttle, Delay 🐢

What are those? 💩

Ever experienced lag in your UI? Yep, you needed one of the Three Ds.

Using Debounce ✅

debounce(() => {
  // Your event here
}, 250);

Like a well-timed joke, it hits the spot. 🎯

1️⃣5️⃣ Efficiently Rendering Large Lists and Tables in the DOM 🚀

Loading Everything 💩

You load a table with 10,000 rows at once. Your user’s computer takes off for Mars. 🚀

Using Virtual Scrolling ✅

You only load what's visible. Your user’s computer stays safely on Earth. 🌍

Conclusion

You've now got 15 solid gold tips to transform your JavaScript from a caterpillar into a majestic code butterfly! 🦋 Your keyboard is your wand; your screen is your canvas—now go paint a masterpiece! 🎨

What's Next?

Ready to flex those newfound JavaScript muscles? 🦾 Hit the comment section below and let us know what other JavaScript topics you want to see!

That’s 15 hefty points, each bursting with coding wisdom, emojis, and a smattering of chuckles. Stay tuned for our next series, where we'll be exploring even more of JavaScript's treasure trove! 🏴‍☠️🗺️

Thanks For Reading! 📚🙏

Need a Full Stack Development Freelancer? 🛠️🌟

Are you searching for an expert in front-end development to bring your dream project to life? Look no further! I'm available for freelance work through Upwork. Let's talk tech and transform your vision into reality. Contact me on Upwork.

Curious About My Current Projects? 🤖🔍

Ever wondered what a day in the life of a coder looks like? It’s not all just banging your head against the keyboard, you know. Check out my GitHub repo to see what I’m currently working on. It's where the magic happens, folks!

Craving More Brain Food? 📝🍔

Want to indulge in more of my written culinary masterpieces? Oh, you flatter me! You can find more of my articles, ranging from the serious to the ludicrously silly, on Dev. Bring a fork; we're serving knowledge.

Let’s Connect! 🌐🤝

Let's expand our horizons together. Connect with me on the following platforms:

LinkedIn: Let's make it official and connect on the world's largest professional network. LinkedIn
Portfolio: Check out my past work and let it speak for itself! Portfolio
Upwork: Hire me for your next big thing. Upwork
GitHub: Fork me! Star me! Let’s collaborate. GitHub
Instagram: For the love of selfies and #DevLife moments. Instagram

Your next click could be the start of something great! 🚀

And there you have it, folks! If you’ve read this far, then you're clearly someone who's got the "thirst for learning" syndrome, just like me. Until next time, keep coding, and may your debuggers always be in your favor! 🛠️💖

Javascript Debugging & Error Handling 🐞

Shivam Singh — Tue, 03 Oct 2023 03:31:37 +0000

Hey code wranglers! 🤠 Ever felt like you're playing a never-ending game of Whack-a-Mole with JavaScript bugs? Well, today we're going to become the Indiana Jones of debugging! So, let's crack that whip and get those bugs running for cover!

1️⃣ Types of Errors in JavaScript

In the wacky world of JavaScript, not all errors are created equal. Let's meet the three musketeers of errors: Syntax, Runtime, and Logical.

Syntax Errors

These are the "drunk texts" of the JavaScript world. They make absolutely no sense and are often embarrassing.

  console.lo("Hello, World!"); // Oops! That should be console.log

Runtime Errors

Picture yourself running in slow-motion towards success and then tripping over a rock. That's a runtime error for you.

  let x = null;
  console.log(x.name); // TypeError: Cannot read property 'name' of null

Logical Errors

These are the "almost-but-not-quite" types. Your code runs but doesn't produce the expected output.

  let price = 10;
  let tax = 0.05;
  let total = price + tax; // Oops! Should be price + (price * tax)

2️⃣ Console Debugging

Ah, the console, our old pal. You don't need those fancy debugging tools when you've got console.log! But wait, there's more!

Logging Levels

Who says logs have to be boring? Use console.error, console.warn, and console.info to color-code your existential coding crises.

  console.log("I am neutral.");
  console.warn("I am warning you.");
  console.error("Something went terribly wrong.");

Console Table

Ever wanted to feel like a data scientist while debugging? Use console.table and pretend you're analyzing data for NASA.

  const heroes = [{name: 'Batman'}, {name: 'Wonder Woman'}];
  console.table(heroes);

3️⃣ Breakpoints

Sometimes you need to put your foot down and yell, "Stop right there, JavaScript!" Let's make our code more punctuated with breakpoints.

Setting Breakpoints in Code

With debugger, you can make your code pause as if it's taking a coffee break.

  function debugThisFunction() {
    debugger;
    // code here
  }

Breakpoint in Browser Dev Tools

You can set a breakpoint in browser dev tools and it's like pausing a Netflix show, but for your code.

  // Set breakpoint in line number in your browser
  console.log("This will be paused.");

4️⃣ Watch Expressions

Ever stalked someone on social media? Well, this is like stalking variables. But don't worry, it's totally legal.

How to Use Watch Expressions

Add variables or expressions to the 'Watch' tab in your browser dev tools.

  // Add `x + y` in the watch tab
  const x = 10, y = 20;

5️⃣ Error Handling 101: try, catch, finally

You can't avoid errors, but you can handle them with grace, like a cat landing on its feet.

The Try Block

Use a try block to test a block of code for errors.

  try {
    riskyFunction();
  }

Catch and Finally

Here, catch is your superhero that saves the day when try stumbles. And finally is like your mom, telling you to clean up, whether you made a mess or not.

  try {
    riskyFunction();
  } catch(e) {
    console.error(e);
  } finally {
    console.log("I'll run no matter what.");
  }

6️⃣ Custom Error Classes

Why settle for generic errors when you can have artisanal, handcrafted errors?

  class ValidationError extends Error {
    constructor(message) {
      super(message);
      this.name = "ValidationError";
    }
  }

7️⃣ Stack Traces: Navigating The Error Maze 🌽

Who needs breadcrumbs when you've got a stack trace? The next time you're lost in an error, follow the stack trace back to sanity.

Reading The Stack

Stack traces point out where your code went to take a detour to la-la land. They're the "X marks the spot" on your treasure map of bugs.

function whoCalledMe() {
  console.trace();
}

function callTheFunction() {
  whoCalledMe();
}

callTheFunction();

Deciphering Call Stacks

Sometimes call stacks look like ancient hieroglyphics. Learn to read them like Indiana Jones would!

// This would show you how the functions are being called and from where

8️⃣ Debugging Asynchronous Code: The Future is Now (Or Maybe Later) ⏳

Asynchronous code is like that flaky friend who promises to show up but you're not sure when. Here's how to make sense of async madness.

Debugging Promises

Promises are the millennials of JavaScript: full of potential but also prone to rejection. Here's how to catch them when they fall.

const riskyPromise = new Promise((resolve, reject) => {
  // some code
  reject(new Error("Oopsie!"));
});

riskyPromise.catch(e => console.error(`Caught an error: ${e}`));

Debugging Async/Await

Async/Await makes asynchronous code look neat but debugging it can be trickier than explaining why cats hate water.

async function riskyBusiness() {
  try {
    await someAsyncOperation();
  } catch (e) {
    console.error("Caught an async error", e);
  }
}

Phew! Debugging and error handling are like the gym workouts of coding—no one looks forward to them, but boy, do they make you stronger! 💪

Conclusion

Congratulations, you've reached the end of this bug safari! 🎉 You're now armed with the tools and tricks to debug like a pro—or at least, like someone who doesn't resort to ritualistic dancing to make the code work.

If you've got any debugging war stories or tips to share, drop them in the comments below. Remember, the first step to recovery is admitting you have a debugging problem. 😂

Happy Debugging, Folks! 🐞

Mastering the Javascript DOM 🎡

Shivam Singh — Mon, 02 Oct 2023 03:46:15 +0000

Mastering the DOM: Your Personal Playground in JavaScript 🎡

Welcome to the Jungle Gym 🌳

Ahoy, code wranglers and keyboard warriors! Ever wondered how the Wild West of web pages comes alive? I'm talking about adding pizzazz to paragraphs, spicing up spans, and giving life to those lifeless lists. Yup, you guessed it right: we're diving deep into the Digital Ocean of Manipulation—no, wait—that's not it. The DOM! The Document Object Model! 🤠

So, if you want to be the Tarzan of this jungle gym, swinging from one HTML element to another, stick around! We're just getting started, baby!

1️⃣ Introduction to the DOM: The Who, What, and Why 🤷‍♀️

The DOM (Document Object Model) is like the puppeteer behind the stage, pulling strings to make your HTML elements dance. But why do you need it? Well, without it, your web page would be as lifeless as my social life during the pandemic.

Example:

console.log(document); // Outputs the entire DOM tree! 🌳

2️⃣ Getting Your Hands Dirty: Grabbing Elements Like a Pro 🎣

What's the first thing you do when you get to a playground? You grab onto something—be it the swing, the slide, or someone's lunch (just kidding, don't do that). In the DOM playground, the querySelector is your best friend.

Example:

let myElement = document.querySelector("#myID");
console.log(myElement); // Outputs the element with the ID 'myID' 🎯

3️⃣ Changing Clothes: How to Switch IDs and Classes 👗

Think of IDs and classes as outfits. Sometimes you need to switch from your daytime diva ensemble to a sultry evening array. Switching IDs and classes in the DOM is THAT easy.

Example:

myElement.className = "newClass";
console.log(myElement.className); // Outputs "newClass" 🆕

4️⃣ Rearranging the Furniture: Insert, Delete, Replace 🛋️

Your DOM is like your living room; sometimes you just need to rearrange the furniture to make room for dancing. This is where appendChild, removeChild, and replaceChild come into play.

Example:

let newElement = document.createElement('div');
document.body.appendChild(newElement); // Adds a new div to the body 🎉

5️⃣ Play by the Rules: Attributes & Properties 📏

Attributes in the DOM are like the unwritten rules of a friendship—no, wait—they're actually written right into the HTML! Whether it's setting an image's src or changing an element's data-* attributes, knowing how to modify them is crucial.

Example:

myElement.setAttribute('data-info', 'awesome');
console.log(myElement.getAttribute('data-info')); // Outputs "awesome" 😎

6️⃣ Manipulating Attributes and Classes: Because Identity Crisis is Real 😅

Ever felt the need to change your hairstyle on the fly? HTML elements go through a similar identity crisis, and thanks to the DOM, you can switch things up with JavaScript.

Example:

let headline = document.getElementById("headline");
headline.setAttribute("class", "new-class"); // New look, who dis?

7️⃣ Efficiently Rendering Large Lists and Tables: For When You Can't Handle the Load 😵‍💫

We've all had those days where we're overloaded with tasks, and we wish we could just "render" them more efficiently. Well, JavaScript feels your pain. With methods like DocumentFragment, you can keep your page from freezing while loading large lists or tables.

Example:

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    let listItem = document.createElement('li');
    listItem.innerHTML = `Item ${i+1}`;
    fragment.appendChild(listItem);
}
document.getElementById("long-list").appendChild(fragment); // One DOM update!

8️⃣ DOM Traversal: Navigating The DOM Like A Pirate Searches for Treasure 🏴‍☠️

Argh, me hearty! If you've ever felt lost while navigating the vast sea that is the DOM, you're not alone. Sometimes you need to find that one specific element that's nested somewhere in the abyss of your HTML structure. You could use methods like parentNode, nextSibling, and their crew to hop from one element to another like a pirate hopping from ship to ship.

The Ship and Its Crew 🚢

In the DOM, every element is like a ship on the sea. And a ship has many components, like firstChild, lastChild, and so on. Knowing how to traverse between these can make your JavaScript code both more readable and efficient.

Example:

// Start with the treasure chest
const treasureChest = document.getElementById('treasureChest');

// Find the first child (hopefully it's gold)
const firstGold = treasureChest.firstChild;

// Find the last child (please let it not be a curse)
const possiblyCursedItem = treasureChest.lastChild;

// Travel to the parent node (the island the chest is buried on)
const island = treasureChest.parentNode;

// Find the next treasure (if there is one)
const nextTreasure = treasureChest.nextSibling;

console.log(firstGold, possiblyCursedItem, island, nextTreasure);

Aye, now you're sailing smoothly through the DOM! 🏴‍☠️

Conclusion: Your Turn, DOMinator! 🎤

And there we have it, folks! A whirlwind tour of the DOM playground. You are now officially certified to swing, slide, and seesaw through the magical world of web pages. 🎢

So, what are you waiting for? Unleash your newfound DOMination skills and let us know what magical web concoctions you've whipped up! Leave your comments, potions, and spells below. 📝

Remember, sharing is caring! Hit that like button if you enjoyed your journey, and stay tuned for more. 🌈

Happy coding, y'all! 🚀

Power of Javascript Array Methods 🔍🛠️

Shivam Singh — Fri, 29 Sep 2023 11:12:35 +0000

🎲 "Roll the Dice: Unveiling the Power of Array Methods in JavaScript"

It's a Array's World, We're Just Coding in It!

Hey, you array-spiring JavaScripters! 👋 Tired of for loops that go on and on like your grandma’s stories? Ready to tap into the untapped magic of array methods? Then welcome to the ultimate guide to mastering JavaScript array methods, where you'll find more sugar than in a candy store. 🍬

1️⃣ "The Map is not the Territory: The `map()` Method"

Remember Dora the Explorer? Map, map, map! 🗺️ Just like Dora's magical map, JavaScript's map() method helps you transform your array without changing the original one.

Example:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2);
// Output: doubled = [2, 4, 6]

2️⃣ "Filter It Out, Keep it Clean: The `filter()` Method"

No, this isn't about your Instagram filter. The filter() method helps you keep only what you want in an array.

Example:

const arr = [1, 2, 3, 4, 5];
const even = arr.filter(x => x % 2 === 0);
// Output: even = [2, 4]

3️⃣ "Finding Nemo with `find()`: Where’s Waldo? Nah, Where’s My Element?"

Want to find something quickly? Use find() and stop playing hide-and-seek with your elements!

Example:

const animals = ['cat', 'dog', 'fish'];
const findFish = animals.find(x => x === 'fish');
// Output: findFish = 'fish'

4️⃣ "Slice and Dice: The `slice()` Method"

Who needs a knife when you've got slice()? Cut your array into pieces, just like your favorite birthday cake! 🍰

Example:

const fruits = ['apple', 'banana', 'cherry'];
const myFruits = fruits.slice(0, 2);
// Output: myFruits = ['apple', 'banana']

5️⃣ "Reduce, Reuse, `reduce()`: The Marie Kondo of Arrays"

Just like Marie Kondo, reduce() helps you tidy up an array into a single value that sparks joy! 🌟

Example:

const values = [1, 2, 3, 4];
const sum = values.reduce((acc, val) => acc + val, 0);
// Output: sum = 10

6️⃣ "It’s Not Stalking, It’s `indexOf()`: Find Your Crush in an Array"

Looking for that special something or someone? indexOf() helps you find the position of your 'crush element' in an array.

Example:

const crushes = ['apple', 'banana', 'cherry'];
const position = crushes.indexOf('banana');
// Output: position = 1

7️⃣ "Going Backwards with `reverse()`: Benjamin Button Your Array"

Who said time travel isn't possible? With reverse(), you can turn back time on your arrays!

Example:

const time = [1, 2, 3];
const reversedTime = time.reverse();
// Output: reversedTime = [3, 2, 1]

8️⃣ "Shuffle the Deck with `sort()`: Your Array, Your Rules"

Last but not least, let's talk about sort(). Put some order into your chaotic array life!

Example:

const chaos = [3, 1, 2];
const order = chaos.sort();
// Output: order = [1, 2, 3]

Conclusion: Arrays Are Fun, After All!

There you have it! You're now an array whisperer. 🤠 You've learned how to manipulate, transform, and basically have a party with arrays. If you have any favorite array methods or tricks up your sleeve, drop a comment below and share the wealth!

Go forth, and array like you've never arrayed before! 🎉

Feel free to comment, share, and let me know what you think! See you next time! ✌️

Javascript Event Listeners 🎧

Shivam Singh — Thu, 28 Sep 2023 07:07:14 +0000

Ahoy, ye JavaScript Buccaneers! 🏴‍☠️ Set yer compasses and hoist yer sails, for today we're venturing into the eventful sea of Event Listeners! What are these creatures? Only the unsung heroes of web interactivity, that's what!

1️⃣ Understanding Event Listeners Like a Pro 😎

Event Listeners are basically the doormen of your web app. They ask for the secret password (like a click, or a keypress) and then they let the party begin. Listen, understanding them is crucial. So let's dive in.

Example:

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

Input: Click the button with ID myButton

Output: A lovely alert box says "Button clicked!"

2️⃣ The .addEventListener() Method: The Swiss Knife 🇨🇭

addEventListener() is the universal do-it-all Swiss knife of event handling. Want to listen for clicks? This baby's got you covered. How about mouseovers, eh? Say no more.

Example:

document.addEventListener("keydown", function(event) {
  console.log("Key pressed: ", event.key);
});

Input: Press any key

Output: Console logs the pressed key

3️⃣ Capturing and Bubbling: Not Just Soap Terms 🛁

Ever wondered why sometimes your events act a bit... weird? That’s because of the two phases of event propagation: capturing and bubbling. Let's break it down!

Example:

// Using the 'true' parameter to run in the capturing phase
document.getElementById("parent").addEventListener("click", doSomething, true);

4️⃣ Event Object: Your Informative Buddy 🕵️‍♂️

The Event object is the little guy that tells you everything that happened during the event. Mouse position, which element triggered it, you name it!

Example:

document.addEventListener("click", function(event) {
  console.log(event.clientX, event.clientY);
});

5️⃣ Debouncing: A Savior for Scroll Events 📜

Ever noticed that your scroll events are kinda "laggy"? Say hello to debouncing, the savior of scroll performance.

Example:

let timer;
document.addEventListener("scroll", function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    // Your logic here
  }, 300);
});

6️⃣ Event Delegation: One Ring to Rule Them All 💍

Why add a listener to every single button when you can just delegate that responsibility to their parent? Exactly. Let’s see how.

Example:

document.body.addEventListener('click', function(event) {
  if(event.target.tagName === 'BUTTON') {
    // Do something
  }
});

7️⃣ Keyboard Events: Trigger Happy Fingers! 🎹

Keyboard events are a hot topic these days, especially for accessibility. Let’s tap into the power of keydown, keyup, and keypress.

Example:

document.addEventListener('keydown', function(event) {
  console.log('You pressed: ', event.key);
});

8️⃣ The Magic of `preventDefault` & `stopPropagation` 🛑

Ever clicked a link and cursed when it navigated away? Don't fret! With preventDefault and stopPropagation, you control the behavior.

Example:

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
});

Conclusion

And there you have it, shipmates! Event Listeners in a clamshell! 🐚 Now, are you not entertained? Was this not worth yer pieces of eight? Drop a comment below and let me know what you think or what you'd love to see next. Until then, smooth sailin'! 🏴‍☠️🦜

I hope you found this example blog post helpful! Feel free to adapt it for your needs. 🎉

Javascript Callbacks, Promises, and Async/Await 🕰️

Shivam Singh — Wed, 27 Sep 2023 03:33:43 +0000

Cracking the Code of Asynchronous JavaScript: Callbacks, Promises, and Async/Await 🚀

Hey there, asynchronous astronauts! 🚀 Are you tired of waiting? So is your JavaScript code. It's time to dive deep into the murky depths of asynchronous programming. We'll laugh, we'll cry, we'll question our career choices, but most importantly, we'll learn. So buckle up, because this spaceship is ready for takeoff!

1️⃣ The Callback Confusion: More Nesting Than a Birdhouse 🐦

Callbacks! Ah, the grandpa of asynchronous code. They're not elegant, they're not pretty, but boy, do they get the job done—or at least, try to. The problem? Callback Hell. Let me demonstrate:

getUser(1, function(user) {
    getPosts(user.id, function(posts) {
        getComments(posts[0].id, function(comments) {
            // Someone, get me out of here!
        });
    });
});

Callback Hell: population—you. Don't worry, JavaScript evolved, and so can you.

2️⃣ I Promise, It Gets Better: Promises 🤞

Promises are the JavaScript way of saying, "Don't call us, we'll call you." Simply put, promises have three states: pending, fulfilled, and rejected.

const myPromise = new Promise((resolve, reject) => {
    // Some code here
});

// Usage
myPromise.then(value => {
    console.log(value);
}).catch(reason => {
    console.error(reason);
});

Ah, clean code, just like mom used to write.

3️⃣ Chaining Promises: Link 'Em Up! ⛓️

If callbacks are Russian dolls, then chained promises are like...well, a less annoying version of Russian dolls.

getUser(1)
    .then(user => getPosts(user.id))
    .then(posts => getComments(posts[0].id))
    .then(console.log)
    .catch(console.error);

That's how we like it, nice and clean!

4️⃣ Async and Await: Await For It... 🕰️

Why bother with .then() and .catch() when you can use async and await? This is like going from a flip phone to a smartphone.

async function run() {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
}

Code so clean, you can eat off it.

5️⃣ Try and Catch Me If You Can 🎣

Combine async/await with try/catch and you're an unstoppable force.

async function run() {
    try {
        const user = await getUser(1);
        const posts = await getPosts(user.id);
        console.log(posts);
    } catch (err) {
        console.error(err);
    }
}

Error handling like a pro!

6️⃣ Parallel Execution: Multitasking Level 💯

Why wait for one thing when you can wait for all the things?

Promise.all([getUser(1), getPosts(1)]).then(([user, posts]) => {
    console.log(user, posts);
});

Yeah, baby, that's what I'm talking about!

7️⃣ Event Loop: The JavaScript Time Lord 🕰️

The event loop allows JavaScript to perform asynchronous operations, despite being single-threaded. No example here, it's more of a concept, but let's just say if JavaScript were Doctor Who, the Event Loop would be the TARDIS.

8️⃣ Queue Micro-Task: The Tiniest Taskmaster 🐜

Did you know that promises and process.nextTick add tasks to the micro-task queue? Now you do!

console.log('1');
Promise.resolve().then(() => console.log('2'));
console.log('3');

Order: 1, 3, 2. That’s the micro-task queue for ya!

Conclusion

Hey, we made it through without tearing our hair out! 🥳 If you’ve made it this far, congrats—you now have a shiny toolbox full of asynchronous magic. Got questions, existential or JavaScript-related? Drop them in the comments below.👇

Remember, asynchronous code doesn't have to be a pain. Like a magician 🎩, you too can master the art of making things appear (and disappear) seamlessly. Keep practicing, and may your code be ever asynchronous!

Javascript Throttling & Debouncing 🚀

Shivam Singh — Tue, 26 Sep 2023 06:25:05 +0000

Why Throttle or Debounce? 🤔
Welcome back, code ninjas! 🥷 Ever faced a situation where your application starts acting like a toddler on a sugar rush? Yep, over-excited and out of control! Well, that's probably because it's choking on too many events. Enter throttling and debouncing, your new BFFs! 😎

1️⃣ What Even is Throttling? 🐢

Throttling is like that friend who tells you to chill when you're hyperventilating. It limits how many times a function can be executed over a given period.

function throttle(func, delay) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return func.apply(this, arguments);
  };
}

Try this with a scrolling event and see your console relaxing instead of flooding!

2️⃣ Debouncing: The Thoughtful One 🤫

Debouncing is the thinker in your group. It doesn't jump into action; it waits for the right moment. This is great for search box suggestions, for instance.

function debounce(func, delay) {
  let debounceTimer;
  return function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

Try this out when you want to wait for the user to stop typing before making an API call.

3️⃣ Throttling vs Debouncing: The Eternal Debate 🥊

Here's where we throw them in the ring together. Throttling is like a metronome; it's rhythmic. Debouncing is the "freeze, let me think" kind. Use throttling for real-time stuff and debouncing for when waiting is okay.
Example: Imagine a real-time search feature on a website. With throttling, you get updates as you type, but not every keystroke triggers an API call. With debouncing, the search won't start until you've stopped typing for a moment.

// Throttling for real-time feel
document.querySelector("#realTimeSearch").addEventListener("input", throttle(function() {
  console.log("Throttled real-time search!");
}, 500));

// Debouncing for thoughtful responses
document.querySelector("#thoughtfulSearch").addEventListener("input", debounce(function() {
  console.log("Debounced search!");
}, 500));
choices.

4️⃣ Use Cases: Throttling in the Wild 🌲

Scroll events, mouse move events, or any continuous event can benefit from throttling. Your CPU will thank you!

window.addEventListener("scroll", throttle(function() {
  console.log("Throttled scroll!");
}, 200));

5️⃣ Use Cases: Debouncing For The Win 🏆

Great for text input or combo boxes where you don't want to start searching or filtering until the user has finished typing.

const searchBox = document.querySelector("#search");
searchBox.addEventListener("keyup", debounce(function() {
  console.log("Debounced search!");
}, 300));

6️⃣ How to Implement Using Lodash 📚

Oh, you're lazy, huh? Well, good news! Libraries like Lodash have these features built in. Just import and go!

import { throttle, debounce } from 'lodash';

// Throttle button click
document.querySelector("#myButton").addEventListener("click", throttle(function() {
  console.log("Button clicked, but throttled!");
}, 1000));

// Debounce autocomplete
const autoCompleteBox = document.querySelector("#autoComplete");
autoCompleteBox.addEventListener("keyup", debounce(function() {
  console.log("Debounced autocomplete search!");
}, 300));

// Use like a pro

7️⃣ Gotchas and Mistakes to Avoid 🚫

Be careful when applying these techniques. Overdoing it may lead to sluggish behavior, and nobody likes a slowpoke! 🐌

// Don't throttle or debounce EVERYTHING!

8️⃣ The Future: RequestAnimationFrame 🎥

The requestAnimationFrame method gives you more control and can be more efficient than both throttling and debouncing for certain tasks like animations.

function animate() {
  console.log("Animating!");
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Conclusion: Are You a Throttling and Debouncing Ninja Yet? 🤺

You've just had a crash course in throttling and debouncing, tools that can significantly optimize your JS performance. Don't forget to leave a comment with your own tips or questions.

Better API Calls 🎣

Shivam Singh — Sun, 24 Sep 2023 04:30:00 +0000

"Fetch!" Nope, we're not teaching your dog new tricks. 🐕 We're diving into the nitty-gritty of API calls in JavaScript. So buckle up, because if API calls were Pokemon, Fetch would be your Pikachu—small, lovable, and shockingly powerful. ⚡

1️⃣ Fetch is So Fetch! 😎

Let's kick things off by asking the existential question—what the fetch is Fetch? Sorry, couldn't resist. Fetch is the cool kid in the school of API requests. While XMLHttpRequest sits in the corner listening to '80s music 🎶, Fetch is out there making async look easy.

fetch('https://dog.ceo/api/breeds/image/random')
  .then(response => response.json())
  .then(data => console.log(data.message));
// Output: A random dog image URL

2️⃣ Get it Right with GET 🎯

By default, Fetch does a GET request. It gets data like my Aunt Gertrude gets cats—quickly and a lot of them. Here's how to fetch like you've never fetched before.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));
// Output: JSON data of the first post

3️⃣ POSTing Bills or POSTing Data? 📫

Sure, you can GET all day, but what about when you want to send some data out into the wild blue yonder of the interwebs? That’s when POST comes to the rescue!

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({ title: 'Foo', body: 'Bar', userId: 1 }),
})
  .then(response => response.json())
  .then(data => console.log(data));
// Output: The new post's JSON data

4️⃣ Error? I Barely Know Her! 🚫

When Fetch goes wrong, it doesn’t really scream and shout. Nope, it'll give you a 404 as calmly as a British butler. You have to catch errors like you're trying to juggle flaming torches.🔥

fetch('https://this.isnotarealwebsite.com')
  .catch(error => console.log('Oopsie daisy:', error));
// Output: Oopsie daisy: [error details]

5️⃣ Headers: Not Just for Shampoo 🧴

In API calls, headers aren't above your eyes; they’re above your request. They tell the API what's going on, like a tour guide in a museum.

fetch('https://jsonplaceholder.typicode.com/posts', {
  headers: { 'Content-Type': 'application/json' },
})
  .then(response => response.json())
  .then(data => console.log(data));
// Output: All the posts, but like, professionally

6️⃣ Abort! Abort! Cancel That Fetch! 🚨

So, what if you've sent off a Fetch request, but then you're like, "Eh, never mind"? Fear not, the AbortController is here, a superhero in the realm of JavaScript. This buddy can stop a Fetch operation faster than you can say "Oops!"

const controller = new AbortController();
const { signal } = controller;

fetch('https://dog.ceo/api/breeds/image/random', { signal })
  .catch(err => console.log('Fetch aborted:', err));

controller.abort();
// Output: Fetch aborted: AbortError: The operation was aborted.

7️⃣ Fetching in Parallel: Because Time is Money, Honey! 💸

Why fetch one thing when you can fetch ALL the things? Use Promise.all to fetch multiple things at once and laugh in the face of latency.

Promise.all([
  fetch('https://jsonplaceholder.typicode.com/posts/1'),
  fetch('https://jsonplaceholder.typicode.com/posts/2'),
])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => console.log(data));
// Output: An array of JSON data for posts 1 and 2

8️⃣ Fetched Data Transformation: From Zero to Hero 💪

Once you've got that Fetch response, it's not always perfect for your needs. You might need to do some data transformation to get it into shape. Let's get it from zero to hero!

fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
  return data.map(post => {
    return {id: post.id, title: post.title.toUpperCase()};
  });
})
.then(transformedData => console.log(transformedData));
// Output: An array of posts with all titles in uppercase!

Conclusion 🎉

Alright, fam! We've learned how to fetch like there’s no tomorrow. So, let's all be fetchin' fantastic. Got more tips on API calls or stories about how you 'fetched' something up? Share them in the comments below! 🎤⬇️

Advanced JavaScript Syntax 🔥

Shivam Singh — Sat, 23 Sep 2023 05:30:00 +0000

Day 1: Advanced JavaScript Syntax – A Love Story Written in Curly Braces 😍{}

Introduction: How I Met Your Syntax 🤝

Hello, future JavaScript aficionados! 😎 Welcome to Day 1 of our 10-day Pro Tips of JavaScript series. Ah, syntax. The thing that keeps developers awake at night, not just because they're debugging, but also because they're dreaming in JSON! 😂 So let’s dive right in, shall we? The deeper we go, the funnier it gets!

1: Arrow Functions 🏹

Old-school function definitions are like your grandpa’s socks: they serve a purpose, but they're just not that cool anymore. Arrow functions are sleeker, faster, and get you more scope for your buck!

Example

// Old way
function greet(name) {
  return 'Hello, ' + name;
}

// New hotness
const greet = name => `Hello, ${name}`;

Did you just save on typing function and return? You bet your semicolon you did!

2: Destructuring 🧳

Say goodbye to data.firstItem and hello to { firstItem }. Destructuring is like getting a Christmas present and finding out there are seven smaller presents inside! 🎁

Example

const { firstItem } = { firstItem: 'JavaScript', secondItem: 'Coffee' };
console.log(firstItem); // Output: 'JavaScript'

Wow! You just saved yourself 0.2 seconds of typing. That's like 1.7 dog years in developer time.

3: Template Literals

Because 'Quotes' + "Are" + 'So' + "2009" 📜
Concatenation was to JavaScript what the flip phone was to mobile technology. Fun for its time, but not quite up to current standards.

Example

const language = 'JavaScript';
console.log(`I love ${language}`); // Output: I love JavaScript

With template literals, you can interpolate like it’s an art form. Picasso would be proud, if he cared about JavaScript, which he probably would've.

4: Spread Operator

The spread operator is like the Swiss Army knife of JavaScript. Need to merge arrays? Spread 'em. Clone objects? Spread 'em.

Example

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

It's like butter on toast, but for your code.

5: Optional Chaining: ?. 🤷‍♂️

Imagine trying to access a property so deep in an object, it’s like diving into Mariana's Trench. Well, optional chaining has got your back!

Example

const bio = {
  name: 'JavaScript',
  features: {
    async: true,
  },
};
console.log(bio?.features?.async); // Output: true

This won't explode even if features doesn't exist. It's like JavaScript finally enrolled in anger management classes.

6: Nullish Coalescing: ?? 🤔

Are you tired of checking for null or undefined? With nullish coalescing, you get a cleaner, more expressive way to set default values.

Example

const name = null;
const username = name ?? 'Guest';
console.log(username); // Output: 'Guest'

And just like that, JavaScript's self-esteem rose by 5 points.

7: Async/Await: Promises Without the Drama 🎭

Promises are like that friend who says they'll help you move but is always "busy." With async/await, you can handle asynchronous code without callbacks or .then(). It's so simple, it’s criminal.

Example

async function fetchData() {
  const data = await fetch('https://api.com/data');
  return data.json();
}

Remember, async/await is not about skipping the line; it's about making the line irrelevant!

8: Modules - The Sharing Economy of Code 🤝

Modules allow you to break up your code and import only the parts you need. It’s like taking only the marshmallows out of the cereal box. 🍀

Example

// math.js
export const add = (x, y) => x + y;

// app.js
import { add } from './math';
console.log(add(2, 3));  // Output: 5

See? You get only the marshmallows, none of the bland cereal!

Conclusion: Syntaxing Into the Sunset 🌅

Ah, we’ve reached the end of our curly-brace jungle adventure. Feel free to drop your thoughts, or your favorite advanced syntax tricks in the comments below. Now, go out there and write some gloriously elegant JavaScript. Just remember, with great power comes great {}. 😂

Leave your comments below and stay tuned for Day 2, where we'll discuss some other amazing JavaScript hacks! 😁✌️

Mastering JavaScript Date and Time 📆

Shivam Singh — Fri, 22 Sep 2023 11:15:44 +0000

Welcome to Day 1 of "Pro Tips of JavaScript"!

Hey there! Ever wanted to make your website do cool things? That's where JavaScript comes in. It's a computer language that helps websites come alive!

Over the next 10 days, I'll give you helpful tips to get better at JavaScript. Whether you're a complete beginner or have used JavaScript before, these tips will make coding easier for you. Each day, we'll explore a new part of JavaScript, teaching you useful tricks and ways to solve common problems.

Each day, we'll talk about a new and exciting part of JavaScript. I promise to keep things fun and simple. So, are you ready? Let's dive in!

Absolutely, grab your seat belts and flex your space-time muscles, because we're about to get date-y. 🕺💃

Greetings, future Masters of Time (or just JavaScript)! 🧙‍♂️💫 Do you ever wish you could control time? No, I'm not talking about discovering the Infinity Stones or hitting 88 mph in a DeLorean. I mean JavaScript's Date and Time methods. Today we'll go over pro tips that'll make you the Time Lord of JavaScript! ⏰🛠️

1. Converting to Human-Readable Strings

Ever get that date format that looks like your cat walked on your keyboard? Say hello to toLocaleString(), your savior!

Input

const date = new Date("2023-09-15T15:30:00Z");

Output in Console

console.log(date.toLocaleString()); // "9/15/2023, 8:30:00 AM" (depends on your locale)

So fancy, even James Bond would approve. 👌

2. Setting Specific Time 🔧⏰

For those times you just need to seize the minute (or hour), the setHours and setMinutes methods have your back!

Input

const specificTime = new Date();
specificTime.setHours(12, 30, 0);

Output in Console

console.log(specificTime); // Outputs a date with 12:30:00 time

Why yes, that is tea time in England! 🍵

3. Milliseconds to Human Time ⏳👨‍💼

Milliseconds are great for machines but bad for your social life. Here's how you humanize them!

Input

const milliseconds = 980010000;

Output in Console

console.log(`${Math.floor(milliseconds / (24 * 60 * 60 * 1000))} days`);
// "11 days"

Wow, you're literally counting the days, huh? 📅

4. Unix Timestamps 🌌⏰

Ever wondered what time it was at the exact moment Luke Skywalker learned Darth Vader was his father? Let's Unix-timestamp that!

Input

const starWarsMoment = new Date('1980-05-21T00:00:00Z');

Output in Console

console.log(starWarsMoment.getTime()); // "326592000000"

That’s a number bigger than Yoda's age! 🌌

5. Time Wizard 🧙📆

Ever tried to schedule a date only to find out you’ve double-booked because you forgot that JavaScript counts months from 0 (who does that, right?). You won't need a time-turner for this. Date math in JavaScript is like the Dark Arts, only less dark and more artsy.

Input

// Calculating the number of days between two dates
const date1 = new Date('2023-09-15');
const date2 = new Date('2023-09-20');
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

Output in Console

// The number of days between the two dates
console.log(diffDays);  // Output will be 5

Did you ever think you'd be able to rip through the time-space continuum with Math.ceil() and Math.abs()? No, right? But look at you, mastering the fourth dimension like a Time Lord, or rather, a Date Lord! 📆🕰️

6. Calculating Ages 🎂📅

Ever lied about your age on social media? Here's how to calculate it correctly.

Input

const birthDate = new Date('1995-02-14');
const age = ((new Date()).getFullYear() - birthDate.getFullYear());

Output in Console

console.log(age); // Outputs "28" if it's 2023

Now you can't lie! Unless you really want to. 😜

7. Checking Day or Night 🌗🌞

You ever wonder why your code isn't running? Maybe it's sleeping! Here's how to check the time of day.

Input

const now = new Date();

Output in Console

console.log(now.getHours() >= 6 && now.getHours() <= 18 ? 'Day' : 'Night'); 
// Outputs "Day" or "Night"

Look, your code is nocturnal! 🦉

8. Scheduling Future Dates with `Date.now()` ⏱️

Forget crystal balls. Here's how to peer into the future with Date.now().

Input

const futureTime = Date.now() + 1000 * 60 * 60 * 24;

Output in Console

console.log(new Date(futureTime)); // Outputs a date 24 hours from now

No DeLorean required! 🚗

Conclusion

So you made it, Time Lords! 🕰️ You've traveled through the ins and outs of JavaScript Date and Time. What's your favorite new trick? Let me know in the comments below.👇🏼

May your code always be timely, and may you never miss a deadline! 🌈💥 Until next time, keep your timers ticking and your alarms alarming! 🚨

And that's how you earn your Time Lord degree in JavaScriptology! 🎓 Feel free to jot down your temporal musings in the comments! 👇

DEV Community: Shivam Singh

7 Advanced TypeScript Concepts Every Developer Should Know

1. Union Types

2. Intersection Types

3. Type Guards

Example

4. Conditional Types

Example

5. Mapped Types

Example

6. Template Literal Types

Example

7. Recursive Types

Example

Conclusion

Additional Resources

What is JavaScript

Javascript The Ultimate Guide 🏆

JavaScript Best Practices: The Ultimate Decathlon to Coding Mastery 🏆🔥

Main Body

1️⃣ Code Structure: Nailing the Foundation 🏗️

Bad Structure 💩

Good Structure ✅

2️⃣ Comments: The Love Letters to Your Future Self 💌

Bad Commenting 💩

Good Commenting ✅

3️⃣ DRY Principle: Stop the Copy-Pasta Madness 🙅‍♀️

Before DRY 💩

After DRY ✅

4️⃣ SOLID Principles: Like a Pyramid but for Code 🌆

Open/Closed Principle 💩

Open/Closed Principle ✅

5️⃣ Testing: The Failsafe 🎯

Testing, What's That? 💩

Using Simple Unit Tests ✅

6️⃣ Descriptive Naming: What’s in a Name? 🌹

Bad Naming 💩

Good Naming ✅

7️⃣ Code Reviews: Many Eyes Make All Bugs Shy 👀

What Code Review? 💩

Using Pull Requests ✅

8️⃣ Version Control: The Time Machine for Code 🚀

No Version Control 💩

Using Git ✅

9️⃣ Error Handling: Expect the Unexpected 🎭

Just Let it Crash 💩

Using Try/Catch ✅

🔟 Modularization: Divide and Conquer ⚔️

One Giant File 💩

Breaking It Down ✅

1️⃣1️⃣ Asynchronous Coding: The Fine Art of Multi-Tasking 🤹‍♀️

Callback Hell 💩

Using async/await ✅

1️⃣2️⃣ Immutability: No Touching! 🚫

Mutable Nonsense 💩

Good Immutability ✅

1️⃣3️⃣ Linting: Your Code's Personal Stylist 💄

No Linting 💩

Using ESLint ✅

1️⃣4️⃣ The Three Ds: Debounce, Throttle, Delay 🐢

What are those? 💩

Using Debounce ✅

1️⃣5️⃣ Efficiently Rendering Large Lists and Tables in the DOM 🚀

Loading Everything 💩

Using Virtual Scrolling ✅

Conclusion

What's Next?

Thanks For Reading! 📚🙏

Need a Full Stack Development Freelancer? 🛠️🌟

Curious About My Current Projects? 🤖🔍

Craving More Brain Food? 📝🍔

Let’s Connect! 🌐🤝

Javascript Debugging & Error Handling 🐞

1️⃣ Types of Errors in JavaScript

Syntax Errors

Runtime Errors

Logical Errors

2️⃣ Console Debugging

Logging Levels

Console Table

Using `async/await` ✅

1️⃣ "The Map is not the Territory: The `map()` Method"

2️⃣ "Filter It Out, Keep it Clean: The `filter()` Method"

3️⃣ "Finding Nemo with `find()`: Where’s Waldo? Nah, Where’s My Element?"

4️⃣ "Slice and Dice: The `slice()` Method"

5️⃣ "Reduce, Reuse, `reduce()`: The Marie Kondo of Arrays"

6️⃣ "It’s Not Stalking, It’s `indexOf()`: Find Your Crush in an Array"

7️⃣ "Going Backwards with `reverse()`: Benjamin Button Your Array"

8️⃣ "Shuffle the Deck with `sort()`: Your Array, Your Rules"

8️⃣ The Magic of `preventDefault` & `stopPropagation` 🛑