DEV Community

npm run dev
npm run dev

Posted on • Originally published at npmrundev.wordpress.com

Progressing from a beginner to intermediate developer

So, you're not a complete beginner anymore: You've built a few webpages, learned the basics of HTML, CSS and JS, and perhaps you've landed a job as a junior developer.

What now?

There is a hell of a lot of information online about what you should do as a beginner just starting out, but the roadmap becomes less clear once you've got a handle on the basics. It's not for lack of content: there are plenty of guides out there for all skill levels. Rather, the sheer amount of information, tutorials, opinions and technologies makes it impossible to know which route to go down.

Building a strong foundation

Your route to improvement will generally depend on what you want to do. With that said, you can't go wrong with simply improving your fundamental skills. Let's say you want to eventually be a React developer: Yes, learning React now would certainly get you into the ecosystem faster, but ignoring what React is built on - plain old JavaScript - can limit you in future. If you want to raise the ceiling of your potential skill level, learning the ins and outs of the base language is the way to go. You will end up with more clean, intentional code that you understand completely, and spend less time figuring out why it's not working straight away. Don't feel like you can't experiment with different technologies: Learning SASS, for example, isn't so far off CSS that it can't teach you the basics while also gaining the benefit of a preprocessor. React is still just JavaScript under the hood. You'll get the best results by pushing yourself out of your comfort zone just enough to make sure you're learning at a steady rate, while also making sure you give yourself enough time to soak in all the information.

Everything is built on core skills

If you want to be a frontend at an agency, master basic CSS and fully understand what each line of your CSS is doing. If you're a backend developer, wrap your head around the key concepts and build as much as possible yourself before reaching for a framework. If you'd rather be making frontend apps in the future, get to grips with vanilla JavaScript - ignore jQuery and any flashy framework for now. Of course, feel free to dip your toes - but remember that learning programming is a life's work, and building upwards with a poor foundation will reflect in the quality of your work.

Bear in mind that I'm a frontend, and this advice is generally geared towards other frontends. I don't think everyone should aim to become a full-stack developer; however, I think it's worth everyone having some awareness of the entire ecosystem, as even a little experience will make it easier to work in teams.

Don't take this list as the be-all and end-all to improving: how you improve depends on what you want to do. However, these are some areas that most developers could learn from in some way.

1. CSS organisation

It's not sexy, but poor CSS organisation is the most prevalent cause of headaches in web development.

How many times have you gone to change a class only to realise it's affected elements across the whole website? Or changed some HTML very slightly, only for the whole component to break?

Methodologies exist as an attempt to systematically avoid these types of issues. By following a particular syntax when writing CSS classes and following a set of rules, we can filter out most of the common problems and allow ourselves to just focus on building stuff.

Oddly, most of these methodologies aim to make you use less of certain features in CSS. While it's a decent language, most devs know that CSS can be a chaotic language. Even between different methodologies, each has their own rules and situations where they work best.

Being aware of a variety of these methodologies allows you to easy fit into any team easily, but it also gives inspiration for further refining your CSS development. And above all, you'll have less headaches! No methodology is perfect, so sometimes you'll want to adapt your method for a certain project. CSS organisation is far from a 'solved' problem, as the flexibility of the languages allows plenty of room for new approaches.

Utility-first frameworks have become very popular lately, especially amongst React and Vue developers. I've written quite a bit about Tailwind CSS, which is just one flavour of the utility-first ideology, but I wouldn't recommend any beginner to jump into a framework such as Tailwind, Bootstrap or anything that packages CSS classes for you until you deeply understand vanilla CSS and SCSS. If you want to give it a go, try to think about how to keep your CSS DRY using these technologies.

2. Go CSS-only

Here's a fun exercise: build a functional navigation, with hamburger button and multi-level sliding mobile menu without a single line of JavaScript. It doesn't really matter how it looks, just that it functions as you'd expect a mobile nav to. It's surprising how much use you can squeeze out of plain old CSS for simple things such as toggling a 'class'. You can use sibling selectors ~ or + alongside checkbox:checked to create toggles and trigger them using a <label>.

CSS is much more performant than JavaScript, so while you shouldn't go overboard with these hacks it's good to be aware of performance shortcuts like these. In general, even if JavaScript is unavoidable a good rule is to keep it as minimal as possible without affecting functionality. Usually the simpler something is, the less there is that can go wrong with it. A common example is hover states: You COULD use the mouseover event to add a class that makes a dropdown visible, but in most cases there's no need as you could use a nested hover state which would be easier on the user's hardware.

How about no images? The background property is surprisingly powerful: it can be used to create complex shapes similar to SVG. Alvaro Montoro even created Homer Simpson using just one element.

3. Single source of truth

In all your programming, you should aim to have a single source of truth for everything. This is the core idea behind DRY - Don't Repeat Yourself - programming. In order to not repeat yourself, you need to define everything only once. This plays out in different ways depending on the context.

In CSS, you want to store all the values that appear time and time again in variables. Colors, fonts, max-widths, even spacing such as padding or margins are all properties that tend to be consistent across an entire project. You can often define variables for a stylesheet based on the brand guidelines, if you have access. Otherwise it's a good idea to go through the site designs and define your variables before starting.

In JavaScript, every function you write should only appear once. If you need to reuse it in a different place, isolate it from the context you're working in by putting it into it's own file. You'll often see a util folder in JavaScript file structures - generally this is where you'll find more generic functions used across the app.

Variables can also be sources of truth. It's a good idea to put global constants - variables that will never change that are used across the app - into their own file for organisation. Some developers name global constants with CAPITALISED_SNAKE_CASE to differentiate them from regular variables.

In a similar vein, get used to using environment variables. These are global constants that change depending on the environment: Say you have a 'development' API for testing and a 'live' API for production - you can define both in separate files, and when the time comes to build your app you can ask it to build for either a 'development' or a 'production' environment. This means you don't need to change a load of variables when releasing an app - super helpful!

3. Go vanilla

Forget jQuery or any other libraries you might normally reach for. Try building your sites using no external packages, just vanilla JS. Feel free to compile your ES6/7 if you need to, but that's it.

You'll find this difficult at first, but eschewing 3rd-party code forces you to learn how every piece of your application works. Focus on creating reusable utilities for things such as selecting elements, manipulating the DOM, and handling requests.

Development will be slow, but the goal isn't to build things quickly: Rather, you should spend plenty of time on the research to get these things to understand the building blocks of your craft.

Learn string and array methods, how to work with objects, using Promises and so on. Doing daily exercises with a service such as Exercism is a great way to learn each method, but using them in context is what will take you from beginner to expert level. You'll see that there are many ways to skin a cat, and how you choose to solve a particular problem will depend on the situation as well as (to an extend) your personal style. For example, some people prefer to handle promises using .then().catch(), but I would always use async/await as I find the syntax much tidier. There are people who will argue you should use x over y, but it's a good idea to understand every possible way of doing something since you don't know if you'll be dropped into a project with legacy code or if the previous developer just had a different way of doing things.`

How about building your own reactive framework? Watch Tejas Kumar's fantastic talk about creating a rudimentary React clone. You don't need to build it, just try to understand it. You'll find that the technologies you use every day, while undoubtedly complex, aren't so impossible to understand as they first appear.

4. Manage your own server

Although DevOps and servers can be scary to a beginner, having a small server to mess around with will help to introduce you without any pressure. Start small and build up: You don't need to learn everything straight away: exposure to concepts and configurations surrounding your server will gradually engrain the knowledge in your head.

Even if you're solely a frontend or aren't interested in running your own websites, understanding things like htaccess, robots.txt and deployment pipelines will make you much more desirable to employers. You will almost definitely need to deploy to a server at some point, so getting the learning in ahead of time will put you a step ahead of the competition. Having a platform to showcase your ideas opens up limitless possibilities, improves your knowledge, and it's just good fun.

5. Learn regex

Learning the regex for your language of choice opens up a whole host of opportunities including web scraping, which allows you to use any web page as your data source. It also allows you to write complicated logic for strings, such as validating form content, with much more brevity than when using string functions. Regex is commonly used for verifying the format of strings, for example ensuring a phone number is the correct length or a postcode/zip code is in the right format.

To get you started, here's a quick rundown of a pattern I use constantly in JavaScript (syntax may change depending on language).

// replace 'tag' with your html tag of choice
/<tag(.*?)>|<\/tag>/gi

You can use (.*?) to create a capture group that will match any content between the string to the left and right of it.

() - creates a capture group
.  - matches any single character
*  - matches the previous character infinitely e.g. 'heel'.match(/e*/) = 'ee'
?  - tells * to match the minimum number of times. You might not need this!
|  - 'or' operator

This allows you to find all instances of a particular HTML tag, regardless of the attributes assigned to it. This is really helpful for finding and replacing in your IDE, and can be adapted to fit your specific needs.

You could include another capture group to match the entire element instead of just the tags:

'<div class="something">Some content</div>'.match(/<div(.*?)>(.*?)<\/div>/gi) // matches

From here, you can go further and find all tags containing a certain class or attribute, capture the innerHtml of all tags with a certain class, find and replace all instances of a particular class to change it from a link to a button, you get the idea... You can do a lot with regex.

I recommend MDN's (javascript) cheat sheet and regex101's Regex Tester to get you started.

6. Don't get stuck in your ways

The most important thing to remember to stay competitive as a developer, is that the industry is constantly changing. There are new ideas and technologies appearing every day. Although you shouldn't be distracted by these new things, as they come just as often as they go, it's good to have some awareness of what your industry is using so you don't fall too far behind.

It's also important to accept that even if you believe in a certain way of doing something, there might be something that comes along to solve your problem even more effectively. It's good to have opinions, but many developers fall into the trap of believing that their way is the best way.

Programming is far from cut-and-dry: Everything has it's upsides and downsides. Every project has it's own needs, and the same technology or approach isn't always best for all of them.

7. Be business-aware

We all love to code, but at the end of the day most of us do this to pay the bills. We're (aside from freelancers and hobbyists) employed by businesses with clients, deadlines and budgets, and our performance in delivering projects is what reflects us more than the quality of our code - although high-quality code will generally make delivery go much smoother.

Becoming a mid-level or even senior developer is as much about what you know as it is about the responsibility you can take on and your commitment to delivering the best you reasonably can in the time you're given. If you create the best damn website the world has ever seen, but it's a month late, it won't reflect on you well. Sometimes you will need to find shortcuts or outright cut things out of a project: At the end of the day, your company only has a limited budget they can spend before they start to make a loss.

Senior developers are paid what they're paid because they're reliable. Yes, they can solve problems faster and know a hell of a lot, but they will also do what it takes to deliver a project on time. They understand which technologies and approaches will fit the needs of a project without being overkill, taking too much time or requiring too much custom code.

This isn't the most exciting or inspiring part of being a developer, but it's what the people who pay you will notice more than how efficient a function you wrote is.

8. Be patient, and practise often

I'm a big fan of the phrase, "you don't know what you don't know". Progamming is a long game: it takes years to become a truly competent developer, and the more you know the more you realise you don't know very much at all. Have humility, and just keep on building things. Push yourself further each time, try new things and refine your techniques. Forget about the destination and focus on the journey.

Eventually you will have some idea, or you'll start a project, and notice how much better you code is without even needing to think about it. You'll have the knowledge engrained into your head enough that problem solving becomes trivial, and you can use the freed-up brain power to tackle even greater problems. Be persistent but patient, and you will become a great developer right under your own nose.

Discussion (25)

Collapse
fjones profile image
FJones

Learn Regex <3

But: Don't parse HTML with it! Learn Regex with things like validation rules or unit formatting (yes, toLocaleString exists, but give it a shot anyway!). Avoid backreferences and lookaheads, focus on the basics. Regex is incredibly versatile (and often a building block for higher-level parsing and evaluation), but the common example of matching some HTML or other is really bad. Regex (as the full name suggests) is intended for regular lexical parsing. HTML (due to its nesting rules, primarily) is not regular, it's context-free (with some caveats) and as such does not lend itself too well to evaluation by regex.

Collapse
rbauhn profile image
Robin Bauhn

My favorite quote:
Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.
Not sure how accurate it is, but it is funny

Collapse
fjones profile image
FJones • Edited on

Regex is great fun and hugely intuitive - once you get it. Until then, that is very accurate. It's important to know the limitations (and boy am I happy to set up a small state machine instead for a problem that exceeds Regex), and it's important to understand that the basics are all you need.

PCRE et al have a large assortment of additional features that, ultimately, just aren't necessary. If a problem can't be solved with .+()?|[]^$, it's the wrong tool and you're setting yourself up for pain. So yeah, trying to make Regex work for a given problem is usually a problem in itself - unless you already have the solution (at least the theory) in mind.

One of the most common use cases I have found for Regex over the years is just rearranging CSV data. Statistics dumps from product management that they need rearranged, filtered, or turned into database queries. grep and sed on my local shell have seen more of my Regex than any commit or build.

Collapse
kabohajeanmark profile image
Kaboha Jean Mark

This is a really great article. Thank you so much for demystifying the journey from a beginner to intermediate Front End Web Developer.

I like how you emphasized the initial focus on fundamentals.

"We begin with the roots", 100 Eyes in Marco Polo as he taught Prince Jingum martial arts.

I was also especially intrigued with how you focused on the business side of thiings and stakeholder management. That is of utmost importance. Thanks again :)

Collapse
amn3s1a2018 profile image
Amn3s1a2018

jQuery or not jQuery, that's the question! It's on second floor in ur pyramid, and you say we should avoid it. I think if someone never used jQuery (or lodash), it's better to learn ES6/7 (or TypeScript) instead, new stuff in JS are cool, but there are still missing pieces, small things which libraries do better, so if they are already in your toolbox, don't throw them away.

Collapse
npmrundev profile image
npm run dev Author

jQuery absolutely has its uses - however, it's only sugarcoating base JavaScript. That's why I think it's more important to focus on the basics first, but there's nothing wrong with using it if the situation calls for it.

Collapse
micahlt profile image
Micah Lindley

But there's no reason to load all of jQuery anymore if you can just use ES6 JavaScript or Typescript. Using $('#el') is just a sugarcoating of document.querySelector, so really jQuery just adds bloat to a site unless you're using plugins.

Thread Thread
npmrundev profile image
npm run dev Author

That's a good point and I agree with you. It can still be useful to know as you may get dropped into a project that uses jQuery and you need to be able to work with it.
That said, jQuery seems to have been phased out a lot in general recently.

Thread Thread
micahlt profile image
Micah Lindley

That's very true - and jQuery is also (unfortunately) still used as a base for Wordpress sites which run more than half the Internet. As ES6 gets even closer to 99% browser support globally, I'm hoping that we'll see the complete eradication of jQuery.

Collapse
brunomontas profile image
Bruno Silva

This is exactly where I am now.
I can build a website with Next.js for example but I'm unsure of how to handle it for clients. For example, a client asks me for a personal blog, where do I host it? Should I use CMS so he's the one managing the content? What CMS is user-friendly for simple clients?... I'm lost with this process of where to host what, and at what cost.

Collapse
npmrundev profile image
npm run dev Author

Hi, thanks for your comment!
It sounds like a managed hosting plan would be good for your case - there's lots of companies offering this so search around for a good price. You could host it yourself or do unmanaged but it's a lot more work to learn how to do that.
I'm a fan of using WordPress for simple blogs as that's what it was originally made for. You can use the WP REST API to feed data to Next.js.
To have the front and backend on the same server you'll want to be able to create subdomains with your hosting provider so you'll need to make sure they can do that. Usually you'll be paying ~£5 a month, but if you have an unmanaged hosting plan (basically just a terminal and FTP) you can host as many websites and domains as it can handle. You probably won't need a powerful server for a few websites so the cheapest option is usually fine.
That's not much detail, but I hope it points you in the right direction! Good luck 😸

Collapse
brunomontas profile image
Bruno Silva

Since in the article you mention "managing your won server" as a step to progress from a beginner to intermediate developer, I'm very interested in that solution. Currently, I'm building a blog for a friend who is a researcher and an online portfolio for a friend who is an artist. I was thinking of hosting both of them on the same server, and creating for each some sort of back-office where they can manage their content.
Could I set up this in Docker for example?
thanks for your last reply, I feel like it gave me a direction.

Thread Thread
npmrundev profile image
npm run dev Author

You might be able to do that in docker, I'm not actually sure - the way I'm doing it on a project I'm working on is using nginx to create subdomains. If you just Google 'multiple subdomains with nginx' you should find something. Essentially you'll just have different folders for different websites so you can add your friends' domains for the frontend and then subdomains for the backends, e.g. api.your-website.com

Collapse
peter_brown_cc2f497ac1175 profile image
Peter Brown

Learn data structures and when to use which. Learn how to profile your code. Learn algorithm design. Learn SQL.

Collapse
mitaosi profile image
Qing(Jim) Lin

Personally, I think front-end developers actually don't have much opportunities to apply these data structures and algorithms knowledges during daily work. But nowdays almost every single IT employer require candidates a leetcode style coding test, so to get a job, it is inevitable to be good with solving such kind of coding tests.

Collapse
therealmecoy profile image
realMecoy🖥🖲

Great article dude👍

Collapse
obaino82 profile image
Obaino82

Fascinating 👌

Collapse
iconicspidey profile image
Iconic Spidey🕷️

thanks for this

Collapse
irfan profile image
irfan

J Query is legend ;)

Collapse
tmayank860 profile image
MAYANK TYAGI

What an insightful article you have wrote.
I really like the way you emphasize on making the fundamental strong and only then moving on learning frameworks or libraries.
Thanx for sharing!!!

Collapse
alive2020 profile image
Ice Calee

Thank you ~ this is a great article, the exact things that I need to improve right now.

Collapse
henryhkb profile image
Henry

Awesome post but the thing is if you have to cut corners just to deliver to a client you have to let them understand what is actually going into the project.

Collapse
liyanabrown profile image
Liyana Brown

Good share.

Some comments have been hidden by the post's author - find out more