DEV Community: Onyedikachi Emmanuel Nnadi

🧠 Who Programmed a Programming Language to Program a Program to Program Programs?

Onyedikachi Emmanuel Nnadi — Thu, 22 May 2025 09:59:24 +0000

Finally, Let Me Clear This Up Once and for All

What we call programming is really just manipulating computer memory
Telling the machine exactly how to change bits and bytes (turn on and off a switch) inside its memory to perform useful tasks.
Now, a programming language is a tool humans designed
To write those instructions in a way that’s easier to understand by other humans instead of raw binary code (ones and zeros).
E.g. in assembly I can write:
mov x0, 1
...You see how hard it is to understand?

But in other languages I can just say:
let x = 1

Assembly language was created so that we don’t forget the name of a variable in memory addr... Instead of memorising the addr we can store it as short addr...

Other languages I believe later tried to simplify the process...
E.g. first with Fortran (1957): still too hard to write on
Then migrated to COBOL (1959) and so on
Till we got to C/C++ (1972) and then to JavaScript/Python and others.

But here’s the twist Computers only understand 1 and 0 while humans understand sentences better than numbers.

(E.g. if I ask you to memorise 1011011... it becomes hard.
But when asked to remember the sentence "how are you?"—it becomes easy.)

Goal is to write sentences (syntax) that we can remember.

Also, programming languages themselves need to be understood by the computer.
That is why we write special programs called compilers or interpreters that translate human instructions into what computers understand!

And guess what? Those compilers and interpreters are themselves programs—written in other programming languages (e.g. C++ or C)!

That is...
We take hard things, make it simple, use the simple one to build more complex ones—not necessarily hard...
Forming a loop.

This creates a fascinating cycle Programs to write programs that write programs.

Each layer builds upon the previous, hiding the complexity just so that humans can create increasingly powerful software without dealing with the tiniest detail of the hardware.

So, when you ask...
Who programmed a programming language to program a program to program programs?

The answer is: Humans did.
We started with 1's and 0's and wrote it in assembly, then convert assembly to a high level Lang (e.g. Python) just to make things very easy to read.

At the end of the day...
It speeds up our development of a project.

Virtual Assistant Task Request Form

Onyedikachi Emmanuel Nnadi — Tue, 05 Nov 2024 10:06:13 +0000

__My name is Emmanuel, a student in the Virtual Assistant program at ALX.

As part of my training, I am reaching out to request your help in assigning me a task that will take approximately one hour to complete.

https://lnkd.in/dan8aYrK.

17 Must-know React Projects for Developers 👩‍💻 🔥

Onyedikachi Emmanuel Nnadi — Mon, 21 Oct 2024 14:00:01 +0000

DEV Community

416

Cover image for 17 Must-know React Projects for Developers 👩‍💻 🔥
Tolgee profile imageAnmol Baranwal
Anmol Baranwal Subscriber for Tolgee
Posted on Oct 16

227

59
17 Must-know React Projects for Developers 👩‍💻 🔥

react

javascript

programming

opensource
The react ecosystem is huge, thanks to the developer community.

Thousands of packages, libraries and frameworks make it so powerful.

Today, we are exploring 17 cool React projects that will be very useful for developers. I've also covered three awesome UI component libraries.

Let's jump in.

Tolgee - web-based localization platform. tolgee

Tolgee is an open source alternative to Crowdin, Phrase and Lokalise.

You can manage translations by using tolgee for translating texts, editing them in real-time and synchronizing them with your app.

Imagine you have a button in your app that says Submit. Instead of manually creating translations for Submit in different languages (like "Enviar" for Spanish), you add Tolgee to your app.

Instead of manually editing the large JSONs with lot of localization data, you can alt+click the button directly in your app and change its translation on the spot, without digging through code.

tolgee react

Get started with Tolgee React SDK by using this command.

npm i @tolgee/react
This is how you can use this.

// wrap your code with the tolgee provider

import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";

const tolgee = Tolgee()
.use(DevTools())
.use(FormatSimple())
.init({
language: 'en',
apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
apiKey: process.env.VITE_APP_TOLGEE_API_KEY,
});

...

<TolgeeProvider
tolgee={tolgee}
fallback="Loading..." // loading fallback

// Use the T component to translate your texts

import { T } from "@tolgee/react";

export const Component = () => {
return (

Translate me!

)
}
Check this sample app using Tolgee React SDK.

You can read the docs about react integration. It supports all the other frameworks like Angular, Vue, Svelte, Vanilla JS and Nextjs.

There are lots of features like:

-→ In-context Translation : translate them directly in the app with the Tolgee i18n tool.

-→ One-click screenshots : Click once to take a screenshot from your app with highlighted phrases to translate.

tolgee features

Tolgee has 1.7k stars on GitHub and growing strong.

Star Tolgee ⭐️

Mantine Hooks - react hooks for state and UI management. mantine hooks

How many times have you been stuck in writing hooks from scratch?
Well, I'm never going to do it from now on thanks to mantine hooks!

It's not efficient to write more code since you would end up maintaining it later so it's better to use these production-level hooks to make your work a lot easier.

Trust me, getting 60+ hooks is a big deal considering they have a simple way for you to see the demo of each of the hooks with easy docs to follow.

Get started with the following npm command.

npm install @mantine/hooks
This is how you can use useScrollIntoView as part of mantine hooks.

import { useScrollIntoView } from '@mantine/hooks';
import { Button, Text, Group, Box } from '@mantine/core';

function Demo() {
const { scrollIntoView, targetRef } = useScrollIntoView({
offset: 60,
});

return (

onClick={() =>
scrollIntoView({
alignment: 'center',
})
}
>
Scroll to target

style={{
width: '100%',
height: '50vh',
backgroundColor: 'var(--mantine-color-blue-light)',
}}
/>
Hello there

);
}
They almost have everything from local storage to pagination, to scroll view, intersection, and even some very cool utilities like eye dropper and text selection. This is damn too helpful!

eye dropper

You can read the docs.

They have more than 26.4k+ stars on GitHub. It's not only for the hooks because Mantine is a component library for React.

Star Mantine Hooks ⭐️

Aceternity UI - copy paste components for your website. acernity ui

After Shadcn was appreciated in the developer community, we saw a surge of new component-based libraries. To be honest, we don't need 100 new libraries, but some definitely stood out.

Aceternity UI is one of them where you can copy paste the most trending components and use them in your websites without having to worry about styling and animations.

You can explore all the components.

I will discuss the top 4 that I really loved. These are animated but you can get the idea based on how they look.

✅ Floating dock: Useful as navigation, it does a clean animation when I hover over any icon.

floating dock component

✅ Lamp Section Header: Useful for separating sections and has a smooth transition of expanding based on scroll.

lamp effect

✅ GitHub Globe: The globe can be dragged. This was originally used on the GitHub website if you are curious.

github globe

✅ Animated Tooltip: Useful for showcasing authority and trust. You can use it to show people or organizations you work with.

animated tooltip

hovered over the second avatar

You will find code, installation instructions, a CLI guide and even the description of props that are used within the code.

props

One thing I really loved is that a lot of components are keeping things simple, no fancy over-kill type stuff. You can read the docs.

This is the only project on the list that is not open source but definitely worth checking out.

Visit Aceternity UI 🔥

xyflow - to build node-based UIs with React. xyflow

XYFlow is a powerful open source library for building node-based UIs with React or Svelte. It is a mono repo and provides React Flow & Svelte Flow. Let's see more on what we can do with React flow.

react flow

You can watch this video to understand React Flow in 60 seconds.

Some of the features are available in pro mode, but the ones in the free tier are more than enough to make a very interactive flow. React flow is written in TypeScript and tested with Cypress.

Get started with the following npm command.

npm install reactflow
Here's how you can create two nodes, Hello & World, connected by an edge. The nodes have predefined initial positions to prevent overlap and we are also applying styling to ensure sufficient space for rendering the graph.

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
{
id: '1',
data: { label: 'Hello' },
position: { x: 0, y: 0 },
type: 'input',
},
{
id: '2',
data: { label: 'World' },
position: { x: 100, y: 100 },
},
];

function Flow() {
return (

);
}

export default Flow;
This is how it looks. You can also add a label, change the type and make it interactive.

hello world

You can read the docs and see example React Flow apps for Create React App, Next.js and Remix.

React Flow comes with several additional plugin components which can help you to make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar and NodeResizer components.

For instance, you may have noticed dots in the background on many websites. You can simply use the Background component in React Flow to implement that pattern.

import { Background } from 'reactflow';

// this will be under React Flow component. Just an example.

15 VS Code Tips and Tricks to Make Your Coding Experience Better

Onyedikachi Emmanuel Nnadi — Mon, 14 Oct 2024 08:26:56 +0000

Make your VS Code experience better and improve your workflow with these tips.
VS Code is the top choice for developers these days and I don't have to tell you why so.

If you are a VS Code user, let me share a few tips and tweaks that could improve your workflow and help your programming experience improve.

This collection is more than just the VS Code keyboard shortcuts that we discussed earlier. Although, several of the tips utilize shortcuts.

Integrated shell and multiple profile Firstly, to get an integrated terminal in VS Code, you can use the shortcut CTRL+`.

Function Shortcut
To enable an integrated terminal CTRL+`
To open a location in an external terminal CTRL + SHIFT + C
Now, you can choose the shell you want from the dropdown menu as shown below.

Selecting shell in VS Code integrated terminal

You can also split the terminal with different profiles. Click on the dropdown near the Plus button on the top of the integrated terminal and select Split terminal. Here, you can select the required profile.

Split the editor VS Code supports split view of editors and editor groups.

Normally, you can split the view on VS Code using the command CTRL+. This will split the view horizontally for two side-by-side editors.

Split view in VS Code editor
Now, each split can have their own files opened, making editor groups possible.

Alternatively, you can create several other layouts for split, like grid layout. For this, click on View → Editor Layout → Select a Layout.

Editor layout selection
Now, once a layout is selected, drag and drop the files to each grid like the example below.

💡
You can split the current editor without creating a new editor group with the View: Split Editor in Group command (Ctrl+K Ctrl+Shift+).

Create files on the go If you have a file specified in a code, you can open that file by pressing the CTRL key and clicking on it.

💡
If the item is a web link, it will be opened on your default web browser.
If the file is not present on the location, you will get a prompt to create that file and then open it on a new tab.

Create a new file on the go
No need to open a file manager or a terminal the specified new file.

Scroll fast
If you are skimming through a huge code file, it will be beneficial to scroll a bit fast to reach a particular position. In VS Code, when you press the ALT key and then scroll using your mouse scroll wheel, you will get a 5x speed.
Synchronize scrolling
When you are comparing two files side-by-side, synchronizing the scroll speed across the editors will help a lot.

First, open the command prompt by pressing CTRL + SHIFT + P. Here, search for “Toggle Locked Scrolling Across Editors”. Press enter on this setting.

That's it! Now, when you scroll one editor, the other editors will also start scrolling at the same pace.

Sticky scroll This is useful, especially when you are dealing with huge files with different sections.

For example, I am working with a markdown file that has a lot of chapters in headings.

If the Sticky scroll is enabled, when you scroll, each main section you are currently editing are stuck to the top of the editor. Thus, it is both a reminder and a navigation helper.

To enable this, open the command prompt by using CTRL + SHIFT + P. Now, search and then press Enter on “Toggle Editor Sticky Scroll”.

Sticky Scroll
In the above screenshot, I am editing inside the Sixth Subheading, and it neatly sticks that to the top for easy access.

Multi-cursor editing This is a popular item in many code editors and IDE, allowing users to edit using multiple cursors simultaneously.

For this, you can press the ALT key and click on multiple locations to select multiple cursor positions.
Similarly, instead of selecting each location manually, you can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.

In the above image, you can see that there is multiple cursor for all the messageFour variable name.

Another useful trick here is by using the Ctrl+D shortcut multiple times to only select the next occurrence after the one you selected, so you can add selections one by one.

Markdown preview VS Code can preview the markdown file you are editing both in a new tab and as a live preview.

Use the shortcut CTRL + SHIFT + V to get a markdown preview in a new tab. Or use CTRL+K V to get the markdown preview as a split view.

The Zen mode VS Code has a cluttered interface with lots and lots of buttons and menus. Did you feel like this? Then the Zen mode is for you.

On an editor, press CTRL + K and then press Z. Now, you will get a focussed editor view, with nothing other than your code.

To escape, press ESC key twice.

Move a line upwards or downwards You can use the shortcut mentioned below to move a line to a line above or below. 🚧 It is possible to copy a line down or up using a shortcut. This key is disabled by default in Ubuntu, because of conflict with system default shortcuts.

Rename function/variable
To rename a variable, select that variable and press F2. Now, enter the new name. When you press Enter, the variable name will be changed on all occurrences.
Format whole document
To format an entire document, you can use the shortcut CTRL + SHIFT + I.

Function Shortcut
Format whole document CTRL + SHIFT + I

Format whole document

Comment/Uncomment multiple lines In order to comment or uncomment multiple lines, you can use the shortcut CTRL + SHIFT + A.

Function Shortcut
Comment multiple lines CTRL + SHIFT + A (Linux only)
🚧
This shortcut is only valid for Linux. For other OS, there is specific shortcuts.

Comment/Uncomment multiple lines

14 Simple Browser
VS Code provide a Simple Browser bundled extension, that is primarily meant to be used by other extensions for showing simple web content.

This is a basic browser preview using an iframe embedded in a webviewW.

You can access it by first going to the command prompt (CTRL + SHIFT + P) and searching Simple Browser.

Double click keeps the file active Here's the thing. You browse your files from the project explorer in the left. You click on the file and it is opened in the editor. You just read it and don't modify it. Next, you open another file the same way and you'll notice that the previously opened file has been automatically closed.

This is the default behavior so that the editor is not cluttered with tens of unmodified text files like browser tabs.

If you want to read a file as well as keep them active, just double click on them while opening them. This way, they will remain active in the editor regardless of whether they were modified or not.

Share your favorite VS Code tip
Not all the tips would be applicable to your scenario but I have a feeling that you'll find some useful tips in this list. If that's the case, which one do you like the most here?

Do you also know some lesser known VS Code tip that you are proud of? Why not share it with us?

Perks of being an Executive Assistant (EA)

Onyedikachi Emmanuel Nnadi — Mon, 30 Sep 2024 10:33:59 +0000

A bit of admin, long hours, crazy deadlines and almost impossible missions. Supporting C-level executives is more than scheduling, filing and minutes. A solid chunk requires intellect, foresight, agility, innovation and strategy. It’s a gold mine of opportunities and an accelerated path to developing executive and top management skills. Working in the 'top' office has advantages and here are a few I found valuable.

Working with CEOs builds character

Working with the most respected and sometimes - let's face it - the most feared person(s) in the organization builds confidence and courage to push boundaries and go beyond the comfortable norm. Being an assistant in a fast-paced environment yields sharp listening skills and a get-it-right-the-first-time attitude. These traits are not just for the office; they benefit personal life too.

The compensation is decent

And it keeps getting better if you continually develop skills that compound the value of your role. Supporting C-level executives entails doing whatever it takes to ensure your manager succeeds in that which is priority to them and the organisation. Success is a non-negotiable and EAs are usually fairly compensated to emphasize the value of the work and to encourage commitment, focus and flexibility.

You are an influencer

The role is an opportunity to help shape and improve standards within the organisation.

EAs know what executives are aiming for and are also exposed to realities on the ground. They can make contributions that help executives achieve the organization's goals while being fully cognisant of all-around impact.

There is unparalleled exposure to information

This is a big one. EAs normally see everything and that's why confidentiality is a key success driver when supporting C-level executives. EAs are the Executive’s left/right-hand extension and need the information to execute and understand their manager’s perspectives and priorities. Extensive access to intel provides a competitive platform to upskill and master how organisations are managed and business conducted at the top.

Did someone say CEOx?

Supporting C-level executives can be a route to becoming one yourself. You are in the room, at the table with the strategists and visionaries. The exposure is a game-changer! I like the idea that you are the average of 5 people around you. Being the average of your manager, executives, top stakeholders and the Board is attractive. Your leadership skills have no option but to naturally scale up.

Your network explodes

You wake up one day and your WhatsApp is full of business messages and calls with the who’s who of the organization: decision-makers, stakeholders, funders and partners. EAs become part of the leadership network. This beautiful space is not to be abused and navigating it with respect is another mark of a good EA.

You help people achieve their goals

There is a deep satisfaction that comes from giving or supporting the next person. It exists even in a paying job and finds ways to surface in everyday wins and achievements. It feels good when a colleague says “Thank you for the help. We nailed it!” or knowing that you contributed to the closing of a big contract. These peak moments affirm the power of your contributions and refuel your energy tank.

As with a coin, there is a flip-side to being stationed in the C-suite. In my upcoming post, I'll talk about the hurdles that come with the role and offer tips on how to overcome them like a pro.

Become a Better Coder: 10 Tips

Onyedikachi Emmanuel Nnadi — Thu, 26 Sep 2024 06:21:59 +0000

With countless Python best practices circulating online, opinions on each can vary depending on who you ask. The internet has democratized expertise, allowing anyone — including myself — to share their views. However, in this article, we’ll focus on 10 timeless Python best practices that have achieved widespread consensus and are widely regarded as fundamental.

Pandas Cheatsheet

Git Commands cheatsheet

Top 50+ SQL Interview Questions

Tip 1: Functions Should Specify The Parameter And Return Type
When defining a function, you want to always specify what the arguments’ types are and also what data type the result of the function returns. This would help both you and the devs in your team know what to expect without always having to use print statements to get a visual understanding.

Tip 2: Functions Should Be At The Same Level Of Abstraction
When we talk about functions being at the same level of abstraction, we’re referring to the idea that a function should perform a single, well-defined task. That task should be at a consistent level of abstraction throughout the function. In other words, the function should focus on a specific level of detail or complexity, and all the functions’ operations should operate at that same level.

Tip 3: Functions Should Be Small
A function is meant to be reusable. And the bigger the function gets, the less likely it is to be reusable. This also correlates to why a function should do only one thing. If it does only one thing, there’s a high chance it’s going to be small.

Tip 4: Open Closed Principles
The open-closed principle (OCP) states that a class, method, or function must be open for extension but not modification. This means that any class, method, or function defined can be easily reused or extended for multiple instances without changing its code.
This fails to adhere to OCP because whenever there’s a new country, we would need to write a new if statement to complement that. This might seem simple now but imagine we have 100 or more countries to take into account. How would that look?

Tip 5: Avoid Comments At All Cost
Comments have a way of being falsely true. They deviate the mind of the reader from what the code is actually doing to what someone else says it’s doing.

This can become very problematic as time passes and the code receives updates or changes. At some point, the comment becomes a lie and everyone now has to observe the truth through the lens of the lie.

Comments must be avoided at all costs. A comment forces the reader to inherit your thinking which at best is in the past. When a function or class changes, most likely, its comments do not change along with it. Most likely, they block the reader from thinking forward.

A comment signifies that the writer was mentally incapable of providing a well-descriptive class, function, or variable name. It exposes the lackluster attitude of the programmer and forces the team to inherit such an attitude.

Tip 6: Avoid Magic Numbers
A Magic Number is a hard-coded value that may change at a later stage, but that can be therefore hard to update.

For example, let’s say you have a Page that displays the last 50 Orders in a “Your Orders” Overview Page. 50 is the Magic Number here because it’s not set through standard or convention, it’s a number that you made up for reasons outlined in the spec.

Now, what you do is you have the 50 in different places — your SQL script (SELECT TOP 50 * FROM orders), your Website (Your Last 50 Orders), your order login (for (i = 0; i < 50; i++)) and possibly many other places.

Tip 7: Avoid Deep Nesting
Limit the levels of nesting within loops, conditionals, or functions to improve readability.

Tip 8: Avoid Hardcoding Paths
Refrain from hardcoding file paths or URLs; use configuration files or environment variables instead.

Tip 9: Classes should be small
Yep! Classes should be as small as possible. Just like functions.

The only difference is that in functions, size is determined by the number of lines in that function while in classes, it is determined by the number of responsibilities in that class.

Usually, a class name represents the kind of responsibilities it might possess but when the name is ambiguous or too general, most likely we are giving it too much responsibility.

This takes us back to SRP (single responsibility principle) which states that a class should only have one reason — one responsibility — to change.

Tip 10: Avoid Complex Ternary Expressions
Refrain from using overly complex ternary expressions; favor readability over brevity to make code more understandable.

Midweek Fun Activity On Alx

Onyedikachi Emmanuel Nnadi — Wed, 25 Sep 2024 15:56:49 +0000

Midweek Fun Activity: Excited About Tracking and Celebrating my Progress on ALX VA course? 💫

My ALX VA journey - Day 2

Onyedikachi Emmanuel Nnadi — Tue, 24 Sep 2024 15:00:54 +0000

My ALX VA journey - Day 2

Highlight was the story of the Milan Cathedral🏛️

Lesson: Great achievements require collaboration, each person bringing unique strengths. By working together, we can create something truly lasting and meaningful.

ALXVA, #ALXAccepted, and #LifeAtALX #Beginner #webdev #programmer

Antithesis to “Don’t Repeat Yourself”

Onyedikachi Emmanuel Nnadi — Wed, 18 Sep 2024 05:54:39 +0000

“Don’t Repeat Yourself” (DRY) is a foundational principle in software development that emphasizes the elimination of redundant code and data. Coined by Andrew Hunt and David Thomas in their seminal book The Pragmatic Programmer published in 1999, DRY asserts that every piece of knowledge must have a single, unambiguous, authoritative representation within a system. Over the past decades, it has become a guiding motif with overwhelmingly positive connotations, encouraging developers to create more maintainable, efficient, and clean codebases.

The DRY principle is not just about code duplication; it’s about the duplication of knowledge and intent. By adhering to DRY, developers aim to reduce the risk of inconsistencies and make systems easier to understand and modify. It promotes a culture of reusability and modularity, where components are designed to be flexible and adaptable to various contexts.

However, when DRY is applied indiscriminately, especially at the architectural level, it can lead to unintended complexities and dependencies. This often results in the creation of a Shared Kernel — a common set of components or services shared across different parts of a system or even between different teams. While a Shared Kernel can promote consistency and reduce redundancy, it also introduces shared dependencies that require careful coordination and can complicate the development process significantly.

The Upside of DRY in Software Development
Implementing DRY principles offers several notable advantages that have made it a staple in the developer’s toolkit.

Reduced Maintenance Effort
One of the most significant benefits of DRY is the reduction in maintenance effort. When code is duplicated across a system, any change or bug fix must be replicated in every location where the code exists. This not only increases the workload but also the risk of errors if a location is overlooked. By consolidating code, updates and bug fixes need to be made in only one place, simplifying the upkeep of the codebase and ensuring consistency throughout the system.

Enhanced Reusability and Modularity
DRY enhances the reusability of code by encouraging the creation of modular components that can be easily integrated into different parts of a system or even across different projects. This modularity allows developers to build systems more efficiently, as common functionalities do not need to be rewritten. It fosters a development environment where components are well-defined and responsibilities are clearly separated.

Increased Efficiency and Focus on Innovation
By enabling developers to avoid “reinventing the wheel,” DRY allows teams to focus on unique challenges and innovative solutions rather than spending time on repetitive tasks. This efficiency can lead to faster development cycles and the ability to allocate more resources to critical areas of the project that require creativity and specialized attention.

The Downside of DRY in Architectures and Teams
Despite its merits, DRY can have unintended negative consequences when misapplied, particularly in large-scale systems and organizations with multiple teams.

Complexity Through Over-Generalization
Generalizing code to make it reusable in all contexts can lead to overly complex abstractions. For instance, creating a one-size-fits-all solution may involve adding numerous configuration options and conditional logic to accommodate various use cases. This complexity can make the code harder to understand, test, and maintain. Developers may spend more time deciphering the generalized code than it would have taken to write a specific solution for their particular need.

Increased Error Potential and Scope Misjudgment
Shared code increases the potential impact of changes. A modification intended to fix a problem in one area might introduce bugs in others if the scope and impact are underestimated. This is especially problematic when the shared code is used by multiple teams or systems that may have different requirements or operating environments. The ripple effect of a change can lead to widespread issues that are difficult to trace back to their source.

Inter-Team Dependencies and Organizational Overhead
Using a Shared Kernel creates dependencies and responsibilities between teams. Teams become reliant on shared components, which can slow down development if changes are needed. The need for coordination and communication increases, leading to organizational overhead. Teams must align their schedules, agree on priorities, and possibly compromise on solutions that may not be optimal for all parties involved. Managing updates, addressing breaking changes, and maintaining different versions add layers of complexity to the development process.

Opinionated Design Conflicts
A solution that works well for one team may not suit another due to differing requirements, technologies, or design philosophies. This can lead to conflicts and decreased productivity. For example, one team may prefer a lightweight, agile approach, while another requires a robust, feature-rich solution. Forcing a shared component may result in a suboptimal compromise that satisfies neither team fully.

When DRY Works Well
DRY is most effective under specific circumstances, and understanding these can help teams leverage its benefits without falling into its pitfalls.

Limited Scope and Impact
DRY works well when applied to small, self-contained functionalities where the scope and impact are limited. For example, a library used to validate an email address is a perfect candidate for DRY. It reduces duplication without adding unnecessary complexity and can be reliably used across different parts of a system without the risk of significant side effects.

Team-Internal Use and Short Communication Lines
When shared code is used within a single team, coordination overhead is minimal, and communication is straightforward. Teams can easily align on requirements, priorities, and changes. DRY functions effectively when the development is handled by one team with short communication lines, facilitating consistency without significant drawbacks.

Enforcing Architectural Standards and Organizational Rules
DRY helps in enforcing architectural specifications or organizational rules, such as standardized logging, tracing mechanisms, or security protocols. By centralizing these aspects, organizations can ensure compliance, reduce the risk of errors, and simplify auditing and monitoring processes.

When DRY Falls Short
Applying DRY can be counterproductive in certain situations, and recognizing these scenarios is crucial to maintaining efficiency and team autonomy.

(Architectural-Level) DRY for Non-Specified Elements
Using DRY (at the architectural level) for elements not explicitly defined in the architecture — like project setups, build pipelines, or linter configurations — can introduce unnecessary complexity and coordination challenges. These areas often require flexibility to accommodate different project needs, technologies, or team preferences. Enforcing a shared solution may hinder innovation and adaptability.

Difficult-to-Generalize Problems
Some domains are inherently complex and resistant to generalization. For instance, entities like “User” or “Contact” can have vastly different properties and behaviors across various business domains. Attempting to create a universal model may lead to a bloated and convoluted design that fails to meet the specific needs of any domain adequately. It can also result in a tight coupling between unrelated systems, making changes risky and cumbersome.

High Coordination Costs and Reduced Agility
In scenarios where multiple teams must coordinate to manage shared code, the overhead can outweigh the benefits. Teams may have to wait for others to implement changes or may be forced to accept updates that are not aligned with their immediate goals. This dependency reduces agility and can slow down the overall development process.

Conclusion
“Don’t Repeat Yourself” remains a valuable principle in software development, promoting cleaner, more efficient code and fostering a culture of reusability and modularity. However, it is essential to apply DRY judiciously and be mindful of its limitations. Overgeneralization and inappropriate sharing at the architectural level can introduce more problems than they solve, such as increased complexity, higher error rates, and inter-team dependencies.

By considering the scope and context — favoring DRY for small-scale, internal, or standardizing components — developers and architects can harness its benefits while avoiding its potential pitfalls. It’s crucial to balance the desire for reusability with the need for simplicity, autonomy, and adaptability. In scenarios where requirements vary significantly or coordination costs are high, it may be wiser to allow some redundancy to maintain agility and empower teams to make decisions that best fit their specific contexts.

Ultimately, principles like DRY are tools to aid development, not rules to be followed blindly. Thoughtful application, combined with a keen awareness of the project’s and organization’s unique needs, will lead to more effective and sustainable software solutions.

JavaScript Const Keyword

Onyedikachi Emmanuel Nnadi — Sun, 08 Sep 2024 11:46:26 +0000

Did you know for the week?

JavaScript Edition

JavaScript’s const keyword doesn’t make variables immutable. It prevents the identifier from being reassigned, but the underlying data can still be modified. This makes const ideal for maintaining constants while allowing changes to the data structure!

Top 10 Cursor Features

Onyedikachi Emmanuel Nnadi — Mon, 02 Sep 2024 07:22:50 +0000

My favorite Cursor (@cursor_ai) features. Am I missing any:

Generate Code: Hit Ctrl + K and ask for to generate code based on text input.
Multi-Line Edits: Highlight code and press Edit or Ctrl + K to edit highlighted code based on a prompt.
Tab Completion: Cursor predicts the code you want to write and to "quick-accept" just press tab.
Smart Rewrites: Freestyle your code in the editor and Cursor fixes syntax errors on the fly.
Chat: Integrated chat for real-time assistance with AI model selection.
References: Use references such as "@ Codebase" or "@ web" to add appropriate context to prompt.
Use Images: Upload images by dragging and dropping into chat to use as context.
Terminal Command Gen.: Ctrl + K in terminal to write commands in plain text. Cursor converts them.
Cursor Prediction: Cursor editor predicts where it should place the editing cursor next in your file.
Ctrl + I to Create Files: Quickly create entirely new files based on a prompt. Gamechanger!

Dev Tip: How to view Dev Tip: How to view localhost web apps on your phone

Onyedikachi Emmanuel Nnadi — Sun, 01 Sep 2024 13:26:49 +0000

I’m always building web application products that need to be optimized for mobile. Viewing my project on a phone before deploying is a must.

I often use the mobile device emulator in Chrome Devtools for little style adjustments, but there’s nothing that will perfectly emulate an actual mobile browser better than the mobile device itself. This helps me catch mobile-specific bugs before they surface as a problem for users.

Here’s a method I use to make testing on mobile devices extremely easy. These instructions are for a Mac environment.

Serve over your wifi via local IP
This sounds complicated but its actually really easy.

IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network.

Step 1: Serve to Localhost
On your dev machine, serve your application in whatever way you usually do that serves it over a localhost address.

Make sure to note what port number its being served on. In the image below, we’re noting 8080.

Once you are able to view your app locally on your computer via localhost, you can move to step 2.

Step 2: Find your Local IP Address
Open System Preferences > Network. Select “Wifi” in the left pane if it isn’t already selected.

Under “Status: Connected”, you should see “Wi-Fi is connected to and has the IP address .”

Take note of that IP address!

Note: It’s common for your Local IP Address to change automatically when your device or other devices connect/disconnect from the network. So you can’t really bookmark this address. Instead, you’ll have to find your address each time — for me, this is usually just when I get started each morning and it stays throughout the day.

Step 3: View on your phone
On your mobile device’s browser (any will work), navigate to http://:.

For example, if I was serving on localhost:8080 and my local IP address is 123.45.67.890, on my mobile device’s browser I would navigate to http://123.45.67.890:8080 . The http:// is important, don’t leave it off.

Success!
You should now be viewing your app on your mobile device. Set it up right next to your main monitor, because it will reload every time your localhost reloads, so it will be perfectly in sync with the locally served desktop web application.

You don’t get any front-end devtools with this experience, but you do get an early warning if things look or behave differently on a native browser’s experience.