Lazy loading the lazy way

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

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…

Variable fonts

Last decade the web has been catching up with print. The advent of better delivery formats for type (WOFF(2)) and the rise of services such as Typekit and Google Fonts made the web for typography as interesting as print. But now a new specification is gaining popularity, and it may make the web more interesting than print: variable fonts.

Some background: In word processors you can typically choose between a few basic type variants Bold, Italic and Bold Italic. Some types appear with a 'Black' or 'Light' version in the font list. More professional products for graphic professionals (think Illustrator, Indesign, QuarkXpress), paired with a complete font-family, are, however able set type using 'font-weight'. While CSS has a font-weight-property, offering 'variable' weights (typically rounded to the nearest 100) to a web page would make that page load much slower. …

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…

Bereik meer met toegankelijkheid: inclusive design

Meer mensen bereiken, waarom dan niet alle mensen? Een paar weken geleden volgde ik een cursus van Peter van Grieken van Frozen Rockets. Hij wees ons er op dat 300.000 mensen in Nederland slechtziend of volledig blind zijn. Daarnaast zijn er bijna 700.000 mensen die kleurenblind zijn en dan hebben we 825.000 dyslectici en 1,5 miljoen laaggeletterden nog niet geteld. Doe je veel met video of geluid dan is het belangrijk om te weten dat er ook nog eens 1,3 miljoen mensen slechthorend of doof zijn. En dat naast 1,5 miljoen lichamelijk beperkten. Dat zijn 4 miljoen mensen met enige vorm van beperking (bron).

Screenshot van het project "Wayfinding for the blind", een onderzoek dat ik tijdens mijn studie (2006) mede had opgezet op de TU/e.

Het was schokkend om te zien dat zelfs grote sites als die van CoolBlue eigen…

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…

Lost identity: Facebook's Instant Articles

Admittedly, I was a sceptic from the start when Facebook announced its instant articles with its promise to deliver blazingly fast loading articles. The technology would be ideal for publishers who'd want to deliver the best experience to their end users on Facebook. I wondered: why couldn't publishers simply remove all third party clutter and make their own sites blazingly fast? But that is not what I want to discuss here. The Guardian was one of the first news papers to implement the new Facebook Instant Article technology. The thing that disturbs me is that the blazingly fast speed comes at a price: loss of identity.

In recent years the web has become more and more a place where design can thrive. HTML5, CSS3, web fonts… the possibilities are endless these days. Designs of the web outlets of major publishers are on par with their traditional paper-based designs. Which makes that even details in the article's mark-up …

Mijn werk: Concordia weekoverzicht

murb bestaat inmiddels een aantal jaar, daarom lijkt het me leuk om de komende blogposts een aantal mooie resultaten te delen. Als eerste in de rij: Het Concordia Weekoverzicht.

Wat is het?

Concordia, een culturele instelling in Enschede, brengt iedere week een weekoverzicht op A5-formaat uit. De weekoverzicht tool die ik voor hen heb gebouwd maakt het mogelijk deze zonder veel moeite wekelijks uit te draaien.

Het probleem

Tot zomer 2015 was het maken van het weekoverzicht een repetitieve handmatige invuloefening met dure en ingewikkelde Adobe software, terwijl de meeste gegevens keurig waren opgeslagen in hun ticketsysteem en de kijkwijzer-database. Het voordeel van de Adobe-pakketten was weliswaar oneindige mogelijkheden qua opmaak, maar in de praktijk was het eindproduct telkens vrijwel hetzelfde. Ondertussen koste het handmatig opmaken dus relatief veel tijd en kunde.

De oplossing

Het volledig automatisch genereren van e…

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…

Je moet er toch voor betalen, waarom dan niet met geld?

Centrale opslag, of toch thuis, veilig in eigen beheer? Het is een vraag die de gemiddelde consument weinig zal bezig houden, alhoewel: films zoals "Sex Tape"[^1] wijzen er op dat met cloudopslag gemakkelijk de fout gemaakt kan worden om alles publiek te zetten (in de film wordt een voor thuisconsumptie bedoelde opname automatisch geüpload naar de cloud die het toegankelijk maakt voor alle vrienden en kennissen)… stond alles nog maar gewoon lokaal is dan (zo neem ik aan) ook de boodschap van die film. En geheel onterecht is dat niet eens. Maar toch, centraal heeft ook voordelen. Misschien moet je alleen wel de juiste diensten kiezen…

Ik heb al wel eens eerder geageerd tegen de hang naar centralisatie. Maar centralisatie heeft natuurlijk ook voordelen. Vooral wanneer het neerkomt op het beheer van de zaken: je hebt er geen omkijken meer naar. Wanneer je thuis een computer speciaal voor bijvoorbeeld e-mail zou moeten i…

Ontmaskeren van technologie-hypes

In een vorige post over het concept achter de hypes schreef ik over hoe ik onderscheid maak tussen een duurzame trend, het concept, en een hype.

Achteraf oordelen dat iets een hype was is echter gemakkelijk, dus hierbij een voorspelling. Even de 'regels' herhalen:

> De trend (en doel) voor het internet, die zich vanaf het begin heeft ingezet, is: informatie zo goedkoop, handig en snel mogelijk overal beschikbaar maken. Big data, personal cloud, Twitter, prijsvergelijkers, en vele andere hypes passen hier in. Dat is wat ‘de technologie wil’. Maar of je zou moeten investeren in de hype voor de langere termijn moet er toch op zijn minst aan de volgende voorwaarden worden voldaan: > 1. Het moet open zijn > 2. Het moet aanpasbaar zijn > 3. Het moet flexibel zijn.

Hypes vroegtijdig herkennen is niet alleen leuk om te doen, het houd je ook nuchter in een snel veranderende wereld. Goed. Met de bovengenoemde reg…

Gegevens moeten zo min mogelijk onderweg zijn

Zou het mogelijk zijn om vuistregel te definiëren voor of iets nu beter een online applicatie kan zijn, draaiend op een externe server, of een lokaal draaiende app? In de evolutie van computer systemen lijkt het er op alsof we steeds zitten te flip-floppen tussen het draaien van de applicatie op het apparaat dat we gebruiken en het draaien van de applicatie op een apparaat ver weg. Vroeger hadden we terminals gekoppeld aan mainframes, toen kwamen er desktop PC's die alles lokaal deden en nu twijfelen we tussen Apps lokaal en webapps in “de cloud”, ook ik.

Gevoelsmatig zeg ik (op dit moment): Krantenapps? TV apps? Geen lokale apps: gewoon volledig online. Fotografeer apps, tekstschrijf apps, zinvol, waarom online doen? Maar het interessante is natuurlijk het grijze midden. De door jouw geselecteerde muziek? Een feedreader, met feeds die jij hebt geselecteerd? Schrijfapplicaties die je in staat stellen samen te werken…

[Ambacht] Lettertypen op het web

Het wordt weliswaar steeds gemakkelijker om speciale lettertypen te gebruiken, maar het probleem blijft: chaos, en licenties. Terugkijkend is het misschien meer een hype en de nu gemakkelijk Zo vond ik enige tijd geleden een handig overzichtsartikel van Smashing Magazine over diensten die het gebruik van andere lettertypes eindelijk eens op een volwassen niveau brengen (en nee, niet met vuile Flash technieken), op aanvulling op m’n andere bookmarks rondom @font-face. Maar onderliggend bestaat nog steeds het licentie probleem: De lettertypes waarmee je lokaal, op je eigen machine mee werkt, zijn niet bij lange na niet de fonts die je op internet zomaar mee kunt meeleveren. Of je krijgt te maken met DRM achtige constructies, hetgeen het cross browser implementeren niet gemakkelijker maakt. Dus eigenlijk is de enige oplossing je vrijheid voortijdig inperken (maar dat is inherent aan het werk van een designer op het web) en een aparte set maken op je computer van fonts die je probleemlo…