Tari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.
As expected VS Code has the basic zoom in & out in every text editor.
But they’re some hidden gems to quickly level up your zoom game once found.
Dig into the command palette and you’ll find Font zooming – zooming just the code without the rest of the editor UI.
Pretty cool – did you know about this?
Zoom with scroll
Easily adjust zoom with Ctrl + mouse scroll:
After turning on the Editor: Mouse Wheel Zoom setting:
Powerful zoom extensions
The VS marketplace is packed full with powerful, capable extensions that boost various aspects of your workflow.
For zooming, there’s none better to start with than Zoom Bar:
The first thing you notice right away after install: the exact zoom level now shows up in the status bar:
+ and - buttons are obviously to zoom in and out.
Select the zoom percentage and this dialog appears:
Tons of pre-defined zoom options to choose from.
Just as you can see your exact zoom, you can also set it precisely with Input zoom:
Why not? 😏
And what about zooming just the terminal font?
There’s an extension for that too:
At the bottom-right you can clearly see the displayed terminal font.
My status bar has gotten semi-painfully humongous now, but it’s clear how useful these upgrades are… They were always great for taking screenshots when I used a 768p PC.
An of course: laser-precise focus on specific lines, syntax, and details without straining your eyes. Or whatever other reason you need to zoom for.
function c(a) {
return a / 13490190;
}
const b = c(40075);
console.log(p); // 0.002970677210624906
All we see is a calculation. We have no idea what those numbers and variables mean in the bigger picture of the codebase.
It’s a mystery. It’s magic to everyone apart from the developer who wrote the code.
We can’t possibly make any contributions to this code; we’re stuck.
But what if our dev had looked beyond code that merely works and also focused on communicating the full story of the code?
At the very least they would have given those variables far more descriptive names to explain the context:
JavaScriptCopied!
function calculateSpeedstersTime(distance) {
return distance / 13490190;
}
const time = calculateSpeedstersTime(40075);
console.log(time); // 0.002970677210624906
This small change vastly improves the code’s readability. Now you have a general idea of what’s going on.
But there are still mysteries we must solve.
It’ll still take us a little bit to realize 13490190 is speed — but how much speed?. And we know 40075 is a distance, but why 40075 of all the numbers?
For maximum readability we replace these magic numbers with variables with explanatory names
Now you understand every single thing this code does at a glance.
Understanding at a glance is always the goal.
Even with readable code…
Anyone can understand this TS code here; but there’s a serious issue that could easily lead us to hours-long bug hunting.
Can you spot it?
JavaScriptCopied!
class Person {
state: string;
name: string;
greet() {
console.log(`Hey I'm ${this.name}`);
}
eatFood() {
if (this.state === 'tired') {
this.state = 'fresh';
}
}
exercise() {
if (this.state === 'fresh') {
this.state = 'tired';
}
}
}
Problem: We’re lousily checking the state for equality and assigning with magic strings again and again.
Repeating ourselves, and allow a mere typo to break this code in the future. And the bug won’t always be easy to spot like it would be in this tiny code.
That’s why we have union types; similar to enums in TypeScript and other languages.
JavaScriptCopied!
class Person {
name: string;
// ✅ Only 3 values, not infinite
state: 'tired' | 'fresh' | 'sleepy';
greet() {
console.log(`Hey I'm ${this.name}`);
}
eatFood() {
if (this.state === 'tired') {
this.state = 'fresh';
}
}
exercise() {
// ✅ Typo: Error thrown
if (this.state === 'fres') {
this.state = 'tired';
}
}
}
Now 'tired' and 'fresh' are no longer random string literals. They’re now registered values of a pre-defined type.
And this is one of the powerful advantages TypeScript has over regular JS.
We even have this exact type of issue in a Dart codebase I’m part of. We’ve used the same magic strings like 10 times each.
But Dart only has enums and it’s not so easy to convert from magic strings to enums like we did here with union types. So we better refactor before it comes back to bite us!
The only thing that remains constant…
Keep using magic values and they keep spreading throughout the codebase across more and more files.
Replacing them is a chore.
JavaScriptCopied!
// email.js
export function sendEmail({ username }) {
emailApi.send({
title: `Hi ${username ?? 'User'}`,
role: 'user' // Union type value
});
}
// user-info.jsx
export function UserInfo({ user }) {
return (
<div>
<div>Name: {user.name ?? 'User'}</div>
<div>Email: {user.email}</div>
</div>
);
}
What happens when you want to change the default user name to something else but you’ve got the 'User' magic string in over 15 files?
Even Find and Replace will be tricky because they could be other strings with the same value but no relation.
We can fix this issue by creating a separate global config file containing app-wide values like this:
JavaScriptCopied!
// app-values.js
export const DEFAULT_USERNAME = 'User'; // ✅ Only one place to change
// email.js
import { DEFAULT_USERNAME } from './app-values';
export function sendEmail({ username, role }) {
emailApi.send({
message: `Hi ${username ?? DEFAULT_USERNAME}`, // ✅
role: role ?? 'user',
});
}
// user-info.jsx
import { DEFAULT_USERNAME } from './app-values';
export default function UserInfo({ user }) {
return (
<div>
<div>Name: {user.name ?? DEFAULT_USERNAME}</div> // ✅
<div>Email: {user.email}</div>
</div>
);
}
Final thoughts
Banish magic numbers and strings from your JavaScript code for clarity, maintainability, and efficiency.
By adopting these practices you pave the way for code that is not only functional but also self-documenting, collaborative, and resilient in the face of change.
Like the previous two possible white-space values, pre-line works in the same way when you set the innerHTML or innerText property of the element to a string using JavaScript.
We often associate coding with logic, problem-solving, and cold, hard facts.
But what if we shifted our perspective and viewed code through the lens of unity, seeing it as a beautiful ecosystem woven from diverse threads of interconnected elements?
This shift can unlock new ways of understanding, crafting, and appreciating the art of programming.
Imagine a game of chess.
Each piece, while powerful in its own right, finds its true potential when working in harmony with the others. Knights flank, pawns push, and rooks guard, united in their pursuit of checkmate.
Yeah I never thought of that — maybe cause my rating is ~1200 🫠
There’s something grand majestic I’ve always found in seeing various components of a complex system working together towards a shared end.
Whether it’s a soccer team making a beautiful teamwork goal, or thousands of people in a business collaborating to launch a product to millions or billions of users.
It must be a echo of our aching desire to part of something bigger than ourselves; of something grand and greater.
In the same way code exists not as a collection of isolated lines, but as a symphony of components, each playing its part in the grand composition of the program.
Object-Oriented Programming (OOP) embodies this principle of unity; by encapsulating data and functionality within objects, OOP creates self-contained units that interact and collaborate.
It’s like dividing a song into sections for different instruments and audio layers, each contributing its unique voice while adhering to the overall flow and rhythm.
The rhythm, the vocals, the tune…
I love how this song’s chorus goes; there’s one audio layer at first, then gradually they all come together to form the complete song flow (which sounds nice btw).
Imagine a program built with OOP; each object, whether a player character in a game or a customer object in a shopping cart application, becomes a mini-world unto itself, yet seamlessly integrates with the larger system.
But unity extends beyond individual objects. Imagine breaking down a complex program into modular systems, each with its own well-defined purpose.
Every single file plays it’s unique, important role towards the common purpose.
Similar to the departments in a company each module focuses on a specific task like user authentication or data processing. These modules then communicate through APIs (Application Programming Interfaces), standardized languages that facilitate seamless collaboration.
Picture the API as a translator ensuring smooth communication between modules just like diplomats ensure cooperation between nations.
This modular approach not only fosters code organization but also promotes reusability and independent development, allowing different teams to contribute to the unified whole.
The concept of unity even shines through in the ever-evolving world of microservices. Imagine a monolithic application as a centralized factory, a single, atomic unit humming with activity.
As powerful as that may be it’ll be pretty tough to update or repair specific functionalities since they’re all tightly couple to one another. But for microservices we break the system into smaller + independent services like specialized stations in the factory.
Each service operates autonomously, yet communicates through standardized protocols, ensuring collaboration. This distributed architecture promotes agility, scalability, and resilience, fostering a unified system that easily adapts to our changing needs.
Seeing coding as unity doesn’t diminish the rigor of logic or the importance of problem-solving. Instead, it adds a layer of appreciation for the elegance and beauty that emerges when disparate elements become a cohesive whole.
Like a composer finding the perfect harmony between instruments, we strive for unity in algorithms, searching for the most efficient and unified approach to solve a problem. We craft elegant frameworks and reusable libraries promoting consistency and collaboration across projects.
This shift in perspective isn’t just about aesthetics; it has practical implications.
By understanding the connections between components, coders can debug more effectively, anticipate unintended consequences, and write code that is easier to maintain and adapt. It fosters a collaborative spirit, where individual contributions become building blocks for a unified system.
Remember, unity doesn’t imply uniformity. Just like a diverse ecosystem thrives on interconnectedness while celebrating individual species, code benefits from variety within unity.
Different programming paradigms, languages, and libraries enrich the landscape, offering solutions tailored to specific problems. The key lies in understanding the underlying principles of unity and applying them creatively to bring the best out of each unique element.
So, the next time you open your code editor, remember the power of unity. See your code not as a jumble of lines, but as a symphony waiting to be composed.
By appreciating the connections and collaborations within your program, you’ll not only write better code, but also unlock a deeper understanding and appreciation for the art of programming.
An underrated API for watching for changes in the DOM: “child added”, “attribute changed”, and more.
JavaScriptCopied!
// Node/element to be observed for mutations
const targetNode = document.getElementById('my-el');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
console.log(
`The ${mutation.attributeName} attribute was modified.`
);
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
I see a bunch of people online curious to know the point of this API in the real-world.
In this post I’ll show you how I used it to easily shut-up this annoying script carrying out unwanted activities on the page.
And you’ll see how sleek and polish the UI elements became after this.
The 3rd party script
It came from Mailchimp – a service for managing email lists.
Mailchimp provides embedded forms to easily collect sign-ups to your list.
These forms are HTML code embedded in your webpage without any additional configuration.
But being this ready-to-use nature comes at a cost; deeply embedded CSS stubbornly resisting any attempt to customize the form’s look and feel.
I mean I know I definitely spent WAY more than I should have doing this, having to throw CSS !important all over the place and all…
Stubbornly rigid JS
On the JS side I had the remote Mailchimp script showing these pre-defined error/success messages after the request to the Mailchimp API.
Sure this was an decent success message but there was simply no built-in option to customize it. And we couldn’t indicate success in other ways like a color or icon change.
Mutation Observer to the rescue…
Waiting for the precise moment the success text came in and instantly swapping out the copy for whatever I wanted and doing anything else.
And just like that the script was blocked from directly affecting the UI.
We basically turned it into an Event Emitter service; an observable.
This let us easily abstract everything into a React component and add various event listeners (like onSuccess and onError):
To create the polished form we saw earlier:
This is the power of the JavaScript Mutation Observer API.
With these 7 upcoming built-in Set methods, we could find ourselves using them a LOT more often.
1. union()
The new Set union() method gives us all the unique items in both sets.
JavaScriptCopied!
const creation = new Set(['coding', 'writing', 'painting']);
const joy = new Set(['crying', 'laughing', 'coding']);
console.log(creation.union(joy));
// Set { 'coding', 'crying', 'writing', 'laughing', 'painting' }
And since it’s immutable and returns a copy, you can chain it indefinitely:
JavaScriptCopied!
const odd = new Set([21, 23, 25]);
const even = new Set([20, 22, 24]);
const prime = new Set([23, 29]);
console.log(odd.union(even).union(prime));
// Set(7) { 21, 23, 25, 20, 22, 24, 29 }
2. intersection()
What elements are in both sets?
JavaScriptCopied!
const mobile = new Set(['javascript', 'java', 'swift', 'dart']);
const backend = new Set(['php', 'python', 'javascript', 'java']);
const frontend = new Set(['javascript', 'dart']);
console.log(mobile.intersection(backend));
// Set { javascript, java }
console.log(mobile.intersection(backend).intersection(frontend));
// Set { javascript }
3. difference()
difference() does A – B to return all the elements in A that are not in B:
JavaScriptCopied!
const joy = new Set(['crying', 'laughing', 'coding']);
const pain = new Set(['crying', 'screaming', 'coding']);
console.log(joy.difference(pain));
// Set { 'laughing' }
4. symmetricDifference()
As symmetric implies, this method gets the set difference both ways. That’s (A – B) U (B – A).
All the items in 1 and only 1 of the sets:
JavaScriptCopied!
const joy = new Set(['crying', 'laughing', 'coding']);
const pain = new Set(['crying', 'screaming', 'coding']);
console.log(joy.symmetricDifference(pain));
// Set { 'laughing', 'screaming' }
5. isSubsetOf()
Purpose is clear: check if all elements of a set are in another set.
JavaScriptCopied!
const colors = new Set(['indigo', 'teal', 'cyan', 'violet']);
const purpleish = new Set(['indigo', 'violet']);
const secondary = new Set(['orange', 'green', 'violet']);
console.log(purpleish.isSubsetOf(colors)); // true
console.log(secondary.isSubsetOf(colors)); // false
console.log(colors.isSubsetOf(colors)); // true
6. isSupersetOf()
Check if one set contains all the elements in another set: As good as swapping the two sets in isSubsetOf():
JavaScriptCopied!
const colors = new Set(['salmon', 'cyan', 'yellow', 'aqua']);
const blueish = new Set(['cyan', 'aqua']);
const primary = new Set(['red', 'yellow', 'blue']);
console.log(colors.isSupersetOf(blueish)); // true
console.log(colors.isSupersetOf(primary)); // false
console.log(colors.isSupersetOf(colors)); // true
7. isDisjointFrom()
isDisjointFrom: Do these sets share zero common elements?
JavaScriptCopied!
const ai = new Set(['python', 'c++']);
const mobile = new Set(['java', 'js', 'dart', 'kotlin']);
const frontend = new Set(['js', 'dart']);
console.log(ai.isDisjointFrom(mobile)); // true
console.log(mobile.isDisjointFrom(frontend)); // false
Yes it’s ChatGPT, the underrated + overrated chatbot used by self-proclaimed AI experts to promote “advanced skills” like prompt engineering.
But this isn’t a ChatGPT post about AI. It’s about JavaScript and algorithms…
Message editing; a valuable feature you see in every popular chatbot:
Edit our message: No one is perfect and we all make mistakes, or we want to branch off on a different conversation from an earlier point.
Edit AI message: Typically by regeneration to get varying responses, especially useful for creative tasks.
But ChatGPT is currently the only chatbot that saves your earlier conversation branches whenever you edit messages.
Other chatbots avoid doing this, probably due to the added complexity involved, as we’ll see.
OpenConvo is my fork of Chatbot UI v1, and this conversation branching feature was one of the key things I added to the fork — the only reason I made the fork.
Today, let’s put ourselves in the shoes of the OpenAI developers, and see how to bring this feature into life (ChatGPT’s life).
Modify the chatbot to allow storing previous user and AI messages after editing or regeneration. Users can navigate to any message sent at any time in the chat and view the resulting conversation branch and sub-branches that resulted from that message.
Just before we start this feature we’ll probably have been storing the convo as a simple list of messages👇. It’s just an ever-growing list that keeps increasing.
The 3 main functional requirements we’re concerned with, and what they currently do in a sample React app.
Add new message: add item to list.
Edit message: Delete this and all succeeding messages, then Add new message with edited content.
Display messages: Transform list to JSX array with your usual data -> UI element mapping.
But now with the conversation branching feature, we’re going have some key sub-requirements stopping us from using the same implementation
Every message has sibling messages to left and/or right.
Every message has parent and child message to top and/or bottom.
We can’t use simple lists to store the messages anymore; we want something that easily gives us that branching functionality without us trying to be too smart.
If you’re done a little Algo/DS you’ll instantly see that the messages are in a tree-like structure. And one great way to implement trees is with: Linked Lists.
Every conversation message is a node. A single “head” node begins the conversation.
Every node has 4 pointers: prevSibling, nextSibling, parent, and child (←→ ↑ ↓) . Siblings are all on the same tree level.
Every level has an active node, representing the message the user can see at that branch.
We either branch right by editing/regenerating:
Or we branch down by entering a new message or getting a response:
The most important algorithm for this conversation branching feature is the graph transversal. Dearly needed to add and display the messages.
Here’s pseudocode for the full-depth transversal to active conversation branch’s latest message:
Set current node to conversation head (always the same) (level 1 node)
Look for the active node at current node’s level and re-set current node to it. This changes whenever the user navigates with the left/right arrows.
If current node has a child, re-set current node to it. Else return current node.
Rinse and repeat: Go to step 2.
Add new message
So when the user adds a new message we travel to the latest message and add a child to it to extend the current branch.
If it’s a new convo, then we just set the head node to this new message instead.
Edit message / regenerate response
There’s no need for transversal because we get the node from the message ID in a “message edited” event listener.
At the node we find its latest/right-most sibling and add another sibling.
Display messages
Pretty straightforward: travel down all the active nodes in the conversation and read their info for display:
In OpenConvo I added each node to a simple list to transform to JSX for display in the web app:
View previous messages
No point in this branching feature if users can’t see their previous message, is there?
To view the previous messages we simply change the active message to the left or right sibling (we’re just attending to another of our children, but we love them all equally).
With this we’ve successfully added the conversation branching feature.
Another well-known way to to represent graphs/trees is an array of lists; that may have an easier (or harder) way to implement this.
In JavaScript, working with the Document Object Model (DOM) often involves iterating through child elements of a parent element. This technique is essential for tasks such as:
Manipulating elements based on their content or attributes
Dynamically adding or removing elements
Handling events for multiple elements
JavaScript offers several methods to achieve this, each with its own advantages and considerations.
Methods for looping
1. Use children property
Access the children property of the parent element to obtain a live NodeList of its direct child elements.
Iterate through the NodeList using a for loop or other methods:
JavaScriptCopied!
const parent = document.getElementById("myParent");
const children = parent.children;
for (let i = 0; i < children.length; i++) {
const child = children[i];
// Perform actions on the child element
console.log(child.textContent);
}
2. Use for..of loop
Directly iterate over the NodeList using the for...of loop:
JavaScriptCopied!
const parent = document.getElementById("myParent");
for (const child of parent.children) {
// Perform actions on the child element
console.log(child.tagName);
}
3. Use Array.from() method
Convert the NodeList into an array using Array.from(), allowing the use of array methods like forEach():
JavaScriptCopied!
const parent = document.getElementById("myParent");
const childrenArray = Array.from(parent.children);
childrenArray.forEach(child => {
// Perform actions on the child element
child.style.color = "red";
});
Key considerations
Live NodeList: The children property returns a live NodeList, meaning changes to the DOM are reflected in the NodeList.
Text Nodes: The children property includes text nodes, while childNodes includes all types of nodes (elements, text, comments, etc.). Choose the appropriate property based on your needs.
Performance: For large DOM trees, using Array.from() might have a slight performance overhead due to array creation.
Choosing the right method
For simple iterations, the for...of loop or the children property with a for loop are often sufficient.
If you need to use array methods or want to create a static copy of the child elements, use Array.from().
Consider performance implications if dealing with large DOM structures.
By understanding these methods and their nuances, you’ll be able to effectively loop through child elements in JavaScript for various DOM manipulation tasks.
Used to be a fan but the pains started outweighing the gains and I had to turn it off forever.
1. I actually don’t have unlimited CPU and RAM
You can’t dare call VS Code a “text editor” in 2023; The bloat is real.
Thanks to Electron, we now live in an era where a near-empty app boasts installation sizes of almost 100MB and proudly gobbles as much as 500MB of RAM.
My dozens of extension probably has something to do with this, but many of these extensions only run for specific types of projects and VS Code commands.
My Dart project here uses only 1 of these (the obvious one), and almost none of the ones coming after.
And none of this 1,200 MB RAM and 16.9% CPU came from my running anything in the terminal! I’m sure that there are some background tasks here and there, but I was doing absolutely nothing — no typing, no building, no long-running tasks.
So what do you think will happen when a build watcher like Create React App is also running? Or a massive memory hog like the Android emulator, constantly reloading on every autosave?
2. Where’s our formatting
VS Code doesn’t care about auto-save in its “auto-format on save” feature.
And why should it happen when you’ve just barely finished typing?
Format-on-save only makes sense for real saves; you usually only press Ctrl + S when you’ve reached some sort of checkpoint; like after a bug fix attempt or a UI change and you want to see our changes in action.
If I want auto-formatting I’m still going to be using Ctrl + D, D my personal keyboard shortcut for auto-formatting. So, no thanks — I’ll rather save and format together.
3. Autosave demands perfection
Autosave wants you to be superhuman.
There’s no breathing room to make mistakes with auto-save; any you type gets written to disk within seconds.
Like can’t you even make a single typo? Can’t you have doubts about which direction to take the code in?
Now you’ll say there’s Git and all, but here’s something to think about: within every commit, there are multiple “micro-commits”. Even if you’re blindly committing every single day there’ll be intermediary changes within those 24 hours that you won’t want to compromise or discard.
With autosave you’ll never get a warning when you close a file after making an unwanted and buggy change — potentially leading to hours of debugging code you thought was working just a few days back.
4. A save should be a micro-commit
Even if you Ctrl + S all the time you’ll probably wait until the end of the statement. Because subconsciously you see Ctrl + S as a micro-commit, and it would be senseless to make those micro-commits at random.
But build watchers like Create React App don’t see it this way.
These tools couldn’t care less about whether the code that’s been auto-saved is complete or not; they just re-build and re-build and re-build again.
Not cool. And at times this put pressure on me to keep typing until I was ready to see the result of my changes.
That’s distracting and unnatural. And you can’t avoid it — the best you can you is to set an autosave delay to reduce how much this happens or close the terminal. The former comes with its own set of problems (as we’ll see), and the latter is simply unthinkable.
5. The lag tradeoff is annoying
Imagine what would happen if VS Code and others weren’t sensible enough to have a delay before any autosave?
Your CPU usage would go crazy; Even if you’re an extra-terrestrial typing god going at 10000 words per minute, you’re still not going to be fast enough; there’ll be a disk write for every single character you put down.
Even worse when you have a heavy build tool like Create React App watching your files and re-building.
So yes there had to be an autosave delay.
But a delay is a delay and no one likes waiting, even if it’s a 3-second delay. Especially when you can get rid of it.
When I press Ctrl + S, I instantly know my changes are saved. I know my build watcher will run immediately. I have instant feedback and there is zero noticeable delay.
I find small things like these make a non-trivial impact on the development experience.
So I’m no longer autosaving my code. I had it on for some months back after I discovered such a feature even existed in VS Code, and then I went on and off, and then finally — no more! Like many devs, I’m already used to Ctrl + S so it’s no big deal. Let’s see if my mind changes in the future — how about you?
What if we see coding as a delicate act of nurturing, a digital development brought about by our creativity and the intricate logical reasoning of our minds?
There’s a reason we’re called software *developers*. Developers develop; developers build and grow.
If we can get ourselves to view a software project as a unit of its own, with all its capabilities, potential, and goals, we instantly start to observe numerous interesting connections between programming and other nurturing acts like parenting, gardening, and self-improvement.
From the onset: a freshly scaffolded project, a file, or a folder. There is always a beginning, a birth.
With every single line of code added, deleted, and refactored, the software grows into greatness. With every additional library, package, and API fastened into place, low-level combines into high-level; the big picture unfolds; a fully formed digital creation emerges.
Goal in sight: Plan
Similar to nurturing a budding sapling, the coding process begins with the seed of an idea. You envision the type of product you hope your software will become.
You and your team are to carefully plan and design the structure, algorithms, and flow of the code, much like parents are to create a loving and supportive home by providing the necessary resources, values, and guidance to foster their child’s development.
This thoughtful approach lays the foundation for the entire coding project and boosts the chances of a bright future.
From here to there: Grow
Your codebase needs to grow and improve, but growth on its own is a very vague and generic word. It’s just… an increase.
For any type of growth of any entity to be meaningful, it has to be in the direction of *something*. Something valuable and important.
What’s the first thing I get right now when I search for the meaning of “personal” growth on Google?
This definition prefers to remain vague and makes it clear that personal growth isn’t the same for everyone. You choose your values, set goals based on them, and develop yourself and your environment according to those goals.
But this doesn’t mean you can pick just any goal you want for a happy life; Certain goals are way more beneficial for your well-being than others. A target of progressively gobbling up to 10,000 calories of ice cream every day can never be put in the same league as running a marathon or building solid muscle at the gym.
So the same thing applies to coding. Consciously hoping to write 10,000 lines of code or add 1,000 random features to your software is a terrible aspiration, and will never guarantee high-quality software.
Apart from the explicitly defined requirements, here are some important growth metrics to measure your software project by:
On a lower level, all about the code:
Readability: How easy is it for a stranger to understand your code, even if they know nothing about programming?
Efficiency: How many units of a task can your program complete in X amount of time?
Modularity: Is your code organized into separate modules for different responsibilities? Can one module be swapped out without the entire project crashing into ruins?
Testability and test quality & quantity: How easy is it to test these modules? Do you keep side-effects and mutation to a minimum? And yes, how many actual tests have you written? Are these tests even useful and deliberate? Do you apply the 80/20 rule during testing?
On a higher level closer to the user:
Effective, goal-focused communication: with copy, shape, icons, and more.
Perceived performance: Including immediate responses to user actions, loading bars for long-running actions, buffering, etc.
Number of cohesive features: Are the features enough, and relevant to the overall goal of the software?
Sensual pleasure: Lovely aesthetics, stunning animations, sound effects, and more.
Was working on some open-source download manager a few years back.
This delightful growth process is one of the things that transforms coding from a cold logical activity into a creative, empowering, addictive pursuit. You continually strive, with the ultimate desired outcome in sight, line after line, commit after commit, feature after feature; everlasting progress in an energizing purposeful atmosphere.
What man actually needs is not a tensionless state but rather the striving and struggling for some goal worthy of him. What he needs is not the discharge of tension at any cost, but the call of a potential meaning waiting to be fulfilled by him.
Viktor E. Frankl (1966). “Man’s Search for Meaning”
And yes, just like raising a responsible, well-rounded individual, we may never actually reach a definite, final destination. But it gave us a strong sense of direction. We are going *somewhere* and we have the map.
Have you heard the popular estimates of devs spending on average as much as 75% of their time debugging software?
Yes, it would be nothing but a pipe dream to expect this journey to be easy.
Indeed, as a loving parent does all they can to shield their dearest child from harm’s way, programmers must safeguard their code from bugs and vulnerabilities to produce robust and reliable software. We’ve already talked about testing, and these precautions drastically reduce the chances of nasty errors and mistakes.
But just like with building good personal habits and social skills, you are still going to make mistakes along the way.
With any serious complex codebase, there are still going to be loud, frustrating bugs that bring you to the point of despair and hopelessness. But you simply cannot quit. You are responsible; you are the architect of this virtual world, the builder of digital solutions and innovations. You possess the power to overcome obstacles and transform difficulties into opportunities for growth — your growth, your software’s growth.
And what of when the path toward the goal changes dramatically? Close-mindedness won’t take you far.
Parents need to be adaptable and flexible in adjusting to the child’s changing unique needs and development stages: Software requirements are hardly set in stone. You must be able to incorporate new features into your codebase — and destroy them as time goes on.
Pro-active scalability is nice to have in every software system, but this isn’t always feasible; in the real world you have time and cost constraints and you need to move fast. What was a great algorithm at 1 thousand users could quickly become a huge performance bottleneck at 1 million users. You may need to migrate to a whole new database for increasingly complex datasets needing speedy retrieval.
Takeaway: What coding should be
Like tending to a seedling or guiding a child’s development, coding requires careful planning, thoughtful design, and continuous adaptation. It’s an everlasting process of meaningful growth, measured not only by lines of code but by metrics such as readability, efficiency, beauty, and user-focused features. With each line added, bugs debugged, and obstacles overcome, the software and its creator thrive together on a path filled with purpose, determination, and endless possibilities.
