Preface

Essay is geared towards beginners.

The goal is to nullify Fear of Missing Out, with respect to all the technologies out there, and bring clarity and peace to the roadmap you will outline for yourself if you wish to jump into web development.

Having that in mind, words in this article outline my view and perspective I got from my work up to this point. I do not claim it is the right way or that the right way exists.

The reader has the responsibility to think as he reads and form his own opinions based on the information outlined.

Author’s experience

Over the past 8+ years, I've founded startups in the fields of Education and Sports, led teams of up to ten people, worked, as a Frontend and Backend Developer, for a product company, digital agency, and as a remote freelancer.

Nowadays I'm focused on Architecting and Developing scalable Backend systems.

For more information, check my Personal Website.

Mastering the basics

Source

Don’t get fancy with all of the new languages, frameworks, and bling-blings. Focus on what is important. The basics. Basics are the building blocks for anything advanced.

If you wish to build great products, you will need to have a solid ground with the basics. Don’t go further if you are not comfortable with variables, if statements, loops, functions…

As you go higher in complexity, all of the basic building blocks repeat themselves, only in different forms.

If you master the basics, you will recognize patterns and have less of the fear when tacking something new.

Basic Building Blocks

I’m primarily talking about:

• usage of variables,
• usage of IF statements for conditional checks in your code,
• usage of loop statements to repeat a procedure X times,
• usage of functions to group your code

Don’t underestimate the power of the strong foundation.

Don’t just look at the examples for IF statements, loops, etc., practice them! Come up with your own tasks, and implement the solution so that it feels casual and robust!

Basic Building Blocks: Naming and Grouping (Architecture)

We use languages to exchange information; mastering its use allows us to do justice when conveying our ideas to others.

If you don’t know how to name something properly, you don’t understand it. Being that your variable, function, class, or whatever.

The second lesson, to be noted here, is grouping things properly. Code that makes sense being around other code should stay there, rest should be moved to a properly named place.

Combining proper naming and grouping brings more clarity to what we are doing. Re-name and re-group things as much as it is needed for you to have a clear understanding of the code you are looking at.

Stop worrying about all the patterns out there and different programming paradigms; if you put everything in its own place (named, grouped) you are on a good track to have an understandable code.

You will lower the need to leave comments around the code if you name and group blocks of the code properly.

Think about the code you’re leaving behind

You’ll find patterns at the lowest levels that repeat themselves on a bigger scale.

Spacing, how many lines do you leave after some block of the code. How do you feel when you look at the code? Don’t just run forward, enjoy the sight, no matter how crappy it seems to you at first.

There is beauty in every sight, you can feel what’s going on, observe, learn from it, and mold it into something more beautiful.

And a few years down the road, the only thing you will feel brought you the knowledge is just that — gazing and feeling the code, deciding how do you want to leave it to resonate with other people.

Whenever you are not feeling good about the thing you see, step away, look and think about it, rewrite it, re-group it, re-name it until it evokes the feeling of “Ah, that seems pretty; that seems nice!”.

Understand the solution before writing any code

Why are we solving that problem in the first place? Is the problem clearly defined? If not, re-define it. De-compose it down to smaller blocks (again, Re-name and Re-group).

State the solution, understand every corner of the solution, it’s details and the bigger picture. Take as much time as it is needed to understand the problem and the environment, formulate potential solutions, effects of the changes to be made, …

And only then proceed to implement the solution.

Half of the work you do needs to be pondering upon the architecture.

Learn as you Build

Source

If you are just starting, learn HTML, CSS, and JavaScript. These languages allow us to build Frontend interfaces, i.e. what people see, use, and click.

Later on, you can focus on building Backend systems, which store and manipulate data your users create by using the Frontend interface you’ve built. Languages we use here are JavaScript (yes, same as for frontend), PHP, Go, …

Build simple projects while learning a new language, framework (…). It can be a TODO app, but I’m sure you can come up with your own version of it. Maybe you wanted to track the amount of food you’ve grown over the years. Implement that! It will pull you in more than any classic assignment you will have no emotional connection to. Doing a spin on an assignment you see on the Internet will give you more confidence down the road.

And even better — create something for yourself and the people around you. Once you build something that’s interesting to you, you will never look back. And eventually, others will find enjoyment in your work.

Taking a project from 0% to 100% will give you the confidence you cannot get if you are only tackling half of the problem. You will face all of the obstacles and move past them to have a working thing. Being that a TODO app or the next thing people enjoy using.

Personal Website

Build your own personal site, with the technologies stated above, and open-source it.

• Outline who you are,
• What are you learning,
• Document your progress,
• Learn new languages and frameworks,
• Build simple projects (TODO apps etc.),
• Open-source and write about them on your page.

Open-sourcing projects

Open-sourced projects expose your code publicly and keep you accountable to do the best work possible. They also serve as a connecting hub for you and like-minded people.

Anytime you update your project, your activity will be shown on your (GitHub, Gitlab, …) profile, enabling you to attract more relevant projects and people in the future.

As you build your products, write a good README.md file, document your code, and write an article per project to address challenges and solutions you’ve deployed to tackle them.

Building your products

If you want to bring your ideas to life, you will be a jack of all trades and a master of none. But that will not hold you down, because you will have your idea alive and kicking, and that is all that matters.

You need to do the best possible work, you never know when other people will join your team or when you need to fix something you did a few months ago. Make it easier for yourself, and others — plan and then implement.

If you lead a team, you have great power and even greater responsibility. This is a topic of great importance and complexity and needs to be approached with great diligence.

Plan and stick to your roadmap

Source

You can easily get lost in all the trends, trying to catch a lot that will not make sense for you in the future.

• Outline your roadmap,
• Outline who do you want to become,
• What values you hold strongly to,
• What do you want to do,
• What kind of people you want to work with,
• Reflect, adjust, and stick to YOUR roadmap.

Know what is important in the upcoming day. Prioritize your goals for the day, focus on having one task that will make that day worthwhile. The rest of the tasks are there to bring balance to the day. Reflect at the end of the day and go into the next one with clarity.

Scaling daily planning onto the week, month, and year interval, with regular reflections, will keep you on track with your roadmap.

When interacting with other people, see where you are, and pick your projects and jobs that are relevant to you and that are aligned with your roadmap. This is the way to be true to any endeavor you take.

Your life is YOU and the PEOPLE around you, and not “Web Development”

Meaning you have in your life will come from the good people around you and the interactions you have with them, and not the jobs you do.

• Don’t expect better treatment for yourself than the one you give to others. What goes around, comes around.
• The people surrounding you and their interactions with you are reflections of you. Change your ways if you wish the World to interact with you differently.
• Know that there are many things in life you can do. Know that time carves beauty if you love what you do and don’t underestimate the power of a single step, and weight of the path it continues or sets.
• You can work however you wish and however you think is the best for you; to provide as much as you can to others. If there are other things you need to be doing to have a balance in your life, do them!

Choosing your technology stack

Source

If you are going to build your own product, you wish to find the easiest-to-understand-and-prototype tools out there, that also have a great community.

If the community invested a lot of time into their website, guides, and the onboarding — I’m interested! They probably invested as much diligence into making that language or framework to be easy to use. And that’s what will help us build great things, quicker.

To be noted here, there is no reason to chase getting everything done quicker if you don’t have time to relax with a cup of coffee and have a normal and balanced life.

My technology stack

Basics:

• HTML5,
• CSS3,
• ES6 (JavaScript), TypeScript,

Frameworks:

• Frontend: Vue.js (JavaScript, TypeScript)
• Backend: Nest.js (Node.js), Laravel (PHP)

Your technology stack

Beyond the basics stated above…

Most of the people start with Frontend development. I think it’s fairly safe to say, following the principles outlined in the article, you will land a job in 3–6 months of working smart and hard. Besides HTML, CSS, and JavaScript, take a look at Angular, React, and Vue. Vue seems easiest to get started.

Developing a Backend or an API is what allows sites we created to persist data and allow others to interact with that data. Backend or an API could be built in all sorts of ways, I’ll note Node.js, Laravel, and Go here.

Postface

Thank you for reading.

There are many experts and more qualified people in the fields I’ve covered. Learn from them, their mistakes, and successes.

But most importantly, do your own mistakes and successes. Do you. We are all here, eager to see how your unique life perspective, with all bolts and twitches, pans out.

You can always pass the enthusiasm to someone else, so mentor people around you, that’s all that is needed to spark something great in someone.

If you have any questions, suggestions, or interesting challenges, feel free to leave a comment or get in touch with me.

If you wish to join an open-source project written in Vue.js and TypeScript, take a look at Habitus — Gamified Habit Tracker and Journal.

All the best,
Mario