Scrollable table with fixed header

/in , /by

Instead of using absolute positions, containers and so on you can use CSS Grid to set header and body.

Select elements by dragging a box

/in , , /by

You can select elements easily drawing a box with your mouse without using jQuery UI or third party plugins. Just handle 2 mouse events and check if at least one point of each element is within your box area.

Notice, that we are using a third event (as guidance) simply to draw the area.

In my first implementation, it was available to select any element by surrounding any of its corners or a minimum area inside it, but due to its complexity and most of the used scenarios, I decided to change the selection criteria to the center point with all elements same size.

Keyboard events

/in /by

Use event.code to get a human readable way of knowing which keys are pressed. Use event.key if you want to distinguish between capital letter or not, and avoid browser shortcuts, i.e: Ctrl + P (print)

Short tricks of HTML, CSS and JavaScript

/in , , /by

Dear fellas, I’d like to share with you ^^ an article about tricks and basic concepts in HTML, CSS and JS. A list of How Tos for everyday use with easy and declarative approaches. Hope you like it (just with the header image I became a level 20 paladin)

Short tricks of HTML, CSS and JavaScript on Medium.

Developing Time

/in /by

Inspired by Adventure Time, one of my favoritest series, I’m painting in Inkscape which character corresponds with each coding language, based on personality, color and relationships between them.

Princess Bubblegum (CSS), Finn (HTML) and Jake (JavaScript). Hope to release soon more of them ^^ so any nerdy suggestion will be welcome xD