My brief history with Front-end UI Tools
Front-end UI development is just writing code rendered in the browser, right? It can even be simplified a step further to say: 1. “Type code” and 2. “See the rendered output.” That’s it: Rinse, repeat as many times as needed, and you’ve got yourself the UI you’re working on.
But humans are lazy โ especially software engineers. Pair that with business people happy to pay for an increase in productivity, and you get a tools arms race.
Let’s look back at some moments in the history of web UI development.
My UI development memories started in early 2008 when, during a “Web Development 101” course at university, a good friend taught me a trick. At the time, we were having issues with HTML/CSS styling and layouts. (Holy grail layouts were tricky back then, am I right?)
“Colorful markup,” he called it. It wasn’t then and isn’t now a well-established term, so don’t think you’ve missed something.
It works like this: When creating and tweaking layouts, use all possible colors for backgrounds, borders and outlines โ pink, magenta, yellow, and red. I even use rebeccapurple sometimes. Feels like a good use for it.
Why? What were we doing back then, and why do some of us (slowly raises hand) still do it now?
Short answer: It’s a helpful trick to speed up layout development. And, I’ll admit, it’s also a force of habit. It’s hard to get rid of old habits and pick up new tricks (no, I’m not talking about the “using Vim plugins for VSCode” level).
As I was starting to work with Codux, which was new to me, I thought a lot about UI development โ what I experienced and the history of the tools I encountered.
Behind the simple “type code” step, there are tons of different tools, most of which are shared with other software development areas not specific to web UI development.
In general, IDEs have made colossal progress in the last decades. Still, in my own experience, I started writing HTML tags like