DEV Community: Rowsan Ali

What I Wish I Knew Before Using EC2 for the First Time

Rowsan Ali — Tue, 24 Jun 2025 08:45:52 +0000

When I first started using AWS EC2, I thought I was just spinning up a server.

That’s what most tutorials said.

Just “launch an instance” and you’re good.

But what I didn’t know was this: EC2 is simple on the surface, but has a lot of hidden details that can cost you time, money, and sanity.

Here’s everything I wish someone told me before I used EC2 for the first time — so you can avoid the mistakes I made.

Join my free newsletter where I write about development and everything in between. Sign me up.

1. Choosing the Right Instance Type is Not Optional

The first decision you make is the instance type. You’ll see names like t2.micro, t3.medium, m5.large, and so on.

Back then, I picked the cheapest one — t2.micro. Free tier, right?

But my app kept crashing.

Why? I didn’t understand how “burstable” instances work.

What I learned:

t2.micro uses CPU credits. You earn credits over time and spend them when your app needs more CPU.
If you run a long-running process (like a build or script), you can run out of credits fast.
Once you run out, your instance becomes very slow.

What to do instead:

If you're just experimenting or hosting a static site, t2.micro is fine.
If you need something more stable for background tasks, use t3 or m series.
Always match the instance to your actual workload — not the price tag.

2. Security Groups Are Firewalls (And They Matter)

When I launched my EC2 instance, I couldn’t SSH into it.

I thought it was broken.

But it was just the security group — EC2’s version of a firewall — blocking my access.

What I learned:

By default, EC2 blocks all incoming traffic.
You have to manually open ports, even for SSH (port 22) or HTTP (port 80).
If you want to visit your app in a browser, you need to allow port 80 (or 443 for HTTPS).

What to do instead:

When setting up your instance, add a rule to allow SSH from your IP.
For public websites, allow HTTP and HTTPS.
Don’t open all ports to the world. That’s asking for trouble.

3. EC2 Is Just a Blank Server

When I got into my instance, I typed node to run my Node app.

“Command not found.”

I tried git pull. That didn’t work either.

Then it hit me — EC2 is just a bare OS. Nothing comes preinstalled.

What I learned:

You need to install everything: Node, Python, Git, Nginx, whatever.
There’s no GUI, just a terminal.
It’s basically like renting a computer from the cloud.

What to do instead:

Use a startup script to automate initial setup.
Or create your own custom AMI once everything is configured the way you want.
If you’re deploying often, consider using Elastic Beanstalk or AWS AMI images with pre-installed stacks.

4. EC2 Doesn’t Store Your Data Unless You Tell It To

I once restarted my EC2 instance and all my app files were gone.

Gone.

Why? I was using ephemeral storage — which wipes clean on stop/start.

What I learned:

EC2 has two main storage types: Instance Store (temporary) and EBS (persistent).
Only EBS volumes keep your data after shutdown.
Some AMIs default to instance store unless changed.

What to do instead:

Always use EBS for anything important.
Take snapshots of your volume regularly.
If you need even more durability, consider storing files on S3 instead.

5. Public IPs Can Change (Unless You Use Elastic IPs)

I built a nice little app, deployed it on EC2, and sent the IP to my friends.

A few days later, they said it wasn’t working.

I checked. The public IP had changed.

What I learned:

EC2 assigns a new public IP every time you stop and start the instance.
If you want a stable IP, you must use an Elastic IP.

What to do instead:

Go to EC2 > Elastic IPs and allocate one.
Associate it with your instance.
Update your DNS or use this IP in your frontend code.

Note: You’ll be charged for unused Elastic IPs, so release them when not needed.

6. SSH Key Pairs Are Everything

You can’t just log in with a password.

When you launch your instance, AWS asks for a key pair — that .pem file.

I deleted mine thinking I didn’t need it again.

Big mistake.

What I learned:

Without the .pem file, you can’t SSH into the instance.
If you lose it, you’ll need to create a new instance or use a snapshot workaround.

What to do instead:

Store your key securely.
Never delete it unless you're 100% done with the instance.
Use a password manager or secure backup tool.

7. You Need to Set Up Auto Shutdown or You’ll Forget

I once left an EC2 instance running for a month.

Didn’t even realize it.

Until the bill came.

What I learned:

EC2 charges by the second, but only while the instance is running.
There's no warning or reminder if something stays running.

What to do instead:

Set a calendar reminder to stop unused instances.
Use AWS Budgets to get alerts on spend.
You can also set up a Lambda function to auto-stop idle EC2 instances.

8. EC2 Is Powerful, But Not Always the Best Choice

If you're just trying to host a static website, EC2 is overkill.

Same if you don’t want to manage Linux.

What I learned:

EC2 gives you full control — which means full responsibility.
For simpler use cases, AWS offers easier tools:
- Amplify for frontend apps
- Elastic Beanstalk for managed backends
- Lightsail for WordPress or quick server setup
- Lambda for serverless tasks

What to do instead:

Think about what you actually need.
If you're just testing something, EC2 is fine.
But don’t force yourself to manage infrastructure unless it makes sense.

Final Thoughts

EC2 is a powerful tool. But like most AWS services, it assumes you know what you’re doing.

The documentation doesn’t always make things simple.

And one small setting can lead to hours of debugging or unexpected costs.

But once you understand the basics — instances, IPs, storage, firewalls — EC2 starts to make sense.

It becomes a tool you can rely on.

Just remember: treat EC2 like a real server. Because that’s exactly what it is.

And a little preparation will save you a lot of pain later.

Join my free newsletter where I write about development and everything in between. Sign me up.

How I Used AWS CloudFront to Make My Site 2x Faster Globally

Rowsan Ali — Tue, 24 Jun 2025 08:44:35 +0000

There was a time when I thought a fast server meant a fast site.

But I was wrong.

No matter how optimized my code was, users from Europe or Asia were seeing slow load times.

Meanwhile, everything loaded fine for me—because my server was in the same country.

So I started digging.

That’s when I found the real bottleneck: distance.

The solution?

AWS CloudFront.

It didn’t just improve my load times—it cut them in half for users worldwide.

Join my free newsletter where I write about development and everything in between. Sign me up.

Here’s exactly how I did it.

Step 1: Understanding the Problem

My site was hosted on an EC2 instance in Virginia (us-east-1).

Great performance in the US.

Terrible everywhere else.

When a visitor in Germany loaded my homepage, the request had to travel across the ocean.

It wasn’t the server—it was the trip.

Even with gzip, cache control, and image optimization, I was still losing 2–4 seconds on initial page load.

Not ideal if you care about bounce rate.

Step 2: What Is CloudFront?

CloudFront is AWS’s Content Delivery Network (CDN).

It distributes your static (and even dynamic) content across 300+ edge locations around the world.

When a user visits your site, CloudFront serves content from the nearest edge server, not your origin server.

That means fewer miles traveled, faster response times.

It also caches content intelligently, reducing backend load.

Perfect for image-heavy websites, SPAs, or any site that serves repeat traffic.

Step 3: Preparing My Content for CloudFront

Before using CloudFront, I made sure my site had:

Static assets stored on S3 (images, CSS, JS)
HTML files deployed via S3 (my site was static, but this works with EC2 or other backends too)
Correct Content-Type headers on files (important for caching)
Proper Cache-Control metadata set on S3 objects (so CloudFront knows what to cache and for how long)

Without these, CloudFront would still work—but not well.

Bad headers = no cache = no performance win.

Step 4: Creating a CloudFront Distribution

Here’s exactly how I set it up:

Opened AWS Console > CloudFront
Clicked “Create Distribution”
Under Origin Domain, I selected my S3 bucket (the one hosting my site)
Left Origin Path empty (since I wanted to serve the whole bucket)
Set Viewer Protocol Policy to “Redirect HTTP to HTTPS”
Under Default Cache Behavior, I enabled:
- Caching based on headers: None (to improve cache hits)
- Compress objects automatically: Yes
For Price Class, I chose “Use all edge locations” for maximum global reach

Lastly, I created the distribution.

It took about 15 minutes to deploy.

Step 5: Connecting My Domain

CloudFront gives you a default domain like d1234.cloudfront.net.

Not great for production.

To use my custom domain (www.mysite.com):

I went to Route 53 (or your DNS provider)
Created a CNAME record pointing www.mysite.com to my CloudFront domain
In CloudFront, under Alternate Domain Names (CNAMEs), I added www.mysite.com
Set up an SSL certificate in ACM (Amazon Certificate Manager) for my domain
Linked it in the CloudFront distribution

After that, my domain worked through CloudFront—securely, globally, and fast.

Step 6: Measuring the Results

I didn’t just want to “feel” the difference.

I wanted proof.

So I ran tests using:

Google PageSpeed Insights
WebPageTest.org (with servers in Asia and Europe)
Lighthouse in Chrome DevTools

Before CloudFront (Germany test server):

Time to First Byte (TTFB): ~900ms
Full load: ~3.5 seconds

After CloudFront:

TTFB: ~200ms
Full load: ~1.6 seconds

That’s more than 2x faster.

And in some regions, it was even faster than that.

Step 7: Fine-Tuning the Cache Behavior

After a week, I noticed some files weren’t updating as expected.

Turns out I had set a long cache duration on JavaScript files.

To fix this, I:

Updated S3 object metadata to use Cache-Control: max-age=3600, must-revalidate
In CloudFront, created cache behaviors to set different rules for:
- /index.html → short cache (1 minute)
- /static/* → long cache (1 month)
Enabled Invalidations when I pushed updates (can be done via CLI too)

This gave me the best of both worlds:

Fast caching + flexibility to update content when needed.

What You Should Know Before Using CloudFront

Here are a few simple lessons I learned:

Use S3 + CloudFront if you’re serving a static site. It’s cheap and reliable.
Always configure headers. Without correct Content-Type and Cache-Control, performance gains drop.
CloudFront logs are a goldmine. Use them to see where your traffic comes from and what’s being cached.
Invalidate carefully. CloudFront invalidation is powerful, but avoid frequent full-path invalidations—they cost money and time.
Price class matters. If your traffic is mostly in one region, use a regional edge setting to reduce costs.

Final Thoughts

You don’t need a complex backend to go global.

You don’t need 10 engineers or a $10K/month CDN.

What you need is a clear understanding of where your performance is breaking—and a simple tool to fix it.

For me, that was AWS CloudFront.

It let me serve my site faster, everywhere, without changing a single line of code.

The results were real.

The difference was visible.

And the setup? Just a few clicks.

If you’re running a public-facing site and haven’t used CloudFront yet, you’re leaving speed on the table.

Join my free newsletter where I write about development and everything in between. Sign me up.

10 JavaScript Tricks Every Developer Should Know

Rowsan Ali — Wed, 16 Apr 2025 12:42:14 +0000

Most developers use JavaScript every day.

But few know the small tricks that make a big difference.

Here are 10 simple but powerful JavaScript tips that can help you write cleaner, smarter code.

1. Optional Chaining (`?.`)

Access deeply nested values without breaking your code.

const user = {
  name: "Alex",
  profile: {
    age: 30
  }
};

console.log(user.profile?.age); // 30
console.log(user.settings?.theme); // undefined (no error)

Why it matters

You don’t need to keep writing if statements or && chains. It just works.

2. Nullish Coalescing (`??`)

A better way to set fallback values.

const input = "";
const value = input ?? "Default";

console.log(value); // "" (not "Default")

Why it's better

It only falls back if the value is null or undefined, not falsy like "" or 0.

3. Short-Circuit Evaluation

Run code only if a condition is true.

let isLoggedIn = true;
isLoggedIn && console.log("Welcome back!");

Cleaner than:

if (isLoggedIn) {
  console.log("Welcome back!");
}

4. Destructuring Objects and Arrays

Extract values in one line.

const user = { name: "Sarah", age: 25 };
const { name, age } = user;

const numbers = [1, 2, 3];
const [first, second] = numbers;

Why it helps

Less code. More clarity.

5. Default Function Parameters

No more manual checks inside functions.

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

greet(); // Hello, Guest

6. Template Literals

Build strings without the messy +.

const name = "John";
const age = 28;

console.log(`My name is ${name} and I am ${age} years old.`);

7. Spread and Rest Operators

Combine or split data easily.

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3)); // 6

8. Object Property Shorthand

Cleaner object definitions.

const name = "Liam";
const age = 22;

const user = { name, age };

Instead of:

const user = { name: name, age: age };

9. Array `.at()` Method

Access items by position, including negatives.

const letters = ["a", "b", "c", "d"];
console.log(letters.at(-1)); // "d"

Why use it

It’s clearer than arr[arr.length - 1].

10. Double Bitwise NOT for Floor

Fast alternative to Math.floor().

console.log(~~4.9); // 4
console.log(~~-4.9); // -4

Caution:

Only works well with positive or simple floats. Avoid with big numbers or decimals you care about.

Final Thought

Great code isn’t just about knowing how something works.

It’s about knowing when to use it — and using it wisely.

These tricks won’t make you a 10x dev overnight.

But they’ll help you write code that’s easier to read, easier to debug, and harder to mess up.

And that’s a great place to start.

5 core software design principles every developer should know (with examples).

Rowsan Ali — Mon, 07 Apr 2025 10:10:23 +0000

Good software design is essential for creating systems that are maintainable, scalable, and easy to understand. Here are five core software design principles that every developer should know:

Single Responsibility Principle

The Single Responsibility Principle states that a class should have only one reason to change. This means that a class should have only one responsibility or functionality. If a class has multiple responsibilities, it can lead to tight coupling and make it difficult to modify or extend the class.

For example, consider a class called “User” that has methods for authentication, data storage, and logging. This class has multiple responsibilities and can be difficult to maintain. Instead, you could break this class into separate classes, each with a single responsibility, such as “Authenticator”, “DataStore”, and “Logger”.

Open-Closed Principle

The Open-Closed Principle states that a class should be open for extension but closed for modification. This means that you should be able to add new functionality to a class without modifying its existing code. This principle helps to ensure that changes to a class do not break existing functionality.

For example, consider a class called “PaymentGateway” that supports multiple payment methods, such as credit cards and PayPal. Instead of modifying the existing class to add a new payment method, you could create a new class that inherits from the “PaymentGateway” class and adds the new payment method.

Liskov Substitution Principle

The Liskov Substitution Principle states that subtypes should be substitutable for their base types. This means that any code that uses a base type should be able to work with a subtype without knowing the difference. This principle helps to ensure that inheritance is used correctly and that subtypes are truly substitutable for their base types.

For example, consider a class called “Vehicle” and a subclass called “Car”. The “Car” class should be substitutable for the “Vehicle” class, meaning that any code that uses a “Vehicle” object should be able to work with a “Car” object without knowing the difference.

Interface Segregation Principle

The Interface Segregation Principle states that clients should not be forced to depend on interfaces they do not use. This means that a class should not be forced to implement an interface that has methods it does not need. Instead, the interface should be broken down into smaller, more focused interfaces that are specific to the needs of each client.

For example, consider an interface called “Printable” that has methods for printing, scanning, and faxing. A class that only needs to print documents should not be forced to implement the “Printable” interface, which includes methods for scanning and faxing. Instead, the “Printable” interface could be broken down into separate interfaces, such as “Printable”, “Scannable”, and “Faxable”.

Dependency Inversion Principle

The Dependency Inversion Principle states that high-level modules should not depend on low-level modules, but both should depend on abstractions. This means that a high-level module should not be tightly coupled to a specific low-level module, but instead should depend on an abstraction that defines the interface for the low-level module.

For example, consider a class called “Logger” that depends on a specific logging framework, such as Log4j. Instead of tightly coupling the “Logger” class to Log4j, you could define an abstraction, such as a “Logging” interface, that defines the logging methods. The “Logger” class can then depend on the “Logging” interface, which can be implemented by different logging frameworks, such as Log4j or Logback.

Responsive Design Confusion. How to fix it?

Rowsan Ali — Thu, 20 Mar 2025 07:12:04 +0000

Responsive design is a cornerstone of modern web development. With the proliferation of devices of all shapes and sizes, ensuring that your website looks great and functions well on every screen is no longer optional—it's essential. However, one of the most challenging aspects of responsive design is managing breakpoints. Breakpoints are the points at which your website's content and design adapt to different screen sizes. Keeping track of these breakpoints can quickly become overwhelming, especially as the number of devices and screen resolutions continues to grow.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

In this blog post, we'll explore the challenges of managing breakpoints in responsive design, and we'll provide practical tips and code examples to help you keep track of them more effectively.

What Are Breakpoints?

Breakpoints are specific screen widths at which your website's layout changes to accommodate different screen sizes. For example, you might have a breakpoint at 768px, where the layout shifts from a single-column design on mobile devices to a multi-column design on tablets.

Here's a simple example of how breakpoints are used in CSS:

/* Default styles for mobile devices */
.container {
  width: 100%;
  padding: 10px;
}

/* Styles for tablets (768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Styles for desktops (1024px and up) */
@media (min-width: 1024px) {
  .container {
    width: 980px;
    padding: 30px;
  }
}

In this example, the .container element has different widths and padding depending on the screen size. The @media rule is used to apply different styles at different breakpoints.

The Challenge of Managing Breakpoints

While the concept of breakpoints is straightforward, managing them can be challenging for several reasons:

Proliferation of Devices: With new devices being released constantly, each with different screen sizes and resolutions, it's difficult to know which breakpoints to target.
Design Complexity: As designs become more complex, the number of breakpoints required to accommodate different layouts increases.
Maintenance: Keeping track of breakpoints across multiple CSS files or components can be cumbersome, especially in large projects.
Inconsistency: Without a clear strategy, breakpoints can become inconsistent, leading to a disjointed user experience.

Strategies for Managing Breakpoints

To overcome these challenges, it's important to adopt a systematic approach to managing breakpoints. Here are some strategies to help you keep track of them more effectively:

1. Use a Mobile-First Approach

A mobile-first approach involves designing for mobile devices first and then progressively enhancing the design for larger screens. This approach simplifies the process of managing breakpoints because you start with the smallest screen size and add breakpoints as needed for larger screens.

Here's an example of a mobile-first approach in CSS:

/* Default styles for mobile devices */
.container {
  width: 100%;
  padding: 10px;
}

/* Styles for tablets (768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Styles for desktops (1024px and up) */
@media (min-width: 1024px) {
  .container {
    width: 980px;
    padding: 30px;
  }
}

In this example, the default styles are applied to mobile devices, and additional styles are added for tablets and desktops using min-width media queries.

2. Define Breakpoints in a Centralized Location

To maintain consistency and make it easier to manage breakpoints, define them in a centralized location. This could be a CSS file, a Sass/SCSS file, or even a JavaScript file if you're using a CSS-in-JS solution.

Here's an example of defining breakpoints in a Sass file:

// _breakpoints.scss
$breakpoints: (
  'small': 576px,
  'medium': 768px,
  'large': 992px,
  'xlarge': 1200px,
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

You can then use this mixin in your styles:

.container {
  width: 100%;
  padding: 10px;

  @include respond-to('medium') {
    width: 750px;
    padding: 20px;
  }

  @include respond-to('large') {
    width: 980px;
    padding: 30px;
  }
}

By defining breakpoints in a centralized location, you can easily update them across your entire project.

3. Use CSS Custom Properties (Variables)

CSS custom properties (also known as CSS variables) can be used to define breakpoints and make them easier to manage. This approach is particularly useful if you want to dynamically change breakpoints based on user preferences or other conditions.

Here's an example of using CSS custom properties for breakpoints:

:root {
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
  --breakpoint-xlarge: 1200px;
}

.container {
  width: 100%;
  padding: 10px;
}

@media (min-width: var(--breakpoint-medium)) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

@media (min-width: var(--breakpoint-large)) {
  .container {
    width: 980px;
    padding: 30px;
  }
}

Using CSS custom properties allows you to easily update breakpoints by changing the values in the :root selector.

4. Leverage CSS Frameworks

Many CSS frameworks, such as Bootstrap, Foundation, and Tailwind CSS, come with predefined breakpoints. These frameworks can save you time and effort by providing a consistent set of breakpoints that you can use across your project.

For example, Bootstrap defines the following breakpoints:

Extra small (xs): <576px
Small (sm): ≥576px
Medium (md): ≥768px
Large (lg): ≥992px
Extra large (xl): ≥1200px
Extra extra large (xxl): ≥1400px

Here's an example of using Bootstrap's breakpoints:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <p>Content goes here</p>
    </div>
  </div>
</div>

In this example, the col-12 class ensures that the column takes up the full width on extra small screens, while col-md-6 and col-lg-4 adjust the column width for medium and large screens, respectively.

5. Use JavaScript to Dynamically Adjust Breakpoints

In some cases, you may need to dynamically adjust breakpoints based on user interactions or other conditions. JavaScript can be used to achieve this by adding or removing CSS classes or styles based on the screen size.

Here's an example of using JavaScript to dynamically adjust breakpoints:

const container = document.querySelector('.container');

function updateLayout() {
  if (window.innerWidth >= 768) {
    container.classList.add('tablet-layout');
  } else {
    container.classList.remove('tablet-layout');
  }
}

window.addEventListener('resize', updateLayout);
updateLayout(); // Initial call to set the layout

In this example, the updateLayout function adds or removes the tablet-layout class based on the screen width. The resize event listener ensures that the layout is updated whenever the window is resized.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

Conclusion

Managing breakpoints in responsive design can be overwhelming, but with the right strategies and tools, you can keep track of them more effectively. By adopting a mobile-first approach, defining breakpoints in a centralized location, using CSS custom properties, leveraging CSS frameworks, and using JavaScript to dynamically adjust breakpoints, you can create a more consistent and maintainable responsive design.

Remember, the key to successful responsive design is not just about adding breakpoints—it's about creating a seamless user experience across all devices. By keeping your breakpoints organized and consistent, you'll be well on your way to achieving that goal.

Happy coding!

What I Wish I Knew Before Learning Frontend Development

Rowsan Ali — Sat, 08 Mar 2025 11:40:54 +0000

When I first started learning frontend development, I thought it was all about making websites look good. I imagined tweaking colors, adjusting fonts, and arranging layouts. But as I dove deeper, I quickly realized how much more there was to it. If I could go back, here’s what I wish I had known before starting my frontend journey.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

1. HTML, CSS, and JavaScript Are Just the Beginning

When you start learning frontend development, it feels like mastering HTML, CSS, and JavaScript is enough. But the reality is, these are just the foundation. Once you grasp the basics, you’ll need to learn frameworks, libraries, build tools, and best practices.

For example:

CSS alone is not enough—you’ll likely use a preprocessor like SASS or a utility framework like Tailwind CSS.
JavaScript is powerful, but learning React, Vue, or Angular becomes essential for building complex applications.
Managing state is a skill on its own, and tools like Redux, Zustand, or React Context make a huge difference.

If I had known this earlier, I would have structured my learning more efficiently instead of jumping between random tutorials.

2. You Can’t Ignore JavaScript

Many beginners avoid JavaScript because it seems complicated. I did the same. I focused too much on HTML and CSS, thinking I could add JavaScript later. That was a mistake.

Frontend development is heavily JavaScript-driven. Even CSS animations and interactivity often require JavaScript. The sooner you become comfortable with JavaScript, the smoother your journey will be.

Some key JavaScript concepts that helped me:

Understanding closures, promises, and async/await
Mastering DOM manipulation and event handling
Learning how JavaScript frameworks work under the hood

Don’t delay JavaScript—it’s the backbone of modern frontend development.

3. Responsive Design Is Not Optional

At first, I built websites that looked great on my screen. But the moment I tested them on a phone or tablet, everything broke.

Responsive design is not just a feature—it’s a necessity. Users visit websites from different devices, and if your site isn’t mobile-friendly, it’s a bad experience.

Things that helped me:

Flexbox and CSS Grid: The two most powerful layout tools in CSS.
Media queries: Controlling how your design adapts to different screen sizes.
Mobile-first approach: Designing for smaller screens first, then scaling up.

Mastering these made my websites look great on any device without major rework.

4. CSS Can Get Messy Quickly

I used to think CSS was simple—just write styles and everything works. But as projects grew, my stylesheets became a nightmare. Conflicting styles, specificity issues, and duplicate code made things frustrating.

To avoid this:

Use CSS naming conventions like BEM (Block-Element-Modifier) to keep things organized.
Consider CSS-in-JS if working with frameworks like React.
Learn about Tailwind CSS or Bootstrap to speed up styling while maintaining structure.

Writing clean, maintainable CSS is a skill that takes time to develop, but it makes a huge difference in large projects.

5. Version Control Is a Lifesaver

I didn’t use Git at first, and I regret it. Every time I made a change and broke something, I manually copied files to save previous versions. It was a disaster.

Learning Git and GitHub early would have saved me hours of frustration. With Git, I could:

Keep track of every change.
Revert to previous versions if I messed up.
Collaborate with others without overwriting their work.

Even if you’re working alone, Git is a must-have skill. The earlier you learn it, the better.

6. Debugging Is Part of the Job

I used to panic every time my code didn’t work. I’d delete everything and start over. Eventually, I realized that debugging is just part of being a developer.

What helped me improve:

Learning how to use Chrome DevTools to inspect elements and debug JavaScript.
Reading error messages carefully instead of ignoring them.
Using console.log() strategically to understand what’s happening in my code.
Writing small, testable pieces of code instead of huge, unmanageable functions.

Debugging is a skill, and the more you do it, the easier it gets.

7. Not Every Tool or Framework Is Necessary

It’s easy to get overwhelmed by the number of tools available. Every day, there’s a new library or framework trending on Twitter. I used to jump from one tool to another without truly mastering anything.

Now, I follow this rule:

Learn the fundamentals first (HTML, CSS, JavaScript).
Pick one JavaScript framework (React, Vue, or Angular) and stick with it.
Use tools only when they solve a real problem.

Don’t fall into the trap of constantly switching tools just because they’re popular. Focus on depth over breadth.

8. Soft Skills Matter Too

I thought being a frontend developer meant just writing code. But working in tech involves more than that. Communication, problem-solving, and teamwork are just as important.

Some key soft skills that made a difference for me:

Writing clear documentation so others (and future me) can understand my code.
Asking good questions instead of struggling alone for hours.
Learning to take feedback without feeling defensive.

Great developers are not just good at coding—they are good at working with others too.

9. Projects Teach More Than Tutorials

I spent months watching tutorials, thinking I was learning. But when I tried to build something on my own, I was stuck.

The truth is: You don’t learn until you build.

Some of the best ways to improve:

Recreate websites you admire to understand how they are built.
Contribute to open-source projects to gain real-world experience.
Start a side project that solves a real problem, even if it’s small.

Tutorials are helpful, but applying what you learn is what truly makes you a developer.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

Final Thoughts

Frontend development is exciting, but it comes with challenges. Looking back, I wish I had focused on JavaScript earlier, embraced debugging, and worked on real projects instead of just watching tutorials.

If you’re starting now, don’t rush. Learn step by step, build real projects, and don’t get distracted by every new trend. The more you practice, the better you’ll get.

Frontend development isn’t just about coding—it’s about solving problems, improving experiences, and continuously learning. Enjoy the journey!

7 JavaScript Features Every Frontend Developer Should Know

Rowsan Ali — Wed, 05 Mar 2025 16:19:21 +0000

JavaScript is constantly evolving, introducing new features that make coding more efficient, readable, and maintainable. If you're a frontend developer, understanding these features can significantly improve your workflow.

Here are 7 essential JavaScript features you should know:

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

1. Optional Chaining (?.)

Before optional chaining, checking for deeply nested properties required long chains of conditionals. Now, JavaScript makes it easy:

const user = { profile: { name: "John" } };
console.log(user.profile?.name); // John
console.log(user.profile?.age); // undefined (no error)

If any property in the chain is null or undefined, JavaScript returns undefined instead of throwing an error.

2. Nullish Coalescing (??)

The ?? operator helps when you need to provide a default value but want to distinguish between null/undefined and falsy values like 0 or "".

const value = null ?? "Default Value";
console.log(value); // "Default Value"

It’s a cleaner alternative to using ||, which would treat 0 and "" as falsy values.

3. Destructuring Assignment

Destructuring allows you to extract values from objects or arrays in a cleaner way:

const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name); // Alice
console.log(age); // 25

This reduces redundant code when accessing object properties.

4. Template Literals

Instead of messy string concatenation, template literals allow cleaner string formatting:

const name = "Tom";
const message = `Hello, ${name}!`;
console.log(message); // "Hello, Tom!"

They also support multi-line strings without needing \n:

const multiLine = `This is line 1
This is line 2`;
console.log(multiLine);

5. Arrow Functions (=>)

Arrow functions provide a shorter syntax and automatically bind this:

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

For single-expression functions, you can omit curly braces and the return keyword.

6. Spread and Rest Operators (...)

The spread operator (...) expands elements, while the rest operator collects arguments into an array.

Spread Example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]

Rest Example:

function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6

7. Promises and Async/Await

Handling asynchronous operations is easier with Promises and async/await:

Using Promises:

fetch("https://api.example.com")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Using Async/Await:

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

Async/await makes asynchronous code more readable and easier to debug.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

Final Thoughts

Mastering these JavaScript features will make your code cleaner, more efficient, and easier to maintain. As JavaScript evolves, staying up to date with new features will help you write modern and scalable applications.

10 VS Code Extensions That Will Instantly Boost Productivity

Rowsan Ali — Tue, 04 Mar 2025 07:54:36 +0000

Visual Studio Code (VS Code) has become one of the most popular code editors among developers, and for good reason. It’s lightweight, highly customizable, and packed with features that make coding more efficient. One of the key reasons for its popularity is its extensive library of extensions. These extensions can supercharge your workflow, automate repetitive tasks, and help you write better code faster.

In this blog post, we’ll explore 10 VS Code extensions that will instantly boost your productivity. Whether you’re a front-end developer, back-end engineer, or full-stack wizard, these tools will help you save time and focus on what really matters: writing great code.

Download Now

1. Prettier – Code Formatter

Prettier is a must-have extension for any developer who values clean, consistent code. It automatically formats your code to adhere to a consistent style, saving you the hassle of manually adjusting indentation, spacing, and line breaks. Prettier supports a wide range of languages, including JavaScript, TypeScript, CSS, HTML, and JSON.

Why it boosts productivity:

Eliminates debates over code style in team projects.
Automatically formats code on save, so you don’t have to think about it.
Ensures consistency across your codebase.

2. ESLint

ESLint is a powerful linting tool that helps you catch errors and enforce coding standards in JavaScript and TypeScript. It integrates seamlessly with VS Code, providing real-time feedback on potential issues in your code.

Why it boosts productivity:

Catches syntax errors and bugs before they make it to production.
Enforces coding standards and best practices.
Customizable rules to fit your team’s needs.

3. GitLens – Git Supercharged

GitLens supercharges the Git capabilities built into VS Code. It provides detailed insights into your codebase, such as who last modified a line of code, why it was changed, and when. It also makes it easier to navigate through branches, commits, and repositories.

Why it boosts productivity:

Streamlines Git workflows with inline blame annotations and commit history.
Simplifies code reviews by providing context for changes.
Enhances collaboration by making it easier to understand code changes.

4. Live Server

Live Server is a lifesaver for front-end developers. It launches a local development server with live reloading, so you can see changes to your HTML, CSS, and JavaScript files in real-time as you code.

Why it boosts productivity:

Saves time by automatically refreshing the browser when you make changes.
Perfect for testing responsive designs and debugging.
Lightweight and easy to set up.

5. Bracket Pair Colorizer

Bracket Pair Colorizer is a simple yet incredibly useful extension that colorizes matching brackets in your code. This makes it much easier to navigate complex nested structures, especially in languages like JavaScript, Python, or C++.

Why it boosts productivity:

Reduces time spent searching for matching brackets.
Improves code readability, especially in deeply nested code.
Customizable colors to suit your preferences.

6. Auto Rename Tag

If you work with HTML or XML, Auto Rename Tag is a game-changer. When you rename an opening tag, it automatically renames the corresponding closing tag, and vice versa.

Why it boosts productivity:

Eliminates the need to manually update closing tags.
Reduces errors caused by mismatched tags.
Works seamlessly with JSX and Vue templates.

7. Path Intellisense

Path Intellisense is a handy extension that autocompletes file paths as you type. Whether you’re importing a module in JavaScript or linking to a stylesheet in HTML, this extension saves you from manually typing out long file paths.

Why it boosts productivity:

Speeds up file navigation and imports.
Reduces errors caused by typos in file paths.
Works with a wide range of file types.

8. Code Runner

Code Runner allows you to quickly run code snippets or files in multiple languages, including Python, Java, C++, and more. It’s perfect for testing small pieces of code without leaving VS Code.

Why it boosts productivity:

Saves time by running code directly in the editor.
Supports a wide range of programming languages.
Great for quick prototyping and debugging.

9. Todo Tree

Todo Tree helps you keep track of all the TODO, FIXME, and NOTE comments in your codebase. It scans your files and organizes these comments into a tree view, making it easy to jump to specific tasks.

Why it boosts productivity:

Keeps track of pending tasks and improvements.
Helps you stay organized and focused.
Customizable tags and filters.

10. Remote – SSH

The Remote – SSH extension allows you to work on remote servers directly from VS Code. It’s perfect for developers who need to edit files or debug code on a remote machine.

Why it boosts productivity:

Eliminates the need to switch between local and remote environments.
Provides a seamless development experience on remote servers.
Great for working with cloud-based development environments.

Bonus Tip: Syncing Your Extensions

If you use VS Code across multiple machines, consider using the Settings Sync extension. It syncs your extensions, settings, and keybindings across devices, so you can pick up right where you left off.

Conclusion

VS Code’s extensibility is one of its greatest strengths, and these 10 extensions are just the tip of the iceberg. By incorporating these tools into your workflow, you can save time, reduce errors, and focus on what you do best: writing great code.

What are your favorite VS Code extensions? Let us know in the comments below! And if you found this post helpful, don’t forget to share it with your fellow developers. Happy coding! 🚀

Download Now

Pro Tip: To install any of these extensions, simply open the Extensions view in VS Code (Ctrl+Shift+X or Cmd+Shift+X on macOS), search for the extension by name, and click Install.

5 Common Mistakes Frontend Developers Make (And How to Fix Them)

Rowsan Ali — Sun, 02 Mar 2025 12:01:53 +0000

/* Bad Practice */
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Good Practice */
.box {
  display: -webkit-box; /* Safari */
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -webkit-box-pack: center; /* Safari */
  -ms-flex-pack: center; /* IE 10 */
  justify-content: center;
  -webkit-box-align: center; /* Safari */
  -ms-flex-align: center; /* IE 10 */
  align-items: center;
}

In the good practice example, we use CSS prefixes to ensure that the flexbox layout works correctly in older browsers.

Download Now

Conclusion

Frontend development is a challenging but rewarding field. By avoiding these common mistakes and implementing the fixes we've discussed, you can create more efficient, accessible, and user-friendly websites. Remember to always use semantic HTML, prioritize responsive design, minimize JavaScript usage, optimize images, and test across browsers. Happy coding!

10 CSS Tricks Every Frontend Developer Should Know

Rowsan Ali — Sat, 01 Mar 2025 12:52:50 +0000

CSS (Cascading Style Sheets) is the backbone of web design, allowing developers to create visually stunning and responsive websites. While CSS is relatively easy to learn, mastering it requires a deep understanding of its nuances and advanced techniques. In this blog post, we’ll explore 10 CSS tricks that every frontend developer should know to level up their skills and create more efficient, maintainable, and visually appealing websites.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

1. CSS Variables for Consistent Styling

CSS variables (also known as custom properties) allow you to store reusable values, such as colors, fonts, and spacing, in one place. This makes it easier to maintain consistency across your stylesheet.

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

button {
  background-color: var(--primary-color);
}

Why it’s useful: If you need to change the primary color, you only need to update it in one place (:root).

2. Flexbox for Layouts

Flexbox is a powerful layout module that simplifies the process of creating responsive and flexible layouts. It’s perfect for aligning items horizontally or vertically.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

Why it’s useful: Flexbox eliminates the need for floats and hacks to create complex layouts.

3. Grid for Advanced Layouts

CSS Grid is another layout system that allows you to create two-dimensional layouts with rows and columns. It’s ideal for building grid-based designs.

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

.item {
  grid-column: span 2;
}

Why it’s useful: Grid provides precise control over the placement and sizing of elements.

4. Responsive Design with Media Queries

Media queries enable you to apply styles based on the device’s screen size, making your website responsive.

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 50%;
  }
}

Why it’s useful: Ensures your website looks great on all devices, from mobile to desktop.

5. Transitions and Animations

CSS transitions and animations add interactivity and polish to your website. Use them to create smooth hover effects or animated elements.

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slide 0.5s ease-out;
}

Why it’s useful: Enhances user experience with subtle animations.

6. Pseudo-elements for Extra Content

Pseudo-elements (::before and ::after) allow you to insert content without modifying your HTML.

.tooltip::after {
  content: "Tooltip text";
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
}

.tooltip:hover::after {
  display: block;
}

Why it’s useful: Adds decorative or functional elements without cluttering your HTML.

7. Custom Cursors

You can change the default cursor to a custom one using the cursor property.

.button {
  cursor: pointer;
}

.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

Why it’s useful: Improves user interaction and adds a unique touch to your design.

8. Clip-path for Creative Shapes

The clip-path property allows you to create complex shapes by clipping an element.

.shape {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Why it’s useful: Enables you to create visually interesting designs without images.

9. Sticky Positioning

The position: sticky property makes an element stick to the top of the viewport when scrolling.

.header {
  position: sticky;
  top: 0;
  background-color: #fff;
}

Why it’s useful: Perfect for creating sticky headers or navigation bars.

10. Dark Mode with CSS

You can easily implement dark mode using the prefers-color-scheme media query.

body {
  background-color: #fff;
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

Why it’s useful: Improves accessibility and user experience by adapting to user preferences.

Bonus Tip: CSS Reset for Consistent Styling

Different browsers have default styles that can cause inconsistencies. A CSS reset ensures a clean slate.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Why it’s useful: Eliminates browser inconsistencies and provides a uniform starting point.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

Conclusion

Mastering these CSS tricks will not only make you a more efficient frontend developer but also enable you to create more dynamic and visually appealing websites. Whether you’re working on a small project or a large-scale application, these techniques will help you write cleaner, more maintainable code.

30 Best Free Tools for Frontend Developers in 2025

Rowsan Ali — Sat, 01 Mar 2025 08:49:25 +0000

Frontend development is an ever-evolving field, with new tools and technologies emerging regularly. Whether you're a seasoned developer or just starting out, having the right tools can significantly boost your productivity, streamline your workflow, and help you create stunning, responsive, and user-friendly websites. The best part? Many of these tools are completely free!

In this blog post, we’ll explore 30 of the best free tools for frontend developers in 2025. From code editors to design resources, debugging tools, and performance optimizers, this list has something for everyone. Let’s dive in!

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

1. Visual Studio Code (VS Code)

What it is: A lightweight, open-source code editor by Microsoft.
Why it’s great: VS Code is packed with features like IntelliSense (smart code completion), debugging, Git integration, and a vast library of extensions. It’s highly customizable and supports almost every programming language.
Website: code.visualstudio.com

2. GitHub

What it is: A platform for version control and collaboration.
Why it’s great: GitHub allows you to host and review code, manage projects, and collaborate with other developers. It’s essential for open-source projects and team workflows.
Website: github.com

3. Figma

What it is: A cloud-based design and prototyping tool.
Why it’s great: Figma is perfect for designing user interfaces, creating prototypes, and collaborating with designers and developers in real time. Its free plan is robust enough for most projects.
Website: figma.com

4. Chrome DevTools

What it is: A set of web developer tools built directly into the Google Chrome browser.
Why it’s great: DevTools allows you to inspect and debug HTML, CSS, and JavaScript, analyze performance, and test responsive designs.
How to access: Right-click on any webpage and select "Inspect" or press Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).

5. CodePen

What it is: An online code editor and community for frontend developers.
Why it’s great: CodePen is perfect for testing code snippets, experimenting with new ideas, and sharing your work with others. It supports HTML, CSS, and JavaScript.
Website: codepen.io

6. Bootstrap

What it is: A popular CSS framework for building responsive, mobile-first websites.
Why it’s great: Bootstrap provides pre-designed components like buttons, navbars, and grids, making it easier to create consistent and professional designs.
Website: getbootstrap.com

7. Tailwind CSS

What it is: A utility-first CSS framework.
Why it’s great: Tailwind allows you to build custom designs directly in your HTML without writing custom CSS. It’s highly flexible and perfect for rapid prototyping.
Website: tailwindcss.com

8. Font Awesome

What it is: A library of free icons and social logos.
Why it’s great: Font Awesome provides scalable vector icons that can be customized with CSS. It’s a must-have for adding visual elements to your projects.
Website: fontawesome.com

9. Google Fonts

What it is: A library of free, open-source fonts.
Why it’s great: Google Fonts offers hundreds of high-quality fonts that can be easily integrated into your projects via a simple link.
Website: fonts.google.com

10. Canva

What it is: A graphic design tool for creating visuals.
Why it’s great: Canva is perfect for creating banners, logos, and other design assets without needing advanced design skills. Its free plan is incredibly versatile.
Website: canva.com

11. ESLint

What it is: A static code analysis tool for JavaScript.
Why it’s great: ESLint helps you find and fix problems in your JavaScript code, ensuring consistency and best practices.
Website: eslint.org

12. Prettier

What it is: A code formatter for JavaScript, CSS, and HTML.
Why it’s great: Prettier automatically formats your code, making it cleaner and more readable. It integrates seamlessly with most code editors.
Website: prettier.io

13. Webpack

What it is: A module bundler for JavaScript applications.
Why it’s great: Webpack bundles your JavaScript, CSS, and other assets into a single file, optimizing performance and simplifying deployment.
Website: webpack.js.org

14. Babel

What it is: A JavaScript compiler.
Why it’s great: Babel allows you to use the latest JavaScript features by converting modern code into a version compatible with older browsers.
Website: babeljs.io

15. Sass

What it is: A CSS preprocessor.
Why it’s great: Sass adds features like variables, nesting, and mixins to CSS, making it more powerful and maintainable.
Website: sass-lang.com

16. PostCSS

What it is: A tool for transforming CSS with JavaScript plugins.
Why it’s great: PostCSS allows you to automate tasks like autoprefixing, minification, and linting.
Website: postcss.org

17. Lighthouse

What it is: An open-source tool for auditing web page performance.
Why it’s great: Lighthouse provides insights into performance, accessibility, SEO, and more. It’s built into Chrome DevTools.
How to access: Open Chrome DevTools and navigate to the "Lighthouse" tab.

18. Netlify

What it is: A platform for deploying and hosting static websites.
Why it’s great: Netlify offers continuous deployment, serverless functions, and a free tier for hosting personal projects.
Website: netlify.com

19. Vercel

What it is: A platform for deploying frontend applications.
Why it’s great: Vercel is optimized for Next.js and provides fast deployments, serverless functions, and a free tier.
Website: vercel.com

20. Responsively

What it is: A tool for testing responsive designs.
Why it’s great: Responsively allows you to preview your website on multiple screen sizes simultaneously, making it easier to ensure a consistent experience across devices.
Website: responsively.app

21. Unsplash

What it is: A library of free, high-resolution images.
Why it’s great: Unsplash provides stunning visuals that you can use in your projects without worrying about licensing.
Website: unsplash.com

22. Pexels

What it is: Another source of free stock photos and videos.
Why it’s great: Pexels offers a wide variety of high-quality media that’s free for personal and commercial use.
Website: pexels.com

23. Animista

What it is: A CSS animation library.
Why it’s great: Animista provides ready-to-use CSS animations that you can customize and integrate into your projects.
Website: animista.net

24. CSS Grid Generator

What it is: A tool for generating CSS grid layouts.
Why it’s great: This tool simplifies the process of creating complex grid layouts with an intuitive interface.
Website: cssgrid-generator.netlify.app

25. Flexbox Froggy

What it is: A game for learning CSS Flexbox.
Why it’s great: Flexbox Froggy makes learning Flexbox fun and interactive, perfect for beginners.
Website: flexboxfroggy.com

26. SVGOMG

What it is: A tool for optimizing SVG files.
Why it’s great: SVGOMG reduces the file size of SVGs without compromising quality, improving website performance.
Website: jakearchibald.github.io/svgomg/

27. Color Hunt

What it is: A collection of color palettes.
Why it’s great: Color Hunt helps you find beautiful and trendy color combinations for your designs.
Website: colorhunt.co

28. Coolors

What it is: A color scheme generator.
Why it’s great: Coolors allows you to create and customize color palettes quickly and easily.
Website: coolors.co

29. TinyPNG

What it is: A tool for compressing images.
Why it’s great: TinyPNG reduces the file size of PNG and JPEG images, improving website load times.
Website: tinypng.com

30. The A11Y Project

What it is: A resource for learning about web accessibility.
Why it’s great: The A11Y Project provides guidelines, tools, and tips for making your websites more accessible to all users.
Website: a11yproject.com

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

Conclusion

Frontend development is a dynamic and creative field, and having the right tools can make all the difference. The 30 tools listed above are completely free and cater to various aspects of frontend development, from coding and design to debugging and optimization. Whether you’re building a personal project or working on a large-scale application, these tools will help you work smarter, faster, and more efficiently.

Happy coding! 🚀

How to Work with the DOM: Event Listeners and Manipulation

Rowsan Ali — Fri, 28 Feb 2025 17:57:02 +0000

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

In this blog post, we'll explore two fundamental aspects of working with the DOM: event listeners and DOM manipulation. We'll cover how to attach event listeners to DOM elements to respond to user interactions and how to manipulate the DOM to dynamically update the content and appearance of a web page.

What is the DOM?
Selecting DOM Elements
Event Listeners
- Adding Event Listeners
- Common Event Types
- Removing Event Listeners
DOM Manipulation
- Changing Element Content
- Modifying Element Attributes
- Adding and Removing Elements
Conclusion

1. What is the DOM?

The DOM is a tree-like representation of the HTML document. Each node in the tree represents an element, attribute, or piece of text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page.

For example, consider the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button id="changeText">Change Text</button>
</body>
</html>

In this example, the DOM tree would have a root node (<html>), with child nodes for <head> and <body>. The <body> element contains an <h1> element and a <button> element.

2. Selecting DOM Elements

Before you can manipulate the DOM or attach event listeners, you need to select the DOM elements you want to work with. JavaScript provides several methods for selecting elements:

document.getElementById(id): Selects an element by its id attribute.
document.querySelector(selector): Selects the first element that matches a CSS selector.
document.querySelectorAll(selector): Selects all elements that match a CSS selector.

For example, to select the <h1> element with the id of title, you can use:

const titleElement = document.getElementById('title');

Or, using querySelector:

const titleElement = document.querySelector('#title');

3. Event Listeners

Event listeners are functions that wait for a specific event to occur on a DOM element, such as a click, mouseover, or keypress. When the event occurs, the event listener executes a callback function.

Adding Event Listeners

To add an event listener to an element, you can use the addEventListener method:

element.addEventListener(eventType, callbackFunction);

For example, let's add an event listener to the button in our HTML that changes the text of the <h1> element when clicked:

const changeTextButton = document.getElementById('changeText');
const titleElement = document.getElementById('title');

changeTextButton.addEventListener('click', function() {
    titleElement.textContent = 'Text Changed!';
});

In this example, when the button is clicked, the text content of the <h1> element is changed to "Text Changed!".

Common Event Types

Here are some common event types you might use:

click: Occurs when an element is clicked.
mouseover: Occurs when the mouse pointer is moved over an element.
mouseout: Occurs when the mouse pointer is moved out of an element.
keydown: Occurs when a key is pressed down.
keyup: Occurs when a key is released.
submit: Occurs when a form is submitted.

Removing Event Listeners

You can also remove an event listener using the removeEventListener method. To do this, you need to pass the same event type and callback function that was used when adding the event listener.

element.removeEventListener(eventType, callbackFunction);

For example, let's remove the event listener we added earlier:

function changeText() {
    titleElement.textContent = 'Text Changed!';
}

changeTextButton.addEventListener('click', changeText);

// Later, to remove the event listener
changeTextButton.removeEventListener('click', changeText);

4. DOM Manipulation

DOM manipulation involves changing the content, structure, or style of a web page dynamically using JavaScript. Let's explore some common DOM manipulation techniques.

Changing Element Content

You can change the content of an element using properties like textContent and innerHTML.

textContent: Sets or returns the text content of an element.
innerHTML: Sets or returns the HTML content of an element.

For example, to change the text content of the <h1> element:

titleElement.textContent = 'New Title';

Or, to change the HTML content:

titleElement.innerHTML = '<em>New Title</em>';

Modifying Element Attributes

You can modify element attributes using methods like setAttribute and getAttribute.

setAttribute(name, value): Sets the value of an attribute.
getAttribute(name): Returns the value of an attribute.

For example, to change the src attribute of an image:

const imageElement = document.querySelector('img');
imageElement.setAttribute('src', 'new-image.jpg');

Adding and Removing Elements

You can add new elements to the DOM or remove existing ones using methods like createElement, appendChild, and removeChild.

createElement(tagName): Creates a new element.
appendChild(child): Adds a new child element to a parent element.
removeChild(child): Removes a child element from a parent element.

For example, let's add a new paragraph to the body:

const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

To remove the paragraph:

document.body.removeChild(newParagraph);

5. Conclusion

Working with the DOM is a fundamental skill for web developers. By understanding how to select elements, attach event listeners, and manipulate the DOM, you can create dynamic and interactive web pages.

In this blog post, we covered the basics of selecting DOM elements, adding and removing event listeners, and performing common DOM manipulation tasks. With these skills, you can start building more interactive and responsive web applications.

Remember, the DOM is a powerful tool, but it's important to use it efficiently to avoid performance issues. Always consider the impact of your DOM manipulations on the overall performance of your web page.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

DEV Community: Rowsan Ali

What I Wish I Knew Before Using EC2 for the First Time

1. Choosing the Right Instance Type is Not Optional

2. Security Groups Are Firewalls (And They Matter)

3. EC2 Is Just a Blank Server

4. EC2 Doesn’t Store Your Data Unless You Tell It To

5. Public IPs Can Change (Unless You Use Elastic IPs)

6. SSH Key Pairs Are Everything

7. You Need to Set Up Auto Shutdown or You’ll Forget

8. EC2 Is Powerful, But Not Always the Best Choice

Final Thoughts

How I Used AWS CloudFront to Make My Site 2x Faster Globally

Step 1: Understanding the Problem

Step 2: What Is CloudFront?

Step 3: Preparing My Content for CloudFront

Step 4: Creating a CloudFront Distribution

Step 5: Connecting My Domain

Step 6: Measuring the Results

Before CloudFront (Germany test server):

After CloudFront:

Step 7: Fine-Tuning the Cache Behavior

What You Should Know Before Using CloudFront

Final Thoughts

10 JavaScript Tricks Every Developer Should Know

1. Optional Chaining (?.)

2. Nullish Coalescing (??)

3. Short-Circuit Evaluation

4. Destructuring Objects and Arrays

5. Default Function Parameters

6. Template Literals

7. Spread and Rest Operators

8. Object Property Shorthand

9. Array .at() Method

10. Double Bitwise NOT for Floor

5 core software design principles every developer should know (with examples).

Responsive Design Confusion. How to fix it?

What Are Breakpoints?

The Challenge of Managing Breakpoints

Strategies for Managing Breakpoints

1. Use a Mobile-First Approach

2. Define Breakpoints in a Centralized Location

3. Use CSS Custom Properties (Variables)

4. Leverage CSS Frameworks

5. Use JavaScript to Dynamically Adjust Breakpoints

Conclusion

What I Wish I Knew Before Learning Frontend Development

1. HTML, CSS, and JavaScript Are Just the Beginning

2. You Can’t Ignore JavaScript

3. Responsive Design Is Not Optional

4. CSS Can Get Messy Quickly

5. Version Control Is a Lifesaver

6. Debugging Is Part of the Job

7. Not Every Tool or Framework Is Necessary

8. Soft Skills Matter Too

9. Projects Teach More Than Tutorials

Final Thoughts

7 JavaScript Features Every Frontend Developer Should Know

10 VS Code Extensions That Will Instantly Boost Productivity

1. Prettier – Code Formatter

2. ESLint

3. GitLens – Git Supercharged

4. Live Server

5. Bracket Pair Colorizer

6. Auto Rename Tag

7. Path Intellisense

8. Code Runner

9. Todo Tree

10. Remote – SSH

Bonus Tip: Syncing Your Extensions

Conclusion

5 Common Mistakes Frontend Developers Make (And How to Fix Them)

1. Not Using Semantic HTML

The Mistake:

The Fix:

Example:

2. Ignoring Responsive Design

The Mistake:

The Fix:

Example:

3. Overloading JavaScript

1. Optional Chaining (`?.`)

2. Nullish Coalescing (`??`)

9. Array `.at()` Method