Baby Wolf Codes

Web development tips & tricks daily!
150K+ Followers on Instagram

[Baby Wolf Codes @baby_wolf_codes]

How to style the scroll bar using the newly available scrollbar-color property in #CSS !

[Baby Wolf Codes @baby_wolf_codes]

For other values of flex-direction

[Baby Wolf Codes @baby_wolf_codes]

A visualization of different #CSS Flexbox axes

[Baby Wolf Codes @baby_wolf_codes]

Still using the traditional way to access items from the right end of an array? 🫥

Try the new .at() method. This can be used to access elements from an array similar to [] notation, but negative values can be used to access items from the right end

#javascript #frontend

[Baby Wolf Codes @baby_wolf_codes]

Here we are using it to
👉 First select the container itself when any one of the item is hovered
👉 Then the items that are not hovered

#html #css

[Baby Wolf Codes @baby_wolf_codes]

How to implement this in CSS, a thread 👇

[Baby Wolf Codes @baby_wolf_codes]

Explanation ✨

The important part is the second selector. This is possible due to a recent addition to CSS, the :has pseudo selector. This helps to select a parent when any of its children matches a particular criteria.

[Baby Wolf Codes @baby_wolf_codes]

#programming

[Baby Wolf Codes @baby_wolf_codes]

Roses are red
Violets are blue
Always use strict equals
Because '2' == 2 is true

#ValentinesDay #javascript

[Baby Wolf Codes @baby_wolf_codes]

When you come back from a holiday and your code doesn't compile:

[Baby Wolf Codes @baby_wolf_codes]

Thread 🧵

[Baby Wolf Codes @baby_wolf_codes]

Using a combination of :has() pseudo selector and the :not() pseudo selector, we can select the profiles that are not hovered, only when one of the profiles is hovered

[Baby Wolf Codes @baby_wolf_codes]

#CSS Hover Effect

Thread 🧵

[Baby Wolf Codes @baby_wolf_codes]

I have always wondered which of the two text alignments looks better 🤔 (see thread)

[Baby Wolf Codes @baby_wolf_codes]

My single most top tip for #code quality is this:

if (...)
if (...)
if (...)
🛑✋

🔸 Avoid nesting code more than three levels deep 🔸

Once you get to three or four levels, it's probably time to break down your code into smaller units! 🤏