18 articles

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

Published by urs on in Web: HTML/CSS/JS

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 alpha and the last blog post is from December 2015 which is almost half a year ago. It also is not clear, when version 4 finally will be available and stable and so we had to use the old Bootstrap 3 for this project.

But even here, there is some obscurity going on: Bootstrap was initially developed with LESS but for some reason they decided to switch to SASS. Even if we prefer to use LESS at Encodo, we decided to use SASS for this project to be able to upgrade to Bootstrap 4 more easily when... [More]

Optimizing compilation and execution for dynamic languages

Published by Marco on in Web: HTML/CSS/JS

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 has a given level of abstraction and expressiveness. Generally, the more expressive it is, the more abstracted it is from code that can actually be run in hardware. A compiler transforms or translates from one language to another.

When people started programming machines, they used punch cards. Punch cards did not require any compilation because the programmer was directly speaking the language that the computer understood.

The first layer of abstraction that most of us—older... [More]

Converting an existing web application from JavaScript to TypeScript

Published by urs on in Web: HTML/CSS/JS

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 the code is not compiled, an error is only detected when the browser actually executes the code (at run time). This is time-consuming, especially when developing for mobile devices which are not that easy to debug. With TypeScript, the code passes through a compiler before actually being executed by a JavaScript interpreter. In this step, many of the errors can be detected and fixed by the developer before testing the code in the browser.

Another benefit of static typing is that the IDE is able... [More]

Learning HTML5 basics

Published by Marco on in Web: HTML/CSS/JS

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

This section describes the knowledge prerequisites for course participants.

Since the course includes a significant hands-on component and will discuss the advantages and disadvantages of architecture-level concepts, a minimum level of proficiency in some basic topics is required.

  • Prerequisites include online resources that can be used to gain the minimum required level of proficiency. The resources are there to help participants learn about a topic. Participants that are already familiar... [More]

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

Published by Marco on in Web: HTML/CSS/JS

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 useful for responsive designs. While there is wide support for these new units, that support is only available in the absolute latest versions of browsers. See the article for a good example of how these can be used.

While the ones covered in the article are actually new, there are others that have existed for a while but that I’ve never had occasion to use. The Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units (CSS Values and Units Module Level 3) section lists the following units:

  • em: This one is well-known: 1em is equal... [More]

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

Published by Marco on in Web: HTML/CSS/JS

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 struck out for a more lucrative market. Instead of catering to the 2% of niche, expert users that were die-hard, loyal fans, they will create a clone of Chrome/Firefox/Safari that will cater to a much, much wider market.

In terms of fiscal reasoning, it’s not hard to see why they’re going in this direction. They will abandon their previous user base—the hardcore market—to the thankless chore of downloading and configuring their browsers with buggy extensions that offer half-implemented versions... [More]

The HTML5 AppCache and HTTP Authentication

Published by Marco on in Web: HTML/CSS/JS

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 feature that is,

  • Supported by all modern browsers
  • Uses a manifest file that indicates which files to cache
  • Browser checks manifest for changes
  • If there are changes, all files are refreshed
  • External links work when online
  • When offline, the application works with the local cache
  • External links to non-cached content are redirected to fallback links

AppCache Limitations

Web applications can use the HTML5 application-cache to store local content, but different browsers apply different restrictions... [More]

asm.js: a highly optimizable compilation target

Published by Marco on in Web: HTML/CSS/JS

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 (Apple’s XCode has been using it since version 3.2 and it’s been the default since XCode 4.2). Basically, Mozilla hooked up a JavaScript code generator to the Clang tool-chain. This way, they get compilation, error-handling and a lot of optimizations for free. From the article,

“[The input] language is typically C or C++, and the compiler used to produce asm.js programs is another Mozilla project: Emscripten. Emscripten is a compiler based on the LLVM compiler infrastructure and the Clang C/C++... [More]”

Networking event #1 2013: Working with HTML5

Published by Marco on in Web: HTML/CSS/JS

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 in Web: HTML/CSS/JS

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

The first step is to make this box taller, so the logical thing to do is to set the height. We’ll have to pick a value, so set height: 40px on the gray box.

Aligning vertically

This isn’t exactly what we want, though; we’d rather have the vertical space equally distributed. Also, if you hover over the links, you can see that the space below the text is not active. Maybe we can try to add vertical-align: middle to align the content.

Unfortunately, this... [More]