It is no secret that order helps bring consistency to complex structures. Order allows our brains to consume and recite information because of some pre-established rules. In this installment of Developer Dark Arts I'll explain what ralpha-sorting is and how avoiding it might increase your velocity.
🏗️ Setup
First, let me give you a challenge to get you in the right head space.
In random order, can you list out the letters of the alphabet? How long would it take? How certain would you be that you got it right the first time?
Approach ①: Naive
If you're like me, right around the fourth or fifth letter I start forgetting what letters I've already listed.
Approach ②: Procedural
Ok, let's try this again but this time we write them down as we list them out. F,B,E,A,... and so on. That works sort of. As the list gets longer we find ourselves reading through the existing list to see if the next random letter was already listed before adding.
Approach ③: Front Loading
Let's try a modified approach. We draw out a line of 26 boxes side by side. In each box we place the next random letter, but this time we'll write the letter in the exact box it would be in if I were listing the letters out alphabetically. Using the random order from the last attempt our list would like the following.
[A][B][ ][ ][E][F]...
Using this method we are a little slower to place the letters in the correct box at the beginning, but as our list grows, our time to place the letter decreases. This is because the process of elimination and the fact that our minds subconsciously know the alphabet. If our next letter to add was D, with very little effort we know D goes immediately before E. No longer are we scanning our list for duplicates, we can place each subsequent letter with confidence because we're sorting prior to placement.
🤮 Ralpha-sorting
ralph: verb [slang] To vomit or throw up
Ralpha-sorting is term I've used to explain the opposite (or lack of) alphabetical sorting. It's a collection of words that has no rhyme or reason, as if someone vomited them into existence.
From our exercise above, our first two attempts were essentially ralpha-sorted lists. Neither were particularly enjoyable or quick to accomplish.
Real world ralpha-sorting...
CSS...
.title {
font-size: 1rem;
line-height: 1.5;
background-color: green;
}
JSON...
{
"taco": "🌮",
"burrito": "🌯",
"cheese": "🧀",
"salsa": "💃"
}
JavaScript...
import { pipe, omit, map, evolve } from 'ramda';
const thing = { y: 'you', no: 'sort', things: '🤷♂️' };
HTML...
<button type="submit" data-link="external" aria-label="Checkout" />
As you can see, ralpha-sorting is everywhere. These are usually products of functionality being added over time. The typical, "just append this new thing to the end" additions.
We can do better.
🔠 Alpha-sorting
What if we alpha-sorted everything?
💄 CSS
There has always been and will continue to be a debate of how you should organize css selectors and props. The organizational methods I've seen are positional, visual, alphabetical, preset, or none at all. Of those, only alphabetical has proven to be consistent and transferrable from project to project.
In css, order and specificity matter (the "cascading" part of acronym). A prop that comes later will supersede any references of the same prop before it.
So if order matters, how is it that we can sort things alphabetically? In most cases selectors can't be alpha-sorted effectively. Every css file has its own quirks in terms of how selectors are defined and trying to sort them in any way is futile. It's the wild west and I haven't found a good solution for this. For that reason let us exclude selectors from this sorting discussion.
In terms of css properties, you can safely sort them alphabetically. For example, the ordering of border-color and color has no impact on the end result. So for reasons I've already stated, putting them in alphabetical order makes sense. There are even some linting & formatting tools that can do this for you automatically when you save a file.
{} JSON
Not sure there is much of a debate here. Sort your keys alphabetically and move on.
Again, there is automated tooling to do this work for you.
📜 JavaScript
Imports, exports, and object props. Alpha-sort 'em all™️. Of course there are edge cases but you should shoot for this to be the standard.
<insert automated tooling footnote>
📃 HTML
Who's writing plain ole html these days?? A lot of people, that's who. Even if you're writing React, Vue, or Angular, you should be alpha-sorting element attributes. I've seen sorting alternatives like grouping id and class first but the implementation varies between projects. I am not a fan of any pattern that lowers readability for the sake of subjective "importance".
<insert automated tooling footnote>
📕 Conclusion
Still not convinced? You might think I am nit picking, especially since it doesn't impact functionality. I would argue that readability and developer experience are key factors in a product's success. We've all worked with developers who have avoided working on a project because its codebase is a mess. I'm one of them. Why not lower the barrier, even if it is drop in the bucket?
- Alpha-sorting is objective
- Its linting is enforceable (in most cases)
- Its implementation can be automated
In my opinion those points are hard to argue. Why not do our part to standardize on this universal rule? Can we automate away the alpha-sorting debate?
Prettier's of the world, I'm looking at you 🔭 👀.
Am I wrong? Agree with me? Curious which tools I use to automate alpha-sorting? Drop me a line in the comments, leave me a big squishy ♥️ and/or a glitter pooping 🦄.
Today's post was brought to you by VSCode's "go to definition" shortcut: Command+Click
Top comments (0)