DEV Community: Abdulmumin yaqeen

Devcanvas can now build stunning websites super FAST with AI!

Abdulmumin yaqeen — Sat, 19 Apr 2025 10:58:56 +0000

Devcanvas, one of my first projects into indie hacking, just got a major update.

Of course it’s AI. Devcanvas now lets you generate beautiful, responsive websites in seconds with just a simple prompt. Just tell it what you need, a portfolio? a landing page? a blog? and watch it build right in front of you.

It’s not a fullstack builder (yet). For now, it only generates frontend code — but hey, we might add more down the line.

You might be wondering, why this? Don’t all the other chatbots already have some kind of code canvas?

Well… if I’m being honest, I don’t really know either. I just wanted some skin in the game.

And of course, Devcanvas still does what it’s always done best — edit and preview code super fast.

🔧 Under the Hood

Powered by DeepSeek-V3-new excels at frontend
Generates clean HTML, Tailwind CSS, and vanilla JavaScript
Open source — always will be

Give it a spin and let me know what you think. Open to critics!

Links:

Try it out: https://devcanvas.dev
Github: https://github.com/abdulmumin1/devcanvas

Checkout my latest adventure

Abdulmumin yaqeen — Sat, 14 Dec 2024 12:26:48 +0000

Stop Overpaying for Website analytics - Affordable Alternative

Abdulmumin yaqeen ・ Nov 16

#webdev #community #sass #indiehackers

Stop Overpaying for Website analytics - Affordable Alternative

Abdulmumin yaqeen — Sat, 16 Nov 2024 20:02:39 +0000

Hey fellow builders! 👋

I built an analytics tool Littlestats, and this is the story of why I built yet another analytics tool (I know, I know - but stick with me here).

The Problem I Faced

Ever launched a side project or small business website? Then you know this feeling:

You're excited about your new project. You want to know if people are actually using it. So you add analytics.

"Cool, they have a free plan!" 😎

Until you realize:

Want to know where your traffic comes from? That's premium.

Need to track button clicks? Premium feature.
Want to see which countries visit your site? You guessed it... premium.

Suddenly that "free" plan feels like a demo, and you're staring at a $19-$29/month upgrade just to get basic insights about your website.

Sound familiar?

I looked around for alternatives:

Google Analytics: Free but privacy concerns and increasingly complex
Self-hosted solutions: The option i would generally go for, but didn't find the time, managing such on your own also sucks.
Other SaaS analytics: All seemed to start at range of $19 - $29/month (yeah they do have a higher number of sites/domains, but that way more than my needs)

The Solution: Littlestats

So I built Littlestats with a simple promise:

Everything you actually need from analytics, for the price of a coffee (or even less 😅). - $4/month

What do MicroSaaS founders actually need?

Traffic monitoring ✅
Conversion tracking ✅
Geographic data ✅
Source attribution ✅
Custom events ✅

What don't we need?

Machine learning predictions
Complex user journey mapping
47 different dashboard views
Enterprise-grade features we'll never use
Adding mediocre AI features to justify the price

Why $4

While most analytics tools charge $9-29/month for just 10k-30k hits per month, we're giving you Unlimited monthly pageviews for just $4. Simple as that.

We're keeping it simple and affordable for bootstrappers and indie hackers - no complicated tiers, no enterprise bloat, just clean analytics that help you make better decisions.

The Technical Bits You'll Care About

<2kb script size (your users won't even notice it)
No cookies (GDPR-friendly)
First-party data collection (no third-party trackers)

Who's This For?

🎯 Bootstrapped founders running 1-5 microsaas
🎯 Side-project builders validating ideas
🎯 Indie hackers watching their burn rate
🎯 Small agency owners managing multiple client sites

Who's This Not For?

Let's be real:

If you need enterprise features, this isn't for you
If you're doing >1M hits/month, you've outgrown us
If you need ML-powered predictions, look elsewhere

The Price Breakdown You Actually Care About

$4/month gets you:

5 websites (will increase in the future)
Unlimited hits/month
All features included
No upsells or hidden fees

Ready to Stop Overpaying?

Start your 30-day free trial at littlestats.click
Add one line of code
Stop thinking about analytics and focus on building

No credit card required. If you hate it, just don't subscribe after the trial.

A Personal Note

I built this because I needed it. If you're running small SaaS products or websites, you probably need it too.

Questions? Drop them in the comments or hit me up on

Twitter: https://twitter.com/@abdulmuminyqn.
Bluesky: https://bsky.app/profile/yaqeen.me

Would love the the community feedback on this 🫶🏾

DevCanvas: Ready for Hacktoberfest! 🎉

Abdulmumin yaqeen — Mon, 30 Sep 2024 07:11:08 +0000

The summer of open source is here! It's that magical time of year when contributions flow in like never before, and the open-source community buzzes with excitement. The month where maintainers and open source enthusiast go nuts, either from too much spam contributions, or really good contributions accelerating the software at an unprecedented speed. Either way, Devcanvas is here for it (not for the spams though 🫠).

What is DevCanvas?

DevCanvas is your go-to online frontend sandbox. It's a powerful playground where you can prototype with HTML, CSS, and JavaScript at lightning speed. Whether you're a seasoned developer or just starting out, DevCanvas provides the perfect environment to bring your frontend ideas to life.

Our Tech Stack

DevCanvas is built with modern, and the coolest technologies:

Sveltekit

SvelteKit is our framework of choice, offering a powerful and efficient way to build web applications. It provides a smooth developer experience with its component-based architecture and built-in routing system, state management, transitions and all. Contributing to DevCanvas is an excellent opportunity to experience how sweet Svelte makes building web apps.

Supabase

For our backend needs, we leverage Supabase, an open-source Firebase alternative. It provides real-time databases, authentication, instant APIs, and easy storage management. While our backend isn't open for direct contributions, understanding how we integrate with Supabase can provide valuable full-stack development insights.

Tailwind CSS

We use Tailwind CSS to style the user interface. This utility-first CSS framework allows for rapid UI development without leaving your HTML. If you're interested in frontend styling and creating responsive, beautiful interfaces, you'll have plenty of opportunities to work with Tailwind in DevCanvas.

This stack ensures a smooth, efficient development experience and a performant application. By contributing to DevCanvas, you'll gain hands-on experience with these modern technologies, enhancing your skill set and making you a more versatile developer.

Why Contribute to DevCanvas?

Learn and Grow: Perfect your skills in a real-world project.
Make an Impact: Help shape a tool used by developers worldwide.
Join a Community: Connect with like-minded developers passionate about frontend development.

How to Contribute

We're thrilled to welcome contributions from developers of all skill levels. Here's how you can get involved:

Types of Contributions

Frontend Enhancements: Help us improve the user interface and experience.
Blog Posts: Share your frontend wisdom through our blog.
Documentation: Make DevCanvas more accessible by improving our docs.
Bug Squashing: Found a pesky bug? Help us squash it!
Feature Suggestions: Have a brilliant idea? We're all ears!
Code Refactoring: Help us clean up and optimize our codebase (it currently not looking to good).

Contribution Process

Fork the repository.
Create a new branch:

  git checkout -b my-awesome-feature

Make your changes and commit:

  git commit -m "Add awesome feature"

Push to your fork:

  git push origin my-awesome-feature

Open a pull request with a detailed description of your changes.

Code Style and Best Practices

Stick to the existing code style for consistency.
Write clear, concise comments to explain your code.
Ensure your code is properly formatted and lint-free.

Need Help?

Check out our existing issues and pull requests.
Create a new issue with the "question" label for any queries.

Let's Make DevCanvas Awesome Together!

Hacktoberfest is the perfect opportunity to dive into open source. Whether you're making your first contribution or your hundredth, DevCanvas welcomes you. Let's collaborate, learn, and create something amazing!

Ready to start? Check out our GitHub repository and let's code!

Happy Hacking! 🚀

What is a subnet? | How subnetting works

Abdulmumin yaqeen — Sat, 21 Sep 2024 07:04:40 +0000

What is a subnet?

A subnet or a subnetwork just as the name suggests is - a tiny network inside of a larger network. But to be more technically accurate with the definition, we can say that “a subnet is a logical partition of an Internet Protocol (IP)”. Logical because it not a physical component, but rather a virtual.

Subnets are used to group networks into smaller chunks in other to make addressing and traffic flow easier and smoother. These groups are defined either by logic or location.

Think of this way, Imagine a town with 256 houses, numbered 0 to 255. Without organization, a delivery person might need to check every house to find the right one.

Now, let's divide this town into four subnets of 64 houses each: 0-63, 64-127, 128-191, and 192-255. If a package needs to go to house 227, the delivery person knows immediately to go to the fourth subnet (192-255) and only needs to search within those 64 houses, instead of searching the entire town, reducing the time each delivery person spends on the road (traffic).

IP addresses are like the house numbers, and subnets help routers quickly determine which part of the network to send data to, reducing traffic and improving efficiency.

How Subnets Works

The IP address as you know is a 32-bit number that uniquely identifies a network interface on a machine. An IP address is typically written in decimal digits, formatted as four 8-bit fields (octet) separated by periods. Each octet represents a byte of the IP address. This form of representing the bytes of an IP address is often referred to as the dotted-decimal format.

The bytes of the IP address are further classified into two parts:

Network part
Host part

Network part

This part specifies the unique number assigned to your network. It also identifies the class of network assigned. In the above figure, the network part takes up two bytes of the IP address.

Host part

This is the part of the IP address that you assign to each host. It uniquely identifies this machine on your network. Note that for each host on your network, the network part of the address will be the same, but the host part must obviously be different.

What separates the Network Prefix and the Host ID depends on whether the address is a Class A, B or C address.

Class A Network Numbers

A class A network number uses the first eight bits of the IP address as its "network part/id." The remaining 24 bits comprise the host part of the IP address.

The values assigned to the first byte of class A network numbers fall within the range 0-127. Consider the IP address 75.4.10.4. The value 75 in the first byte indicates that the host is on a class A network. The remaining bytes, 4.10.4, establish the host address.

Class B Network Numbers

A class B network number uses 16 bits for the network number and 16 bits for host numbers. The first byte of a class B network number is in the range 128-191. In the number 129.144.50.56, the first two bytes, 129.144, are assigned by the InterNIC, and comprise the network address. The last two bytes, 50.56, make up the host address.

Class B is typically assigned to organizations with many hosts on their networks.

Class C Network Numbers

Class C network numbers use 24 bits for the network number and 8 bits for host numbers. Class C network numbers are appropriate for networks with few hosts--the maximum being 254. A class C network number occupies the first three bytes of an IP address. Only the fourth byte is reserved for hosts.

The first byte of a class C network number covers the range 192-223. The second and third each cover the range 1- 255. A typical class C address might be 192.5.2.5. The first three bytes, 192.5.2, form the network number. The final byte in this example, 5, is the host number.

Learn more about network class:
What is a Network Class?
Network Classes - Oracle

Subnet Number

Apart from the network and host ID, a third player can comes in, and that is the subnet. If you choose to divide your network into subnets, you need to assign a subnet number for the subnet. You can maximize the efficiency of the IP address space by using some of the bits from the host number part of the IP address as another network identifier for the subnet.

A subnet mask is used to identify the part of the address that is available for use a the Subnet ID (essentially used to calculate the network and host portion of an IP address)

Subnet Mask

A subnet mask is a 32-bit number used in conjunction with an IP address that identifies the network and host portions of a network component. Let’s say you have an IP address of 192.68.75.0/24. The subnet mask would be 255.255.255.0, or in binary, 111111.111111.111111.000000. This notation provides an easy way for a network to determine which portions of an IP address can be allocated to a host, hence borrows from it to create a subnet ID.

A class A network would have a subnet mask of 255.0.0.0, B would have 255.255.0.0 and C would have 255.255.255.0.

Calculate Subnet Mask

If a subnet mask 255.255.255.0 is applied to the IP address 129.144.41.101, the result is the IP address of 129.144.41.0.

129.144.41.101 & 255.255.255.0 = 129.144.41.0 (our network ID)

In binary form, the operation is:
10000001.10010000.00101001.01100101 (IP address)
ANDed with
11111111.11111111.11111111.00000000 (subnet mask)

Note: A subnet mask would always be a stream of 1’s then 0, it can’t be interrupted. say for example 11111111.101110111.1111111.00000 is not a valid subnet mask.

As a bonus, I found this tool that can help you play around with calculating subnet masks:

Article resource on calculating subnet masks

How to calculate a subnet mask from hosts and subnet - TechTarget

To calculate the number of hosts that can be acheived on a subnet mask:

Convert the subnet mask to binary notation
Count the number of 0’s.
Raise 2 to the power of that number.

Take for Example the subnet mask:

Dotted-Decimal form: 255.255.248.0

Dotted-Binary form: 11111111.11111111.11111000.00000000

Counting, we find we have 11 zeros.

So the number of host we can have on this subnet is 2^11 = 2048.

but remember we have to subtract the network identifier and the broadcast address, which gives us 2046 usable hosts.

So the formula is 2^(number of zeros) - 2

CIDR Notation

Another way to write a subnet is using the CIDR (Classless Inter-Domain Routing) notation. The CIDR notation basically just states the number of bits the network is occupying.

CIDR notation is used to identify Network Prefix and Mask, where the subnet mask is a number that indicates the number of ones in the Mask (e.g., 172.16.2.0/24). This is also known as Variable-Length Subnet Masking and CIDR.

For example.

192.14.32.0/24 - this tells us that the first three 8-bit groups (octet) is the network ID.

A /24 subnet means that the first 24 bits are 1s, and the rest are 0s. The binary for a /24 subnet mask would be.

11111111.11111111.11111111.00000000

Thus if we’re to calculate the number of host using this CIDR notation. it would be:

2^(32-24) - 2 = 254.

“-2” because we have to remove our network id and broadcast, remember?

So what happen to packets when they pass through a subnetwork?

When you’re sending a packet to a host in a subnet, It goes through the normal networking procedure, but with some extra layers. The process happens as follows:

The packet is first checked to see if it is intended for a device within the same subnet as the sender.
The subnet mask of the source IP address is used to determine which part of the IP address represents the network and which part represents the host.
If the destination IP address belongs to the same subnet, the packet is delivered directly to the target device within the local network.
If the destination IP address belongs to a different subnet, the packet needs to be routed through a gateway or router.

In essence, when a packet passes through a subnet, it undergoes routing if it's destined for a different subnet, and direct delivery if it's destined for the same subnet. During routing, each router examines the packet and forwards it closer to its destination based on the subnet structure and routing protocols.

Final Thoughts

Subnet major benefit is in Improved Network Performance, because, when a device broadcasts a packet, it’ll reach all the network devices, burdening the network. Without proper context, broadcast packets can also spam devices within the network. This can lead to degraded network performance. By creating subnets, it limits the scope of intra-network broadcast messages to a specific subnet. This also enables efficient communication between devices in a subnet and sends a packet for routing outside the subnet if a destination address isn’t part of the subnet, leading to minimum network congestion.

Resources

Stay Subtle

I built an open source Codepen alternative - Devcanvas

Abdulmumin yaqeen — Fri, 13 Sep 2024 06:37:19 +0000

DevCanvas (devcanvas.art) began as a fun experiment born from my journey learning SvelteKit and Supabase. What started as a simple platform for storing code snippets quickly evolved into something much more cooler: an online editor that makes it easy to prototype and share ideas quickly and effortlessly.

The Evolution

A platform for storing code snippets, an idea I conceived while helping someone debug their code. The platform used to be called snippetland, but after getting deep in building and also trying to establish the name and stuff, I realized that another service named Snippetland that does the same thing (even better) exists.

Note: Devcanvas is not a competitive product, but rather a stepping stone for me into the indie hacking world. As said - "Imitate until you innovate"

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

The current form, which is a full-fledged online editor with cool features was just an experimentation. I first demoed it on twitter a long time ago.

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

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

Seeing these again, devcanvas has definitely come a really long way.

Storing snippets still exists on DevCanvas, but haven't gotten any updates for a while now.

Feature Summary

Easy prototyping
Effortless sharing
Real-time editing (i.e fast previews)
Super neat interface (from my perspective at least)

DevCanvas offers a robust set of features designed to enhance the frontend development experience. These include built-in support for popular tools like Tailwind CSS, Font Awesome, and GSAP, which can be accessed with just a click.

Devcanvas also supports SCSS, catering to developers who prefer using SCSS for their styling needs. Additionally, DevCanvas provides responsive design testing, allowing developers to see how their projects look on different devices.

Collaboration and Sharing

One of the standout features of DevCanvas is its ability to keep projects private (a feature most keep behind a paywall), with sharing options limited to those with the link.

Projects can be embedded in websites, blogs, and documentation, making it simple to showcase work or integrate it into other content. Shareable URLs and code snippets in over 50 languages further enhance Devcanvas's utility for both teaching and sharing code.

Getting Started

To start using DevCanvas, simply navigate to the website and begin creating your frontend projects. The intuitive interface allows for easy prototyping and experimentation, making it a great sandbox for developers of all levels.

Embedding Projects

Embedding your DevCanvas projects into other platforms is straightforward. Use the provided iframe code snippet and paste it into your desired location on websites, blogs, or documentation. This feature is ideal for showcasing your work or integrating interactive elements into your content.

Unique Features.

Compared to other online frontend editors, DevCanvas stands out with its built-in plugins for Tailwind CSS, Font Awesome, and GSAP, which are just a click away. This saves developers time and effort, allowing them to focus more on the creative aspects of their projects.

DevCanvas is designed with ease of use in mind, making it accessible to both beginners and experienced developers.

PWA Support

As a Progressive Web App (PWA), DevCanvas also offers offline support, allowing users to continue working even when they are not connected to the internet. This feature is particularly beneficial for developers who need to work in environments with limited connectivity.

Challenges

Got myself into a trial and error loop making the preview as fast as possible, most of the problem coming from network resource the might be brought in into the editor. Whoa, I just conceived a superb idea while writing this (would implement later).

Initially the Editor we utilize is Monaco Editor, but it really resource intensive and have a huge impact on performance in both the speed and memory consumption.

I quickly switch to Codemirror, after a feedback pointing out this issue, which is more lighter and efficient. I also kinda like the DX better than monaco editor.

Another challenge was SSR that had to be turned off, because it caused alot of problems rendering the editor, as they heavily rely on client side APIs.

Tech Stack

Devcanvas is built with Sveltekit, TailwindCSS, Supabase and no Typescript (I wish I did though).

Though not the coolest or hardest product to build or make money from, The process of building it was incredibly enjoyable, and using it is just as fun – hence the tagline, "The Editor with Super Powers".

Currently, DevCanvas is completely free to use.

Open Source

DevCanvas is proudly open source, even though, It has always just been me building this for while. I hope to get others involved in this to make DevCanvas even better and cooler.

Warning: Lots of technical debt and ugly code, but i'm working to make it better for contribution.

Have questions, suggestions, critique or feedback, I'd love to hear from you!

Visit https://devcanvas.art

Also checkout my next product CommentRig (www.commentrig.com) - A modern comment management for websites.

Stay Subtle 💛!

Do you feel the need for a comment section for your blogs?

Abdulmumin yaqeen — Thu, 12 Sep 2024 18:36:11 +0000

I'm currently building CommentRig (www.commentrig.com), a solution for comment management. While alternatives like Discus exist, I feel their UI and features may be off-putting to some users. I'm wondering: would a more flexible and seamless solution like CommentRig attract users, or are blog owners simply not interested in adding comment sections to their sites?

Rich Text Trimming Algorithm

Abdulmumin yaqeen — Fri, 26 Jul 2024 16:35:15 +0000

Triming plaintext is fairly an easy algorithm to write, and we rely on it soo much more than we think. Doing the same for rich text however is a bit of a different kettle of fish, spaces are not whitespace but instead a <b/> or linebreaks to say.

No gainsaying the fact that we can't always trust users to do the right thing, things which might seem obvious to you (since you're the ones building it), are not so obvious to them. Even worse is that they will be thinking it's not their fault, hence why we go out of our way to build features to guardrail this.

This is a problem i ran into building commentrig (Join the waitlist here) a one minute robust comment system integration into your website. I needed a way to trim out extra and unnecessary spaces/linebreaks outside and between paragraphs.

In this weeks under the hood series, I want to talk about this algorithm I came up with that helped me solve the problem, hopefully helping you in your needs as well, or helping me find fault in my solution.

The idea.

The idea is very simple, and it goes like this:

1. Create a variable to mark the top (i.e the point where text does not have any space above it)
2. Also create a list to store nodes that we're removing (removables 😅).
3. Iterate through all the nodes.
4. If the text content of the current node (x) is empty:
5. Check if the next sibling (x+1) is also empty, if true, remove the current node (x) (add it to the removables)
6. Else if it is the last index, (meaning no next sibling), remove it (add it to the removables).
7. Else if the next sibling is not empty, since the current index (x) is empty we will mark that as our top, but also mark it as a removable top. Top can only be set once.
8. Else if the text content of the current node (x) is not empty: we mark it as our top, but a none removable top. Top can only be set once.
9. After the iteration is complete, we loop over our list of removables, and remove corresponding elements from our original node. Also if our top is an element (removable top), we remove it as well, but if the set to True (non removable top) we leave it alone.

You can already tell it interesting, or you can spend some time to think it over to fully understand it. But my breakdown goes like this:

Breakdown

The first part of the algorithm, Create a variable to mark the top. The reason for this variable, is solely to remove the extra space that will be present at the top of the content, as the check will not remove anything that the next sibling is a text content. I will also explain why is that.

Moving forward is to create a list to store the nodes we're going to be removing. This solves a fundamental problem, because if we remove directly from our node while iterating, it reduces our iteration count. Hence the list. Otherwise we might as well get rid of the top variable we're creating, because we can always check with node.firstChildElement.

Next we're checking if the text content is empty, this should be it if not that, we don't want all spaces/linebreak in between paragraphs should be gone as well. At lease we will respect the intention to leave a space between paragraphs, but not excess. Hence why we're checking the next sibling is a space as well, otherwise, it should be the only space that remains.

Inside of the same condition text content of the current node (x) is empty we're checking if it is the last index or not, because the last child does not have a nextSibling. but we already know that current node is empty, so we just add it to our list of removables.

Still here text content of the current node (x) is empty, we want to find our top which will trigger if the nextSibling is not empty and if our top is not already set yet (very important line). But we know that the current node is empty, hence we set it as our top, but a removable one.

Moving our of this condition text content of the current node (x) is empty, which means that we've encountered an element the is not empty, then we set it as our top (if our top is not already set yet), but a non removable one, meaning we will just mark to as True

Once the iteration is done, we loop over our list of removables, and remove corresponding elements from our original node. Also if our top is an element (removable top), we remove it as well, but if the set to True (non removable top) we leave it alone (we can't remove that anyways).
Here is a rough illustration of how everything comes together:

Forgive my editing skills 😅.

Code

function trimCommentContent(htmlString) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlString;

    let removeList = [];
    let emptyTagNames = ['BR', 'STRONG', 'EM'];

    function removeEmptyNodes(element) {
        let elements = element.childNodes;
        let top = null;
        for (let index = 0; index < elements.length; index++) {
            const e = elements[index];
            if (e.textContent.trim() == '') {
                if (e.firstChild.tagName == 'BR') {
                    if (
                        e.nextElementSibling?.textContent.trim() == '' &&
                        emptyTagNames.some((t) => e.nextElementSibling?.firstChild.tagName == t)
                    ) {
                        removeList.push(e);
                    } else if (index == elements.length - 1) {
                        removeList.push(e);
                    } else if (!top) {
                        top = e;
                    }
                }
            } else {
                if (!top) {
                    top = true;
                }
            }
        }

        removeList.forEach((element) => {
            tempDiv.removeChild(element);
        });
        if (top && top !== true) {
            tempDiv.removeChild(top);
        }
        removeList = [];
    }

    removeEmptyNodes(tempDiv);
    return tempDiv.innerHTML;
}

You can further study the code to understand it better. I'm hoping for a feedback on potential flaws in my implementation, or even a better one.
Super hoped you learned something new as I did.

Before you go:

I’m building commentrig, a platform that allow you to integrate a robust comment system to your website. Offering a native package for all your favorite frameworks.
Join the waitlist here: commentrig.com/waitlist

Stay Super Awesome 🫶🏾.

TCP/IP - Under The Hood

Abdulmumin yaqeen — Sun, 21 Jul 2024 15:28:01 +0000

In this weeks under the hood series, i want to look into something pretty basic, something utilized at every tick of the clock. - TCP/IP.

Lots of us most have heard of the concept of TCP/IP, but this is under the hood series, where we will be looking at the technology a bit closer.

What is TCP/IP

Transmission Control Protocol/Internet Protocol is a suite of communication protocols used to connect and communicate between devices on network.

The model describes how data is transmitted over the network, ensuring the smoothest communication between networked devices. It describes how data should be broken into packets, routed, transmitted and received at the destination.

Quick Note: TCP is the specification, IP (Internet Protocol) is the addressing.

The routing and addressing part of the protocol is handled by IP (Internet Protocol). Each packets moving through the internet is bundled with an IP information, providing routers with the correct information of where the packets are to be sent or routed.

The Transmission Control Protocol (TCP) is a transport protocol, meaning it defines how data is sent and received.

TCP/IP model assigns tasks into 4 layers, simplifying the OSI model, each layers with it unique set of responsibility and contribution in ensuring a successful communication.

4 Layers of TCP

Each layer is standardized in the TCP/IP model.

1. Application layer

The topmost layer of the TCP model, it the starting point of data communication at the senders end, and the ending point at the receivers end. This is what the user typically interacts with, abstracting away the complexity of data communication.

It is responsible for providing high-level functions and protocols for applications to communicate over the network. Examples of protocols and services at this layer include HTTP, FTP, SMTP, DNS, Telnet, and DHCP.

2. Transport Layer - How the data is Transported.

Logically, it not practical to send the entire data in one go, the TCP protocol breaks down the data into chunks or packets, these are packets are then attached to a TCP header which contains several information for transmission and handling of data at the receiving end, these includes:

Source port: The port number of the sender’s application.
Destination port: the port number of the receiver’s application.
Sequence Number: Each packet is assigned a number which helps to reassemble the data at the receiving end.
Checksum: Used for error-checking of the header and data. It detects corruption during transmission.
Data Offset: This field specifies the size of the TCP header in 32-bit words. It indicates where data begins. It is important for parsing variable-length options and ensuring that the TCP header is properly aligned.
Other information includes Flags (ACK, SYN,URG, RST, …), Window size, Options, Padding among others.

TCP ensures that all packets arrive in order once transmission begins. Via TCP, the recipient will acknowledge receiving each packet that arrives. Missing packets will be sent again if receipt is not acknowledged.

3. Internet Layer

The internet layer or network layer, the is where the IP (Internet Protocol) comes in, taking up the task of routing, addressing and to make sure the packet is send to the correct destination.

Packets coming from the transport layer, where the TCP headers are attached, also get another piece of header as they pass through the Internet Layer, which helps them get to the desired destination.

The headers includes:

Version: This indicates the version of used IP address protocol, whether IPv4 or IPv6.

IP Addresses (Source and destination)

Every device or domain that connects to the Internet is assigned an IP address, and as packets are directed to the IP address attached to them, data arrives where it is needed.

An IP address is a unique string of characters that identifies each computer using the Internet Protocol (IP) to communicate over a network.

Header Length: Length of the IP header

Time to Live (TTL): Limits the lifespan of the packet in the network

Protocol: Indicates the next level protocol (e.g., TCP, UDP)

Others includes Flags, Offset, Options...

The IP header is added to the packet containing the TCP header and data, forming the complete IP packet that will be transmitted at the network layer.

4. Data Link

This layer function on metal, i.e on a hardware level, it responsible for handling the physical part of sending/receiving data via hardware such as Ethernet, Network card, wireless network and so forth.

At the data link layer, the following processes occur:

1. Framing:

The network layer packet is encapsulated into a frame. This frame includes:

Preamble: A sequence of bits to synchronize the receiver's clock.
Start Frame Delimiter: Marks the beginning of the frame.
Destination MAC Address: Physical address of the destination device.
Source MAC Address: Physical address of the source device.
EtherType/Length: Indicates the protocol of the encapsulated data or frame length.
Payload: The actual data from the network layer.

2. Frame Check Sequence (FCS):

For error detection.

3. Addressing:

The frame uses MAC (Media Access Control) addresses to identify the source and destination devices on the local network segment.

4. Error Detection:

The FCS allows the receiver to check for errors that may have occurred during transmission.

5. Flow Control:

Manages the rate of data transmission to prevent overwhelming the receiver.

6. Access Control:

In shared media, like Ethernet, the data link layer manages how devices take turns using the medium (e.g., CSMA/CD - Carrier Sense Multiple Access with Collision Detection).

Transmission over hardware:

Once the frame is prepared, it's passed to the physical layer, which handles the actual transmission over the hardware:

Encoding: The binary data is encoded into signals that can be transmitted over the physical medium.
Signaling: The encoded data is converted into electrical, light, or radio signals depending on the medium.
Physical Medium: The signals are sent over the physical connection, which could be: Ethernet cable (electrical signals), Fiber optic cable (light signals) or Wi-Fi (radio waves)
Reception: The receiving device's physical layer picks up these signals, decodes them back into binary data, and passes them up to its data link layer.
Processing: The receiving data link layer processes the frame, checks for errors, and if it's the intended recipient, passes the payload up to the network layer.

Resources:

What is TCP/IP and How Does it Work? - Avast Academy

TCP/IP Model - GeekforGeeks

TCP/IP - TechTarget

What is Transmission Control Protocol TCP/IP? - fortinet

What is the Internet Protocol? - Cloudflare

Before you go:

I'm building commentrig, a platform that allow you to integrate a robust comment system to your website. Offering a package for all your favorite frameworks.

Join the waitlist here: commentrig.com/waitlist

Stay super awesome 🫶🏾.

How Garbage Collector works - Under The Hood

Abdulmumin yaqeen — Sun, 30 Jun 2024 22:00:12 +0000

in this week's under the hood series, I want to look into something I've heard over and over again from systems engineers and seniors, - Garbage Collector. You've probably also heard of it as well - some say they love garbage collected languages, other say the are fine with It and some trash on It.

And of course, frequency of the buzz among superiors makes you curious just like myself, you also want to understand and relate to these conversations.

In this article, I will try my best to explain In simple terms, what It Is and does, why It exists and most Importantly, how It works.

Catch the previous episode here:
How SSH Works - Under The Hood

What is Garbage Collection

A garbage collector is a program that automatically free up memory space allocated to objects that are no longer needed to further the execution of the program.

In essence, Garbage collector helps manage allocation and release of memory, ensuring the application never exceeds it memory quota.

Why?

If you've never written code in languages that are not garbage collected, you might have never come across the scenario of manual memory management. I would assume you've never, and i'm already sure the thought of it is already scaring you away.

There is no gainsaying the fact that quite a lot of human errors will be involved in manual memory management, which increase bugs and decrease your application security in various ways.

Some of which are:

Double free: Double free occur when you're are trying to free up memory space that has “already been freed”. Double frees are particularly dangerous because they can corrupt the memory allocator's internal data structures, potentially leading to more severe issues like heap corruption.
Dangling pointer: A dangling pointer is a pointer that references a memory space that has been freed (deallocated) and is not set to NULL afterwards. This makes our program buggy and might crash unpredictably.
Other kinds of human errors are inevitable in such scenario. such as failing to free up memory, which becomes unreachable, memory leak is sure the right term.

These reasons might not exactly be the why Garbage Collector was first created. Either way, it first appeared around 1959, by the same guy that coined the word "Artificial Intelligence (AI)" - John McCarthy to simplify the memory management in Lisp, the language he designed. John McCarthy is often refered to has the father of "Artificial Intelligence".

Other languages soon follow suit, baking garbage collectors into the language's runtime or compiler.

Why not?

Garbage collection typically runs alongside your program, eating up a portion of CPU time and potentially impacting performance. Though the modern implementation have become quite efficient, making the performance impact minimal.

How Garbage Collection works (Tracing Algorithm)

Each implementation of garbage collection has it own distinct tweaks, but are similar in the underlying algorithm.

We will be explaining the tracing algorithm in particular, which is the go to algorithm for most garbage collection implementation.

1. Picks the best time for collection.

The program first and foremost action is to determine when to collect the garbage, it does not happen in real time, hence depends on memory allocations or intervals.
Though when a program is about to exhaust it allocated memory and new object are to be created, a priority collection is performed to free up space for the new object.

2. Checks Heap

The garbage collector then find objects that are no longer being used by examining the application's roots. An application's roots include static fields, local variables on a thread's stack, CPU registers, GC handles, and the finalize queue. Each root either refers to an object on the managed heap or is set to null.

The garbage collector then uses this list to create a graph that contains all the objects that are reachable from the roots.

3. Collects & Compact

All unreachable objects at this point are considered garbage. The collector scans the heap, looking for the addresses of the memory space they occupy, and eliminates them.
Then, it uses a momery-copying function to compact the reachable objects in memory.

Note

Memory compaction is a process where the garbage collector moves all the reachable (live) objects to one contiguous area of memory, eliminating the gaps left by unreachable (dead) objects. This process has two main benefits:

It frees up larger blocks of continuous memory, making it easier to allocate new objects.
It improves memory access efficiency by keeping related objects closer together.

4. Updates Pointers.

The final process of the collection is to correct all pointers so it points to the new locations of the reachable objects.

The heap pointer is also adjusted, positioned after the last reachable object.

Note

The heap pointer, also known as the "free space pointer" or "allocation pointer," indicates where the next object will be allocated in the managed heap. After compaction, this pointer is moved to the end of the last reachable object. This ensures that new allocations will occur in the contiguous free space, promoting efficient memory usage.

In summary, the garbage collector does:

Generations

That not the whole story though, in other to maximize efficiency and reduce performance overhead, modern algorithms includes generations.

Typically, the GC Algorithm makes several assumptions, one of which is "Newer objects have shorter lifetimes, and older objects have longer lifetimes". Hence, three (3) generations are available 1, 2, and 3.

Larger Objects occupy Generation 3, collection rounds does not come around often.
Generation 2 contains objects that survives the Generation 0 collection round, hence promoted. When Collection round comes by this generation, it includes those in 3 as well.
Generation 1 is where all newly created objects are considered. most object here don't survive the collection round, and are promoted to Generation 2 if they did.

[Illustration]

A lot of thing do happen during garbage collection, It was such an Interesting topic for me personally to read about, Super hoped you learn something new as I did. Stay tuned for more awesome topics coming to the UTH series.

Resources

Fundamentals of garbage collection - .NET | Microsoft Learn

What is garbage collection (GC) in programming?

Garbage collection (computer science) - Wikipedia

Before you go:

I'm building commentrig, a platform that allows you to integrate a robust comment system to your website. Offering a package for all your favorite frameworks.

Join the waitlist here:

https://commentrig.com/waitlist

Stay super awesome 🫶🏾.

How SSH Works - Under The Hood

Abdulmumin yaqeen — Sat, 18 May 2024 17:06:18 +0000

In this weeks under the hood episode, we will take look into something a lot of system admins and DevOps use almost daily and that is ‘SSH’ which stands for secure shell.

In case you missed the previous UTH episode where we discussed the ‘Fisher Yates’ algorithm, you can catch that here

What is SSH?

SSH as you may already know, is a network protocol used to establish a secure access to operate a remote machine, without being physically present. SSH first appearance was in the mid 1990’s, originally developed by Tatu Ylonen.

Up until it appearance, other services like Telnet, rlogin or RSH, where used to achieve this purpose. Although, they got quite a problem, i.e they transmits all information including usernames and passwords in plaintext, so it is not recommended for security-sensitive applications.

Anyone sniffing the network, would easily read all information including sensitive ones crystal clear.

This flaw, is what SSH aim to solve, a method to connect to a remote machine, where by all data going through the network is secured and encrypted.

We will look at all process involve in successfully establishing an SSH connection , and I will try my best to simplify what happens at each of these layers.

Initialization:

When you initialize an SSH connection with a SSH server, A three way (SYN, SYN-ACK, ACK) handshake occurs between the client and server to establish a TCP connection on port 22.

Handshake, if you’re not familiar with it, is a process by which the client and server ensures that both are ready for communication. In case of the three-way handshake - the client sends SYN (synchronization) with a packet containing a number X, then the server acknowledges (ACK) that, by responding with an increment X+1 i.e and also it own synchronization (SYN) packet containing a number Y, by which the client acknowledges that by sending over Y+1.

Then, a version exchange occurs between the client and server, where they verify whether or not, they are able to communicate based on there version numbers, In case of any compatibility issues.

Algorithm negotiation.

Following the version exchange, both the client and server exchange list of their supported cryptographic algorithms, and then they agree on the algorithms to use, typically the first mutually supported algorithm from each list.

Key Exchange

In this step, both client and server securely generates a session key by using mostly Diffie Hellman algorithm.

The algorithm works very simple:

Keep in mind that “value” is some mathematical thingy.

Initially both parties agree upon common value (mostly a large prime number), which is usually not needed to be secret, let say it the seed value.
Then, they generate a secret value, that they don’t exchange with each other. (a private key)
Both the seed value and the secret value are then combined together to generate a public key, and then exchanged over the network.

This can be done because, it will be very difficult to break it up into the exact values that created it. hence a third party doesn't stand a chance.

Then upon the client and server receiving each others resulting combinations, they both uses their private key, public key and the seed value to compute a shared secret.

I think one of the most simplified explanation and visual, will be that of the color mixing analogy:

Further learning

https://en.wikipedia.org/wiki/Diffie%E2%80%93Hellman_key_exchange#Cryptographic_explanation

https://www.youtube.com/watch?v=NmM9HA2MQGI&

https://youtu.be/NmM9HA2MQGI

Authentication

After both devices have successfully establish a secure communication, authenticating the client will be required in other to provide access.

In SSH, authentication can be done with:

Passwords
private/public key mechanism

While passwords are very straightforward to understand. let skip that and look at the private/public key mechanism method.

Typically what you do is:

Generate an SSH key and copy that over to your ssh server.

Then, whenever you request to connect, the SSH does something like:

The server encrypt some kind of message with your public key and sends it over.
Your SSH client uses your private key to decrypt the challenge from the server.
If the decryption is successful, it proves you possess the corresponding private key.
The server can then verify if it was indeed it original message and allow you to connect.

Transport

After a successful authentication, SSH open up a new channel for back and forth transportation, which allows for different functionality like multiplexing, tunneling, port forwarding and so forth.

Every packet going through is encrypted, also a little bit of padding is added in there just for a little more extra security.

That’s it, an overview of SSH does under the wood to establish a connection between devices.

Super hoped you learned something new as I did.

What I’m currently working on:

devcanvas.art - an online frontend editor with super powers; fast preview, plugins and an amazing library of cool frontend creations for your inspiration and learning.

Try devcanvas @ devcanvas.art/new

Fisher Yates - How the popular shuffling Algorithm Works - Under the hood series

Abdulmumin yaqeen — Fri, 10 May 2024 07:55:57 +0000

Intro

Following my curiosity, I decided to try demystify new concepts, algorithms or just how things work behind the scenes every week. And It would make a lot more sense, if I even share those journeys with the community, so I decided to take it on.

In this under the hood series, I will be sharing what I’ve learned and how some algorithms or programs, or even just any cool concept (In programming of course) we use works behind the scenes.

In future titles or writing, I might sometimes refer to Under the hood series as “UTH” series.

For this week, we will be starting simple. I will be demystifying a really popular technique or algorithm most of us use to shuffle our arrays i.e the “Fisher Yates or Knuth Algorithm”.

Fisher Yates?

Fisher Yates is not actually one person, it was coined after Ronald Fisher and Frank Yates, who developed the original idea of the algorithm, which was later modified a bit for efficiency by Donald Knuth, hence the alternate name - Knuth shuffle.

Here’s is a high level detail of how it works:

Step 1. Having all the element you want to shuffle (needs to be finite of course), create a separate list to store the shuffled elements (let call it the output list).
Step 2. Select an element X randomly from the list and add it to the output list, then mark X as visited.
Step 3. Repeat the previous step (i.e Step 2) until all elements are visited.
Step 4. End the process

… and a shuffled list has been obtained. This is definitionally the solution most of us would intuitively think of and if you’ve implemented such before, well, now you know what it is called.

Let try to visualize this with some diagram:

Array	Output list
[ F, I, S, H, E, R, Y, A, T, E, S ]	[]
[ F, I, S, H, E, R, Y, A, T, E, S ]	[S]
[ F, I, S, H, E, R, Y, A, T, E, - ]	[SI]
[ F, -, S, H, E, R, Y, A, T, E, - ]	[SIH]
[ F, -, S, -, E, R, Y, A, T, E, - ]	[SIHR]
[ F, -, S, -, E, -, Y, A, T, E, - ]	[SIHRA]
[ F, -, S, -, E, -, Y, -, T, E, - ]	[SIHRAF]
[ -, -, S, -, E, -, Y, -, T, E, - ]	[SIHRAFE]
[ -, -, S, -, E, -, Y, -, T, -, - ]	[SIHRAFEY]
[ -, -, S, -, E, -, -, -, T, -, - ]	[SIHRAFEYE]
[ -, -, S, -, -, -, -, -, T, -, - ]	[SIHRAFEYET]
[ -, -, S, -, -, -, -, -, -, -, - ]	[SIHRAFEYETS]
[ -, -, -, -, -, -, -, -, -, -, - ]

There goes the algorithm visually. Now, with all this information in check, we can implement this algorithm quite easily.

I will be doing that with JavaScript, even though it not the most elegant language for a demo.

Firstly some boilerplate:

let arr = [];

function shuffle(arr) {}

Then in our function, we will create a new array.

function shuffle(arr) {
    let shuffled_array = [];
}

we will then randomly select from our original array to the shuffled array. But before that, as seen in the description, we will not be modifying our original array whenever we pick a random value, but rather mark that spot as visited, so we will need another array to store visited indexes/positions.

Hence our solution will look more like this:

function shuffle(arr) {
    let shuffled_array = [];
    let visited = new Array(arr.length).fill(false);

    for (let i = 0; i < arr.length; i++) {
        let j = Math.floor(Math.random() * arr.length);

        while (visited[j]) {
            j = Math.floor(Math.random() * arr.length);
        }
        shuffled_array.push(arr[j]);
        visited[j] = true;
    }

    return shuffled_array;
}

Finally, Let test out our little algorithm to see if it works:

let yates = ['F', 'I', 'S', 'H', 'E', 'R', 'Y', 'A', 'T', 'E', 'S'];
let shuffled = shuffle(yates);
console.log(shuffled);

Random output I got after testing:

// ["I","A","T","Y","F","R","E","H","S","E","S"];

Not very efficient, Right?

As you can see, from the implementation we can guess that this method might not do well with large inputs, due to the step where we initialized another loop to pick another element if that randomly selected one has previously been visited.

This makes the time complexity O(n2), which is not great, adding to the fact that we introduced a bunch of new arrays. This issue is what Donald Knuth’s variant addresses.

Donald Knuth’s Solution

While following the same principle as the Fisher Yates, Knuth’s variant makes the algorithm more efficient, getting read of the additional arrays required in the process, also reducing the time complexity to just O(n).

Knuth’s variant looks like this:

Step 1. Select an element X randomly ( index between 0 and I (inclusive), where I is the current Index ) from the list and swap it position with the last element in the list.
Step 2. Repeat the previous step (i.e Step 2) for the ‘n’ number of elements in the list.
Step 3. End the process, The resulted list is our shuffled list.

Shuffling in the Knuth's variant is done from lowest index to the highest index of the array.

Original Array	Random Index	Shuffled Array
[K, N, U, T, H]	1	[N, K, U, T, H]
[N, K, U, T, H]	3	[N, T, U, K, H]
[N, T, U, K, H]	2	[N, T, H, K, U]
[N, T, H, K, U]	3	[N, T, K, H, U]
[N, T, K, H, U]	-	[N, T, K, H, U]

With all that, let see what the implementation looks like:

function shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

This version looks alot better, and also less code? yes please!

In this implementation, it is important to note that we are getting from the range of 0 - i+1, where i is the current iteration, and +1 means to include i.

That is to say, when:

i = arr.length (9 for example)
we will be picking a random number for 0 to 9;

Then when i is 8;
The range will be from 0 - 8

Then when i is 7:

Until the end.

That effectively sums up the Fisher Yates algorithm and also this weeks Under the wood episode.

Super hope you learn something new and interesting as I did.

What I’m currently working on:

DevCanvas - an online editor with super powers, fast preview, plugins and super cool library of cool Frontend creations for your inspiration.

Try devcanvas @ devcanvas.art/new

Stay super awesome 🫶🏾.