This tweet about building projects really resonated with me:
It says a lot about how programmers build the projects we all admire. It pin-points the less glamorous parts of our activities which beginners don't always pay attention to, probably because of their lack of experience.
And that reminds me of my recent experience building a VSCode extension. The extension is meant to make me look like a genius in video tutorials and reduce my recording challenges. (But hey – I am really not a genius 😜).
The extension displays the content of a file per character whenever any key is pressed. It simulates a real-coding experience while I only pay attention to the voice recording. Wow! How did I build that? Well, let's see how it went.
It might go without saying, but you don't know how to build a new project until you've actually built it. Before I started, I didn't feel like I knew what to do and what to bring together. But I was sure of one thing – I knew how to find what I needed. Boom! The research began.
So let me tell you how I did it, so you can get better at building your own projects, too.
Break the Project Down into Smaller Units
I knew it would be hard to find a complete tutorial about what I wanted to build. But it was relatively easy to find tutorial related to each unit of the project. So, I broke the project down into these parts:
- Installing the VSCode extension.
- Getting the content of an active file.
- Breaking down the content of the file into characters. (Word => w, o, r, d).
- Listening to key-presses.
- Displaying the character one by one whenever any key was pressed.
Those are the basic things I expected the extension to be able to handle.
But wait! What if I am building a whole website? Don't worry – it's still the same process. This is what I would have done if I wanted to build a website, too.
Step 1: Break everything up into sections
For a website, your manageable sections might look like this:
- Header
- Main
- SideBars
- Footer
Step 2: Break the sections down into components
To do this, I would ask myself what I wanted in each section. And then I would list those elements out one by one.
✅ Header: I want a logo, search-box, signup/login button (or other navigation buttons) and settings in the header.
✅ Main: How many column(s) do I need? Does it have to include a left or right sidebar or a list?
✅ Footer: Do I want copyright information and navigation in the footer? Anything else?
Then I'd ask myself what other things I wanted and note them down as I thought of them.
In short, you have to list out everything you want in each section and component. But don't waste too much time on planning, because execution is key. Do it as quickly as possible because once you have a job, you'll probably hardly have any spare time to plan out your projects.
But you might be thinking, Oh, no! I am confused. How do I know all the sections and components I need as a beginner?
That is a good observation because I am not a beginner and I have had experience with of all of these components. That is why I can list them easily.
But it's ok. You will learn all these things along the line. You just need to pay attention to my VSCode extension story. :)
Write Your First Line of Code and Get Stuck
After having a clear picture of what to build, I believe the most important thing to kick-start a project is to write you first line of code and get stuck. It is pessimistic, but it helps you to become solution driven.
Instead of being worried unnecessarily because you're not sure of how to start, open you code editor of choice and write your first line of code – even if you get stuck right after that.
You first line of code will probably get deleted or improved upon several times, and that is fine. It is meant to help you overcome procrastination.
In reality, you will always be confused about how to start and what to do. Don't procrastinate because of such feelings, especially after you understand how the project should work in your head or on paper.
Don't try to understand everything before writing your first line of code. You will never understand everything. At least, no one has ever understood everything yet.
No Project is Perfect – Including Google
It is easy to want your project to be the best ever built, especially when you are a beginner. I have been there, so I know how it feels.
I was just an art student trying to solve a problem by using web technology. After I failed to hire a web developer to build the project for me because I couldn't afford the price they quoted, I decided to learn how to build it by myself.
Silly me tried to build almost every feature on the internet to make sure my project had all the features others didn't have. Anyway, I killed the project eventually.
The point I am making is don't try to build a project that can't be criticized – there is nothing like that. You need to focus on core features, not extra features that might make the project unusable.
Don't try to make a perfect project or feature – make usable and lovable projects and features instead.
Every Project is Built on Other Projects
After I had a clear picture of what I needed to build the VSCode extension, I had to look into related projects. I opened the source code of vscode-hacker-typer to study how the project handles some of the things I wanted to implement. By doing that, I learnt a bit about VSCode extension APIs.
As I was totally inexperienced in making VSCode extensions, looking into vscode-hacker-typer helped me move from being totally clueless to knowing what to research.
Knowing the name of what you want to deal with is the greatest first step to solving any problem in programming.
For instance, say that there is a feature you like on a related website but you don't know what it is called. How will you research the feature? Well, it is not rocket science.
You can take a picture of the feature and ask for its name in programming groups or ask someone. Or you can discover it name or API by diving into a related project's source code like I did. So check out projects that are similar to your project, learn from them, and copy their features.
Don't Be Afraid to Google
Before I dove into creating the VSCode extension, I didn't even know where to start – but I was sure I would be able to research my way to something reasonable. I started googling different questions:
✅ How to get the content of a VSCode active editor?
✅ How to use VSCode activeTextEditor?
✅ How to use VSCode onDidTextDocumentChange?
And so on.
Understanding what you want to build is the first step to having relevant search results especially when building a project you have never built. You need to conceptualize the idea or features you want to implement so that you can find solutions you need.
Basic googling tips that can help you get better results
Know the keywords you care about.
For example, if I want to built a landing page with HTML and CSS only, I won't search for something like "How to build a landing page". That will be bring a lot of things I don't want. It has to include the keywords I care about.
Below are examples to study:
- How to build a landing page with HTML and CSS?
- How to make a VSCode extension with Typescript (If I want Typescript)?
- How to make a VSCode extension with JavaScript?
Make sure your expected keywords are included – be specific.
Googling (How to build a landing page with HTML and CSS?) may yield a generic result. That is an issue. But it can be fixed with exact matches.
Use quotes to get exact matches in Google
For example, "How to build a landing page with HTML and CSS" will give you an outcome with the exact words in that search.
If you want to explore general ideas about building a landing page, remove the quotes.
Exclude a search term with (-)
Sometimes, you only want a result with HTML and CSS, but you're getting those with HTML, CSS and JavaScript.
You can use "- JavaScript" to exclude JavaScript. For instance, you can search "How to build a landing page with HTML and CSS - JavaScript.
This is useful when you want to exclude certain keywords.
Switch out your terms
When you want to move from one language, library, or framework to another, you need to use all you know from the first language or framework.
For instance, you want to move from JavaScript to Python and you know how JavaScript works. All your previous search terms or approaches for JavaScript will still be very useful while using Python.
You only need to switch out your specific terms – replace JavaScript with Python in all your searches. Then, you can google "Array in Python" instead of "Array in JavaScript".
You'll Always Get Stuck – and That's OK
The problem with "How to" tutorials is that they don't always inform you that getting stuck is a part of the process. The VSCode extension I have been working on is still not working because I am stuck. After thinking through every part, I was stuck while implementing the features.
The VSCode extension API I was using can't be iterated, so I have to find a way to do that. Also, vscode-hacker-typer doesn't use the approach I am using. It records keystrokes and replays them. I want to avoid recording keystrokes. I only want to display the content of an activeTextEditor character by character whenever any key is pressed.
You will always be stuck, and that is why you have to learn How to improve your debugging skills. Getting stuck is a significant part of the process. Your ability to overcome the challenges of getting stuck will determine how far you go in making projects.
Conclusion
It can be tempting to want to quit because you feel you are not as good as everyone else. The reality is that we all struggle behind the scenes. We've all solved a lot of problems through trial and error. We all feel dumb and fake because we are always building on the projects of others.
But don't forget that every amazing project has a less glamorous story you know nothing about behind it. What matters, above all, is making sure you build the project in the end.
Don't forget:
"The genius thing that we did was, we didn't give up" - Jay Z.
Ayobami loves writing history with software development and is currently helping those who are struggling to understand and build projects with HTML, CSS and JavaScript here.