js – Planeta UNPLUG

TypeScript Origins: The Documentary es un documental creado por Keyboard Stories que explora el proceso de creación de TypeScript. Lo más me gustó de ese documental, es que cuenta con comentarios de sus creadores y de las personas involucradas en su desarrollo, presentación y difusión, ofreciendo una visión completa de la historia detrás de este lenguaje. Este documental de TypeScript es algo que no se deben perder si están involucrados de alguna forma con el mundo de la programación.

¿Qué tiene de importante TypeScript?

Si te parece extraño que hayan hecho un documental de TypeScript de este calibre, es porque actualmente es uno de los lenguajes mas populares. JavaScript probablemente es el lenguaje mas popular actualmente, pero tiene muchas carencias como la falta de tipado/tipos (para mí es una de las cosas por las cuales opino que no es un buen lenguaje) que permite entre muchas cosas, crear código mas complejo, ayudar a los programadores escribir mejores programas limitando el tipo de datos que se pueden guardar o pasar en funciones, optimizar la velocidad de ejecución de los programas, entre otros.

TypeScript nace como solución a este problema, expandiendo su uso rápidamente e inclusive siendo sustituto de JS en muchas compañías. Ademas de ser el lenguaje que hizo posible en su día a tecnologías como Angular y Visual Studio Code.

Mi opinión del documental de TypeScript

El documental comienza con los principales creadores narrando cuáles fueron las causas para desarrollar este lenguaje dentro de Microsoft. Luego, muestra un poco el proceso de desarrollo y, posteriormente, el lanzamiento al público. En estas partes, podemos recordar las conferencias en las que fue anunciado.

Me llamó la atención, cómo comentan que querían liberarlo bajo una licencia abierta pero Microsoft no estaba acostumbrado a eso. Pero con la nueva gerencia les tocó evolucionar y lo consiguieron.

En el proceso de creación de TS, vemos como el lenguaje fue usado para construir Visual Studio Code; posteriormente el equipo de Angular (del rival Google), se unió para hacer que TypeScript soportara decoradores gracias al proyecto AtScript.

Pero en vez de contarte mas, te recomiendo que lo veas a continuación:

Me pareció muy inspirador ver este documental de TypeScript. Ver la historia contada por los mismos creadores, observar como creció desde una idea para poder terminar otro proyecto, hasta ser uno de los principales lenguajes de programación, es muy placentero.

Ojalá hagan mas documentales de este tipo, tal vez uno de Visual Studio Code. Pues luego de ver este documental me dio curiosidad de cómo desarrollaron este editor.

Finalmente, te recomiendo aprender este lenguaje y hacer tu experiencia con JS mas placentera.

La entrada Documental de la creación de TypeScript se publicó primero en El blog de Skatox.

Luego de 7 años tuve la oportunidad de dedicarle tiempo a mi plugin JS Categories List y poder actualizarlo para que esté al día respecto a los estándares de WordPress y de la web en general.

Listado de categorías de forma dinámica — El plugin muestra un listado de categorías expandibles

Durante este tiempo WordPress añadió Gutenberg, un editor visual que ahora se incorpora en cada instalación y poco a poco va tomando el liderazgo de como crear el contenido. Por este motivo los widget/bloques han migrado a ser hechos con una aplicación en React y que llame a entradas del API del sitio.

Eliminación de jQuery de JS Categories List

En estos 7 años el principal cambio fue lo innecesario de depender de jQuery. Su popularidad se debía porque está incluida en cada instalación y anteriormente ayudaba a manipular el DOM fácilmente debido a las limitaciones de los navegadores.

Pero actualmente no es necesario usarla: los navegadores ya permiten hacer nativamente mucha de sus funcionalidad, la librería requiere cargar contenido JS innecesario y los bloques de Gutenberg se realizan con React quien ofrece mucho mas.

Creación del bloque de Gutenberg

Primero fue mejorar el código fuente, cuya tarea mas que todo fue aplicar estandarización de código PHP, organizar mejor el código, rescribir partes mal hechas

Luego fue la creación del bloque de Gutenberg, tomé como base el código fuente de mi otro plugin recientemente actualizado y lo modifiqué para funcionar con categorías en vez de archivos.

Los bloques de Gutenberg usan React, así que me tocó rescribir el plugin desde el PHP que genera HTML a componentes JSX. La lógica es similar pero en esta migración pude hacer mejoras que luego apliqué a la versión de PHP.

Para facilitar futuras mejoras y ver que el código funciona, agregué pruebas jest a los componentes y así asegurarme que todo funciona bien. En futuros cambios, ahora tendré como probar los cambios y garantizar el correcto funcionamiento,

Animaciones en JavaScript

Una de las principales funcionalidades que ofrecía jQuery es de animaciones sencillas con simplemente llamar una función. Esta funcionalidad no está disponible en el JavaScript puro porque esas características se fueron agregando a CSS.

En mi plugin de JS Archive List, logré implementar las animaciones usando clases CSS pero no funcionan bien en algunos casos reportados por usuarios, sobre todo, cuando hay altura dinámica.

Por ello, para este JS Categories List decidí crearlas desde 0 en vanilla JS para que funcionen bien en cualquier escenario. Descarté el uso de clases CSS por el problema mencionado, ademas que es mas fácil de probar de forma automatizada.

Experiencia al actualizar JS Categories List

Aprendí mucho al rescribir mi código antiguo. Noté como ha evolucionado mi forma de programar a lo largo de estos años, cómo la tecnología cambia pero las bases de WordPress se mantienen y la retrocompatibilidad se respeta. Con razón este CMS es el mas usado en el mundo.

Pude pulir mis conocimientos de React, de pruebas automatizadas con Jest y aplicar mejores patrones en el código de PHP. También el resultado me permitirá actualizar con mayor frecuencia este plugin y ofrecer mejoras.

Si usas WordPress te recomiendo descargar e instalar mi plugin.

Espero que te guste y lo uses en tu sitio.

La entrada JS Categories List 4.0 se publicó primero en El blog de Skatox.

Los que me leen desde hace años, habrán notado que suelo cambiar el diseño y tema de mi bitácora (blog) cada 3 años aproximadamente. La última vez que lo hice fue en el 2014. En ese entonces modifiqué un tema existente y lo adapté al diseño que tenía en mente. Pero con el paso del tiempo tuve problemas para mantenerlo, debía estar pendiente de nuevas tendencias para agregarlo y al no hacer un tema hijo, perdía las actualizaciones originales del tema.

Skatux: el pinguino de mi blog — Skatux, el logo de mi web ha vuelto al encabezado e icono del sitio

Mejoras del tema y de rendimiento

Lo primero que hice fue descargar la última versión del tema original. Hice un diff para ver las diferencias y así solo incluir las modificaciones requeridas. Me llamó ver como cosas que hacía anteriormente con modificaciones de código ahora las podía hacer con CSS. También ahora he podido migrar partes del diseño a flexbox en vez de usar floats y clears para alinear elementos.

También he incluido mejoras en el rendimiento como eliminar la carga de archivos de CSS y JS que no necesito. Agregué en el HTML la precarga de dominios para la publicidad de Google Adsense y otros elementos de terceros.

Con la ayuda de GTMetrix pude descubrir las fallas de mi sitio web. Posteriormente empecé a aplicar cada consejo para aumentar el rendimiento del sitio. No pude llegar hasta el puntaje máximo porque el problema es con la configuración de elementos de terceros como el botón de seguir de Twitter, publicidad de Adsense, entre otros. No se tiene acceso a esos elementos y son requeridos por el sitio. Aunque sé que llegué al puntaje máximo sobre las cosas que poseo control.

Mejoras de accesibilidad

Siempre he usado el color naranja como el distintivo de mi blog. Pero al aplicar las pruebas de accesibilidad de Lighthouse descubrí que los tonos naranjas no pueden ir sobre blanco. Por lo tanto tuve que buscar el color mas próximo para así tener mi sitio accesible a todo tipo de personas. También agregué elementos requeridos a algunas imágenes o mejoras del código para facilitar la lectura del sitio en dispositivos para personas con discapacidad.

También tuve que acomodar el tamaño de algunas fuentes y separar elementos para mejorar la visualización. Eso si, sin afectar el diseño del sitio.

La experiencia de actualizar mi blog

Mejorar el trabajo que realicé hace 5 años fue interesante. Me da pena ver como hacía algunas cosas. Pero comprobé como he mejorado mis conocimientos en WordPress y desarrollo web general. También es interesante conseguirse con código o archivos obsoletos. Encontré 2 plugines para vender publicidad, cuyas empresas ya no existen y por lo tanto eliminé.

Vale la pena cada cierto tiempo realizar esta tarea para modernizar las tecnologías del blog. Comprobar si has mejorado o aprendido nuevas cosas y ganar nuevos conocimientos para aplicarlos en trabajos

Espero que noten las mejoras en la carga del sitio. Si encuentran algún problema en bug, no duden en reportarlo para solucionarlo y mejorar la calidad del sitio.

Gracias por leer este artículo

La entrada Experiencia al actualizar el tema de mi blog se publicó primero en El blog de Skatox.