DEV Community: daniel ukuhor

This is How Senior developers name their functions and variables

daniel ukuhor — Fri, 28 Mar 2025 00:16:38 +0000

When learning to code,one learns very early on about variables and functions and the naming conventions, However very few courses teach beginners how to name the right way. For some beginners naming the right way doesnt matter and is not a subject of interest to them. If you have decided to read this article then you probably already now know the importance of properly naming your classes, Variables, Functions, Interfaces and so on properly. You are aware of the mental load required to understand logic that uses poorly named variables, the wasted efforts and frustration involved in finding a variable or function.In this article I will be showing you how to properly name constructs such as variables, functions,classes etc and I will show you how to position variables,functions or components such that very little mental effort is required to understand the flow and logic of the codebase or functions.

HOW TO NAME

Your Name Should Reveal the Intention of it's Use.
When you name a construct you want to be able to remember what you named it without have to reference or scroll back to its point of declaration and you also want others who work with your code to be able to work with it seamlessly.The name should tell the reader what the variable/function is doing so you need to avoid vague names like data, temp, or info you should avoid using witty names as you yourself are likely to forget it when next you visit the code again.
Avoid Names that Misrepresents value or functionality
When working with multiple contributors on a codebase you generally want to avoid anti patterns as well as usage of terms that could confuse or throw other contributors off. The same goes for naming. You want to avoid naming a variable with the word list when the value to be held by that variable will be a map or a set, you also want to avoid naming a function after only a part of what it does for example a function that iterables to a list, it would be unwise to name such a function "arrayToList" this could lead to under use of such function and a possible waste of time in creating a function that does what the poorly named "arrayToList" function does.
Use pronounceable and searchable names
A good name needs to be pronounceable and searchable especially in a codebase that is medium to large or has atleast 3 or more contributors, hence there is a need to avoid unnecessary abbreviations and acronyms not populary known (if you cannot confirm that everyone will get the abbreviation do not use it).
avoid names like "blnc" use "balance" instead.This would make debugging and collaboration a lot easier and you will also benefit when walking through the logic you have written as there will be no mental effort inputed into translating an unconventional name in your head.
Ditch the prefixes
The reason for this is pretty simple most modern languages no longer need prefixes or hungarian notations like m_ (for member variables) they are just unnecessary and good naming conventions will cover the need for this.
Your Naming Conventions Need to be Consistent
When starting a project you need to have some conventions in mind and stick to them if for example you decide to name functions that make get request with a prefix of "fetch" in their name like "fetchScores()" please stick to that do not use "fetch" for one function then use "get" and then "request" your consistency will make naming easier for you and make referencing them more intuitive.
Your Class and Function Names should be Nouns/Verbs
Your classes should be nouns and you function should be verbs.

class DataConverter{
}

function convertData(){
}

HOW TO POSITION

When working with a codebase where by the variables and functions are terribly positioned, the cognitive effort required to read, understand, and modify the code increases significantly. This mental strain usually leads to frustration, significantly reduced efficiency, and a much higher chance of making mistakes. Thus it becomes important that the position of our variables and functions are intentionally placed. Lets look at how to do this such that the reader of our code do not strain.

Functions should be ordered top-down
When writing functions especially if you use the declarative approach you want the Higher order functions or the more declarative functions to come first. If a series of functions work together you want the function above to be the one that uses the function or functions below kind of like a russian Matryoshka Doll whereby as you come across the use of the function you almost immediately get to its implementation. so the functions at the top should describe more of what is happening and one scrolls down the lower level function apppear and they would describe how things are happening.This way, the reader can understand the program and logice flow by reading from top to bottom without scrolling back and forth.
Declare Variables as close as Possible to Where they are Used
If you declare a variable far from it's point of use, the reader would have to jump around to track its changes requiring more mental strain and increased debug time.
Avoid global variables as Much as Possible
Nothing is inherntly wrong with using global variables however If a variable is only used within a small scope, just define it inside that scope instead of doing so on a global scale.
excessive use of global variables will make reasoning about state harder and brings about a higher risk of unintended side effects as it is easier to accidentally modify important state.
Always Group Relate Code Together
If two functions are closely related say one calls the other, then place them near each other Similarly, if a variable is mainly used by one function, keep it close to that function. Doing this help to avoid Breaking logical flow beacuse When helper functions are placed above main functions, it forces developers to read the details before understanding the high-level logic which is in no way ideal.
Do not shy away from making your functions smaller
This tip helps more with reusablity and so it is worth mentioning. A function should do one thing and do it well. If a function is too large, break it into smaller, more focused functions beacuse if a function is buried deep within another function when it could be useful elsewhere, it would be reducing maintainability which is a whole other can of worms .

Bad naming and poor function and variable placement always force developers to work harder just to understand the code before they even make a single change, However a well-structured codebase, on the other hand, should minimize unnecessary thinking while letting developers focus on solving real problems rather than struggling to navigate the code.

I hope the above tips have been helpfull and if you do have questions or need clarity relating to something above feel free to ask in the comment section or contact me and I will respond as soon as I can

How to Think Like a Senior React Developer

daniel ukuhor — Sat, 01 Feb 2025 03:09:56 +0000

In this article I will take you through the approach that most senior react developers use when writing React UI's. By the end of this article you would have gained knowledge on the right steps to take and the mindset to have when using react in your own web apps or projects.

There is a rather distinct way of thinking when developing a web app using react. You need to have the ability to look at a design and break it down into smaller components,implement all their UI states, fit these components together to make up the design and then pass data through them the optimal way. How do you do all these? let's get into that.

Senior React Developers usually follow the same 5 steps when building a react UI as soon as they get the mock data and UI design.

Break the UI into Smaller Components and Define Component Heirachy
This is fundamental to properly building a UI in react, it is only when you are able to this that you can begin using react to its full potential beacuse if you can't break a UI design down you won't be able to consistently build the right components. One easy way to figure out what qualifies as a component in a UI is to ask the UI/UX designer that provided the design they would usually have them named in figma or whatever design tool they use.If you can't do that due to not being able to reach the designer or some other reason then there are a few ways to figure out what parts of the UI design should be broken down into a component. Depending on your strongest suit chose one of the three approaches below.
Programming- You can use Robert c. martins Single Responsibility Principle (SRP) to decide what should be a component just like you do with functions and objects. you pretty much want to make sure that a component does only one thing and if in the process of building the components you realize that it is getting too big just break it down futher into an even smaller component.
Styling with CSS- Now components are usually not always this small but you can ask your self, what would I add a selector to if these were HTML tags? what would be classes and what would be id's?
UI Design ask your self, what parts of this UI would have their own layer? and how you would go about it? you can then begin to highlight or draw boxes around what should be components.

Another way to figure out what part of the UI to break down is to use the mock data. If the mock data is well structured enough you will be able to see that pieces of the mock data will match parts of the components in the UI.

Build a Version of the UI Component without Interaction Once you have broken down the UI and have figured out what should be components, You can now start building the components.The best way to approach building the component is to build a UI version that uses your mock data without adding any user interaction implemented beacuse it is usually easier to build a component without interaction first and then add the interactions later.When building a static version avoid using state, instead use props beacuse state is reserved for interactivity.This is because for something to be qualified as state it should change over time and since you are currently building a static version of the app you can't and should not be using state.

Figure Out the Minimum Required State that is Needed by your Component
In React, state is needed to implement interactivity in your app beacuse you need to allow users change your underlying data to some degree. You should ensure that your state is not duplicated or repeated, you should also make sure that you don't create more state than is needed by your component , which means learning to look out for when data can be derived from the already present state.Look into all the data you have and figure out if it is state and if it can be derived from other state.so look at your data, is it a prop? is it constant and dosen't or will not change? and is it possible to get that data from the state and or data already available? if the answer is yes to any these questions when considering if some data should be saved as state then don't as it does not qualify as state.

Figure out Where to Put your State
Putting your state in the right place can prevent you from making multiple api calls, save you from redundance and prevent you from using data that is out of sync. So it is very important that you figure out what component owns and can make changes to the state.
Remember that react uses one way data flow, so data flows through the UI from the parent components down to the child components.
If you don't know which component should hold the state then you can do the following.

1.Figure out all the components that uses that state.
2.Look for the closest parent component or the component that all those components using the state are in?
3.Choose which parent component to put the state in.(ideally the closest one is fine but you can raise the state higher).
Note!! if you can't find a component that all the components using the state are in then it's ok to create a parent component for just the purpose of holding the state.

Make the Data Flow From Top to Bottom
What does this mean? well when building components in react sometimes you need to pass data from a parent component down to a child component but there are also times when you need to do the opposite for a variety of reasons, a common one is when a state positioned in a parent component is shared among various components and can be edited by various components in this case you would need to make data flow upwards.How is this done in react? it is pretty simple just pass the state setter function as a prop to the child component and then when the state setter function is called the state will be updated properly.

If you can incoorporate all these steps while building your react components you will find that it building components become easier and you will always have a backlog of what to do next.

If you have any Questions please leave them in the comment section and i'll get to them as soon as possible.

This is How All Good React Developers Structure Their State.

daniel ukuhor — Sat, 18 Jan 2025 22:11:41 +0000

A component with poorly structured state can lead to a plethora of issues and standing at the top of these issues is the fact that it can be a never ending source of errors, bugs and misconfigurations.However when a component has well structured state, you get a less error prone component that is easy to modify and is quite straightforward to debug. Lets look at what it takes to ensure a component has properly structured state.

Fundamentals of structuring data

When you are building a react component it will very likely use state to some extent, in the course of building the component the decision of how many state variables to use is up to you, and if the state is an object you also decide what properties it contains. Even though you recognize that your state is not structured properly it is still possible for the component to work decently well. However we can do better, the points below will serve as a guide when making decisions on the state structure of your components.

Linked or Interconnected states should be merged. There are times when we change the value of more than one state at a time. If these states regularly change at the same time then they are good candidates to be merged.if you decide to leave the state splitted that is fine however a major benefit to grouping interconnected states is that the chances of forgetting to keep those states synchronised reduces significantly.An example of such states could be aspect ratio.

const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);

in the example above it is fine to separate the state but if you have a regularly update both states say to maintain aspect ratio then you could benefit greatly from merging them like so.

const [aspectRatio, setAspectRatio] = useState({width:500,height:500)

Note that if your state variable is merged into an object you cant just update one property without copying the other property.like in the example above you would not update it like so

setAspectRatio({width:750})

if you do it this way then you state would have height missing. so what you would want to do is

setAspectRatio({...aspectRatio,width:750})

States should not clash
A good case for this is a submit button, when you clik on a submit button to send a request you would usually use state to trigger a visual indication that the request is being sent and is not resolved yet and the same would be done for when the request is resolved.If you implement a similar functionality and your state struture looks like the one below, well there is a problem you are likely to run into.

export function ApiResult() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [resolved, setResolved] = useState(true);

  async function onSubmitClick(event) {
    event.preventDefault();
    setLoading(true);
    setResolved(false);
    await requestToServer(text);
    setLoading(false);
    setResolved(true);
  }
  return (
    <>
      ...
    </>
  );
}

The code above will work but the state structure above sets us up to get unreasonable and erroneous states. There is a chance that you will forget to update the state for either the loading state or the resolved state, meaning that we could have a state where the request is still loading and and the same time the request is already resolved. The more dense or complicated your component is the harder it will be to track down the source of the error.A good solution to this would be to pair constants that would represent each state of the request with a state variable like in the example below.

export function ApiResult() {
  const STATE = {
    loading:'loading',
    error:'error',
    resolved:'resolved',
  }
  const [requestState, setRequestState] = useState(STATE.resolved)

  async function onSubmitClick(event) {
    event.preventDefault();
    setRequestState(STATE.loading);
    await requestToServer(text);
    setRequestState(STATE.resolved);
  }
  return (
    <>
      ...
    </>
  );
}

The above approach ensures that you can still set the three states needed in a manner that is less error prone such that no contradictory states can be set and checks can still be performed without the fear of misspelled strings.

Don't create unnecessary state This might seem like an obviouse thing to not do, but I find that it is quite common that developers make this mistake.Before you create some state make sure that its values cannot already be gotten from the Prop being passed in, a State or a combination of state values during rendering. if it can be derived you should avoid adding that information as component state.

export function Tracker() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [position, setPosition] = useState({x:0,y:0});

  function onXchange(value) {
    setX(()=>value);
    setPosition((initial)=>({...initial,x:value}));
  }

  return (
    <>
      ...
    </>
  );
}

can you see what the issue is in the code above? The position can already be calculated using the x and the y state already in the component or the position state could have being retained getting rid of the other 2 states but all three should not exist in the component.

Do not repeat state
When state is duplicated in a component you will quickly find that it becomes very hard to keep them in sync with each other. The moment you find yourself using more than one state to help your component persist some data then you should immediately find a way to resolve that even if it means raising that state above the component.

Minimize the nesting of your state
When building a component, especially when building novel features the last thing you want us to add an extra layer of complexity, this is the challenge that an overly nested state poses. When state is overly nested it can become a nightmare to update. So how does on resolve the issue of an overly nested state? The solution is to make it "flatten" or "normalize" it. The following steps could help to normalize most nested data. Rather than a tree-like structure whereby a property has an array of child states, you could instead have the parent states hold an array of its child state IDs. Then create a mapping from each child state ID to the corresponding parent state.In the end how deep you chose to nest your state is up to you but a fact is that making your state “flat” will help you avoid a lot of problems beacuse It will make your state updates that much easier besides tha flatter your state the more assured you can be that there is no state duplication in your code.

NOTE! you can use immer which is a library that lets you manage immutable state, you might want to make use of this library for you nested states it can make nested state updates easier for you.

If you do have any question or need clarification on any of the points above please leave a comment and i'll reply as soon as possible.

From Chaos to Clarity: Formatting React Code for a Clean and Readable Codebase

daniel ukuhor — Tue, 14 Jan 2025 22:17:14 +0000

When starting a new project, there is an experience that is very common among React developers. You begin feeling good about how clean and readable your code is, only to write a handful of functions or components and slowly watch your codebase descend into chaos. You find yourself scrolling from top to bottom, left to right, rereading lines of code repeatedly, and moving from file to file. Once you finish a functionality, you hope to never have to open that file again because you know how long it will take to find just a single function or variable—let alone edit or change that functionality.

In this article, we’ll examine the role formatting plays in making your codebase clean and readable. We’ll also explore industry standards and best practices for achieving consistent formatting.

Why Format your code?

Formatting is crucial for the readability and maintainability of your code. But how?

Well-formatted code helps visually separate different parts of your code, making it easier to follow the logical flow. Proper indentation highlights the relationship between parent and child components, elements, or selectors. Consistent formatting enhances your ability to quickly debug, fix, and maintain your code. When collaborating with team members who follow the same formatting rules, it becomes easier to understand each other’s code without confusion.

Reduced mental load is another benefit of good formatting. Clean code requires less mental effort to understand, allowing you to focus more on solving new problems instead of deciphering poorly formatted code blocks.

When a team adheres to a consistent style, everyone can contribute without wasting time reformatting codeblocks to suit personal preferences. Good formatting also brings discipline and professionalism to the codebase.

Lastly, tooling compatibility is a significant advantage. Developers use linters, add-ons, and IDEs that rely on consistent formatting. To fully leverage these tools and benefit from features like auto-completion and error highlighting, your codebase needs proper formatting. But how do you achieve that?

What is involved in formatting a codebase?

When speaking of formatting a codebase we are usually refering to several aspects: Indentation, Line Length, Naming conventions, Spacing, Braces and Parenthesis, Consistent use of Quotes, use of Semi colons, File and Folder Structure and the appropriate use of Comments. lets now get into the industry standards of how these are used and implemented.

Indentation
Indentation is the use of white space to visually organize code into a hierarchy.The industry standard here is to use 2 or 4 spaces and avoid using tabs. According to the Airbnb style guide for javascript and react you should use 2 spaces. This is because it maintains consistent nesting levels and improves the overall readabilty of your code.

Line Length
Line length here refers to how far the code you are writing on a single line should extend. The industry standard here is to keep a line between 80 to 100 characters.A lot of guides particulary PEP 8 and prettier recommend 80 characters. This is because it prevents horizontal scrolling and it usually works well on different screen sizes. but does this mean having to count as you code? no, at least not when you use code editors like vscode. The image below shows you how to tell how many characters are on a particular line.The image below shows that you are on line 44 and are on the 93rd character. you can find it at the bottom right on your vsCode editor if you haven't touched the default settings.

Naming Conventions

This refers to a set of rules for naming things in a consistent way.Clear, meaningful, and precise naming is essential to writing code that is easy to read, understand, and maintain.The most popular naming convention for variables and functions is to use camelCase(a way to separate the words in a phrase by making the first letter of each word capitalized and not using spaces). As For react components PascalCase should be used especially since the First letter of a component should be capital as stated in the react Docs and For constants upper snake case is recommended.This section has not done naming justice.If i were to get into naming indepth here this article will get too long. If you are interested in learning more please check this article on naming convention.

Spacing
For Spacing is recomended to add spaces around operators for clarity especially since certain operators when used in combination perform a different operation. it is also recomended that blank lines are used to separate logical sections of code. try to group and using blank lines space variable declaration and assignment from function declaration and logic.

Braces and Parenthesis
According to the Airbnb style Guide there should be no dangling braces which means that you should keep all closing braces or parenthesis properly aligned with the corresponding opening braces or parenthesis.

Consistent Quotes
When using quotes it is recomended to use either single quote '' or double quotes "" through out the project while trying to avoid any unecessary use of a combination of both.

Semicolons
Just like with quotes make up your mind either use a semicolon to end your expressions, assignments and lines of code or don't use a semicolon at all but whatever your decision is please stick to it and be consistent. I personally would recomended the use of semicolons to avoid issues that come with Automatic semicolon insertion.

File and Folder Structure
For file and folder structure factors like the size of project and tech stack mostly determines the structure of your files and folder however there are 2 general rules to follow. 1 Group related files together. 2 use meaningfull file names.

Comments
A codebase can easily get clustered with code so don't make it worse by overusing comments. if you have good naming conventions and write clean code void of anti-pattern you should generally be able to avoid using comments. Just like Robert c. Martin says "comments are not inherently bad", but they are often "a sign of failure to express intent in the code itself".Comments do have a place in your code, they show why a code exist not how a block of code works, so comments should be used if your code involves a non-obvious decision or a workaround. so avoid anti-patterns to eliminate the need to explain the how of your code and avoid explaining what the code already expresses.

Below are links to some of the industry setting style guides

Airnbnb Javascript Style Guide.
StandardJs Style Guide
Prettier Defaults
.

So in conclusion Properly Formatting your code is not just for the aesthetic. It drastically improves the readability, maintainability, and scalability of your codebase and by Adopting popular industry standards you can ensure your code is consistent and clean

How to set up a basic Html, css and javaScript project

daniel ukuhor — Fri, 06 Dec 2024 23:41:21 +0000

This tutorial is for those who want to go straight to the point and just setup a project and start coding.

Create a folder for your Html, css and Javascript files.

Create your files inside the folder you just created

while the way the files look may differ from PC to PC ensure the file description is the same as the image above.

Link the Css and JavaScript files to the Html file

When it comes to linking files it is crucial to take note of where each files are in the folder.In our case the files are all at the same level which would make linking straight forward.

The content of your html file should look something like this
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
      </head>
      <body>

     </body>
 </html>

We are going to use 2 different tags to link the css and js file as they require a different kind of tag to link them.
to link the css file we use the Tag. we then use the rel and href attributes to indicate the relationship the link tag content has with the page and the location the css file is in.It looks like this.
<link rel="stylesheet" href="index.css" />
The ink tag should be put in between the head tag.

as for the javascript file we use the script tag and the pass in the location of the javascript file in the src attribute. it looks like this.
<script src="index.js" ></script>
note that the script tag can be placed inside both the head tag and body tag however for performance purposes it is advised to place the script tag at the bottom of the body tag that way it is parsed last.It can also be placed in the head tag with either the

"Async" or "Defer" attributes added to it to replicate a similar loading behaviour.

If you have followed the instruction above your the content of you html file should look like this.
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <link rel="stylesheet" href="index.css" />
      </head>
      <body>
         <script src="index.js" ></script>
     </body>
 </html>

And now you have a very basic Html, css and javascript setup. if you have any questions or are stuck please leave your question in the comment section and i'll respond to them.

Navigating Success: The Art of Following Instructions in the Tech Industry

daniel ukuhor — Fri, 15 Sep 2023 22:52:50 +0000

In the fast-paced world of technology, following instructions might not seem like a skill that’s particularly glamorous or exciting. However, it’s a skill that can make or break your career in the tech industry. Whether you’re a software developer, data analyst, project manager, or any other tech professional, your ability to follow instructions effectively can have a profound impact on your success.

In this article, we’ll explore why following instructions is crucial in the tech industry, and we’ll provide you with practical tips on how to excel at it. So, let’s dive in!

Understanding the Importance of Instructions
In tech, precision matters. A single line of code or a small oversight in following instructions can lead to software bugs, security vulnerabilities, or project delays. Understanding the significance of instructions is the first step toward excelling in this area.

Read Carefully and Thoroughly
When you receive instructions, be it a project brief, a coding guideline, or an email from your manager, read it carefully and thoroughly. Take your time to understand the context, objectives, and any specific requirements.

Ask Clarifying Questions
If you encounter ambiguities or uncertainties in the instructions, don’t hesitate to ask for clarification. It’s better to seek clarity upfront than to make assumptions that could lead to errors later on.

Create a Checklist
For complex tasks or projects with multiple steps, create a checklist based on the instructions. This can help ensure that you don’t miss any crucial details along the way.

Prioritize Tasks
Often, instructions come with a timeline or a sense of priority. Be sure to understand which tasks are most critical and need to be addressed first. Proper task prioritization can significantly impact project success.

Communicate Progress
Regularly update your team or supervisor on your progress. in order to ensure that everyone is on the same page and which will go a long way to help prevent any misunderstandings.

Attention to Detail
Pay meticulous attention to detail. In coding, a missing semicolon or a small syntax error can lead to a program’s failure. In data analysis, overlooking a crucial variable can skew results.

Quality Assurance
Always double-check your work against the instructions. Verify that you’ve met all the requirements and that your output aligns with the intended outcome.

Version Control
When working on collaborative projects, use version control systems like Git to track changes and maintain different versions of code or documents. This helps ensure that you can backtrack if needed.

Embrace Feedback
Be open to feedback from peers, supervisors, or clients. Feedback can be a valuable source of guidance on whether you’ve followed instructions correctly and can help you improve.

Conclusion
In the tech industry, following instructions isn’t a mundane task; it’s a cornerstone of success. By approaching instructions with diligence, attention to detail, and effective communication, you can set yourself apart as a reliable and valuable professional. In a field where innovation and precision are paramount, mastering this skill will not only benefit your career but also contribute to the success of your projects and your team. So, the next time you receive a set of instructions, remember that your ability to follow them could be the key to unlocking your full potential in the tech world.