Roy Tomeij

The last time I blogged about something was in April 2018, nearly five years ago. Over the years, however, I’ve often wanted to share “something,” whether anyone reads it or not. This time, I’m not forcing myself to write long-form think pieces or nothing at all. Instead, this will be a collection of ramblings of all sorts, including tweet-sized musings, product reviews, and the occasional hot take.

I’m starting fresh and have only kept some posts from my old blog that still see some traffic so as not to “break” other people’s posts linking to them.

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 ascii art, if you will) and transform that into a CSS animation.

The finished animation looks like this (webkit only).

The trajectory grid is a list of 10 items, each consisting of 40 characters. UTF8 arrows indicate where our rocket image should move to, and … read more “Having fun with Sass lists and strings”

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 don’t know how things compile, you’ll end up with DRY Sass and bloated CSS. Since that’s what gets send to the user agent eventually, you should try to prevent that.

Let me illustrate what goes wrong with a simple example (this code visually hides some … read more “Should you use a Sass mixin or @extend?”

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 responsive, reusable modules so much better.

Right now, media queries will determine which CSS to use when the viewport has certain minimum, maximum or exact dimensions (or device characteristics; irrelevant to this article). This aids in creating better responsive layouts, for instance when … read more “The missing media query: element dimensions”

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 hours. The first 5 hours were good for 80% of that amount (opinionated blog posts hardly ever have a significant long tail).

Only Suzan Bond asked the obvious question: “So, how do we turn this thing around?” (paraphrased). While I’m pretty sure we can’t fix … read more “Fostering a development community”

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 below is based solely on my own experience, and as stated in the first paragraph, it’s biased. It could very well not hold up in your specific situation. For the people calling me elitist, telling me I can’t compare the PHP language to Rails because … read more “Will Rails be the new PHP?”

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 original post and still current. If you just don’t like the concept, there’s no way I can persuade you. But if it’s about the numbers, here are the metrics.

TL;DR;

Targeting elements by data attribute using jQuery is almost as fast as doing … read more “Follow-up: Don’t use class names to find HTML elements with JS”

Recently my mother, while going through junk accumulated over the past 30 years, found a contract I made at age 11. I’m astonished that 1: it has so little spelling errors, and 2: this seems to be a legally binding contract. It has a date, the city where the document was signed, the names of both parties involved and their signatures. The terms seem to be quite clear too, and by now Kamiel owes me 356.05 Guilders (an extinct currency), or 161.57 Euro’s (or 207.09 Dollars).

Kamiel now has a company called Ruigwerk. I’ll make him pay up soon.… read more “My first legally binding contract (at age 11)”

This week Zach Holman and Chiu-Ki Chan wrote about public speaking. While I’m not claiming to be a very experienced speaker, I have my two cents to add after being involved with some conferences, etc. Here’s my take on slides, rehearsing, introductions, Q&A and more. I’m mixing some practicalities in here too, things I do or don’t do and things I believe you should do if you’re a speaker (and to be clear, there’s nothing sacred about that title, if there’s an audience listening to what you have to say, you’re a speaker).

What to cover during a talk?

I’m … read more “On public speaking”

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 properties change for each key, like when going over an array of social media networks), but I can imagine there are use cases.

Normally, this code:

… read more “Using Sass’ @each to create DRY selectors”

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 as jQuery) and provides a hook for styling. But those days are over with the introduction of better suitable techniques, and using class names to find elements leads to confusion and maintenance issues. For true separation of styling and behavior you should use custom data … read more “Don’t use class names to find HTML elements with JS”

This technique is very simple, but often overlooked because the parent reference & is mostly used at the beginning of a selector, like:

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 class names to your <html>-tag and for … read more “Modernizr & the Sass parent reference”

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 introduction of the Rails 3.1 asset pipeline and Sass & CoffeeScript coming with Rails nowadays, this seemed like a good time to speak about the benefits of using front-end meta languages. I added Haml and Compass to the mix to cover the basics for doing … read more “My ArrrrCamp talk: Stop Swashbucklin’ and Shipshape yer Front-end”

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 even leading to unusable forms. On top of that it opens the door for data integrity issues.

According to the W3C HTML5 specification on the placeholder attribute its intended use is clear:

The placeholder attribute represents a short hint (a word or short phrase) intended

… read more “Stop abusing the placeholder attribute”