DEV Community: Sudhil Raj K

⚡️Speed Up React Projects with Vite + SWC⚡️

Sudhil Raj K — Wed, 09 Jul 2025 06:47:49 +0000

React is awesome, no doubt. But let’s be real: long build times and sluggish refresh cycles can kill our momentum. That’s where Vite + SWC come in — a lightning combo that can give our React apps a serious speed boost in both development and build time.

Let’s take a quick look at what makes this duo so cool 🚀

🔥 Meet Vite – The Blazing-Fast Dev Server

Vite (pronounced “veet”) is a super fast build tool created by Evan You (yes, the creator of Vue.js). But don’t worry — it works brilliantly with React too.

Here’s what makes Vite special:

👉🏻 It uses native ES modules during development, so it skips the traditional bundling step.
👉🏻 It gives us instant HMR (Hot Module Replacement) — our code changes show up immediately in the browser.
👉🏻 It’s lightweight, modern, and easy to set up.

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Boom 💥 We’re up and running in seconds.

⚙️ Now Enter SWC – The Speedy Web Compiler

SWC stands for Speedy Web Compiler, and the name is no joke.

Built using Rust, SWC is a drop-in replacement for Babel — but way faster. In some cases, it's up to 10x faster than Babel. 🔥

Why SWC?

👉🏻 It compiles modern JavaScript and TypeScript.
👉🏻 It supports React JSX out of the box.
👉🏻 It’s fast — really fast — thanks to Rust and multi-threading.
👉🏻 Works beautifully with Vite as a plugin.

Think of SWC as a turbocharged Babel, built for today’s frontend demands.

🧩 Putting It Together: Vite + SWC in React

Using them together means:

Vite handles dev-time speed with instant reloads and fast startup.

SWC compiles our code lightning-fast, reducing build time and improving performance.

If we're using Vite’s official React template, SWC is already configured under the hood. But to be sure (or if customizing):

Install the SWC plugin manually (optional advanced setup):

npm install -D @vitejs/plugin-react-swc

Then in our vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
});

That’s it. We’re now running one of the fastest React setups out there. 🔥

✨ Why It Matters

We'll save time every time we hit "Save".

Builds become blazingly fast, even in large projects.

Our dev workflow becomes snappy and smooth — which is honestly just more fun! 😄

Wrapping Up 🧵

React is great — but pairing it with Vite and SWC makes it ridiculously fast. Whether we're working solo or on a big team, this combo can supercharge our dev experience without adding complexity.

👉🏻 Vite makes development blazing fast with instant HMR.
👉🏻 SWC is a faster replacement for Babel — built with Rust.

Together, they make our React workflow smoother, leaner, and much faster.

Thanks for reading!
Happy Coding! 🚀👨‍💻✨

Mystery of Function Currying in JavaScript!

Sudhil Raj K — Sun, 15 Jun 2025 17:33:34 +0000

Currying. Sounds fancy, right? Like something complicated you only use if you're building a giant functional programming library. But actually, it’s one of those little concepts in JavaScript that’s super useful and surprisingly fun once you get the hang of it!

Let’s break it down the easy way. No scary jargon. Just real talk.

So What Is Currying? 🤔

Normally, when you write a function, it looks like this:

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

add(2, 3); // 5

Currying lets you break that down into smaller pieces — instead of giving all arguments at once, you feed them in one at a time:

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

add(2)(3); // 5

See what happened? add(2) gives you back a new function that’s waiting for b. When you give it 3, the magic happens!

In simple words:

Currying is transforming a function that takes multiple arguments into a series of functions that take one argument at a time.

Why Would Anyone Do That? 🤷‍♂️

I had the same question. Like, why split up arguments like that?

Here’s the deal: currying gives you more control, especially when you want to reuse functions with some preset values.

Example? Say you want to create a function that always doubles a number:

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
console.log(double(5)); // 10
console.log(double(10)); // 20

Instead of writing multiply(2, x) everywhere, you’ve got a neat double() function ready to go. Handy, right?

Let's Build a Curry Utility! 🛠

Here’s how to make your own curry function that can handle multiple arguments step by step:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args); // Got enough arguments, just run the function
    } else {
      return function (...nextArgs) {
        return curried(...args, ...nextArgs); // Keep collecting
      };
    }
  };
}

Now use it like this:

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3));     // 6
console.log(curriedSum(1, 2)(3));     // 6
console.log(curriedSum(1)(2, 3));     // 6

It’s flexible — and surprisingly elegant!

Real Life Example You’ll Love ❤️

function greet(greeting) {
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = greet("Hello");
console.log(sayHello("Sudhil")); // Hello, Sudhil!
console.log(sayHello("Raj"));   // Hello, Raj!

This is where currying shines. You’ve built a greeting factory 🎉

Wait, Isn’t This Just Partial Application?

Great question — they’re related, but not quite the same.

Currying transforms a function into a series of functions that each take one argument.

Partial application lets you pre-fill some arguments, and the result can still take multiple arguments.

Should I Start Currying Everything ❓

Probably not. 😄

Use currying when it makes your code cleaner or more reusable, not just to look cool. In team projects, it’s important that your teammates understand what’s going on too.

That said, for utility functions, config-based behavior, or when you're building reusable patterns — currying is super helpful.

Wrapping It Up 💡

Currying might look a little weird at first, but once you try it out, you’ll see why it’s a favorite among JS developers who love clean, modular code.

Here's What You Should Remember 🧠

Currying breaks a function into a chain of functions that take one argument each.

It helps create reusable and customizable logic.

You don’t need to use it everywhere — just where it makes sense.

Thanks for reading 🙌
Stay curious, and keep experimenting.
Happy Coding! 🚀👨‍💻✨

Mystery of Hoisting in JavaScript!

Sudhil Raj K — Thu, 26 Dec 2024 07:16:46 +0000

JavaScript is full of quirks, and hoisting is one of those that tends to confuse newcomers. But don’t worry by the end of this post, you'll have a clear understanding of hoisting, simplified!

What Is Hoisting? 🤔

At its core, hoisting is JavaScript's default behavior of moving declarations to the top of their scope. This doesn't mean the code is physically rearranged—it’s just how the JavaScript engine interprets it.

Think of it this way: before JavaScript starts executing your code, it "prepares" by allocating memory for all variables and functions upfront, even before a single line of code is executed.

Common Myths About Hoisting

Only variables are hoisted.
👎🏻 Not true
Both function declarations and variable declarations are hoisted.

Hoisted variables are initialized automatically.
👎🏻 Wrong again
Variables are hoisted but not initialized. Their value remains undefined until explicitly assigned.

Understanding Hoisting with Examples 📚

1. Variable Hoisting
Let’s start with variables declared using var:

console.log(greeting); // Output: undefined
var greeting = "Hello, World!";

What happens here? JavaScript treats the code like this during execution:

var greeting; // Declaration is hoisted
console.log(greeting); // Accesses the variable before initialization
greeting = "Hello, World!"; // Initialization happens here

But with let and const, it’s a different story:

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Sudhil";

Variables declared with let or const are hoisted, but they’re in a "temporal dead zone" (TDZ) until their declaration is encountered.

2. Function Hoisting
Function declarations are fully hoisted, both their name and body are available before the line of declaration:

sayHello(); // Output: "Hello!"

function sayHello() {
    console.log("Hello!");
}

However, function expressions behave differently:

sayHi(); // TypeError: sayHi is not a function

var sayHi = function () {
    console.log("Hi!");
};

In this case, the variable sayHi is hoisted but not initialized until the assignment is reached.

3. Class Hoisting
Classes behave similarly to let and const. They are hoisted but cannot be accessed before their declaration.

const instance = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Classy!";
    }
}

Why Does Hoisting Matter? 🔥

1. Predict Behavior
Understanding hoisting helps you predict how your code will run and avoid common pitfalls like using variables before they’re initialized.

2. Clean Code
To avoid confusion, declare variables and functions at the top of their scope. This aligns with JavaScript's hoisting behavior and makes your code more readable.

Wrapping It Up 💡

Here’s What to Remember About Hoisting: 🧠

Declarations (variables, functions, and classes) are hoisted; initializations are not.
var declarations are hoisted with undefined; let and const stay in the temporal dead zone.
Function declarations are fully hoisted, but function expressions are not.
Hoisting helps the JavaScript engine understand your code, but understanding hoisting helps you write better code.

Thanks for reading! 🙌
Keep experimenting with JavaScript quirks, and stay tuned for more in this series.🚀
Happy Coding! 🚀👨‍💻✨

Mystery of Closures in JavaScript!

Sudhil Raj K — Sat, 23 Nov 2024 21:44:25 +0000

At first glance, closures might seem like a complicated concept, but don’t worry they’re much simpler than they appear! Let’s strip away the confusion and address some common myths about closures.

Common Myths About Closures

Closures are special functions with access to their surrounding scope.
👎🏻Not true

A closure is not the same as a function.
In JavaScript, every function inherently has access to the scope in which it was defined. This is just how functions work!

Closures require nested functions.
👎🏻Wrong again

Nesting functions has nothing to do with creating closures.
Whenever a function is created, it automatically forms a closure with its surrounding scope, no nesting required.

What’s the Reality❓

Closures are not some magical or unique feature. Instead, they’re just the combination of a function and the variables from the scope in which the function was created. Every function comes bundled with this context—think of it as a memory of where it came from.

Here’s the MDN-approved definition:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

In plain English, a closure lets your function "remember" the variables from the place where it was created, even if it’s executed elsewhere.

Let’s See Closures in Action 🧑🏻‍💻

Here’s a fun little example:

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

What’s Happening Here? 🤔
When createCounter is called, a variable count is created inside its scope.
The returned function remembers count, even though createCounter has already finished running.
Each time counter is called, it can access and update count because of the closure.

Why Do Closures Matter? 🔥

Closures aren't just a theoretical concept for acing interviews—they’re incredibly useful! Here are a few real-world scenarios:

1. Data Privacy

Closures can keep variables private and inaccessible from the outside world.

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

2. Event Handlers

Closures are handy for event listeners when you want to "remember" some state.

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

3. Partial Application

Closures let you pre-set arguments for a function.

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

Wait, Are Closures Perfect❓

Not always! If you're not careful, closures can lead to memory leaks by keeping references to variables longer than necessary. For example, when closures are used inside loops, it’s easy to create unintended behaviors:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Output: 3, 3, 3
    }, 1000);
}

To fix this, you can use let (block scope) or an IIFE:

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // Output: 0, 1, 2
    }, 1000);
}

Wrapping It Up 🤲🏻💡

Closures are everywhere in JavaScript. Whether you realize it or not, you’re already using them! They’re the secret sauce that makes JavaScript powerful and flexible.

Here’s What to Remember: 🧠

Closures are not functions; they’re a function + the variables it remembers.
Every function in JavaScript has a closure.
Use closures for encapsulation, event handling, partial application, and more.

Thanks for reading. 🙌
Happy Coding! 🚀👨‍💻✨

Citizen Developers Rise Up: The LCNC Revolution 🌐

Sudhil Raj K — Wed, 10 Apr 2024 20:25:29 +0000

Remember the days when building software applications required a team of coding wizards, years of development time, and budgets that could rival Hollywood blockbusters? Well, those days are fading faster than a beta bug fix. Enter the low-code/no-code (LCNC) revolution, a movement democratizing app creation and empowering a new generation of citizen developers.

What is LCNC❓

Think of LCNC platforms as user-friendly tools that bridge the gap between complex coding and drag-and-drop simplicity. Here's the breakdown:

Low-code: These platforms provide a visual interface with pre-built components and functionalities. Developers (or citizen developers!) can customize these elements using some coding knowledge to create custom applications.
Few examples are: Mendix, Microsoft Power Apps, Bubble, Appian, Webflow, and ActiveCampaign.
No-code: These platforms go even further, allowing users with little to no coding experience to build basic apps. They use an intuitive interface with drag-and-drop functionality and pre-built workflows.
Few examples are: Zoho Creator, Caspio, Glide Apps, Adalo, Mailchimp, and Unbounce.

The best platform depends on our specific needs, technical expertise, and budget.

Why is LCNC a Big Deal❓

The benefits of LCNC are far-reaching:

Faster Development: Businesses can bypass lengthy development cycles and get their ideas to market quicker.
Democratization of App Creation: Anyone with a good idea and basic digital skills can now build apps, not just professional coders.
Increased Efficiency: Streamline internal processes and build custom tools using LCNC instead of relying on expensive IT resources.
Improved Collaboration: Break down silos between business users and IT by empowering everyone to contribute to app development.

Citizen Developers Take the Wheel 👨🏻‍💻

LCNC platforms are empowering a new breed of developers: citizen developers. These are business users or individuals with limited coding knowledge who can now build basic applications that meet their specific needs. For example, a marketing team can use an LCNC platform to create a custom lead capture form without relying on the IT department.

The Caveats❗

While LCNC offers tremendous potential, it's not a silver bullet. Here are some limitations to consider:

Complexity: While user-friendly, LCNC platforms might not be suitable for building highly complex applications with unique functionalities.
Customization: The level of customization can be restricted compared to traditional coding.
Vendor Lock-In: Be aware of potential vendor lock-in, where you become reliant on a specific platform's features and functionalities.

The Future of LCNC 🌐

The LCNC market is booming, and it's expected to continue its rapid growth. As these platforms evolve, expect advancements in:

Artificial Intelligence (AI): AI can further automate workflows and suggest functionalities, making LCNC even more accessible.
Security and Scalability: Security features and scalability will continue to improve, allowing LCNC to handle more complex applications.
Integration: Expect smoother integration with existing enterprise systems and data sources.

The Bottom Line 🤔💡

The LCNC revolution is empowering a new wave of creators and reshaping the software development landscape. While it won't replace traditional coding entirely, LCNC provides a powerful tool for businesses and individuals to turn their ideas into reality, faster and more efficiently than ever before.

Thanks for reading. 🙌
Happy Coding! 🚀👨‍💻✨

The Journey of CSS and SASS Towards Serenity

Sudhil Raj K — Mon, 19 Feb 2024 15:23:34 +0000

In the ever-changing world of web design, CSS has undergone significant advancements, enabling designers and developers to craft visually captivating websites. The evolution of CSS has been remarkable, transitioning from a simple styling language to a powerful toolset for creating visually appealing websites. Yet, as web projects became more complex, developers faced challenges in managing styles effectively.

There comes preprocessors like SASS (Syntactically Awesome Stylesheets) and its variant, SCSS (Sassy CSS), which revolutionized the way styles are written and maintained. Gone are the days of battling endless CSS declarations and specificity wars. SASS, a magical land where styles are organized, efficient, and simply delightful. With SASS, developers can take CSS to the next level, making styling tasks easier and more enjoyable.

In this blog, we'll dive into the details of SASS, and see how it has revolutionized styling in modern web development.

SASS is the most mature, stable, and powerful professional grade CSS extension language in the world (Extension of CSS3, To write Smarter and Dynamic CSS, To Write CSS like a programmer).

SASS or SCSS? 🤔

SASS, born in 2006, to bring structure and superpowers to the CSS world. With SASS, developers were given two syntax options: .sass and .scss. Though both offer similar functionality, they have some differences in usage.

.sass opts for a more concise syntax, appealing to those who prefer a cleaner, indention-based structure (similar to what we see in Python).
.scss adopts a syntax similar to CSS, making it more approachable for developers familiar with the CSS with curly braces and semicolons. It is newer and recommended.

Don't worry about the differences between the two flavors for now. Both achieve the same results, so choose whichever feels more comfortable to you! For this blog, we'll stick with the .scss syntax, which closely resembles normal CSS and is easier for beginners.

Modern Browser Support 🌐

As web technologies evolve, browser support becomes pivotal for adopting new styling techniques. Luckily, modern browsers have warmly welcomed the features brought by SASS and SCSS, guaranteeing a smooth experience for developers. This broad support enables developers to fully utilize SASS's capabilities without concerns about compatibility.

Let's dive deeper into the world of SASS! 👇

CSS is typically more static, although it does offer some native features like variables. Now, imagine SASS as a superhero for our CSS. It bestows upon us numerous superpowers, allowing us to transform our static CSS files into something dynamic, resembling a programming language. With SASS, we can incorporate concepts such as variables, functions, loops, and more, enhancing the dynamism and maintainability of our stylesheets.

NOTE: SASS is a CSS preprocessor that allows us to write more powerful and maintainable CSS. However, browsers cannot directly read SASS files. We need to first convert them into normal CSS files that browsers can understand. While some modern browsers have built-in support for reading certain SASS features, it's still essential to learn them in order to use them effectively.

If we use SASS with modern frameworks or libraries, they often handle the conversion process automatically. However, if we want to use SASS with our regular HTML files, we'll need to perform the conversion ourselves. In VSCode, there's a useful plugin called live-sass-compiler that can assist with this process.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

If we're working in a JavaScript application using Node.js, we can add SASS to our project using npm by running a command:
npm install -g sass

Let's explore the powers in detail! ✨

1) Variables 🔥

Imagine this: setting a color or font size once and being able to use it anywhere in our stylesheets. With variables, that's exactly what we can do! Say goodbye to the days of copying and pasting colors and fonts all over our CSS. By defining variables, prefixed with a $ sign, we can set them once and reuse them throughout our stylesheets. This not only keeps our styles consistent but also makes them a breeze to update whenever needed, keeping our code organized and efficient.

//style.scss
$primary-color: #333;
$heading-font: 'Roboto', sans-serif;

body {
  color: $primary-color;
  font-family: $heading-font;
}

See how we define variables for color and font, and then use them throughout! Change the variables, and our entire site updates like magic!

NOTE: In plain CSS, we can define variables using the traditional var method, but many developers are not familiar with this approach or haven't used it in their projects. However, it's essential to be aware of native elements like this.
More information on: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.

2. Nesting 🔥

Tired of writing long chains of selectors? Nesting lets us indent our styles to mirror our HTML structure, making our code more readable and intuitive.

//style.scss
nav {
  background-color: #f2f2f2;
  padding: 10px;
  ul {
    list-style: none;
    li {
      display: inline-block;
      margin: 5px;
      &:hover {
        color: #fff;
      }
      &::after {
        content: "Test";
      }
    }
  }
}

Notice how the styles for the nav and its nested elements closely mirror the HTML structure, making our code incredibly readable! (It's worth mentioning that modern browsers now have native support for reading style nesting).

Also, note the usage of pseudo-selectors like :hover and ::after with the & symbol. The & symbol is a special feature in SASS known as the parent selector reference. It is used to concatenate the parent selector with the nested selector.

3. Mixins 🔥

Are you tired of repeating the same styles over and over again? With mixins, we can create reusable code snippets for common styles, just like functions. They're our secret weapon for DRY (Don't Repeat Yourself) coding, helping us save time and effort.

//style.scss
@mixin button-style {
  padding: 5px;
  border: 1px solid #ddd;
  font-size: 12px;
  cursor: pointer;
}

.btn {
  @include button-style;
  background-color: #4CAF50;
  color: #fff;
}

.red-btn {
  @include button-style;
  background-color: #f44336;
}

The button-style mixin defines common styles for buttons, then we use it in .btn and .red-btn with specific colors. DRY power!
Take note of the usage of the @mixin and @include keywords. @mixin keyword is used to define a mixin, and @include keyword is used to include a mixin within a selector.

As mentioned earlier, mixins in SASS are similar to functions and can accept parameters. Let's explore another example:

//style.scss
@mixin flexclasses($direction, $bgcolor) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
    background-color: $bgcolor;
}

.section1{
    @include flexclasses(column, rgb(207, 49, 49));
    margin: 20px 0;
}

.section2{
    @include flexclasses(row, rgb(52, 52, 219));
    margin: 40px 0;
}

In this example, the flexclasses mixin accepts two parameters: $direction and $bgcolor. When we @include the mixin in the .section1 and .section2 selectors, we provide specific values for these parameters. This allows us to customize the behavior of the mixin based on the needs of each selector.

NOTE: In SASS, all keywords, such as @mixin, @include, and so on, begin with the @ symbol. This symbol distinguishes them from regular CSS syntax and identifies them as SASS-specific directives or features.

4) Partials/Modules 🔥

Partials in SASS ensure modularity by breaking down a large file into smaller, more manageable files. For example, we can create partial files like _variables.scss and _mixins.scss to modularize our codebase and handle complex styles more effectively. This approach promotes code reusability and maintainability.

In the examples provided, our variables and mixins are currently placed in the same style.scss file. To enhance modularity, we can separate them into different partials. Here are the partials we can create:

//_variables.scss
$primary-color: #333;
$heading-font: 'Roboto', sans-serif;

//_mixins.scss
@mixin button-style {
  padding: 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}
@mixin flexclasses($direction, $bgcolor) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
    background-color: $bgcolor;
}

These partial files can then be included in the style.scss file using the @import directive, allowing us to organize our codebase more efficiently and improve overall maintainability.

//style.scss
@import './variables';
@import './mixins';

// Rest of the styles...

When creating partials in SASS, it's a convention to prefix the file names with an underscore (_). For example, _variables.scss and _mixins.scss. This helps distinguish partial files from regular SCSS files and indicates to other developers that these files are meant to be imported into other SCSS files rather than compiled separately.

5) Inheritance 🔥

Think of styles as building blocks that we can build upon. With inheritance in SASS, we can define base styles and then extend them with specific modifications. This keeps our code DRY (Don't Repeat Yourself) and makes it easier to maintain and update in the long run.

// style.scss
.big-btn {
  @extend .btn;
  font-size: 24px;
}

We defined a .btn class earlier, the .big-btn inherits all styles from .btn using @extend, then just adds a bigger font size. No code duplication!

6) Looping 🔥

Need to style a bunch of elements the same way? Loops let us generate repetitive styles in a flash. They automate repetitive styles, saving us time and ensuring consistency.

// style.scss
@for $i from 1 to 6 {
  h#{$i} {
    color: blue;
  }
}

In the provided code snippet, we use a normal for loop with SASS syntax to style all headings from h1 to h6 with the color blue in just one line!

The dynamic usage of the current variable inside the loop is achieved using #{$i}. This interpolation syntax(with #) allows us to insert the current value of the variable i directly into the selector, generating styles for each heading dynamically.
This demonstrates the power and flexibility of SASS loops in automating repetitive styling tasks with ease.

See another example:

// style.scss
@for $i from 1 through 10 {
  .m#{$i} {
    margin: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}

Another example of a concise SASS loop. Can you guess what the compiled output will be?

Indeed, it will generate margin classes from .m1 to .m10 and corresponding margin-top classes from .mt-1 to .mt-10, with pixel values ranging from 1px to 10px assigned as their values. And if we need classes up to .m100, there's no need to worry. We can easily achieve that by adjusting the loop parameter from 10 to 100.

This illustrates the efficiency of using loops to generate such classes. Do you see the power and flexibility they provide?

Let's explore another example with a different type of loop:

// style.scss
$menu-items : home about services contact newitem;
@each $item in $menu-items {
    .#{$item}{
        color:hotpink;
    }
}

In this example, we use the @each directive to iterate over each item in the $menu-items list. For each item, we dynamically generate a CSS class with the item's name as its selector and apply a common style of color: hotpink. This approach allows us to efficiently apply styles to multiple elements based on a predefined list.

Feel free to explore other SASS loops and their usage if you're more curious about their capabilities!

Conclusion 🤔🙌

In simple terms, SCSS(or SASS) is like a supercharged version of CSS that makes styling websites easier and more efficient. With SCSS, developers can use handy features like variables, nesting, and mixins to write cleaner and more organized code. Whether you're new to web development or a seasoned pro, learning SCSS is essential for keeping up with the latest trends and making our projects shine. And the best part? It's not too complicated to pick up and start using right away!

This blog offered just a glimpse of SASS's potential, based on my learnings. I understand it's not a new subject; SASS has been around for a while. The recent motivation to revisit and write this blog came from a colleague who asked me about SASS.😊

Are you interested in further exploration? If so, here are some additional resources to consider:
SASS Documentation:
https://sass-lang.com/documentation/
Interactive SASS Playground:
https://sass-lang.com/playground
https://www.sassmeister.com/

So, say goodbye to CSS chaos and welcome the serenity of SASS! Our stylesheets will appreciate the switch.😉🔥

Thanks for reading. 🙌
Happy Coding! 🚀👨‍💻✨

🔟Lesser-Used Yet Valuable HTML Tags👨‍💻

Sudhil Raj K — Fri, 09 Feb 2024 14:17:33 +0000

Introduction ✨

HTML is fundamental to our journey as developers, serving as a cornerstone since the beginning of our software development endeavors. Over time, native HTML has evolved alongside modern technology and browser advancements.

This article explores few of the very useful HTML tags that developers often overlook. Some of these tags have been introduced in recent years, offering innovative solutions to common challenges.

`<picture>`

This tag allows developers to specify multiple image sources based on device resolutions or screen sizes, offering enhanced control over responsive images compared to the traditional <img> element.

<picture>
  <source srcset="image-small.jpg" media="(max-width: 767px)">
  <source srcset="image-large.jpg" media="(min-width: 768px)">
  <img src="image.jpg" alt="Description of image">
</picture>

`<template>`

With <template>, developers can define reusable HTML fragments that can be dynamically cloned and inserted into the document via JavaScript (One of the key aspects of Web Components). It simplifies client-side template creation without the need for string manipulation.

<template id="myTemplate">
  <p>This is a template content.</p>
</template>

`<details>` and `<summary>`

These tags enable developers to create collapsible content sections, where <summary> serves as a visible heading for the <details> element

<details>
  <summary>Click to expand</summary>
  <p>Hidden content</p>
</details>

`<dialog>`

Representing a dialog box or modal window, <dialog> can be programmatically opened or closed via JavaScript within an HTML document.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

`<datalist>` and `<option>`

These tags offer predefined options for elements with types "text" or "search", allowing users to select from the list or enter their own value.

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
  <option value="Safari">
</datalist>

`<progress>`

Used to represent the progress of tasks such as webpage loading, file uploads, or form submissions, <progress> can be dynamically updated using JavaScript.

<progress value="70" max="100"></progress>

`<mark>`

This tag is used to highlight or mark sections of text within a document. It is often used to indicate important or relevant content.

<p>This is <mark>highlighted</mark> text.</p>

`<abbr>`

This tag defines an abbreviation or acronym within a document. It can be used to provide explanations or expansions for abbreviated terms.

<p><abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup language for creating web pages.</p>

Final Thoughts 🤔💡

These HTML elements, though less commonly used, offer valuable functionality for modern web development. While the prevalence of modern frontend tools and libraries may reduce their usage, it's beneficial to familiarize oneself with these native elements.

Feel free to share additional items for inclusion in the list by commenting below.

Thanks for reading. 🙌
Happy Coding! 🚀👨‍💻✨

Exploring Web Components: Building Reusable UIs for Web Development 🌐👨‍💻

Sudhil Raj K — Sun, 28 Jan 2024 20:41:03 +0000

Even though Web Components have been around for a while, I've never used them in my projects, and I've never seen my colleagues use them either! Have you ever tried using Web Components?

Web Components emerged around 2011 as a collection of web technologies aimed at making reusable custom elements for web development. These components include Custom Elements, Shadow DOM, HTML Templates, and HTML Imports (though the latter is now deprecated). They've evolved over time through collaboration between browser vendors, web standards bodies, and the web development community. With Web Components, we can create encapsulated custom elements with specific functionality and use them in our web applications to promote reusability and maintainability.

Concepts and usage 🚀✨

As developers, we're aware that reusing code whenever possible is beneficial. However, custom markup structures, like complex HTML for custom UI controls, have traditionally posed challenges for reuse. Using them multiple times can clutter our page with tangled HTML, styles, and scripts if not managed carefully.
Web Components aim to address these challenges by offering three main technologies that work together to create flexible custom elements. These elements encapsulate their functionality, allowing for easy reuse throughout our projects without worrying about code conflicts.

1) Custom elements 💡

A set of JavaScript APIs that allows us to define custom elements and their behavior, which can then be used as desired in our user interface.

Custom Elements enable developers to define their own custom HTML elements with associated behavior.
We can create new HTML tags that encapsulate specific functionality and use them just like standard HTML elements.
Custom Elements are defined using the class syntax and extending the HTMLElement class.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // Initialization code
  }
}

customElements.define('my-component', MyComponent);

2) Shadow DOM 💡

The Shadow DOM API comprises JavaScript APIs that allows us to attach an encapsulated "shadow" DOM tree to an element. This shadow DOM tree is rendered independently from the main document DOM, keeping the element's features private. By doing so, we can script and style the element without worrying about conflicts with other parts of the document. This encapsulation ensures that the element's functionality remains contained and isolated, enhancing maintainability and reducing the risk of unintended interactions.

The Shadow DOM allows us to encapsulate the internal structure and styling of a custom element.
It provides a scoped DOM tree, isolated from the rest of the document, preventing styles and scripts from leaking into or out of the component.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = '<p>This is inside the shadow DOM</p>';
  }
}

customElements.define('my-component', MyComponent);

3) HTML templates 💡

The <template> and <slot> elements enable us to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

HTML Templates allow developers to declare fragments of HTML that can be cloned and inserted into the DOM dynamically.
Templates are often used in conjunction with Custom Elements to define the internal structure of a component.

<template id="my-template">
  <style>
    /* Styles for the template */
  </style>
  <div>
    <p>This is a template content.</p>
  </div>
</template>

4) HTML Imports (deprecated)

HTML Imports were initially part of the Web Components specification but have been deprecated in favor of using ES6 modules and other module systems. Developers are encouraged to use modern module systems and tools for managing dependencies.

So the basic approach for implementing a web component generally looks something like this:

Create a class in which we specify our web component functionality, using the class syntax.
Register our new custom element using the CustomElementRegistry.define() method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.
If required, attach a shadow DOM to the custom element using Element.attachShadow() method. Add child elements, event listeners, etc., to the shadow DOM using regular DOM methods.
If required, define an HTML template using <template> and <slot>. Again use regular DOM methods to clone the template and attach it to our shadow DOM.
Use our custom element wherever we like on our page, just like we would any regular HTML element.

Working Example 👨‍💻🔥

We'll define a custom HTML element called <my-button> that displays a button with customizable text.

<!-- button.js -->
const template = document.createElement("template");
template.innerHTML = `
   <style>
      /* Styles for the button */
      :host {
         display: inline-block;
      }
      button {
         padding: 10px 20px;
         font-size: 16px;
         background-color: #ffa500;
         color: #fff;
         border: none;
         border-radius: 5px;
         cursor: pointer;
      }
      button:hover {
         background-color: #f5ab25;
      }
   </style>
   <button><slot></slot></button>`

export class MyButton extends HTMLElement {
   constructor() {
      super();
      // Create a shadow root
      const shadowRoot = this.attachShadow({ mode: 'open' });
     // Clone the template content and append it to the shadow DOM
      const instance = template.content.cloneNode(true);
      shadowRoot.appendChild(instance)
   }

   // connectedCallback(){ }
}

customElements.define('my-button', MyButton); //NOTE: The name must have atleast one hyphen(-) in it.

Now, we can use the <my-button> custom element in any HTML file.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Custom Button - Web Component</title>
      <script defer type="module" src="button.js"></script>
   </head>
   <body>
      <my-button>Hi, I am Custom Button!</my-button>
   </body>
</html>

Open index.html in a web browser, and we should see a button labeled "Hi, I am Custom Button!". This button is rendered using the <my-button> custom element defined in button.js.

Final Thoughts 🤔💡

In summary, traditional web development using plain HTML involves manual coding and styling of UI elements, whereas Web Components offer a structured and modular approach. With encapsulated behavior and styling, thanks to features like shadow DOM, Web Components lead to more maintainable and scalable codebases. Additionally, they provide a standardized method for creating reusable and interoperable components across various frameworks and libraries. While adoption may vary, Web Components offer powerful tools for building modular and maintainable web applications.

Happy Coding! 🚀👨‍💻✨

Navigating Code Realms: Tales from 7 Years in Software 🌐👨‍💻

Sudhil Raj K — Sat, 20 Jan 2024 13:34:45 +0000

Hey there! I'm diving into the world of blogging on Dev.to, and for my maiden voyage, I want to keep it real. No tech jargon, just a simple chat.

Why Am I Here?

After seven years in the software world, I've gathered quite a few stories. I've been a part of the software development landscape since before the arrival of modern AI tools, and now, I continue to navigate this ever-changing terrain. I'm not here to show off my coding skills; I'm here to share what I've learned along the way. From the early days of confusion to now, where problem-solving is second nature – I want you to join me on this journey to share, to learn, and to foster a community that thrives on collective wisdom.🤝

What's In Store?

This blog is like a diary of a coder. I'll spill the beans on those "aha!" moments, the times I got stuck, and how I found my way out. Expect stories, not just about finding solutions but the crazy adventures we face while coding.📖

Join Me on the Ride

If you're a fellow coder or just curious about what happens behind the scenes, let's make this a conversation. No complex stuff, just a chat among friends in the coding world. I've got seven years of tales to share, and I'm excited to see what you think.🗣️

So, buckle up! We're in for a ride on this coder's journey, where the code is but a reflection of the stories we craft and the challenges we conquer. Let's make it a fun one together!✨

Happy Coding! 🚀👨‍💻

DEV Community: Sudhil Raj K

⚡️Speed Up React Projects with Vite + SWC⚡️

🔥 Meet Vite – The Blazing-Fast Dev Server

Here’s what makes Vite special:

⚙️ Now Enter SWC – The Speedy Web Compiler

Why SWC?

🧩 Putting It Together: Vite + SWC in React

✨ Why It Matters

Wrapping Up 🧵

Mystery of Function Currying in JavaScript!

So What Is Currying? 🤔

Why Would Anyone Do That? 🤷‍♂️

Let's Build a Curry Utility! 🛠

Real Life Example You’ll Love ❤️

Wait, Isn’t This Just Partial Application?

Should I Start Currying Everything ❓

Wrapping It Up 💡

Here's What You Should Remember 🧠

Mystery of Hoisting in JavaScript!

What Is Hoisting? 🤔

Common Myths About Hoisting

Understanding Hoisting with Examples 📚

Why Does Hoisting Matter? 🔥

Wrapping It Up 💡

Mystery of Closures in JavaScript!

Common Myths About Closures

What’s the Reality❓

Let’s See Closures in Action 🧑🏻‍💻

Why Do Closures Matter? 🔥

1. Data Privacy

2. Event Handlers

3. Partial Application

Wait, Are Closures Perfect❓

Wrapping It Up 🤲🏻💡

Here’s What to Remember: 🧠

Citizen Developers Rise Up: The LCNC Revolution 🌐

What is LCNC❓

Why is LCNC a Big Deal❓

Citizen Developers Take the Wheel 👨🏻‍💻

The Caveats❗

The Future of LCNC 🌐

The Bottom Line 🤔💡

The Journey of CSS and SASS Towards Serenity

SASS or SCSS? 🤔

Modern Browser Support 🌐

Let's dive deeper into the world of SASS! 👇

1) Variables 🔥

2. Nesting 🔥

3. Mixins 🔥

4) Partials/Modules 🔥

5) Inheritance 🔥

6) Looping 🔥

Conclusion 🤔🙌

🔟Lesser-Used Yet Valuable HTML Tags👨‍💻

Introduction ✨

<picture>

<template>

<details> and <summary>

<dialog>

<datalist> and <option>

<progress>

<mark>

<abbr>

Final Thoughts 🤔💡

Exploring Web Components: Building Reusable UIs for Web Development 🌐👨‍💻

Concepts and usage 🚀✨

1) Custom elements 💡

2) Shadow DOM 💡

3) HTML templates 💡

4) HTML Imports (deprecated)

Working Example 👨‍💻🔥

Final Thoughts 🤔💡

Navigating Code Realms: Tales from 7 Years in Software 🌐👨‍💻

Why Am I Here?

What's In Store?

Join Me on the Ride

`<picture>`

`<template>`

`<details>` and `<summary>`

`<dialog>`

`<datalist>` and `<option>`

`<progress>`

`<mark>`

`<abbr>`