DOM events... lets just jump into it.

Mariam — Mon, 12 Oct 2020 08:16:29 +0000

Before you dig deep into this, Let me explain how things will go down real quick. I will be talking about how everything went for me creating this project, then will get a bit too techy on you and talk about one particular issue that almost made me want to burn my laptop to the ground.

I will not explain everything I did, but if you are interested, I will link the repository at the end also a video of my project, to give you a better idea.

Let me take you back to a few months ago when I decided to code 5, projects out of my comfort zone to get a feel for JavaScript because, as we all know, it’s a hell of a beast to tackle, and boy, was I afraid to experiment with it and let me tell you I was dealing with so much self-doubt.

After looking around for ideas, I remembered I always wanted to try carousels, Although all the articles I read told me it was a bad idea since it is hard to make responsive and so many other reasons but I love a good challenge, so I went for it.

Let's fast-forward, I found a design that I liked and tweaked it a bit and started coding, and it was a smooth sailing well....

Until the JavaScript part started especially, DOM events and all hell broke loose.

I struggled a lot with everything and was feeling like a lost kid in a mall. Until I gave up and reminded myself asking for help is perfectly okay, and some amazing people helped me out get a basic idea of how to deal with DOM event. Therefore, got over my fear to some extent.

Now let a newbie get a bit techy on you.

When you click on a carousel item, it will add a CSS class that would expand to full size, show articles content (a close button and some extra text, etc.…).

By clicking on the close button, The class will be removed, but that did not happen because of the event bubbling up and hitting all its ancestor elements, and that would include the carousel item resulting in re-adding the class immediately.

It was an invisible issue until I caught it using the debugger.

That’s called event bubbling and honestly, I was scratching my head like wtf is that, why was it happening and how to prevent it in the future well just code a modal pop up instead of this little hack, and maybe, things will not get this complicated, but I digress.

What is event bubbling?

When an event is triggered on an element, it first runs the handlers on it then that same event will trigger across the same element's ancestors.

How to fix it ?

You need to add preventDefault and or stopPropagation into the event handlers. this stops the browser from letting the click event progress passed the event handler and hitting its parent element.

what's the difference between preventDefault and stopPropagation?

preventDefault:

A method that prevents the default behavior of an element, for example, if we use a button for navigation, it will prevent it from being clicked or allow the user to leave the page.

stopPropagation :

By default, all event handlers are registered in the bubbling phase. If you click on an element, the click event bubbles from the clicked element to the html element.

We need to use stopPropagation it will make it so that the first handler will run, but the event does not bubble any further up the chain, meaning no more handlers will be run.

We made it this far let's recap what I learned from this journey:

Asking for help does not mean you are less in anyway, in fact, it might give you a fresh perspective.
Don't overcomplicate stuff and always take the easier route.
Always plan how to code something instead of jumping into it.

If you have any feedback or a suggestion about anything in this post or about how I can improve any upcoming articles.

Feel free to comment below or contact me on Twitter!

Thank you, for reading this far. I hope you learned a thing or two.

Twitter Video | GitHub repository

I want to give a shout out to everyone who helped me.
check them out please, They have Amazing content.

@ljc_dev
@SpeakingSoftwa1
@inescodes
@thechampsmoke
@L422Y

so you want to be a web developer

Mariam — Wed, 01 Jul 2020 12:15:50 +0000

Hey, I am a newbie and only recently committed to learning web dev and today i'd like to talk about how to plan out your learning process to tackle a plethora of resources in a fast moving industry.

Well first let me tell you how things unfolded in my journey so far, after months of trying to learn everything at once while being completely overwhelmed because it was a lot and being stuck in tutorial hell and giving up and after a while, I would come back and do the same thing all over again until I decided to just dive headfirst though it was a great approach to get me coding I mean I build 6 projects so far

but it created some gaps in my knowledge of the fundamentals of CSS and that lead me to bookmark every book, article, blog post, and courses that have the word CSS in it so now I don’t want to open chrome because just looking at the bookmarks made me utterly exhausted.

Then it hit me, I’m taking everything at once and not customizing it to my learning needs so I made a plan I deleted all the bookmarks (kind of a regrettable decision) ,searched for roadmaps and took so many notes of what should I learn and then I went through each subject and test my knowledge in it and if I understand it I would prove it to myself then I can cross it off the list and move on for what’s next, cool now I know what should I focus on so I will get my resources together, organize everything out

Now we're getting into the meat and potatoes of this post

So for 1 week I study 2 or 3 subjects and take an ungodly amount of notes and next week build something focused on what I learned then go back to my notes tidy them up and because doing that helps cement new information and see that project I did in week 1 I will go back to it and add new thing I learned to it just to see how things react together.

Lastly, keep learning, find better ways to learn, stay consistent and remember just like you plan your projects you should plan your learning process.

By the way, this post by Devin Ford💻🚀
helped me out a lot in term of CSS resources check it out

If you guys have other methods on how to fill the gaps in your knowledge effectively,leave a comment or hit me up on Twitter!

Forem: Mariam