When I first saw this I tought it was caused by some random element positioned
anywhere, just because this was only happening then using a <code>RTL</code> language, but
it wasn&#39;t. Normally if you add some CSS shadow or outline (which do not alter
the size of any element) everywhere you will find some missleading element. This
is some code
<a href="https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom">suggested in stackoverflow</a>:
<pre><code class="language-css">* {
 outline: 1px solid #f00 !important;
}
</code></pre>
That might highlight elements that are completely off viewport but, what happens
if you only have some 1 pixel scroll? That would be almost not noticeable unless
you review the page with a microscope.
So I started inspecting the DOM, and checking if hidding any element with a
<code>display:none</code> property did anything, but the page I was trying to fix was not
precisely small, and I cannot check every element on the page (technically I
could, but it would take me a lot of time).
<a href="https://css-tricks.com/findingfixing-unintended-body-overflow/">https://css-tricks.com/findingfixing-unintended-body-overflow/</a>
<pre><code class="language-js">Array.from(document.querySelectorAll(&#39;*&#39;))
 .map(
 (element) =&gt; () =&gt;
 new Promise((resolve, reject) =&gt; {
 const previousDisplay = element.style.display;

 element.style.display = &#39;none&#39;;

 requestAnimationFrame(() =&gt; {
 resolve({
 element,
 causesOverflow:
 document.documentElement.getBoundingClientRect().width ===
 document.documentElement.scrollWidth,
 });

 element.style.display = previousDisplay;
 });
 }),
 )
 .reduce(
 (promise, getNextPromise) =&gt;
 promise.then((overflowElements) =&gt;
 getNextPromise().then((result) =&gt;
 result.causesOverflow
 ? [...overflowElements, result.element]
 : overflowElements,
 ),
 ),
 Promise.resolve([]),
 )
 .then(console.log);
</code></pre>
It is not a final solution, but might do the trick or at least highlight some areas
if you have a huge DOM tree to explore.

Discovering which element or elements are causing overflow is not an easy task. This is my odyssey looking for a 1-pixel-width element and fixing the issue.


Finding overflow

Comparison between double and triple igual in JavaScript, and some examples where using double equal might lead to headaches.

JavaScript Equality Table

Unlike other browsers (like chrome), Firefox doesn&#39;t trigger <code>click</code> event or bubble it to parent elements, if a HTML tag is disabled.
This behavior is intended, and documented in bugzilla:
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=218093">bugzilla#218093</a>
So this code won&#39;t do anything in Firefox, but it will in Chrome:
<pre><code class="language-html">&lt;input disabled placeholder=&quot;Click here&quot; type=&quot;text&quot; /&gt;

&lt;script&gt;
 document.body.addEventListener(&#39;click&#39;, () =&gt; {
 alert(&#39;Body clicked!&#39;);
 });
&lt;/script&gt;
</code></pre>
<h3 id="workarounds">Workarounds</h3>
<ol>
<li>Consider using <code>readonly</code> instead of <code>disabled</code> to some input elements, which may make sense depending on the use case.</li>
<li>With some extra HTML and CSS, surround the input with a <code>div</code> and the <code>::after</code> pseudoelement so it propagates clicks to parent nodes.</li>
</ol>
<pre><code class="language-html">&lt;div class=&quot;input-wrapper input-wrapper--disabled&quot;&gt;
 &lt;input disabled placeholder=&quot;Click here&quot; type=&quot;text&quot; /&gt;
&lt;div&gt;

&lt;style&gt;
.input-wrapper {
 position: relative;
}

.input-wrapper--disabled::after {
 content: &#39;&#39;;
 position: absolute;
 inset: 0;
}
&lt;/style&gt;

&lt;script&gt;
 document.body.addEventListener(&#39;click&#39;, () =&gt; {
 alert(&#39;Body clicked!&#39;);
 });
&lt;/script&gt;
</code></pre>
<h3 id="extra-links">Extra links</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inset">Inset CSS property</a>, which is a logical property, and shorthand for top/right/bottom/left.</li>
</ul>

Firefox does not have the same behavior than other browsers when we speak about disabled elements. Here is how this can be result can be equalized.


Disabled input's click event is not fired in Firefox

<pre><code class="language-js">import { useEffect } from &#39;react&#39;;

const KONAMI_CODE = [
 &#39;ArrowUp&#39;,
 &#39;ArrowUp&#39;,
 &#39;ArrowDown&#39;,
 &#39;ArrowDown&#39;,
 &#39;ArrowLeft&#39;,
 &#39;ArrowRight&#39;,
 &#39;ArrowLeft&#39;,
 &#39;ArrowRight&#39;,
 &#39;KeyB&#39;,
 &#39;KeyA&#39;,
].join(&#39;&#39;);

export const useKonami = (callback: () =&gt; void, timeout = 3000) =&gt; {
 useEffect(() =&gt; {
 let code = &#39;&#39;;
 let clearCodeTimeoutId: NodeJS.Timeout;

 const clearCode = () =&gt; {
 code = &#39;&#39;;
 };

 const handleKeyDown = (event: KeyboardEvent) =&gt; {
 clearTimeout(clearCodeTimeoutId);

 code += event.code;

 if (!KONAMI_CODE.startsWith(code)) {
 code = &#39;&#39;;
 }

 if (code === KONAMI_CODE) {
 callback();
 }

 clearCodeTimeoutId = setTimeout(clearCode, timeout);
 };

 window.addEventListener(&#39;keydown&#39;, handleKeyDown);

 return () =&gt; {
 window.removeEventListener(&#39;keydown&#39;, handleKeyDown);
 clearTimeout(clearCodeTimeoutId);
 };
 }, [callback, timeout]);
};
</code></pre>

Executes given callback when Konami Code has been typed by users before a given timeout has expired.


useKonami.js

<pre><code class="language-js">export class Vector {
 /** @param {number[]} components */
 constructor(...components) {
 /** @type {ReadonlyArray&lt;number&gt;} */
 this.components = [...components];
 }

 toString() {
 return `[${this.components.join(&#39;, &#39;)}]`;
 }

 get dimensions() {
 return this.components.length;
 }

 get x() {
 return this.components[0];
 }

 get y() {
 return this.components[1];
 }

 get z() {
 return this.components[2];
 }

 get t() {
 return this.components[3];
 }

 /**
 * Returns the Euclidean length of the vector.
 * @see https://en.wikipedia.org/wiki/Euclidean_vector#Length
 */
 get length() {
 return Math.sqrt(
 this.components.map((x) =&gt; x ** 2).reduce((x, y) =&gt; x + y, 0),
 );
 }

 /**
 * Returns the polar form&#39;s angle of the vector in radians.
 * @throws {RangeError} If vector does not have exactly 2 components.
 */
 get angle() {
 assertFixedComponentCount(this, 2);

 let deltaRotation = 0;

 if (this.x &lt; 0) {
 if (this.y &lt;= 0) {
 deltaRotation += Math.PI;
 } else {
 deltaRotation += Math.PI / 2;
 }
 } else if (this.y &lt; 0) {
 if (this.x === 0) {
 deltaRotation += Math.PI;
 } else {
 deltaRotation += (3 * Math.PI) / 2;
 }
 }

 return Math.atan(Math.abs(this.y) / Math.abs(this.x)) + deltaRotation;
 }

 /**
 * Returns a new Vector by adding all components.
 * @param {Vector} v
 * @throws {RangeError} If given vector doesn&#39;t have same number of
 * components.
 */
 add(v) {
 assertSameComponentCount(this, v);

 return new Vector(
 ...this.components.map((x, index) =&gt; x + v.components[index]),
 );
 }
}

/**
 * @param {Vector} v
 * @param {number} componentCount
 */
function assertFixedComponentCount(v, componentCount) {
 if (v.dimensions !== componentCount) {
 throw new RangeError(
 `Expected ${componentCount} components, but found ${v.dimensions}`,
 );
 }
}

/**
 * @private
 * @param {Vector} v1
 * @param {Vector} v2
 */
function assertSameComponentCount(v1, v2) {
 if (v1.dimensions !== v2.dimensions) {
 throw new RangeError(
 `Different number of components: ${v1.dimensions} vs. ${v2.dimensions}`,
 );
 }
}
</code></pre>

Simple but useful n-dimensional Vector class for animations and games.


Vector.js

Quiero enfocarme, llegar a compartir contenido relevante como muchos otros y así
influir positivamente en la vida de otras personas. Para hacerlo necesito
tener claro un objetivo concreto para dedicar gran parte de mi tiempo (que no
todo mi tiempo) a conseguirlo.
Ayer tuve una epifanía: ésto, compartir las cosas que he aprendido, no es
algo nuevo, es algo que llevo haciendo desde antes de aprender a programar,
desde que vi qué narices era un ordenador y la enorme cantidad de cosas que se
pueden hacer con él. Por ello quiero hacer una recapitulación de quién he sido
hasta ahora y decidir finalmente dónde voy a poner mi foco.
Allons-y
<hr>
Si mal no recuerdo, la primera vez que intenté crear una web por mi mismo fue en
tercero de la E.S.O., hace ya unos... ¿quince años? más o menos. Descubrí algún
tipo de servicio chungo para crear tu propia página web, y si no me equivoco
creé algo así como superpablo.es.tl, poniendo reproductores de Windows Media
Player y cosas por el estilo dignas del Messenger que se usaba por aquel
entonces. Evidentemente no tenía idea de programar, y por supuesto que no sabía ni
siquiera lo que programar significaba exactamente. Sin embargo, lo que sí que me
ocurrió desde el primer día (y es una sensación que sigo conservando) es que era
capaz de invertir una cantidad vergonzosa de horas en que todo se viera
exactamente como yo quería.
En la misma línea, y sólo un poco más adelante, fui creando webs parecidas
enfocadas a un sonoro este soy yo y esto son cosas que quiero compartir.
Algunas páginas basadas en flash, copias de ficheros que encontraba por ahí
manipuladas para que tuvieran los textos que a mí me gustaban. Jamás olvidaré
una tarde enseñando uno de estos resultados del que me sentía particularmente
orgulloso a uno de mis primos, el cual no entendió para nada de qué me servía a
mi producir tal contenido. Él no lo entendía: estaba creando todo eso de la
nada, con un ordenador y cambiando cosas... era como magia.
Mezclaba todo esto con fantasías de IRC, somos hackers que no saben lo que es
programar, buscamos software gratuito que no necesitamos, manipulamos
móviles que se convierten en auténticos ladrillos, _descubrimos Linux_ y
desarrollamos principios y ética. Un festival de la adolescencia y el tiempo
libre.
<img src="/uploads/old-ubuntu-version-loading.jpg" alt="Logotipo de una versión vieja de Ubuntu cargando el sistema de arranque">
Descubrí lo que era linux (más o menos) y que por algún motivo era muchísimo
mejor que windows, claro. Echaba horas dando la chapa sobre la ética del
Software libre frente al privativo, dejando muy claro quienes son los buenos de
la películas y quienes son claramente los malvados. Me empapé de la
<a href="https://es.wikipedia.org/wiki/Ubuntu_(filosof%C3%ADa)">filosofía que iba detrás del nombre Ubuntu</a>
(cosa que aún me fascina, huelga decirlo) y grabé a fuego en mi mente sus ideas
generales.
<blockquote>
Yo soy porque nosotros somos.
</blockquote>
Finalmente alcancé la gloria: en bachillerato descubrí que había una cosa que se
llamaba programar, y que permitía copiar unas cosas llamadas JavaScript
dentro de una página para hacer que ocurrieran otras cosas: nieve cayendo, una
fecha dando vueltas alrededor del cursor, un montón de colores y formas en el
fondo de la pantalla... definitivamente magia. Además, a veces lograba manipular
pequeñas partes de esos textos para hacer que hicieran cosas ligeramente
diferentes (aunque la mayoría de las veces acababa rompiendo todo).
Como parte de este aprendizaje encontré una web llamada
<a href="https://hosting.miarroba.com/">miarroba</a>, la cual te permitía guardar una
página web de hasta 5 megabytes con el contenido que te diera la gana; os
podréis imaginar la fantasía que era para mi algo como eso. He encontrado
incluso
<a href="https://soporte.miarroba.com/3/6838762-preview-de-mi-web/#78110088">algún comentario de mi persona</a>
preguntando que cómo se podía colocar una miniatura de la web en la
configuración 😅. Para guardar dentro de la página necesitaba una cosa que se
llamaba FileZilla, y tenía que escribir algunas cosas como PHP, que vete tú
a saber lo que era eso... pero eso no me detuvo, poco a poco fui elaborando mi
siguiente página (por supuesto otro altar a mi ego adolescente): el rincón del
poeta.
Aquí intenté hacer algo de magia, descubrí que con PHP se podían crear algunas
reglas especiales para hacer contraseñas, y que podías decidir si algunas
personas veían una página o no, una locura. Además empecé a intentar hacer cosas
extremadamente curiosas con HTML, como lograr poner sombras a algunos elementos
(con tablas por supuesto, esto fue mucho antes de que box-shadow apareciera).
Yo no tenía ni idea, pero esto era tan solo un pequeño comienzo las webs seguían
sucediéndose una tras otra, aunque con contenido ligeramente repetitivo hasta
que, llegado el punto en el que empecé la carrera... me enseñaron a programar.

Mi historia en el mundo de la programación, empezando desde antes de saber utilizar un ordenador, utilizado como un momento de reflexión y nostalgia para ordenar mis ideas y seguir evolucionando.


Antes (primera parte)

Participating in this incredible nonprofit iniciative to teach people how to code using HTML, CSS and JavaScript.

TeachT3ch

<pre><code class="language-js">export const useWhatChanged = (name, deps) =&gt; {
 const depsRef = useRef({ ...deps });

 useEffect(() =&gt; {
 const diff = [];
 let showDiff = false;

 Object.entries(deps).forEach(([key, value]) =&gt; {
 if (value !== depsRef.current[key]) {
 showDiff = true;
 }

 diff.push({
 name: key,
 previous: depsRef.current[key],
 current: value,
 areEqual: value === depsRef.current[key],
 });
 });

 if (showDiff) {
 console.log(name);
 console.table(diff);
 }
 }, Object.values(deps));
};
</code></pre>

Logs to the browser console a list of changed values used in a useEffect-like hook.


useWhatChanged.js

Es muy difícil no sentirse atacado cuando no tienes ni idea de lo que haces, o
cuando crees que el martillo que llevas usando toda tu vida es lo único a lo que
tienes acceso. Ojalá llegue a tener la soltura suficiente para aplicar patrones
de diseño como quien no quiere la cosa, para entender cómo funciona un test
runner e implementarlo como si nada; pero a veces lo veo tan lejano que creo
que no ocurrirá nunca.
Es una dualidad bastante graciosa: por una parte, descubres una idea que crees
que es buena y te sientes ascendido, transportado a un nivel increíble en el que
la máquina vuela bajo tus dedos; por otra parte, no haces más que ver fallos y
temer que la solución que llevas barajando varias semanas no sea más que un
desecho. Siempre que digo que no le tengo cariño a mi código, que no me importa
borrar y reconstruir cuantas veces haga falta, pero cuando no ves más allá de tu
propia nariz y sientes la presión de hacer tareas para las que no estás
preparado... es difícil, muy difícil.
Me pregunto si cuando eres una especie de semidios de la ingeniería te sientes
igual o comprendes que realmente dominas la materia -supongo que será una mezcla
de ambas sensaciones, pero quién sabe-. Pero bueno, acabo de terminar de migrar
mi Web a NextJS, he sacado 98 en Google Page Speed en versión móvil. La verdad
es que estoy bastante orgulloso, sobretodo porque he ido aprendiendo alguna cosa
interesante por el camino.
Espero que este nuevo comienzo dure bastante.
Hola a todos :3

Hace varios meses tenía la firme idea de que crear una arquitectura de una aplicación con React+Redux era una solución maravillosa que iba a ayudarnos a hacer un editor de páginas increíble. Estaba equivocado, no lo sabía, y no quería saberlo.


Sobre errores, refactorización y falta de ideas

Videos about software development, mostly about FrontEnd, but also learning new programming languages and other interesting topics.

Twitch Channel

NodeJS based CLI that manages my regular GitHub and Jira workflow with small and opinionated scripts.

Seniore

Chrome extension that overrides the new tab page allowing taking notes with some syntax sugar and seeing a minimal bookmark list.

Holi

Corporate presentation about new features that I was working on during 2019 in Liferay.

Empowering Business Users to Create Sites and Pages With Full Autonomy

Breve exploración sobre por qué las animaciones son importantes en una aplicación y programación en vivo sombre cómo optimizar una animación con CSS y JavaScript.

60 Frames of Animations

Corporate workshop speaking about 'Fragments', a new Liferay feature we published on 7.1 release.

Pablo Molina

Tesera #talk

🎭 Empowering Business Users to Create Sites and Pages With Full Autonomy

🎞️ 60 Frames of Animations

👨‍💻 Hands-on experience with Modern Site Building

Pablo Molina

Tesera#talk

Tesera #talk