Should I use styled components?

An article, posted more than 1001 years ago filed in , , , , & .

This was originally posted at CoffeeAndOrange

You may have asked yourself if you shouldn’t invest more time getting started with this thing called styled components (or CSS-in-JS). They get heavily promoted in modern front-end application frameworks. And sure, they look interesting.

While it depends may be the only right answer, sometimes you might be simply making things more difficult than really needed. You’re fixing the wrong problem.

Take for example the SCSS code.

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
      background: darken($bg-color, 6%);
      cursor: pointer;

.button {
  @include button-styles(#ddd, black)

.button--primary {
  @include button-styles($blue, white)

To pair with a simple component along the lines of:

const Buttons = props => ...

Continue reading...

Relative font sizes, or pixel based? 2020-edition

An article, posted about one month ago filed in , , , , , , & .

Occasionally I still have discussions about px-based font sizing, feeling like the other party has lived under a rock since early 2000's. But some designers still like their pixel based tools; maybe it even got popularised again by relatively new tools like Sketch and Figma, introducing pixel-units in a vector-based tool.

Well, to be honest, it matters less these days when compared to the days I learned that pixels are bad. Those days browsers were enlarging only text when it used relative sizes. In response to not all sites serving relative font siz browsers have introduced full page zoom functions, which is common place these days, when you press Command/Control plus ‘+’ everything will scale; text images etc.

But the text-size function is still used. In Firefox, Settings > General > Language and appearance sets the default font-size. In Chrome: Settings > Appearance > Lettersize. When you’re young and able you probably wouldn’t need to know about these things. But we shoul…

Continue reading...

TL/DW: .css_day#ui-special

An article, posted 10 months ago filed in , , , , , , , , , , , , , & .

Yesterday I attended the CSS Day conference. This year only the first day, that focussed on designing user interfaces, less the building of it. Here are the key take aways for those who thought going through all slides is too long, or didn’t went.

Josh Clark - A.I. is your New Design Material

Josh urged designers to get feeling for the new design material called AI, the next big thing. We need to know what makes it different, the grain, and also know how we can use it for good. Design might have a seat at the board table, but they need to know how to align user considerations with business goals. More on AI and design by Josh Clark and more.

Steph Troeth - Behind the story

Storytelling used to be all the rage before mobile entered the scene, Steph recalls. Nevertheless, people prefer stories over plain lists of…

Continue reading...

Tag descriptor

CSS Grid

An article, posted about one year ago filed in , & .

The modern, still relatively new, way of doing grids natively inside a browser: CSS Grid. Below some articles that you may also find helpful.

Continue reading...

Developing Keycloak templates with Docker

An article, posted more than 2 years ago filed in , , , , , & .

I haven't had much need for isolating services, something that Docker is really good at. Most dependencies of my Rails apps are covered by Gemfile anyway (and packages.json for JavaScript) and reasonably isolated with rbenv. I don't experience version related issues very often, as I try to stay reasonably up to date and not rely too much on the very state of the art. For temporary projects, however, Docker is a great solution, even for me :o I don’t want an entire JBoss suite running on my machine, so when I had to develop a Keycloak template I knew that Docker would be the right tool. While I’m going to discuss the specifics of getting started with a Keycloak image, the workflow described is replaceable by any other.

So what about Keycloak? Keycloak is a role based authorization and authentication tool …

Continue reading...

The academic vs the builder

An article, posted more than 2 years ago filed in , , , , , , , , & .

“dichotomies make it easier.”

Just over two decades ago The cathedral and the bazaar by Eric Steven Raymond was published. It talked about software development and kind of suggested that a more bazaar like ‘architecturing’ would improve the way complex systems could be build. Nowadays BDUF is a swear-word. In an ever-changing world, you can’t predict the future. So why design for one year. Experiment! Extend!

When I was visiting the Fronteers conference a few weeks ago I had a short interaction where I apologized for my maybe bit academic bias. I remembered I was still quite fond of some old xhtml standard that never really arrived.

Reading the online resilient web design-essay I was reminded of the continuous struggle between practitioners and the standards co…

Continue reading...

Try not using Javascript first

An article, posted more than 3 years ago filed in , , , , , , , & .

My guiding principle in web-development is (still): Always make things work without (client side) JavaScript first.

Aside from offering a graceful degradation of the experience by progressively enhancing it leads to better code. Three reasons why:

  1. it forces you as a developer to think about logical endpoints for your form submits, your data requests etc. Typically this leads to fewer cases of overloading a resource with all kinds of unrelated functionality (yep, I'm a big REST-first advocate).
  2. your application will probably be more web-native, and hence more future proof, more easily cache-able, etc.
  3. the front-end JavaScript to enrich the experience will typically also be less complex and can be generalized more easily.

Yes, I do shiver when I hear things like CSS in JS, KISS!

Photo by [Dmitry Baranovskiy](…

Continue reading...

Semantics before anything else

An article, posted about 4 years ago filed in , , , & .

My first rule in styling websites or applications is to style semantics over anything else.

  1. First use as much of the agreed upon tags and properties that the latest HTML spec gives you
  2. Extend this with microformats or and what else you can find that is an (pseudo-)standard for semantic markup
  3. Finally, if no matching semantically rich descriptors can be found, try to think of future proof names for your elements that may be reusable. Think "metadata div(vision)”, "(search) result" (you may style result here and add another more specific styling for search results).

Style the semantical markup. Semantics is about meaning, and by defining your content's meaning in html and highlighting this meaning with your style brings you consistency from the start. This is not only nice to you as a maintainer of code, but also to your audience. It leads to consistent, predictable behaviors.

The counter movem…

Continue reading...

Introductie tot Cascading Stylesheets

An article, posted about 18 years ago filed in , , , , , , , , & .


Een stylesheet is eigenlijk een filter die over een pagina gelegd wordt die de pagina opmaakt. Stylesheets zijn in grote mate te vergelijken met Stijlen uit WordPerfect en Opmaakprofielen uit Word. Het mooie aan stylesheets is dat ze, met uitzondering van de zogenaamde inline stylesheets, de opmaak en inhoud van elkaar scheiden. Een stylesheet verteld hoe de inhoud gepresenteerd moet worden en kan in deze presentatie een perfecte continuiteit bieden. Een ander voordeel is dat stylesheets nog het meest crossbrowser compatible zijn. Ten slotte is het met stylesheets mogelijk om verschillende blokken op elkaar te stapelen en te positioneren.

Soorten stylesheets

Er zijn drie verschillende soorten stylesheets te onderscheiden, nl.:

external stylesheets internal stylesheets inline stylesheets

External stylesheets

External stylesheets zijn stylesheets die niet in het document zelf zijn verwerkt, in een apart text bestand, meest…

Continue reading...

murb blog