Een pragmatisch succesverhaal

Sorry, even wat borstklopperij, maar ben wel een beetje trots hierop. Enkele jaren geleden werd ik door een oud collega van mij geïnformeerd: hij had gehoord over een project waarvoor ze eigenlijk iemand zochten met mijn profiel (mijn naam was zelfs genoemd). Interaction design achtergrond, in staat zelfstandig een UI neer te zetten op basis van moderne standaarden. De opdracht: een oude extranet applicatie, met een historie uit begin jaren nul even een nieuwe smoel geven (en responsive maken). De opdracht werd gepubliceerd, ik reageerde, en uiteindelijk werd besloten dat ik deze mocht uitvoeren.

Het bleek te gaan om een verzameling oude stijl PHP en CGI scripts. Met een op framesets gebaseerde layout, zoals je dat rond 2000 wel vaker zag. Ik ken veel collega’s die liever wegrennen bij een dergelijke opdracht, zoveel oude code, zoveel historie, maar ik had het idee dat ik het wel kon doen. Een aanbestedingstraject voor een volledige nieuwbouw bleek jaren geleden mislukt omdat de …

Design Systems and the source of truth

Some excerpts I created from the transcript of the Design System Podcast, hosted by Chris Strahl, which in Episode 11 featured Brad Frost and Evan Lovely.

Hand-over of comps

The traditional process starts with the design of comps, comps, non-interactive previews, which are generated by the design team and undergo a rigid design review process up to a design director or VP, and is only then passed on to the developers who need to implement that initially static comp pixel perfect. But Evan Lovely notes that while there is nothing wrong with comps, there is something wrong with mistaking it for the final product. That’s why he likes tools like pattern lab, storybook or knapsack, because they really allow someone to quickly mock up a comp that actually works within the final environment.

To some companies this is a problem; because the formal approva…

To Tailwind or Not

Tailwind is a popular utility first based CSS framework, something that front-end developers can use to make a page look more stunning and/or more consistent. A few interesting takes on tailwind, one of the most popular utility first css frameworks:

• Why Tailwind, a nuanced pro tailwind argument coming from someone who seems to have decided in the css in ja camp before
• Why Tailwind isn’t for me.

I am still not convinced about Tailwind. Heck, I’m even not a major fan of full BEM, although I use it when I am building more complex components with mutiple thightly coupled related parts. The principles behind IT CSS still form the basis of how I prefer to like CSS (note: the author of IT CSS, Harry Robert, is also maintaining a [guideline on how to write maintainable CSS](https://murb.nl/feed_items…

Highlights from the Atomic Design book by Brad Frost

Since his talk at Fronteers I was interested in the thinking of Brad Frost, his blog posts, etc., but never actually read his book Atomic design until recently, as it got more and more relevant to an internal discussion at an organization I was working for. A few notes:

• Most importantly, what it is not: Atomic Design is not about being a practical guide for implementing design systems (although it has some examples in Pattern Lab, which was originally built by him). I was also hoping it would also give guidance on naming things / structuring CSS when building atomic design based design systems, but it does not. But don’t mind, plenty of good content(!)
• Atomic design sounds like an too obvious idea and while I didn’t dismiss it because of that, I realized I also didn’t try to understand it thoroughly enough. Reading the book helped me to better understand it and especially thinking about the intermediate forms (molecules) was actually despite its o…

Relative font sizes, or pixel based? 2020-edition

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…

TL/DW: .css_day#ui-special

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…

Bad CSS in JS

I tried to understand the argument made for styled components vs. ‘traditional’ CSS. But when reviewing these arguments I found out that they typically use bad code as proof for their point.

See e.g. the following SCSS code:

$blue = #5DBCD2;

@mixin button-styles($bg-color, $color) {
  background: $bg-color;
  color: $color;
  border: none;
  border-radius: 0.20em;
  &:hover{
      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 => (
  
    Default
    Primary
  
)
export default Buttons

The suggested alternative is:

import themeVars from "myTheme"
import styled from "styled-components"
import { darken } from "polished"

const B...

Creating a link in Vue

Any HTML is legal, so you can just write a regular link, but if you want to have a fast response, it is recommended that you include Vue Router. This brings two important tags: , which this post is mainly about and.

Creating a link in Vue is as simple as:

Home

This renders a perfectly correct link, using the earlier mentioned a-tag. It even adds a nice bonus, adding an ‘active’ class when that route is active. If you prefer this class on the containing element, do this:

Home

This will render something along the lines of:

Home

Be aware: this is the only valid use-case for the tag-property in vue’s router-link component. Hence be wary if you come across any use of the tag-property, but Vue’s default is good.

You pick up on this link by defining the route ‘home’, make sure your app contains a and attach a component to this route. In the most basic form:

…

How do I navigate to another page in React or Vue?

Congratulations, you started working with one of the popular front-end frameworks. Both Vue and React are excellent choices to create rich and reactive applications. But sometimes, you 'just' want to show the user another page. Whether it is a simple about page, or another 'section' in the app. In this post I will cover both Vue en React and, little bonus, “React on steroids”, NextJS.

It is important to know that you need a router to make in-app pagination work. If you look up router and your favourite framework you're probably find a way to do it, accompanied with some ways to actually not do it. Hence, here I'll focus on the right way.

The basics of every link

While you can make everything clickable (or touch-able), it is important that enabling navigation between pages was already a core concept when the web was invented. Even when writing webpages using React, Vue, or most other JavaScript frameworks, it ends up as HTML to the browser (with JavaScript & CSS). HT…

Developing Keycloak templates with Docker

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 …

The academic vs the builder

“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…

Try not using Javascript first

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](https://www.flickr.com/photos/dmitry-baranovsk…

Semantics before anything else

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 schema.org-vocabularies 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…

Should I use styled components?

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;
  &:hover{
      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 => ...