DEV Community: Abdur-Rahman

Exploring Binary Trees (in C++)

Abdur-Rahman — Tue, 06 Aug 2024 10:52:17 +0000

This post was originally posted on my Hashnode blog.

A short while ago, I undertook the task of improving my C++ via DSA (which stands for Data Structure & Algorithms). The aim of practising DSA is simple: By implementing your own data structures and algorithms, you learn a lot of what happens under the hood of your everyday programming, allowing you to write more efficient and optimised code. In short, it helps you distinguish between bloat and useful code.

Before we move on, what exactly is even DSA? Let's define the words in there.

Data Structure: A data structure is a named location that allows you to store and organise data. An example of a data structure is the common Map found in multiple languages
Algorithm: An algorithm is a set of steps that define processes/steps to perform a task. There are two main, important components of an algorithm: the order and the steps. A non-technical example is getting ready for work, you have 4 steps: wake up, shower, dress for the day, and head out. We defined the steps and also ordered them. Imagine showering, then waking up, then heading out, then dressing up! That's a sure way to land in an asylum.

That's the basics out of the way, back to my journey. Binary trees are a data tree structure with multiple nodes, with a node having no more than 2 children.

🌲 Binary Tree

What was the word salad above, you ask? Let's break down the concepts:

Tree Data Structure: A tree data structure is an abstract data structure that mimics a tree hierarchical structure with a set of connected points. Each point has one parent point, except the root point (where the tree starts from). Each point here is called a node. The connecting "lines" between a node is called an edge.

Binary Tree: A binary tree is a tree data structure where each node has no more than two children, usually referred to as the left and right nodes. A child here means a node connected to a node on an upper level. In the picture above, the root has two children's nodes, with the left child's node having two children and the right child's node having three children nodes. The picture above is not a binary tree.

Note that the data structures here like trees and graphs are abstract concepts. They are models/conventions for shaping data.

Based on that, we can go ahead and define a basic Binary Tree:

struct TreeNode {
    int value;
    TreeNode *right, *left;

    explicit TreeNode(int val):
        value(val),
        right(nullptr),
        left(nullptr) {};
};

Our binary tree is a struct that allows us to instantiate a root node, that is a node with no parent. It also points the left and right child nodes to nothing. Also, the edges are the pointers to its children nodes.

We use pointers (TreeNode *right, *left;) in our struct because binary trees are recursive structures. Each node needs to reference its children, but we don't know how many nodes the tree will have in advance. Pointers allow us to dynamically allocate memory for new nodes as we build the tree, providing flexibility and efficient memory usage.

TreeNode root = TreeNode(0)

Let's add children nodes and see how it would tally.

root.right = new TreeNode(1);
root.left = new TreeNode(2);

auto* node_three = new TreeNode(3);
auto* node_four = new TreeNode(4);
auto* node_five = new TreeNode(5);

root.right->left = node_three;
root.right->right = node_five;
root.left->left = node_four;

That's the basics of the Binary Tree. Next, we will briefly look at the traversal of a Binary Tree.

↗️ Traversing a Binary Tree

Traversing a binary tree simply means moving through the tree nodes. It can be broken down into two main categories:

Depth-First Search (DFS) Algorithms: Depth-first is an algorithm (remember, steps and order) that is as its name advertises, a search algorithm used to travel around a tree by going down. For example, using our tree above, we can traverse: 0-2-4-1-3-5. Starting from the root, then going down the leftmost node recursively, then moving to the right and repeating the same process. DFS has different types of traversals we won't be looking at, namely Preorder, Inorder, and Postorder traversals.
Breadth-First Search (BFS) Algorithms: Breadth-first is the opposite of the DFS algorithm, in that the traversal occurs across instead of down. Using our trusty tree above, a complete traversal would yield: 0-2-1-4-3-5. Unlike DFS, there's only one type of traversal when it comes to this algorithm. And that's Level Order Traversal.

That's it for this section. As I said above, a binary tree is an abstract data model (concept), not an actual topic to be cramming or sweating over. It only makes sense when applied to something practical (one good reason I hate Leetcode and the like).

🔬 Practical Examples

A good application of binary trees is in expression trees and ASTs (Abstract Syntax Trees). Expression trees are simply a way of representing mathematical expressions, whilst ASTs are used by compilers and parsers to represent code. Note that an expression tree/AST doesn't necessarily equate to a binary tree structure. A binary tree is just one of the ways they could be represented.

Starting out with expression trees, let's say we want to represent the following:

2 * ((1 + 7) / 4)

We can start out with a tree of the following structure:

// with the syntax <value|node>
<2|left> <*|root> <((1 + 7) / 4)|right>

The right node can then be broken down further to:

<1 + 7|left> </|root> <4|right>

The left node can also be broken down further..., do you see how this is coming along? By using a divide-and-conquer strategy, we can turn any complicated expression into a simple representation made up of multiple left-parent-right structures.

For mathematical expression evaluation, expression trees allow for efficient computation of complex formulas. By traversing the tree, we can easily separate and respect the order of operations and handle nested expressions individually. This is very useful in applications like spreadsheet software, where users input complex mathematical expressions that need to be evaluated quickly and accurately.

The same goes for ASTs. A common example of binary trees in AST is a compiler. Using a simple conditional as an example:

if (x > 0) print(x);

An AST can be thought of as a more elegant expression tree, we can represent the above as:

ASTNode* ifNode = new ASTNode("IfStatement");

ASTNode* condition = new ASTNode("BinaryExpression", ">");
condition->left(new ASTNode("Identifier", "x"));
condition->right(new ASTNode("Literal", "0"));

ASTNode* printCall = new ASTNode("CallExpression", "print");
printCall->left(new ASTNode("Identifier", "x"));

ifNode->left(condition);
ifNode->right(printCall);

This is a very simple representation of the code. As I mentioned above, these data structures are just abstract models to fit data. If we wanted to parse a longer statement like:

if (x > 0) {
    print(x);
else if (x == 0) {
    print(0);
} else {
    print(-1);
}

We would find a node having more than two children nodes, in which case, it is still a tree structure, but no longer a binary tree.

We've covered the basics of binary trees, including their structure, implementation in C++, traversal methods, and practical applications in expression evaluation and compiler design. Binary trees are important in programming because they provide an efficient way to organize and search hierarchical data. They form the foundation for more complex tree structures like binary search trees (BSTs) and AVL trees, which are crucial for implementing efficient searching and sorting algorithms. I am still learning about these though and would be documenting my progress along the way.

That's it for this article! DSA is a very large and interesting field, especially when done with a language like C++. This is because C++ is a language that gives you a high degree of control over memory management (which allows for things to go so wrong) and performance optimization. Understanding these data structures allows you to choose the most efficient ways to organize and access data, while knowledge of algorithms in your arsenal helps you implement the most effective solutions to problems.

I am currently having fun playing around with multiple algos and structures and then trying to put them into practice in small projects, if you want to follow along or take a peek at my progress, it is available in this repository with tests too (yes, full test coverage 😁). Speaking of tests, TDD in C++ is very fun, I should write up on that too. Once again, thanks for reading my notes. If you have any corrections or additions for us, feel free to share in the comments. Till next time 👋!

Breaking down pointers (in C++)

Abdur-Rahman — Mon, 01 Jul 2024 18:33:44 +0000

This post was originally posted on my Hashnode blog.

I recently began learning C++ (or CPP), a powerful language built on C. C++ is a language that exposes a lot more than conventional languages like JS, Python and Java. Having worked with weird languages (like Rust) and language for dummies (Golang), a lot of that knowledge was easily transferable to C++. But there were still some grey areas where I didn't fully understand what was happening under the hood. Taking a cue from one of my mentors @tigerabrodi, I am now writing those grey areas as I learn and attempting to simplify them for myself and you, the reader.

The first concept I would be writing about is pointers. What are pointers?

👉 Pointers

A pointer is a variable that stores the reference to another variable. A variable is named object. What's an object? An object is a region of memory with a type that specifies what kind of information can be placed in there. The type here refers to int, double, char, etc. Think of an object as a box, where you can only put a certain type of item (jackets, for example). If you label the box, it becomes a variable.

Pointers are simply what I like to refer to as middlemen or contacts. Using the box analogy from the last paragraph, let's imagine the box is in a room. A pointer would be a person standing in the room and pointing to the box. The room is your computer memory, the location of the box in the room is the address or memory address of "jacket box" (what we are calling the box), and the person pointing is the pointer.

We could enter the room and directly head over to the box to get, change or even remove its contents. That is the normal declaration and assignment we are used to.

int a = 5;
a = 6;
// print a
std::cout << a; // 6

Alternatively, we could head over to the person pointing, and following their direction (the pointing finger), locate the box. Recall what we said earlier? A pointer stores the reference to another variable. We could also say a pointer stores the memory address of another variable. Using that, we can also define a pointer as: "A data type that can store memory addresses".

Going back to the room analogy, one thing to note is that the person pointing to the box is also inside the room. Not outside. It is also a variable stored in memory. Going back to the first definition of pointers, a pointer is an unusual variable. Other variables store a number or a character, a pointer stores the location of another variable!

int num = 8;

int* ptr = &num;

cout << ptr << endl;
cout << *ptr << endl;

In C++, the * is one of the ways to declare a pointer type. This is interpreted as a variable that would store (point to) the memory address of an int type. The &num is a notation to get the memory address of a variable itself. We then printed out ptr, which would give us a weird string (like 0x7ffeee679d4c8). That weird string is the address of num in the memory, if we were to head here (whilst the program is running), we would find num!

What happens if we print &num? It prints out the same memory address as our pointer. That's because the pointer stores the memory address, and the reference operator (&) also returns the memory address of that variable.

The last line (*ptr) is called the "dereference operator". Dereferencing is trying to get the value of the memory address pointed to by our pointer. Using the room analogy, instead of just giving me the location of the box, we are asking the person what is stored at that location. In this case, a handful of jackets! Don't forget, the box is the holder of the jacket, it isn't the actual item stored in that location.

At the start, I also mentioned that pointers are middlemen. What do I mean by that? A pointer isn't tied to what it points to. It can point to something else, or even nothing at all! (Null pointers 👀). Remember, a pointer is a variable that stores the memory address of others. Like any other variable, it can be re-assigned (pointed to something else)

int num = 10;
int let = 20;
// ptr initially points to num
int* ptr = &num;
// Reassign ptr to point to let instead
ptr = &let;

🆚 Pointers vs Reference

Something I tended to gloss over was the difference between a reference declaration and a pointer. They are very similar in what they do but are two very different things.

What does a reference mean here? A reference is an alias for an already declared variable. Let's re-use the room analogy. A reference would simply be slapping another label on the box. We originally called the box "jacket box", that is the name. A reference is simply a "reference to that variable", let's call it "jacket ref" (short for reference).

References do not take up additional space in memory. It is simply just an "alias".

int num = 5;
int& alias = num;

The int& means "a reference to type int". Notice how we are assigning it to the memory address of num and not the value of num. If we were to print out alias and num, they would both be 5. If we were to modify the value of alias, it would modify the value of num as well.

int num = 5;
int& alias = &num;

alias = 10;
cout << "Alias is: " << alias << "\nNum is: " << num;

They would both print 10. Using the room analogy, we just added a second label to the box. If we walked into the room looking for "jacket ref", we would still head over to the same box. So, what would happen to the "jacket box" if we were to change the jackets in the "jacket ref" box? The same thing because they are the same box!

By the way, this is the basis of pass-by-reference in languages that utilise it like Java, Rust and C++.

What about pointers? A pointer can do the same thing

int num = 6;
int* ptr = &num;

*ptr = 8 // num becomes 8

OK, what just happened? As we can change the address a pointer stores (points to), we can also change the content of what is stored in that address. Using the same old room analogy, this is the same as the person pointing and reaching over to add, change or remove jackets from the box.

What are some of the main differences?

Pointer	Reference
A pointer is a variable stored in memory. It stores the address of another variable	A reference is an alias for another variable. It's not a new one, just another name for an existing one.
Can be reassigned to point to other objects.	Can not be re-assigned to another variable.
Can be null (pointing to nothing)	Cannot be null. It must be initialized to something.
Pointers have their memory address (they're stored in memory after all)	References don't occupy any additional space beyond the referenced variable.
You can have pointers pointing to another (Remember, they are storing memory addresses after all)	References cannot reference another reference

Based on the current article, can you figure out what this meme implies 😄

That's it for this article! I hope to write more as I learn more, blog driven development is a wild, yet effective method of learning and I am committed to putting pen to paper when I have something of note. I am also building simple, public projects on my GitHub using C++, trying to put what I learn into practice, you can check me out @ShafSpecs.

I also enjoy this analogy and simple writing format. Makes things easier for me when revising notes, hope you enjoyed it too! If you have any tips, comments or corrections, please drop them down below. Till next time 👋!

Remix + Trigger.dev: Match made in Heaven

Abdur-Rahman — Fri, 29 Sep 2023 20:39:01 +0000

Introduction 🔰

The concept of jobs and long-running jobs within web applications is not a foreign one, indeed a lot of software utilizes various solutions and code snippets and it works. Within the JS ecosystem and Web Development in particular, tools for this are quite scarce, if you didn't want to go the manual route (of doing everything yourself), you didn't have much options. Till Trigger.

Breakdown 🛠️

What's Trigger.dev?

Trigger.dev is a TypeScript framework for background jobs. It allows you to integrate smart webhooks, APIs and long-running tasks into your application with ease.

I was fortunate to stumble upon Trigger in my quest to build the ultimate Remix PWA stack 👀, and it has been a tool I have been using ever since in a lot of projects.

What's special about it?

There are a lot of things about Trigger I am yet to discover myself, but I would highlight some of my main pros for it.

Longevity: This means long. In other words, it's support for long-running tasks. I am a fan and advocate of more Progressive Web Apps (PWAs) and one core thing about PWAs is long-running tasks. Tasks that can run even when the app is closed. Trigger is a fantastic complementary tool for that on the server, keeping tasks alive for up to a year if needed!
Cron Jobs: A cron can be simply defined as a task that runs at intervals, think of JavaScript's setInterval on a larger scale. Running Cron Jobs has never been easier with Trigger, truth be told I haven't used it yet (no cause for it yet) but going through the API earlier and comparing it with how I currently handle cron jobs (on some boring server with quite a lot configuration), I am sold in this aspect.
Integrations: This is my biggest takeaway from this all, Trigger doesn't just exist in its bubble, it's a platform that focuses on extensibility. Telegram, WhatsApp, OneSignal, Resend, Slack and a lot more can be connected with just a few lines of code and you don't have to worry about it. Deploy it and it runs forever!
Self-Hosting: Edited this article and can't believe I forgot to add this, self-hosting option. As a massive fan of Fly.io and self-deployment (Vercel & Serverless has disappointed me enough), the option to host this incredible tool is a big win for me.
Open-Source: Open-Source...yayyy 🎉! Seriously though, Open-Source Software (OSS) is to be celebrated and this is one that also deserves recognition and praise.

Trigger.dev & Remix

Now to the actual topic, Remix and Trigger. What makes them so perfect in my opinion? I will be discussing a few reasons why that is so (my opinions).

First of all, Remix Resource Routes. A resource route in a Remix application is a route (your normal route) that doesn't return a component. Like an API endpoint. If you've written a controller with Express, that's your app.get() handler, or @Controller annotation in SpringBoot. Trigger in Remix takes advantage of this in Remix and builds itself within a single resource route (mostly /api/trigger) without disrupting your app flow. In short, Trigger builds itself as a part of your app, not a large service you have to plug in a few env keys and download a lot of packages to get it to work.

As a continuation of that, other Resource routes can integrate seamlessly with Trigger SDK, want to send an email? Create a send-email job in Trigger, create a send-email route and within its action, run (trigger) the job. Need to tell a customer their order is on the way via WhatsApp? No worries, that can be easily handled by creating another job and triggering it at the right time. Creating powerful and smart webhooks in Remix has never been easier!

I work with Push API a lot as a part of the Remix PWA ecosystem and one thing that must be factored in is consistency; whether offline or online, app opened or closed, the push must be sent and Trigger is an easy tool that helps with that.

The last point I would make for Remix & Trigger is Trigger Events. Events are triggers that react to an event within your application or another job. I think the best way to visualize this is with examples, if you are creating a fund-raising application for example, and you want to tweet every milestone hit on the user's Twitter account, you simply have an event that triggers whenever the milestones are hit and tweet, tweet! You are now tweeting based on set goals from within your application without extra input.

There are more I can go into like scheduled jobs and resumability which help ensure consistency within your job runs so you never run the same thing twice. But this would be all 😉

There's a lot for me to discover within Trigger, I am still at the top layer and it's impressive. Can't wait to dive deeper and see what more is possible with it. I will be writing more about Trigger within the coming months about my discoveries and maybe a trick or two, till then have fun and keep learning 💪. Till next time 👋!

Remix PWA v3.0: A new era

Abdur-Rahman — Tue, 19 Sep 2023 15:30:12 +0000

Hurray 🎉🎉! We are finally pleased to introduce Remix PWA v3.0 to the world 🌍. Remix PWA is a PWA framework for building perfomant, enhanced Progressive Web Applications in Remix. Remix 💿 is a web framework for building fast, perfomant and gorgeous sites of all scales with ease and no unnecessary abstractions.

// Detect dark theme var iframe = document.getElementById('tweet-1704154517506310227-313'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1704154517506310227&theme=dark" }

This article will go over what's new in this update (spoiler: a lot), and dive a bit deeper into under-the-hood, our dream of solidifying PWA in Remix; and maybe even native support (who knows?).

Synopsis 🧪

Remix PWA v3.0 is the first real PWA framework (that I know of) built to integrate native PWA enhancements into your web applications. All this is possible thanks to the very fast compiler (powered by esbuild) behind-the-scenes and the separation of concerns pattern we adopted from Remix.

Remix separates its main build process into two via: @remix-run/dev and @remix-run/{adapter}. So it is easy to add adapters on the fly and extend Remix without needing to modify the original compiler.

Remix PWA follows that approach by separating our compilation process into two parts via: @remix-pwa/dev and @remix-pwa/{runtime}.

What's a Runtime?

Runtime can be defined simply as an internal Service Worker. It is your base of operations, the foundation from which Remix PWA builds any other service worker you provide on top. It's quite the thing.

Currently, only a basic javascript runtime adapter is provided by Remix PWA (in the form of @remix-pwa/worker-runtime). Support for other tools like Workbox will be coming along in the coming months.

Now that we've introduced Remix PWA and defined what runtime is, let's keep digging!

Highlights of the day ✨

A lot of new things came out of this update, to avoid spending all day here reading a documentation, I would drop three highlights to satiate your curiosity (Don't forget to check out https://remix-pwa.run too). The main highlights of Remix PWA v3.0 can be surmised as:

A new compiler has been shipped. Building PWAs just became less of a hassle!
New package lineup. We shipped quite a few new packages to help with scaling your PWA in a very short time.
Worker Route API: We brought the service worker directly to your routes 😁!

Compiler ⚙️

Remix PWA v3.0 took things up a notch this time by shipping with a compiler. Previously, it was a simple esbuild script that bundled one file from app to public.

With this update, we decided to go all out (what could go wrong?) and just ship a compiler. Not only does it handle building worker files, but you also get the route APIs, global worker context and more.

New Packages 📦

Remix PWA v3.0 update wasn't just about building a compiler for Service Workers but building a mini-ecosystem for PWAs in Remix. Say hello to @remix-pwa/sync (for Background Sync), @remix-pwa/cache (a supercharged framework-agnostic wrapper for Cache API) and some more.

Our approach with each of these packages was simple: what is the common solution for x? When we find it, we look at their approach and try to replicate the approach for Remix. Thereby lowering the learning curve substantially and making things more familiar and easy.

Worker Route API 🔥

I could definitely go on and on about this one, this is by far one of the biggest highlights of the Remix PWA v3.0 update.

Introducing workerLoader and workerAction. Two new route APIs that behave like your normal Remix loaders and actions. Two different handlers that run on the server and handle a route's request.

workerLoader and workerAction run in the worker thread and act as middleware in your route's communication process. It's no longer a direct client -> server relationship but a client -> worker -> server one and it's as powerful as ever!

That wraps up our highlight ⚡️! There's a whole lot more to unpack and be excited for. Stay tuned for more content and updates.

At the end of the day, Remix PWA is a firm part of the Remix ecosystem and it's our goal (and dream) that some of what you see released would no longer be in v4.0 because it is already shipped with Remix itself.

That's the end of this unofficial announcement post. I hope you are as excited as I am for the future of PWA, not just in Remix but on the World Wide Web as a whole. Am I back to consistent writing? I hope so. Anyway, I would leave you with this one to have explore and fun 🤩. Love you all, see you in the next one 👋!

Writing as a growth tool

Abdur-Rahman — Wed, 11 Jan 2023 22:54:26 +0000

This post was originally published on my Hashnode blog!

A fact that has been established over and over is that the art of writing is also the art of mental sticking. To save something in your memory longer, you need to jot it down somewhere. I embraced the art of writing as a tool for me to learn last year and my growth has been more steady than before. Let's break it down:

✍ Writing as an Engineer

Humans are never perfect, as much as we love perfection in our lives, there is always the element of volatility, the element of uncertainty. This applies to learning as well, if you learn a language and you don't speak it often. You forget it. You cram a user manual but never use the product? You never know how to use the product!

Whenever we learn something new, we tend to unconsciously tie it to something else in our lives. For example, when we learned the alphabet in school, we were taught to tie it with something ('A for Apple' for example), and this is generally how we store and recall things. Writing is also a way to recall things learnt, so I learned about Docker today and Docker vs Virtualization, I pen it down.

I don't need to memorize/cram the various concepts and definitions there to recall something. By writing, I am reinforcing what I learned because for I would structure my write-up in such a way that I would understand in the future, hence improving my existing knowledge on the topic.

📢 Writing publicly as an Engineer

Okay, this one is a bit harder. Writing publicly, or blogging is when we take that write-up we created and put it out there for others to benefit from whatever we learnt. When writing publicly, you are no longer writing just for yourself to understand but for others from multiple nationalities (it's a global village, remember?) to understand you.

This is where your communication skills come into play, depending on underlying factors, it might be difficult to start or easy. But one thing for sure is that with consistency, you would get better. We can't escape the web of society so our communication key is important in the long run, what better way to improve it than writing to an "audience"?

📈 Growth as a byproduct

There is this saying I hear here and there: "If you want to learn something well, teach it". I don't know who said it first but he was darn right! By writing, we reinforce what we already know because fact-checking occurs, also in the process of writing about a topic, we tend to simplify it to encourage easy comprehension, and we also get to discover more about it as we dig deeper into the topic. These are all elements of growth.

By fact-checking, we stamp out the doubts and realign our thoughts. By simplifying a topic, we present it with a perspective which we might have never thought of. By digging deeper, we learn more hence improving our proficiency. Growth would happen unconsciously, but first, consistency!

💪 Consistency as a Golden Rule

Whichever goal you aim to achieve through writing won't come overnight, and this is where the repetition of your writing plays a role. Growth is a gradual process that is cemented slowly over time. To nurture it, we should repeat the act of writing.

Consistency 🏗 is greater than Intensity 💪

Especially when starting new, you don't want to bore yourself out too quickly or burn out from too much work. You want to stretch your progress and growth over months instead of weeks, you want writing to become another one of your daily activities, not a chore. Building slowly and progressively always wins, growth is never instantaneous.

Another article is finished. Thanks a lot for the read, writing has been a skill I started building last year and it's been a pivotal point for me, wanted to share a few tips and insights and maybe convince you to pick up the pencil (or the keyboard) once in a while. You just never know who might open your article. Have fun, bye-bye 👋

One year of Remix: The then, the now & the later

Abdur-Rahman — Tue, 03 Jan 2023 07:48:37 +0000

This article was originally published on Hashnode, check my blog out

It's been approximately one year and one month since Remix v1 was released to the world. Been writing it since then and it has changed a lot of my perceptions and the way I approach writing code altogether. Pouring my thoughts out about this framework, what it's done, how I'm faring and what the future might look like.

The Then:

November 2021

I can't exactly recall the date, but I remember waiting for the launch. I had heard a lot of great things from beta testers and was hyped about it. A framework built on web fundamentals and not a clumsy framework called React? I was sold!

I recall the launch being late, not only due to delays but because the timing was centred around the US timezone, I live in Nigeria and that is at least 6 hours ahead, so it was pretty late. The launch finally happened and I remember skimming the docs that night and playing with some code, this had potential 💪.

Remix wasn't the greatest it could be, but it was better than the popular option at that time. NextJS. Don't worry, Next is still great but nah, Remix is anytime for me.

Early 2022

I had just committed myself to write articles and I wasn't going to miss this one out, not a chance. I built projects and played with different use cases with Remix, and since I wasn't in school or working at the time, I had time on my hands and I didn't let it slide. I also started studying Progressive Web Apps (PWAs) around this time and decided to port the feature over to Remix.

Thanks to Jacob from the Remix team, I was able to create remix-pwa. A set of scripts to change your application in seconds. It was also my first major contribution to Open-Source, and it was a great feeling.

Remix taught me a lot, I unlearned around this period too. A couple of wrong practices and a few Udemy courses with a drizzle of YouTube crash courses and you sometimes forget to learn the utmost basics, which I did.

All I would say is: when I decided to learn Remix, I wasn't learning a framework, I was learning how the Web works.

Mid 2022

...Nothing to see here...

I was deep in school activities...

Schooling wasn't all that bad for me, it reinforced my knowledge and taught me more.

I did want to write a complete guide on Remix around this time, but couldn't find a good tool to do so efficiently.

The Now:

I joined my current company in August. The primary tool for front end was React at the time, good enough. It was a great bastion of knowledge (thanks to all my wonderful colleagues) and I was constantly trying to improve myself. Then I became the Lead Frontend Engineer, and around that time we were changing some of the technology we used. When I mentioned Remix to the team, no persuasion was needed, Remix said it all (Tip: Large react codebases can also be a nightmare)

I would call myself lucky, I use my favourite web framework at work and home. I have been able to iterate my learning and orientation throughout the year to adapt to some of the things I picked up. Seriously, give Remix a run 💿!

2023 is knocking and I'm still at it. I write other languages including Java, Golang and Python and being able to build apps with those languages and fuse them with Remix brings me joy and hope for the JavaScript (and web) community. So far, so good.

The Later:

This is all contemplation and just plans, but over this year, I've seen great tools and frameworks born out of nowhere and witnessing more options is quite pleasing. I have two that come to mind anytime I think of a framework with growth potential:

Sveltekit
Solid.js

I won't dive into them in this article but I can defo say that I would be playing around with them more and adopting them into more projects. Seriously, 2023 would be very exciting!

Remix is a framework that helped accelerate my growth as a Software Engineer, I'm not the only one that says so. Check the the site for testimonials. Thanks to its community, I also met a lot of like-minded and fun folks there who all helped me in numerous ways. 2022 is the most important year in my programming journey so far, and as weird as it sounds, a single framework was a key player in bringing that to life.

That's it for this article peeps! It was interesting to pour out my mind and reflect on a framework like Remix. Now I would add a disclaimer to my article; never get attached to a framework because it is so-and-so... instead, adopt it because of what it does. Even though the concept of Remix isn't new altogether, it was a first for me in terms of bringing all these great things under a single umbrella.

Like programming languages, all these frameworks are tools to achieve a specified objective. They don't necessarily dictate how your program would turn out. Ultimately, that's up to you and your approach to building software. So learning the fundamentals would help even with choosing what tools to use when building.

That's it for now, hope you enjoyed reading a piece of my mind. Enjoy yourself and have a blast! Keep learning, reading and playing! Till next time 👋

My 2022 in review

Abdur-Rahman — Mon, 26 Dec 2022 14:18:34 +0000

The year 2022 was and is a year that stood out for me as a programmer and a student. In this article, I hope to go through some of my accomplishments, what I learned and some of my next year's goals. Hopefully, you would get a thing or two out of this, so shall we?

🔰 The beginning:

This year started out busy. I had just learned the art of writing and was getting the hang of it. Remix had just released v1 a few days before and I loved it 😍. Due to its simplicity and reliance on the core fundamentals, it was a framework that had come to stay.

I also made the resolution to write one article a week from the start of this year, and surprisingly, I always did that. Always. Until I didn't.

🏫 Sch...what?!:

That's right, I went back to school. That was in March, and writing wasn't something I could keep up with.

A bit about my schooling, it was a Software Engineering program at Semicolon. It's a one-year accelerated program and was swell! I joined in March and my weeks just flew by in a blur. It was busy but worth it in my journey.

I learned a lot during my months there, programming languages, methodologies and much more. Plus the great colleagues I met.

The end?:

During this year, I was privileged to work at two different companies. The first was a three months contract I did with a non-Nigerian startup. It was a stepping stone for me as a Software Engineer. I learned quite a lot during those three months too. I joined NaeroSpace in August and have been with them since. It was a wild ride cause I joined when it was an early startup and have been with them till it wasn't.

I'm approaching the end of my course and yes, I am less busy. I hope to pick up the slack and resume my writing. I have one major open-sourced project that I paused maintenance on (remix-pwa), I would be continuing my active maintenance of the package.

🏁 Highlights & Goals:

I have had a year to learn, fail and try again with Remix 💿. I also learned interesting facts and know-how whilst learning at Semicolon, I would be writing on all these things collectively from next year. I aim to be more diversified and impactful in my writing next year.

Talking about impact, I love my current job and what we do. In summary, we provide solutions to Africa's problems with aerospace technologies. Over my years writing code, I have crossed paths with engineers at multiple points in their careers and picked up a thing or two from discussions on careers and impact. I would be writing more on careers, career tips and using the skill of programming to make an impact. Stay tuned!

I love to read about diverse topics. A lot. I definitely would write more on these next year from what I learned from these books. It should be a blast!

I have been using the Test Driven Development (TDD) approach in a lot of projects I write in other languages. For some reason, I never got the hang of JavaScript testing tools (except Cypress). I am hoping to pick these technologies up and build more projects with them.

Finally, I hope to be building more side projects. I have some SaaS in mind for next year (thank you @tigerabrodi) and would announce it if I ever advance on this idea. I build more side-projects, learn more, share them with you dear readers and iterate.

That's it for now, folks! Hopefully, we would engage more often over the coming weeks to exchange ideas and hold discussions. I would hopefully get back to Twitter despite recent events. It was nice to write again and I would definitely be doing it again. Till next time!

Git: A beginner's guide

Abdur-Rahman — Fri, 15 Apr 2022 17:28:24 +0000

Welcome to this week's article peeps 👋, where I would be talking about git, why it's important to you as a developer/engineer and how to get started with it.

🔰 Introduction:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. In short, git is a version control system. A Version Control System (VCS) is a tool that helps software developers keep track of how their software development projects change over time 🔃.

Each snapshot or state of the files and folders in a codebase at a given time can be called a "version". Version control systems were created to allow developers a convenient way to create, manage, and share those versions. It allows them to have control over managing the versions of their code as it evolves over time. It also enable collaboration within a team of software developers, without losing or overwriting anyone's work (it prevents intra-company fights and brawls 🔥) . After a developer makes a set of code changes to one or more files, they tell the version control system to save a representation of those changes.

In this way, a history of code changes - or versions - is built up as the code evolves. This history is preserved so that all developers, even if they are working in totally different locations, have access to a consistent and up-to-date history of the project. A version control system can also be referred to as a source control system, source code management, version control software, version control tools, or other combinations of these terms.

Version control discussion sourced from IC.

🐱 Github:

First thing to note: Github is not Git! Github is a platform (a service) used by developers (who use git) to upload and download resources and source codes. Git is used to connect and interact with Github to download and upload resources. There are other platform aside from Github used for versioning, some of which are GitLab, GitBucket, etc. With over 73 million user base, Github is a very popular and a favorite of many. If you don't have an account yet, head over there and set one up now!

A typical Github user's profile page.

📩 Installation:

Head over to Git.com to download git installer, it can also be installed via the command line but let's do it the easy way 😉.

After downloading and running the installer, the next thing to do is test that the git installation was successful. Navigate into any folder using the cd command. Run the command git init. If you get the message "Initialized empty gi...", voila! you've had a successful installation!

🔧 Connecting Git to Github:

Let's connect our git to github, first, let's configure our name (Github username) and email. Run these two commands:

git config --global user.name "Your name here"
git config --global user.email "your_email@example.com"

After that, run the command:

ssh-keygen -t rsa -C "your_email@example.com"

This creates two files, ~/.ssh/id_rsa and ~/.ssh/id_rsa.pub. On windows, head into your C:/username folder and look for a folder called .ssh (You might need to enable "Show hidden files" to see it). On Linux, it would be in your "Home" folder (*also a hidden folder). Navigate into that folder and open the one called id_rsa.pub.

You would see a long string of gibberish in there ending with your email, that's good. Head over to Github and go to your settings

Head to the "SSH and GPG" keys and click "New SSH Key" in the top right corner. Give your ssh key a name and paste that gibberish in the id_rsa.pub file. Click "Create key" and head back to your terminal. Run the command:

ssh -T git@github.com

If you get a message like: "Hi username, ...". Then, mission successful!

🔖 Git Keywords:

Let's discuss some of the terminologies you would find in the git ecosystem (including GitHub), after all, you need to be able to speak like a version control master 😄. I would be using remix-pwa as an example here.

Repository: A Git repository (also called "repo") tracks and saves the history of all changes made to the files in a Git project. This information is used by online platforms like Github to store, track and display resources (mostly source codes) in a graphical format.

A repo example on Github. This can be used to view changes and if needed, reverse those changes. Plus, Github gives a lot more features.

Branch: A branch is a version of the repository that diverges from the main working project. Imagine a project, that has multiple versions that don't interfere with each other and these versions can change independent of the others. A git repo can have several branches.

A branch system in a repo, each of these branches contain different versions of code of a particular project. One benefit here is that I can compare across branches and edit a project's source code without "destroying" the project itself. Think of a project as a tree, and different versions as different branches.

Fork: Fork or forking is a process of duplicating someone else's project (or code) in order to make edits or changes. One of the ethics of being a developer or engineer is to never edit someone else's source code directly, if you wish to make a change, you duplicate that person's code as your own (you fork that person's project)

If I wanted to make a change to this person's work, I would fork it then edit, and not edit it directly.

Pull Request: Pull requests (also known as PR) is the process of trying to merge to seperate code together. Imagine this scenario, we realized a mistake in someone's code (could be a team member or just an Open Source work) and we want to fix that bug 🐛. The steps we would take would be:
Fork the project
Make the changes and fix what we intended
Open a PR (request the owner of the original project to merge the two codes together)

This is an example of a merged PR. We have two different versions (two different branches in this case) and we want to combine their content. We open a PR, and then if the change we want to merge is valid (has no bugs or issues), we merge.

Staging: Staging is a used to add files of a working tree (directory) to a snapshot. This is used to prepare the files for a commit.
Commit: A commit is used to record the changes in the repository. The staging and committing are co-related to each other. Staging allows us to continue in making changes to the repository, and when we want to share these changes to the version control system, committing allows us to record these changes.
Commits are the snapshots of the project. Every commit is recorded in the master branch of the repository. We can recall the commits or revert it to the older version.
Clone: Cloning is used to make a copy of the target repository locally or "clone it". If for example, we want a local copy of a repository from GitHub, this tool allows creating a local copy of that repository on your local computer.
Merge: Merging is a process to put a forked history back together. It is simply just the merging of two seperate code history into one branch.
Issue: An issue is a Github thing (I don't know any other providers that offer it too 😅) that is used to keep track of bugs, issues, requests and features in a repository.

An issue example, in this case, there is an issue with using this project that the developer hasn't fixed yet. A user can easily come here and contact the developers directly who can offer solutions, fixes or alternatives.

Push: Pushing is the process of moving (more like copying) a local repo to a remote repo. A remote repo means a repo stored on the cloud, in a database somewhere. It is used for example, to move code from your computer to github.

That's ten popular keywords used in git and github for you guys 😄, there are a lot more you can read up on by yourself. If you know of anymore and want to share, let's hear it in the comments!

📝 Example Time:

That's enough talk! Let's do a miniature project and implement git in it. Open up your terminal and navigate to a directory (as always, I would be using "Documents"). Run the command:

mkdir git-example

The command mkdir means "make directory" and is used to create a directory in the folder we're in (in this case, git-example). Afterwards, use the cd command to navigate to the newly created folder. Let's now create the files we would upload to github, as a person with Javascript running in their veins, we would create a very simple js example (don't worry if you don't know js). Run the command:

touch example.js

The command touch creates that particular file in our current directory, in this case, example.js. Open up an editor and let's write a very simple conditional statement in JavaScript.

const a = 12
let b = 13

b = 12

if (a == b) {
  console.log('a and b are equal')
} else {
  console.log('a and b are not equal')
}

this code initializes two variables, a and b with two different numbers (12 and 13). We later assigned 12 to the variable b. We then had an if statement, if a is equal to b, then log a message in the console, if not, log a different message. Okay! Let's push to Github!

Open up your github's repo page and click "New Repository". I would be calling mine "DEV-example", make sure the visibility is set to public (other users would be able to view your source code). Add a description for your repo and skip the remaining questions and boxes below, click "Create repository".

Head back to the terminal of your project and run the commands:

git init
git remote add origin <URL-of-the-repo>.git
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

Let's run through each command, git init initializes an empty, local repo in your project (a .git folder).

git remote add origin <URL-of-the-repo>.git is used to tell your local repo the location of the remote repo, where on the cloud are we connecting to, to store our repo.

git add . is used for staging, normally, we use git add <name-of-file> but as a shortcut, you can use . to stage every file in the directory (except the .git local folder).

git commit -m "Initial commit" is used to commit our project. The -m part is called a "flag". Flags are used to pass arguments to a command, in this case, the flag -m stands for "message" (Every commit must have a message, usually, this should contain a brief description of what your changes consists of or what they do). The text between the double quotes is the message argument we want to pass to the commit command.

git branch -M main is used to change our branch (also known as rebasing). The -M flag here means "move" and what it does is "move our current folder content to the branch called 'main'".

git push -u origin main is used to push our local changes to our remote repo. The -u flag is used to track that repo changes (useful when pushing to a remote repo for the first time). It means "set up an upstream tracker to track changes". origin main is telling git where to push to, which branch should it push to, in this case, our branch "main".

I forgot to authenticate my github and forgot to rebase my repo to main 😅😅

Head back to your github repo and refresh the page, voila!

That's it for this week's peeps, I would still try and write as often as I can but it would be an irregular writing schedule 😅. Keep the comments flowing with questions or observations, we would love to hear them. Remember to keep reading, learning, and coding. And don't forget to play now and then! Love you guys, cya in the next article 👋.

Content creation update

Abdur-Rahman — Fri, 15 Apr 2022 14:19:34 +0000

Two weeks and no post, bugs me a lot to be honest, so I decided to write a short post on why and my plan for content creation in the future.

Finding time to write posts in school is quite hard (any college or uni students should share their coping mechanism 😄), I am currently studying Software Engineering and it's intensive. If you've heard of Full Sail, you know what I mean (it is a one-year degree). I am enjoying it, meeting other devs and just immersing in the tech world, it is an eye opener. On the other hand, things like side project and blogging is getting more and more tasking.

Now, what are my plans for the future of content creation? I would still write, and I would keep working on courses for freecodecamp albeit at a slower pace. So yeah, I broke my "one-article-a-week" streak and I've been working less on my side projects, but no fear! I would still write when I can, post tips every now-and-then and shitpost on Twitter when I can 😆.

That's it for this post, send your tips and wishes, I'm all ears. Read, learn, code, repeat. Play with open-source, it's a massive opportunity and don't forget to play and take a break. See you guys next time 👋.

Programming job and a BSc.

Abdur-Rahman — Sat, 26 Mar 2022 18:50:06 +0000

Welcome to this week's article peeps 👋, we would be talking about "that" degree, getting a job in tech and being a self-taught programmer. First of, what's "that" degree?
That degree is basically Computer Science. Now, you might be wondering how on earth I can give a piece of advice on this when I haven't gone to college and haven't had real work experience. Well in this article, I would be talking about all that, let's get started!

🎓 How importaant is a BSc?:

If you thought I was going to talk about a computer science degree being useless, you are wrong. As opposed to some notions, a degree is important and also a person's choice.

A computer science degree, despite being just a cardboard, is an important part of a developers journey. One very important aspect of every developers journey is networking, network with the right people and everything else could and would fall in place. A second thing is that no knowledge is useless (except if it's Java 🤣, jk), and would help you at one point or the other. Finally, a degree gives you a little perk when applying for jobs later on...

❔ Should you get one?

It's a matter of choice, a degree won't usually help you when it comes to getting jobs (mostly US) but can help secure connections. I would still advise getting a degree. Period.

So you are a self-taught developer, you want to get a job and establish yourself in tech, technical writing and open source would help you better than a degree in that regard. Speaking from personal experience, I have never applied for a job in my life but receive job offers from referrals on a consistent basis. It's not really about age, so don't berate yourself for being too young or being too old. It's also not about a degree (really), but more about your mindset and skillset, developing your personal skillset as a developer is another entire topic.

The world is changing rapidly, and you shouldn't allow job requirements to scare you. Ask the seniors in tech, those requirements don't really stand when you apply for a job, but also remember that failure and rejection would happen. Fail fast, fail often, fail forward. One more thing, personally I am not going to college, wether for a computer science degree or other.

That's another week gone, writing huge content has been hard for me nowadays as I have a lot on my hands. Still planning to allocate more time for that, this post is blown wide open for comments and discussions. Would love to chat with you peeps in the comments, and remember, fail fast, fail often, fail forward, you would only learn one more way to not fail. See you guys next week 👋.

Svelte: My thoughts 🤔

Abdur-Rahman — Sat, 19 Mar 2022 19:49:12 +0000

Welcome peeps to this week's article where I would be discussing Svelte, the new framework revving to hit the moon with their objectives, objectives I believe is achievable.

As sourced from the official site, Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

I played with Svelte and pretty much enjoyed it for a side-project. It's quick, doesn't utilize V-Dom and has an easy syntax. Sveltekit is a svelte framework, a solid one. I don't know much about it since I haven't played with it myself but I do know that it is efficient and Next.js better watch out.

Is Svelte better than Remix? No in my opinion. Svemix is an unofficial thing though, Svelte + Remix. In my opinion, it is quite inefficient. Use what works best for you though, if Angular appeals to you and delivers, use it. Don't sway for other opinions though, not worth swaying for them.

Final thought on Svelte, interesting framework with a unique approach compared to React. I am excited for it's future and would keep on using it for small side-projects and playing with it. I think you React devs out there ought to give it a try, a small chance. Might be worth it. See you next time 👋

How to get started with Open-Source

Abdur-Rahman — Thu, 10 Mar 2022 07:46:18 +0000

You know you can write some code, you've in fact, written a LOT. You can also recognize typos in files and documentation, and now you want to give something back to the community. So what do you do 🤔? Huh, good question.

Except you've got the finances, sponsoring the giants that help build our tech world is quite impossible. So, you decide instead that you want to give back by simplifying the learning process for other devs, you want to build softwares and modules that simplify tasks for others, you want to teach the community and make a lot of things easily accessible by others. But you can't 😐.
For starters, you are a shy speaker so you don't want to talk publicly. You also don't understand how to create anything "useful" for the community so you can't create "anything". Your writing creativity is null and more or less, underground. So your solution is to just just sit by the side and wait for the next brave person to give back to the community thinking you won't be able to give anything to the community. Uh uh, I disagree.

🚀 Open Source:

According to opensource.com, Open Source can be defined as: something people can modify and share because its design is publicly accessible.

Wikipedia is even more direct with it's definition which is given as: Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use the source code, design documents, or content of the product.

The last definition by Synopsys is generalized as: Open source software (OSS) is software that is distributed with its source code, making it available for use, modification, and distribution with its original rights. Source code is the part of software that most computer users don’t ever see; it’s the code computer programmers manipulate to control how a program or application behaves.

These definitions of Open Source (general definitions) gives a pretty good idea of what open source is and what I am going to rant about next.

🚨 Getting out of "that" mindset:

Let's be realistic, deciding to get out of your comfort zone to create a project on the "global stage" is something that makes us feel queasy. Not only would your bad code be public to everyone, but you also want others to go through it, contribute and even fork and improve it!

▶ Some things you should know about Open Source:

It's not always about creating a new project: Anything, literally anything that adds a single meaning or value is termed Open Source. If you saw a typo in Google's Docs and you create a Pull Request (PR) to fix it, congrats! That's Open Source. Want to create a brand new public framework? That's also Open Source. You don't need to be a guru to contribute. Heck, I don't even think such things exist in Programming.
If it can run, it can be public: Do you make all your repos private? I used to do that all the time too. It doesn't help matters at all. Take the leap of faith and start making them public! Except it's a private project that needs discretion, why make it private?
Stars don't matter: This might sound funny, but I had this mentality as well and I'm sure a lot of devs have it too.

GitHub stars doesn't rate the success of an Open Source project!

That's important. Keep it in your mind when planning on creating that next public repo. 15.5k stars or 3 stars? Duh, who cares. Open Source is about the satisfaction, not the fame.

If you're looking for fame tho, the Show Biz industry might be what you want 😉.

Start Contributing!

It's more of a mindset and less of an activity. You want it to become a reflexive thought, when you see a mistake, you either fix it or create an issue if the problem is beyond you. Make yourself a promise to pick up that mindset from today.

Okay, you have promised yourself and all. Let's get practical, the first thing I normally tell people looking to contribute is to look out for documentation issues and typos. Remember, humans are always humans and would make awful, hilarious mistakes so your "big fix" might be a wrong module import:

// ❌ Wrong importing format
import { React, useState, useEffect } from "react"

// ✔ Correct importing format
import React, { useState, useEffect } from "react"

Or typo:

// ❌ Soo wrong...
..some preloaded some the links 

// ✔ Much better..
..some preloaded links

If you successfully created a PR and it got merged, you have contributed to Open Source 🎉!

In summary, get out there and start making those PRs!

🛣 The way beyond:

So, you have made a lot of PRs and you have scanned codebases and learned a lot of useful practices, you now want to take on a bigger challenge. Create a public repo and start maintaining it! It doesn't have to be a complex CLI npm package meant to hack into human satellites and give you live video feed of Earth. It could even be a SaaS (Software as a Service) or a simple "Generate a random number" module. Kent C. Dodds has an awesome egghead.io course that shows how to create a basic, open source library.

Remember, it's nice to be fancy with your projects but not everything needs to be a monumental bang 💥 to be considered Open Source 😝!

That's it for this week's article peeps, what projects are you building? Have you already gotten into Open Source? If so, share your experience in the comments. I am currently re-building my portfolio with a personal blog (stay tuned for that), and I should be welcoming you guys there this month, hopefully. I haven't mentioned it here yet, but I recently joined FreeCodeCamp as an author and member (YAY 🙌) and ⚠SPOILER ALERT⚠, I'm building that mega Remix course I promised you guys, free and accessible.

Remember to take breaks and even vacations, read, learn more, push yourself, you can do it 💪. We were all there at some point but only through perseverance did some of us move up and scale our hurdles, you would too, I know that. Enjoy yourself, stay positive and don't forget to play! See you in the next one 👋.