Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Miguel Ángel Durán Profile picture
@midudev
Aug 17, 2022 • 10 tweets • 5 min read • Read on X
Scrolly
¡NO necesitas instalar NADA para PRACTICAR PROGRAMACIÓN WEB!

Descubre los 7 MEJORES PLAYGROUNDs de código GRATIS.

🧵⬇️
⌈CODI LINK⌋

Editor en tiempo real de HTML, CSS y JS.

- Buscador de dependencias integrado.
- No necesita registro
- Comparte la URL y listo
- Totalmente de código abierto

➡️ codi.link Captura de pantalla de Codi.link
⌈GLITCH⌋

Crea y construye páginas y servicios web.

- Soporte para colaboración en tiempo real
- Despliegue automático de tu página
- Sincronización con GitHub
- Soporte para SQLite

➡️ glitch.com Captura de pantalla de Glitch
⌈STACKBLITZ⌋

Crea proyectos de React, Vue, TypeScript y Node de forma rápida y sencilla.

- Editor basado en Visual Studio Code
- Instala las dependencias que necesites
- Soporte total para Node
- Experiencia de usuario superior

➡️ stackblitz.com Captura de pantalla de Stackblitz
⌈CODESANDBOX⌋

Crea, comparte y colabora en tiempo real para construir páginas web.

- Compatible con dispositivos móviles
- Desarrolla desde tu iPhone y iPad
- Integración con GitHub
- Optimizado para frameworks (Next.js, Nuxt)

➡️ codesandbox.io Captura de pantalla de Code Sandbox
⌈PLAYCODE⌋

Playground enfocado especialmente a JavaScript para probar rápidamente tu código.

- Usa paquetes de NPM fácilmente.
- Consola en tiempo real
- Código autocompletado
- Tiene aplicación de escritorio
- Cursos para aprender HTML y CSS

➡️ playcode.io Captura de pantalla de PlayCode
⌈CODE PEN⌋

Mítico editor en línea para web.

- Soporte para SCSS y Babel JavaScript.
- Red social para compartir y aprender.
- Miles de ejemplos de diseños.

➡️ codepen.io Captura de pantalla de Codepen.io
⌈JS BIN⌋

Es tan mítico que no podía faltar.

Este playground está pensado especialmente para probar cosas rápidas en JavaScript aunque tiene soporte a HTML y CSS.

Lo mejor es que no requiere registro y la interfaz es limpia y sencilla.

jsbin.com/?html,output Captura de pantalla de JSBin
⌈RUNJS⌋

Vale, no es una página web... ¡Es una aplicación de escritorio!

Pero es que si estás aprendiendo JavaScript o quieres probar cosas rápido... ¡NO HAY NADA MEJOR!

Se puede usar gratis aunque algunas funcionalidades son de pago.

➡️ runjs.app Captura de pantalla de RunJS
Y si quieres seguir aprendiendo y mejorando en programación...
No te pierdas mis streams de Lunes a Jueves a las 8PM.

➡️ twitch.tv/midudev

Hablamos de desarrollo web, programación, superar pruebas técnicas y buenas prácticas.

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Miguel Ángel Durán

Miguel Ángel Durán Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @midudev

Miguel Ángel Durán Profile picture
Jun 28, 2024
Cómo pasar de Junior a Senior en Programación

MEGA HILO con ideas, trucos y consejos. Ilustración en pixel art que muestra la progresión de un programador de junior a senior. A la izquierda, un joven programador con equipo básico y código simple, evolucionando hacia la derecha donde el programador gana experiencia, con código más complejo y mejor equipo. La etapa final en el extremo derecho muestra a un programador senior con herramientas avanzadas, código sofisticado y un entorno de alta tecnología, pasando de una habitación simple a una oficina moderna
1 🛤️ Camino al Senior: Empezando por el Principio

Lo más importante. NO HAY ATAJOS y necesitas tiempo.
Comienza con una base sólida. Domina los fundamentos de la programación: algoritmos, estructuras de datos y patrones de diseño.

Ese conocimiento te servirá siempre.
2 🧠 Profundiza en tu Stack

Para iniciarte es buena idea saber un poco de todo, te abre más posibilidades en el mercado, pero conforme ganas años de experiencia te ayudará especializarte.

Eso sí, tampoco te cierres en banda a nada nuevo. La tecnología cambia rápido.
Read 17 tweets
Miguel Ángel Durán Profile picture
Jun 25, 2024
¡Consigue un 100 de Rendimiento en tu Web!

MEGA HILO con trucos para que lo consigas ↓ 100 de puntuación en Web Performance
1. Carga diferida de código

Con imports dinámicos puedes cargar bibliotecas sólo cuando las necesitas.

Por ejemplo: Si necesitas algo sólo tras la interacción del usuario...
¡Entonces cárgalo entonces y no desde el principio!

Un ejemplo con código JavaScript: Código JavaScript que usa import dinámico al hacer click en un botón para cargar una biblioteca.
2. Detecta el JS y CSS que no necesitas

Usa la pestaña de Cobertura en las DevTools.
Te dice el % de uso de cada uno de tus archivos
Al darle a un archivo, te muestra las líneas que se usan
Así detectas fácil qué no estás usando Uso de la pestaña Coverage (o Cobertura) en las DevTools que te indica que tanto por ciento estás usando de los archivos de una página.
Read 14 tweets
Miguel Ángel Durán Profile picture
Jun 21, 2024
5 repositorios de GitHub para crecer de Junior a Senior:
1. La ruta para ser Senior Software Engineer

Libros, contenido, newsletter, artículos, comunidades y mucho más para guiarte en tu camino al crecimiento profesional.

🔗 github.com/jordan-cutler/…
Image
2. Build your Own X

Aprende a desarrollar casi cualquier cosa.
Sistemas operativos, drivers, compiladores, bots, juegos, buscadores...

No importa lo que quieras programar, en este repositorio tienen una guía para que lo aprendas.

🔗 github.com/codecrafters-i…
Image
Read 6 tweets
Miguel Ángel Durán Profile picture
Jun 17, 2024
Cursos de Google para Aprender Programación Web
En Español, desde cero y sin coste ↓ Cursos de Google para Aprender Programación Web con HTML, CSS y JavaScript
Aprende HTML

Curso de HTML para desarrolladores web que va de nivel principiante hasta experto. Repasas todos los elementos y atributos que debes conocer, además de la semántica de la web.

→ web.dev/learn/html
Image
Aprende sobre CSS

Desde los fundamentos de CSS, como el modelo de caja, cascada y especificidad, caja flexible, grid y z-index.

Hasta funciones, tipos de color, gradientes, propiedades lógicas y herencia.

→ web.dev/learn/css
Image
Read 4 tweets
Miguel Ángel Durán Profile picture
May 13, 2024
Aprender a PROGRAMAR NO TIENE que ser ABURRIDO
CSS, JavaScript, Python, TypeScript, Blockchain...

Los 10 mejores juegos para aprender a programar ⇩ Un chico en su habitación aprendiendo a programar usando videojuegos.
1. SQL Murder Mystery

Resuelve con consultas SQL un misterioso asesinato. Desde cero y hasta niveles avanzados.

mystery.knightlab.com
Image
2. WARRIOR JS

Controla con JavaScript un caballero para superar para superar todos los obstáculos de las mazmorras.

Totalmente gratis con dos niveles de dificultad.

warriorjs.com
WarriorJS
Read 11 tweets
Miguel Ángel Durán Profile picture
Mar 14, 2024
¿Quieres configurar tu VISUAL STUDIO CODE y que te quede como el de la imagen?

¡Te comparto mi tema, configuraciones, fuente, trucos y extensiones! ↓ Image
Tema: One Dark Pro
Variante: Darker

Para conseguir el mismo estilo debes activar las itálicas, las negritas y que los colores sean vívidos.

Es mi preferencia personal pero a mi me gusta mucho cómo queda. Configuración para One Dark Pro: Bold, Italic, Markdown Style, Vivid activados. Color Theme: One Dark Pro
Fuente: Cascadia Code De Microsoft y de código abierto.
Descarga:

Instala la versión "Cascadia Code PL" (trae ligaduras y Power Symbols).

Activa las ligaduras en Code y carga la fuente correcta así: github.com/microsoft/casc…
Configuración en Visual Studio Code para activar las ligaduras. En tu settings.json usa "editor.fontLigatures" y ponlo a true.
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(