WebComponents with XSLT

An article, posted 2 days ago filed in xslt, xml, xhtml, html, components, web components & demo.
WebComponents with XSLT

I’m a sucker for standards. Especially those more theoretical standards: peak theoretical standards era for the web is the era that promised the semantic web; early 2000’s.

Some history

In that time, the first version of this site was built using an XML-based index file, XML files that provided meta data on certain topics and XHTML files that featured the content. With PHP-code to tie requests and responses together, the site was mainly powered by several (big) XSL-Transforms that rendered the pages (it (c|sh)ould’ve been a static site).

Fast forward to today. While WebAssembly is gaining traction, these days the focus is on JavaScript for components. Popularised by frameworks such as React, new elements are defined in JavaScript that can be used in the DOM (the latter is not what React uses btw). The (promoted as) ‘standard’ way to make custom elements is using WebComponents. Yet this effort is driven primarily by Google.

And I’m still closing my ``’s and write `…

Continue reading...

Using Jekyll in 2021

An article, posted 21 days ago filed in ssg, jekyll, review, ruby & static site generators.

I am currently selecting a static site generator for an upcoming project. I value technical simplicity (exit React based solutions), like ruby and in the Static Site Generator category Jekyll is an established name. But doesn't the project that started in October 2008 show signs of age?

Pro’s:

  • It is ruby based (whether that is a pro for you depends on your aesthetics)
  • It is simple
  • It is easy to extend
  • Format for posts is Markdown
  • Hosting it is simple

Con’s:

  • Liquid (a templating language developed by Shopify) is limiting, I’d preferred ERB as a template language.
  • “There is a plugin for that” disappoints, many are pre-bundler era (hence requiring copying code) and quality differs a lot.
  • Lacks even a simple asset pipeline for JavaScript; hence bundle minified JS files together or build the final JS in a separate webpack-process.
  • The builds won…

Continue reading...

Tag descriptor

Static site generators

An article, posted 21 days ago filed in ssg, jekyll, jamstack, javascript, api, markup, markdown & static site generators.

Static site generators mix the maintainability of dynamically rendered sites with the speed and ease of hosting of static sites. It comes at a cost, which is interactivity. Hence typically static sites are enriched client side JavaScript communicating with API's, which has been labeled JAMstack by an org pushing this market.

I’m currently in the process of selecting a static site generator. Based on Github stars this is the current top 10 at Jamstack.org’s overview of static site generators:

  1. Next.js (JS/React)
  2. Hugo (Go) (Smashing Magazine was made with Hugo)
  3. Gatsby (JS/React)
  4. Jekyll (Ruby/Liquid) (powers Github Pages) (my review of Jekyll)
  5. Nuxt (JS/Vue)
  6. [Hexo](ht…

Continue reading...

Why I stopped inheriting from ruby’s core Array class

An article, posted about 2 months ago filed in workbook, gem, rubygems, ruby, inheritance & performance.

Inheritance is considered bad practice for quite some time now (Gamma, Helm, Johnson & Vlissides, 1994). Little did I know when I started the ‘workbook’-project in 2012 (note that I don’t have a computer science background).

The main reason I wrote this workbook-gem was that I wanted the most predictable API for working with spreadsheet data (acting as arrays of arrays), not having to use a different API when reading XLSX or CSV files, nor when writing it.

After learning that inheritance is not always a good thing, I still often thought of a workbook as an array of arrays and hence an exception to the rule. But then I came accross a helpful post by Avdi Grimm: [Why you shouldn’t inherit from Ruby’s core classes (an…

Continue reading...

Design Systems and the source of truth

An article, posted about 2 months ago filed in atomic design, design, design system, system, css, html, components, @bradfrost, collaboration & work.

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…

Continue reading...

Browserondersteuning

An article, posted 3 months ago filed in browser, Edge, chrome, Firefox, support, mobile, Safari, complexity, quality & performance.

murb hanteert een browser support grading systeem (een idee dat ik ooit heb gekregen van Anselm Hanneman bij het lezen van How to define a browser support level matrix) voor browserondersteuning. We classificeren browsers met een A, B, C of D.

Klasse Omschrijving A Beste gebruikerservaring; alle features werken en weergave is duidelijk. B Alle features werken. Weergave niet altijd optimaal. C Basis functionaliteit werkt (in ieder geval rollen buiten controle (b.v. niet-admin functies)), maar geavanceerdere functies zijn niet altijd beschikbaar. Performance mogelijk niet optimaal. D Wordt niet ondersteund.

B2B projecten

Veelal kantoortoepassingen, complexe schermen, mobile support is een nice to have.

Klasse A Browsers:

  • Google Chrome op Desktop (laatste en op één na laatste versie)
  • Micros…

Continue reading...

To Tailwind or Not

An article, posted 5 months ago filed in tailwind, css, frameworks & bem.

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:

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…

Continue reading...

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…

Continue reading...

Tag descriptor

Pruning

An article, posted 8 months ago filed in pruning.

Software is never done. New ideas develop, new threaths arrive (business wise, security wise). Much like gardening really. Sometimes you can just enjoy the fruits of your labour, but at other times you have to deal with undesired plants that outgrow your crops, crop-eating insects etc. Fruit trees need to be pruned yearly to keep giving fruits. Anyway, I was realizing that I have been repeating this theme as an anology for software development for quite some years now, hence this overview ;)

Continue reading...

Using Tippy.js with Turbolinks

An article, posted 10 months ago filed in library, javascript, html & TurboLinks.

Tippy.js is a nice library to show popups. It may, however, not always be obvious how to use Tippy.js with Turbolinks (or any other library that modifies the DOM). The basic ingredient is somewhat hidden in the docs: deffered. But loading a HTML template requires a slight adaptation of what is presented in their documentation to make loading of these templates deferred.

From beginning to start. Add the library:

$ yarn add tippy.js

Add a CSS-class for your templates to be hidden by default:

.tippy-template-content {
  display: none;
}

And then add the following to your application.js (or equivalent in your setup):

import {delegate} from 'tippy.js';

delegate('html', {
  content(reference) {
    const id = reference.getAttribute('data-tippy-template');
    if (id) {
      const template = document.getElementById(id);
      return template.innerHTML;    
    }
  },
  allowHTML: true,   ...

Continue reading...

99% tegen 1%

An article, posted about one year ago filed in geld, ethiek, efficientie, duurzaamheid, ict, it, goed, energie, occupy, datacenter, cariere, verdienen, economie & fout.

Hoe ik mijn geld verdien houdt mij bezig. Ik vond deze draft terug uit ~2011.

Nietzozeer over hoe ik rijk kan worden, maar meer om te weten of ik wel (mee)werk aan iets waardig is.

… en dat ik dus niet die hefboom aan het creëeren ben waardoor 99% minder gelukkig wordt, en slechts 1% profiteerd, omdat een wereld waarin een goede middenstand bestaat beter functioneerd.

Door de focus op kostenbesparingen en efficientie, die sterk versterkt wordt door de lage prijs van het geautomatiseerd toepassen van een beproefd recept (de kracht van een computerprogramma) zorgen monopolistischd ondernemers ook voor een grotere scheiding tussen arm en rijk.

Nu ontstaan er altijd weer nieuwe banen. En er ontstaan ook altijd weer nieuwe problemen die nieuwe unieke oplossingen vereisen. Maar kunnen die onafhankelijk tot bloei komen als de het er altijd weer op …

Continue reading...

Bye Internet Explorer

An article, posted about one year ago filed in ie, internet explorer, windows, Edge, Chromium, chrome, browser & Firefox.

It is easier said than done: "just stop supporting Internet Explorer (IE)". There are large organizations that require IE for some of their legacy often in-house applications. If you serve these organizations, you might be required to support IE. Even though, globally, roughly only 2% of the users still use this old browser.

For versions before IE the argument has been easy: "We don’t support a browser Microsoft is not supporting," but support for IE11 doesn’t seem to stop anytime soon (see the update below!): The latest IE (IE11)will be supported as long as the last version of Windows that supports it. That means untill support for the current version of Windows has ended.

With the launch of Edge, [Microsoft initially went along with popular demand not to bring support for older engines to their new browser Spartan](https://docs.microsoft.com/en-us/archive/blogs/ie/updates-from-the-project-spartan-developer-works…

Continue reading...

Tag descriptor

Coffee and Oranges

An article, posted about one year ago .

End of 2018 I started a separate blog. Coffee and orange. I decided to move all content back to my main blog, because I didn't want to keep on maintaining a Wordpress instance. This site is happily served by my own system. Below are the just 5 posts. I happily continue to post new items on my blog.

Continue reading...

Relative font sizes, or pixel based? 2020-edition

An article, posted more than one year ago filed in px, font, usability, accessibility, user, sketch, css & design.

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...

Nieuwjaarsrede 2020: Introspectie

Weer verhuist. Hopelijk blijft het zo. Een prachtige plek in Amsterdam voor mij, mijn vriendin en onze dochter. In een nog redelijk gemengde wijk, maar voor ons zaten er arbeidsmigranten met een westerse achtergrond dus euh :) #gentrificatie

Ik zit in een luxe positie. Een huis kunnen kopen in Amsterdam is al een luxe op zich. Toch voel ik mij nog steeds verwant met de linkse kant van het politieke spectrum. Alleen schijnt dat niet bij iedereen een populaire positie te zijn. De linkse politiek is het afgelopen jaar een gewild doelwit geworden van een uitdijende groep. FvD’ers, Nazi’s, Boeren, VVD’ers. En dat wringt toch ergens, want links ben je in de eerste plaats toch vooral omdat je betrokken bent, bij mensen die het financieel minder hebben, bij het milieu en het klimaat, bij gediscrimineerde minderheden. En het idee is dus dat die mensen, dieren, planten, planeet, geholpen dienen te worden vanuit de overheid (want democratisch en onpartijdig), iets dat (eenvoudig gezegd) het…

Continue reading...

murb blog