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 […]
Category: web development
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 […]
Fostering a development community
Yesterday I wrote a controversial article about how I see and hear that the Ruby community is more and more influenced by poor developers. I knew it would stir up a shit storm, but the amount of tweets and comments on various sites still surprised me. We’re talking 7,000+ unique visitors in the first 18 […]
Will Rails be the new PHP?
UPDATE 2: Here’s a follow-up to this post with some thoughts on how we can turn the tide if what’s to follow below is true. UPDATE: I’m sure this is going to feel like an uncool move, but I’m not only not going to respond to all individual comments, I also closed the thread. Anything […]
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 […]