Tag Archives: Today I Learned

CSS Superpowers: 10 single-line Layouts

I recently came across an extremely useful video about CSS tips and tricks made by Una Kravets on the Google Chrome Developers Youtube channel: 10 modern layouts in 1 line of CSS. I think the title speaks by itself. Let’s see how to create 10 single-line layouts! First and foremost, have a look at the video, it is very detailed and nicely explained ;) If you want to give it a try, go to the Glitch demo page: 1linelayouts.glitch.me And if you are lazy, here is a quick recap: 1. Super Centered How to (finally) center an element both horizontally … Continue reading CSS Superpowers: 10 single-line Layouts

How to create an Alias for your Local Website (bye localhost!)

Tired of having localhost in your URLs? Do you want to have a more professional-looking URL in your browser? It is so easy to set up, you won’t be able to live code without it anymore! So let’s have a look, shall we? Meh, localhost is fine… Okay, no problem! Let me just give you the reasons why I use aliases: Cleaner URLs: visually easier to see what’s going on in the URL, No more configuration errors (ports, …), No routing errors with a development environment closer to the production environment: you will have the exact same URLs in development … Continue reading How to create an Alias for your Local Website (bye localhost!)

How to get an Element Starting with Class Name: the * and ^ JavaScript Selectors

You certainly know * and ^ as selectors in different programming languages. But you may have found some surprising (or frustrating) results while using them as JavaScript or jQuery selectors. Let’s say you want to access elements starting with a certain class name, for example, “fruit-“ in the following code: First, the syntax Your first reflex may be to try something like that: The correct syntax is: Then, the selectors: ^ vs * Using the ^ selector is correct, but its behavior is a bit too literal: it will get the very first element starting with the class name, or … Continue reading How to get an Element Starting with Class Name: the * and ^ JavaScript Selectors

Clever CSS Spacing Between Elements with + Selector

Let’s say you have a list of elements, and you want to elegantly add a bit of space between them so that they don’t appear too clumped together… Well, it’s pretty easy if you have the right tool: the + CSS selector! You don’t need to use a margin or padding on each element and add a first-item or last-item class to remove the extra spacing, the + selector takes care of everything. How does it work ? Let’s take an example: if you have div + p in your CSS, it will select the first <p> element that is … Continue reading Clever CSS Spacing Between Elements with + Selector