18 Articles


2 years Ago

Why you shouldn’t use Bootstrap when you have a styleguide

Published by urs on

From a customer, we got the request to apply a visual style guide (VSG) to a Bootstrap-based application. Since we do have a lot of experience with applying style guides on web applications and styling in general, we accepted the job and started to evaluate the details.

Which version of Bootstrap to use

The most recent stable version of Bootstrap is 3.3.6. However, when you go to the Bootstrap website, there is an announcement that Bootstrap 4 “is coming”. The current state of Bootstrap 4 is... [More]

3 years Ago

Optimizing compilation and execution for dynamic languages

Published by Marco on

The long and very technical article Introducing the WebKit FTL JIT provides a fascinating and in-depth look at how a modern execution engine optimizes code for a highly dynamic language like JavaScript.

To make a long story short: the compiler(s) and execution engine optimize by profiling and analyzing code and lowering it to runtimes of ever decreasing abstraction to run as the least dynamic version possible.

A brief history lesson

What does it mean to “lower” code? A programming language... [More]

4 years Ago

Converting an existing web application from JavaScript to TypeScript

Published by urs on

TypeScript is a new programming language developed by Microsoft with the goal of adding static typing to JavaScript. Its syntax is based on the ECMA Script 6 standard, which is currently being defined by a consortium. There are features in the languages most developer know well from other languages like C#: Static Types, Generics, Interfaces, Inheritance and more.

With this new language, Microsoft tries to solve a problem that many web developers have faced while developing JavaScript: Since... [More]

Learning HTML5 basics

Published by Marco on

We recently put together a list of links and references that would be useful for anyone interested in getting up to speed on HTML5 development. These are what we consider to be the absolute basics—what you need in order to even begin discussing more complex issues of architecture, tiering, data-binding, MVC and so on. So, imagine you are participating in an HTML5 course at Encodo—you’d probably get something like the following article in order to make sure you’re ready.

HTML5 prerequisites

... [More]

5 years Ago

Some new CSS length units (and some lesser-known ones)

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

I’ve been using CSS since its inception and use many parts of the CSS3 specification for both personal work and work I do for Encodo. Recently, I read about some length units I’d never heard of in the article CSS viewport units: vw, vh, vmin and vmax by Chris Mills (Dev.Opera).

  • 1vw: 1% of viewport width
  • 1vh: 1% of viewport height
  • 1vmin: 1vw or 1vh, whatever is smallest
  • 1vmax: 1vw or 1vh, whatever is largest

These should be eminently... [More]

A rant in O–minor (the decline and fall of the Opera browser)

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

Opera has officially released their first desktop browser based on the Blink engine (forked from WebKit). The vision behind Opera 15 and beyond by Sebastien Baberowski (Desktop Team) explains how Opera 15…

…is dead on arrival.[1]

Choose your market

For years, Opera has held a steady 1.7–2% of the desktop browser market. This seems small but comprises dozens of millions of users. More capitalist heads have clearly prevailed at Opera. They’ve... [More]

The HTML5 AppCache and HTTP Authentication

Published by Marco on

The following article outlines a solution to what may end up being a temporary problem. The conditions are very specific: no server-side logic; HTTP authentication; AppCache as it is implemented by the target platforms—Safari Mobile and Google Chrome—in late 2012/early 2013. The solution is not perfect but it’s workable. We’re sharing it here in the hope that it can help someone else or serve as a base for a better solution.

The HTML5 AppCache

The application cache is a relatively new... [More]

asm.js: a highly optimizable compilation target

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

The article Surprise! Mozilla can produce near-native performance on the Web by Peter Bright (Ars Technica) takes a (very) early look at asm.js, a compilation target that the Mozilla foundation is pushing as a way to bring high-performance C++/C applications (read: games) to browsers.

The tool chain is really, really cool. The Clang compiler has really come a long way and established itself as the new, more flexible compiler back-end to use... [More]

Networking event #1 2013: Working with HTML5

Published by Marco on

Our first networking event of the year is scheduled for tonight (19.04) with a presentation on HTML5 development. The talk, to be presented by Marco, will cover our experiences developing a larger project for the web.

Here’s the main overview:

  • Project parameters: what did we build?
  • Components, libraries and features
    • HTML5 tags & objects
    • CSS3 concepts
    • jQuery basics
  • Tools
    • IDE & Browser
    • Testing & Optimization

You can find the entire presentation in the documents section.

Updating to a touch-friendly UI

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

I was recently redesigning a web page and wanted to make it easier to use from touch-screen browsers. Links made only of text are relatively easy to click with a mouse, but tend to make poor touch targets. If the layout has enough space around the link, this can be remedied by applying CSS.

The basic box

Suppose we have a box with three links in it, as shown to the right.

Setting the height

... [More]

The Next Opera Next Browser

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

 Opera started a public beta-testing program a few years ago called Opera Next. Whereas the stable version naturally moved along more slowly—but always rock-solid—Opera Next often had a more up-to-date HTML/CSS renderer (code-named Presto) and Javascript engine (code-named Carakan). Opera recently anounced that future versions—Opera Next Next—would be built on the WebKit HTML/CSS renderer and Google’s... [More]

9 years Ago

Debugging PHP

Published by Marco on

This article originally appeared on earthli News and has been cross-posted here.

PHP is a programming language like any other; like any other, it’s possible to construct a bug complex enough that it can only reasonably be solved with a debugger. Granted, most PHP code is quite simple and limited to single pages with single include files and a limited library or framework. However, the advent of PHP5 has ushered in more than one team with the courage to build a full-fledged web framework. You... [More]

11 years Ago

Objects In JavaScript

Published by Marco on

JavaScript is a nominally object-oriented language with extremely loose typing. However, it is possible to build objects which are based on class definitions, or prototypes in JavaScript parlance. Any object in JavaScript can have properties and methods attached to it—at any time. A prototype is nothing more than a function call which returns a generic object configured in a specific way.

Objects are created with the new operator; any function can be used as a constructor. Use the this... [More]

Inheritance In JavaScript

Published by Marco on

Objects in JavaScript showed you how to build and instantiate classes in JavaScript. The flexible prototype mechanism can also be used to effect a form of inheritance.

Assigning an Ancestor

Since an object definition is simply a function call which applies properties and methods to a generic object, inheritance is a series of chained function calls, all acting as constructors. The descendant simply calls the function for its ancestor, so it can set up inherited methods and properties. The... [More]

Countdown Timer Object

Published by Marco on

This tutorial expands on the timer built in Countdown Timer Basics. In that example, we ended up with the following code for displaying a countdown timer in an HTML page.

var StartValue = 10;

setTimeout ("HandleTimeout()", 1000);

function HandleTimeout ()
  var CountDownElement = document.getElementById ("countdown");
  CountDownElement.innerHTML = StartValue;
  setTimeout ("HandleTimeout()", 1000);

We will take this example and convert it to an object, so that a page... [More]