Currently, at work, we are implementing some beautiful custom inputs for our
Page Editor (a WYSIWYG editor that is being used inside Liferay). When I found
that I needed to create a custom <code>&lt;select&gt;</code> element, I though it would be as
easy as creating a simple dropdown with a bit of JS.
I didn&#39;t now how wrong I was until I started investigating about how select
works and which aria-roles could I use to emulate it&#39;s behavior. There is no
exact <code>select</code> role, but I found that using a combination of <code>haspopup</code>,
<code>listbox</code> and <code>option</code> gives a valid result that can also be made accessible.
<img src="/uploads/custom-dropdown-preview.png" alt="Custom dropdown preview">
This HTML is more or less based on a W3C collapsible dropdown listbox demo
(linked below) with a custom JavaScript implementation to manage keyboard
navigation and some click events.
These are some interesting articles and videos I found during my investigation
(thanks to <a href="https://twitter.com/edalgrin">Eduardo Allegrini</a> for his help 😄):
<ul>
<li><a href="https://www.webaxe.org/accessible-custom-select-dropdowns/">Accessible Custom Select Dropdowns</a>.</li>
<li><a href="https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/">Striking a Balance Between Native and Custom Select Elements</a>.</li>
<li><a href="https://www.crowdcast.io/e/the-future-of-html/1">The Future of HTML Controls</a>.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">ARIA: listbox role</a>.</li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html">Collapsible Dropdown Listbox Example</a>.</li>
</ul>
<h3 id="demo">Demo</h3>
<pre><code class="language-html">&lt;link
 rel=&quot;stylesheet&quot;
 href=&quot;https://unpkg.com/clay-css@2.23.4/lib/css/base.css&quot;
/&gt;
&lt;link
 rel=&quot;stylesheet&quot;
 href=&quot;https://unpkg.com/clay-css@2.23.4/lib/css/bootstrap.css&quot;
/&gt;
&lt;link
 rel=&quot;stylesheet&quot;
 href=&quot;https://unpkg.com/clay-css@2.23.4/lib/css/atlas.css&quot;
/&gt;

&lt;style&gt;
 html {
 padding: 2em;
 min-height: 400px;
 }

 #custom-dropdown {
 position: relative;
 }

 #custom-dropdown .form-control {
 position: relative;
 }

 #custom-dropdown .form-control::after {
 content: &#39;▼&#39;;
 position: absolute;
 right: 0;
 top: 0;
 padding: 1ch;
 font-size: 0.875em;
 color: inherit;
 opacity: 0.8;
 background: inherit;
 }

 #custom-dropdown .dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 }

 #custom-dropdown .dropdown-item {
 cursor: pointer;
 }
&lt;/style&gt;

&lt;div id=&quot;custom-dropdown&quot; class=&quot;form-group&quot;&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;option&quot; /&gt;
 &lt;span id=&quot;label&quot; class=&quot;sr-only&quot;&gt;Select option:&lt;/span&gt;

 &lt;button
 id=&quot;button&quot;
 class=&quot;form-control text-left&quot;
 type=&quot;button&quot;
 aria-haspopup=&quot;listbox&quot;
 aria-labelledby=&quot;label button&quot;
 &gt;&lt;/button&gt;

 &lt;div class=&quot;dropdown-menu&quot;&gt;
 &lt;ul
 id=&quot;listbox&quot;
 class=&quot;list-unstyled&quot;
 role=&quot;listbox&quot;
 aria-labelledby=&quot;label&quot;
 &gt;
 &lt;li
 id=&quot;option-a&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-a&quot;
 &gt;
 Option A
 &lt;/li&gt;
 &lt;li
 id=&quot;option-b&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-b&quot;
 &gt;
 Option B
 &lt;/li&gt;
 &lt;li
 id=&quot;option-c&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-c&quot;
 &gt;
 Option C
 &lt;/li&gt;
 &lt;li
 id=&quot;option-d&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-d&quot;
 &gt;
 Super Option D
 &lt;/li&gt;
 &lt;li
 id=&quot;option-e&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-e&quot;
 &gt;
 SuperMega Option E
 &lt;/li&gt;
 &lt;li
 id=&quot;option-f&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-f&quot;
 &gt;
 Mega Option F
 &lt;/li&gt;
 &lt;li
 id=&quot;option-g&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-g&quot;
 &gt;
 Another Option G
 &lt;/li&gt;
 &lt;li
 id=&quot;option-h&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-h&quot;
 &gt;
 Option H
 &lt;/li&gt;
 &lt;li
 id=&quot;option-i&quot;
 class=&quot;dropdown-item&quot;
 role=&quot;option&quot;
 data-option-value=&quot;option-i&quot;
 &gt;
 Last Option I
 &lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
 const RAPID_TEXT_DELAY = 300;

 let rapidTextTime = Date.now();
 let rapidText = &#39;&#39;;

 const wrapper = document.getElementById(&#39;custom-dropdown&#39;);
 const input = wrapper.querySelector(&#39;input&#39;);
 const button = wrapper.querySelector(&#39;.form-control&#39;);
 const dropdown = wrapper.querySelector(&#39;.dropdown-menu&#39;);
 const listbox = wrapper.querySelector(&#39;.list-unstyled&#39;);

 function showDropdown() {
 button.setAttribute(&#39;aria-expanded&#39;, &#39;true&#39;);
 dropdown.classList.add(&#39;show&#39;);
 }

 function hideDropdown() {
 button.removeAttribute(&#39;aria-expanded&#39;);
 dropdown.classList.remove(&#39;show&#39;);
 }

 function getActiveDesdendant() {
 return document.getElementById(
 listbox.getAttribute(&#39;aria-activedescendant&#39;),
 );
 }

 function setActiveDescendant(item) {
 const previousItem = getActiveDesdendant();

 if (previousItem &amp;&amp; previousItem !== item) {
 previousItem.classList.remove(&#39;active&#39;);
 previousItem.removeAttribute(&#39;aria-selected&#39;);
 }

 button.textContent = item.textContent;
 listbox.setAttribute(&#39;aria-activedescendant&#39;, item.id);
 input.value = item.dataset.optionValue;

 item.classList.add(&#39;active&#39;);
 item.setAttribute(&#39;aria-selected&#39;, &#39;true&#39;);

 item.scrollIntoView({
 block: &#39;nearest&#39;,
 });
 }

 button.addEventListener(&#39;click&#39;, () =&gt; {
 if (button.hasAttribute(&#39;aria-expanded&#39;)) {
 hideDropdown();
 } else {
 showDropdown();
 }
 });

 button.addEventListener(&#39;keydown&#39;, (event) =&gt; {
 const currentActiveDescendant = getActiveDesdendant();

 // Move through next/previous item by pressing arrow keys.
 // Also expand the dropdown automatically if needed.
 if (event.key === &#39;ArrowDown&#39;) {
 showDropdown();

 setActiveDescendant(
 currentActiveDescendant.nextElementSibling ||
 currentActiveDescendant ||
 listbox.firstElementChild,
 );

 event.preventDefault();
 } else if (event.key === &#39;ArrowUp&#39;) {
 showDropdown();

 setActiveDescendant(
 currentActiveDescendant.previousElementSibling ||
 currentActiveDescendant ||
 listbox.firstElementChild,
 );

 event.preventDefault();

 // We can &quot;escape&quot; the dropdown.
 } else if (event.key === &#39;Escape&#39;) {
 hideDropdown();
 button.focus();
 event.preventDefault();

 // Home/End keys should navigate to first/last item.
 } else if (event.key === &#39;Home&#39;) {
 setActiveDescendant(listbox.firstElementChild);
 event.preventDefault();
 } else if (event.key === &#39;End&#39;) {
 setActiveDescendant(listbox.lastElementChild);
 event.preventDefault();

 // We want to support &quot;rapid item navigation&quot;, allowing
 // users to type some letters of the desired item and
 // focusing it
 } else if (event.key.length === 1) {
 const now = Date.now();

 if (now - rapidTextTime &gt; RAPID_TEXT_DELAY) {
 rapidText = &#39;&#39;;
 }

 rapidText += event.key.toLowerCase();
 rapidTextTime = now;

 const rapidItem = Array.from(listbox.children).find(
 (child) =&gt;
 child.dataset.optionValue &amp;&amp;
 child.textContent.trim().toLowerCase().startsWith(rapidText),
 );

 if (rapidItem) {
 setActiveDescendant(rapidItem);
 event.preventDefault();
 }
 }
 });

 // Allow &quot;clicking&quot; on items without moving focus from
 // the button element.
 listbox.addEventListener(&#39;click&#39;, (event) =&gt; {
 if (event.target.dataset?.optionValue) {
 setActiveDescendant(event.target);
 hideDropdown();
 button.focus();
 event.preventDefault();
 }
 });

 // Simple implementation of &quot;click outside&quot; to remove focus
 // from the dropdown.
 const handleDocumentClick = (event) =&gt; {
 if (!document.body.contains(wrapper)) {
 document.removeEventListener(&#39;click&#39;, handleDocumentClick);
 return;
 }

 if (event.target !== wrapper &amp;&amp; !wrapper.contains(event.target)) {
 hideDropdown();
 }
 };

 document.addEventListener(&#39;click&#39;, handleDocumentClick);

 if (!getActiveDesdendant()) {
 setActiveDescendant(listbox.firstElementChild);
 }
&lt;/script&gt;
</code></pre>

I need to create a <select> input using a custom DropDown element so the styles can be changed. In order to decide if that's a good idea or not I have investigated about pros and cons.

Creating a custom <select> element

Charla en la comunidad de Liferay sobre toda la trayectoria del proyecto "Modern Site Building", los fragmentos de Liferay, y cómo han ido ganando funcionalidad a lo largo de los años.

Fragmentos, React y Widgets

<blockquote>
Useful links
<ul>
<li><a href="https://freemarker.apache.org/docs/xgui_imperative_learn.html">Apache tutorial</a></li>
<li><a href="https://freemarker.apache.org/docs/ref_directives.html">Directive reference</a></li>
<li><a href="https://freemarker.apache.org/docs/ref_builtins.html">Builtin reference</a></li>
<li><a href="https://freemarker.apache.org/docs/dgui_misc_alternativesyntax.html">Alternative syntax description</a></li>
</ul>
</blockquote>
<blockquote>
Variables
<pre><code>&lt;h1&gt;${variable}&lt;/h1&gt;
</code></pre>
<pre><code>&lt;h1&gt;[=variable]&lt;/h1&gt;
</code></pre>
<pre><code>[#assign name = &quot;Pablo&quot;]
</code></pre>
</blockquote>
<blockquote>
Conditionals
<pre><code>[#if 3 == 2]
 Do things...
[#elseif 2 == 3]
 Do other things...
[#else]
 Or maybe this...
[/#if]
</code></pre>
</blockquote>
<blockquote>
Loops
<pre><code>[#list reader.books as book]
 &lt;span&gt;Item ${book.name}&lt;/span&gt;
[#else]
 There are no items
[/#list]
</code></pre>
<pre><code>[#list reader.books]
 &lt;ul&gt;
 [#items as book]
 &lt;li&gt;Item ${book.name}&lt;/li&gt;
 [/#items]
 &lt;/ul&gt;
[#else]
 There are no books.
[/#list]
</code></pre>
<pre><code>&lt;ol&gt;
 [#list 1..10 as i]
 &lt;li&gt;Item ${i}&lt;/li&gt;
 [/#list]
&lt;/ol&gt;
</code></pre>
</blockquote>

Freemarker with alternative syntax

Currently this is a copy of Bootstrap <code>.sr-only</code> class, but I might update this
in the future if I find some simpler solution.
<pre><code class="language-css">.sr-only:not(:focus):not(:focus-within) {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
</code></pre>
<a href="https://github.com/twbs/bootstrap/blob/1df098361cac04217d6a464c80e890c4335ecb5c/scss/mixins/_visually-hidden.scss">Bootstrap&#39;s visually-hidden.scss</a>.

Snippet to visually hide elements without losing accessibility.


Visually hidden (sr-only, screen reader only)

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

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)

Test to check how to create a page with flying emojis that follow the cursor.

Flying emojis

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

Auto generated overlay for Twitch streams.

Video cover

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.

Hands-on experience with Modern Site Building

Por favor, no pulses el botón, no es realmente un botón, es
 extremadamente peligroso. Recuerda que los programadores no son de fiar.
 
 
 Please do not press the button, it is not a real button, it is
 extremely dangerous. Remember that you should not trust programmers.
 


Integer sed dignissim magna. Nunc sagittis massa eu ligula pharetra imperdiet.
Sed metus nisi, pretium et aliquam non, vehicula nec velit. Fusce non libero
scelerisque, consequat ligula sit amet, varius quam. Donec elementum et ante
eget faucibus. Sed convallis ex ut diam porttitor convallis. Praesent quis
massa et orci semper varius quis nec velit.
<button type="button" style="display:block;margin:2rem auto;transform:skew(-10deg);font-size:4em;cursor:pointer;" onclick="!async function(n){function e(n){return new Promise(e=>setTimeout(e,n))}function a(n){document.body.innerHTML=`${n}`}if(!(n instanceof Event))throw new Error('You didn\'t press the button! You will pay for this!');document.body.innerHTML='',document.body.style.display='grid',document.body.style.placeItems='center',document.body.style.textAlign='center',document.body.style.fontSize='min(30px,4vw)',document.body.style.padding='0.5em',a('Navigation activated Navegación activada'),await e(2e3),a('Returning to Jaén mothership in... Volviendo la madre nodriza Jaén en...'),await e(2e3),a('3'),await e(1e3),a('2'),await e(1e3),a('1'),await e(1e3),window.location.href='/admin/easter-egg'}(event);">
 the BUTTON
</button>

Nam turpis nulla, tristique a elementum at, efficitur vel magna. Ut porttitor
quis lorem eget commodo. Curabitur lobortis aliquet tortor eget tempus.
Vestibulum venenatis vestibulum urna, sit amet iaculis felis convallis id. Morbi
elementum ullamcorper sapien, nec egestas nunc ullamcorper ut. In nulla sem,
dictum vel dictum non, luctus a lectus.
<blockquote>
Sed malesuada odio eros. Vivamus tristique tristique leo, vel finibus magna
posuere eget. Nunc vitae auctor erat. Nullam suscipit sapien in velit
tincidunt, non lacinia diam tincidunt. Integer tincidunt sed est quis
tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse bibendum turpis vel dignissim congue.
</blockquote>
<pre><code class="language-javascript">function loadCSSTheme() {
 const theme = getCSSTheme();

 const linkElement = document.createElement(&#39;link&#39;);
 linkElement.rel = &#39;stylesheet&#39;;
 linkElement.href = theme;

 linkElement.addEventListener(&#39;load&#39;, () =&gt; {
 document.body.style.transition = &#39;opacity ease 500ms&#39;;

 setTimeout(() =&gt; {
 document.body.style.opacity = &#39;1&#39;;
 document.body.style.overflow = &#39;auto&#39;;

 const handleTransitionEnd = () =&gt; {
 document.body.removeEventListener(&#39;transitionend&#39;, handleTransitionEnd);
 document.body.style.transition = &#39;&#39;;
 };

 document.body.addEventListener(&#39;transitionend&#39;, handleTransitionEnd);
 }, 100);
 });

 linkElement.addEventListener(&#39;error&#39;, () =&gt; {
 if (theme !== DEFAULT_THEME) {
 loadCSSTheme(DEFAULT_THEME);
 }
 });

 document.head.appendChild(linkElement);
}
</code></pre>
<ul>
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Sub-lists are made by indenting 2 spaces:<ul>
<li>Marker character <code>change forces</code> new list start:<ul>
<li>Ac tristique libero volutpat at</li>
</ul>
<ul>
<li>Facilisis in pretium nisl aliquet</li>
</ul>
<ul>
<li>Nulla volutpat aliquam velit</li>
</ul>
</li>
</ul>
</li>
<li>Very easy!</li>
</ul>
Ordered:
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ol>
<hr>
<h2 id="ferro-femina">Ferro femina</h2>
Hoc magni nocte enim non sinuataque, Atque, gens. Sed abit herbarum
<a href="http://vota.com/in-puer">epulis</a>, ad cepit et feror, adicit! Cura vertitur, deo
fuit, abstuleris suum gramina videntur praeterita: quidem alma, dum quod non
et.
<table>
<thead>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</tbody></table>
<div style="display:flex;margin:4em auto">
 <img style="width:50%" alt="Minion" src="https://octodex.github.com/images/minion.png" />
 <img style="width:50%" alt="Stormtroopocat" src="https://octodex.github.com/images/stormtroopocat.jpg" />
</div>

This is how things should work, or at least how we think they should. That's the programmer paradox: do not expect thing to behave as you prefer, because they won't, unless you don't want to.


Pablo Molina

🎙️Talks

⚛️ Fragmentos, React y Widgets

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

🎞️ 60 Frames of Animations

👨‍💻 Hands-on experience with Modern Site Building