DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Focus within & 4 other webdev tips you may want to know πŸš€
Mustapha Aouas
Mustapha Aouas

Posted on • Updated on

Focus within & 4 other webdev tips you may want to know πŸš€

Just a quick word before we start. I'm currently trying to grow a community over on twitter where I share technical tidbits I learned working in this industry for about 6 years now.

I would be super happy and grateful if you could follow me there! It will help me to make more content and articles every week πŸ™

Also, English is not my first language, so please let me know if you find any misspellings or awkward phrasing.

Enough talk, let's jump right in!


1. The battery API

Did you know that browsers have a Battery API that provide information about the system’s battery charge level πŸ”‹

battery API

You can listen to the level change event like this:

battery API level

Β 

2. Focus within

The :focus-within CSS pseudo-class matches an element if it or any of its descendants are focused:

Focus within

Β 

3. List markers

You can use the ::marker pseudo-element to target the marker box of a list item

List markers

Β 

4. Offset a text underline

Did you know that you can use the text-underline-offset property to specify the distance of an underlined text decoration (applied using the text-decoration property) from its original position?

text underline offset

Β 

5. Animation / transition ending event

If you have a CSS animation or transition and you want to react to its ending, Here's how to do it:

Animation or transition ending event

This can be useful if you want to perform an animation before removing and element from the DOM for example (in case you are not using a framework that already does that for you).

Β 
Β 

That's all for now. I hope you found this useful!
Leave a comment to let me know which tip (if any) you found useful ‡

Until next time, have a nice week!

Β 

What to read next?

Top comments (1)

Collapse
 
chriscthomas profile image
Chris Thomas

Great wrap up to your little series. Thanks for the info!

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!