Me ha encantado este codepen con un ejemplo de formulario para tarjetas de crédito con micro-interacciones:
Notas
Si siempre has querido aprender #python, han puesto en Udemy este curso de introducción completamente gratis por tiempo limitado:
¿Existe alguna herramienta que compare un diseño en una imagen con la web que estás desarrollando? 🤔
Es decir, molaría una algo que te diga qué cambios deberías hacer en la web para que quede igual que en el diseño (añadir márgen, modificar colores, cambiar tamaños, etc).
Lo más parecido que he encontrado es esto que lo que hace es hacer una captura de pantalla para que puedas comparar cambios visuales en la web. Una especie de diff.
Yo busco algo parecido pero mñas tipo testing y comparando con el diseño 
¡Nuevo artículo en el blog! 📝
Seguimos con el curso de #Vue ✌️ Hoy aprendemos a usar lo básico del sistema de vistas de Vue, variables, bucles y condicionales v-if y v-for.
Para los que usáis Trello, ¿qué hacéis con las tarjetas que ya has completado? ¿Las dejáis en una columna? ¿Las borráis?
Voy a intentar tener esta semana el nuevo artículo del curso de Vue.
Voy a hablar de cómo se crean las vistas en Vue, es decir, cómo crear bucles, condicionales, propiedades dinámicas, etc.
Espero que os guste! 😊
¿Aparte de el IDE o editor de texto, usas alguna otra herramienta o programa en tu día a día?
Las que uso yo:
- Insomnia para las peticiones HTTP
- Lazygit para gestionar git en la terminal
- DBeaver si quiero ver algo de una base de datos
Hay mucha gente que sin saber programar se mete directamente a aprender a programar en React o en Vue porque es lo que está de moda y se pide en empresas.
Yo recomiendo no hacer eso, antes necesitas una base importante de HTML, CSS y Javascript
Tengo una pregunta para los que trabajáis en el frontend.
Cuando haceis peticiones HTTP a una API, ¿creáis un modelo para los datos?
Es decir, ¿desde la vista accedéis a directamente las propiedades del objeto o creáis un objeto en cada llamada para controlarlo mejor?
Siempre he querido programar teniendo tests, pero siempre acabo dejándolo.
Pienso que lo malo de los tests es que también los tienes que mantener y requieren de esfuerzo.
En desarrollos ágiles donde cambian los requisitos siento que programo dos veces lo mismo si hago test.
Esta herramienta es muy curiosa, lo que hace es hacer una captura de pantalla cada cierto tiempo configurable de tal forma que puedes tener una timelapse de la página que estás desarrollando:
Por cierto, quiero reescribir el artículo que redacté hace años de bootstrap porque se ha quedado desactualizado y quiero añadir más información.
Si tenéis alguna idea o sugerencia me podéis decir.
Muy chulo este test muy visual para practicar selectores #css. Te sirve de repaso y se hace ameno.
📚 ¿Me recomendáis libros interesantes de programación en general y de desarrollo web?
Prácticamente solo conozco el de Clean Code. Entre todos podríamos crear una lista interesante.
Ya os hable de este proyecto pero quería volver a recordarlo.
🧙 Unos españoles están haciendo un juego multijugador RPG de Harry Potter con Unity. El desarrollo va lento porque no hay mucha gente colaborando.
Por una vez youtube me ha recomendado un vídeo muy interesante.
Es un vídeo con una clase de computación cuántica impartida por @edusadeci. Muy recomendable.
Red neuronal en 3D, súper curioso
Segudo artículo del curso gratuito de #vuejs ✌️
En este artículo echamos un vistazo a la estructura de carpetas de los proyectos de Vue y nos ponemos manos a la obra creando un componente básico.
Pasad el ratón por encima del botón
¿Queréis que suba hoy otro artículo del curso de Vue?
Con esta sencilla extensión para el #vscode puedes hacer una comparación entre los archivos de dos carpetas.
Lo que se muestra es una vista partida con las diferencias en forma de diff de git
https://marketplace.visualstudio.com /items?itemName=moshfeu.compare-folders
Los de @nordicjs están retrasmitiendo mediante streaming en @TwitchES su conferencia sobre #Javascript
Si te gusta el sistema de columnas #css de Bootstrap, te recuendo que tengo una librería css para crear un sistema de 12 columnas con flexbox:
Como en Bootstrap, puedes decidir el tamaño de las columnas para cada dispositivo.
Me cuesta ver el sentido de utilizar Haskell como lenguaje de programación (en general cualquier lenguaje funcional)
Puedo entender que para ciertas tareas puede venir bien, pero si no lo usas mucho te acabas olvidando de su sintaxis extraña.
🤔 ¿Alguna vez os han aceptado una pull request en un proyecto open source medianamente importante?
Yo todavía no, me cuesta encontrar issues que no se me queden grandes o que no los esté implementando otro ya.
🎉 ¡1000 seguidores! 🎉
Muchísimas gracias a todos por el apoyo que me habéis dado todo este tiempo, significa mucho para mí ❤️ 
Esta semana nuevo artículo de la serie gratuita de VueJS.
Stay tuned!
Se me han olvidado los cascos en casa.
current mood: angry
Los de @udemy_es han puesto este curso gratis de #nodejs para crear APIS Restful.
Yo no lo he cursado pero las valoraciones que tienen no están mal.
Estoy un poco harto de que el google chrome cachee las páginas y tenga que recargar con Control + F5 por si ha cambiado algo
⚡ Si eres fan de harry potter y te gusta la programación esto te va a encantar.
🧙 Se trata de una lista de alias para que sustituyas los nombres de los comandos de bash por hechizos:
Ejemplo para hacer sudo: $ crucio ls
https://gist.github.com/graceavery/0 1ec404e555571a4a668c271c8f62e8b
Muy buenas las reflexiones de @midudev en el artículo que ha escrito para @octuweb sobre la performance en el desarrollo web. Recomendada su lectura.
Han recopilado en este repositorio muchas de las formas que tienes para salir de #vim, ya no tienes excusa.
💀 Empieza el mes spooky 💀
A los que os gusta el desarrollo web, ¿por qué decidísteis dedicaros a la programación web?
En mi caso porque me gusta también el diseño gráfico y el desarrollo web es una forma de mezclar los dos mundos.
¿Qué es Vue? ✌️
Primer artículo del curso gratis de Vue que estoy preparando.
En este capítulo explico las características que ofrece #vuejs, los comparo con otros frameworks y explico cómo crear tu primer proyecto.
¡Gracias por vuestro apoyo! https://codingpotions.com/que-es-vue
Ayer publiqué artículo sobre Vue. Espero que os haya gustado 😊
Tengo ya unos cuantos artículos preparados del curso gratuito de #vuejs
❤️ FAV a este tweet si queréis que suba hoy mismo el primero.
Lo prometido es deuda. Gracias por vuestro apoyo.
Voy a publicar el primer artículo de la serie y espero seguir subiendo un capítulo cada dos o tres semanas. No prometo nada.
Soy yo o youtube cada vez tiene más anuncios. Hoy me ha saltado el típico anuncio de antes del vídeo y cuando ha terminado ha saltado otro.
Además ponía 2/2 eso que significa ¿que van a añadir 10 anuncios seguidos?
Llevo los cascos puestos y se ha parado la música y no me he dado ni cuenta
Un día me tengo que proponer el reto de programar con la fuente comic sans
Estos son los elementos HTML que más se usarn en en las 500 páginas más populares. 
Pues no pinta mal lo de las github actions, lo mismo preparo un artículo.
Pero antes quiero terminar de escribir el curso gratuito de Vue que estoy preparando. Stay tuned.
Si necesitas una API para mockear o para cualquer side project que estés haciendo, aquí tienen una recopilación de APIs públicas:
¿Soy el único que odia las página AMP que quiere promover Google?
No me gustan este tipo de vídeos. Lo siento @victorobs
Mucha gente va a entrar por el clickbait del vídeo esperando aprender un lenguaje en 15 minutos y no va a aprender casi nada. Me parece que se está aprovechando de la gente desesperada por aprender.
https://www.youtube.com/watch?v=Q9fw kpxr3Dw
@victorobs Desde antes de poner este tweet ya me tenía bloqueado en Twitter y eso que nunca le he dicho nada hasta ahora.
Estuve probando la herramienta de #piio y no pinta nada mal.
Lo que hace es cargar las imágenes de tu web mediante un CDN y servirlas ya optimizadas.
¿La habéis probado? @PerfReviews_
Ojo a esto.
El snippet que aparece en esta página lo puedes copiar y pegar en la consola del navegador en cualquier web para que te muestre una vista comparando la página con javascript y sin javascript habilitado.
¿Qué cosas o herramientas os ha facilidado mucho la programación web? 🤔
En mi caso:
- 🖥️ Tener dos monitores
- 🔦 Linters
- 🤩 display: flex
- 👨💻 #vscode y sus plugins
Mola mucho el portfolio interactivo de @oravecpeter
Tener un portfolio currado te da muchos puntos en la entrevista y es una de las mejores cartas de presentación. Dice mucho de ti como programador.
Esta extensión para el #vscode pinta brutal.
Lo que hace es, mediante inteligencia artifical, aprender código de programas open source. Cuando la extensión detecta un error que suelen cometer los programadores te avisa en tu propio código.
https://marketplace.visualstudio.com
/items?itemName=DeepCode.deepcode 
Menuda currada esta página 😮
Es una lista de las propiedades css y el impacto que tienen en el navegador cuando cambias o modificas esa propiedad.
🤔 Una pregunta, ¿vosotros qué tenéis puesto como homepage del navegador? ¿y al abrir una pestaña nueva?
Yo tengo esta extension y la tengo configurada para que cambie el la imagen de fondo cada día así no me cansa.
https://chrome.google.com/webstore/d etail/dream-afar-new-tab/henmfoppjjkcencpbjaigfahdjlgpegn
Esta página esta muy interesante porque es un todo en uno.
🔨 Recopila una serie de herramientas gratuitas, por ejemplo, conversión y edición de imágenes, herramientas para PDFs, etc
Si te pasa que a veces se te olvida todas las propiedades que tiene flexbox, te recomiendo esta extensión para el #vscode que añade un acceso rápido a un cheatsheet con todas sus propiedades:
https://marketplace.visualstudio.com /items?itemName=dzhavat.css-flexbox-cheatsheet
¿Creéis que ruby se está muriendo?
Yo cuando lo probé junto a ruby on rails me pareció fácil de usar, pero python ofrece lo mismo y además se usa mucho para machine learning y big data.
¿No os pasa que cambiáis de proyecto y al cabo de una semana ya no te acuerdas de nada del proyecto anterior?
En plan lo vuelves a abrir y te sorprendes a ti mismo.
A mi me sigue pareciendo increíble que en mi universidad se sigan haciendo los exámenes de programación en papel.
No puedes borrar si te equivocas, no puedes estructurar bien, etc
Muy chulo este efecto de hover con #javascript y #threejs
Es un poco complejo y hace que la web cargue más lenta y sea peor, pero para una web efectista queda guay.
Pinta bien el framework de #svelte, con poco código puedes hacer cositas. Ya veremos en un futuro cómo se desarrolla.
Video de @midudev https://www.youtube.com/watch?v=Xsxm 8_BI63s&t=191s
Curiosidades de #javascript
Por cierto, sí, se que es porque no se pueden "restar" strings y hace la conversión, pero me ha hecho gracia. 
¿Creéis que Typescript va a ser el futuro de la programación en el frontend? 🤔
A mi personalmente no me desagrada pero no me gusta la idea de tener tantos procesos de compilación y transpilación, demasiada magia ocurre ya en webpack.
Yo JQuery lo veo ya muy lejano, como de otra época, aunque todavía se use mucho.
He descubierto que existe una app de @github que automáticamente te optimiza el tamaño de las imagenes en tus repositorios cada vez que haces commit. Muy útil! 😃
¿Conocéis lo de los conventional commits?
Es una especificación para los mensajes de commit. Si todos siguieramos algún tipo de convención se podrían crear herramientas automáticas para el parseo y lectura de commits.
Seguro que muchos ya lo usáis:
Han actualizado Jekyll a la versión 4. Ahora tiene un sistema de caché para generar las páginas y debería tardar menos es hacer el buid.
Más info aquí: https://jekyllrb.com/news/2019/08/20 /jekyll-4-0-0-released/
📈 Sampler es un panel de control para la consola que con un archivo yaml puedes configurar para tener gráficas, consumos y alertas sobre la ejecución de comandos:
Los de @nuxt_js han sacado #nuxtpress, un microfamework orientado a crear páginas estáticas generadas a partir de componentes Vue y tirando de archivos markdown. Acaba de sarlir pero pinta muy bien.
¿Recuerdas cuando te uniste a Twitter? ¡Yo sí! #MiAniversarioDeTwitter 
🎨 Con esta extensión del #vscode @code puedes definir colores que vas a tener en el proyecto para que no tengas que andar copiando y pegando.
Sí, se que existen las variables css y scss pero a alguien le puede venir bien.
https://marketplace.visualstudio.com
/items?itemName=RoyAction.color-manager 
Este acortador de URLs me ha fascinado. Utiliza caracteres invisibles para que la URL sea lo más limpia posible:
Por ejemplo la URL de mi blog acortada:
En twitter parece que no funciona, pero la segunda url que he puesto apuntaba a mi blog.
Con este servicio puedes convertir un archivo spreadsheet de google en una API para tu aplicación o página web:
He hecho este test visual de decir si algo está en el centro y he sacado una puntuación de 5 nada más 🙃 Creo que no valgo para el mundo frontend.
¿Cuánto sacáis vosotros?
https://supremo.co.uk/designers-eye/ via @SupremoHQ
Pues yo también me acabo de enterar de que con Ctrl + T puedes voltear dos caracteres.
En respuesta a:
Si sois de los que pasa más tiempo en la terminal que fuera te recomiendo este cli para poder probar endpoints y hacer llamadas HTTP (tipo postman)
🎉 🥳🎊
¡Nueva versión de mi blog desplegada!
He cambiado muchos estilos, he añadido posibilidad de poner tema oscuro y más cosas. Si algo no se ve como debería es normal, todavía está en pruebas.
(Si no os sale eliminar la caché)
📦 Con ngx-quicklink puedes cargar en Angular dinámicamente los módulos que se necesiten con los links visibles en la página en ese momento.
Si dentro de lo que ve el usuario en ese momento hay un link, en ese momento se cargará su módulo por si acaso.
📝 ¡Nuevo artículo publicado en mi blog!
Hoy hablo de pequeños consejos y tips básicos a la hora de gestionar y mantener una página web. Espero que os guste.
Nueva actualización del #vscode
Cambios en los iconos, opciones con array de strings en la UI, al seleccionar se muestran los whitespaces, etc.
A mi los iconos no me convencen del todo.