Kasper Tidemann - human, developer, businessman, man of the world.
From our hands we give.

Jo Liss on the JavaScript Jabber show

Jo Liss, the creator of Solitr and broccoli, was recently on the JavaScript Jabber show to talk about broccoli.

Jo goes into detail about the differences between the asset pipeline in Ruby on Rails and backend-agnostic tools like broccoli. She explains common challenges like how the compile time of SASS projects are linear to the amount of files contained in the project, and how tools like make leverages timestamps to create incremental builds in order to address this.

Whether you have an interest in build tools or not, Jo’s thoughts on the matter are well worth a listen.

How much does it cost to make an app?

Every single web developer has tried answering the same two questions over and over again: how long time does it take and how much does it cost to make an app?

While the questions are reasonable themselves, sometimes the expectations of the people asking the questions are not. No matter how seemingly simple an app might be, chances are it takes more than just pulling an all-nighter fueled by boatloads of energy drinks to create the next big thing.

On that note, the digital agency SFCD has published a blog post covering the various aspects of a project from working with the concept to publishing the app. A short, sharp read.

Updating all packages in Go

When developing Go, you typically install a bunch of packages using go get to support additional functionality besides the standard library.

A common scenario is to update all installed packages to their latest versions. To make this happen, simply run go get -u all. Happy coding!

How to repeat a background SVG image in Internet Explorer 10

For whatever reason, Internet Explorer 10 does not support the repeating of SVG-based background images out of the box. That is, not unless the markup is changed a bit. Here is an example of the <svg> element inside an SVG file:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve">

We need to make Internet Explorer 10 preserve the aspect ratio by slicing the image accordingly. For this to happen, preserveAspectRatio="none slice" should be added to the <svg> like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 50" enable-background="new 0 0 149 50" xml:space="preserve" preserveAspectRatio="none slice">

Save the file and try refreshing the page in Internet Explorer 10. You should see your image beautifully repeated now.

Perception in Visualization

I’ve been working intensely on user interfaces the past couple of years. From improving and adding tiny details to developing everything from scratch, it’s always a challenging proposition to obtain the kind of balance and intuitiveness that result in an immediate understanding whenever somebody looks at what you have created. There’s no recipe set in stone for achieving this.

That said, digging into the field of human-computer interaction reveals some interesting studies conducted from way back at the infancy of computer science and onwards up until today. Some of these studies borrow from the field of vision research, introducing the term known as pre-attentive processing:

For many years vision researchers have been investigating how the human visual system analyses images. An important initial result was the discovery of a limited set of visual properties that are detected very rapidly and accurately by the low-level visual system. These properties were initially called pre-attentive, since their detection seemed to precede focused attention.

The above quotes an interesting paper, Perception in Visualization, by Christopher G. Healey. Understanding how the visual system analyses images – or imagery as seen on the web based on HTML and CSS – is a key piece in creating the magic touch of a user interface.

Worth noting is the part about change blindness discussed in the paper. Change blindness is something we all suffer from in the sense that we have a hard time identifying changes in images over time unless these changes are animated. This paves the way for finally ditching the notion that animations are superfluous eye candy – they are most certainly not.

I recommend reading the entire paper for more insight into perception and for improving your design skills as a whole.

Intro.js – better introductions for websites

The art of creating a better onboarding experience is gaining focus rapidly these days. For instance, the difference between signing up for twitter versus Slack is enormous with the Slack team clearly having put much energy into creating the best possible experience.

Typically, onboarding contains some kind of highlighting the features you’re looking at on screen. Making this process easier is just what Intro.js is about.

Basically, you have a bunch of divs in your markup containing text, buttons and so on. If you add data-step="1" and data-intro="This is an explanation!" to a div, Intro.js will pick it up as the first step in introducing whatever you wish on your site.

This is a clever project in line with creating better signup experiences for all.

Card – make your credit card form better in one line of code

Setting up payment options for the next big thing you’re just about to launch can be somewhat of a pain. Not only do you have to integrate with oftentimes curiously-looking APIs, it also has to be a pleasant experience for others to give you money.

Jesse Pollak has taken a stab at the latter with his Card project. It’s a JavaScript-based drop-in for setting up and styling a div with common payment options. Card identifies the kind of credit card you’re using based on what you type in and sports some neat transitions between payment steps. Check it our for yourself at GitHub.

Eloquent JavaScript

In the JavaScript world, one of the classic must-reads when starting out – or brushing up your skill set – is Eloquent JavaScript by Marijn Haverbeke.

Buying the book is certainly an option, yet it just became possible to read the book online due to the Creative Commons licensing. It’s worth diving into just for the illustrations alone.

Happy reading!

Riak 2.0.0 RC1 and CRDTs

Basho has officially released Riak 2.0.0 RC1. This is an exciting new release that contains features such as the reborn search engine and CRDTs – conflict-free replicated data types.

The latter aims at making conflict resolution easier. Instead of stored data being opaque, the idea is to let the database know about the actual data it contains, paving the way for automatic merging instead of having to choose between two or more siblings when a conflict happens.

Christopher Meiklejohn has compiled an excellent list of readings in CRDTs. Whether you’re looking at upgrading a cluster or setting up a new one, the list is a highly recommended resource to help you get the most of Riak 2.0.

Breach – a browser for the HTML5 era

It seems Jeff Atwood was right when he proposed that everything that can be written in JavaScript will eventually be written in JavaScript. First, applications like Atom and Brackets entered the stage. Now, there’s Breach.

Breach is a browser written entirely in JavaScript using Chromium for the layout engine and Node.js for handling tabs, plug-ins etc. on a per-process basis.

This will be an interesting project to follow. The source code is freely available on GitHub.

Kasper Tidemann