SH20RAJ

browserid=ECp8myR7LciVVyrKxhjseu5DsPlsBGfcO2llDtQXqlF9ol1xSxrOyu-zQOo=; __bid_n=18de05eca9a9ef426f4207; _ga=GA1.1.993333438.1714196932; ndus=Ye4ozFx5eHuiHedfAOmdECQ1cUYjXwfZF6VF4QbD; TSID=JmuRgIKcaPqMjlzvZE5wXOJD96SkO594; PANWEB=1; csrfToken=8nN5Q8Y5H71nPyC8NHxBYAcr; lang=en; __bid_n=18de05eca9a9ef426f4207; ndut_fmt=A66A9E7BD20D40C268FB5C44A4E512FB76288B038CE8454BBB5B6BA0DB474814; ab_sr=1.0.1_OWVhNGFjZjk2MTJjMjE4MWViNzJhZDZhYTFmYzc4YmU3YmM4YmE2YzM4OTlkNGFiYTgwMTU5YjExYzVkMmYyOWU3NjQ2MGY4OGU2NWFlN2VhMDVhM2EzMGFlNmVlY2YzODY4YWNlNTdiYzdkODllZGQyNzRmODFiMmYxMTA2NGQyYWM2NGQxN2UxNDA3YzlhMDZkNDJiNWE4YmM5NTkxOA==; ab_ymg_result={"data":"97e606d2561336895e6c204c4cefdda3f92fcb3da76591b45dff12f3686fa1cad214e650165788b6b308134b9d9630b87d3b7b925e4d6eff5c376d2a0616a7d075d125397d73a7d649719f13489133194f2afd96fe712df4def2120f7e123df403d77144b1fb1f7ef9cd2b2c34feda576a824304a7c66bc9bbf9482618a92b59","key_id":"66","sign":"a8e92f31"}; _ga_06ZNKL8C2E=GS1.1.1714281215.2.0.1714281219.56.0.0

SH20RAJ

{
  "version": 2,
  "builds": [
    {
      "src": "bot.js",
      "use": "@vercel/node"
    }
  ],
  "routes" : [
    {

SH20RAJ

🚀 JavaScript Optional Chaining: Navigate Objects Safely with Confidence! 🌟 - 🔮 Unlocking JavaScript Magic 😎

Introduction:

In the enchanting world of JavaScript, diving into nested objects can be like exploring a mysterious treasure map 🗺️. But fear not, brave developers! Our trusty companion, the ?. (optional chaining) operator, is here to guide us through the twists and turns of object navigation 🧭✨. Let's embark on an adventure to discover the magic of optional chaining!

What is Optional Chaining (?.)?

Optional chaining, introduced in ECMAScript 2020, is a magical operator that allows us to safely access properties of nested objects, even when they might not exist. It's like having a magical shield that protects us from the perils of null and undefined values 🛡️.

How to Use Optional Chaining:

Let's unravel the mysteries of optional chaining with a whimsical example:

SH20RAJ

JavaScript Magic: 20 Quirky Quandaries! 💫

Prepare to be enchanted by the mysterious world of JavaScript quirks! 🧙‍♂️ Let's embark on a journey through 20 mind-bending questions that will test your understanding of JavaScript's peculiar behaviors! 🚀💡

Question 1: What's the result of [] + {}? 🤔

console.log([] + {}); // ?

Answer:

SH20RAJ

Title: "🧐 JavaScript Quirks: Exploring Tricky Equality Questions! 💡"

Have you ever wondered about the curious world of JavaScript equality comparisons? 🤔 Brace yourself for a dive into some peculiar scenarios where JavaScript's loose equality rules can lead to surprising results! Let's explore these quirky questions together! 🚀✨

Question 1: What's the result of 0 == null? 🤔

console.log(0 == null); // ?

SH20RAJ

Building an Offline-Enabled To-Do List Web App

After getting huge success on my previous article. Here is a use case of building an Offline-Enabled Website. {% post https://dev.to/sh20raj/how-to-make-your-website-used-without-internet-3e3l %}

In today's world, where connectivity isn't always guaranteed, creating web applications that work offline can greatly enhance user experience. In this tutorial, we'll walk through the process of building a simple To-Do List web app that functions both online and offline. We'll be using basic HTML, CSS, and JavaScript, along with a service worker for caching resources.

Tip

See Source Code and Live Preview

SH20RAJ

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

SH20RAJ

<div class="app-container">
  <div class="app-header">
    <div class="app-header-left">
      <span class="app-icon"></span>
      <p class="app-name">Portfolio</p>
      <div class="search-wrapper">
        <input class="search-input" type="text" placeholder="Search">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
          <defs></defs>
          <circle cx="11" cy="11" r="8"></circle>

SH20RAJ

HTML Entities Encoder Decoder

A Pen by SH20RAJ on CodePen.

License.

SH20RAJ

How to make Your Website work offline 🌐

So, you wanna make your website work even when the internet decides to take a coffee break? Just like how YouTube lets you download videos for those Wi-Fi-less moments ⛱️, you can do the same for your website, making it accessible even when the internet's playing hide and seek. Let's dive into creating a site that's like a trusty sidekick, always there for your users, even offline. We'll use the example of HTML5 games 😚 because, hey, who doesn't love a good game, right? 🎮

Why You Need Offline Goodness

First things first, let's chat about why having an offline-ready website is a game-changer. Picture this: spotty internet, remote areas, or just a flaky connection – not everyone's got that smooth, uninterrupted internet flow. By giving your users the option to go offline, you're making sure they can still binge on your content, whether they're in the wilds or on a plane. It's all about leveling up that user experience! 🚀