For ventilation, our 17-year-old house is equipped with an Itho air handler for mechanical ventilation. Exhausts in the kitchen, toilet, and bathroom make sure that fresh air gets pulled in through ventilation inlets located over the windows. The air handler made a lot of noise for the past few years, so we mostly had it unplugged. Since that’s a terribly […]
Having fun with Sass lists and strings
At SassConf I presented a one hour “featured workshop” on lists, while also touching on new Sass 3.3 features such as maps and string functions. After all, the best way to learn how new functionality works is to toy around with it (and break stuff), so I decided to create an “animation trajectory grid” (or […]
Should you use a Sass mixin or @extend?
If you want to DRY your CSS, the easiest way is to start using a pre-processor like Sass. Specially in the beginning though, you need to regularly look at what your Sass compiles to. By using mixins for instance, you can seriously scale back the amount of code you need to write. But if you […]
The missing media query: element dimensions
A few weeks ago Wes Oudshoorn, a UI/UX designer we’re fortunate to work with on AppSignal, asked if I knew a way to make media queries relative to an element instead of the viewport. I did not, but it didn’t take long for me to understand that this is a feature that would make writing […]
Follow-up: Don’t use class names to find HTML elements with JS
This is the follow-up to “Don’t use class names to find HTML elements with JS“, where we take a look at a new test case, with results proving that the negative speed impact of finding elements by data attribute instead of by class name is negligible. The reasons for using this approach are in the […]
Using Sass’ @each to create DRY selectors
Just a quick article based on a post by Natalie Weizenbaum in the Sass Google Group on how to use the @each directive to create selectors. Someone there was looking for a way to use @each while keeping a DRY output. I haven’t used @each in this way yet (I usually use it when the […]
Don’t use class names to find HTML elements with JS
Don’t forget to read the follow-up too! In the days before HTML5, when we wanted to bind JavaScript events to an element, we would find the element based on its class name (or the rel attribute). After all, using a class name won’t invalidate your HTML, is easy to target (specially with a library such […]
Modernizr & the Sass parent reference
This technique is very simple, but often overlooked because the parent reference & is mostly used at the beginning of a selector, like:
|
1 2 3 4 5 6 7 |
a { color: #000; &:hover { color: #f00; } } |
Since & does nothing more than repeat the parent selector, it gives us an excellent way of easily implementing custom styling based on features detected by Modernizr. Just have Modernizr add […]
My ArrrrCamp talk: Stop Swashbucklin’ and Shipshape yer Front-end
A few days ago I spoke at ArrrrCamp in Ghent, Belgium. I had heard of the conference before, but never went there during it’s prior four years of existence. If those editions were of the same level of quality, I should have. Excellent talks, three tracks, mojito’s (no, really) and a proper lunch. With the […]
Stop abusing the placeholder attribute
The placeholder attribute saves web developers from using JavaScript solutions to tackle a simple task: display a placeholder text in a form input. Right now though, the bulk of all forms using this attribute is doing it wrong. By using this feature in a way that was never intended developers create confusion amongst visitors, sometimes […]