Share this page!

Freddy Montes Profile picture
Twitter logo
Jun 28 • 8 tweets • 5 min read
Para crear una librería de components en #reactjs siempre te recomiendan:

1. Empezar de cero 🤢
2. Usar una librería y cambiar los estilos 😢

Hay una tercera y MEJOR opción:

✨ Componentes primitivos ✨

❤️ ¿Me ayudas con un RT?

🧵 HILO
Los components primitivos son accesibles y sin estilo para construir #DesignSystems y #webapps de alta calidad.

Proporcionan todas las bases necesarias para que desarrolles tus propios components con el diseño que quieras rápidamente.

Empieza lista...
Reach UI busca convertirse en la base accesible de tu #DesignSystem basado en React.

reach.tech
UI Componentes totalmente accesibles y sin estilo, diseñados para integrarse perfectamente con el #CSS de @tailwindcss.

headlessui.com
@tailwindcss Librería de UI Components de bajo nivel centrados en la accesibilidad, la personalización y la experiencia del desarrollador

radix-ui.com
@tailwindcss Una biblioteca de React Hooks que proporciona primitivas de interfaz de usuario accesibles para su sistema de diseño.

react-spectrum.adobe.com/react-aria/
@tailwindcss BONUS: chakra-ui.com

Aunque no son completamente "sin estilos" te permiten un nivel de personalización alto comparado con otras librerías.
@tailwindcss ❤️ Si te gusto este thread dale RT al primer tweet y sígueme para más contenido.

📕 Y tengo un libro gratis de tips de #HTML, #CSS y #JavaScript fmontes.com/99

📸 También hago contenido en instagram.com/fmontes

• • •

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

Keep Current with Freddy Montes

Freddy Montes 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 @fmontes

Freddy Montes Profile picture
Jun 29
El 90% de la información de la web es texto.

Mejora la usabilidad y diseño de tus proyectos web con un excelente diseño tipográfico.

Te dejo tips y herramientas.

🧵 HILO Image
Escoge máximo dos fuentes.

1. Una para títulos, subtítulos, botones, etc.
2. Otra para párrafos

Puedes combinar sus pesos y estilos.

🛠 Genera combinaciones de fuentes con: fontjoy.com
Los párrafos máximo deben tener entre 50 y 70 caracteres de ancho.

Más de esto es difícil de leer para el usuario.

Puedes usar la unidad "ch" de #CSS.
Read 9 tweets
Freddy Montes Profile picture
Jun 22
¿Eres #developer, pero te cuesta diseñar?

Te dejo mi serie: ✨ Diseño para desarrolladores ✨

Donde explico #DisenoUI desde la perspectiva de un #developer.

🧵 HILO
Aprende a crear lo básico que necesitas para cualquier diseño:

1. Colores
2. Fuentes
3. Variantes

Aprende como identificar lo malo del layout de tu #webapp y como arreglarlo.

Read 10 tweets
Freddy Montes Profile picture
Jun 20
Esta semana solo esperen de mi tweets y fotos de playa y cerveza. La programación habitual regresa la próxima semana
Playa Cocles, el caribe costarricense Image
El short del #Metaverso Image
Read 7 tweets
Freddy Montes Profile picture
Jun 16
💪🏽 ¿Quieres practicar o mejorar tu portafolio y no tienes ideas de proyecto?

😉 I GOT YOU

✨ 3 ideas de #webapps para practicar #frontend (incluye wireframes)

❤️ Ayudame con un RT

🧵 HILO
Un slider de productos responsive usando solo #CSS sin JavaScript.

1. Debe ajustarse a todos los tamaños de pantalla
2. Swap event para hacer el slide
3. Snap al borde de cada item

Hint: "css scroll snap"
#app para monitorear el precio de crypto (sí que hace falta 😢)

1. Un campo para buscar tokens
2. Agregar a la lista
3. Boton para eliminar

- API de precios: coinmarketcap.com/api/
- Backend: localstorage for v1 y un BaaS para v2
Read 5 tweets
Freddy Montes Profile picture
Jun 14
¿No entiendes #CSSGrids?

#CSSGrids es lo mejor para hacer layouts modernos te explico lo básico en pocos tweets.

Hagamos este layout básico.

🧵 [1/13]
El primer paso es crear el #HTML. Es solo un padre con tres hijos. Nada fuera de lo común.

[2/13]
En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.

[3/13]
Read 13 tweets
Freddy Montes Profile picture
Jun 11
✅ ¿Quieres practicar #frontend sin quedarte pegado?

✨ Te preparé un ejercicio para hoy ✨

🧵 Thread con tareas y pasos a realizar para completarlo.

❤️ RT please

PD. Estoy probando este formato, si les gusta puedo desarrollar muchos más ¡feedback bienvenido!
La aplicación es un #webapp para crear de facturas que les permite a los usuarios crear facturas agregando y/o eliminando items.

Los items consisten en

- Descripción
- Precio

La aplicación debe calcular el total a medida que se van agregando o items.
Analicemos el diseño.

Es una sola pantalla con dos estados:

🪫 Sin items:
1. Formulario: descripción, precio y botón
2. Mensaje de "no hay ítems"

🔋 Con items:
1. Formulario: descripción, precio y botón
2. Líneas de la factura con botón para eliminar
Read 17 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 on Twitter!

:(