DEV Community: Aditya Rawas

Just Launched My Personal Website – Looking for Feedback! 👀

Aditya Rawas — Mon, 16 Jun 2025 04:54:35 +0000

Hey devs! 👋

I’m Aditya Rawas, and I’m excited to share my new personal website with you all:

It’s live, it’s fast, and it’s built with one of my favorite tools lately — Astro!

👨‍💻 About Me

I’m a software engineer passionate about frontend frameworks, dev tooling, and building scalable apps. My current focus lies in:

Frontend development using React and Astro
Backend APIs with Go and Django
Performance-focused builds (Vite, Rspack, bundlers, etc.)
Developer experience (DX) tooling and framework architecture
Mentoring and knowledge-sharing within tech teams and open source

I work as part of a framework team that builds tools to help other devs move faster and build better. If you're into performance, code cleanliness, and DX — we probably have a lot in common!

🌐 About the Website – www.adityarawas.in

My site is more than a portfolio — it’s a personal knowledge hub, built entirely using Astro.

🔧 Tech Stack

Astro (for island architecture + Markdown support)
Tailwind CSS (for design system)
Markdown content for blog posts
Deployed via GitHub + CI

I chose Astro because I love the idea of sending zero JS where it's not needed, and it gives me the flexibility to progressively enhance my site as I grow it.

✨ What You'll Find Inside

✅ About Me

A concise intro to my background, experience, and what I care about in software development.

🛠 Projects

Live previews and links to some of the tools and apps I’ve built — from dev tooling to full-stack apps.

📖 Blog

Coming very soon — I’ll be sharing:

Deep dives into tools like Vite, Rspack, and Astro
Guides on building with Golang + modern frontend
My thoughts on clean code, team collaboration, and DX principles

📬 Contact

I’m always open to conversations — whether it's a project, feedback, or just tech talk.

🙏 Looking for Your Feedback!

I'd really appreciate it if you could check out the site and share your thoughts:

Does the design feel clear and focused?
Any UI/UX issues or performance bugs you noticed?
What content would you love to see on my blog?
Any Astro tips or cool ideas I should explore?

This is just v1 — I’ll keep iterating, and your feedback will directly shape how it evolves!

🤝 Let’s Connect

If you’re also working on your personal site, drop your link — I’d love to see it!

Find me online:

🌐 Website: www.adityarawas.in
🐦 Twitter/X: [@rawas_aditya](https://x.com/rawas_aditya)
💼 LinkedIn: [Aditya Rawas](https://www.linkedin.com/in/aditya-rawas/)

Thanks for reading — and extra thanks if you share your thoughts! Let’s keep building and learning together 🚀

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas — Sun, 15 Dec 2024 11:59:01 +0000

In large JavaScript and TypeScript projects, as the codebase grows, organizing modules and making imports manageable becomes crucial for maintainability and scalability. The Barrel Pattern offers a simple but effective way to simplify and streamline module exports and imports, especially in projects with complex directory structures. In this post, we’ll dive into the Barrel Pattern, understand its advantages, and see how to implement it effectively in TypeScript and JavaScript.

What is the Barrel Pattern?

The Barrel Pattern is a way of organizing exports in a project by consolidating them in a single file, usually named index.ts or index.js. Rather than importing modules individually from deeply nested paths, the Barrel Pattern lets you import everything from a single entry point, simplifying the import process and making the code more readable.

For example, instead of importing directly from specific module files:

import { UserService } from './services/UserService';
import { ProductService } from './services/ProductService';
import { OrderService } from './services/OrderService';

With a barrel file in place, you could import these all from a single entry point:

import { UserService, ProductService, OrderService } from './services';

Advantages of the Barrel Pattern

Simplifies Imports: With a single entry point for each module, your import statements are cleaner and shorter.
Reduces File Path Complexity: By consolidating imports, you reduce the need for long file paths, especially useful in large projects with deep folder structures.
Improves Code Readability: Organizing imports from a single source improves code readability, making it clear where each dependency is coming from.
Encourages Modular Design: Since barrel files naturally group related modules, they encourage modular design and more manageable code.
Improves Maintenance: If file paths change, you only need to update the path in the barrel file rather than in every import statement across the codebase.

Setting Up a Barrel File in JavaScript/TypeScript

Here’s how to set up and use the Barrel Pattern in a typical TypeScript project. Let’s assume you have the following directory structure:

src/
│
├── models/
│   ├── User.ts
│   ├── Product.ts
│   └── Order.ts
│
├── services/
│   ├── UserService.ts
│   ├── ProductService.ts
│   └── OrderService.ts
│
└── index.ts

Step 1: Creating Barrel Files

In each folder (like models and services), create an index.ts file that re-exports all modules within that folder.

`models/index.ts`

export * from './User';
export * from './Product';
export * from './Order';

`services/index.ts`

export * from './UserService';
export * from './ProductService';
export * from './OrderService';

Step 2: Importing from Barrel Files

Now, instead of importing individual modules, you can import them through the index.ts files.

For instance, to use the services:

import { UserService, ProductService, OrderService } from './services';

If you have a larger project, you could even create a root-level barrel file in src/index.ts to consolidate imports even further.

`src/index.ts`

export * from './models';
export * from './services';

Now, you can import all models and services from the root of your project:

import { User, Product, Order } from './models';
import { UserService, ProductService, OrderService } from './services';

Handling Name Conflicts

If you have multiple modules with the same export names, consider renaming them or exporting selectively:

// services/index.ts
export { UserService as UserSvc } from './UserService';
export { ProductService } from './ProductService';
export { OrderService } from './OrderService';

Caveats and Best Practices

Avoid Excessive Barrel Files: Using too many barrels can lead to dependencies that are harder to trace. Reserve barrels for truly grouped modules, like models or services.
Avoid Circular Dependencies: Be cautious with cyclic dependencies, which can occur if you re-export modules that depend on each other. TypeScript will throw errors if it detects these.
Optimize Import Statements: Even though barrels make imports more manageable, always verify that unused exports aren’t imported, as this could increase bundle size. Tree-shaking tools (like Webpack) can help optimize imports and remove unused code.
Use Explicit Exports When Possible: Although wildcard exports (export * from) are convenient, explicit exports make it easier to trace the source of each module.

Final Thoughts

The Barrel Pattern is a powerful organizational strategy for large JavaScript and TypeScript projects. By creating an entry point for each module group, it enhances code readability, maintains manageable imports, and keeps your project modular. However, it’s essential to avoid overusing barrel files and watch out for circular dependencies to ensure efficient and maintainable code.

Try implementing the Barrel Pattern in your project and see how much it can streamline your imports and improve your workflow!

Is Node.js Single-Threaded or Multi-Threaded? Unraveling the Mystery

Aditya Rawas — Fri, 29 Nov 2024 00:12:52 +0000

As a developer, you've probably heard about Node.js's event-driven, non-blocking I/O model, but a common question remains: "Is Node.js single-threaded or multi-threaded?"

The answer isn’t as straightforward as you might think. While Node.js runs JavaScript on a single thread, it has powerful multi-threading capabilities under the hood. This unique combination often leads to confusion, especially when deciding how to handle concurrent tasks or CPU-intensive operations.

Why Node.js Feels Single-Threaded

At its core, Node.js executes JavaScript code in a single-threaded environment, thanks to the V8 engine. The single-threaded nature is integral to its lightweight architecture, making it perfect for real-time applications and handling thousands of concurrent connections.

But here’s the twist: Node.js doesn’t stop at single-threaded execution. It has built-in mechanisms for handling multi-threading seamlessly, often without developers even noticing.

Where Multi-Threading Comes Into Play

Node.js uses a thread pool behind the scenes to manage I/O operations efficiently. Additionally, with the introduction of worker threads, developers can now explicitly create threads for CPU-intensive tasks, solving one of Node.js's biggest pain points.

Want to know how all of this works together to make Node.js a hybrid powerhouse? Dive deeper into the full blog for insights, code examples, and best practices:

👉 Read the Full Blog Here

Unlock the full potential of Node.js by mastering its threading capabilities!

The Journey of JavaScript Code: From Source to Execution

Aditya Rawas — Wed, 20 Nov 2024 07:01:35 +0000

Have you ever wondered what happens when you write JavaScript code? How does the code you type in your editor transform into something your computer can understand and execute? Let’s break it down step-by-step!

1. Writing the Code

Here’s a simple example:

function add(a, b) {  
    return a + b;  
}  

console.log(add(2, 3));

At this stage, it’s just text. The magic begins when this code reaches a JavaScript engine like V8.

2. Parsing and AST

The first step in execution is parsing. The engine breaks the code into tokens and then generates an Abstract Syntax Tree (AST), a structured representation of the code. This ensures the syntax is valid and prepares the code for further processing.

3. Ignition: The Interpreter

The AST is passed to V8’s Ignition, which converts it into bytecode, a lightweight intermediate format. Bytecode allows quick interpretation and execution, especially for short-lived scripts.

4. TurboFan: The Optimizing Compiler

As the code runs, frequently executed parts (hot spots) are identified. These are compiled into highly optimized machine code by TurboFan, improving performance dramatically.

This combination of Ignition for fast startup and TurboFan for high runtime performance is what makes JavaScript so powerful and efficient. But there’s much more to the story!

👉 To dive deeper into how JavaScript engines handle interpretation, JIT compilation, and machine code execution, check out my full blog here: https://www.adityarawas.in/blogs/from-code-to-execution-javascript-engine-deep-dive/

How to Install Go on Linux, macOS, and Windows: A Friendly Guide

Aditya Rawas — Fri, 27 Sep 2024 03:31:56 +0000

How to Install Go on Linux, macOS, and Windows: A Friendly Guide

If you're excited to start coding in Go (Golang), you’re in the right place! In this easy-to-follow guide, I’ll help you install Go on Linux, macOS, and Windows. Before we jump into the installation process, head over to the official Go website and grab the version compatible with your operating system:

👉 Download Go

Once you've got the Go installer downloaded, follow the steps below to get everything set up!

Installing Go on Linux

Remove any previous Go installations If you've already installed Go before, it’s best to start fresh by deleting the old version. Run the command below to remove the previous installation:

   $ sudo rm -rf /usr/local/go

Now, extract the archive you just downloaded into /usr/local:

   $ sudo tar -C /usr/local -xzf go1.23.1.linux-amd64.tar.gz

Pro Tip: Make sure you’re using sudo for these commands to have the necessary permissions.

Avoid broken installations

Don’t extract the new Go archive into an existing /usr/local/go folder. This can cause issues, so starting fresh is always best.
Update your PATH

To use Go commands easily, add Go's bin directory to your PATH. Open your $HOME/.profile (or /etc/profile for system-wide installs) and add this line:

   export PATH=$PATH:/usr/local/go/bin

Quick Tip: You can immediately apply the changes by running:

   source $HOME/.profile

Verify the installation To check if Go is installed correctly, type:

   $ go version

You should see something like go version go1.23.1 linux/amd64. Success!

Installing Go on macOS

Install Go

After downloading the Go installer from the link above, open the package file and follow the prompts. Go will automatically install to /usr/local/go.
Check your PATH

During installation, Go usually adds /usr/local/go/bin to your PATH automatically. If not, you can add it manually by editing your ~/.zshrc or ~/.bash_profile:

   export PATH=$PATH:/usr/local/go/bin

Restart terminal sessions After installation, close and reopen your terminal for the changes to take effect. Alternatively, use:

   source ~/.zshrc

Verify your installation Run the following command in the terminal to confirm Go is installed properly:

   $ go version

If you see the installed version, you’re good to go!

Installing Go on Windows

Install Go

After downloading the MSI installer for Windows, open it and follow the steps. By default, Go installs to C:\Program Files\Go.
Environment Setup

The installer will automatically add Go to your PATH. After the installation, close and reopen any open Command Prompt windows to apply the changes.
Verify the installation

Open Command Prompt (search for “cmd” in the Start menu) and type:

   $ go version

You should see something like go version go1.23.1 windows/amd64. That’s it!

Great! Here's how you can wrap up your blog:

Wrapping Up

And there you have it! Whether you’re on Linux, macOS, or Windows, installing Go is straightforward. Now that Go is up and running, you can start building some amazing projects!

If you have any questions or run into any issues, feel free to drop a comment below! I’m here to help. Happy coding! 🎉

Want to read more such blogs? Visit www.adityarawas.in for more tutorials, tips, and insights!

How to Kill Processes and Free Up Ports on Mac, Windows, and Linux

Aditya Rawas — Mon, 05 Feb 2024 05:05:32 +0000

Have you ever encountered a situation where you needed to free up a port on your system but found it stubbornly held by a process? Whether you're on Mac, Windows, or Linux, here's a guide to gracefully handling this common issue.

Mac OS

Step 1: Find the Process ID (PID)

sudo lsof -i :portNumber

Replace portNumber with the actual port number. Copy the PID number.

Step 2: Kill the Process

kill PID

Replace PID with the copied process ID. If necessary, try kill -9 PID or sudo kill -9 PID for forceful termination.

Windows

Step 1: Find the Process ID (PID)

netstat -ano | findstr :portNumber

Replace portNumber with the port number. Copy the PID number.

Step 2: Kill the Process

taskkill /PID typeyourPIDhere /F

Replace typeyourPIDhere with the copied PID. Recheck using the first command.

Linux

Step 1: Get a List of All Open Processes

top

Step 2: Kill a Process

kill pid

Use killall pname to kill by name. Add -9 for forceful killing. Use sudo if needed.

Remember, terminating processes forcefully (-9) should be a last resort as it can cause data loss or system instability. Always try graceful termination (kill) first.

By following these steps tailored to your operating system, you can efficiently manage and free up ports, ensuring smooth operation for your applications. Whether you're a developer, sysadmin, or simply a curious user, mastering these techniques can save you time and frustration.

For more blogs like this, visit www.adityarawas.in

Hosting a Static Website on Amazon S3: A Step-by-Step Guide

Aditya Rawas — Tue, 09 Jan 2024 15:22:14 +0000

Introduction:

Amazon S3 provides an easy and cost-effective solution for hosting static websites with high availability and scalability. In this step-by-step guide, we'll walk through the process of hosting a static website on Amazon S3.

Step 1: Set Up an AWS Account

If you don't have an AWS account, sign up for one at AWS official website. Once you have an account, log in to the AWS Management Console.

Step 2: Create an S3 Bucket

In the AWS Management Console, navigate to the S3 service.
Click "Create bucket" and follow the prompts.
Choose a globally unique name for your bucket (e.g., "your-website-bucket").
Select a region for your bucket.
Uncheck the "Block all public access" option if you intend to make your website publicly accessible.

Step 3: Upload Your Website Content

Inside your newly created bucket, click "Upload."
Add your static website files (HTML, CSS, JavaScript, etc.) to the bucket.
Ensure that your main HTML file is named "index.html" as this will be the default landing page.

Step 4: Configure Bucket Properties for Website Hosting

In your bucket, click on the "Properties" tab.
Scroll down to the "Static website hosting" card.
Click "Edit" and choose the "Use this bucket to host a website" option.
Set the "Index document" to "index.html" or your preferred landing page.
Optionally, set the "Error document" for custom error pages.

Step 5: Set Permissions

Still in the bucket properties, navigate to the "Permissions" tab.

Click on "Bucket Policy" and add a policy to make your bucket publicly accessible. An example policy allowing public read access to all objects looks like:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-website-bucket/*"
        }
    ]
}

Replace "your-website-bucket" with your actual bucket name.

Step 6: Enable Website Hosting

Go back to the "Properties" tab and click on the provided website endpoint link.
Your website should now be accessible through the provided URL. Note that it may take a few minutes for changes to take effect.

Step 7: (Optional) Configure a Custom Domain

If you have a custom domain, you can configure it to point to your S3 bucket using AWS Route 53 or another domain registrar. Update your domain's DNS settings to include a CNAME record pointing to your S3 bucket's website endpoint.

Conclusion:

Congratulations! You've successfully hosted a static website on Amazon S3. This straightforward process, combined with S3's reliability and scalability, makes it an excellent choice for hosting static content in the cloud.

Achieving High Availability and Scalability with ELB and ASG in AWS

Aditya Rawas — Mon, 08 Jan 2024 01:09:52 +0000

Introduction:

In the dynamic world of cloud computing, two key components play a crucial role in ensuring the availability, reliability, and scalability of applications: Elastic Load Balancing (ELB) and Auto Scaling Groups (ASG). In this blog, we will delve into the significance of ELB and ASG in the Amazon Web Services (AWS) ecosystem, exploring how they work together to create resilient and scalable infrastructures.

Elastic Load Balancing (ELB):

ELB is a service provided by AWS that automatically distributes incoming application traffic across multiple targets, such as Amazon EC2 instances, in one or more availability zones. The primary goal of ELB is to enhance the fault tolerance of applications by ensuring that no single instance bears the entire burden of incoming requests.

Key Features of ELB:

High Availability: ELB automatically routes traffic to healthy instances, distributing it evenly across multiple availability zones. In case of an instance failure, ELB reroutes traffic to healthy instances, minimizing downtime.

Auto Scaling Integration: ELB seamlessly integrates with Auto Scaling Groups, allowing for dynamic adjustment of capacity based on traffic patterns. This ensures optimal resource utilization and cost efficiency.

SSL Termination: ELB can handle SSL/TLS termination, offloading the SSL decryption process from backend instances. This improves the overall performance and simplifies the management of SSL certificates.

Auto Scaling Groups (ASG):

ASG is a feature of AWS that enables automatic scaling of EC2 instances based on predefined policies. ASG works in conjunction with ELB to dynamically adjust the number of instances to accommodate changes in demand, ensuring optimal performance and cost-effectiveness.

Key Features of ASG:

Dynamic Scaling: ASG can automatically add or remove instances based on policies defined by the user. This ensures that the application can handle varying workloads, scaling up during peak times and scaling down during periods of low demand.

Health Monitoring: ASG continuously monitors the health of instances and replaces any unhealthy instances with new ones. When used in tandem with ELB, ASG can ensure that only healthy instances receive traffic from the load balancer.

Lifecycle Hooks: ASG provides lifecycle hooks that allow users to perform custom actions before instances are terminated or after they are launched. This capability is useful for tasks such as configuration management and integration with other AWS services.

ELB and ASG in Harmony:

The seamless integration of ELB and ASG is crucial for creating a robust and scalable architecture in AWS. Here's how they work together:

Automatic Scaling: ASG monitors the health of instances and triggers scaling actions based on predefined policies. ELB distributes traffic to the new instances seamlessly, ensuring a smooth transition without affecting end-users.

Load Distribution: ELB evenly distributes incoming traffic across multiple instances within an Auto Scaling Group. This prevents any single instance from being overwhelmed, improving the overall availability and responsiveness of the application.

Fault Tolerance: In the event of an instance failure, ELB automatically reroutes traffic to healthy instances. ASG then takes over by launching new instances to replace the failed ones, maintaining the desired capacity.

Conclusion:

In the world of cloud computing, achieving high availability and scalability is paramount for modern applications. Elastic Load Balancing and Auto Scaling Groups are foundational components in the AWS ecosystem, working together to provide a resilient and dynamic infrastructure. By leveraging the capabilities of ELB and ASG, organizations can ensure that their applications are not only highly available but also capable of handling varying workloads efficiently. As technology continues to evolve, these services remain essential for building robust and scalable architectures in the cloud.

Unraveling the Power of AWS IAM: Securing the Cloud with Identity and Access Management

Aditya Rawas — Fri, 05 Jan 2024 14:39:18 +0000

Introduction:

In the dynamic landscape of cloud computing, security is paramount. As organizations migrate their applications and data to the cloud, ensuring the confidentiality, integrity, and availability of resources becomes a critical concern. Amazon Web Services (AWS), a leader in the cloud services industry, addresses these concerns through its robust security features. At the core of AWS's security framework is IAM, or Identity and Access Management. In this blog post, we'll delve into the significance of AWS IAM and explore how it plays a pivotal role in securing cloud environments.

Understanding AWS IAM:

IAM is AWS's centralized service for managing user identities and access controls within its cloud infrastructure. Essentially, IAM allows organizations to define and manage permissions for various entities, such as users, groups, and roles, ensuring that only authorized individuals or systems have access to specific resources.

Key Features of AWS IAM:

Granular Access Control:
IAM provides fine-grained access control, allowing organizations to define permissions at a granular level. This means you can specify who can access specific AWS resources and what actions they can perform.
Identity Federation:
IAM supports identity federation, enabling organizations to integrate their existing identity systems with AWS. This ensures a seamless and secure user experience, as users can use their existing corporate credentials to access AWS resources.
Multi-Factor Authentication (MFA):
To add an extra layer of security, IAM supports Multi-Factor Authentication. Users are required to provide two or more forms of authentication before gaining access, significantly reducing the risk of unauthorized access.
Temporary Security Credentials:
IAM allows the creation of temporary security credentials with a specified expiration time. This feature is particularly useful for granting short-term access to resources, reducing the risk associated with long-term credentials.
Audit Trails and Logging:
IAM provides detailed logging capabilities, allowing organizations to monitor and audit user activity. This is crucial for compliance, as it enables the tracking of changes to permissions and helps in identifying potential security threats.

Best Practices for AWS IAM:

Principle of Least Privilege:
Follow the principle of least privilege, granting users and systems the minimum permissions required to perform their tasks. This reduces the attack surface and limits the potential impact of a security breach.
Regularly Rotate Credentials:
Periodically rotate access keys and credentials to mitigate the risk of unauthorized access. IAM provides tools to automate the rotation process, ensuring that security remains robust.
Use IAM Roles:
Leverage IAM roles for applications, services, and users to assume temporary permissions. This enhances security by limiting the exposure of long-term credentials.
Regularly Review Permissions:
Conduct regular reviews of IAM policies and permissions to ensure alignment with organizational policies and business needs. Remove unnecessary permissions and stay vigilant against potential security loopholes.

Conclusion:

AWS IAM is a cornerstone of AWS's commitment to providing a secure and reliable cloud computing environment. By implementing IAM best practices and understanding its features, organizations can fortify their cloud security posture and confidently embrace the benefits of cloud computing. As the cloud continues to evolve, IAM will remain a crucial component in safeguarding sensitive data and ensuring that only authorized entities have access to AWS resources.

Understanding CSS Units: A Guide to Absolute and Relative Sizing

Aditya Rawas — Thu, 04 Jan 2024 16:02:40 +0000

In the realm of web development, crafting visually appealing and responsive layouts is a crucial aspect. One key player in achieving this is understanding and utilizing CSS units effectively. CSS units are measurements of length used to specify the size of elements on a website. In this blog post, we will explore the two main categories of CSS units – Absolute and Relative – and delve into the most commonly used units with practical examples.

Absolute Units: Precision in Fixed Sizes

Absolute units represent a fixed size and remain constant regardless of screen size, font size, or viewport changes. They are ideal for situations where precision is paramount, and elements need to maintain a fixed size. Let's look at a few commonly used absolute units:

1. Pixels (`px`):

.absolute-size {
  width: 200px; /* Fixed width in pixels */
  height: 100px; /* Fixed height in pixels */
}

Pixels (px) are the most commonly used absolute unit, representing a single pixel on the screen. They provide a precise and fixed size, making them suitable for elements that should maintain a consistent appearance.

Relative Units: Flexibility in Responsive Design

Relative units, on the other hand, represent sizes that are relative to another reference value. These units are responsive to changes in screen size, font size, or the size of other elements. Let's explore a few widely used relative units:

1. EM (`em`):

.relative-size {
  width: 50%; /* 50% of the parent container's width */
  padding: 5%;
}

The EM unit depends on the font size of its parent element. This makes it useful when you want an element's size to be proportional to its parent's font size.

2. REM (`rem`):

body {
  font-size: 16px; /* Set base font size for rem */
}

.relative-size {
  width: 1rem; /* Equivalent to 16px by default */
}

REM units are relative to the root (html) element's font size. It provides a way to maintain consistency across the entire page, making it a popular choice for responsive designs.

3. Percentage (`%`):

.relative-size {
  width: 50%; /* 50% of the parent container's width */
}

Percentage units represent a percentage of a reference value, such as the parent element's width or height. They are versatile and widely used in creating responsive layouts.

4. Viewport Width (`vw`) and Viewport Height (`vh`):

.viewport-relative-size {
  width: 50vw; /* 50% of the viewport's width */
  height: 50vh; /* 50% of the viewport's height */
}

Viewport-relative units are relative to the size of the viewport, providing flexibility in designing elements based on the screen dimensions.

When to Choose What?

Use Absolute Units:

For specifying precise sizes that should remain constant.
When working with fixed layouts that don't need to adapt to different screen sizes.

Use Relative Units:

For creating responsive layouts that adapt to various screen sizes.
When an element's size depends on the size of another element.

In conclusion, understanding and judiciously applying CSS units can significantly enhance your ability to create visually appealing and responsive web layouts. Whether you opt for absolute units for precision or relative units for flexibility, a thoughtful combination of both will empower you to craft dynamic and engaging user interfaces.

Understanding the CSS Child Combinator: A Guide to Targeting Direct Descendants

Aditya Rawas — Wed, 03 Jan 2024 14:02:12 +0000

CSS (Cascading Style Sheets) is a powerful language that allows developers to style web pages and create visually appealing layouts. One essential feature of CSS is the child combinator (>), which plays a crucial role in selecting and styling direct children of a particular element. In this blog post, we'll delve into the child combinator and explore its practical applications.

What is the Child Combinator?

The child combinator in CSS is represented by the > symbol and is used to select direct children of a particular element. This means that the styles will be applied only to the immediate children of the specified parent, and not to nested descendants further down the hierarchy.

Basic Syntax:

The basic syntax for using the child combinator is as follows:

parent > child {
  /* Styles to be applied to the direct child element */
}

Practical Examples:

Let's consider a practical example to illustrate the use of the child combinator. Assume we have the following HTML structure:

<div>
  <span>
    Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
  <span>Span #3, not in the div at all.</span>

To style only the direct child paragraph and not the nested one, we can use the child combinator:

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

In this case, only the direct child i.e <span> element will have the specified style applied, as it is a direct child of the <div>. The nested <span> element won't be affected by the CSS rule due to the use of the child combinator.

Understanding CSS Box Sizing: A Guide to 'content-box' and 'border-box'

Aditya Rawas — Tue, 02 Jan 2024 00:14:08 +0000

CSS Box Sizing is a fundamental concept in web development that influences how the dimensions of an element are calculated. The box-sizing property allows developers to specify whether an element's declared width and height include its padding and border. There are two main values for box-sizing: 'content-box' and 'border-box'. In this blog post, we'll delve into these values, their implications, and how to use them effectively in your web projects.

The Default: 'content-box'

By default, when you set a width or height for an element in CSS, you are using the 'content-box' model. This means that the specified width and height apply only to the content area of the element, excluding padding and border. Let's illustrate this with an example:

div {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid black;
}

In this scenario, the total width of the div would be 100px (content width) + 20px (padding) + 4px (border) = 124px. This default behavior can sometimes lead to unexpected results, especially when dealing with responsive designs or precise layout requirements.

Taking Control with 'border-box'

To simplify sizing calculations and achieve more predictable layouts, the 'border-box' value comes into play. When you set an element's box-sizing to 'border-box', the declared width and height now include the content, padding, and border. Here's an example:

div {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 2px solid black;
}

With 'border-box', the total width of the div is now strictly 100px, encompassing both the content and the space taken by padding and border. This can be particularly advantageous in scenarios where you want a more intuitive way to control the dimensions of your elements.

Practical Use Cases

Responsive Design: When working on responsive layouts, 'border-box' can simplify calculations. Elements will respond to changes in width or height without unexpected variations caused by padding or border adjustments.
Consistent Sizing: Ensuring a consistent sizing model across different elements can be crucial. 'border-box' makes it easier to maintain a uniform appearance without constant adjustments for padding and border differences.
Easier Grids and Flexboxes: When creating grids or using flexbox layouts, 'border-box' can streamline the process. The specified dimensions directly represent the space an element occupies, simplifying alignment and spacing considerations.

Conclusion

Understanding and leveraging the box-sizing property in CSS can significantly contribute to a smoother development process and more maintainable code. By choosing between 'content-box' and 'border-box' based on your specific needs, you gain greater control over how elements are sized and how they interact within your layout. Whether you're aiming for responsive designs or consistent spacing, box-sizing is a powerful tool in your CSS toolkit.

DEV Community: Aditya Rawas

Just Launched My Personal Website – Looking for Feedback! 👀

👨‍💻 About Me

🌐 About the Website – www.adityarawas.in

🔧 Tech Stack

✨ What You'll Find Inside

✅ About Me

🛠 Projects

📖 Blog

📬 Contact

🙏 Looking for Your Feedback!

🤝 Let’s Connect

Understanding the Barrel Pattern in JavaScript/TypeScript

What is the Barrel Pattern?

Advantages of the Barrel Pattern

Setting Up a Barrel File in JavaScript/TypeScript

Step 1: Creating Barrel Files

models/index.ts

services/index.ts

Step 2: Importing from Barrel Files

src/index.ts

Handling Name Conflicts

Caveats and Best Practices

Final Thoughts

Is Node.js Single-Threaded or Multi-Threaded? Unraveling the Mystery

Why Node.js Feels Single-Threaded

Where Multi-Threading Comes Into Play

The Journey of JavaScript Code: From Source to Execution

1. Writing the Code

2. Parsing and AST

3. Ignition: The Interpreter

4. TurboFan: The Optimizing Compiler

How to Install Go on Linux, macOS, and Windows: A Friendly Guide

How to Install Go on Linux, macOS, and Windows: A Friendly Guide

Installing Go on Linux

Installing Go on macOS

Installing Go on Windows

Wrapping Up

How to Kill Processes and Free Up Ports on Mac, Windows, and Linux

Mac OS

Windows

Linux

For more blogs like this, visit www.adityarawas.in

Hosting a Static Website on Amazon S3: A Step-by-Step Guide

Introduction:

Conclusion:

Achieving High Availability and Scalability with ELB and ASG in AWS

Introduction:

Elastic Load Balancing (ELB):

Auto Scaling Groups (ASG):

ELB and ASG in Harmony:

Conclusion:

Unraveling the Power of AWS IAM: Securing the Cloud with Identity and Access Management

Understanding CSS Units: A Guide to Absolute and Relative Sizing

Absolute Units: Precision in Fixed Sizes

1. Pixels (px):

Relative Units: Flexibility in Responsive Design

1. EM (em):

2. REM (rem):

3. Percentage (%):

4. Viewport Width (vw) and Viewport Height (vh):

When to Choose What?

Understanding the CSS Child Combinator: A Guide to Targeting Direct Descendants

What is the Child Combinator?

Basic Syntax:

Practical Examples:

Understanding CSS Box Sizing: A Guide to 'content-box' and 'border-box'

The Default: 'content-box'

Taking Control with 'border-box'

Practical Use Cases

Conclusion

`models/index.ts`

`services/index.ts`

`src/index.ts`

1. Pixels (`px`):

1. EM (`em`):

2. REM (`rem`):

3. Percentage (`%`):

4. Viewport Width (`vw`) and Viewport Height (`vh`):