So, as we all know about Pseudo classes in Tailwind CSS enable developers to apply styles to elements based on various states or interactions, such as hover, focus, and active states. With just a few special words, you can make your website more interactive and engaging without needing to write lots of extra code!

In Tailwind CSS, groups and peers are two concepts that build upon pseudo-classes:

1. Group Relationship: When one element is nested within another, creating a parent-child relationship, they form a group. Styling applied to the parent (group) can affect the child (nested) elements, providing powerful control over the entire group’s appearance.

   By adding the group class to a parent element, developers can target nested elements within the group using pseudo classes like group-hover. This enables changes in appearance when interacting with the parent element, cascading down to its children.

    const App = () => {
      return (
        <>
          <div className="group">
            <div className="group-hover:..." />
          </div>
        </>
      );
    };
   

2. Peer Relationship: Elements that are siblings or on the same level within the DOM hierarchy are considered peers. They share a peer relationship, allowing for synchronized styling based on interactions with one element affecting the others.

   Similarly, applying the peer class to sibling elements allows for synchronized styling based on interactions with any peer element. Utilizing pseudo classes such as peer-hover, developers can achieve coordinated effects across sibling elements without the need for complex JavaScript logic.

    const App = () => {
      return (
        <>
          <div className="peer" />
          <div className="peer-hover:bg-red-500" />
        </>
      );
    };
   

Now which problems do signals actually solves. Imagine we have an email input field and a corresponding div element below it. Even without JavaScript, we can make the div react to the input's state by giving it a classname like peer when the input is invalid. We can style this div to be visible and display a message like "invalid input" if you type in something wrong, like "123" instead of an email. Signals build upon this concept. And they do a really good job at that.

const App = () => {
  return (
    <>
      <input className="peer" type="email" />
      <div className="peer-invalid:block hidden" />
    </>
  );
};

Here's how it works: you create what's called a "signal" on a parent element, like a div. This signal acts as a trigger that tells other elements, like buttons or text fields, to do something when it's activated. For example, you can set up a signal that says, "Hey, if this box is checked, change the background color of the nested element from red to green."

const App = () => {
  return (
    <>
      <input className="peer" type="checkbox" /> 👈🏻 check/uncheck here
      <div className="peer-checked:signal">
        <div>
          <div>
            <div className="signal:bg-green-500 bg-red-500 p-1 text-white">
              nested div
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

The best part? You can do all of this with just CSS. No need for fancy JavaScript tricks or complicated code. Tailwind Signals simplifies the whole process, making it easier for you to create dynamic, responsive websites without pulling your hair out over code.

But, like any new technology, Tailwind Signals isn't perfect. It's still in the experimental stage, and not all web browsers support it yet. So, while it's super cool, you might have to wait a bit before you can use it everywhere.

For more information please check out: https://www.npmjs.com/package/tailwindcss-signals

CC: https://www.youtube.com/watch?v=SmOstmWBneE

GraphQL is a query language and runtime for APIs. It was created by Facebook and open-sourced in 2015.

In simple terms, GraphQL is:

• A query language: It provides a syntax for clients to define the exact data they need from an API.

• A runtime: It runs on the server and provides an API layer over your existing data.

Some key benefits of GraphQL are:

• Efficiency: GraphQL queries fetch only the required data fields, avoiding over- or under-fetching of data.

• Flexibility: GraphQL queries can fetch data from multiple data sources in a single request.

• Strong typing: GraphQL defines a type system for the data, providing runtime validation of queries.

• Self-documenting: GraphQL exposes introspection, allowing clients to discover the graph structure.

How Does GraphQL Work?

GraphQL provides a single endpoint for the API, typically /graphql. Clients make requests to this endpoint to fetch the data they need.

A GraphQL query specifies the exact data fields required from the API. For example:

{
  user(id: 1) {
    firstName
    lastName
  }
}

This query will fetch only the firstName and lastName fields for the user with ID 1.

The GraphQL schema defines the types and fields available in the API. Resolvers are functions that fetch the actual data when a query is executed.

When a query is received, the GraphQL runtime:

1. Validates the query against the schema

2. Executes the resolvers for the fields in the query

3. Returns the data in a JSON response

GraphQL vs REST

GraphQL and REST are two different API architectures:

• REST uses HTTP methods and URL paths to access data. It returns full resources in responses.

• GraphQL uses a query language and a single endpoint. It returns only the requested fields in responses.

Some advantages of GraphQL over REST:

• Efficiency: GraphQL returns only the requested data, while REST often over- or under-fetches data.

• Flexibility: GraphQL queries can fetch data from multiple sources in one request.

• Versioning: GraphQL uses a field-level approach to versioning, making it easier to evolve APIs over time.

How does GraphQL work?

Curious about how GraphQL efficiently retrieves precisely the data you need, without any excess?

Essentially, using GraphQL involves creating a type system that allows you to execute targeted queries. Each type can contain fields and functions that determine the available operations. When combined, these components form a GraphQL service.

When a client sends a query to the GraphQL service, an integrated query parser utilizes your schema to validate the incoming query. If no errors are found, it executes the associated functions for the requested fields and returns a result.

What sets GraphQL apart and makes it special?

GraphQL is special for several reasons. Firstly, it simplifies the process of querying data by allowing clients to request exactly what they need in a single request. This saves time and resources because the server doesn't have to make multiple requests to fulfill the client's requirements.

Secondly, GraphQL supports real-time subscriptions, which means that clients can receive updates whenever a specific operation is performed on the server. This enables applications to be more responsive, providing users with up-to-date data as it changes in near real-time.

Lastly, GraphQL is designed to be language-agnostic, meaning it can be used with any programming language. This flexibility makes it easier for developers to integrate GraphQL into their existing applications and quickly build powerful APIs without being restricted to a specific language.

If you enjoyed reading this blog, we would greatly appreciate your support by giving it a like. Your feedback and engagement mean a lot to us. Thank you for taking the time to read and engage with our content!

Kafka is a distributed system that consists of servers and clients communicating through a high-performance TCP network protocol. It is an open-source system created by LinkedIn and is maintained by companies like LinkedIn, Confluent, IBM, and others. Many well-known companies, including LinkedIn, Airbnb, and Netflix, use Kafka for their data transfer needs.

Why should we use Apache Kafka?

1. Distributed Streaming System: Apache Kafka is a messaging system that consists of multiple servers working together. These servers form a cluster and can be set up anywhere as needed.

2. Fault Tolerant System: Kafka uses replication to ensure fault tolerance. Data is replicated across all servers, so if one node fails, data can still be processed from other nodes.

3. Scalability: Kafka is highly scalable. It allows for fast and automatic recovery in case of node failure. You can increase the number of brokers and consumers to handle high loads and increasing demand.

4. High Performance: Kafka is efficient in handling a large volume of data. It can process millions of messages per second with high throughput and low latency.

Kafka Architecture

The picture above explains how Kafka is set up. Now, let's talk about each part of the Kafka diagram in simple terms.

Kafka Cluster:
A Kafka cluster is a group of Kafka brokers. Think of a broker as a server that sends and receives data. In Kafka, brokers are called brokers because they handle data. Each broker in the cluster has a unique ID.

Kafka Broker:
Brokers in Kafka have different topics. A topic is like a stream of data in the Kafka cluster. Each topic is divided into partitions. Topics are identified by their names. The partitions of a topic are spread evenly across the brokers in the cluster, which helps Kafka handle large amounts of data. Brokers are responsible for copying data to different partitions. Each broker in the Kafka cluster has all the information about the entire cluster. Brokers receive messages from producers and store them on disk. A Kafka broker is also called a bootstrap server.

Producers:
In the Kafka system, there are several producers that send data to Kafka topics. Producers are smart and can determine which partitions to write data to. If a Kafka server with a partition fails, the producers can recover automatically. Before sending messages to Kafka topics, producers use message serializers to convert the messages into a suitable format.

In Kafka, data is sent and received as bytes. Producers convert the data into bytes before sending it to Kafka, and consumers receive the data as bytes. This byte-based communication allows Kafka to handle different types of data effectively and ensures that producers and consumers can work together seamlessly.

Consumers:
Consumers in Kafka are responsible for reading messages from Kafka topics. They use a pull model to retrieve data from specific partitions within a topic. Consumers are organized into consumer groups, and each group can have multiple consumers reading data from a topic.

When reading data, a consumer starts from a lower offset and reads messages in order up to a higher offset within a partition. However, if a consumer is reading from multiple partitions, the order of messages is not guaranteed. Kafka sends data to consumers in the form of bytes. To make the data usable, consumers use message deserializers to convert the bytes back into their original object format.

ZooKeeper:
In the Kafka ecosystem, there is another important component called ZooKeeper. ZooKeeper is responsible for managing the metadata of the Kafka system. It helps Kafka by informing producers and consumers about the addition or removal of Kafka brokers in the cluster. Additionally, Kafka brokers rely on ZooKeeper to determine the leader of each partition. In summary, ZooKeeper plays a crucial role in coordinating and maintaining the overall stability and functionality of the Kafka system.

Kafka with Node.js:

Prerequisites:

• Node.JS Intermediate level

• Experience with designing distributed systems

• Node.js: Download Node.JS

• Docker: Download Docker

• VsCode: Download VSCode

Refer this gist for the code and all commands which we are going to use!

Start ZooKeeper: Kafka uses ZooKeeper for coordination, so you need to start ZooKeeper before starting Kafka. ZooKeeper manages the configuration, synchronization, and leader election for Kafka.

• Start Zookeper Container and expose PORT 2181.

$ docker run -p 2181:2181 zookeeper
ZooKeeper JMX enabled by default
Using config: /conf/zoo.cfg
2023-09-08 16:07:19,761 [myid:] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@177] - Reading configuration from: /conf/zoo.cfg
2023-09-08 16:07:19,769 [myid:] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@431] - clientPort is not set
2023-09-08 16:07:19,769 [myid:] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@444] - secureClientPort is not set
2023-09-08 16:07:19,770 [myid:] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@460] - observerMasterPort is not set
2023-09-08 16:07:19,770 [myid:] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@477] - metricsProvider.className is org.apache.zookeeper.metrics.impl.DefaultMetricsProvider
2023-09-08 16:07:19,793 [myid:] - ERROR [main:o.a.z.s.q.QuorumPeerConfig@702] - Invalid configuration, only one server specified (ignoring)
2023-09-08 16:07:19,799 [myid:1] - INFO  [main:o.a.z.s.DatadirCleanupManager@78] - autopurge.snapRetainCount set to 3
2023-09-08 16:07:19,799 [myid:1] - INFO  [main:o.a.z.s.DatadirCleanupManager@79] - autopurge.purgeInterval set to 0
2023-09-08 16:07:19,799 [myid:1] - INFO  [main:o.a.z.s.DatadirCleanupManager@101] - Purge task is not scheduled.
2023-09-08 16:07:19,799 [myid:1] - WARN  [main:o.a.z.s.q.QuorumPeerMain@139] - Either no config or no quorum defined in config, running in standalone mode
2023-09-08 16:07:19,805 [myid:1] - INFO  [main:o.a.z.j.ManagedUtil@46] - Log4j 1.2 jmx support not found; jmx disabled.
2023-09-08 16:07:19,808 [myid:1] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@177] - Reading configuration from: /conf/zoo.cfg
2023-09-08 16:07:19,811 [myid:1] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@431] - clientPort is not set
2023-09-08 16:07:19,811 [myid:1] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@444] - secureClientPort is not set
2023-09-08 16:07:19,811 [myid:1] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@460] - observerMasterPort is not set
2023-09-08 16:07:19,811 [myid:1] - INFO  [main:o.a.z.s.q.QuorumPeerConfig@477] - metricsProvider.className is org.apache.zookeeper.metrics.impl.DefaultMetricsProvider
2023-09-08 16:07:19,811 [myid:1] - ERROR [main:o.a.z.s.q.QuorumPeerConfig@702] - Invalid configuration, only one server specified (ignoring)
2023-09-08 16:07:19,812 [myid:1] - INFO  [main:o.a.z.s.ZooKeeperServerMain@123] - Starting server
2023-09-08 16:07:19,849 [myid:1] - INFO  [main:o.a.z.s.ServerMetrics@64] - ServerMetrics initialized with provider org.apache.zookeeper.metrics.impl.DefaultMetricsProvider@4218d6a3
2023-09-08 16:07:19,861 [myid:1] - INFO  [main:o.a.z.s.a.DigestAuthenticationProvider@51] - ACL digest algorithm is: SHA1
2023-09-08 16:07:19,862 [myid:1] - INFO  [main:o.a.z.s.a.DigestAuthenticationProvider@65] - zookeeper.DigestAuthenticationProvider.enabled = true
2023-09-08 16:07:19,877 [myid:1] - INFO  [main:o.a.z.s.p.FileTxnSnapLog@124] - zookeeper.snapshot.trust.empty : false
2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -
2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -   ______                  _

2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -  |___  /                 | |

2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -     / /    ___     ___   | | __   ___    ___   _ __     ___   _ __
2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -    / /    / _ \   / _ \  | |/ /  / _ \  / _ \ | '_ \   / _ \ | '__|
2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -   / /__  | (_) | | (_) | |   <  |  __/ |  __/ | |_) | |  __/ | |
2023-09-08 16:07:19,922 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -  /_____|  \___/   \___/  |_|\_\  \___|  \___| | .__/   \___| |_|
2023-09-08 16:07:19,923 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -
 | |
2023-09-08 16:07:19,923 [myid:1] - INFO  [main:o.a.z.ZookeeperBanner@42] -
 |_|

Start Kafka: Once ZooKeeper is up and running, you can start Kafka. Kafka consists of multiple components, including brokers, topics, producers, and consumers.

• Start Kafka Container, expose PORT 9092 and setup ENV variables.

$ docker run -p 9092:9092 \
-e KAFKA_ZOOKEEPER_CONNECT=<PRIVATE_IP>:2181 \
-e KAFKA_ADVERTISED_LISTENERS=PLAINTEXT://<PRIVATE_IP>:9092 \
-e KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR=1 \
confluentinc/cp-kafka

PRIVATE_IP is the unique address assigned to your computer on the local network. You can find this address by running the ipconfig command in the terminal or command prompt.

Let's move on to the code part:

1. Now open up your sample folder in your code editor.

2. Initializing a node.js app with yarn init and press enter for all the default settings.

3. Install kafkajs as your dependency.

npm install kafkajs

Now create a client.js file in the root directory of your app and pase the below code:

const { Kafka } = require("kafkajs");

exports.kafka = new Kafka({
  clientId: "my-app",
  brokers: ["<YOUR_PRIVATE_IP>:9092"],
});

Create a Topic: Topics are the core abstraction in Kafka. They represent a particular stream of records. You can create a topic using the Kafka command-line tools or programmatically using the Kafka API.

Create a admin.js file and paste the below code:

const { kafka } = require("./client");

async function init() {
  const admin = kafka.admin();
  console.log("Admin connecting...");
  admin.connect();
  console.log("Adming Connection Success...");

  console.log("Creating Topic [rider-updates]");
  await admin.createTopics({
    topics: [
      {
        topic: "rider-updates",
        numPartitions: 2,
      },
    ],
  });
  console.log("Topic Created Success [rider-updates]");

  console.log("Disconnecting Admin..");
  await admin.disconnect();
}

init();

Produce Messages: Producers are responsible for publishing messages to Kafka topics. You can create a producer application that sends messages to a specific topic. Messages can be in any format, such as JSON, Avro, or plain text.

Create a producer.js file and paste the below code:

const { kafka } = require("./client");
const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

async function init() {
  const producer = kafka.producer();

  console.log("Connecting Producer");
  await producer.connect();
  console.log("Producer Connected Successfully");

  rl.setPrompt("> ");
  rl.prompt();

  rl.on("line", async function (line) {
    const [riderName, location] = line.split(" ");
    await producer.send({
      topic: "rider-updates",
      messages: [
        {
          partition: location.toLowerCase() === "north" ? 0 : 1,
          key: "location-update",
          value: JSON.stringify({ name: riderName, location }),
        },
      ],
    });
  }).on("close", async () => {
    await producer.disconnect();
  });
}

init();

Consume Messages: Consumers read messages from Kafka topics. You can create a consumer application that subscribes to a topic and processes the incoming messages. Consumers can be single-threaded or multi-threaded, depending on your requirements.

Create a consumer.js file and paste the below code:

const { kafka } = require("./client");
const group = process.argv[2];

async function init() {
  const consumer = kafka.consumer({ groupId: group });
  await consumer.connect();

  await consumer.subscribe({ topics: ["rider-updates"], fromBeginning: true });

  await consumer.run({
    eachMessage: async ({ topic, partition, message, heartbeat, pause }) => {
      console.log(
        `${group}: [${topic}]: PART:${partition}:`,
        message.value.toString()
      );
    },
  });
}

init();

Now let's try running our code:

• Run the admin.js file first.

$ node .\admin.js
Admin connecting...
Adming Connection Success...
Creating Topic [rider-updates]
Topic Created Success [rider-updates]
Disconnecting Admin..

• Let's try producing messages by running producer.js file.

$ node .\producer.js
{"level":"WARN","timestamp":"2023-09-08T16:27:32.852Z","logger":"kafkajs","message":"KafkaJS v2.0.0 switched default partitioner. To retain the same partitioning behavior as in previous versions, create the producer with the option \"createPartitioner: Partitioners.LegacyPartitioner\". See the migration guide at https://kafka.js.org/docs/migration-guide-v2.0.0#producer-new-default-partitioner for details. Silence this warning by setting the environment variable \"KAFKAJS_NO_PARTITIONER_WARNING=1\""}
Connecting Producer
Producer Connected Successfully
> tom south
> jerry north

• Now let's see if we can get our produced messages or not by running consumer.js file.

$ node consumer.js user-1
{"level":"INFO","timestamp":"2023-09-08T16:29:58.307Z","logger":"kafkajs","message":"[Consumer] Starting","groupId":"user-1"}
{"level":"ERROR","timestamp":"2023-09-08T16:29:58.415Z","logger":"kafkajs","message":"[Connection] Response GroupCoordinator(key: 10, version: 2)","broker":"192.168.0.101:9092","clientId":"my-app","error":"The group coordinator is not available","correlationId":2,"size":55}
{"level":"ERROR","timestamp":"2023-09-08T16:29:58.936Z","logger":"kafkajs","message":"[Connection] Response GroupCoordinator(key: 10, version: 2)","broker":"192.168.0.101:9092","clientId":"my-app","error":"The group coordinator is not available","correlationId":3,"size":55}
{"level":"ERROR","timestamp":"2023-09-08T16:29:59.634Z","logger":"kafkajs","message":"[Connection] Response GroupCoordinator(key: 10, version: 2)","broker":"192.168.0.101:9092","clientId":"my-app","error":"The group coordinator is not available","correlationId":4,"size":55}
{"level":"INFO","timestamp":"2023-09-08T16:30:04.361Z","logger":"kafkajs","message":"[ConsumerGroup] Consumer has joined the group","groupId":"user-1","memberId":"my-app-a98b5172-1bd0-4602-b0ed-7d02b25ef2ee","leaderId":"my-app-a98b5172-1bd0-4602-b0ed-7d02b25ef2ee","isLeader":true,"memberAssignment":{"rider-updates":[0,1]},"groupProtocol":"RoundRobinAssigner","duration":6051}
user-1: [rider-updates]: PART:1: {"name":"tom","location":"south"}
user-1: [rider-updates]: PART:0: {"name":"jerry","location":"north"}

Congratulations!

We're successfully getting the produced messages as consumers!

If you want to understand Kafka in more detail then go and check their docs.

Also, you can check out this awesome video by Piyush Garg about Kafka with an easy explanation!!

In this blog, we'll use Docker to simplify the process. First, we'll place our audio or video files into a Docker container running an Ubuntu system. Then, we'll install Whisper and use it to generate our transcription files like .srt, .vtt etc. for our subtitles. And then using volume mapping we can also access the generated files in our local system.

1. Let's begin by opening an empty project in VSCode.

2. Create a file named "Dockerfile" and copy the below Dockerfile content in it.

    FROM ubuntu
   
    RUN apt update && apt install ffmpeg -y && apt install python3 -y && apt install python3-pip -y
   
    RUN pip install -U openai-whisper
    RUN pip install setuptools-rust
   
    ENTRYPOINT [ "bash" ]
   

   Now we'll build our docker image from this file but make sure that your docker daemon is running.

3. After that go ahead and run the following command:

    docker build -t my-whisper .
   

   This might take a while because we're getting the Ubuntu image and setting up other things. Just hang tight and wait for it to finish!

   Now get a sample video whose subtitle you want to generate. Then create a folder in the Desktop named "sample" and place your video in this folder.

1. Now copy the path of the video file and run the below command:

    docker run -it -v <your sample folder path here>:/home/videos my-whisper
   

   After running this command, you will be in your container's bash. If you navigate to the /home/vidoes directory, you can access the sample video in your container.

   Now inside /home/videos run the below command to generate the English subtitle of Hindi video.

    whisper sample.mp4 --language Hindi --task translate
   

   After hitting enter, generating subtitles may take some time as AI models require a GPU to operate quickly. Since I am running it on a CPU, it will take longer but if you have GPU then it is going to be fast.

   As this command finishes generating subtitles you do ls and check there are some transcription files in your container and as well as in your Desktop sample folder.

   You can also test these subtitles by applying them on your video using tools like veed.io

So yayy!!. That's all in this blog and we have successfully generated our subtitles using Whisper AI model.

This blog is inspired by Piyush Garg's video go and check it out also.

If you liked this blog please give it a thumbs-up!! 👍🏼

In this blog, I'll tell you a better way to make your local servers available online with strong security. We'll use a free service called Cloudflare Tunnel to connect to the internet securely with HTTPS, and you won't have to reveal your public IP address.

What is Cloudflare Tunnel?

It's a tool that helps you securely share your stuff, like local servers, online. You don't need a public IP address or tricky router setups. When you use Cloudflare Tunnel on your computer (Windows, macOS, or Linux), it installs a lightweight helper (cloudflared). This helper links your local server with Cloudflare's network. With this, you can share things like websites, remote desktops, or other computer things safely on the internet.

This guide shows how to set up this helper on Windows, macOS, and Linux, and how you can make your local stuff available online in a safe way.

You can get a brief idea of how the Cloudflare tunnel enables access from your localhost to the internet by referring to the diagram below.

1. To use Cloudflare Tunnel

Firstly, We have to Install the cloudflared daemon on your system:

MacOS

You can install cloudflared on macOS using Homebrew:

  brew install cloudflare/cloudflare/cloudflared

Alternatively, you can download the latest Darwin amd64 release directly from the downloads page.

Linux

On Linux, you have two options:

1. Install the .deb package using dpkg:

    wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb  
    sudo dpkg -i cloudflared-linux-amd64.deb
   

2. Install the .rpm package using rpm:

    wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-x86_64.rpm
    sudo rpm -i cloudflared-linux-x86_64.rpm
   

Windows

On Windows, you can download the appropriate .exe file from the downloads page and run it to install cloudflared.

After installation, you'll need to run cloudflared.exe as an administrator to start a tunnel.
OR
You can install cloudflared on windows using winget:

winget install --id Cloudflare.cloudflared

Now Confirm that cloudflared is installed correctly by running cloudflared --version in your command line:

$ cloudflared --version
cloudflared version 2023.8.0 (built 2023-08-23-1232 UTC)

2. Initiate a Cloudflare Tunnel

Once your local development server is up and running, you can start a new Cloudflare Tunnel by executing the command cloudflared tunnel in a fresh command line window. Include the --url flag followed by your localhost URL and port as parameters. As you run this command, cloudflared will display logs in your command line interface, and you'll see a banner featuring the tunnel URL:

$ cloudflared tunnel --url http://localhost:3000
2023-08-29T14:08:20Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
2023-08-29T14:08:20Z INF Requesting new quick Tunnel on trycloudflare.com...
2023-08-29T14:08:23Z INF +--------------------------------------------------------------------------------------------+
2023-08-29T14:08:23Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2023-08-29T14:08:23Z INF |  https://finder-puppy-situated-eternal.trycloudflare.com                                   |
2023-08-29T14:08:23Z INF +--------------------------------------------------------------------------------------------+
2023-08-29T14:08:23Z INF Cannot determine default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp]
2023-08-29T14:08:23Z INF Version 2023.8.0
2023-08-29T14:08:23Z INF GOOS: windows, GOVersion: go1.20.6, GoArch: amd64
2023-08-29T14:08:23Z INF Settings: map[ha-connections:1 protocol:quic url:http://localhost:3000]
2023-08-29T14:08:23Z INF cloudflared will not automatically update on Windows systems.
2023-08-29T14:08:23Z INF Generated Connector ID: 8fa4e768-d32f-454b-b286-6cf6a38ac18b
2023-08-29T14:08:23Z INF Initial protocol quic
2023-08-29T14:08:23Z INF ICMP proxy will use 192.168.0.101 as source for IPv4
2023-08-29T14:08:23Z INF ICMP proxy will use fe80::bc0a:cd6a:780c:836a in zone Wi-Fi as source for IPv6
2023-08-29T14:08:23Z INF cloudflared does not support loading the system root certificate pool on Windows. Please use --origin-ca-pool <PATH> to specify the path to the certificate pool
2023-08-29T14:08:23Z INF Starting metrics server on 127.0.0.1:64529/metrics

In this example, the randomly-generated URL https://finder-puppy-situated-eternal.trycloudflare.com has been created and assigned to your tunnel instance. Visiting this URL in a browser will show the application running, with requests being securely forwarded through Cloudflare’s global network, through the tunnel running on your machine, to localhost:3000:

But remember, the URL you get is like a temporary ticket. When you turn off your local server, the URL stops working. The moment you use the cloudflared tunnel --url http://localhost:3000 command again, a new URL shows up. So, it's like a short-lived URL, not something that lasts forever.

If you're interested in securing a URL that remains constant over time, you can check out the next steps.

3. Setting up a permanent URL.

First, Create a Cloudflare account and add your domain name. You'll need a registered domain name to proceed.

You can check out spaceship for cheap domain names.

Now after you get the domain name, you can move forward to the Cloudflare
dashboard. Inside the Websites section, click on the button that says "Add a site."

After that, input your domain name and press the continue button.

Then, choose the Free Plan and click continue.

Next, you'll need to finish setting up your cloudflare's nameservers. You can follow these guides to help you with the setup.

Once you've configured Cloudflare's nameservers, it could take up to 48 hours for your domain to become active. Don't worry if it takes a bit longer – usually, it's ready in 5-10 minutes, but sometimes it might take up to 48 hours.

Once your website's address is up and running, we can move forward with setting up our Cloudflare tunnel.

Next, select the Zero Trust option from the sidebar.

Then go to Access > Tunnels

Then, you'll find a button that says "Create a tunnel" Just click on it.

and then provide a name for your tunnel.

Next, you'll be shown instructions for installing the connector based on your setup. Once the connector is successfully installed, you'll notice it appearing in the lower connector box, replacing the previous message "No connectors installed".

Lastly, for the final step, you need to include public hostnames for your tunnel, just like what you see in the image below.

After you've entered all the necessary information, simply click on "Save Tunnel" in the lower right corner.

Then you'll see your tunnels in the Tunnels section

Now if you open your domain name in a web browser, you'll find your local development site working there. You can even test by making code changes to see the updates on your domain. Just remember, your local development server should be running for this to work.

You can also include several routes in the public hostnames. Just click on your tunnel's name, select "configure," and go to the "public hostnames" section. From there, you can set up multiple routes, just like you see in the image below:

Great! We've done it – we've managed to make our local website accessible on the internet. This means we can send this domain name to anyone, and they can see the changes we make in real-time. It's quite awesome!

Feel free to take a look at Piyush Garg's video on how to expose your localhost to the internet. This blog essentially presents the content of that video in written form.

If you enjoyed reading this blog, I'd appreciate a thumbs up from you. Your support keeps me motivated to bring you more informative content. Thank you for being a part of this journey!

Docker Network Types

Docker has 5 built-in network drivers:

• bridge : Default network. Isolates containers but allows them to communicate.

• host: Removes isolation and attaches the container directly to the host network.

• overlay: Allows containers on different Docker hosts to communicate.

• macvlan: Assigns each container a MAC address, exposing it as a physical network interface.

• none: Disables all networking for the container.

Bridge networks are the most commonly used. Host networks are useful when binding ports directly to the host. Overlay networks span multiple Docker hosts.

Basic Network Commands

The docker network command allows you to create and manage Docker networks. The most commonly used subcommands are create, ls, inspect, rm, connect and disconnect.

• docker network create

Creates a Docker network. You can specify the network driver and options:

  docker network create --driver bridge my-network
  docker network create --driver overlay --subnet 10.0.9.0/24 my-overlay

• docker network ls

Lists all networks:

  docker network ls

$ docker network ls
NETWORK ID     NAME           DRIVER    SCOPE
338357be06bf   bridge         bridge    local
ee5e48ae4cbc   my-network     bridge    local
bfd8a38e6635   host           host      local
0cc57ea63f2a   none           null      local

• docker network inspect

Inspects a network's details:

  docker network inspect bridge

$  docker network inspect bridge
[
    {
        "Name": "bridge",
        "Id": "338357be06bf26c708d16e17417ce40f18e61db47d24df3ebfd0259f3961c490",
        "Created": "2023-08-24T17:38:23.1225357Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.17.0.0/16",
                    "Gateway": "172.17.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {},
        "Options": {
            "com.docker.network.bridge.default_bridge": "true",
            "com.docker.network.bridge.enable_icc": "true",
            "com.docker.network.bridge.enable_ip_masquerade": "true",
            "com.docker.network.bridge.host_binding_ipv4": "0.0.0.0",
            "com.docker.network.bridge.name": "docker0",
            "com.docker.network.driver.mtu": "1500"
        },
        "Labels": {}
    }
]

• docker network rm

Removes a network:

  docker network rm my-network

• docker network connect

Connects a container to a network:

  docker network connect bridge container1

You can specify the IP address and aliases:

  docker network connect --ip 172.16.238.10 --alias db bridge container1

• docker network disconnect

Disconnects a container from a network:

  docker network disconnect bridge container1

• docker network prune

Removes all unused networks:

  docker network prune

Docker Compose Networking

Docker Compose makes it easy to manage networking between containers in an application. By default, Compose sets up a single network for your app and joins all containers to it. Containers can then communicate using the service names as hostnames.

However, Compose also allows you to define custom networks with specific options. This gives you more flexibility and control over how your containers are connected.

How default networking works

By default, when you run docker compose up, Compose performs the following:

• A network called [projectname]_default is created.

• Containers are created for each service defined in the docker-compose.yml file.

• The containers join the default network and can be reached using their service names as hostnames.

For example:

  services:
    web: 
      build: .
    db:
      image: postgres

The web container can then connect to the db container using the hostname db.

Specifying custom networks

You can define custom networks in the networks section of your Compose file:

  networks:
    front-tier:
    back-tier:

Then, you can attach services to the networks:

  services:
    web:
      networks:
        - front-tier
    db:  
      networks:
        - back-tier

This isolates the web and db containers on separate networks. Only services attached to both networks can communicate.

You can also:

• Specify static IPs for containers

• Connect to external networks

• Use custom network drivers

• Configure the default network

Docker Compose networking example

Here's an example docker-compose.yml file that defines two custom networks:

  networks:
    backnet:  
    frontnet:

  services:  
    db:  
      networks:  
        - backnet  
    backend:
      networks:
        - backnet  
        - frontnet 
    proxy:
      networks:
        - frontnet

The db service is only connected to the backnet while the backend service is connected to both backnet and frontnet. This allows the backend service to communicate with both db and proxy while isolating db and proxy.

Benefits of Docker Compose networking

Docker Compose makes it easy to manage networking between containers in an application:

• Containers can communicate using service names by default

• You can isolate services on custom networks

• Compose manages port mappings between containers and the host

• Advanced options allow for more complex network topologies

Overall, Compose networking drastically simplifies the process of connecting containers and allows you to focus on your application logic.

Conclusion

Docker networking provides flexibility in how containers communicate and connect to external networks. The appropriate network type depends on your use case. Bridge networks cover the majority of scenarios, with host and overlay networks fulfilling more specialized roles.

Hope this blog helped you somehow! Let me know if you have any other questions.

Understanding CSS Grid System and Its Advantages

CSS Grid is like a master puzzle solver for creating layouts. It's a system that allows you to organize content in rows and columns, opening up a world of possibilities.

Advantages of CSS Grid

1. Layout Mastery: CSS Grid simplifies complex layouts. It's like having a blueprint that guides you in placing items on your web page.

2. Responsive Magic: Creating designs that adapt to different screen sizes becomes seamless with CSS Grid. It automatically adjusts your layout, making it look great on various devices.

3. Precision Spacing: Say goodbye to messy spacing. CSS Grid gives you control over the gaps between columns and rows, resulting in a clean and organized layout.

4. Centering Made Simple: Centering elements vertically and horizontally used to be tricky. CSS Grid makes it a breeze with straightforward alignment settings.

5. Accessibility Boost: By using semantic HTML in combination with CSS Grid, you're ensuring that your layout is accessible to everyone, including those who rely on screen readers.

Exploring Essential Properties and Functions

Properties:

• display: Transforms an element into a grid container: display: grid;.

• grid-template-columns and grid-template-rows: Defines the columns and rows in your grid layout.

• grid-template-areas: Creates named grid areas for easy placement of items.

• grid-template: A shorthand for specifying columns, rows, and areas in a single line.

• grid-auto-columns and grid-auto-rows: Sets the size of columns and rows not defined in the grid layout.

• grid-auto-flow: Controls the placement of items added to the grid.

• grid, grid-row-start, grid-column-start, grid-row-end, grid-column-end: These properties allow you to place items in specific grid areas.

• grid-row, grid-column: A shorthand for specifying the starting and ending positions of items.

• grid-area: Combines grid-row and grid-column to place items in named areas.

• row-gap and column-gap: Define spacing between rows and columns.

• gap: A shorthand for setting both row and column gaps.

Functions:

• repeat(): Repeats a pattern a certain number of times: repeat(3, 1fr); creates three equal columns.

• minmax(): Sets a size range for columns or rows: minmax(100px, 1fr); ensures a minimum width of 100px and maximum flexibility.

• fit-content(): Sizes a column or row based on its content, but not exceeding a specified value: fit-content(200px); keeps the size within 200px.

Creating Layouts with CSS Grid

Now let's put theory into practice with some layout examples:

Example 1: Basic Grid Layout

Imagine creating a simple 2x2 grid.

1. HTML:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

1. CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

.item {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

Output:

Example 2: Responsive Photo Gallery

Create a responsive photo gallery that adapts to different screens.

1. HTML:

<div class="photo-gallery">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Image 1">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Image 2">
  <!-- Add more images here -->
</div>

1. CSS:

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.photo-gallery img {
  width: 100%;
  height: auto;
}

Output:

Conclusion

CSS Grid is a game-changer in the world of web layout design. Its flexibility, responsiveness, and ease of use empower developers to create stunning and intricate layouts that adapt seamlessly across various devices. By understanding the CSS Grid system and experimenting with different layout scenarios, you'll be well on your way to mastering this essential tool for modern web development.

Feel free to experiment with the provided code examples and modify them to suit your own projects. Happy gridding!

• codepen link for the above examples

Gradients have long been a powerful tool in CSS for creating beautiful color transitions. However, until recently, animating gradients directly was a challenge. Enter the @property rule in CSS, which introduces the ability to define the type of CSS variables, including color variables. With this new capability, we can animate variables from one color to another and apply them to gradients. In this blog post, we will explore how to animate gradients using CSS variables and unlock a world of creative possibilities.

You can create a new Next.js project interactively by running the below command:

yarn create next-app

You will then be asked the following prompts:

What is your project named?  my-app
Would you like to use TypeScript with this project?  No / Yes
Would you like to use ESLint with this project?  No / Yes
Would you like to use Tailwind CSS with this project?  No / Yes
Would you like to use `src/` directory with this project?  No / Yes
Use App Router (recommended)?  No / Yes
Would you like to customize the default import alias?  No / Yes

Just select options according to the below image.

1. Overwrite your global.css file with the below CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @property --color-a {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
  }
  @property --color-b {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
  }
  @property --color-c {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
  }
}

@layer components {
  .range {
    appearance: none;
    width: 100%;
    background: white;
    height: 2px;
  }
  .range::-webkit-slider-thumb {
    appearance: none;
    background: var(--color-b);
    border: 2px solid white;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    cursor: pointer;
  }
  .range::-moz-range-thumb {
    appearance: none;
    background: var(--color-b);
    border: 2px solid white;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    cursor: pointer;
  }
}

@property Browser Support:

Read more about @property - MDN Docs

2. Then Add the below in your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      keyframes: {
        blob: {
          "0%": {
            translate: "0 0",
            rotate: "0deg",
          },
          "30%": {
            rotate: "40deg",
          },
          "50%": {
            transform: "translate(300px, 390px) scale(1.1)",
          },
          "80%": {
            rotate: "90%",
          },
        },
      },
      animation: {
        blob: "blob 8s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045)",
        "blob-reverse":
          "blob 10s infinite cubic-bezier(0.215, 0.61, 0.355, 1) reverse",
      },
    },
  },
  plugins: [],
}

3. We have all our CSS and Animations ready.

Now go to index.tsx file and copy it below:

import { useEffect, useRef, useState } from "react";

enum Feeling {
  Sad = 1,
  Neutral = 2,
  Happy = 3,
}

const feelingColorMap = {
  [Feeling.Sad]: ["#394e7a", "    #8e9ac7", "#4ee"],
  [Feeling.Neutral]: ["#22d", "#c8f8ff", "#6d2"],
  [Feeling.Happy]: ["#39f", "#f4e54d", "#fa3"],
};

const feelingLabelMap = {
  [Feeling.Sad]: "Could be better",
  [Feeling.Neutral]: "Okay",
  [Feeling.Happy]: "Happy",
};

export default function Home() {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const [feeling, setFeeling] = useState<Feeling>(Feeling.Neutral);

  useEffect(() => {
    if (!wrapperRef.current) return;

    const [a, b, c] = feelingColorMap[feeling];

    wrapperRef.current.style.setProperty("--color-a", a);
    wrapperRef.current.style.setProperty("--color-b", b);
    wrapperRef.current.style.setProperty("--color-c", c);
  }, [feeling]);

  return (
    <main className="flex min-h-[100dvh] w-full items-center justify-center">
      <div
        ref={wrapperRef}
        className="relative mx-auto aspect-[9/16] w-[360px] max-w-full overflow-hidden rounded-2xl bg-gradient-to-br from-[--color-a] via-[--color-b] to-[--color-c] p-8 text-white duration-500 ease-in [transition-property:_--color-a,_--color-b,_--color-c] before:absolute before:left-[20%] before:top-[10%] before:h-[50%] before:w-[70%] before:origin-[60%] before:animate-blob before:rounded-3xl before:bg-gradient-to-br before:from-[--color-a] before:to-[--color-b] before:blur-[50px] before:brightness-125 after:absolute after:left-[40%] after:top-[30%] after:h-[80%] after:w-[70%] after:origin-[60%] after:animate-blob-reverse after:rounded-3xl after:bg-gradient-to-br after:from-[--color-a] after:to-[--color-b] after:blur-[50px] after:brightness-125"
      >
        <div className="relative z-10">
          <h1 className="mb-12 text-5xl font-medium leading-tight">
            How are you feeling today?
          </h1>

          <h2 className="mb-4 text-center text-2xl font-medium">
            {feelingLabelMap[feeling]}
          </h2>

          <input
            className="range"
            onChange={(ev) => setFeeling(ev.target.value as unknown as Feeling)}
            type="range"
            min={1}
            value={feeling}
            max={3}
            step={1}
          />
        </div>
      </div>
    </main>
  );
}

And voila! Behold the mesmerizing animation of our gradient.

Check out the resulting output here - https://moving-gradients.vercel.app/

source code

codesandbox

This design and example are inspired by dribble and frontend.fyi with ❤️

The web is constantly evolving, with new HTML elements being introduced to enhance the user experience. One such addition is the <dialog> HTML tag, which provides a native way to create modal dialogs within web applications. In this blog post, we'll delve into the details of the <dialog> tag, understand its usage, explore some practical examples, and discuss the browser support it enjoys.

Understanding the <dialog> Tag: The <dialog> tag is an HTML5 element that represents a dialog box or a modal window within a web page. It allows developers to create interactive and contextual dialogs, such as alert boxes, confirmation dialogs, or custom pop-up windows, without relying on external libraries or frameworks.

Usage and Syntax: To utilize the <dialog> tag, you first need to define it within the HTML structure. Here's an example of the basic syntax:

<dialog id="dialog">
     <h2>Welcome to My Web App</h2>
     <p>Thank you for visiting! Enjoy your stay.</p>
</dialog>

In this example, we create a dialog with the id attribute set to "dialog" and include some content within the <dialog> tags.

Opening and Closing the Dialog: To open the dialog, you can use showModal method of dialog by accessing it using its id. To close the dialog, you can call the close() method on the dialog element accessing it by its id. Here's an example:

<dialog id="dialog">
     <h2>Welcome to My Web App</h2>
     <p>Thank you for visiting! Enjoy your stay.</p>
     <button onclick="dialog.close()">Close</button>
</dialog>
<button onclick="dialog.showModal()">Open Dialog</button>

Styling the Dialog: The appearance of the dialog box can be customized using CSS. By default, most modern browsers provide a simple and minimalistic design for the dialog box. However, you can override the default styles and apply your own to match the look and feel of your web application. We can also add animations to dialog element. Here is an example:

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exploring Dialog tag</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <dialog id="dialog">
            <form method="dialog">
                <h2>Welcome to My Web App</h2>
                <p>Thank you for visiting! Enjoy your stay.</p>
            </form>

            <button onclick="dialog.close()">Close via btn</button>
            <button type="submit" form="dialog" onclick="dialog.close()">Close via form</button>
        </dialog>

        <button onclick="dialog.showModal()">Open Dialog</button>
    </div>
</body>
</html>

CSS file:

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

button {
  background-color: #1b1c1d;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  margin: 5px;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

dialog::backdrop {
  background-color: rgba(27, 28, 29, 0.945);
}
dialog {
  opacity: 0;
  scale: 0;
  display: block;
  transition: all 0.2s ease-in-out;
}
dialog[open] {
  opacity: 1;
  scale: 2;
}

OUTPUT:

Browser Support: The <dialog> tag enjoys decent support across modern web browsers. Here's a summary of its browser compatibility as of the time of writing:

For older browsers that do not support the <dialog> tag, it will be treated as an unknown element and can be styled accordingly using CSS. Additionally, a JavaScript polyfill like "dialog-polyfill" can be used to provide a fallback implementation for unsupported browsers.

2. Popover

Building popovers, such as menus, toggletips, and dialogs, in browsers can be a complex task. However, a new set of declarative HTML APIs is being introduced to simplify this process, starting with the popover attribute in Chromium 114. This attribute allows developers to harness the browser's capabilities for managing focus, open/close states, and keyboard bindings, making popover creation more straightforward and efficient. In this point, we will explore the features and usage of the popover attribute, its benefits, and clarify its differences from modal dialogs.

Simplifying Popover Creation with the Popover Attribute: The popover attribute is designed to streamline the creation of popovers in web applications. By leveraging this attribute, developers can offload the complexity of managing various aspects of popovers to the browser itself. Here are some key features and concepts associated with the popover attribute:
As of today, this feature is experimental so in order to use it you need to enable "Experimental Web Platform features" in your browser:

• Basic Popover Structure: To create a basic popover, you need to add the popover attribute to the element containing the popover content. Additionally, you assign an ID to this element and use a popovertarget attribute with the value of the popover's ID on the element that triggers the popover.

    <button popovertarget="poppinoff" popover-trigger="hover">Open</button>
        <div id="poppinoff" popover>
        <p>The feature be poppin'</p>
    </div>
  

• Supported Functionality: The popover attribute supports several essential functionalities, including promotion to the top layer, light-dismiss functionality, default focus management, accessible keyboard bindings, and accessible component bindings. These features ensure that popovers are accessible and can be interacted with efficiently by users.

• Explicit and Implicit Popovers: By default, a popover with a popovertarget will toggle open and closed automatically. However, explicit popovers can be created using popovertargetaction. This allows developers to have more control over popover behavior and tailor it to specific requirements. Manual popovers do not force close any other element type and do not close via light-dismiss.

• CSS Anchoring: The popover attribute can be combined with CSS anchoring techniques to ensure that the popover is always anchored to its toggle trigger. This provides a consistent and visually pleasing experience for users.

Popover Attribute vs. Modal Dialogs: While the popover attribute can be used to create modal dialog-like experiences, it's important to note that there are key differences between the two. Modal dialogs typically have a higher level of interaction and restrict user input to the dialog itself until it is closed. Popovers, on the other hand, allow users to interact with other elements on the page while the popover remains open.

Benefits and Future Capabilities: The introduction of the popover attribute is part of a broader effort to enhance web application development by providing declarative APIs. These APIs aim to simplify complexity, improve accessibility, and make building web applications more manageable. The popover attribute is just the beginning, and more capabilities are expected to be added in the future.

3. WebGPU

WebGL has been the go-to solution for rendering 3D graphics on the web for over a decade. However, with the ever-increasing demand for more advanced graphics and compute capabilities, a new technology called WebGPU is emerging as its successor. WebGPU is a low-level graphics and compute API designed to provide modern, efficient, and cross-platform access to the underlying GPU hardware. In this blog post, we will explore the features and advantages of WebGPU over WebGL and discuss its potential to revolutionize web graphics rendering.

1. Enhanced Performance and Efficiency: One of the key advantages of WebGPU is its focus on performance and efficiency. Unlike WebGL, which is based on the OpenGL ES standard, WebGPU is designed to leverage the capabilities of modern GPUs more directly. This lower-level access allows developers to achieve better performance and more fine-grained control over the rendering pipeline, resulting in smoother and more responsive graphics.

2. Cross-Platform Support: WebGPU aims to be a cross-platform API that works consistently across different devices and operating systems. While WebGL has varying levels of support and performance across different browsers, WebGPU aims to provide a standardized interface that works seamlessly across platforms. This will enable developers to create high-quality, immersive graphics experiences that perform consistently on a wide range of devices.

3. Support for Advanced Graphics Features: WebGPU introduces several new features and capabilities that go beyond what WebGL offers. These include support for ray tracing, virtual reality (VR), augmented reality (AR), machine learning, and more. By exposing these advanced graphics and compute capabilities, WebGPU opens up a world of possibilities for creating visually stunning and interactive web experiences.

4. Safety and Security: WebGPU also emphasizes safety and security. The API is designed with security in mind, implementing measures to prevent potential security vulnerabilities associated with low-level access to the GPU. Additionally, WebGPU incorporates modern memory management techniques, reducing the risk of crashes and memory-related issues.

5. Community and Adoption: WebGPU is developed as a collaborative effort between major browser vendors, including Apple, Google, Microsoft, and Mozilla. This collaborative approach ensures that the API is designed to meet the needs of developers and is supported across a wide range of browsers. The WebGPU community is growing rapidly, with active discussions, contributions, and ongoing development to refine and expand the capabilities of the API.

4. Container Queries

Container queries are an exciting new addition to CSS that revolutionize how we apply styles based on the size of an element's container. Instead of relying solely on media queries, which are based on viewport size, container queries allow us to target elements based on the dimensions of their containers. This offers more granular control and enables components to adapt dynamically to different container sizes.

To use container queries, we first need to establish a containment context on an element. This is done by applying the container-type property with a value of size, inline-size, or normal. This tells the browser that we intend to query the dimensions of the container later on.

Consider the following example:

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

You can create a containment context using the container-type property:

.post {
  container-type: inline-size;
}

Once we have a containment context, we can define container queries using the @container at-rule. This rule applies styles to elements based on the size of the nearest ancestor with a containment context. We can also give a name to a containment context using the container-name property, allowing us to target a specific container in a @container query.

In the example below, a larger font size will be applied to the card title when the container's width exceeds 700px:

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

.post {
  container-type: inline-size;
  container-name: sidebar;
  /* Shorthand container syntax */
  /* container: sidebar / inline-size; */ 
}

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

Container query lengths units

When applying styles to a container using container queries, you can use container query length units. These units specify a length relative to the dimensions of a query container. Components that use units of length relative to their container are more flexible to use in different containers without having to recalculate concrete length values.

The container query length units are:

• cqw: 1% of a query container's width

• cqh: 1% of a query container's height

• cqi: 1% of a query container's inline size

• cqb: 1% of a query container's block size

• cqmin: The smaller value of either cqi or cqb

• cqmax: The larger value of either cqi or cqb

    @container (min-width: 700px) {
      .card h2 {
        font-size: max(1.5em, 1.23em + 2cqi);
      }
    }
  

It's worth noting that container queries are still a relatively new feature and not fully supported in all browsers. However, for browsers that don't yet support container queries, we can use CSS grid and flexbox to achieve a similar effect. By using these layout techniques, we can create responsive components like the card component mentioned in your example, adapting their size and arrangement based on the available space.
Read more about container queries here

5. Color Mix

The color-mix() functional notation in CSS is a powerful feature that allows developers to mix two color values and obtain the result of the mix in a specified colorspace. It provides a flexible way to create interesting color effects and transitions on web pages. Let's take a closer look at the syntax and usage of color-mix().

Syntax of color-mix(): The syntax of color-mix() includes the following values:

color-mix(color1, color2, colorspace, hue-interpolation-method, [percentage1], [percentage2])

• color1 and color2: These are the two color values that will be mixed together. They can be any valid CSS color value, such as hexadecimal, RGB, HSL, or named colors.

• colorspace: Specifies the colorspace in which the mix will be performed. This can be one of the predefined color spaces supported by CSS, such as sRGB, linearRGB, or lab.

• hue-interpolation-method: Specifies how the hue values of the colors will be interpolated during the mix. The available options are linear, clock-wise, counter-clockwise, shortest, and longest.

• percentage1 and percentage2 (optional): These values indicate the amount of each color to be mixed. They are expressed as percentages and determine the ratio of each color in the final mix. If not provided, an equal distribution (50% each) is assumed.

Usage of color-mix(): To use the color-mix() functional notation, you can apply it to any CSS property that accepts a color value. Here's an example of its usage:

.element {
  background-color: color-mix(red, blue, sRGB, linear, 30%, 70%);
}

In this example, the background-color of the .element will be a mix of red and blue colors, performed in the sRGB colorspace using a linear hue interpolation method. The resulting mix will contain 30% red and 70% blue, creating a unique color blend.

6. CSS Nesting

CSS Nesting is a feature that enables developers to nest CSS rules within their parent selectors. This nesting mimics the HTML structure and helps organize styles in a hierarchical manner. Previously, developers had to rely on preprocessors like SCSS to achieve this nesting functionality. However, with CSS Nesting becoming a native feature, it is now possible to utilize this powerful technique directly in CSS.

Browser Support:

Benefits of CSS Nesting:

1. Improved Code Organization: CSS Nesting allows developers to group related styles together, making it easier to locate and modify specific styles. Instead of scattering styles across the stylesheet, nesting brings them closer, reducing code redundancy and enhancing code organization.

2. Enhanced Readability: By mirroring the HTML structure, nested CSS rules provide better context and readability. Developers can easily identify the relationship between selectors and understand the hierarchy of styles, resulting in more maintainable and intuitive code.

3. Modular Stylesheets: Nesting promotes modularity in CSS. Styles that are specific to a particular component or section can be grouped together within a parent selector, encapsulating them and making stylesheets more modular and reusable.

4. Efficient Media Query Integration: CSS Nesting simplifies the integration of media queries. Previously, developers had to repeat selectors for different media queries, leading to redundant code. With nesting, media queries can be nested within the corresponding selector, reducing duplication and enhancing efficiency.

Using CSS Nesting: CSS Nesting utilizes the nesting selector syntax, which includes the & character to refer to the parent selector. Here's an example of how CSS Nesting can be applied:

.parent {
  /* Parent styles */

  & .child {
    /* Nested child styles */
  }

  & .sibling {
    /* Nested sibling styles */
  }
}

In the above example, the .child and .sibling styles are nested within the .parent selector using the & syntax. This approach provides a clear and concise representation of the hierarchical relationship between selectors.

7. Color Fonts

Color fonts, also known as chromatic or multicolor fonts, are typefaces that incorporate graphic properties within the font file itself. Unlike traditional fonts that consist of outline shapes, color fonts include additional information such as bitmap images, vector shapes, gradients, textures, and even animations. These fonts break free from the limitations of monochromatic glyphs, allowing designers to unleash their creativity and explore new visual possibilities.

1. Visual Interest: Color fonts offer a visually engaging typography experience, allowing designers to captivate their audience with vibrant colors, gradients, and textures. By leveraging these elements, you can create eye-catching headlines, logos, and other textual elements that demand attention.

2. Personalization: Color fonts provide an excellent opportunity to infuse your design with personality and establish a unique brand identity. By incorporating specific color schemes and visual styles into your typography, you can reinforce brand recognition and create a cohesive visual experience.

3. Accessibility: Color fonts are compatible with assistive technologies, making them accessible to users with disabilities. They can be read by screen readers and support copy-and-paste and find-in-page functionality, ensuring that your content remains inclusive and available to all users.

Considerations when Using Color Fonts:

1. Scalability: While color bitmap fonts can scale correctly up to a specific size, they may appear pixelated beyond that point. It's essential to test and optimize the font size to maintain optimal visual quality.

2. File Size: Color font files tend to be larger than traditional fonts due to the additional graphical information they contain. Consider the impact on page loading times and choose the appropriate file formats and compression techniques to mitigate this issue.

3. Contrast and Legibility: Ensure that your color fonts maintain sufficient contrast against the background to ensure readability. Test the font on different devices and screen sizes to verify its legibility across various contexts.

Utilizing Color Fonts:

1. Selection: Choose color fonts that align with your design objectives and complement your overall aesthetic. Many reputable font foundries and online platforms offer a wide range of free and premium color fonts to choose from.

2. Implementation: Incorporate color fonts into your web designs using the @font-face rule in CSS. Import the font file and apply it to the desired web elements to enjoy the visual richness it offers.

3. Balance and Contrast: Avoid overusing color fonts and ensure that they harmonize with the overall design. Pay attention to the contrast between the font and the background to maintain legibility and readability.

8. Web Vitals Extension For Chrome

As web developers, we strive to deliver exceptional user experiences by optimizing the performance of our websites. To aid in this endeavor, Google has introduced the Web Vitals extension, a powerful tool that allows developers to assess and diagnose performance issues directly from the browser. We will explore the features of the Web Vitals extension, understand how it works internally, and discover how it helps identify specific elements causing performance bottlenecks.

The Web Vitals extension is a browser extension available for Google Chrome that integrates with the Chrome DevTools. It provides real-time insights into various performance metrics, helping developers measure, analyze, and improve the user experience of their web applications. The extension focuses on three core web vitals metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Key Features of the Web Vitals Extension:

1. Performance Analysis: The Web Vitals extension displays comprehensive performance metrics for individual pages, allowing developers to assess the overall performance of their website. It provides insights into LCP, FID, and CLS scores, along with detailed breakdowns and suggestions for improvement.

2. Element-Level Performance Tracking: One of the most powerful features of the Web Vitals extension is its ability to pinpoint specific elements causing performance issues. By selecting an element on the page, developers can analyze the associated metrics, such as element-level LCP, FID, and CLS scores, helping them identify and address performance bottlenecks more effectively.

3. Real-Time Monitoring: The extension constantly monitors web vitals metrics as users interact with the website, providing real-time feedback on performance changes. This feature enables developers to identify performance regressions and quickly take corrective actions.

4. Diagnostic Information: The Web Vitals extension offers diagnostic information and actionable recommendations to help developers understand the underlying causes of performance issues. It suggests best practices and optimizations specific to the identified problems, empowering developers to make informed decisions for improving performance.

How the Web Vitals Extension Works: The Web Vitals extension leverages the browser's native Performance API, which captures various performance metrics during page loading and user interactions. It utilizes this data to calculate the LCP, FID, and CLS scores. By analyzing the timing and interaction data collected by the Performance API, the extension identifies the elements responsible for specific performance issues.

When a developer selects an element using the extension's inspection tool, it uses various techniques, such as element size and position tracking, event handling, and DOM mutation monitoring, to determine the element-level performance metrics. These metrics provide granular insights into how individual elements impact overall page performance.

Now let's talk about some javascript features

9. Javascript Array.at(-1)

The Array.at() method is a relatively new addition to JavaScript, it allows you to access an element from an array by using a negative index, effectively retrieving elements from the end of the array.

To access the last element of an array using Array.at(-1), you can follow this code example:

const arr = ['apple', 'banana', 'orange'];
const lastElement = arr.at(-1);
const secondLastElement = arr.at(-2);
const thirdLastElement = arr.at(-3);

console.log(lastElement); // Output: 'orange'
console.log(secondLastElement); // Output: 'banana'
console.log(thirdLastElement); // Output: 'apple'

10. Javascript structuredClone() method

It allows you to create a deep copy of an object, including complex data types like dates, regular expressions, and more.

To use the structuredClone method to copy an object, you can follow this code example:

const obj = { name: 'John', age: 30 };
const copy = structuredClone(obj);

console.log(copy); // Output: { name: 'John', age: 30 }

In the above example, we have an object obj with properties name and age. By calling structuredClone(obj), we create a deep copy of the object and assign it to the copy variable. The copy object will have the same properties and values as the original obj.

Before the introduction of the structuredClone method, deep copying an object in JavaScript was a bit more complicated. Developers would typically use methods like JSON.stringify and JSON.parse to accomplish this. Here's an example of how it was done before the structuredClone method:

const obj = { name: 'John', age: 30 };
const copy = JSON.parse(JSON.stringify(obj));

console.log(copy); // Output: { name: 'John', age: 30 }

In the previous approach, JSON.stringify(obj) converts the object to a JSON string representation, and JSON.parse() then parses the JSON string back into an object, effectively creating a deep copy. However, this method has some limitations. It doesn't support complex data types like dates, regular expressions, or functions. Additionally, it discards undefined properties, converts numbers to strings, and loses object references.

The structuredClone method, on the other hand, is designed to handle complex data types and create an exact replica of the original object, including all its properties and references.

11. Transform Stream

The TransformStream interface in the Streams API allows you to pipe the output of one fetch call into another. This can be useful when you need to transform or modify the data received from a server before sending it to another server or processing it further.

Here's an example of how you can pipe one fetch call into another using TransformStream:

// Create a new TransformStream
const transformStream = new TransformStream();

// Get the readable and writable ends of the transform stream
const { readable, writable } = transformStream;

// Create a fetch request
const request1 = fetch('https://api.example.com/data');

// Pipe the response from the first fetch call into the transform stream
request1
  .then(response => response.body.pipeTo(writable))
  .catch(error => console.error('Error:', error));

// Create a new fetch request using the transformed data from the first fetch call
const request2 = fetch('/api/endpoint', {
  method: 'POST',
  body: readable
});

// Process the response from the second fetch call
request2
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

In this example, we create a TransformStream and get its readable and writable ends. We then initiate a fetch request (request1) to retrieve data from an API endpoint. Instead of directly consuming the response, we pipe the response body into the writable end of the TransformStream.

The transform stream allows us to apply any necessary transformations or modifications to the data received from the first fetch call. These transformations can be defined by implementing a transform function that takes chunks of input data and produces transformed output data. The specifics of the transformation logic will depend on your use case.

Once the transformation is complete, we initiate a second fetch request (request2) using the transformed data from the readable end of the transform stream. This allows us to send the modified data to another server or process it further as needed.

By using TransformStream to pipe the output of one fetch call into another, you can efficiently handle data transformation and chaining of multiple asynchronous operations. This provides greater flexibility and control over how data is processed and transmitted in your application.

12. Import Maps

Import maps in JavaScript is a feature that allows you to declare a collection of JavaScript modules and their associated URLs all at once. It provides a way to map module specifiers to specific URLs, enabling you to easily manage and organize your module dependencies.

With import maps, you can define a map of module specifiers and their corresponding URLs in a JavaScript file called an "import map". This map acts as a central configuration for your module imports, making it easier to maintain and update module dependencies across your application.

Here's an example of how import maps are used:

// import-map.js
const importMap = {
  imports: {
    'module-a': '/path/to/module-a.js',
    'module-b': '/path/to/module-b.js',
    'module-c': '/path/to/module-c.js'
  }
};

// main.js
import { foo } from 'module-a';
import { bar } from 'module-b';
import { baz } from 'module-c';

// index.html
<script type="importmap" src="/path/to/import-map.js"></script>
<script type="module" src="/path/to/main.js"></script>

Using import maps offers several benefits. It centralizes and simplifies the management of module dependencies by providing a single configuration file. It also allows for easier refactoring and updating of module URLs since changes can be made in the import map without modifying individual import statements throughout the codebase.

Import maps are supported in modern browsers, but it's important to note that they are still considered an experimental feature and may not be available in all environments or older browsers. Therefore, it's recommended to check the browser compatibility before relying on import maps in production applications.

13. JSON Modules of TC39 proposal

The TC39 proposal we are referring to is called "JSON Modules" or "import assertions." It is an ongoing proposal to enhance the JavaScript module system by allowing direct importing of JSON data into JavaScript files.

Currently, in JavaScript, when you import a JSON file, it is treated as a regular JavaScript module. You need to explicitly parse the JSON data using JSON.parse() to access the actual JSON object. The JSON Modules proposal aims to simplify this process by enabling direct import of JSON as a first-class module type.

Here's an example of how JSON Modules would work:

// data.json
{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

// main.js
import data from './data.json' assert { type: 'json' };

console.log(data.name); // "John Doe"
console.log(data.age); // 30
console.log(data.city); // "New York"

The JSON Modules proposal simplifies the process of importing and working with JSON data in JavaScript. It eliminates the need for explicit parsing and provides a more intuitive and streamlined way to import JSON into your code.

It's important to note that the JSON Modules proposal is still a stage 2 proposal in the TC39 process at the time of my knowledge cutoff. This means it is actively being discussed and evaluated, but it has not yet reached the final stage of standardization. As with any proposal, it may undergo changes before it becomes an official part of the JavaScript language. Therefore, it's crucial to stay updated on the status and adoption of the proposal in order to determine its availability in your specific JavaScript environment.

14. Transform Props

Now we also have individual CSS transform properties

.element {
  translate: 69% 0;
  rotate: 69deg;
  scale: 1.5;
}

it's important to note that the individual transform properties are part of the CSS transform property, which is supported by modern web browsers. However, older browsers may have limited or no support for these properties. Therefore, it's essential to consider browser compatibility and provide fallbacks or alternative approaches for older browser versions if needed.

15. Trig Functions

We have new trigonometric functions in CSS, which is incredibly useful if we have circles in our design.

.circum-size {
    translate: 
            calc(cos(30deg) * 100px)
            calc(sin(30deg) * 100px * -1);
}

The core three trig functions are:

• cos() : Returns the cosine of an angle, which is a value between -1 and 1 .

• sin() : Returns the sine of an angle, which is a value between -1 and 1 .

• tan() : Returns the tangent of an angle, which is a value between -∞ and +∞.

Read more here

16. Initial Letter

There is also a CSS property called initial-letter that allows us to manipulate the first letter of an article or block of text, similar to the way it is done in a magazine. By using the initial-letter property, we can increase the size of the first letter to create a visually appealing and attention-grabbing effect.

.article {
    initial-letter: 5 4;
}

Read more here

17. Viewport Units

We also now have new viewport units specifically designed for mobile devices, which consider the presence of opened toolbars. These new units, such as lvh,lvw, svw and svh allow us to create layouts and designs that adapt seamlessly to different screen sizes, while taking into account the space occupied by toolbars when they are opened. This ensures that our web pages and applications remain fully responsive and optimized for mobile users, providing a better user experience.

.article {
    height: 100lvh;
    width: 100svw;
}

Read more here

18. focus-visible:

In the realm of accessibility, it's important to prioritize user experience for individuals who rely on assistive technologies or keyboard navigation. That's where the focus-visible pseudo-class comes into play. Unlike the traditional :focus pseudo-class, which applies styling to all focused elements, focus-visible specifically targets elements that receive focus from non-mouse inputs (such as keyboard navigation). This ensures that focus styles are only visible when they are needed, making the user interface more intuitive and reducing visual noise. By utilizing focus-visible, we can create a more accessible and inclusive experience for all users, especially those with disabilities or limited dexterity.

/* focus with tab key  */
.btn:focus-visible {
  outline: 2px solid darkkhaki;
}

/* mouse click  */
.btn:focus:not(:focus-visible) {
  outline: none;
}

19. Inert

The inert property is a new addition to CSS that allows us to indicate that certain elements are incapable of receiving focus or being interacted with. By applying the inert property to specific elements, such as static or non-interactive components, we can visually convey that they lack the ability to be focused on, eliminating any potential confusion for users. While the visual appearance may appear "boring" or less interactive, it serves as an important visual cue, making it clear to users that these elements are not intended for direct interaction. The inert property proves to be a valuable tool in managing focus and providing a more intuitive user experience by ensuring that interactive elements stand out while non-interactive ones gracefully recede into the background.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

/* CSS */
[inert] > * {
  opacity: 0.5;
}

20. View Transition API

The View Transition API is an exciting new addition to the web development landscape, offering the ability to create captivating page transitions that were previously only available in native mobile apps. With this API, developers can now achieve seamless and visually appealing transitions between pages in single-page applications (SPAs), with future plans to extend support to all same-origin pages.

The core animation effect provided by the View Transition API is a simple cross-fade between the current page and the incoming page. However, the true power of this API lies in its flexibility, allowing developers to create more complex and dynamic transitions using CSS or JavaScript. By taking snapshots of the current and incoming pages, developers can animate specific elements or layers separately, enabling a wide range of transition effects beyond simple fades.

It's important to note that the View Transition API is currently only partially supported in Chromium-based browsers. While this limits its immediate usability, developers can still experiment with the API and leverage it in controlled environments like Electron projects. As the web continues its journey toward offering native-like experiences, features like the View Transition API play a crucial role in making progressive web apps (PWAs) and websites feel more fluid and engaging.

The author recommends checking for API support and implementing fallback solutions for browsers that do not support it. However, they express a desire to avoid excessive JavaScript checks for legacy browser compatibility. Once full support for page-to-page transitions is available in at least one browser, it will become much easier to adopt the View Transition API by simply adding a small amount of CSS that can be safely ignored by legacy browsers. Until then, developers are encouraged to explore and prepare for the eventual widespread adoption of this exciting feature.

Read more here

21. Animation Timeline

The animation-timeline CSS property is a powerful feature that allows developers to control the progress of an animation by specifying a timeline. This timeline can be associated with the current position on a scrollbar, known as a scrollbar timeline.

There are two types of scroll timelines that can be used with the animation-timeline property: named scroll timelines and anonymous scroll timelines. A named scroll timeline is explicitly defined by applying the scroll-timeline-name property to an element and giving it a custom identifier. On the other hand, an anonymous scroll timeline is set using the scroll() functional notation. This notation indicates that the timeline is provided by some ancestor element of the current element.

The animation-timeline property can be set individually, or it can be included as part of the animation shorthand property. When set to none, the animation is not associated with any timeline. Setting it to auto means that the animation's timeline is determined by the document's default DocumentTimeline.

To provide a named scroll timeline, you can define a scroll timeline with a specific name using the scroll-timeline-name property on an element. For example, you can create a scroll timeline named squareTimeline on an element with the id container. Then, you can apply this named scroll timeline to an animation on the #square element using the animation-timeline: squareTimeline declaration.

For anonymous scroll timelines, you can use the scroll() functional notation to indicate that the timeline is provided by the nearest parent element that has a scrollbar. This notation allows you to animate an element based on the position of the scrollbar. The anonymous scrollbar timeline is applied to the element using the animation-timeline property.

It's important to note that the scroll() functional notation is still experimental, and browser support may vary. The examples provided demonstrate how to use both named and anonymous scroll timelines, allowing you to create more advanced and interactive animations that are synchronized with scroll positions.

Overall, the animation-timeline CSS property provides a powerful mechanism to control animations based on scroll positions, offering more flexibility and interactivity in web animations.

<style>
  /* Define a named scroll timeline */
  #container {
    scroll-timeline-name: squareTimeline;
    overflow: scroll;
    height: 200px;
    width: 200px;
  }

  /* Apply the named scroll timeline to the animation */
  #square {
    animation: moveSquare 3s infinite;
    animation-timeline: squareTimeline;
    background-color: red;
    height: 50px;
    width: 50px;
  }

  /* Define keyframes for the animation */
  @keyframes moveSquare {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
  }
</style>

<div id="container">
  <div id="square"></div>
</div>

In this example, we have a container element with the id container, which represents the named scroll timeline called squareTimeline. We set the scroll-timeline-name property on this element and give it a scrollbar by applying the overflow: scroll style. The container has a fixed height and width to demonstrate scrolling.

Inside the container, we have a square element with the id square. We define an animation called moveSquare using @keyframes, which moves the square from left to right. To associate this animation with the named scroll timeline, we set animation-timeline: squareTimeline on the square element. The animation is set to run indefinitely with animation: moveSquare 3s infinite.

As a result, the square element will move horizontally within the container as the scrollbar is scrolled. The animation is synchronized with the scroll position on the named scroll timeline, providing an interactive and dynamic effect.

You can experiment with this code and observe how the square element animates based on the scroll position within the container.

This blog is inspired by Fireship's video

If you found this blog helpful or inspiring, show your support by hitting the like button! ❤️
I'll keep bringing such type of content.

🌟 A stellar 31,000+ GitHub stars.

💥 A whopping 37 million downloads and counting.

📦 A minuscule bundle size of only 1.16kb.

⚡️ Over a million n' half weekly downloads, proving its widespread adoption.

So, if the thought of exploring a new frontend tool sends shivers down your spine, these impressive stats should sway you towards giving Zustand a try. It's a lightweight powerhouse that delivers exceptional performance and state management prowess.

1. Simplicity:

Zustand provides a simple and intuitive API, making it easy to understand and use. It eliminates the need for complex setup and boilerplate code, allowing developers to focus on their application logic.

2. Minimalistic:

Zustand has a small footprint and minimal bundle size, resulting in faster loading times and improved performance. It avoids unnecessary abstractions and layers, providing a lightweight state management solution.

3. Performance:

Zustand leverages a minimal reactivity model and selective updates. It only re-renders components that depend on the changed state, optimizing performance by reducing unnecessary renders. This approach can lead to better application performance, especially in large-scale applications.

4. Flexibility:

Zustand offers flexibility in structuring and organizing state. Developers can use simple objects, classes, or any other data structure to define and manage state. It allows granular control over state updates and encourages a more modular and composable approach.

5. Type Safety:

Zustand has excellent TypeScript support, providing type safety and enhanced code quality. Developers can benefit from static type checking, autocompletion, and better documentation, reducing the likelihood of runtime errors and improving overall development productivity.

6. Developer Experience:

Zustand integrates well with popular development tools, such as React DevTools and Redux DevTools Extension. It offers a great developer experience with features like time-travel debugging, hot module replacement, and easy debugging of state changes.

7. Scalability:

Zustand is suitable for small to large-scale applications. It provides features like derived state, middleware support, and selectors, enabling developers to efficiently manage complex state structures and scale their applications without sacrificing performance.

8. React Hooks Compatibility:

Zustand seamlessly integrates with React Hooks, allowing developers to leverage the power of Hooks for managing state. It follows the React philosophy of functional components and embraces the declarative nature of React.

9. Active Community:

Zustand has a growing and active community, with regular updates and contributions from developers worldwide. The community provides support, shares knowledge, and creates extensions and plugins, enhancing the ecosystem around Zustand.

Example Code:

import React from 'react';
import { create } from 'zustand';

// Define the store type
type CounterStore = {
  count: number;
  increment: () => void;
  decrement: () => void;
};

// Create the Zustand store
const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// Component using the Zustand store
const Counter: React.FC = () => {
  const [ count, increment, decrement ] = useCounterStore(
        (state) => [ state.count, state.increment, state.decrement ]
    );

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In this example, we create a Zustand store using the create function, defining an initial state and actions to modify the state. The useCounterStore hook provides access to the store's state and actions.

Within the Counter component, we use the useCounterStore hook to retrieve the count state value and the increment and decrement actions. Any modifications to the state trigger automatic re-renders of the component, ensuring a reactive UI.

This concise and declarative approach to state management is one of the many benefits of Zustand. It eliminates the need for complex setup and boilerplate code, allowing developers to focus on building their applications efficiently.

By leveraging Zustand's simplicity, performance optimizations, flexibility, and developer-friendly features, developers can create efficient and maintainable React applications with a smooth state management experience.

Learn more about Zustand: https://github.com/pmndrs/zustand

Follow Me and Let's Keep the Fun Rolling! If You Enjoyed the Read, Hit that Follow Button and Join the Hilarity! :)

1. The Dawn of Frontend: A Glimpse into Static HTML

Close your eyes and imagine the early days of the web. Picture a world of static HTML pages, where content reigned supreme. Developers harnessed the power of HTML tags to structure information, while basic CSS styles added a touch of visual appeal. It was a simple yet pivotal era that laid the foundation for what was to come.

2. Unleashing the Power of Interactivity: Enter JavaScript

In this chapter, we witness the emergence of JavaScript, the dynamic force that breathed life into static web pages. JavaScript's arrival introduced a new realm of possibilities, allowing developers to create engaging experiences through animations, form validations, and interactive menus. The web was no longer a static landscape—it became a playground for creativity.

3. CSS: The Art of Style and Presentation

As the web continued to evolve, developers sought better ways to control the visual aesthetics of websites. The introduction of CSS brought forth a revolution. By separating content from presentation, frontend developers gained the ability to define styles, layouts, and positioning. This newfound power transformed websites into visually stunning works of art.

4. Taming the Wild West: Web Standards and Cross-Browser Compatibility

Picture the frontier of the web, where different browsers roamed freely, each with its own interpretation of HTML and CSS. This chapter focuses on the rise of web standards and the quest for cross-browser compatibility. With the development of the Document Object Model (DOM) and W3C recommendations, developers embarked on a mission to unify the web, ensuring consistent experiences for users regardless of their browser of choice.

5. From Chaos to Order: The Rise of CSS Frameworks

In this chapter, we witness the dawn of CSS frameworks, heralding an era of efficiency and consistency in frontend development. Frameworks like Bootstrap and Foundation provided developers with pre-designed components, responsive grids, and a standardized approach to building websites. With these powerful tools at their disposal, developers could rapidly create stunning interfaces while maintaining consistency across projects.

6. The JavaScript Renaissance: Enter the World of Frameworks

Prepare to be amazed as we delve into the golden age of JavaScript frameworks. AngularJS, React, and Vue.js take center stage, introducing us to component-based architecture, virtual DOM manipulation, and reactive data binding. These frameworks empower developers to build complex, interactive web applications with ease, revolutionizing the frontend landscape.

7. Embracing the Mobile Revolution: Mobile-First Design and Responsive Web

As smartphones and mobile devices became ubiquitous, a paradigm shift occurred in frontend development. Mobile-first design took the stage, placing emphasis on optimizing websites for mobile devices before scaling up for larger screens. Responsive web design techniques, such as fluid grids and media queries, became crucial for delivering seamless experiences across a multitude of devices.

8. Performance Matters: Unlocking the Power of Optimization

Speed and performance optimization take the spotlight in this chapter. Discover the techniques employed by frontend developers to ensure lightning-fast page load times. From minification and caching to lazy loading and asynchronous scripts, these optimizations enhance user experiences and keep visitors engaged in our fast-paced digital world.

9. The Rise of Progressive Web Apps (PWAs)

Enter the age of Progressive Web Apps (PWAs), where the web meets the power of native applications. Explore how PWAs combine the best of both worlds, offering offline functionality, push notifications, and the ability to be installed on the user's home screen. This groundbreaking technology paves the way for immersive, app-like experiences on the web.

Conclusion:

As we conclude this captivating exploration of the evolution of frontend development, we hope you've gained a deeper appreciation for the journey that has shaped the web as we know it today. From the humble beginnings of static HTML to the immersive experiences of mobile-first design and performance optimization, frontend development has evolved in remarkable ways.

If you enjoyed this blog and want to stay updated on the latest trends and insights in frontend development, we invite you to follow us on Hashnode. Join our community of passionate developers, share your thoughts, and engage in discussions about the ever-changing world of frontend development. Together, let's continue to push the boundaries of what's possible in creating exceptional user experiences on the web.

Safe travels on your own frontend development journey, and looking forward to connecting with you on Hashnode!

Follow me on Hashnode: https://hashnode.com/@hemantwasthere

1. Use a Framework

One of the most important aspects of frontend development is choosing a framework. Frameworks like React, Angular, and Vue.js provide a solid foundation for building responsive and efficient web applications. These frameworks offer a wide range of pre-built components and modules, allowing developers to save time and focus on the core functionality of the application.

2. Keep it Simple

When designing a frontend, it's important to keep things simple. Avoid using too many design elements or complex animations that could slow down the page load time. Use a clean and minimalist design that is easy on the eyes and easy to navigate. Remember, less is often more in web design.

3. Make it Responsive

In today's world, users access websites on a variety of devices, from desktop computers to smartphones and tablets. Therefore, it's crucial to design a responsive frontend that adapts to different screen sizes. Use responsive design techniques like flexible grids and media queries to ensure that your website looks great on all devices.

4. Optimize Page Load Time

Page load time is a critical factor in user experience. Users expect websites to load quickly, and if they don't, they're likely to leave and never come back. As a frontend developer, it's your responsibility to optimize the website's performance by reducing image and file sizes, minifying code, and leveraging browser caching.

5. Use Consistent Design Patterns

Using consistent design patterns throughout the website helps to create a cohesive user experience. This means using the same color scheme, typography, and layout throughout the website. Consistency makes it easier for users to navigate the website and find what they're looking for.

6. Test Across Multiple Browsers

Different browsers have different rendering engines, which means that a website might look different in different browsers. To ensure that your website looks great across all browsers, it's important to test it thoroughly using a range of browsers, including Chrome, Firefox, Safari, and Internet Explorer.

7. Accessibility

Web accessibility is the practice of making websites accessible to everyone, regardless of their physical abilities. As a frontend developer, you should ensure that your website is accessible by using semantic HTML tags, alt text for images, and providing captions for videos.

8. Consistent naming conventions

Consistent naming conventions are an important aspect of writing readable and maintainable code. When naming variables, functions, and classes, it is important to choose names that clearly describe their purpose and functionality. Using meaningful and descriptive names makes it easier for other developers to understand the code and reduces the likelihood of confusion or mistakes.

Here are some best practices for naming conventions:

1. Use descriptive names that accurately reflect the purpose and functionality of the variable, function, or class.

2. Avoid abbreviations or acronyms that may not be clear to others. If you do use them, make sure they are well-known and commonly used.

3. Use camelCase for variable and function names (e.g. myVariable, myFunction).

4. Use PascalCase for class names (e.g. MyClass).

5. Use all caps with underscores for constants (e.g. MY_CONSTANT).

6. Use verbs for function names and nouns for variable and class names.

7. Use singular names for variables and classes, and plural names for arrays or collections.

8. Be consistent with your naming conventions throughout your codebase.

9. Organize Code into Reusable Components

Yes, organizing code into reusable components is a fundamental principle of frontend development. It allows developers to create modular and scalable code, reducing the need for duplication and making it easier to maintain and update the codebase.

React and Angular are both popular JavaScript frameworks that enable developers to create reusable components easily. React components are based on a declarative programming model, making it easy to build complex UIs by breaking them down into smaller, reusable components. Angular components, on the other hand, provide an encapsulated view of a part of the UI, allowing developers to create reusable components that can be easily composed to build complex UIs.

Breaking code down into reusable components also promotes code consistency and reusability across different projects. For example, if you have created a component that displays a user profile in one project, you can reuse the same component in other projects where you need to display user profiles. This reduces the amount of time and effort required to develop new components from scratch, making development faster and more efficient.

In summary, organizing code into reusable components is a best practice in frontend development that promotes modularity, scalability, and reusability. Tools like React and Angular make it easy to create reusable components that can be used across projects, reducing development time and effort and promoting code consistency.

10. Use a Code Linter

Using a code linter is an essential best practice in frontend development. A code linter is a tool that scans your code and detects any errors or issues that may cause problems in the future. It enforces coding standards, promotes consistency, and helps identify potential problems early on in the development process.

ESLint and JSLint are two popular code linters used in frontend development. ESLint is a highly configurable linter that is widely used in the JavaScript community. It can be customized to enforce coding standards specific to your project, and it supports a wide range of plugins and rules to catch errors and promote best practices. JSLint, on the other hand, is a more rigid linter that enforces a strict set of coding standards. It can be useful for developers who want to ensure that their code follows a specific set of guidelines.

Using a code linter helps maintain the quality of your code by catching potential errors before they become a problem. It also promotes consistency by enforcing coding standards and highlighting any deviations from those standards. Additionally, using a linter can improve collaboration among team members by ensuring that all code follows the same standards and is easier to understand and maintain.

In summary, using a code linter like ESLint or JSLint is an essential best practice in frontend development. It helps catch potential errors early on, promotes consistency, and ensures that code is easier to understand and maintain.

11. Test Your Code

Test your code thoroughly to ensure it works as expected and is free of bugs. Use tools like Jest or Mocha to create automated tests and run them regularly.

Jest and Mocha are two popular testing frameworks used in frontend development. Jest is a testing framework built on top of the Jasmine testing library. It provides a simple and intuitive testing experience, with features like snapshot testing, mock functions, and code coverage analysis. Mocha, on the other hand, is a more flexible testing framework that can be used with any assertion library. It allows developers to write tests in a variety of styles, including BDD (Behavior-Driven Development) and TDD (Test-Driven Development).

Automated testing is an essential component of testing in frontend development. Automated tests can be run regularly, providing rapid feedback on any changes made to the codebase. This helps catch potential problems early on and ensures that changes do not introduce new bugs or issues.

In summary, testing your code is a best practice in frontend development. It helps ensure that your code works as expected, is free of bugs, and performs well under various conditions. Jest and Mocha are popular testing frameworks that can be used to create automated tests. Automated testing provides rapid feedback on changes made to the codebase, helping catch potential problems early on in the development process.

12. Document your code

Documenting your code is an important best practice in frontend development. Code documentation provides information about the purpose, functionality, and usage of different parts of the codebase, making it easier for other developers to understand and use your code. It can also help developers maintain and update the code more easily.

JSDoc is a popular tool used for documenting JavaScript code. It allows developers to create documentation comments directly in their code, using a specific syntax to describe the purpose and functionality of different parts of the code. JSDoc can be used to document functions, classes, variables, and other code elements, and it supports a wide range of tags for specifying parameters, return values, and other details.

Generating documentation from code comments can help save time and effort in the development process. It ensures that documentation stays up-to-date with the code and reduces the amount of time required to write and maintain documentation separately.

In summary, documenting your code is an essential best practice in frontend development. It helps other developers understand and use your code more easily and can also help with maintenance and updates. JSDoc is a useful tool for creating documentation comments in JavaScript code, and generating documentation from code comments can help save time and effort in the development process.

Frontend Development: A Brief Overview

Frontend development refers to the part of web development that deals with the user interface and user experience of a website or application. Frontend developers use languages like HTML, CSS, and JavaScript to create visually appealing and functional websites.

My Experience as a Frontend Developer

I started my frontend development journey by learning HTML and CSS. After gaining some experience, I moved on to JavaScript, which allowed me to create dynamic and interactive websites. As I gained more experience, I became familiar with various frontend frameworks and libraries like React, and Vue.

One of the most significant challenges I faced as a frontend developer was ensuring that the websites I developed were responsive and worked well on different devices. To overcome this challenge, I had to learn about responsive design and develop my skills in CSS and JavaScript.

Tips for Success

1. Learn the Basics: As a beginner frontend developer, it's essential to learn the basics of HTML, CSS, and JavaScript. These languages are the building blocks of frontend development, and you need to have a solid foundation in them.

2. Practice: Practice is essential to becoming a successful frontend developer. Take on challenging projects, experiment with different technologies, and build a portfolio of your work.

3. Master Frontend Frameworks: Frontend frameworks and libraries, such as React, Angular, and Vue.js, are becoming increasingly popular. As an experienced frontend developer, it's essential to master these frameworks or libraries to stay competitive in the job market. Choose a framework or library that suits your needs and learn it thoroughly.

4. Stay Current: Frontend development is a constantly evolving field, and it's essential to stay current with the latest trends and technologies. Read blogs, attend webinars, and join online communities to stay up-to-date.

5. Collaborate: Frontend development is a collaborative process, and it's essential to be able to work effectively with designers, developers, and project managers. Learn to listen actively, ask questions, and provide clear explanations.

Strategies for Professionals

1. Keep Up with Emerging Technologies: Frontend development is a fast-paced field, and new technologies are continually emerging. Stay up-to-date with the latest trends and technologies by attending conferences, reading blogs, and following experts in the field.

2. Focus on User Experience: User experience (UX) is critical in frontend development. As a professional frontend developer, focus on creating engaging, accessible, and easy-to-use interfaces that provide a seamless user experience.

3. Collaborate with Others: Frontend development is rarely a solo endeavor. Collaborate with designers, developers, project managers, and stakeholders to ensure that everyone is on the same page. Effective collaboration can lead to better outcomes, increased productivity, and improved project outcomes.

Conclusion

Frontend development is an exciting and challenging field that requires a combination of technical skills and creativity. By learning the basics, practicing, staying current, and collaborating effectively, you can become a successful frontend developer. Whether you're a beginner or an experienced professional, I hope these tips and strategies will help you achieve your frontend development goals.

Free Resources for Learning and Mastering Frontend Development

1. W3Schools: W3Schools is a popular website that provides free tutorials on HTML, CSS, JavaScript, and many other web technologies. It's a great resource for beginners who are just starting to learn frontend development.

2. FreeCodeCamp: FreeCodeCamp is a non-profit organization that provides free online courses on web development, including frontend development. Their curriculum covers HTML, CSS, JavaScript, and several frontend frameworks like React and Angular.

3. Mozilla Developer Network: The Mozilla Developer Network is an excellent resource for frontend developers. It provides free documentation on web technologies like HTML, CSS, JavaScript, and many others. They also have a large collection of tutorials and code snippets.

YouTube Channels for Further Learning

1. Traversy Media: Traversy Media is a popular YouTube channel that provides high-quality tutorials on web development, including frontend development. Their videos cover HTML, CSS, JavaScript, and many frontend frameworks and libraries.

2. The Net Ninja: The Net Ninja is another popular YouTube channel that provides tutorials on web development, including frontend development. Their videos cover HTML, CSS, JavaScript, and several frontend frameworks like React and Vue.js.

3. Academind: Academind is a YouTube channel that provides tutorials on web development, including frontend development. Their videos cover HTML, CSS, JavaScript, and several frontend frameworks like React and Angular.

Drag and drop is an essential user interface feature that allows users to intuitively interact with web applications. It enables users to move elements within the application or between different applications, making it easier to organize content, reorder items, and streamline workflows. As a result, drag and drop has become a fundamental feature of many web applications, ranging from file managers to task management tools.

One popular library that developers can use to implement drag-and-drop functionality in their React-based applications is react-beautiful-dnd. React-beautiful-dnd is a flexible and powerful library that provides a simple and intuitive API for developers to create drag-and-drop interfaces. It leverages modern web technologies such as HTML5 drag and drop and requestAnimationFrame to provide a smooth and responsive experience for users.

In this blog post, we will explore the benefits of using react-beautiful-dnd for implementing drag-and-drop functionality in React applications. We will examine some real-world examples of how drag and drop can improve the user experience in web applications, and how react-beautiful-dnd simplifies the development process. We will also provide step-by-step instructions on how to use the library, as well as tips and best practices for optimizing performance and usability. Whether you are new to React or an experienced developer, this blog post will provide valuable insights and practical guidance for implementing drag and drop in your web applications using react-beautiful-dnd.

Set up the environment

If you already have a React project set up, you can skip to the next section. Otherwise, here's a step-by-step guide to creating a new React project:

1. Open your terminal and navigate to the directory where you want to create your project.

2. Run the following command to create a new React project using Create React App:

npx create-react-app your-app-name

Installing react-beautiful-dnd

To install react-beautiful-dnd, you can use either npm or yarn. Here are the steps to install using both:

Using npm:

1. Open your terminal and navigate to the root directory of your React project.

2. Run the following command to install react-beautiful-dnd and its dependencies:

    npm install react-beautiful-dnd
   

   This will install react-beautiful-dnd along with its required dependencies, including react, react-dom, and prop-types.

Using yarn:

1. Open your terminal and navigate to the root directory of your React project.

2. Run the following command to install react-beautiful-dnd and its dependencies:

    yarn add react-beautiful-dnd
   

   This will install react-beautiful-dnd along with its required dependencies, including react, react-dom, and prop-types.

   react-beautiful-dnd is a library for creating beautiful, accessible drag-and-drop interfaces for your React applications. It provides a simple API for implementing drag-and-drop functionality with customizable behavior and styling. The library uses the HTML5 drag-and-drop API and supports touch devices as well.

   react-beautiful-dnd has two main components: DragDropContext and Droppable. DragDropContext is a higher-order component that wraps your entire app and provides the context for drag-and-drop interactions. Droppable is a component that defines a container that can receive draggable items.

   In addition to these components, react-beautiful-dnd also provides Draggable and Droppable components, which you can use to create drag-and-drop interfaces with ease.

Creating a draggable list

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
  { id: '1', content: 'Item 1' },
  { id: '2', content: 'Item 2' },
  { id: '3', content: 'Item 3' },
];

const App = () => {
  const [items, setItems] = useState(initialItems);

  const onDragEnd = (result) => {
    if (!result.destination) return;
    const { source, destination } = result;
    const newItems = [...items];
    const [removed] = newItems.splice(source.index, 1);
    newItems.splice(destination.index, 0, removed);
    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="items">
        {(provided) => (
          <ul {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <li
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </li>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </ul>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

Let's break down each component and what it does:

• DragDropContext: This is a higher-order component that wraps your entire app and provides the context for drag-and-drop interactions. It takes a onDragEnd prop, which is a callback function that is called when a drag-and-drop operation ends.

• Droppable: This is a component that defines a container that can receive draggable items. It takes a droppableId prop, which is a unique identifier for the droppable area, and a children function that takes an object with properties provided and snapshot. provided contains props that need to be applied to the droppable element, and snapshot contains information about the current state of the droppable area.

• Draggable: This is a component that defines a draggable item. It takes a draggableId prop, which is a unique identifier for the draggable item, and an index prop, which is the position of the item in the list. children the function takes an object with properties provided and snapshot. provided contains props that need to be applied to the draggable element, and snapshot contains information about the current state of the draggable item.

In this example, we're using useState to manage the state of the list items. We're also defining a onDragEnd callback function that updates the state of the items when a drag-and-drop operation ends.

Inside the Droppable component, we're mapping over the items state and rendering a Draggable component for each item. The Draggable component is responsible for rendering the item and providing the necessary props for dragging and dropping.

Finally, we're using provided.placeholder to render a placeholder element while the item is being dragged. This is important for maintaining the layout of the list

Add Styling

One way is to add styles directly to the components using inline styles or className props. For example, you could add a className to the li element inside the Draggable component and then add styles for that class in your CSS:

First of all import App.css from the root directory in App.js
After that imports should be like this:

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './App.css';

Now go to App.css and add some styles to it, like this:

.item {
  background-color: rgb(192, 122, 122);
  border: 1px solid #000000;
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px;
  list-style: none;
  color: white;
  width: 30rem;
}

After adding styles in your App.css, Add the item class to the list of item(<li>) which is displayed after mapping the items.

<Draggable key={item.id} draggableId={item.id} index={index}>
  {(provided) => (
  <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className='item'>
    {item.content}
  </li>
  )}
</Draggable>

Then the output list should be looking like this:

Now if you are wondering if drag-n-drop is not working then go to the index.js in the root directory and disable the React.StrictMode after that, it will start working :)

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

After removing React.StrictMode

root.render(
    <App />
);

Another way is to use the provided object that's passed to the Droppable and Draggable children functions. This object contains properties like innerRef, draggableProps, and dragHandleProps that you can use to style the components. For example:

<Draggable key={item.id} draggableId={item.id} index={index}>
  {(provided, snapshot) => (
    // Inside the Draggable component:
    <li
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      style={{
        backgroundColor: snapshot.isDragging ? 'rgb(231, 179, 179)' : '',
        ...provided.draggableProps.style
      }}
      className='item'
    >
      {item.content}
    </li>
  )}
</Draggable>

In this example, we're using the snapshot object to check if the item is being dragged, and if so, we're changing the background color to a light gray. We're also using the provided.draggableProps.style object to apply any additional styles that are required for the draggable item.

To make the list look visually appealing, you can add additional styles such as:

• A background color or gradient for the entire list.

• A hover effect on the draggable items.

• An animation or transition when the items are being dragged.

• A border or shadow around the draggable items to give them a sense of depth.

Overall, the styling you add will depend on the look and feel you want to achieve for your draggable list. Remember to keep it simple and clean, so that the drag-and-drop interactions remain clear and easy to use.

Customize the behavior

1. Disable certain items from being dragged: To disable certain items from being dragged, you can add a isDragDisabled prop to the Draggable component. For example, if you want to disable the first item in the list from being dragged, you can do the following:

    {items.map((item, index) => (
      <Draggable key={item.id} draggableId={item.id} index={index} isDragDisabled={index === 0}>
        {(provided, snapshot) => (
          // ...
        )}
      </Draggable>
    ))}
   

   In this example, the isDragDisabled the prop is set to true for the first item in the list, so it cannot be dragged.

2. Disable dropping in certain places: To disable dropping in certain places, you can add a isDropDisabled prop to the Droppable component. For example, if you want to disable dropping items in the second list in a multi-column layout, you can do the following:

    <DragDropContext onDragEnd={onDragEnd}>
      <div className="columns">
        <Droppable droppableId="column-1">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
              {...provided.droppableProps}
              isDropDisabled={true} // Add this prop to disable dropping in this list
            >
              {items1.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    // ...
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
        <Droppable droppableId="column-2">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
              {...provided.droppableProps}
            >
              {items2.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    // ...
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </DragDropContext>
   

   In this example, the isDropDisabled the prop is set to true for the second list, so items cannot be dropped into it.

3. Change the behavior on drag or drop: To change the behavior on drag or drop, you can use the onDragStart, onDragUpdate, onDragEnd, onBeforeCapture, onBeforeDragStart, and onDragCancel callbacks provided by the DragDropContext component. These callbacks receive an object containing information about the drag-and-drop operation, which you can use to modify the behavior as needed. For example, you could change the cursor or add a placeholder when an item is being dragged:

<DragDropContext
  onDragStart={() => {
    document.body.style.cursor = 'grabbing';
  }}
  onDragEnd={(result) => {
    document.body.style.cursor = 'auto';
    if (result.destination) {
      // Handle the drop
    }
  }}
>
  // ...
</DragDropContext>

In this example, the onDragStart callback changes the cursor to a grabbing hand when an item is being dragged, and the

Some examples of how the drag-n-drop can be used in real-world scenarios

Here are a few examples of how the drag-n-drop feature can be used in real-world scenarios:

1. To-do list: A to-do list app can allow users to reorder their tasks by dragging and dropping them into a different order. For example, a user can prioritize their most important tasks by dragging them to the top of the list, or group similar tasks together by dragging them next to each other. The drag-and-drop feature can also be used to move tasks between different lists, such as a "To Do" list and a "Done" list.

2. File manager: A file manager app can allow users to organize their files by dragging and dropping them into different folders or rearranging them within a folder. For example, a user can group related files together by dragging them next to each other, or move a file to a different folder by dragging it to the appropriate folder icon. The drag-and-drop feature can also be used to copy or move files between different windows or applications.

3. E-commerce website: An e-commerce website can allow users to add items to their shopping cart by dragging and dropping them from a product grid or list. For example, a user can drag a product image to their shopping cart icon to add the item to their cart or drag the item to a specific area on the page to view more information or options for the product. The drag-and-drop feature can also be used to move items between the shopping cart and a wishlist or favorites list.

4. Kanban board: A Kanban board app can allow users to move tasks between different stages of a project by dragging and dropping them into the appropriate column. For example, a user can move a task from the "To Do" column to the "In Progress" column by dragging it to the appropriate column header or move a task to the "Done" column by dragging it to the bottom of the column. The drag-and-drop feature can also be used to reorder tasks within a column or move tasks to a different board or project.

Troubleshooting

Here are some common issues that might arise when using react-beautiful-dnd, along with some troubleshooting tips:

1. Droppable area not working: If the droppable area is not working, check that the droppable component is properly wrapped around the draggable components. Also, make sure that the droppableId is properly assigned to the droppable component and matches the draggableId assigned to the draggable components.

2. Dragged item not displaying properly: If the dragged item is not displaying properly, check that the draggable component has the proper styles assigned to it, such as position: absolute and z-index. Also, make sure that the onDragStart and onDragEnd callbacks are properly implemented.

3. Disabled draggable item is still draggable: If a disabled draggable item is still draggable, make sure that the isDragDisabled prop is properly assigned to the draggable component.

4. Scroll position jumping during drag: If the scroll position jumps during the drag, it might be because the scroll container is not properly sized. Make sure that the scroll container has a fixed height or is properly sized using CSS.

5. Incorrect index after reordering: If the index of an item is incorrect after reordering, it might be because the index is based on the order of the items in the original list. Make sure that the index is properly updated based on the new order of the items.

For further learning, the react-beautiful-dnd documentation provides detailed troubleshooting guides and examples, along with an active community forum where users can ask questions and receive help from other users. Additionally, there are many online resources such as tutorials, videos, and blog posts that provide tips and best practices for using react-beautiful-dnd.

Conclusion

In this blog, we've covered how to implement a drag-and-drop feature using the react-beautiful-dnd library. We've walked through the process of setting up a React project, installing react-beautiful-dnd, creating a draggable list using the <DragDropContext>, <Droppable>, and <Draggable> components, adding styling using CSS or a CSS preprocessor, and customizing the behavior of the drag-and-drop feature.

We've also provided examples of how the drag-and-drop feature can be used in real-world scenarios, such as reordering items in a to-do list or organizing files in a file manager. Additionally, we've provided some troubleshooting tips for common issues that might arise when using react-beautiful-dnd, along with resources for further learning.

Implementing a drag-and-drop feature can greatly enhance the user experience of your application, and react-beautiful-dnd provides a simple and flexible way to do so. We encourage readers to try implementing this feature using react-beautiful-dnd in their own projects and explore the many possibilities it offers for improving the usability and interactivity of their applications.

Code of this example

1. GitHub Repository

2. Follow me on Twitter