So you have learned the basics of HTML, CSS, and JS, created a few sites, and perhaps even landed a junior role too...
Now what?
There is a plethora of information on how to get started, but the path becomes a bit blurry once you nail the basics.
This article will help you transition from a beginner to an intermediate developer, so buckle up your seat belt and get ready to learn!
1. Go Vanilla
No, we are not talking about ice creams...
This will turn out to be excruciatingly difficult at first, but ditching third-party code forces you to learn how every piece of your application works. You will need to focus on creating reusable utilities for things such as selecting elements, manipulating the DOM, and handling requests.
The development will be slow, but the goal isn't to build things quickly, but rather, to understand the building blocks of your craft.
2. Keep a Single Source of Truth (stay DRY)
Again we are not talking about drying ourselves, but keeping the code DRY (Don't Repeat Yourself).
Why is it important?
The importance of writing code that adheres to the DRY principle is that you have to refer to only one place when looking up a certain definition inside your code repository. To modify the functionality, you only have to change your code in a single place, and you are done!
3. Learn Regular Expressions
Regular Expressions (also known as RegEx) is an incredibly powerful tool in your arsenal. It is used to find matching patterns in text.
It has a host of applications, ranging from email validation
const emailValidatorRegex =
/^[^@\s]+@[^@\s]+\.[^@\s\.]{2,}$/;
const isValid = (email) =>
emailValidatorRegex.test(email);
isValid("dummyemail@gmail.com"); // valid
isValid("dummyemail@email.co"); // valid
isValid("dummyemail@gmail.co.in"); // valid
isValid("dummyemail@gmail"); // invalid
Text formatting
const normalFunction = `
function add(x, y) {
return x + y
}
`;
const formattedFunctionRegex =
/function\s*(\w+)\s*\(([^\)]+)\)/g;
const arrowFunction = normalFunction.replace(
formattedFunctionRegex,
"const $1 = ($2) =>"
);
console.log(arrowFunction);
And even HTML parsing
const markup = `
<html>
<body>
<h1>Shopping List</h1>
<h2>Produce</h2>
<ul>
<li>Celery</li>
<li>Apples</li>
</ul>
<h2>Frozen</h2>
<ul>
<li>Ice Cream</li>
<li>Hot Pockets</li>
</ul>
</body>
</html>
`;
const listParser = /(?<=<li>)(\w|\s)+(?=<\/li>)/gm;
const shoppingList = markup.match(listParser);
console.log(shoppingList);
4. Don't Get Stuck in Your Ways
Tech is an ever-changing industry. It's crucial 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 more effectively. It's good to listen to the opinions of others, but many developers fall into the trap of believing that their way is the best.
Every method has its pros and cons. Every project has its own needs, and it is essential to take those into account instead of simply following the method you know!
5. Be Business-Aware
At the end of the day, most people have bills to pay. Unless you are a hobbyist, you will probably have clients, deadlines, and budgets looming over your head!
Becoming a mid-level 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 website the world has ever seen, but it is a month late, it won't reflect on you well.
Senior developers are paid what they're paid because they're reliable. Yes, they can solve problems faster and know 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.
6. Be Patient and Keep Practicing
The tech landscape is ever-changing, but don't go chasing after every shiny new framework!
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 the future.
Programming is a long game: it takes years to become a truly competent developer, and the more you know the more you realize you don't know very much at all.
Be persistent but patient, and you will become a great developer right under your own nose! Build a strong foundation, your future self will thank you!
7. Don't Forget to Have Fun!
Don't get so caught up in making a living that you forget to live life.
It is crucial to spare some time to build your dream project regardless of the work pressure. Often people get so engrossed in their day-to-day life that they forget what lit the fire in their hearts to start development in the first place.
It is also essential to take a break from time to time, if you keep coding 24 x 7, you will definitely grow to detest it & quite naturally your productivity will plummet!
That's all folks!
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
I am moving to Bali, Indonesia today as a Digital Nomad. Follow me on Instagram to check out what I am up to.
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Top comments (0)