A beginner's list of JavaScript gotchas

I consider myself a novice when it comes to coding in JavaScript but lately I played a bit more with this language and stumbled upon a few random things I thought were worth sharing. So, if you are new to JavaScript or just don’t know it as well as you would like, I hope you find this article useful.

JavaScript logo

Just another dropdown menu concept

I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS.

Dropdown menu concept

Making HTML dropdowns not suck

Customizing form elements was always pretty frustrating and the select element is one of those elements who can make you want to pull your remaining hair out while trying to style it. As you may already know, when talking about its customization, there isn’t too much CSS stuff you can apply to it, just properties like color, background, font or border.

In this article, in order to customize the look of the native HTML dropdown select, we’ll be using a different approach based on some cutting edge techniques like @supports, pointer-events and appearance.

Custom dropdown preview

Removing an element with the plain JavaScript remove() method

As you might know, the DOM does not supports removing an element directly. When removing an element with JavaScript, you must go to its parent first instead. This was always odd and not so straightforward.

According to DOM level 4 specs, which is the current version in development, there are some new handy mutation methods available: append(), prepend(), before(), after(), replace(), and remove(). In this article we’ll focus a bit on one of the new kids on the block, the plain vanilla JavaScript remove() method.

JavaScript remove() method

Thoughts on becoming a better developer

I ask myself this question quite often. What it takes to become a better developer? Not a ninja, guru, master or whatever, but just a better developer. I’m talking about how to improve and learn more every day.

Become a better developer

Horizontal centering using CSS fit-content value

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it’s about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

As we all know, centering this kind of stuff can be quite tricky sometimes. With this common example in mind, Roger made an awesome list with solutions you can apply in order to achieve horizontal centering.

CSS fit-content value and horizontal centering

CSS 3D folding list with social buttons

CSS 3D transforms are just awesome. I’ve seen before some cool and inspiring implementations in the wild and still I can’t believe I didn’t had the chance to write an article on this topic ‘til now.

So, what’s the idea for this article? Let’s say you own a blog, I was thinking about having a nice looking 3D folding list that contains the main social buttons and when people reach at the end of an article, the initial folded list would smoothly unfold. This could be helpful if you want to draw users’ attention, something like: “Hey, did you like my article? Connect with me!”.

CSS 3D folding list with social buttons