DEV Community: Aseer

How to Stay Relevant in the Tech World

Aseer — Sat, 23 Sep 2023 19:11:20 +0000

Overview

With time, more people are transitioning their careers into tech and more young developers are joining these communities. Although there are plenty of jobs in the tech industry, the competition is increasing day by day. Only in the last 3 years, the changes that the tech world has gone through are hard to overrate.

It's getting harder for the average dev to keep up with the competition. So I have composed some of my thoughts and opinions on how one can keep up with these changes and not feel overwhelmed by the hundreds of applications on every job post.

CSS

From what I've seen, most frontend developers take CSS too lightly and don't spend enough time honing their fundamentals. As a frontend developer, your most important skill by far is going to be that of CSS. Every aspect of frontend relies on your CSS knowledge so you MUST have some experience making pure HTML and CSS pages.

It doesn't matter if you're taking long tailwind courses or making lots of JavaScript and React projects. As long as your CSS fundamentals aren't strong, you will have a hard time coding any user interface and eventually will turn into spaghetti code. Knowing CSS will set you apart from other frontend developers. It's the trick up the sleeve of every good frontend dev.

Tailwind

This one is a bit controversial but if you know CSS you already know 95% of tailwind. If you haven't tried it yet, you probably think that you will never try it. But there's a good reason for its popularity. You will realize it only if you try it yourself a few times.

The utility classes it provides are so many that it actually ends up reducing a lot of the code for responsiveness and theming. It doesn't give you presets like the other styling frameworks such as Material UI or Bootstrap, but just enough to let you use utility classes while still exercising your creativity as if you were writing CSS.

That's what makes it different from all other frameworks. It is kind of a middle ground between pure CSS and styling frameworks, just because of the sheer number of classes it provides. And some other helpful things like baseline styles and fonts.

But still, most apps made with Tailwind's default values tend to look like a "Tailwind app". Just like you can tell when a website is made with Bootstrap, sometimes you can tell when a website is made with Tailwind. So it's not the most ideal framework for really big projects with a lot of custom branding.

Yes, I know you can change the constants to whatever styles and fonts you like but you can do the same with the other frameworks, so the question now becomes if it's easier to make your components using CSS or libraries like StyledComponents OR using frameworks and then overriding their constants. Depends on your needs.

The point is you need to get used to Tailwind and its best practices to stay relevant. Even if you don't prefer using it, even if you aren't trying to join companies that use it, knowing these tools shows your drive and passion to stay up-to-date with the trends. It shows your ability to adapt to the community and learn new things on the go. At the end of the day, it doesn't matter what tools you use. Your users only care about the final app and its efficiency, not if you used pure CSS or Tailwind.

Angular

Looks like this one isn't going anywhere for a while. Since it is more challenging than React, there are relatively fewer developers learning Angular than React, so you won't have to keep up with as much competition as you would if you were learning React.

If you just finished building the foundation of HTML, CSS and JavaScript and you're considering getting into React at this point, you should consider going down the road of Angular. The earlier you start this journey the better. Once you have some good experience with Angular and have made some personal projects, it won't be too hard to be noticed and showcase your Angular skills.

Instead, if you are a React dev these days, you have to apply to jobs that all have hundreds of applications (thousands if remote) and even if you're excellent at React, it's hard to be noticed in this crowd since everyone is claiming to be good at it.

The way I see it, Angular will always be a safe tool to be an expert at, as it is not favored by a lot of beginners/learners.

Backend

Being good at frontend isn't enough anymore. Every good dev knows at least a bit of backend as well. If you want to be relevant, just spinning up a React app and making a good UI is far from enough, thousands of other frontend devs can do that.

However, being a pure backend dev is a good goal. If you're an expert at things like Node, Express, Nest, Djano, .NET, etc. but you can't make a basic HTML and CSS page for your life, you'll probably never need to. From what I've seen, there is a huge demand for backend experts in the tech industry and there's absolutely no shortage of frontend/React developers. So going down the path of pure backend and DevOps will likely be very beneficial.

But again, make sure to have a strong foundation and work hard on the fundamentals. Make plenty of projects to showcase your skills that set you apart.

Mobile

For those who already are experts at React and want to continue being relevant, learn React Native. It also is a skill that's been very high in demand lately as there is less competition and there aren't a lot of experts in it. But be quick before this skill gets saturated as well.

Mobile devs are some of the most skilled devs I've seen and all of them have little to no problem getting jobs. The competition for mobile devs has always been lesser compared to web devs so it's wise to be one of them.

Lately, I've seen a lot of startups and smaller companies wanting cross-platform apps so the demand for React Native devs and Flutter devs is quite a lot. But if you have more time and resources on your hands, invest it into learning Kotlin or Swift and you will be pretty much set for the rest of your life. Make some projects and become an expert at those, you'll be good for a long time.

Web Dev

If you wanna continue being a web dev and stay relevant, you have to work on practicing full stack. If all you can do is make a client-side frontend with React (even if it's a really good frontend with best practices for UI/UX) there are a lot of other people who can do that, or who at least claim to do that. It's not nearly enough to make you stand out.

Start by learning Next.js and while learning that, you will automatically learn database handling and many common backend concepts. Learn about Server Side Rendering and Static Site Generation in detail and learn how and when to implement them properly. Just learning or making notes on this won't be enough, use tools like GraphQL and Gatsby to practice your learning. Make projects and showcase them on your portfolio. Explore the different BaaS tools like Firebase, Supabase, Appwrite, etc.

After this, you can move on to learning Node.js from the basics and then to creating APIs with backend frameworks. You can also learn different languages like Python and Go to make interesting projects. Anything you learn doesn't go wasted. Unless you never apply your learning and never show it. Don't do that.

WebGL

As devices are getting more efficient and cheaper, and as the WebGL libraries are getting more stable with time, it shouldn't come as a surprise that more and more companies are starting to utilize this in their websites and apps. There are more job openings for Three.js developers and Babylon.js developers than there ever were.

Invest in learning these advanced Computer Graphics tools while their resources and documentation are still undergoing so many additions, and your future self will thank you. Once our devices are powerful enough, WebGL will be more like a basic necessity that is expected from all frontend developers.

The End

Welp, that's the end of it.

There are surely some more technologies that I can't exactly talk about due to my lack of knowledge. Nevertheless, their industries seem to be growing rapidly. Some examples of these are Blockchain, Web3, Artificial Intelligence and Machine Learning concepts like LLMs, Cloud Technologies and many more.

Let me know your thoughts in the comments and if there's anything you'd like to add to this list to help out the other devs in this community.

If you like this article then consider following me on Hashnode.

NPM Error Code 4058 (ENOENT)

Aseer — Thu, 14 Sep 2023 17:04:18 +0000

The Problem

This is a rather common error that devs see from time to time when they try to install or update packages using npm. It can also appear when using npx, something like npx create-react-app.

There could be several reasons for this error, and what worked for others may not work for you.

The Solutions

Here is the stackoverflow page for the same error.
It suggests some good answers, none of which worked for me. I uninstalled and reinstalled node.js twice before realizing the problem. I just had to update npm to the latest stable version by running

npm install -g npm@latest

and it was fixed.

Alternatives

If that doesn't work for you and none of the other solutions work either, just make sure you have the latest stable version of both node and npm, and verify the environment path variables on your machine. It's a good bet to try reinstalling node at least once to make sure the setup is fine.

Follow this page for properly removing node.js and then making sure it is gone before installing again.

If you tried all of the above and the issue still persists... well, good luck and let us know what was the issue in your case so others can refer your problem and how you fixed it.

What Are Persistent Identifiers and Why We Need Them

Aseer — Sun, 10 Sep 2023 19:09:18 +0000

Overview

The concept of Persistent Identifiers is important to understand because it dictates how we store and find intel throughout the internet. It can be anything from the source code of programs to scientific research.

If we don't set up a fair and efficient system in place to track this information, it may greatly affect what we consume as the truth. Yet, most devs are unaware of this topic. This article will briefly cover all the essentials about PID and where we stand with it as of today.

What is a PID

A persistent identifier is a long-lasting reference to a digital resource. It is a unique string that provides the information to reliably identify, verify and locate data.

Without an industry-wide standard identifier, we would not be able to manage transactions and support systems between publishers and clients, which would introduce copyright issues.

To make your data easy to find, you must provide your data and metadata with a persistent identifier. They are critical for building and maintaining robust links between objects, communities and infrastructures. This is especially critical for having reliable citations in scientific literature.

A Brief History of PID

Many of the problems with the internet were due to the function of the URL, which was never meant to be an identifier but only to designate the location of objects. To overcome that difficulty, our primary task has been to design and implement a system based on a persistent identifier that would be assigned to an object when it was created and stay with it throughout its life.

Below are some implementations of PID.

People and organizations
- Open Researcher and Contributor ID (ORCID)
- Research Organization Registry (ROR)
Publications
- Virtual International Authority File (VIAF)
- International Standard Name Identifier (ISNI)
- International Standard Book Number (ISBN)
Uniform Resource Identifiers
- Archival Resource Key (ARK)
- Digital Object Identifier (DOI)
- Magnet link
- Uniform Resource Names (URNs)
- Extensible Resource Identifiers (XRIs)
- Persistent Uniform Resource Locators (PURLs)
- Software Heritage Identifiers (SWHIDs)

All of the above PID systems were designed to fill specific roles and solve certain problems, but today the most standardized and widely used system is Digital Object Identifier also known as DOI.

The DOI System is an application of the Handle System Resolver, originally developed by the Corporation for National Research Initiatives. As of today, it is run by an organization called The DOI Foundation.

Closer Look on DOI

A DOI consists of two parts:

A prefix containing the directory designation and the registrant number, both assigned by the Directory Manager.
A suffix that uniquely identifies the particular digital object.

The first two characters of the prefix represent the Directory Manager that issued it, and for the time being, all DOIs begin with 10. The second part of the prefix (.1000) defines the organization, publisher, or any rights-owner or controller registrant that purchased the DOI prefix. Everything after the slash is the suffix, a unique character string created by the publisher that defines the specific digital object.

How DOI System Operates

The DOI system attaches a persistent identifier to a digital object, thereby providing a label that will define that object for its entire life, independent of where it is located. This identifier is created along with or even before that object itself was created.

A record of that DOI, along with information on the location of its object, is then sent to a central server where the DOI data are stored. Once a DOI is registered in the DOI System server, or repository, it will be stored there virtually forever. That centrally stored data forms a resolver database that can link or resolve a DOI to its object's location.

When a user asks for a digital object (say a journal), a DOI query goes to the DOI server. That server finds the record of the DOI and the address of its object, links the two together and sends the location (most likely the URL) back to the user's browser. Now the browser can retrieve the object and show it to the user. This increases the chance of retrieval significantly in environments where URLs change a lot.

The objects reside in databases controlled and maintained by the publishers. When an object's location changes for any reason, information about that is sent by the object's owner to the central server, which automatically updates the record.

As long as the Foundation gives authority for issuing and updating DOIs only to those who will be conscientious about keeping their data up to date, the central database should retain a high degree of integrity.

DOI as a Persistent Identifier

We have seen that the DOI System provides a viable means of identifying online objects with infinite persistence across a variety of publishers. However, if too many small or mid-sized publishers are allowed to participate in the DOI System, such as libraries, the system may ultimately collapse through the accumulation of DOIs for objects that have been destroyed.

On the other hand, should such publishers not be allowed to participate in the DOI System, they will likely be forced to create other similar systems with many of the same features, and manage these systems themselves to guarantee their quality. This is not a trivial task, as illustrated by the money, complexity, and amount of work that has gone into making the DOI System.

Problems With DOI

The importance of the work done on the design of the DOI System is difficult to overrate. Solving the problem of identifying specific objects on the internet is extremely important, and the DOI System has so far helped with that solution. Still, there are some issues concerning this system.

At present, only established commercial and society publishers are purchasing publisher prefixes and so are allowed to issue DOIs. This means that most individual and small publishers are not participating directly in the DOI System, but are merely acting as end users.
Those who participate in the DOI System will need to include the overhead of detailed housekeeping of the DOIs and each item's metadata. In addition, there are the maintenance fees for the resolver database server that the Foundation will need to levy to track the traded, retired, erased, or simply forgotten identifiers.

A Modern Solution

It's clear that we should look into upgrading this system and solve these problems, or adopt a different PID System altogether.

In the modern world, when you say unique IDs, the first thing to cross the mind of a dev is Web3 since it's all about creating long unique IDs for digital stuff. The idea is to apply this concept to create PIDs and use them the way we have been using DOIs.

Below are some of the advantages of using a globally distributed content-based addressing PID system.

We would eliminate the involvement of central organizations/agencies that issue PIDs and have authority over the intelligence that they maintain. As all the digital information would never be stored in a single server, it will be truly open.
We would drastically reduce the cost of maintaining such a system. Since there are no designated servers or data centers, it will be far easier to regulate.
Every publisher will always be able to participate in this system and guarantee the quality of their work, no matter how small. There would be no need to purchase licenses for issuing PIDs and adhering to strict rules set by anyone.
This system will not have to worry about problems like the regulation of IDs for objects that have been destroyed or abandoned. Content-based addresses are extremely versatile.

The PID system known as MagnetLink already implements this to an extent, but it comes with its own limitations.

What is Content-Based Addressing?

I have explained this in detail in my Beginner's Guide to IPFS blog but in a nutshell, it's like creating a name for your digital object by using the digital object itself.

The URL of a digital object represents where on the internet it is stored. But the content-based ID is a string of characters that has been created by using the object itself as a key. If the data changes even a little, the ID also changes. It is created using hashing algorithms like SHA. This video briefly explains it.

Drawbacks Of This System

It may look like the most ideal PID system at first glance, but it's far from it. Some of the disadvantages of this system are listed below.

Mutability

As the ID directly depends on the content itself, it makes the content essentially immutable. Suppose you publish an article with an ID from a hashing algorithm that your users can then use to cite this article and find it easily on the internet. If you were to correct so much as a typo in this article, the entire ID will change and the older ID will be rendered useless.

To overcome this issue of immutability, there are other algorithms put in place that will allow users to continue using the older ID as if it was never changed. There are several designs to make content-based addressed documents mutable which we will not be discussing here, but this is a good starting point.

Security

The security of a hashing algorithm essentially depends on how advanced the technology is at a given time. For instance, the hashing algorithm MD5 is no longer useful because of how easy it is to deliberately create hash collisions, thanks to the speed of modern computers. This video explains it in detail.

Knowing this, it's worth noting that the hash algorithms that are secure today will soon be useless. In fact, it's already happening as the count of quantum computers in the world grows. They are capable of breaking many modern systems that we have relied on for decades, like RSA and SSH, forcing us to design better systems that are harder to break.

In any case, if computers advance in technology and speed, they also make it easier to implement harder algorithms which would normally have been too slow. If they make it easier to break existing systems, they also make it easier to use more complex systems that even they can't break. We would just need a renewed hashing algorithm to create our PIDs.

The End

Welp, that's the end of it.

Let me know your thoughts on these PID systems in the comments and if I left out any important details. Check out this Wikipedia page for further reading.

If you like this article then consider following me on Hashnode.

Using Multiple GitHub Accounts on One Machine with SSH

Aseer — Sun, 03 Sep 2023 20:38:29 +0000

Overview

Have you ever wanted to use more than one GitHub account on your laptop? Maybe you want to use a work account and a personal account. Or maybe you want to use accounts from different remotes such as GitHub, GitLab, and BitBucket. It's easy to set up on any operating system.

We will be using the SSH method to authenticate your remote account with Git. If you haven't used SSH before, this is a great opportunity to learn the basics because it is a very useful tool in many other fields as well.

This article is written using this video as a reference. Save it and watch it every time you get confused, that's what I did.

Adding the First Account

Open your terminal if you're on Mac or Linux. If you're on Windows, open Git Bash.
Navigate to ~/.ssh.
```
$ cd ~/.ssh
```
Generate SSH keys by running the keygen command. Give it an appropriate name, it's best to use the username of the GitHub account.
```
$ ssh-keygen -f username1
```
Skip all the options by pressing enter. Run ls to make sure two new files have been created. A public key and a private key.
Run the following command to see the public key.
```
$ cat username1.pub
```
Open GitHub and make sure you are signed in to the account for the username you just used. If you are not, then sign in to the correct account.
Navigate to Settings » SSH and GPG keys and click on New SSH key.
The title is supposed to signify the device you are using. It is only for your reference.
- If you are on something like a Dell laptop, then enter "Dell laptop". Whatever helps you identify this device.
- Open the terminal and copy the public key. Back in GitHub, paste the public key and click Add SSH key.
In the terminal, create a config file and open it in your editor.
```
$ touch config
$ code config
```
Write something like this in the config file. Replace username1 with the username you used. And replace github.com-user1 with any other abbreviation you like, such as github.com-personal but let it be short.
```
# Account for username1
Host github.com-user1
    HostName github.com
    IdentityFile ~/.ssh/username1
```
The setup is complete, let's test it. Open a private repo on your GitHub account. Click on the green Clone button and select SSH. Copy the string it gives you.
Open a new terminal in the Desktop folder. Enter the following command.
```
$ git clone git@github.com-user1:<full name of the repo>
```

💡 Remember to add -user1 right after the github.com. In the above image, I have used github.com-ele because that's what is in my config file.

🎉You did it! Now this local repo is directly connected with the GitHub repo. With all the branch information and remotes and everything. You can continue using it like you've always used GitHub.

Adding the Second Account

Follow the same steps above with the following differences.

Open the browser and sign out of the previous GitHub account. Sign in with the second account that you want to use, say your work account.
In the terminal, make sure you are in the ~/.ssh directory. There, generate the new SSH keys.
```
$ cd ~/.ssh
$ ssh-keygen -f username2
```
Run ls to make sure there are two new files. There should be at least 5 files in total. Open the config file and update the content as shown below.
```
$ ls
$ code config
```
And the config file looks like...
```
# Account for username1
Host github.com-user1
    HostName github.com
    IdentityFile ~/.ssh/username1

# Account for username2
Host github.com-user2
    HostName github.com
    IdentityFile ~/.ssh/username2
```
As earlier, replace github.com-user2 with anything you like, such as github.com-work.
Run cat username2.pub to see the new public key. In GitHub, create the SSH key just as we did before. You can use the same title if you'd like since this is only for your reference. Paste the key.
Now test it with a private repo on this account, exactly like we tested the first account. Remember to use github.com-user2 in the clone command.

🎉🎉You're using two GitHub accounts on the same machine! You can work on private repos of both accounts without feeling any difference in the way you use Git.

The End

Welp, that's the end of it.

Are there more tips & tricks to use Git productively that beginners should learn? Share them in the comments.

If you like this article then consider following me on Hashnode.

Beginner's Guide to GitHub: Part 2

Aseer — Fri, 01 Sep 2023 03:37:35 +0000

Overview

Last time we saw how to get started with GitHub and get used to all the basics. Now let's focus more on learning to collaborate with other devs.

Watch this video to see the process of opening a PR. It's the one I used myself and I followed it every time I got confused (which was A LOT). I advise you to do the same.

What is a Branch?

In a nutshell, branches are a way of organizing the changes in your code across time, so that it's easy to analyze the whole repo in the future.

During the development, there will be many features and bugs that are completely unrelated to each other. Tracking the development of these features separately on their own branches is simpler than tracking the development of everything in one single line where every feature is mixed. So we use branches to separate and organize the development of these features through time.

The above images show how much easier it is to analyze your code when you dedicate a new branch for every feature and bug fix. At a given point in time, your repo can have several branches, all responsible for their own work. Once these branches are fully developed and tested, they are merged into the main branch.

When the main updates, all the other branches pull the new code from the main to stay up-to-date, and then carry on with their work. This action of pulling code from the main is NOT shown in the above images.

Apart from segregating the development, branches can be used to protect the main source code from breaking. They can be used for authorization and security purposes and merged only after testing by the reviewers, hence not letting the new intern break production by accident on a Friday evening.

This is also what makes open source possible. Anyone with a GitHub account can open a PR to a public repo, but only the authorized personnel in that organization can review and merge it.

What is a Fork?

It is a copy of someone's repo. When you fork a repo, all the code in it along with its commit history becomes a copy and gets saved on your profile as a new repo. But it retains a connection with the original one which allows us to open pull requests in the original one.

The original repo is called the Base repo and the copy which you created is called the Fork or the Head repo. We will discuss more on this below.

Why we care

To properly open pull requests, we need to make use of both, forks and branches. Without creating a fork, we cannot directly clone and work on the original repo since we won't always have access to do this. And even if we did, it's not the safest thing to directly make updates to the original repo, even if it's on different branches.

And without creating branches, our code will be hard to follow as we saw earlier. The features will not be segregated into their own branches, meaning different bugs/features of the source code can be affected in the same pull request. This leads to a lot of confusion for everyone on the team.

What is a Pull Request?

Before learning about a pull request, let's first understand some basic terms.

Push is when you are sending or uploading your code somewhere. It could be to the GitHub remote from your laptop, or it could be to someone else's account. So here the code moves away from you.
Pull is when you are taking or downloading code from somewhere. It could be from GitHub to your laptop, or it could be from someone else's account to yours. So here, the code moves towards you.
Pull Request means that you are requesting the moderators of the original code base to pull your code. You coded something for them and you want them to accept it, so you open a request for them to pull it from you and merge it with their code base.

So here, your code is moving away from you. It's a push from your POV but it's a pull from their POV.

Let's try it out

Pick a public repository from GitHub. I'm using PyTorch for this demo.
Click the fork button at the top right corner. Click Create Fork.
You will be directed to the new repo which is created on your account. You have all the access to this, even the main branch. Right now you can only see one branch on it which is the main.
We will refer to this repo as the fork repo and the original repo as the base repo. So in our case, Electromorphous/pytorch is the fork and pytorch/pytorch is the base. As shown below, make sure you are on your fork and clone it.
After cloning, open the repo in vs code.
First, we should make a new branch. I like to follow a convention for branch names as feature-username so I will call my branch readme-aseer since I will be updating the README file in this demo.
If you're on Windows, I recommend you to use Git Bash instead of PowerShell since it always displays the branch name, so there is less chance of accidentally making changes in the wrong branch.
To do this, press ctrl + shift + p in vs code. Search "default profile" and select Git Bash.
Again use the same shortcut ctrl + shift + p and search "reload window" and press enter. This is a quick way to reload the vs code window.
Now open the integrated terminal using ctrl + ` and enter the command shown below to create your branch.
```
$ git checkout -b feature-username
```
Now we are on the new branch and we can start making changes to our files. I will open the README file and make a change in line 3.
Back in the terminal, let's review all the files we changed.
```
$ git status
```
We see that README.md has been modified. Now just as we learned in the basics, we will run the below commands to commit our changes and then push them to GitHub. When we push, we expect the changes to go to our head repo because that's the one we cloned to our machine. Not the base.
```
$ git add .
$ git commit -m "commit message here"
$ git push
```
The first two commands run fine, but we see a message for the push command. It just says that the upstream information has not been set for this branch since we just now created it. Upstream information tells the branch where exactly to push the code, so we need to set it the first time we push. We also get a command to set the upstream so we can just copy and paste it.
```
$ git push --set-upstream origin <branch-name>
```
After pushing successfully, when you go back to your fork on GitHub, you will see a message like this.

We can open the pull request right away, but let's just do a couple more things before that.
It's best practice to always make sure all your branches are in sync with the base repo.
Syncing is the process of pulling all the latest code from the base repo into your fork to make sure you have the latest. You should sync your code with the base regularly, like at least once a day.
It's important for avoiding merge conflicts so you should sync before opening a new PR.
To do this, reload the GitHub page of your fork and click on sync fork. Then click update branch. In case there is nothing to sync, you will see this.
After syncing on GitHub, we also need to sync the code on our local machine. Back in the vs code terminal, checkout to the main branch. Then run the pull command to pull the code from the remote.
```
$ git checkout main
$ git pull
```
Checkout to your other branches on which you were coding, and then pull again. This time we have to specify that we want to pull from origin main which means the main branch on GitHub.
```
$ git checkout <branch-name>
$ git pull origin main
```
You may find conflicts in your code at this point so go ahead and resolve them. Finally, we must commit and push these changes again after syncing. So run the add, commit, and push commands again.
Back in GitHub, we can finally click on the green button that says "Compare & pull request". And then finally click on "Create pull request".

That's all folks, you just opened your first pull request 🎉

The End

Welp, that's the end of it.

I know this was a lot of information to take in and it's overwhelming for all beginners to get started with pull requests. But the more you do it the easier it gets. Starting is the hard part. Make sure to drop any other tips & tricks that you have.

If you like this article then consider following me on Hashnode.

How to Properly Learn Anything For FREE!

Aseer — Tue, 29 Aug 2023 21:04:07 +0000

Overview

Coding is one of those gold mines that can potentially allow you to live the life you dream of (depending on how hard you work of course). Like most other people, I started learning to code with almost no money. I never considered buying courses from Coursera or Udemy, because I was learning everything for free so efficiently.

So here's an article talking about EXACTLY what I did to learn the things I learned without spending a dime. It will outline the process for learning the fundamentals of anything you want. And once you have built some basic projects of your own, the world is your canvas.

YouTube

Every bit of coding knowledge I have comes from here. The amount of free knowledge available on YouTube is unbelievable and I learned FAR more useful and practical skills from YouTube than college ever taught me. Many times I even find the courses on YouTube to be better than the paid ones because when creators do it for free (or for very little money), they're really passionate about teaching and the quality of their content is amazing.

How I Started

My go-to channel for learning web development is Traversy Media. I remember constantly thinking to myself "How is he uploading this for free it doesn't even feel legal" while learning from him.

This is the playlist I used for learning all the basics of HTML and CSS. First, I went through the first few videos to understand all the basics, and then I selected projects from this playlist at random and coded them along with him.

My Approach

It was a repetitive process where I followed him until the end of the project, deleted the whole project, followed him a second time, created the same project again, and deleted it again. For the third time, I wouldn't follow him. I would have understood the requirements and I would try to code it myself, mostly while recalling how he did it, but also trying to fix bugs myself by googling. If nothing helps and I'm stuck, I can always check the video to see how he did it.

Then I would repeat. Delete the project and re-code it, and delete it again and re-code it again - the entire project from scratch. From setup until the final requirement is reached. I did this as many times as it took for me to be confident that "I can make this by myself now". And then, I would pick a different project at random, from the same playlist, and do the same thing. First, follow him a couple of times, then code it myself a couple of times. Same project, every time from scratch. I did this for around 3 different projects from that playlist.

This way, I had almost mastered plain HTML and CSS and created a very strong foundation for my front-end game, I wanted to make sure I knew enough CSS before moving to JavaScript.

🛑 One extremely common mistake beginners make is getting stuck in tutorial hell. They don't realize the importance of attempting to code it yourself. Even if you bought the best, most expensive course, and if all you're doing is following the creator, you will NOT be in a position to make projects on your own. You need to realize that you are training to be independent, not to always follow someone else line-by-line. So even if you are following a paid tutorial, try this method of deleting the project and re-coding it without looking until you're sure you can do it yourself without any help.

Getting Introduced to JavaScript

After I was done with CSS, I followed the same process with this playlist for learning JavaScript. I watched the first few videos for all the basics and then picked random projects. I would create and delete them several times until I was sure I got it.

After learning javascript, I found Sass. This was a game-changer. It made CSS so much easier to write and read. This video by Ed (another amazing channel that I used a lot) is all I ever needed. It's short and to the point. It doesn't go in-depth about all the things Sass is capable of doing, but TBH I never cared about all that. Unless I'm making a big application in Vanilla javascript, those extra features feel overwhelming. Every front-end dev is expected to know the basics of Sass.

Then I wanted to create some websites without following any video. I wanted to just look at an existing design and implement it using my newfound knowledge. So I looked at some simple landing pages and created their clones. You can find inspiration for front-end designs on platforms like Dribbble and you can also search for popular websites and try to recreate them.

💡 Throughout this process, I would be constantly committing and pushing my code to GitHub, just to get used to the basic commands and the environment of using it. But this isn't necessary if you feel it can be distracting you from the actual coding. You can learn GitHub a little later once you are more comfortable with the code.

My First Website

After cloning some existing designs and publishing them on gh-pages, I felt I was finally ready to make a website all by myself from scratch, including the design phase. And what better way to test your design and coding skills than to make a portfolio?

So the first original website I ever made is my portfolio. It took longer to finish than I'd like to admit because of some annoying bugs that nobody seemed to know about, but I fixed them and I like how it turned out in the end. I use it to this day.

Learning New Stuff

I had figured out a fool-proof way to master anything I wanted. For every piece of tech I wanted to learn, I have always used the same method. I learned React.js the same way by following some YouTube tutorials and then coding them myself several times while understanding every concept.

This is the playlist I used for everything react. This channel has the most clear and concise explanations even for the most advanced of topics. I lost count of how many times I watched these videos when I got confused with react hooks.

From there on, anything I wanted to learn from scratch was a piece of cake. The more time I spent coding something, the less time I needed to learn new things.

Killing Procrastination

YouTube may be the world's largest database of free courses, but it's also the world's largest database of attention-grabbing content that wants your clicks and views. There have been many times when I open YouTube to search for something but hours pass by and I don't even remember why I opened it to begin with, while also not recalling how my time was even spent. It's the most frustrating thing to lose time.

That's why I highly encourage you to install this extension on your Chrome and Firefox browsers. I cannot explain how much it helped me stay focused and I wish I found it sooner.

Other Platforms

There are many other platforms you can use to get started with your coding journey. I personally don't care about certificates nearly as much as projects and knowledge, but if certificates are important to you, then these platforms are worth checking out.

⚠ Disclaimer

I cannot stress this enough. Don't spend forever researching about platforms and which is the best. No platform can help you if you keep getting distracted from your real goal. The most important (and scariest) part of learning is making your own projects, so get past it.

FreeCodeCamp

I'm sure you have heard of them. This is by far the most popular platform to learn coding for free. They even upload many of their courses on YouTube. They have small tasks that you can complete, projects that you can follow, and certifications you can earn. There are many reasons for their amazing reputation.

Codecademy

It's one of the most popular platforms for learning to code for free. Just like FreeCodeCamp, they also offer a variety of courses along with projects and certifications. I found their library of courses to be extremely vast and you can find a course for almost anything you're trying to learn on here.

W3Schools

You can find plenty of courses for learning the fundamental concepts of several technologies, old and new. They have a thorough explanation of each topic along with small tasks and quizzes, and they provide certifications too.

Personally, I don't find this to be the most efficient way to learn. Not to mention it can be harder to stay focused when reading and trying to understand so much theory instead of having a video explain it to you. But what works for me won't work for everyone so it's worth a try. You may find it to be more valuable.

Web.dev

It's a site created by the developers and writers of Google Chrome. It focuses on basic courses for fundamentals of web development.

Udemy

Okay, this isn't free, but it's super cheap. Most of the courses on Udemy are sold at a very low price. The value they provide far exceeds their cost. So if you're okay with investing a bit in a good course, and if spending money on a course motivates you to utilize it, then go right ahead.

I have tried some Udemy courses, but I still prefer YouTube for the popular tech stuff like Python and JavaScript :)

The End

Welp, that's the end of it.

If there's anything you'd like to add, feel free to start a discussion in the comments.

If you like this article then consider following me on Hashnode.

Creating Animated Blobs is EASY!

Aseer — Fri, 25 Aug 2023 19:10:02 +0000

Overview

Ever wanted to make a levitating blob on your webpage? Maybe you're familiar with one approach but curious about a better method. This article outlines a few optimal techniques for rendering a gooey blob on your site.

Static Blobs

First, let's talk about blobs that don't move. They are plain SVGs and they are super easy to generate.

You can just Google for "Blob SVG" and you will come across some great blob generators. The one I loved most was created by MagicPattern and you can use it by clicking here.

Simple Animated Blobs

There are several tools to generate animated blobs that will infinitely loop a simple animation. You can generate them as SVGs or as GIFs.

As SVG

This tool allows you to create beautiful blobs that you can export as SVG or copy-paste directly into your code. They are extremely efficient as they render using SVGs and not any separate asset files.

As GIF

If for some reason you prefer your blob to be animated in a GIF, you can use this tool to customize your perfect blobs and export them as GIFs.

Customized Gooey Effects

If your requirement is a little more complicated than just a floating blob with a looping animation, you can use HTML and CSS to create a gooey effect.

You can search for "Gooey effect CSS" on Google or CodePen to find a variety of inspirational code snippets.

You can also go through this website by CSS-TRICKS which discusses all the ways to create this effect in CSS while detailing the drawbacks of this method.

Gooey React

This one is for you React fanboys.

It's a library that simplifies all the work for you and abstracts the implementation of this amazing effect into a React component. It's the simplest way of creating optimized gooey effects on your React app that are fast, smooth, and very appealing to look at while also being extremely easy to implement.

It also takes care of browser compatibility issues which you may have to deal with if you want to implement this effect yourself.

Here are the docs for this library and be sure to check out the examples section for some great ideas.

The End

Welp, that's the end of it.

If you know of any more ways of creating this great effect or something that can complement this on a web app, then let us know in the comments.

If you like this article then consider following me on Hashnode.

Beginner's Guide to GitHub: Part 1

Aseer — Mon, 21 Aug 2023 13:00:30 +0000

Overview

Whether you are a complete beginner who has only heard of GitHub before, or you know a few things about it but are still not sure how to use it - this article has you covered. We will first go through a few fundamental concepts about GitHub, and then learn to create our first repository to save our code in it.

What is Git?

Git is a version control system that tracks changes in files, usually used for coordinating work among programmers. Version control systems are responsible for controlling the versions of your source code and maintaining a record of all the changes in the thing you are developing.

Git is a program that gets installed on your machine locally. It comes with apps like Git Bash and Git GUI. Since it's local to your machine, it doesn't require an internet connection. You can use it offline.

What is GitHub?

GitHub is a website. More specifically, GitHub is a cloud service provider (storing your data in data centers for free). Think of it like Google Drive but mainly for storing and tracking source code. Yes, you can store any file type on it, not just code.

It allows you to store your code on the internet along with all the versions that your code goes through. It uses git to keep track of the versions and provides you with a great user interface to store your code on the cloud as a backup, showcase your source code to the world, or collaborate with other devs.

So platforms like GitHub, GitLab, and BitBucket wouldn't exist without Git. They all make use of git at their core to track versions of your code and to help you work with other developers all around the world.

Install Git

You can install Git for free on its official website.

The installer will ask you some weird and complex questions while installing but you don't need to worry about it, just keep clicking the "next" button and leave all the settings to the defaults. After installing, open your Terminal or PowerShell and enter git --version to make sure it has been installed.

Git authentication

There are three main ways to authenticate your GitHub account properly in your machine's git.

Using your browser or GitHub mobile app: This uses your GitHub account password for signing in to Git. It is the easiest way to get going with GitHub and is best for complete beginners. But it's not the most secure.
Using Personal Access Tokens (PAT): These are long strings that act like passwords but they are much more versatile in terms of access and security. We will be following this because it's rather simple and we can focus more on GitHub.
Using SSH keys: This method has been around for a long time and has always been the more secure option. You can even authenticate and use multiple GitHub accounts on the same machine by using SSH keys. Understanding the basics of SSH will be beneficial in other fields as well. So it's best to get used to it early on. I'll write a different article on using SSH.

Creating an account

If you haven't created a GitHub account yet, go ahead and sign up. GitHub may ask you some questions and that's mostly for surveying purposes. Your GitHub experience will not be affected by them so answer freely.

Set up git

Configure a global git user for your machine. For this, open the git bash and enter the following commands, but replace the variables with your credentials:

$ git config --global user.name YOUR_GITHUB_USERNAME
$ git config --global user.email YOUR_EMAIL

Writing code

Make a new empty folder on your machine and open VScode in it. There, create a text file called temp.txt and write some stuff. You can also create a folder there and add another file inside it. It can be any type of file - txt, html, py, js, doesn't matter. Make whatever kind of file structure you want here and add as many folders and files as you like.

Let's say this is what your project looks like and these are your files, you want to store these in GitHub.

Creating your first repo

Repos (short for repositories) are at the heart of GitHub. Think of a repo as a folder in your GitHub account that contains other files and folders inside it. Usually, a single repo represents a single project. You are allowed to create as many repos as you want for free on GitHub.

First, let's create a repo and then break down everything we do.

On the homepage of GitHub, click on the green button at the top left that says "New".
Give your repo a name. It can also contain spaces but I don't recommend it. You can call it MyFirstRepo. You can also select the "private" option if you don't want this repo to be publicly visible to anyone.
You can skip all the other stuff and click "Create repository".
You will see a screen like this. Make sure HTTPS is selected and not SSH.
Back in VScode, use the ctrl + ` shortcut to open the integrated terminal. Windows users will likely see a PowerShell instance in the integrated terminal.
Copy the commands from the first option and paste them into your integrated terminal.
When the last command is run, Git will ask you to sign in to your GitHub.
You can use the Browser option but I will show how to use a PAT. If you decide to use the Browser option, then you can skip to step 12.
To generate a PAT, open github.com and click on your profile picture at the top right corner. From the sidebar menu, select "Settings". Scroll all the way down and from the menu on the left, select "Developer Settings". Under "Personal access tokens" select "Tokens (classic)".
Create a new classic token. For the note, you can say "My first token", and set the expiration. When the PAT expires, it will no longer work and you need to generate a new one and sign in with this method again.
Go ahead and check all the boxes to give yourself all the access. Finally, click "Generate token". Copy this token and paste it into the Git Window which opened earlier. Click "Sign in".
Now back in VScode, you should see the push command has successfully finished executing.
Open GitHub and go to your repositories. Open the repo which you just created. You will see only a README file in it.
To push the rest of the files, come back to the VScode terminal and enter the following commands.

git add .
git commit -m "initial commit"
git push

Now come back to your GitHub repo and reload the page. You will see your entire file structure inside this repo, along with an extra README file.

Break down

Let's understand everything we just did.

We created a new repo associated with our GitHub account. All the data and metadata of this repo will be stored in the GitHub data centers.
echo "# MyFirstRepo" >> README.md - This is just a bash command which creates a new markdown file called README.md and writes "# MyFirstRepo" to it. It has nothing to do with git.
git init - This is the most important and sensitive command to understand. It initializes your folder to identify itself as a git repository. When you run this command in a certain folder (in this case I ran it in "test"), it creates a new hidden folder called .git and you need to enable hidden files in the view of your file explorer to be able to see it. This .git folder MUST NOT be moved around. Don't touch it. It must always reside in the folder it was created in. It contains information about staged files and commits and stuff that we are not supposed to understand or modify by ourselves. DO NOT copy it or cut it and paste it somewhere else. It belongs with the code it was created for and the only way to interact with it is through git commands in the terminal. However, if you wish to disassociate this folder from Git completely and turn it into a regular folder, it is enough to delete the .git folder from it. To associate that folder with a GitHub repo again, run git init again, and then add a remote and push the code from scratch.
git add README.md - This command adds the file README.md to the staged files. Staging is done to files that are ready to be committed in the next commit.
git commit -m "first commit" - This command will commit your staged files with the message "first commit". You can think of committing as a way of saving your progress like in a videogame. You are creating a checkpoint in the lifetime of your source code where you just finished implementing a feature or fixing a bug and made sure it's working properly, so you want to save it with some message. You can revert back to this state of your source code if you need to in the future.
git branch -M main - We will not be discussing branches in detail but this command is only used for renaming the default "master" branch to "main". GitHub made this change around the end of 2020 so you will find old archived repos will probably still use "master" as the default branch.
git remote add origin https://github.com/Electromorphous/MyFirstRepo.git - This is the command responsible for connecting your local git repo to the online GitHub repo that's living on the cloud. It tells Git where to push the code on the internet (including the platform like GitHub or GitLab) and also where to pull the code from. If you run git remote -v you will see the remotes saved in your folder and they have names like "origin" and "upstream".
git push -u origin main - It's just a way of pushing the code to GitHub while simultaneously saving a configuration for this repo that the next time when you run git push it is understood that your code must be pushed to "origin main". You will not have to specify the remote name and the branch name every time, you just have to run git push and it will be pushed to the remote saved as "origin" and the branch called "main" automatically.
Next, we created a personal access token that acts like a password and gives you access to GitHub actions and used it to authenticate ourselves to Git locally.
git add . - Here the period . means everything in the current folder. So we are staging all our files because they are ready to be committed in the next commit.
git commit -m "initial commit" - Creating a new commit called "initial commit" where we are pushing all our initial code to GitHub for the first time.
git push - Pushing the committed files to our GitHub repo's main branch.

After that command, all our code is on GitHub inside a new repo. You can check the commit history of that repo on the same page.

What next?

You have to get used to the basics of GitHub. All these fundamentals you just learned are extremely important and it may take some time to understand them. But they are the foundation of the rest of the knowledge you will gain about version control. So you must use GitHub often to get used to it. How?

While you're coding your project, every time you finish a certain feature or fix a bug, remember to open the integrated terminal and run

$ git add .
$ git commit -m "YOUR COMMIT MESSAGE"
$ git push

It really only takes that much. While developing something, open the terminal and run those 3 commands every time you reach a checkpoint to save your progress.

It has the added advantage of keeping a backup of every good version of your code that was running at some point, so in case anything happens to your machine or it gets stolen, your code is safe. Plus, it's there on the internet for everyone to see.

The end

Welp, that's the end of it.

That took a lot longer than I had planned, but I've covered all the basics and hopefully given a lot more context to beginners. Remember to be patient and consistent with it and you will master these fundamental concepts in no time.

If you like this article then consider following me and subscribe to the Electroblog newsletter to be notified when I publish a new article.

Browser Extensions Every Designer Must Have

Aseer — Tue, 15 Aug 2023 20:07:21 +0000

Overview

I've always been a minimalist. I avoid cluttering my workspaces at any chance I get. This is why I am writing this small article about the few browser extensions I often rely on as a designer. I rarely feel the need for any extensions other than these. So let's check them out.

WhatFont

Have you ever visited a website and seen a font that looks immaculate? Don't you wish there was a way for you to find the name of every font you see on the internet (without having to open inspect element every time)?

WhatFont does exactly that. Once you install it in your browser, there's almost no font on any website whose name you cannot find out. Although many extensions do this, I find WhatFont to be the most easy to use.

Chrome Web Store

Firefox Add-ons

Colorpick Eyedropper

This cool extension gives you the exact hex code of any color you see on a website. It's especially useful for clone projects when you want the exact brand colors of an existing web page. I find myself using it often even when I'm building my apps.

It also has many alternatives but this is the one I find to be the easiest to use.

Chrome Web Store

Firefox Add-ons

Block YouTube Feed

This was a game-changer for me. If you are self-taught then you already know how valuable youtube is in terms of free education. Every time I need to learn something new, youtube is probably the first platform I visit to find courses on that topic.

But this is a big problem because youtube is one of those platforms that loves your attention and shows you things that are hard to ignore. Next thing you know, you wasted half the day watching cats, memes, or other things that you don't even remember.

This extension completely blocks off all videos that youtube recommends. You can even customize which feed you want to allow or block. Now if you want to open youtube for searching a topic, a playlist, or a question, you don't have to worry about getting distracted and procrastinating your life away.

Chrome Web Store

Firefox Add-ons

Tabliss

This adds a lot of personality to my browser. I can customize how I want my new tabs to look and the customization is endless. It is a great way of making your workspace truly your own and livening it up.

You can have it display random high-quality pictures from Unsplash, random gifs from GIPHY, color gradients or even static images. There are several useful widgets you can add to improve the appearance and the fonts are fully customizable based on your system fonts. It even increases my productivity with the to-do lists and notes.

Chrome Web Store

Firefox Add-ons

Dark Mode

Everyone understands the struggle of reading in light mode. I always keep a dark mode extension on my browsers. But they aren't the same for Firefox and Chrome.

Chrome Web Store

Firefox Add-ons

React Developer Tools

This is more for front-end developers than for designers. I'm sure you have heard about it, but if you code with React and never heard of React developer tools, you're missing out.

It provides a plethora of tools specifically designed to debug and optimize React applications. It also allows you to identify if a website has been coded with React or not. Watch this video to learn about optimizing a React app using React developer tools.

Chrome Web Store

Firefox Add-ons

The End

Welp, that's the end of it.

If there are any other essential browser extensions I missed, let us know in the comments and let's all get productive together!

If you like this article then consider following me on Hashnode.

Beginner's Guide to IPFS

Aseer — Mon, 14 Aug 2023 00:56:38 +0000

Overview

First, a disclaimer: I am still learning about IPFS and any feedback/tips are more than welcome. This article may be overly simplified (without jargon) so take it with a grain of salt and correct me if needed.

The reason I made this article is because IPFS and its packages have gone through a lot of changes in the last year. The resources for understanding and implementing them are all over the place. This picture perfectly encapsulates my reaction the whole time I was trying to understand the IPFS docs.

This article hopes to simplify most of the information that's currently revolving around IPFS and make it easier for you to get started with the latest version of IPFS.

What IPFS is and isn't

It stands for Interplanetary File System and that's what it is - a file system. It's a system to store and share files. It is a network of nodes (computers) connected in a peer-to-peer structure. There is no central authority like a server. This results in a decentralized network that is used to store and share data.

It is not a storage service provider, a database, or a cloud service provider. In its essence, IPFS is just a set of protocols (rules) that make up an algorithm. When implemented, it creates a decentralized file system. It can be used with databases and cloud services but it's not one by itself.

Why we care

For the most part, it aims to solve a lot of problems with the current web (web2) and it does a great job at it. You can read in detail about these problems here.

Probably the biggest solution it provides is content-based addressing. Our current web uses location-based addressing. It means when you want some data (say a web page) you have to tell the internet its location using the URL. Basically telling the internet where this web page is stored and asking for it.

In content-based addressing, instead of asking for data using its location, we ask for the data using some unique identifier that we have for that data. You can think of this identifier as a short name we just made up to refer to the data, and it directly depends on what the data is. If the data changes, its name changes.

How IPFS works

The most important role of IPFS is to create these names for the data it gets. Without these names, we won't have any way of accessing this data. From now on we will call these names as CID (content identifier). IPFS uses an algorithm called SHA256 to generate these CIDs.

SHA256 is an extremely useful algorithm that's applied in many fields. But here we care most about the following points:

It takes some data and generates a pseudo-random string. Pseudo-random means something that looks like complete gibberish but it's actually not.
These strings are called Hashes. Every piece of data is associated with a single unique hash. There should be no other data associated with the same hash. We need these hashes to be unique for every piece of data.
We also need these hashes to be of the same length regardless of the data size. Even if the data ranges from a simple text file to a whole 3-hour long movie, the length of the hashes must be the same in every case.

Sounds cool I know. How does SHA256 do this? I'm glad you asked. I have no clue. For all I know it could be a magical box given to devs by a wizard who rides unicorns. So IPFS takes these Hashes and uses them as CIDs, to identify and address data.

How to use IPFS for storing your data

Protocol Labs has created desktop applications to use IPFS. You can find an installation guide for your operating system from their docs here. The resources for using this app are widely available and it's not the scope of this article.

On the same page, you might notice a JS implementation of IPFS called js-ipfs. That's what the rest of this article is about.

What is an IPFS API/Gateway

Picture a decentralized network of nodes. The way for us to connect to this network is by using HTTP gateways. These gateways are made up of a protocol, a hostname and a port. If the gateway looks like http://localhost:5001 then the protocol is https, the hostname is localhost and the port is 5001. These gateways can be used as APIs to access the network and write/read data.

There are platforms like Infura and Quicknode which provide IPFS gateways. Sometimes they’re free (with restrictions) and sometimes they’re paid. The Infura IPFS public gateway was deprecated on 10th August 2022. That’s the reason you will find many other tutorials/resources using a gateway that looks like ipfs.infura.io but it doesn’t work the same way anymore (if at all). Learn more about it here.

I guess this is a good time to inform you of this warning if you’re thinking of making your own public gateway and exposing it.

To use these platforms and their networks, we may need to include their secret keys in the headers of our requests kinda like this.

So these HTTP gateways come in different types/formats and can look different. These gateways can also have different levels of security. You can explore everything about these gateways on this page but beginners don’t need to understand all of this.

You can also view the list of all public gateways available for you to use on this page. It is provided by Protocol Labs.

I should mention there is also a way to use the Kubo RPC API (What is an RPC API?) for building JS apps using the Go implementation but I’m not gonna go into the details of it here. We will learn to set it up with Docker further down in this article. However, I am providing detailed resources about this for interested readers:

Javascript packages for IPFS

There is a library called js-ipfs (sometimes used through ipfs-http-client) but now it’s deprecated and was very recently replaced by Helia. Most of the resources/tutorials that you find on the web for IPFS will likely be using js-ipfs, which is why all this information looks so confusing to complete beginners.

Getting started with Helia is simple and you don’t need to do much setup/configurations to see your app running. Check out the helia-examples repo and find the right starter for your stack. For react-based web apps, I recommend the helia-nextjs example.

The fundamental way to create an IPFS node using Helia is to call the createHelia() function. It will return to you a node that you can use to access a public network through the ipfs.io gateway by default. You can pass parameters to this function to use different gateways or your own local gateway (meaning localhost).

If you use the default gateway, the data you upload to the network will be accessible on https://ipfs.io/ipfs/${cid}.

How exactly you upload this data to the network using Helia is much more complicated than it was by calling a simple add() function in js-ipfs. We need to create a filesystem object and an encoder object manually. Then we can share data with IPFS… by using Uint8 iterables and asynchronous for loops 💀 (yeah I know this was supposed to be a no-jargon guide but Helia doesn’t exactly go easy on us)

Given how new Helia is, the proper documentation and support for it is probably still underway but you can find almost all the things you need as a beginner to do the basic stuff. And I will most likely create another post focusing only on Helia and everything I learn about it.

Creating a local IPFS gateway using Docker

If you are interested in running a private network for your app development and don’t want to use a public gateway then follow along.

You can also check out the IPFS docs for installing Kubo inside Docker if you prefer. The below steps are what worked for me.

First, you need to install docker on your machine. Then add the following 3 files to your working directory.

`docker-compose.yml`

version: "3"

services:
  ipfs:
    image: ipfs/go-ipfs:v0.12.1
    environment:
      IPFS_SWARM_KEY: "/key/swarm/psk/1.0.0/\n/base16/\n${IPFS_SWARM_KEY}"
    ports:
      - "5001:5001"
      - "8089:8080"
    volumes:
      - ./local-data/ipfs:/data/ipfs

`setup.sh`

if [ ! -f ".env" ]; then
    echo "Generating IPFS swarm key..."
    GENERATED_KEY=$(docker run --rm -it mattjtodd/ipfs-swarm-key-gen | tail -n 1)

    echo "Copying environment variables"
    cp .env.example .env

    echo "Setting swarm key"
    sed -i "s/IPFS_SWARM_KEY=/IPFS_SWARM_KEY=$GENERATED_KEY/" .env
fi
echo "Setup complete (delete .env and run again to redo setup)"

`.example.env`

# must be set by running setup.sh
IPFS_SWARM_KEY=

If you’re on Windows then you also need to install WSL2 along with Ubuntu, and also the terminal from the Microsoft store to connect to Ubuntu. Make sure Ubuntu is enabled in the docker desktop settings under “resources”.

If you’re on Linux or Mac then just use the terminal and save those files anywhere you want. The steps for you guys will be much simpler.

For Windows users, open the Ubuntu terminal and type code . to open VScode connected to the Ubuntu distro. There, create a temporary folder tempDir in the root and move the above 3 files into it.

In the terminal run

cd tempDir/
bash setup.sh
docker compose up

The second command will generate the swarm key and store it in a .env file.

The third command will start the environment which can be accessed from the port 5001. If the daemon doesn't run, make sure the .env file has been created and the swarm key has been set properly.

Now if you’re using ipfs-http-client, you can simply call the create() function and start using it because the default gateway in this package is http://localhost:5001 so it should connect automatically. Follow these docs to know more about it.

To know more about the docker images of IPFS, check out their page on Docker Hub. As this page says, go-ipfs is a legacy name and you can also use Kubo instead.

Something I don't yet know

Even after as much research as I did, there are a couple of things I haven't been able to fully figure out (yet) which is why I haven't discussed them in this article.

Connecting to localhost using Helia

I am looking for the right parameters to pass in the createHelia() function that will connect me to the local network instead of the default ipfs.io gateway, I have not been successful in doing this.
Connecting to a public gateway using js-ipfs

The opposite of the above problem. I have not been successful in connecting to any public gateway using js-ipfs or ipfs-http-client (both with the latest versions because there are several resources and codesandboxes using way older versions of these packages)

The end

Welp, that's the end of it.

Everything discussed in this article was just the basics of setting it up and oversimplified theory. The aim of this article was to make it easier for beginners to understand what's going on and give some context on the background of IPFS as it stands in 2023. We have barely scratched the surface of this innovative file system.

As mentioned earlier, I am completely new to the concept of Web3 and decentralization. I encourage you to get into discussions in the comments and provide any tips and feedback. If you can share any more information regarding these packages, it would be a great bonus for everyone.

Let me know if you'd like me to cover any specific topics or talk more about the black magic that is SHA256. You can also follow me and subscribe to the Electroblog newsletter to be notified when I publish a new article.