Humberto Rivero

FrontEnd Developer

[NO1ennn @N01ennn]

this is pure f*cking treasure

Netflix engineers posted 20 GitHub repos that turn your Opus 5.5 into a f*cking motion empire:

built for Opus 5.5

1. claude-motion: taste, checks its own frames, sound written in code. the author built it for Opus 5.5
https://t.co/TtBtU2nVrN

2. claude-motion-design: HTML, Playwright and ffmpeg, no Remotion. the demo was made on Opus 5.5
https://t.co/iOsyrWUvKE

3. motion-graphics-skills: 13 skills for launch videos. the README tells you to run it on Opus 5.5
https://t.co/yNZhCZO8wT

4. claude-remotion-skill: a Remotion editor from one prompt. captions, B-roll, sound
https://t.co/immhzwVP5i

5. klik-anim-skill-creation: the laws of animation and camera, built on Opus
https://t.co/XWqUnn4v7o

6. hyperframes-motion-reel-skill: a showreel cut to the beat at 120 BPM, on HyperFrames
https://t.co/E96s10io4Q

7. product-launch-motion: a full launch film. voice-over, camera, color grade
https://t.co/VBfllJ6j1K

8. animate: a short clip in one canvas file, storyboarded as it goes
https://t.co/xafT2UPXUe

9. motion-design-skills: timing, color, typography, logos, Remotion
https://t.co/gKUqO9P2Xe

10. hyperframes-student-kit: 14 skills and 406 motion graphics cards
https://t.co/fJmzb9I5z0

the engines these skills render with

11. hyperframes: HTML to MP4. the one almost everyone installs
https://t.co/4rIffGKusx

12. remotion: video written in React
https://t.co/o5zRdBgcS0

13. remotion skills: the official Remotion skills for your agent
https://t.co/EieoL5Quaq

14. GSAP: the timelines HyperFrames runs on. skills: npx skills add greensock/gsap-skills
https://t.co/LYRTAx5wvF

taste and everything around it

15. motion-design-skill: motion principles that work with any engine
https://t.co/Vgr318UX9h

16. awesome-motion-design-agent-skills: a map of GSAP, Remotion, Lottie and Rive skills
https://t.co/hF0ZxWyjcI

17. motion-graphics: B-roll built straight from your transcript
https://t.co/Gwi9SKlS9C

18. motion-dev-animations-skill: web animation on https://t.co/V19R87wQid, not video
https://t.co/YOL7zHaCB5

19. motion: Motion itself, formerly Framer Motion
https://t.co/Jp9AReFaWe

20. lottie-web: when you need Lottie, not MP4
https://t.co/TEG0FY4vFg

the stack in one line: Opus 5.5 writes the code, a skill sets the timing and the camera, an engine renders the MP4.

check each repo before you install. save this.

[santi @santtiagom_]

Uber publicó cómo armó su infraestructura de MCP y hay varias ideas muy buenas acá.

imaginate una empresa con miles de servicios internos y muchos equipos conectando agentes a esos sistemas por su cuenta.

cuando eso empieza a crecer, terminás con tooling fragmentado, infra duplicada, distintas formas de exponer tools y poca consistencia en seguridad, discovery y operación.

por eso Uber hizo un MCP Gateway: una capa central entre los agentes y sus servicios internos.

el agente habla MCP y el gateway se encarga de routing, permisos, ejecución y de traducir las llamadas a HTTP, gRPC o TChannel según corresponda.

como Uber ya tenía miles de APIs internas, también hicieron AutoCrawler: recorre sus definiciones, detecta métodos y schemas y genera MCP tools automáticamente. incluso usan un LLM para mejorar las descripciones.

hoy tienen +800 MCP servers y +5000 tools. y ahí aparece otro problema: no podés cargar todas esas definiciones en el contexto del modelo.

para eso crearon Omni MCP. en vez de pasarle miles de tools al agente, este va descubriendo qué server necesita, qué tools tiene disponibles, carga el schema de la correcta y recién ahí ejecuta.

me parece un muy buen ejemplo de cómo cambia la arquitectura cuando los agentes pasan de usar unas pocas tools a trabajar con miles.

terminás necesitando algo muy parecido a un API Gateway para agentes.

[Humberto Rivero @HumbertoDevelop]

¡No te pierdas la miduConf!
Conferencia de Programación y Tecnología.

👩‍💻 7 Speakers TOP
💬 Charlas para todos los niveles
🎁 Muchos regalos y premios
...¡y muchas sorpresas!

Apunta la fecha: 12 de SEPTIEMBRE

https://t.co/Miuk3ejDvZ

[Miguel Ángel Durán @midudev]

Cuando alguien infravalore la Programación Web, recuerda que una página desarrollada con Angular fue clave para poner en jaque al régimen de Venezuela 🇻🇪.

[Miguel Ángel Durán @midudev]

¿Hay fraude electoral en Venezuela?
¿Son reales las actas de la oposición?
¿Podría falsificar Maduro nuevas actas?

¡El papel del código abierto y la programación!
→ https://t.co/x6fWXOlpqc

[Miguel Ángel Durán @midudev]

Guía de Algoritmos y Estructuras de Datos en JavaScript

◆ +15 algoritmos explicados al detalle
◆ Tests para probar tus soluciones
◆ Código explicado de cada uno
◆ Traducciones al Español

🔗 https://t.co/kN6TShDGfh

[El Programador Senior @5eniorDeveloper]

¿Quién tomó la foto?

[Jakub Motyka @jakubmotyka]

Resumo en 7 puntos lo que, para mí, ha venido a confirmar la filtración del algoritmo de búsqueda de Google desvelada por @iPullRank.

1️⃣ smallPersonalSite: si tienes una web pequeña, existe un factor que clasifica tu web como tal. Adiós a competir contra gigantes.

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Use Modern CSS to write Better CSS! A lot of new features can help you optimize your code and reduce redundancy.
✅ CSS Nesting
✅ CSS Variables
✅ Media Query range features

⬇️ Old Code New Code ⬇️

[TypeScript @typescript]

Announcing TypeScript 5.5 Beta! 📣

Now with type predicate inference, more type narrowing, an @‍import tag for JSDoc, the --isolatedDeclarations flag, performance & reliability improvements, and much more!

https://t.co/wvLzGx5dk2

[React @reactjs]

We just published the first beta for React 19! This beta release is for collecting feedback and preparing libraries for the next major version of React.

To see what's included, check out the release post:

https://t.co/dnGcbIRH6O

[Next.js @nextjs]

VS Code now supports custom editor labels.

If you want to change the display of `page`/`layout` (or other Next.js file conventions) you can modify your `settings.json` to change the tab title.

https://t.co/f8c3PEW9bn

[David Mráz @davidm_ml]

Learn CSS transition timing functions with this tutorial 🚀 🧑‍💻

[Digital House @_digitalhouse]

Ayer fue la primera edición del #LiveCoding🚀 Nuestro host desarrolló en vivo el código front de una app de tareas.

¡Fue una gran oportunidad de acercar el código a todos/as que se interesan en el desarrollo #frontend y la programación en general! ✨

Nos vemos en el próximo 👋

[Miguel Ángel Durán @midudev]

🚩 Red flags de cualquier equipo de desarrollo

- Los Juniors son apartados de las decisiones
- Si hay un error se busca el culpable y no el aprendizaje
- Hay un héroe que todo lo arregla y no lo explica
- No invierte en formación y desarrollo profesional
- Para hacer deploy hay que pedir permiso
- Sólo algunos saben hacer rollbacks del código
- Comunicación unidireccional (de arriba a abajo)
- Falta de diversidad y puntos de vista diferentes
- Usa Story Points como métrica de éxito
- No existe espacio para la experimentación

Sólo son algunos... ¡Deja el tuyo en los comentarios! ↓

[David Mráz @davidm_ml]

https://t.co/R93ovpNmKt

[Héctor de León (El loco de los perros) ⛧ @powerhdeleon]

¡Curso de REGEX GRATIS!

https://t.co/h6PZThodp0

[Miguel Ángel Durán @midudev]

¿Quieres conseguir un 100 de Rendimiento en tu Web?

Colección de Trucos para conseguirlo ↓
1. Carga sólo el JavaScript y CSS que necesitas.

Para saber si eso es un problema, puedes usar la pestaña de Cobertura en las DevTools.

Esta pestaña está un poco oculta, pero te dice el % de uso de tus archivos.

Al darle a un archivo, te muestra las líneas que se usan:
2. Carga diferida de dependencias

Utiliza imports dinámicos para cargar bibliotecas sólo cuando las necesitas.

Si algo sólo se necesita tras la interacción del usuario...
¡Entonces cárgalo sólo ahí y no desde el principio!

Un ejemplo con código JavaScript:
3. Optimiza tus imágenes

Usa formato y tamaños adecuados para tus imágenes:
- webp o avif siempre que puedas
- Haz imágenes responsive y cargar según el dispositivo
- Usa SVG para iconos e imágenes vectoriales
- Evita PNG siempre que puedas

→ Usa squoosh․app como herramienta

4. Usa la plataforma web
Evita usar dependencias grandes o innecesarias:
- Busca alternativas más pequeñas (lodash vs just)
- Favorece soluciones nativas (axios vs fetch)

Con bundlephobia entiendes el coste que tiene:
→ bundlephobia․com

5. Favorece CSS en lugar de JavaScript
CSS ha mejorado muchísimo y cada vez es más potente.
Hoy en día puedes hacer ciertos sliders y UIs sin JS.

Revisa y aprende a usar CSS ya que:
- La solución ocupa menos que JS normalmente
- La evaluación es mucho más rápida
- No bloqueará el hilo principal
- Mejor UX

6. Carga diferida de imágenes
Usa la etiqueta nativa lazy de imágenes e iframes para cargarlas sólo cuando el usuario las necesita.

¡Ojo! Usa esta técnica para imágenes que sabes que no están en pantalla desde el principio.

<img loading="lazy" src="imagen.webp" alt="..." />

7. Cuantas menos fuentes, mejor
Las fuentes son críticas para mostrar nuestra web.
Si puedes, usa sólo fuentes del sistema.
Si no usa el mínimo número necesario...
¡Y siempre con formato woff2 y desde tu dominio!

No uses Google Fonts para cargar tus fuentes.
Google Fonts puede ser buena idea para probar algo... ¡Pero no es lo más óptima en cuanto a rendimiento!
Lo mejor es hospedarlas en tu sitio.

8. Evita mostrar un loader al principio
A veces ponemos una pantalla de carga al inicio.
¡Esto es fatal para la percepción de carga del usuario!

Optimiza tu web para que se renderice en el servidor y pueda mostrar información útil desde el inicio.

Mira al diferencia entre Wetaca y Knoweats.
¿Cuál prefieres?

¡Y esto es todo! Si te gusta mi contenido... ¡sígueme!
¡Gracias por leerme!

[Manz 🇮🇨⚡👾 @Manz]

¿Estás aprendiendo a programar? ¿Te está costando?
Antes de escribir código... ¡Aprende los conceptos!

✨ Explicado paso a paso
✨ Imágenes con conceptos visuales
✨ Condicionales y bucles
✨ Estructuras de control

Te lo explico por aquí 👇
https://t.co/VGXCPTg5ZM

[Miguel Ángel Durán @midudev]

Flujo de trabajo Git y GitHub en empresas grandes