Een pragmatisch succesverhaal

An article, posted 5 days ago filed in pragmatic, pragmatisch, murb, werk, html, css, development, php, react & projectmanagement.

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.

Tijdens het eerste gesprek bleek het te gaan om een verzameling oude stijl PHP en CGI scripts. Met een frameset gebaseerde layout, zoals je dat rond 2000 wel vaker zag, werd het samengehouden en aan de gebruiker aangeboden. 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 complete nieuwbouw was mislukt omdat alle offertes bu…

Continue reading...

WebComponents with XSLT

An article, posted 4 months ago filed in xslt, xml, xhtml, html, components, web components & demo.

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

Design Systems and the source of truth

An article, posted 6 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...

Highlights from the Atomic Design book by Brad Frost

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

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

Using Tippy.js with Turbolinks

An article, posted about one year 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...

Lazy loading the lazy way

An article, posted almost 3 years ago filed in images, web, optimization, javascript, html & coffeeandorange.

Below is a simple, lazy, technique I applied in a collection management tool where its users wanted to browse over 10.000 images without scroll-hijacking or pagination. Sure, only the HTML weight several MB’s at once, but for this particular application used by professionals it is worth the weight. But performance was too heavily affected by downloading all these separate images.

So let’s have a look how I solved this.

What does the code below do?

You rightly guessed that it won’t display any image to say ~95% of the users. The 5% who have disabled Javascript however, will see it.

The 95% who do have Javascript can enjoy the image simply by moving the img tag out of the noscript tag using a bit of JavaScript:

ELEMENTS_QUERY = "noscript[data-lazy=\"lazy-load\"]"

decode_entities = (encodedString)->
   ## required for IE and Safari
   textArea = document.createElement('textarea')
   t...

Continue reading...

Creating a link in Vue

An article, posted almost 3 years ago filed in components, style, css, html, frontend, link, a, href, vue & coffeeandorange.

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:

Continue reading...

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

An article, posted almost 3 years ago filed in components, react, style, css, html, frontend, link, a, href, vue & coffeeandorange.

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…

Continue reading...

Developing Keycloak templates with Docker

An article, posted almost 4 years ago filed in docker, keycloak, template, javascript, development, css & html.

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

Should I use React or Angular?

An article, posted more than 4 years ago filed in react, angular, javascript, framework, ecmascript, es2015, html, frontend & vue.

To put it in some context: these days recruiters call you whether you know this or that framework. Well not really, really well. But it is just JavaScript. Or ECMAScript (or a flavour of it by Microsoft called TypeScript). But above all it is just a tool to get stuff done. Not every job needs a bulldozer. And besides the bulldozers React and Angular there is Vue.js and plenty more. Choose your tools wisely.

Continue reading...

Try not using Javascript first

An article, posted about 5 years ago filed in javascript, web, front-end, development, html, css, internet, rest & kiss.

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…

Continue reading...

Introducing Web Page Archiver (new ruby gem)

An article, posted more than 9 years ago filed in html, website, ruby, gem, archive, web page archiver, base64, data uri, mhtml, mime html & rubygems by murb.

To the ruby-folks (ruby is a programming language). Just a quick note to inform you that I've coded a new ruby gem:

> Web page archiver is a gem for creating web page archives: single files that contain images, Javascript, CSS, and the actual HTML. Of course you may zip these files, but there is hardly any support for opening and viewing such files without first requiring the user to extract the files before viewing. The solution offered in this gem is either MHTML or HTML with no external references. MHTML (or MIME HTML) is the default archive format for Internet Explorer and Opera, and can also be read in these browsers. HTML with no external references is not written by any browser as a standard archive format (that I know of) but can be read by any browser, as long as it has support for the Data URI-scheme (all modern browsers, although size limits apply to IE8).

More on the Web Page Archiver github page.

Continue reading...

Werkt met internet™

An article, posted about 11 years ago filed in business, internet, future, html, html5, app, toekomst & zakelijk.

Wired redacteur Chris Anderson heeft weer eens een stuk geschreven waar wel weer een tijdje over gepraat gaat worden (Chris Anderson was ook degene die The Long Tail als marketing concept neerzette, en vervolgens ook 'gratis' als businessmodel uitlegde). De titel van zijn laatste artikel: "Het web is dood. Lang leve het internet." In het kort komt het er op neer dat gebruikers langzaam vertrekken van het web als in met hyperlinks verbonden HTML pagina's naar zogenaamde 'apps' (lekker twitterbaar kort voor 'applicaties'). Naar HTML pagina's moet je zoeken, met apps komt het naar je toe. Het voordeel van apps is dat je er misschien wel voor betaald, maar je wel gewoon netjes, op een gecontroleerde manier, de dingen krijgt die je wilt hebben. Of in ieder geval goed genoeg vind.

Het internet wordt steeds volwassener. Waren het gisteren nog vooral technici die droomden van het open internet als ideaal, dan zijn het vandaag jan en alleman die content genereren en bedr…

Continue reading...

Making block elements link

An article, posted about 11 years ago filed in html, snippet, jquery, code, handy, link, block & javascript.

There is no standard way of linking block elements to pages in HTML. But sometimes you do need it. The <a>-element doesn't support any block elements inside (such as <div> etc.). I solve the problem with a jQuery snippet that allows me to simply add 'js_blocklink' to a block elements class and the jQuery code deals with the rest. It does assume that the first link is the 'main link' (also needed for graceful degradation when Javascript for some reason is not available). A bonus feature is that other links may still exist, and stay working. function enableJsBlockLinks() {     $(".js_blocklink").each(function() {         $(this).click(function() {             $(this).find("a").each(function(index) {                 a = $(this).attr("href");                 if (a…

Continue reading...

Should I use styled components?

An article, posted almost 1003 years ago filed in components, react, style, css, html, frontend & coffeeandorange.

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

Continue reading...

murb blog