DEV Community

Cover image for Share a quick tip you learned about web dev this year
Uriel Bitton
Uriel Bitton

Posted on

Share a quick tip you learned about web dev this year

Hey everyone! Let's share one tip that we learned recently, whether its about javascript, html, css, react, etc. So beginners and even pros can learn something that they didn't before!

Tip

In JavaScript, Use event.stopImmediatePropagation() method to stop actions from a child element to bubble up to the parent.

So if for eample both parent and child execute a different action, clicking on the child element will execute its action and the action of its parent as well. Thus, by using event.stopImmediatePropagation() we can effectively prevent that.

You can comment your tip below

Can't wait to hear all of yours!

Top comments (27)

Collapse
 
ben profile image
Ben Halpern

Adaptive loading is one thing I learned that really stands out

For whatever reason when I read that post it really blew my mind.

Collapse
 
urielbitton profile image
Uriel Bitton

Awesome. Thanks for sharing Ben!

Collapse
 
vtrpldn profile image
Vitor Paladini • Edited

Oooh, I know a good one!

copy() on Chrome DevTools (other browsers probably) adds to your clipboard anything you use as an argument.

That gets really powerful when you use it with "Store as global variable". That way you can log a huge server response, for instance, and copy it from the Dev Tools console.

Here's an example:

image

Collapse
 
somedood profile image
Basti Ortiz

I use this all the time when I want to quickly do some web scraping on-the-fly. A little bit of Array#map chaining can easily automate what would have been million Ctrl + Cs.

Collapse
 
urielbitton profile image
Uriel Bitton • Edited

nice one! i'll remember this one :)

Thanks for sharing

Collapse
 
anasansari157 profile image
AnasAnsari

This is so cool

Collapse
 
adirtyshame profile image
Thomas • Edited

I recently found an article describing online/offline detection. It's as easy as:
window.addEventListener('online', () => console.log('online'))
Works for 'offline' events too. You could also check for 'navigator.onLine'

Collapse
 
urielbitton profile image
Uriel Bitton

Oh nice. I believe Dev uses a version of that to disolay th3 doodle wheb youre offline ;)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕
Thread Thread
 
urielbitton profile image
Uriel Bitton

Nice

Collapse
 
sadiqur_rahman profile image
Sadiqur Rahman • Edited

Don't exhaust yourself. Take it easy and stay focused

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

The one thing I want to share here is that it is not related to web development but jobs and works that is related to any kind of development job.

It does not matter how good a learner, strong committer, hard worker, and effective value adder, the company or organization that you are applying or working will appreciate skills that are only required by that organization.

The thing is that how many courses you have completed or how good grades you have achieved in the studies, the organizations and the recruiters will be looking for someone who has the experience of 3-5 years and someone perfect so that they can get high results in a small amount of time.

There are a few companies and organizations that are aiming to train individuals so that they can become good and professional individuals, and also they are not looking forward to creating a strong and beneficial asset for their organization as well.

Collapse
 
urielbitton profile image
Uriel Bitton

i totally agree with this. Thanks for sharing!

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

your welcome

Collapse
 
spiritupbro profile image
spiritupbro

you can clone an array in javascript with [...Array] thank you for mr awais for this i dont know his dev.to username but wherever you are thanks

Collapse
 
urielbitton profile image
Uriel Bitton

Can you show an example of how you would do that in javascript?

Thanks for sharing!

Collapse
 
spiritupbro profile image
spiritupbro

really? that was super simple bro

//lets say you have an array like this
let animal=['panda','cat','mongoose'];

//then if you want to clone it one of the method i copy from mr awais is this one
let animalClone=[...animal]

as simple as that

Thread Thread
 
urielbitton profile image
Uriel Bitton

Sweet. Definitely useful! Thanks

Thread Thread
 
spiritupbro profile image
spiritupbro

i found it here the original post

Thread Thread
 
dinsmoredesign profile image
Derek D

You can do the same with objects. Keep in mind, this doesn't deep clone. So if you intend to change the values in any way, you'll still be mutating the pointer, and by consequence, the original object.

Collapse
 
sankaragomathym profile image
Sankara Gomathy M

I learned that it is always important to use label, title, aria-label or aria-labelledby along with input fields in forms, in order to be accessible by screen readers and assistive technologies.

Collapse
 
urielbitton profile image
Uriel Bitton

Very true its becoming increasingly important to add those!

Collapse
 
fhek789 profile image
Felipe Kinoshita

Pointers aren't always a good idea!

Collapse
 
guitarino profile image
Kirill Shestakov

This was learnt from my own mistake. Don't use flexbox for everything. If you do, there's performance and code clarity considerations. Think about whether position: absolute can solve the problem just as well.

Collapse
 
sanderdebr profile image
sanderdebr

When would you prefer position: absolute over flexbox? For centering/aligning I almost allways use flexbox, also over text-align: center. Absolute positioning I use for pseudo elements or floating alerts for example.

Collapse
 
guitarino profile image
Kirill Shestakov • Edited

My logic is, if something can be done with position: absolute, do it with it. Otherwise, flexbox is ok. With position: absolute you have a lot of freedom: you can center, you can put the element almost anywhere you want and make it behave like you want based on screen size. I think absolute position is often underused. Flexbox, although flexible, might get a bit complicated and will likely reduce your performance. I created a WYSIWYG editor once, whose ancestors were all flexbox. Remember, flexbox has to relayout and repaint if any of its content changed. So, because of that, if you had a lot of content, editing it was unbearably slow and laggy after typing every character.

With position: absolute you can center as well, although not as cleanly, but you can get used to it:

.element {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}
Collapse
 
urielbitton profile image
Uriel Bitton

Mistakes sometimes turn out to be gold !
Nice and thanks for sharing :)