Using Tippy.js with Turbolinks

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

Lazy loading the lazy way

An article, posted almost 2 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 2 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 about 2 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 3 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 3 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 4 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 8 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 10 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 10 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...

HTML 5, cutting edge?

An article, posted more than 10 years ago filed in w3, html, html5, xhtml, canvas & technology.

I recently started my own business. Hence I am in need of a consistent style. That also includes a style for print. Since love the web, I thought I should use a proper CSS print template, instead of having a Word / OpenOffice Writer or whatever template. But print-quality CSS-print stylesheets? I had to go back to researching HTML and CSS again, something I gave up when standards more or less settled on CSS2 and XHTML1 and only browser vendors had to catch up with the standards. Roles have changed now, browser vendors like those behind Safari, Chrome, Firefox, Opera are pushing the standards to another level. But things are so chaotic! It seems we're going back to 1997, the year Internet Explorer 4 was released, pushing the limits of the standards way beyond what was possible at that time with cool effects, 3D plugins and more.

While the W3 consortium was working slo…

Continue reading...

'Embedding' QuickTime

An article, posted more than 17 years ago filed in html, online, video, standards, quicktime, movies & embedding.

There seems to be a problem with embedding quicktime video when XHTML strict is being used. Solving our problem with the <embed>-tag is no option. But do we have, to have quicktime working on (@ Windows machines) for IE as well as Mozilla users, to use non-validating code, or work with javascript workarounds?Update: More up to date information on this matter can be found on age's site. Embedding Quicktime video is not as easy for a webdesigner as one would guess. Simply using the <object>-tag following the rules set by the w3c doesn't work (for Mozilla it does, but not for IE).I try using the data tag for referring to the original content, and the type attribute for assigning the right mimetype.

	<object data="test.mov" type="video/quicktime" style="width:380px;  height:285px;">   
		   <p>Error Text or alternative object, or alternative  image...</p>
  </object>
	
	Result: (Mozilla wor...

Continue reading...

Webstandaarden

An article, posted almost 18 years ago filed in web, html, internet, standaarden, hypertext, validatie & toegankelijkheid.

In dit artikel zal getracht worden het duidelijk te maken waarom er webstandaarden zijn en waarom deze richtlijnen opgevolgd zouden moeten worden door informatie ontwerpers. Het web Als we het hebben over internet denken wij in de eerste plaats aan het World Wide Web (WWW). Het WWW bestaat nog niet eens zo lang, maar is een erg belangrijk medium geworden voor informatieverschaffing. Het WWW is een geheel van HyperText documenten. Dit zijn documenten die in staat zijn naar elkaar te verwijzen. Het World Wide Web is een geheel van documenten die geschreven zijn in een taal die HTML wordt genoemd, HyperText Markup Language.

HTML HTML is hypertext. Dit wil zeggen tekst die niet-lineair doorverwijst naar andere teksten. Dit principe is bedacht om informatie zo 'rijk' mogelijk te maken; wanneer een bepaald onderwerp zijdelings ter sprake komt in een bepaald artikel, kan voor meer informatie doorverwezen worden ('links') naar een andere HTML-pagina op…

Continue reading...

Introductie tot Cascading Stylesheets

An article, posted almost 19 years ago filed in web, design, html, css, px, lettertypes, basis, cursus, introductie & tutorial.

Inleiding

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

Should I use styled components?

An article, posted about 1002 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