DEV Community: Sofolahan Eniola Ademola

Ai a weapon of self destruction

Sofolahan Eniola Ademola — Mon, 07 Jul 2025 13:36:24 +0000

AI is a powerful tool, In the hands of an experienced developer, it becomes a weapon of mass productivity. In the hands of a junior developer, it can easily become a weapon of self-destruction.

Don’t get me wrong, AI has permanently changed the game. It’s doubled efficiency, sped up debugging, and unlocked new levels of problem-solving. I’ve used it so much that I can instantly tell when a colleague pastes raw AI output without filtering or fine-tuning it.

Recently, I had the chance to work with a few junior devs, and I was honestly shocked by how heavily some of them rely on AI. I always ask them:

Do you understand the suggested fix?

Did you test it properly?

Does the UI match the design pixel for pixel?

Do you know the performance impact of the technique you used?

Did you even ask your AI for pros and cons—or an implementation plan?

I mean, it's easy to just copy your problem and paste it into ChatGPT or Claude. But what about code structure? Performance optimisations? Memory leaks? and so on.

The gist is, AI can assist with all of that—but rarely on the first try. You need to guide it, prompt it precisely, and validate the output thoroughly.

These oversights show up quickly, especially when reviewing pull requests. It’s become frustrating to constantly point out basic issues that should’ve been caught with proper scrutiny. If you're blindly trusting AI without understanding or refining what it gives you, you're not just slowing down your team, you’re weakening your own growth.

So, to my dearest young and aspiring devs: Use the tool to help you improve, learn, and do the work. Because when your experience or knowledge is combined with the right tools, you won’t just get by—you’ll do exploits.

cheers

New Features in ES15 (2024) with Code Examples

Sofolahan Eniola Ademola — Wed, 28 Aug 2024 16:30:00 +0000

ECMAScript 15 (ES15) is the latest version of the JavaScript programming language, released in 2024. It introduces several new features that aim to enhance code readability, maintainability, and performance. Here is my top 5 features that i believe you should be aware of:

1. Class Fields and Static Properties

One of the most significant additions to ES15 is the ability to define class fields and static properties directly within the class body. This eliminates the need for constructor functions to initialize properties, leading to cleaner and more concise code.

Example:

class Person {
  name;
  age;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

2. WeakRefs

WeakRefs provide a mechanism to create weak references to objects, preventing memory leaks. This is particularly useful when dealing with objects that are no longer needed but might be kept alive due to unintentional references.

Example:

const obj = { name: "John" };
const weakRef = new WeakRef(obj);

// ... (later)

obj = null; // obj is eligible for garbage collection

3. Import Assertions

Import assertions allow you to specify the module format of an imported module, ensuring compatibility with different module systems. This can be helpful when dealing with modules from various sources.

Example:

import { myFunction } from "./myModule.js" assert { type: "json" };

4. RegExp Match Indices

The indices property of regular expression matches now provides more information about the indices of matched substrings. This can be useful for more precise string manipulation.

Example:

const regex = /hello/;
const match = regex.exec("hello world");

console.log(match.indices); // Output: [[0, 5]]

5. Array.prototype.at()

The at() method provides a more concise way to access elements at specific positions in an array, including negative indices.

Example:

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.at(1)); // Output: "banana"
console.log(fruits.at(-1)); // Output: "cherry"

These new features in ES15 offer significant improvements to the JavaScript language, making it more efficient and expressive. By understanding and utilizing these features, you can write cleaner, more maintainable, and performant JavaScript code.

What's the difference between ReactNode vs React.Element

Sofolahan Eniola Ademola — Sun, 25 Aug 2024 07:52:03 +0000

When working with TypeScript in ReactJs, understanding the nuances between ReactNode and React.Element is crucial for writing clean, type-safe code. Ealier in my career, i often misuse or interchange the usage of ReactNode and React.Element. But these types represent different aspects of React content, and their appropriate usage can significantly impact your project's maintainability and performance. Let's talk about this in details:

What is ReactNode?

ReactNode is a comprehensive type that encompasses any type of React content that can be rendered. This includes:

React elements (created using JSX)
Strings
Numbers
Arrays or fragments of the above
null
undefined
Booleans

What is React.Element?

React.Element on the other hand, is a more specific type that represents a React element. This is the object returned by React.createElement() or JSX expressions. It has a defined structure with type, props, and key properties.

Now let's take a look at key differences between both:

Key Differences

Feature	ReactNode	React.Element
Scope	Includes `React.Element` and other types.	Represents only React elements.
Usage	For component children or props accepting various content.	When you specifically need a React element.
Nullability	Can be `null` or `undefined`.	Cannot be `null` or `undefined`.
Type Safety	Provides less type safety compared to `React.Element`.	Provides more type safety.

When to Use ReactNode

Defining types for children props: When a component can accept various types of content, use ReactNode.
Working with flexible content: If your component needs to render different types of content, ReactNode is suitable.

Example:

interface Props {
  children: React.ReactNode;
}

const Container: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};

When to Use React.Element

Ensuring type safety: When you need to guarantee that a prop is a React element, use React.Element.
Working with higher-order components or render props: If you're manipulating React elements, React.Element is appropriate.

Example:

interface Props {
  element: React.ReactElement;
}

const ElementWrapper: React.FC<Props> = ({ element }) => {
  return <div className="wrapper">{React.cloneElement(element, { className: 'modified' })}</div>;
};

Best Practices

Default to ReactNode: When in doubt, use ReactNode for component children.
Use React.Element for specificity: If you need to ensure a prop is a React element, use React.Element.
Consider nullability: Handle null and undefined cases when using ReactNode.
Type narrowing: If necessary, narrow ReactNode to React.ReactElement for specific operations.

Conclusion

By understanding the differences between ReactNode and React.Element, you can write more type-safe and maintainable React components. Choose the appropriate type based on your specific needs to ensure your code is both flexible and robust.

The proposed CSS @when/@else Rules

Sofolahan Eniola Ademola — Sat, 01 Jun 2024 07:24:16 +0000

So if you have been wondering why CSS is so crucial in web development? The answer lies in its ability to shape the visual aspects of websites. CSS (Cascading Style Sheets) is important for creating aesthetically pleasing web pages by controlling layout, colors, fonts, and various design elements.

But what if you could go beyond the traditional methods and apply styles conditionally based on specific criteria? This is where the proposed CSS when/else rules come in.

Although these rules are still in the proposal stage and not yet implemented in browsers, they offer a glimpse into the future of CSS. Developers can look forward to using these features to enhance the power and flexibility of CSS for conditional styling. For more details, you can refer to the W3C module.

Now, let’s look at this feature to understand what the when/else rules are all about.

Understanding CSS when/else Rules

With CSS, when/else rules provide a mechanism for applying styles selectively based on specific conditions. In simpler terms, they allow developers to define a set of styles to be applied when a condition is met and an alternative set of styles when it is not. This approach differs from traditional CSS, where styles are applied universally.

Comparison Table: when/else Rules vs. Traditional CSS

Feature	Traditional CSS	CSS when/else Rules
Application of Styles	Styles are applied universally to elements	Styles are applied conditionally based on rules
Syntax	Standard CSS selectors and properties	Conditional statements with @when and @else
Flexibility	Limited to media queries and standard selectors	Greater flexibility with conditional styling
Use Cases	Consistent styling across all elements	Dynamic styling based on specific criteria
Implementation Status	Fully supported by all browsers	Currently in proposal stage

Example of Traditional CSS

/* Traditional CSS example */
body {
    background-color: white;
    color: black;
}

@media (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

Example of CSS @when/@else Rules (Proposed)

/* Proposed CSS @when/@else example */
@when (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
} @else {
    body {
        background-color: white;
        color: black;
    }
}

Although these when/else rules are still in the proposal stage and not yet implemented in browsers, they offer a glimpse into the future of CSS. Developers can look forward to using these features to enhance the power and flexibility of CSS for conditional styling. For more details, you can refer to the W3C module.

In this example, the .container will have a padding of 10px if the viewport width is less than 600px. Otherwise, it will default to a padding of 20px.

Common Use Cases for CSS @when/@else Rules

Responsive Design: Adjusting layout and font sizes based on viewport dimensions.
- Example: Switching from a multi-column layout to a single-column layout on mobile devices.
Feature Detection: Applying styles only if certain CSS features are supported by the browser.
- Example: Using grid layout styles only if the browser supports CSS Grid.
Environment Adaptation: Changing styles based on user preferences or environmental conditions like dark mode.
- Example: Applying a dark color scheme if the user has set their system to dark mode.
State-Based Styling: Modifying styles based on the state of an element, such as hover or focus.
- Example: Changing the background color of a button when it is hovered over.
Fallbacks for Older Browsers: Providing alternative styles for browsers that do not support modern CSS properties.
- Example: Using flexbox as a fallback for browsers that do not support grid layout.

I personally think this new features will enhance readability, and with the combination of different queries (such as @media and @support) into a single statement. You can wrap multiple conditions into one block instead of writing separate conditional rules for specific tasks. like this:

@when media(max-width: 769px) and supports(display: grid) and supports(display: flex) {
  .grid {
    grid-template-columns: 1fr;
  }

  .flex {
    flex-direction: row;
  }
}

And most importantly, less JavaScript. to achieve something like this:


window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    document.body.classList.add('mobile');
  } else {
    document.body.classList.remove('mobile');
  }
});

You can now achieve same in CSS:

body.mobile .container {
  /* Styles for mobile */
}

@else {
  .container {
    /* Default styles */
  }
}

Responsive design using the rules

@when media(max-width: 768px) {
  .column {
    width: 100%;
  }
}

@else {
  .column {
    width: 50%;
  }
}

There is so much more you can achieve with these rules! Tell me in the comments section: Are you looking forward to this feature? Will you be using it? What do you think?

My top VS Code Extensions for Front-End Development in 2024

Sofolahan Eniola Ademola — Fri, 03 May 2024 09:25:05 +0000

As a front-end developer, having the right set of tools can greatly improve your productivity. In this article, I will share with you some essential VS Code extensions that i love and used over the years as a frontend developer.

Live Server

Live Server is a must-have extension that allows you to launch a local development server and automatically refresh the browser whenever you make changes to your HTML, CSS, or JavaScript files.

Markdown All in One

Markdown All in One is a must-have extension for anyone who works extensively with Markdown files. This powerful tool streamlines your workflow with essential features like shortcuts, syntax highlighting, and preview functionality, making it incredibly easy to create and edit Markdown documents with ease and efficiency.

GitLens

GitLens is a powerful extension that enhances your Git experience within VS Code. It seamlessly integrates with your Git repositories and provides valuable insights, such as blame annotations and a visual representation of code changes.

CodeSnap

CodeSnap allows you to capture and share beautiful screenshots of your code, with features including quick saving, copying to clipboard, line number display, and multiple configuration options.

Error Lens

Error Lens helps you quickly identify and fix errors in your code. It's language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Prettier ESLint

If you have eslint configured in your project, this extension will help you to format your JavaScript and TypeScript code using the prettier-eslint package.

Thunder Client

Thunder Client is a versatile and lightweight REST API client extension for VS Code, allowing you to quickly test endpoints within your coding environment. No need of switching between apps or installing additional tools like Postman - with Thunder Client, you can streamline your workflow and test APIs seamlessly within VS Code.

Maximize the potential of VS Code with a vast array of extensions designed to enhance your development workflow. From boosting productivity to enhancing code quality, these tools help you work smarter, not harder. By harnessing the power of these extensions, you can simplify your development process and concentrate on what matters most, building amazing front-end product.