La universidad de Stanford ha publicado de forma gratuita su catálogo de cursos para aprender a programar aplicaciones en iPhone con Swift.
Notas
Una pregunta, he visto que mucha gente ya no recomienda Redux en React porque hay alternativas más rápidas y con otros enfoques como Recoil.
¿Sabéis si pasa lo mismo con Vuex? Creo que por el momento casi todos lo usan ¿no?
Recomiendo este artículo, así es como lo tengo yo en mis proyectos Vue.
Si usáis Nuxt os recomiendo esta otra librería que permite tener un solo SVG en el bundle y dentro todos los paths.
Creo que hay algo parecido para Vue pero no lo he usado.
https://github.com/nuxt-community/sv g-sprite-module
En respuesta a:
Siempre se habla de la importancia de las PWA, pero, ¿las habéis instalado alguna vez?
Yo no conozco a nadie que haya instalado una PWA.
WTF me acabo de enterar de que en la web de github no se puede buscar cosas en proyectos que sean forks de otros. He tenido que bajarme el proyecto para hacer una búsqueda global.
Añado a la lista una que recomiendo desde hace mucho tiempo y no la usa mucha gente: lazygit
Es para manejar git con la consola pero sin tener que escribir los comandos, únicamente con atajos de teclado.
https://github.com/jesseduffield/laz ygit
Demo: https://youtu.be/CPLdltN7wgE
En respuesta a:
https://twitter.com/ianaya89/status/ 1358813712044470272
Si lo ves complicado porque te tienes que saber de memoria los comandos como pasa con vim no te preocupes porque pulsando a la x ves una lista con todo lo que puedes hacer y su atajo de teclado, no tienes que recordar nada.
📰 Chrome por fin soporta la propiedad CSS clip-path.
Por suerte los 3 navegadores principales (chrome, firefox, safari) ya la soportan.
👉 Es una propiedad para recortar elementos usando paths de SVGs.
https://groups.google.com/a/chromium .org/g/blink-dev/c/E0bpVCaWPEg/m/anYk3vFfAwAJ?pli=1
Mañana, como cada sábado, envío nueva edición de mi newsletter, Alquimias.
Esta semana voy a hablar de los changelogs y de su importancia.
Si quieres recibir el correo te puedes apuntar aquí:
https://codingpotions.com/alquimias
Alquimias enviado!
A mi el rol de programador fullstack solo me gusta si solo yo voy a tocar el front y el back.
Lo peor de ser fullstack es cuando te tienes que comer problemas tanto de front como desde back y encima te tienes que sincronizar con ambos equipos.
Si un equipo lo forman varios fullstack prefiero que unos se dediquen solo al front y otros solo al back, todos estando con todo creo que lleva a problemas.
A las empresas cada vez les gusta más la idea de los programadores fullstack porque pueden tener a un tío que haga de varios roles a precio de uno.
📝 ¡Nuevo artículo en el blog!
Hoy os muestro una introducción a ThreeJS, una librería que permite la creación de escenas 3D en el navegador gracias a la tecnología WebGL.
Con este tutorial aprenderás a crear tu primer cubo en 3D.
Odio cuando la gente pone un enlace a un canal de Youtube y viene con la URL para confirmar subscripción.
Yo me llevo una mala impresión, es en plan "echa un vistazo a mi canal a ver qué te parece" y PAM popup de confirmar subscripción.
Dark pattern en toda regla
Si lo queréis probar basta con añadir esto al final de la URL de un canal de Youtube:
?sub_confirmation=1
📰 ¡Mañana por la tarde subo artículo en el blog!
Voy a hacer una introducción a ThreeJS, una librería para poder crear gráficos y escenas en 3D en el navegador gracias a la tecnología WebGL.
Stay tuned!
Lo siento pero no me gusta el formato de enseñar a programar en Twitch (en plan curso o bootcamp).
Para empezar, te tienen que cuadrar las horas para verlo en directo.
Se suelen alargar demasiado (por leer chat e improvisar).
Tienes que ir al día para estar en los directos.
A ver entiendo que la gente le guste porque puede preguntar dudas o hablar con otros en el chat (si no hay demasiada gente), pero yo prefiero los clásicos videos en Youtube pregrabados en los que se va al grano y se pueden editar mejor.
¿Cómo puede ser que la etiqueta <dialog> no esté soportada todavía por Safari?
En canIuse pone que firefox tampoco tiene soporte:
Pero en MDN pone que si que tiene soporte 🙄
https://developer.mozilla.org/en-US/ docs/Web/HTML/Element/dialog
¿Os podéis creer que todavía no sé para qué sirve Vite?
En respuesta a:
Para los que usáis Vim y Vue, ¿qué config tenéis? ¿y el autocompletado?
A veces me dan ganas de volver a Vim pero siempre acabo echando de menos alguna funcionalidad del vscode.
Sé que existe la extesión de vim para el vscode pero no le acabo de pillar el rollo, prefiero solo Vim o solo vscode.
Para los que hacéis directos en Twitch programando os dejo una idea:
Programar en directo el propio overlay del stream, con HTML, CSS y Javascript para poder meter animaciones y cosas dinámicas en pantalla.
Esta mañana se han enviado los correos de Alquimias, los que estéis suscritos por favor comprobad que no os llegan a la bandeja de spam o de correos no deseados.
📬 Mañana por la mañana nueva edición de Alquimias, mi newsletter con recursos para desarrolladores web.
Si quieres recibirla te puedes apuntar aquí:
Ayer puse este tweet. Echarle un ojo a las respuestas porque hay librerías y proyectos muy chulos creados o mantenidos por españoles.
Gracias a todos los que ayudáis en proyectos open source, sois increíbles.
En respuesta a:
https://twitter.com/CodingPotions/st atus/1354858278350696459
Tengo curiosidad, ¿hay alguna librería, framework o proyecto open source muy importante/famoso que haya surgido en España?
Yo más que proyectos conozco a maintainers españoles en proyectos open source como @afontq en testing-library y a @marccornella en oh my zsh
Tenéis entrevistas suyas hablando de sus proyectos en el canal de @CodelyTV por cierto.
Pregunta para los que usáis styled-components, ¿qué ventajas tiene? ¿tiene sentido en Vue?
Por lo que veo es usar CSS en JS y Vue ya tiene algo parecido porque puedes crear un objeto con estilos para pasarlos inline en las etiquetas.
Odio cuando en el vscode abro un fichero porque quiero buscar algo y a la que cambio de archivo se me cierra el otro.
Por otro lado tampoco me gusta que cada vez que abro algo se me guarde la pestaña porque acabo con demasiadas pestañas-
Me dicen que haciendo dos clicks en los ficheros se quedan abiertos en las pestañas aunque no edites nada del fichero.
Hace tiempo os mencioné que @makigas estaba creando una lista de vídeos explicando Typescript, pues bien, ya la ha terminado.
Yo conocía lo básico pero estos vídeos me han servido para conocer muchas más cosas.
https://www.youtube.com/playlist?lis t=PLTd5ehIj0goPbPaN9VEoQQVUwZN2eXdB5
📧 En una hora sale la primera edición de Alquimias, mi newsletter para desarrolladores web. Si quieres recibirla todavía estás a tiempo de apuntarte aquí:
https://codingpotions.com/alquimias
Como he visto que mucha gente se ha quedado fuera, os pongo por aquí el correo que se ha enviado está mañana.
Te puedes apuntar a la newsletter en el enlace del tweet anterior.
Hace años compartí este proyecto pero se ve que no ha habido mucho avance.
Se trata de un proyecto open source para hacer un videojuego MMO de Harry Potter ⚡ usando Unity. Además estaba creado por unos españoles.
Os presento mi nuevo proyecto 🎉
⚗️ Alquimias, newsletter que sale los sábados por la mañana con recursos interesantes para desarrolladores web y programadores.
Os podéis apuntar en este link, me haría mucha ilusión ☺️
Lo malo de usar SVG loader en Nuxt es que cada icono se añade dento del bundle app.js
Este plugin combina todos los iconos dentro de un único SVG. Al crear iconos lo que hace por debajo es refernciar al icono con <use> para usar solo esa parte.
https://github.com/nuxt-community/sv g-sprite-module
Para Vue asecas no he encontrado nada parecido, es lo malo.
Aparte del diseño, entiendo que haya gente que prefiera teclado de membrana a teclado mecánico.
Lo que me parece extraño es que haya gente que prefiera programar con el teclado del portátil, En mi opinión, son demasiado incómodos para escribir, incluso los de Apple.
¿Os gusta mi nuevo teclado? 
Por cierto, si os queréis montar uno parecido, @nategentile7 explica en este vídeo el proceso.
Usa la misma base que yo, el GMMK, solo que utiliza otros switches y otro set de teclas.
Visto que Svelte cada vez se usa más, ¿os molaría que sacara en el blog una serie de artículos enseñando a usarlo? De paso me sirve para aprenderlo yo.
De React no creo que saque más artículos porque personalmente no me gusta mucho.
En la encuesta del state of js de este año me ha llamado la atención que este año ha caído mucho la felicidad usando Angular.
Mi teoría es que muchos han votado este aspecto negativamente refiriendose a AngularJS ya que hay mucho proyecto que mantener todavía.
¿Qué pensáis? 
A mi Angular me gusta, mucho más que React. Ahora me he cambiado a Vue porque me parece más sencillo de usar pero eso no hace que Angular sea malo.
El canal de Youtube oficial de Angular ha publicado estos días una serie de vídeos muy cortos y fáciles de ver sobre errors y cómo debuggearlos.
Sobre la newsletter que quiero crear sobre recursos de desarrollo web ¿qué día preferís que se envie?
¿Sabías que un bucle for para recorrer un array es un poco más rápido si lo recorres al revés?
Por ejemplo:
for(let i = array.length; i--;)
Es más rápido porque el tamaño del array solo se evalúa la primera vez, al crear el bucle. De la otra forma se evalúa en cada iteracción.
Como muchos me decís, los compiladores a actuales ya hacen optimizaciones de código y seguro que tardan lo mismo que un bucle normal.
Lo cuento más que nada como curiosidad, no porque tenga utilidad real.
¿Sabías que JQuery este año cumple 15 alos? Ni de coña pensaba que tenía tantos años ya.
¿os trae buenos o malos recuerdos?
¿Con que trabajáis? 💻
Yo trabajo con Linux, en concreto Ubuntu con KDE Plasma como entorno de escritorio. De uso personal uso lo mismo porque me encanta Linux. Tengo también partición dual boot de Windows que uso solo para jugar a videojuegos.
Está combinación de distribución y entorno de escritorio se llama Kububtu por si os la queréis descargar.
KDE lo bueno que tiene es que es muy customizable, lo puedes dejar visualmente casi idéntico a Windows o Mac y encima solo consume unos 400 megas de RAM al arrancar.
En el editor de textos o IDE que esté usando en ese momento me pasa lo mismo que con el navegador, acumulo pestañas de archivos abiertos que no uso.
Menos mal que descrubrí que en el vscode por ejemplo puedes poner límite de pestañas abiertas para que se vayan cerrando solas.
Para los que usáis mucho Notion, existe esta extensión para el vscode para poder ver páginas de notion directamente en el editor.
Por el momento no ofrecen mucho más aunque en el futuro piensan añadir más funcionalidades.
https://marketplace.visualstudio.com /items?itemName=frenco.vscode-notion
Viendo los resultados del state of JS del año 2020 ( https://2020.stateofjs.com) me he dado cuenta de que existe este editor de texto para Mac y tiene buena pinta. Se llama Nova, yo no uso Mac pero lo comparto para los que lo usen.
¿Vais a hacer vídeo analizando los resultados de State of JS? @CodelyTV
Cuando metes un title a una etiqueta en HTML, al pasar el ratón por encima sale el texto en pantalla a modo de tooltip, pero en móviles no funciona.
Siempre hay que andar implementando cosas con Javascript para tener simples tooltip, estas cosas deberían ser nativas.
En su día el gran @wesbos creó la página http://uses.tech una web recopilación de las páginas /use de los programadores, en las que cada uno explica el hardware y software que utiliza en su día a día.
Hoy os presento la mía:
https://codingpotions.com/uses
PD: Os animo a que creéis vuestra propia página /uses en vuestra web.
PD2: No he puesto enlaces ni enlaces con referido de Amazon ni nada de eso.
¿Habéis visto la nueva animación de la página de @greensock?
Aquí podéis ver cómo está hecha. En su perfil tenéis las demás animaciones de la página.
Fuera bromas, llevo sin programar desde el año psaado y tengo miedo de que se me olvide todo lo que sabía.
Este año para muchos ha sido un año realmente malo. Para el año que viene os deseo que todo salga mejor, mucho ánimo a todos.
¡Feliz año 2021!
🎉🎊🍾🥂
2021 goals🎯
📗 Terminar de escribir el ebook 📝 Publicar 10 artículos o más, como todos los años 🌎 Aprender sobre WebGL, Three y los shaders, escribir sobre ello en el blog 🎨 Terminar el rediseño de la web 📧 ¿Sacar la newsletter? Tengo que pensarlo...
Resultados de los propósitos del año 2020 🎯
- He empezado a cambiar la web pero todavía falta ❌
- No he escrito un ebook ❌
- He escrito 11 artículos✅
- He terminado el curso, pero seguiré escribiendo sobre Vue✅
- No he usado la nueva sintaxis ❌
En respuesta a:
https://twitter.com/CodingPotions/st atus/1211717084759166976
📝 ¡Nuevo artículo en el blog!
Hoy explico cómo sería una implementación de estructuras de datos básicas, en Javascript. Listas enlazadas, pilas, colas y árboles binarios.
Si te quieres sentir poderoso mientras programas en el vscode, échale un ojo a esta extensión que añade partículas, llamas o fuegos artificiales mientras escribes.
https://marketplace.visualstudio.com
/items?itemName=hoovercj.vscode-power-mode 
Como os habéis portado bien, Santa Claus 🎅 os ha dejado un regalito 🎁
Se trata de una lista de etiquetas HTML en formato PDF que puedes descargar gratis desde el enlace de abajo.
🎄 ¡Feliz Navidad! 🎄
Un saludo y mucho ánimo a todos los que tengáis que trabajar en Navidad y en estas fechas. Sois unos cracks!
🎄 Felices fiestas amigos 🎄
¿Recordais la homepage tan chula de github de la que se habló mucho?
Han publicado en su blog un artículo sobre cómo hicieron la animación de la tierra. Conceptos muy interesantes de Three y WebGL.
https://github.blog/2020-12-21-how-w
e-built-the-github-globe/ 
Acabo de descubrir a @MadSushiDev un streamer que está haciendo un juego de cartas en directo.
Me gusta mucho ver cómo programa la gente, siempre aprendo algo.
Está en directo ahora por cierto: https://www.twitch.tv/madsushidev
Para los que uséis mucho Firebase, existe esta alternativa open source. No lo he probado todavía pero tiene muy buena pinta.
Pone que para los que se registren este año van a tener 1 año de hosting gratis.
¿Existe alguna librería que sea azúcar sintáctico de web components?
Es decir, una librería para escribir web components nativos pero que no necesiten de nada más en cliente, que puedas simplemente llamar desde el navegador al archivo javascript generado y poner la etiqueta.
Me molan los web components porque se pueden usar en cualquier framework sin necesitar nada más, solo el archivo .js del componente pero me da palo tener que andar con this.shadowRoot.getElementById" todo el rato para actualizar la vista. En ese aspecto echo de menos Vue o React
O cosas como condicionales o bucles en la vista, que al final acabas mezclando código html dentro de la lógica del webcomponent.
¿Habéis probado esbuild? ¿y en producción? Dicen que tiene más velocidad que webpack. ¿se puede usar con Vue?
He probado Tailwind pero me sigue sin gustar. No veo sentido a usar o aplicar clases que literalmente es lo mismo que escribir la regla css.
Lo único que me gusta es que tienes valores prefijados en colores. tamaños y espacios pero para eso es mejor tener variables css o scss.
Ojo, también pienso que para hacer prototipos rápidos o probar cosas funciona muy bien.
En este repo tienes una lista de ejemplos de código duentes de extensiones para navegadores.
En Google chat deberían poner que se pueda responder a mensajes concretos en los chats grupales. Como está ahora se hace muy difícil saber a quién o a qué está respondiendo cada uno.
Quiero hacer el año que viene una cosa pero antes quiero saber si os interesa.
¿Os gustaría una newsletter semanal en la que comparta artículos, recursos, librerías y ese tipo de cosas sobre el mundo frontend?
Podéis proponer nombres.
Un detalle que he visto en videollamadas en meet con el móvil y que me ha gustado mucho es que puedes hacer zoom cuando comparten pantalla para verlo más de cerca.
Molaría eso en cualquier vídeo de Youtube o Twitch, incluso que se pueda en ordenadores.
Estos estudiantes tienen un podcast muy interesante en los que hablan un poco de todo.
👇 Os recomiendo mucho seguirlos:
@PodcastRde
El creador original de el monitor de recursos de Windows está haciendo una serie de vídeos explicando la historia detrás de todo.
En este vídeo incluso explica partes del código fuente. Muy interesante.
Si los rumores son ciertos, parece que Google está haciendo tests para habilitar también el modo oscuro.
Si es así no pinta mal, como mucha gente dice al final hacer un tema oscuro no es poner el color de fondo negro y ya. 
Parece que hay problemas a nivel global con Gmail y muchos servicios de Google.
En estos momentos yo me acuerdo de todos los correos importantes que no se van a poder mandar y problemas que van a surgir en varias empresas seguro. 
Curioso, si abres Youtube en pestaña de incógnito o sin estar logueado si que funciona pero si ya tenías la sesión abierta no.
Hoy os traigo otra extensión para el #vscode
Es una extensión para Vue, que añade cosas que no trae la típica de Vetur como resolución de componentes en imports, renombrado de variables y computadas, extración de lógica a método setup() para Vue 3 etc.
https://marketplace.visualstudio.com /items?itemName=znck.vue-language-features-insiders
🦌 Ahora que llega la navidad nada mejor que un tema navideño para el vscode.
Molaría también una extensión que ponga un arbolito 🎄 en una esquina.
https://marketplace.visualstudio.com
/items?itemName=satyam11.christmas-theme 
🏛️ ¿Habéis visto ya la nueva web del congreso de españa?
La que había era tan antigua que estaba hecha con tablas, de cuando no había divs, y no es broma.
⚠️ DISCLAIMER: Con esto no quiero culpar a diseñadores, programadores y en general a todos los que han hecho la web porque todos hacemos lo que podemos con los medios que tenemos, no tienen la culpa.
Empecemos por el diseño general.
Nada más abrir la web algo raro. El "hero" es decir, la imagen debajo del menú tiene un color semitransparente que la oscurece un poco pero no ocupa todo el ancho, por lo menos en mi pantalla. Además el texto de su interior se alinea a la derecha y es demasiado pequeño 
Si haces click en la parte de la imagen del "hero" no oscurecida te lleva a otra página sin embargo si haces click en el centro no ocurre nada, es confuso.
Los círculos amarillos no tienen el cursor:pointer y por lo tanto no sabes si se puede hacer click en ellos.
El menú de navegación no me gusta nada. Aparte del color amarillo, lo suyo es no colocar tantos enlaces porque de primeras no encuentras lo que quieres, y si necesitas poner tantos al menos poner iconos o algo para orientar al usuario. 
Más abajo hay 3 columnas, la primera tiene una imagen con una calidad algo baja, no se ve nítida del todo y la caja de debajo tiene sombras interiores que no se usan más en la web. La elección del color amarillo de fondo de la columna del medio no es demasiado buena para leer 
Al menos el color amarillo con las letras azules y negras pasa el test de contraste AAA, pero no es recomendable meter tanto fondo amarillo, al menos en mi opinión.
Vamos a ver un poco por encima las cosas técnicas.
Lo primero que me llama la atención mirando el HTML es que usan clases en inglés y en español.
Esto puede que sea por el CMS o la librería de estilos que usen pero se me hace raro mezclar idiomas en las clases HTML. 
Hay elementos ocultos qué no sé que función tiene como estos de la imagen.
En caso de que sean para funciones dinámicas de la web como hacer click y demás, yo recomiendo eliminarlos del DOM con javascript de no ser que sean necesarios para algo. 
Me gusta que usen elementos picture para poner iconos o imágenes en para distintos tipos de tamaño de pantalla, aunque lo que no entiendo es por qué se hacen con svgs. ¿En móviles usarán svgs más simples?
El hover de los iconos de las 3 columnas tiene un delay de 2 segundos y si pasas el ratón rápido casi no te das cuenta de la animación porque además la animación tarda 2 segundos también en ejecutarse.
Sobre los frameworks que usan aquí los podéis ver:
https://builtwith.com/?https://www.c ongreso.es/web/guest
Usan lodash, jQuery, font-awesome y poco más. He visto que formularios y cosas así usan javascript asecas sin frameworks.
Hablando de font-awesome, me he dado cuenta de que los iconos de redes sociales del footer son imágenes y no svgs. Si es verdad que usan font-awesome lo suyo es usar los iconos de redes sociales que vienen en la librería.
La velocidad de la web según PageSpeed de Google es muy mala en móviles y ordenadores. Casi 4 segundos en cargar, se me hace demasiado raro, creo que los datos no son correctos del todo porque a mi me caga más rápido. 
He probado a hacer un nuevo test con webpagetest y los resultados son similares. La mayoría del tiempo se va cargando el javascript y las imágenes. 
Si queréis un análisis más exhaustivo del rendimiento de la web se lo podéis pedir a @PerfReviews_ que hacen análisis de la performance de las webs y dan muy buenos trucos para mejorarlo.
La accesibilidad no está mal del todo aunque tienen problemas con los atributos aria y con algunos elementos del HTML. 
Yo de accesibilidad no entiendo mucho (sé lo básico pero tengo que aprender más).
Animo a @kastwey por si tiene tiempo y quiere aportar algún dato más sobre la accesibilidad de la nueva web del congreso.
Eso es todo lo que he visto mirando por encima la web, me dejo muchas cosas y por eso os animo a que aportéis lo que hayáis visto o que comentéis vuestra opinión de todo esto.
Como conclusión me gustaría decir que me da un poco de rabia porque soy de los que opinan que las webs públicas deberían ser muy muy buenas ya que las usan mucha gente y son esenciales.
No quiero echar la culpa a nadie porque no sabemos cada decisión y estoy seguro de que los márgenes de tiempo han sido bastante reducidos. Siento si se ha ofendido alguien. Además de que yo no me considero experto ni mucho menos también cometo fallos.
Tras tanto tiempo con el github con el tema claro ahora verlo todo oscuro se me hace raro, lo mismo me vuelvo al modo claro.
Me ha hecho gracia porque me voy a beber una cerveza de las del calendario de adviento de cervezas de una fábrica que se llama Vue ✌️
En su web el calendario está agotado, pero si queréis pillar alguna cerveza artesanal con este enlace os decuentan 5€
Ya solo falta el modo oscuro de gitlab
En respuesta a:
Ahora que muchos están haciendo el #AdventOfCode os recomiendo mucho los direcos de @makigas.
Está resolviendo los ejercicios en Elixir, un lenguaje funcional, concurrente, que se ejecuta sobre Erlang.
❤️ Hoy quiero agradecer el apoyo que me dan siempre los programadores latinoamericanos
Gracias a todos vosotros por compartir mis recursos y darme ánimos todos los días.
Si os preocupa el tema de la privacidad en Internet, os recomiendo este artículo en el que se compara la privacidad por defecto de los navegadores web. Algunos os soprenderán.
Odio cuando el vscode te autocompleta cosas muy locas cuando estás escribiendo. Debería poderse configurar para que solo salga la lista para autocompletar cuando esté muy seguro de que vas a escribir eso.
Sí, sé que en Webstorm eso no pasa.
Esto lo arreglé con la extensión de TabNine, que autocompleta el código tirando de inteligencia artificial, lo único malo es que es gratis hasta proyectos de 400kb como máximo. Os la recomiendo mucho.
Top 100 cursos universitarios gratuitos y online (muchos de ellos de programación) by @freeCodeCamp
https://www.freecodecamp.org/news/mo st-popular-free-online-courses/
Tengo que confesar que nunca he leído un libro de programación como tal.
Si tuvierais que recomendar uno ¿cuál sería?
Si eres de los que les gusta ver setups, es decir, cómo tienen algunos montados su despacho y zona de trabajo, te recomiendo esta página que recopila posts de varios subreddits:
Una pregunta para los que generáis PDFs con HTML, ¿cómo resolvéis los saltos de página para contenido dinámico?
Varios .html no es viable porque no sabes cuántas páginas vas a tener.
¿qué es lo mejor? un solo html y con javascript generar nodos html que midan lo que una página?