You're in
Iker Hurtado's pro blog
Developer | Entrepreneur | Investor
Software engineer (entrepreneur and investor at times). These days doing performant frontend and graphics on the web platform at Barcelona Supercomputing Center

The css vertical-align issue

11 Aug 2017   |   iker hurtado  
One issue that comes up from time to time when I'm laying out a web design is controlling the height of text or images inside an inline box. In this post I want to set a simple way to achieve it.

The height of the base of elements (text or images) inside inline boxes is controlled by the css property: vertical-align.

I haven't test it out deeply but I think the effect of some values (text-top, middle, etc) aren't so intuitive as it might seem. On the other hand the kind of value that's worked always for me is the percentage one. So for now, until I understand the rest of the value kinds, I'll use this option:

vertical-align: 20%;

[book] Understanding ECMAScript 6

25 Oct 2016   |   iker hurtado  

Published: 2016 - 322 pages

My brief

I wanted to get started with ECMAScript 6 version of Javascript and this book fitted my needs.

In addition to explain perfectly the new features of ECMAScript 6, it does contextualize the problem that each new feature wants to solve coming from the older versions, the evolution of the language. It's a very good way to learn the new version and, at the same time, go deeply into the language.

The book web page: Understanding ECMAScript 6

[book] Web Audio API

25 Oct 2016   |   iker hurtado  

Published (first edition): March 2013 - 63 pages

My brief

This brief book is a good introduction to the native capability of the web browser as sound and music player.

The book teaches at the same time and with examples sound and music concepts and the JavaScript API that the browser makes available to the programmer.

The book web page: Web Audio API | O'Really

[book] SPA Design and Architecture: Understanding Single Page Web Applications

25 Oct 2016   |   iker hurtado  

Published: 2016 - 312 pages

My brief

This is a good book to enter the Simple Page Application world. The main architectural concepts (modularity, routing, inter-module interaction, etc) of this kind of applications are very well exposed.

On the other hand, the book explains how to choose frameworks or libraries, the strengths and weaknesses of each. There are quite a lot code and examples.

The innerHTML=+ issue

25 Oct 2016   |   iker hurtado  
The only noticeable issue I suffered building my first vanilla JavaScript SPA (NOMAD/Encyclopedia web client) was the mysterious removal of event handlers of elements inside element being updated through the innerHTML attribute. The cause is quite obvious. Because of that, the purpose of this entry is mainly as a remainder.

This post is exactly about this problem: Manipulating innerHTML removes events – Friendly Bit. The key point here is that the String type is immutable:

Obviously, events on an element cannot be retained if the element is replaced by a completely different string using innerHTML. You basically throw away that part of the DOM and write it new.

Adding using the unary + (“+=”) is just a “shorthand” for reading, adding, and reassigning values.

Modifying innerHTML causes the content to be re-parsed and DOM nodes to be recreated, losing the handlers you have attached.

A very good alternative seems the Element.insertAdjacentHTML() method.