DEV Community: Mayhoral8

SO YOU WANT TO BE A WEB DEVELOPER.

Mayhoral8 — Fri, 22 Mar 2024 19:29:44 +0000

It’s 2024, and the tech ecosystem is even more vast than ever, with different fields emerging almost yearly.
From AI engineering to UI/UX writing, one that has been around for a while and is still very well in demand is WEB DEVELOPMENT/WEBSITE DEVELOPMENT.
And so arises the infamous question, ‘How can I become a web developer?’.

To become anything, you need lots of knowledge, and web development, although broad, can be easily understood.

WHAT IS WEB DEVELOPMENT?

Web development is creating, building and maintaining websites/web applications. It is divided into two major categories:

Front-end web development
Back-end web development

Front-end Development

Generally, front-end development is mainly concerned with, but is not limited to, everything a user can see on a website. Developing the layout, design and complex interactions between the elements of a website—is also called client-side development. Front-end developers work closely with the design team to deliver great User interfaces.

Technical skills/roadmap:

HTML
CSS
JavaScript
React/Vue/Angular
Git and GitHub

Back-end Development

Back-end development, on the other hand, handles the server-side-software, which includes Creating/interacting with APIs(Application Programming Interface), databases, architectures and more.
It is also called server-side development.

Technical skills/roadmap:

NodeJs/Python/PHP/Java/Ruby
SQL
AWS/MongoDB

Full-stack development is the category that combines both front-end and back-end development. A full-stack developer can create a fully functioning website by effectively using the technologies and languages required to develop the front-end and back-end of a web application.

FRONT-END VS BACK-END VS FULL-STACK: WHICH ONE?

Choosing between front-end and back-end development is generally relative to your goals or plans. There are, however, a few pointers to help make informed decisions:

Design vs Logic: People who love to engage with design elements—colours and fonts are generally encouraged to go for Front-end Development, while those who prefer to write algorithms, logic, and code architectures are typically advised to go for back-end development.

This is not to say front-end developers don't write algorithms or logic, but those with a knack for visual exploration will most likely prefer the stack.

Examples from professionals: Another way to choose the stack to go for is to learn from people who are already professionals in any of these stacks. An easy way to do this is to go to YouTube and search “A day in the life of a front-end or back-end developer”.

This will give a quick insight into what to expect; seeing what the future will look like and its alignment with one’s goals or plans.

Pay/Salary: One major factor to consider before choosing is checking out the salary range associated with that stack in the job market.

The next step is figuring out where to learn and how to learn.

It is important to note that some of these sources will require a bit of funds to access, so feel free to do further research.
They include:

Online course platforms: Coursera, Udemy, Meta, WS3 schools etc.
Youtube Tutorials: FreeCodeCamp, Brad Traversy, Netninja, etc.
Official Documentations: MDN, Python docs, etc.
Bootcamps.
Mobile Apps: WS3 schools

Best Learning Practices

Consistency and commitment.
Embrace difficulty
Join an online learning community for accountability
Document your learnings on your social media accounts, e.g. LinkedIn, X…
Build lots of projects.
Volunteer to work for free.
Learn about “imposter syndrome” and how to overcome it.

Some Learning Resources(ebooks):

In conclusion, Web development is more than just building websites; it’s about solving problems. With determination, focus and a healthy support system, you, too, can be a web developer.

Stop Bugging Me!!- A TraXpense Story.

Mayhoral8 — Fri, 12 Aug 2022 10:35:00 +0000

Who's gonna save me from this dilemma?!
I shrugged at my laptop about closing the tabs, powering off the system and slipping into the ice cold evening, but then, just like a ray of sunlight...

This is a story of discovery.

A week earlier, I had already figured out the perfect project to put a seal on my vanilla JavaScript learning.

I beamed with a smile everytime I remembered the name I had given my app,
TraXpense.

From its name, TraXpense is an app that helps keep track of a user's expenses but this wasn't your average expense tracker. I had planned to spice things up using a more detailed analytical approach with CHARTS.

I had to go online and research on how to implement charts in my web app. I discovered the lovely chart.js library that helped provide an analytical clarity to TraXpense.

I was able to represent the expenses of a user based on the category(item), and the amount(price) spent.
It was fun but not easy.
ChartJs is super cool!

Back to my story...

Two days later, I was ready to start.
I began to implement everything I had learnt so far in JavaScript including the Map, Filter, and Reduce array methods, DOM manipulation, the ChartJs library to mention but a few.

Honestly, It was quite a smooth sail for the first two days not until I encountered a bug. ⛔⛔⛔

TraXpense has a transaction section where transactions(expenses) are recorded by a user.

To add a transaction, a user is required to select an expense category, date of transaction and the amount spent; this makes up a transaction block(div),

Clicking the "Done" button then inputs (append) the transaction block (div) into the transaction section.

The implementation was fun and direct, but then something strange happened.

Clicking the done button again(second time) gets 2 div boxes appended, creating the original plus a copy of it,
third click leads to 3 div boxes,the original plus extra two copies of it and so on...
Instead of just 1 each time.

Ok, that looked like a puzzle?
Check it out 👇🏽

So, clicking the "Done" button 4 times, led to the addition of 10 div boxes (transaction) instead of just 4.
It was messy.

...picking up from where I left off at the begining of this article.

I almost gave up but then I scoured through the internet till I finally found something that looked like what I was experiencing.

EVENT PROPAGATION IN JS.

What is Event Propagation?

Event Propagation is the generation and movement of Events in the DOM tree down from the Document root to the element handling the event, and up from the element back to the Document root.

Event Propagation is divided into 3 phases.

Capturing Phase.

When an event is performed, for example a click event, the event isn't generated at the element performing the event, rather it is generated at the Document root from where it travels down the tree to the element handling the event. This phase is known as the Capturing phase. The event travels down the DOM tree to the children elements but not sibling elements.

Target Phase.

When the event generated is at the element handling the event, the event/task is then executed. This phase is known as the Target Phase.

Bubbling Phase.

After the event is executed, it then travels back up to the DOCUMENT root via the PARENT elements in a phase called the BUBBLING phase.

Ok, that was beautiful,
nice presentation,
lovely piece...
but I was still stuck!!!

Understanding event propagation just wasn't enough.

However, on the bright side ☀️, I had a better sense of direction.

Based on this new information, I intuitively tried looking for something that could prevent/stop an event from executing wrongly

Digging further, I finally found something that had the words "stop" and "propagation" in it, boom!, a wave of hope swept through me.

The "stopPropagation()" and "stopImmediatePropagation()" methods!

Without any hesitation, I hurriedly copied the syntaxes, pasted it in my event listener callback function.

Now, just like the "preventDefault()" event method, these two methods are also attached to the event parameter of the callback function of an event listener.

I then reloaded the page, to sync the browser and my code, tried adding a transaction again...

And just like that...
it worked!.
Oh my!!

Adding a transaction the second and third time still resulted in the addition of one div box each containing that specific transaction.

I jolted out of my chair, heaved a sigh and then promised to share this great feat with my children someday, yh.
I wish I was joking 🌚.

After I regained consciousness from my "yayy" moment, curiosity kicked in.

Which of the two methods worked, or did both work together, and how do they even work?🤔

Find out in the second part of this article where I share
how I was able to figure out which method worked and what these methods really do in "Event Propagation".

I'm Mayowa, a front-end developer with a knack for creating value and helping people solve problems via coding and writing.
Do well to follow me.
Twitter

LinkedIn .
Thank you.