DEV Community: Somtochukwu Okafor

Are website templates right for your business? They offer a quick, affordable start but come with trade-offs in scalability, customization, and long-term value. In my latest article, I explore their pros and cons to help you make an informed decision.

Somtochukwu Okafor — Thu, 09 Jan 2025 13:33:20 +0000

Template or No Template: Weighing the Pros and Cons

Somtochukwu Okafor ・ Jan 8

#webdev #programming #discuss #beginners

Template or No Template: Weighing the Pros and Cons

Somtochukwu Okafor — Wed, 08 Jan 2025 11:30:25 +0000

Have you ever started a new project or business idea, only to feel overwhelmed by the time and cost of building a website? Personalised templates might seem like the perfect solution—they promise a quick, affordable start. But are they always the right choice? Let’s explore their pros and cons from both the business owner's and developer's perspectives, so you can make an informed decision.

PRO

1. Quick Start
With just a few clicks —view, add to cart, checkout, boom! You’ve got yourself a template. You can quickly run it on your local device and start personalising from there.

2. Preview your Website
Imagine it's 3a.m., and you're scrolling through Facebook marketplace, scouting the price of a used Corvette you're never going to buy, and then eventually settling on a Corolla instead. It's a similar feeling here. You get the ability to window shop for the exact template that aligns with your business offerings and includes the features you need.

3. Development Speed
Let's say you find a template that matches 90% (e.g., design, layout, or some basic features) of your needs, now all you have to worry about is the remaining 10%. Ordinarily, the project could take several months or even years to reach 90% but you've just sped up the process with the click of a button.

4. Cost
Using a template is more cost-effective. It will always be the cheaper option. But remember, cheaper doesn’t always mean better. I’ll discuss this further down the article.

CONS

1. Poor Scalability
You’ve gotten your template and have applied your customisations. As the years go by, you now want to scale the project due to the growth of the business to account for the increased workload. This is where you begin to see the limitations of such templates. Templates often lack the flexibility to add advanced features like custom dashboards or robust user management systems, making scalability difficult as your business grows.

2. Legacy and Dead Code
Imagine dealing with a template where the entire styling is compiled into a single stylesheet. An edit on line 3,000 could inadvertently affect styles on lines 17,500 and 24,200. Yes I know, just thinking about it feels like a chore. Cleaning up and determining what’s useful becomes another major task.

3. Redundant Packages and File Bloat
Some templates use multiple frameworks unnecessarily—for example, a dashboard styled with Bootstrap while the authentication pages use Ant Design. This mix of frameworks can lead to unnecessary complications. Additionally, many templates include styling packages as local files, overcrowding the template folder and increasing the overall application size. These redundancies can bloat your project and make maintenance more difficult by increasing performance lag or slower build time.

4. Limited Customisation
You can customise and fine tune a Honda Civic to be a hell of a car but you know deep down there are some structural limitations that would prevent you from going all out. And if you decide to bypass them, the time and resources used would far exceed that of if you just bought the current model. This applies here when you're hiring a developer later to fix issues.

5. Time
The initial idea was to get the project online and running by the end of winter. But currently you're stuck on fixing and adjusting to accomodate new features you want. You thought a template would save time, but here you are, three months in, with only about 10% progress beyond the initial 90% the template provided. Now you’re wondering whether hiring a developer, who might have delivered a custom solution in a couple of months would have been the better choice. Well we'd know if we made the right choice sooner rather than later.

6. Complexity
Is there ever good complexity? When you’re working on a navbar component and encounter countless hooks and functions just to make it run, you start questioning the purpose of it all. Most codebases in templates are an intricate web of interconnected strings, where cutting one creates ripple effects far beyond what you can see.

Major Considerations

Cost: Cheaper doesn't always mean better. While the initial price of a custom-built site might seem high, understandably, think about the long-term implications. Upfront costs for custom builds might translate into long-term savings in maintenance and scalability. Carefully consider your needs and prioritise accordingly.

Scale of the business: How big does your business want to grow? Ask yourself this, If I'm aiming to be the next Facebook or Airbnb, would I want to start out with a template? Customising a template down the line could be more time-consuming than building a site from scratch. On the other hand, local services or small e-commerce stores might not face these challenges and could benefit from a template.

Conclusion

Templates can be powerful tools for businesses that need a fast and affordable start, but they come with trade-offs that might not suit long-term goals. By carefully weighing your needs and resources, you can set your business up for success.

React Architectural Design: A focus on cohesion and coupling.

Somtochukwu Okafor — Mon, 20 Mar 2023 09:42:13 +0000

One of the major design principles of Software Architectural design is to

increase cohesion and reduce coupling anywhere possible.

You might've stumbled upon this rule somewhere but in this article, I hope to explain it in the context of developing a react application.

Let us start by first defining what cohesion and coupling both mean in an engineering context.

Photo by GuerrillaBuzz on Unsplash

Cohesion

It is defined as the degree of relationship between elements of the same module. It focuses on how a single class is designed. The higher the cohesiveness of the class, the better the design. Some of the benefits of higher cohesion is that highly cohesive classes are much easier to maintain and less frequently changed.

Coupling

It is defined as the degree of interdependence between the modules. It is about how much one module depends on or interacts with other modules.

Okay, now that we have a basic understanding of what cohesion and coupling both mean, let's move on to their effects and how best to approach reducing coupling and increasing cohesion to get a truly efficient react application.

1. Structure is key.

It is critical to programming to always create a good structure for your files in order to write higher level readable codes. When we talk about software architecture, in this context we are basically talking about its structure. When designing the structure of your react application it is preferable to either group modules by features/routes or by file type. You can also break down modules and group them in folders based on their category or function.

 src
├── components
│   ├── navbar.js
│   ├── component.js
│   └── footer.js
├── utils
│   ├── test-utils
│   │   ├── test-utils.js
│   │   └── index.js
│   |       
├── layout
│   ├── about.js
│   ├── contact.js
│   |
├── index.js

In the example above you can see that we're grouping our modules by file type. Take note of how we arrange the folder and file structure.

2. Make your modules self-reliant.

You do not want your modules to heavily rely on each other, it is counter-intuitive and defeats the purpose we are trying to achieve. If elements are loosely coupled, changing one element does not affect or stir on changes in other elements hence driving up the levels of cohesiveness.

(Bad example)

import Button from "../button";

const App = () => {
  return (
    <div>
     <form action="">
       <input type="text" />
       <Button />
     </form>     
    </div>
  );
};

Any changes made to the button component will affect all modules that make use of it.

(Good example)

const App = () => {
  return (
    <div>
     <form action="">
       <input type="text" />
       <button type="submit">Get Started<button/>
     </form>     
    </div>
  );
};

In the example above, the button can be changed and styled as you please without causing ripples in the fabric of your application.

3. Be careful when passing down data between components.

We already know by now that in a highly cohesive application, a change in one module will not affect other modules adjacent to it but we need to make sure of this by being careful when passing down data.

Header.js (good)

const Header = () => {
  return (
    <div className=''>
        <div className=''>
          <Link to="" className='self-center'>
            <p className=''>{"Title"}</p>
          </Link>
        </div>
        <hr className=''/>
    </div>
  )
}

In the code block above we have a component that is static and has no outside data constraints to it at all. This is always good as you can change contents of p tag as much as you want without causing a chain of changes.

(good and bad)

const Header = (props) => {
  return (
    <div className='font-poppins mb-12'>
        <div className=''>
          <Link to="" className='self-center'>
            <p className=''>{props.title}</p>
          </Link>
        </div>
        <hr className=''/>
    </div>
  )
}

In the example above you can see that we are passing a prop into our Header component and this component will be reused (coupled) through our application. This is a good practice because it makes the component more reusable. You can make changes to the title of the header without having to manually alter the Header.js file. But on the negative side if there are too many props in one component, a simple change will have a widespread effect that may not be easily manageable.

4. Elements in a module must have distinct and coordinated roles.

What roles do your intended function/component play in a page. Is it needed, will changing it affect another component in the module, have you structured them semantically to fit the flow of the page, is it independent, and with a single, well-defined purpose? These are some questions you must ask yourself during your developmental process.

Looking at the example below we can see that
roles is an external json file which has been imported containing hard-coded information about user roles.

Any changes made to the values inside roles.json will have no breaking effect on your file.

Dropmenu.js

import React from "react";
import { roles } from "../data";

const Dropmenu = () => {
  return (
    <>
      {roles.map((role, key) => (
        <div key={key} >
            {role.title}
        </key>
      ))}
    </>
  );
};

export default Dropmenu;

NB: Using CSS frameworks

You need to be conscious in a situation you're using a CSS framework like Tailwind where your styles will advertently have to be inline. Tailwind follows a cohesive approach because most, if not all, your style pertaining to a particular module will be written in that module so changing its styles will not have a widespread consequence on the application.
Take for an example the code block below;

const Header = (props) => {
  return (
    <div className='font-poppins mb-12'>
        <div className='text-lg lg:text-2xl my-4'>
          <Link to="" className='self-center flex'>
            <p className='text-[#4E4A5A] text-[28px] leading-9 
             px-20'>{props.title}</p>
          </Link>
        </div>
        <hr className='h-0.5 border-none bg-neutral-200 
         shadow-sm'/>
    </div>
  )
}

You can see the styles have been written inline, if this component is reused in your application, no further changes to the CSS will be needed because it hardcoded.

Outro

So far, we have gone over some of the steps to effectively reduce cohesion and increase coupling. It is worth noting that they are not independent terms and as so they cannot exist without each other. A system can't be 100% totally cohesive because there will always be a degree of coupling at play.
It is worthy to also note the context in which the application is being built; the levels of cohesion might depend on the level of the project or it's requirements.

I hope by now you've understood a little bit better how to write highly scalable code. Thank you for reading and please if you have any questions, feedback or more useful information to add, please leave a comment down below.

Tailwind CSS: My experience in 2022

Somtochukwu Okafor — Thu, 28 Jul 2022 14:02:00 +0000

It's 2022, and it's officially been 5 years since Tailwinds launch. Now some might ask what exactly is Tailwind CSS, well according to their website:

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

I have always been a Bootstrap guy (mainly for its grid column system and many prebuilt components) but after I joined my current organization, I’ve been required to work with Tailwind and it has truly been an experience. In this little article I'll go over the highs and lows I have encountered while working with Tailwind CSS.

Lows

1. No prebuilt components
When I started using Tailwind, I was blown away when I wanted a quick navigation bar and I couldn't see any which was of much use. This was a major shock for me because I was used to using Bootstraps prebuilt components, where I could easily tweak them to suit my needs. With Tailwind, I had to build all my components from scratch, make it responsive and add all the required JavaScript code to further improve on them.

2. HTML code looked jumbled
My HTML files are constantly in disarray, like a lot's going on in them. Normally, a separate CSS file would be required to house the styling and make the HTML file contain strictly markup but with Tailwind you'd have to code the Tailwind tags inline with your HTML code.

/*Vanilla CSS*/
div {
   font-weight: 700;
   font-size: 16px;
   border-radius: 8px;
   color: white;
  }

/*Tailwind CSS*/
<div class="font-bold text-base rounded text-white"></div>

It really just feels like a lot's going on, and indeed it is.

3. Repetition of Tailwind styles
I constantly see myself repeating Tailwind styles over and over again. Multiple div tags with the same class attributes over multiple files eventually becomes awfully repetitive and tiresome.

Highs

1. Reduced CSS code
I noticed I was writing less CSS. Sometimes having the ability to change the background color of a div tag <div class="bg-gray-100"></div> or increasing the font size of a text by simply doing <p class="text-lg">Hello World</p> felt more intuitive than switching over to my external stylesheet to write it.

2.Improved my understanding of CSS
Whenever I stumble on some properties in Tailwind that I have little or no knowledge of, I quickly consult my editor to find and test out the CSS equivalent of that property, and how it fully works and operates thus improving my all round knowledge of the language.

3. Responsiveness has never been truly easier
With tags like xs, sm, lg etc... that could be applied to every aspect of my HTML file, manipulating CSS breakpoints has been a breeze. I almost never have to write media queries because Tailwind does a fine job of handling the aspect of responsiveness.

Summary

It's currently an interesting experience for me, using Tailwind. The question is, will I continue with Tailwind CSS after leaving my organization or when working on a personal project? Well for now, it's not certain, but what I do know is that it's a thrilling new experience and I'm here for every bit of it.🥳🥳

Understanding layout positioning with CSS

Somtochukwu Okafor — Mon, 21 Feb 2022 08:57:17 +0000

Introduction

When working with CSS you will eventually run into designs that require you to rearrange the layout of your document to reach your design goals. When faced with such a task CSS provides us with various ways of doing this. In this article, we will cover some of those ways.

1. Positions:
The position property sets how an element is placed or positioned in our document. The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements. The position property also specifies the type of positioning method used for an element. It could either be static, relative, fixed, absolute or sticky.

HTML

<div class="ball"></div>

CSS

div.ball{
    border-radius: 50%;
    background-color: red;
    width: 100px;
    height: 100px;
}

Let us use the absolute position and give the top, left and right some values
CSS

    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;

Result

2. Margin:
Margins can simply be said to be the space outside of the elements border. It affects the surrounding space based on what values we set the margin property to.
Let us use the margin:
CSS

    margin-top: 100px;
    margin-right: 100px;
    margin-bottom: 100px;
    margin-left: 100px;

We could also write it as:
CSS

    margin: 100px;

    /* where top, right, bottom and left = 100px */

Result

3. Padding:
Paddings are the space inside or within an element. It controls the space within an element based on what values we set the padding property to.
Let us now try using the padding property:
CSS

    padding-top: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    padding-left: 100px;

We could also write it as:
CSS

    padding: 100px;

    /* where top, right, bottom and left = 100px */

Result

We should take note not to forget that the padding property is fundamentally different from the margin property so as to not mix them up.

4. Float:
The float property does what it says, it floats an element based on the value assigned to it.
Let us add the float property to the ball class and assign a value to it.
CSS

    float: right;

Result

Notable Mention
Center:
This is a depreciated and obsolete html tag. It centers all elements enclosed within its tags. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

HTML

 <center>
    <div class="ball"></div>
 </center>

Result

Conclusion

There are many other useful properties such as display, flex, grid etc..., but I will cover them in another article. For now, with this guide, I hope that I was able to further breakdown some of these concepts to your better understanding. Stay happy coding and see you in future posts.
You can find me on Twitter and Linkedin.

Optimizing your Visual Studio Code in 2022

Somtochukwu Okafor — Wed, 26 Jan 2022 12:18:50 +0000

In this article we’ll be covering useful extensions, plugins and settings needed in order to ease and speed up development and production in Visual Studio Code.

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.

I’ll be assuming you already have VS Code installed and running but If you don't, head to Visual Studio Code to download it.

LET’S GET STARTED

1. Settings and Tips

Bracket Pair Colorization

Bracket pair Colorization is now native on VS Code so there is no longer use for the the old reliable Bracket Pair Colorization extension.
Follow the steps below to try it out:

Make sure to remove the Bracket Pair Colorizer extension.
Update VS Code
Open your user settings via CMD (CTRL for non-Mac users) + Shift + P and type settings. The settings JSON file will open. Add the following:

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.guides.highlightActiveBracketPair": true,

Emmet

With Emmet, we can write shortcuts and then expand them into a piece of code. An example is

 ul>li.num$*3

Here we are trying to create an unordered list element with 3 items with a class name of "num" inside. Notice that the class name also comes numbered below:

  <ul>
       <li class="num1"></li>
       <li class="num2"></li>
       <li class="num3"></li>
  </ul>

NB: Checkout the Interactive Editor Playground page in VS Code, it highlights a number of editor features. In this section you can also find a link to the Emmet Cheat Sheet, which is super useful.

Linked Editing

It is a built-in feature of VS Code, separate from the Auto Rename Tag extension. Depending on the language, related symbols, e.g HTML tags, are updated while editing.

2.Extensions and Plugins

Live Server

It gives you the ability to Launch a local development server with live reload feature for static & dynamic pages.
VS Code Icons

Introduce beautiful icons to your VSCode. Give your IDE a new and easy feel.
Code Time

Code Time is an open source plugin for automatic programming metrics and time tracking in Visual Studio Code. Join our community of over 200,000 developers who use Code Time to reclaim time for focused, uninterrupted coding. Protect valuable code time and stay in flow.
VS Code Intellicode

This extension provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list. It really helps speed things up.
ESlint & Prettier

If you are working in an organization or a team that enforces a format or standard for code then you can adopt either of the above mentioned tools.
ESlint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code whereas Prettier is an opinionated specialized code formatting tool. They are both used to help developers maintain a consistent style. They can also work hand-in-hand.

Conclusion

There are many other useful extensions and settings specific to the language you choose to work with, but I will cover them in another article or video. For now, with this guide, I hope that I was able to introduce you to some easier ways of doing things. Stay happy coding and see you in future posts.