Los 60 instrumentos más populares para la vanguardia de 2021 | trucos CSS
Ha pasado otro año y tengo la suerte de volver a vivir Herramientas de networking semanales Archivo de boletines de los últimos 12 meses para encontrar lo que los lectores consideran las herramientas más interesantes para finales de 2021. Entonces, para comenzar 2022, he compilado una lista de las 60 herramientas más populares. Estoy seguro de que aquí hay una lista de al menos uno o dos que puede comenzar a usar en sus proyectos front-end hoy.
Algunas de estas herramientas front-end son muy útiles, mientras que otras probablemente sean solo por curiosidad (me basé en clics únicos). Y dado que muchas de las herramientas en mi lista al final del año son relativamente nuevas, creo que este es un buen indicador de los tipos de herramientas front-end que serán populares el próximo año.
¡Cuenta atrás de arriba a abajo!
contenido
60 soportes abiertos
Open Props proporciona un conjunto de etiquetas diseñadas manualmente que consisten en propiedades CSS personalizadas. Veo que este tipo de cosas se están volviendo más comunes gracias a esta característica particular de CSS. Le permiten colocar una pequeña colección de grupos de propiedades personalizadas útiles, como animations.css, borders.css, fonts.css, zindex.css, etc., y pronto habrá más. O puede usar el archivo principal Open Props para obtenerlo todo a la vez.
Esta es definitivamente una herramienta de visualización frontal e incluso puede ser una buena contribución si desea ayudar a construir una biblioteca de tokens utilizable.
59 SiguienteUI
Moderna biblioteca de React, que utiliza Stitches, una solución popular de CSS en JS e incluye componentes de interfaz de usuario claros y oscuros listos para usar, así como melodías predeterminadas que pueden ser útiles para crear rápidamente páginas de inicio de sesión u otro contenido. no está afiliado originalmente a ninguna marca.
Actualmente está en desarrollo por Alpha, por lo que este es otro que deberías ver el próximo año.
58 Dopefolio
Si está buscando una manera fácil de crear su propia cartera de desarrolladores, Dopefolio es una solución rápida que está optimizada para SEO y tiene un resultado sólido de Lighthouse.
Demo en vivo Para darte una idea de cómo se ve (responsive y todo lo demás), incluye un componente selector de color para que puedas probar tus colores base favoritos en la plantilla.
57 Visa
Es único en la lista de este año de herramientas frontales. Biblioteca de código abierto JavaScript de Vizzu para crear historias animadas y visualizaciones de datos. Tal vez esto sea popular, ya que los datos médicos ahora obviamente necesitan ser creados e integrados.
Esta biblioteca le permite crear fácilmente gráficos de datos estáticos, gráficos animados e historias de datos. Puede ver algunos Ejemplo en vivo para gráficos animados o historial de datosque incluye una historia con datos que muestran qué personaje invitado tuvo la mayor cantidad de comentarios durante toda la duración del espectáculo amigos.
56 10015 Herramientas
Parece que encuentro algunas de estas herramientas frontales todos los años. 10015 Tools es una colección de herramientas frontales, no una sola herramienta. Incluye herramientas de texto, herramientas de imagen, herramientas CSS, herramientas de codificación (como minificadores), herramientas de color, herramientas de redes sociales y algunas otras herramientas diversas.
Esta es definitivamente una de las soluciones todo en uno más completas que he visto, por lo que estoy seguro de que encontrará algunas herramientas de interfaz de usuario útiles aquí a las que puede volver.
55 Nieve
Los conjuntos de íconos siempre son populares, y me encuentro con al menos una docena de nuevos cada año.Esto incluye íconos SVG optimizados, muchos de los cuales tienen animaciones integradas cuando pasa el mouse sobre ellos (por ejemplo, Icono de sobre abierto/cerrado).
Al igual que muchos sitios de íconos, puede buscar por palabra clave o filtrar por categoría, una de las cuales es la categoría Marcas con íconos de Twitter, Facebook, Vimeo, YouTube, Snapchat y más.
54 cola
Esta es la primera herramienta basada en Tailwind en hacer la lista; esta ha sido una tendencia en los últimos años, ya que Tailwind ha ido ganando popularidad. Esta herramienta de front-end es un generador de páginas de arrastrar y soltar para proyectos que utilizan Tailwind CSS.
Incluye dos "accesos directos" gratuitos para cada una de las 15 categorías, por lo que hay una cantidad decente de contenido gratuito aquí y puedes desbloquear el resto por una tarifa mensual.
53 MapaLibre
Esta biblioteca de tarjetas de código abierto se lanzó en marzo y está creciendo en popularidad a lo largo del año. Incluye una biblioteca de JavaScript. y un SDK para mostrar mapas en aplicaciones de iOS y Android.
La documentación incluye Muchos ejemplos de uso de JavaScriptsi desea conocer las capacidades de las herramientas front-end basadas en la web.
52. repositorio SVG
SVG Repo hace esta lista basada únicamente en números puros. Es un repositorio de más de 300 000 gráficos e íconos gratuitos, optimizados y basados en SVG, la mayoría de los cuales tienen licencia para uso comercial.
Cada ícono que elija le dirá qué tipo de licencia es. Puede buscar por palabra clave y guardar el ícono "Guardar" en sus favoritos para usarlo más adelante (no es necesario iniciar sesión).
51. fondo animado
Este ingresó al top 60 este año, pero probablemente no sea la herramienta de front-end más útil. Como decía al principio, algunas cosas saltan por pura curiosidad. Esta es una galería de fondos animados de varias demostraciones de CodePen.
Esta galería es útil porque muestra el fondo como un video pregrabado, por lo que no tiene que preocuparse por la carga completa de la demostración y el colapso de la pestaña del navegador. Úselos con moderación, ya que a menudo usan mucho JavaScript y CSS.
50 lucio.css
Este es un tipo diferente de marco CSS en comparación con los marcos CSS populares de hoy. Es como una herramienta anti-Tailwind, un archivo CSS inicial (como un reinicio) en lugar de un marco completo.
Pico.css proporciona elegantes estilos predeterminados para todos los elementos HTML naturales (puede revisa aquí) sin agregar muchas clases a su etiquetado, y toda la compresión y la compresión gzip tienen menos de 10 kb.
49. Codificación de fuentes
Las fuentes encriptadas parecen ser una nueva y emocionante tendencia últimamente, y CSS-Tricks se está aprovechando de esto con esta pequeña aplicación de información interactiva.
Seleccione la fuente de la izquierda para mostrar código de muestra, información de fuente (ligaduras, cursiva, etc.), precio (la mayoría son gratuitos) y opciones para mostrar código HTML, CSS o JavaScript de muestra.
48 Interfaz de usuario - neomórfica
Esta biblioteca de React se basa en una vieja tendencia de esqueumorfismo que aparentemente quedó obsoleta hace muchos años. ¿Volverá esta tendencia? tal vez no. De hecho, esta biblioteca de React tiene dos años, aunque la compartí por primera vez el año pasado.
La biblioteca contiene una gran cantidad de componentes diferentes, todos los cuales dan cuenta de la apariencia y sensación de "neumorfismo". Parece divertido, pero puede que no sea adecuado para muchos proyectos.
47. Hermosos botones CSS
Casi todas las aplicaciones o sitios web necesitan botones, por lo que una colección como esta siempre se ve bien. Muchos de ellos son diferentes de lo que puedes ver en otros lugares.
Muchos botones incluyen efectos interesantes para sostener el mouse, y puede copiar y pegar fácilmente el HTML y CSS de cada botón directamente en la página.
46 diseñador
Esta herramienta interactiva le permite ajustar varias configuraciones de interfaz de usuario en tiempo real en la página para crear diferentes elementos de la página. Una vez que haya configurado algunas cosas para satisfacer sus necesidades, puede obtener el código para usar las propiedades personalizadas de CSS.
Puede cambiar entre la vista de demostración y la vista de "especificaciones" (es decir, código y otra información útil). La herramienta presta especial atención a la tipografía y otros estilos de interfaz de usuario, que son una parte importante para que el diseño se vea bien.
45 prestigio
Este es un navegador HTTP basado en texto en un navegador, como cartero pero sin interfaz. Le permite definir consultas en texto sin formato, que puede guardar como Gist. Incluye gestión de cookies independiente y tiene un modo oscuro y claro.
Como explica el autor, "Creé Prestige porque necesitaba una aplicación así […] y usar una API externa. "
44. HTML.café
Esta es probablemente la herramienta más fácil de toda la lista. HTML.cafe es más o menos pobre lápiz de códigoporque no hay mejor término. No creo que la gente esté interesada en esas cosas, porque ya existen herramientas poderosas para eso. Sin embargo, este es un editor HTML muy simple con vista previa en vivo.
No hay una ventana separada de CSS o JavaScript como CodePen, pero puede incluirlos fácilmente <style> o <script> Si te quieres. Creo que el mejor uso de esta herramienta es probablemente que los profesores ayuden a los estudiantes que no están familiarizados con HTML, ya que elimina toda la complejidad.
43 gráfico.css
Esta herramienta frontal es un poco como un cruce entre Tailwind CSS y Chart.js. En resumen, Charts.css es un marco CSS que le permite crear gráficos usando HTML y CSS usando clases de ayuda.
Puede crear gráficos de barras, gráficos de líneas, gráficos de conjuntos múltiples, columnas de porcentaje y gráficos 3D. Lo mejor de todo es que los gráficos son asequibles, receptivos y fáciles de personalizar según las necesidades de su marca.
42. generador de botones
"Generador de botones" puede ser un nombre un poco inapropiado, ya que la página no le permite "generar" botones exactamente. Al igual que el recurso del botón anterior, este es una biblioteca de botones construida usando HTML y CSS.
Se dividen en categorías e incluyen algunos efectos interesantes cuando se mantiene presionado el mouse o se hace clic, y puede hacer clic en cada botón para copiar el código en el portapapeles.
41. Generador de patrones decorativos
Esta herramienta interactiva te permite crear tus propios fondos coloridos que puedes exportar a varios formatos. Puede usar el botón Aleatorio para generar patrones aleatorios o elegir entre una variedad de estilos de categoría. También puede editar colores, filtros y varias transformaciones.
El cuadro de diálogo Exportar le permite guardar esquemas y cargar esquemas previamente guardados desde el almacenamiento local. Exporte sus plantillas como JPEG, PNG, SVG incrustado, archivos SVG o fondos CSS.
40 Kabum
Cada año me encuentro con al menos una o dos bibliotecas nuevas con juegos de JavaScript y esta es la lista de este año. Parece tener una API bastante elegante y fácil de usar e incluye un conjunto saludable de componentes, eventos y otras características integradas.
Hay útiles patio de juegos moja tus pies con ella y Una lección para empezar Empezar.
39. Grillo
Si desea una alternativa a Unsplash, que es probablemente una de sus fuentes de imágenes de archivo gratuitas, esta sofisticada colección de imágenes de dominio público puede ser una buena opción, complementada con algunas fotos geniales.
Hay 16 categorías de imágenes de diferentes fotógrafos que permiten usar sus imágenes bajo la licencia CC0 (es decir, haz lo que quieras).
38 Generador de CSS de morfismo de vidrio
Este es un generador en línea que le permite crear efectos de "forma de vidrio" en elementos de la página, algo así como vidrio esmerilado. Obviamente, esta herramienta debe ser parte de una biblioteca de interfaz de usuario más grande que incorporará este efecto en muchos componentes de interfaz de usuario diferentes.
En cualquier caso, prefiero este efecto al efecto "neomórfico", y obviamente mi audiencia está de acuerdo.
37. potasio
Esta es una de las tres herramientas de VS Code de la lista. Este es un esquema de color atractivo que se puede usar al configurar VS Code.
La extensión enumera solo unas 800 instalaciones hasta el momento, lo cual es sorprendente, pero tiene un bonito color pastel que creo que le gustará a mucha gente.
36 Administrar JS
Si es un desarrollador de Node, este es un panel de administración de código abierto que puede agregar a su aplicación Node.js. Genera una interfaz de usuario para usted basada en los datos que agrega desde casi cualquier base de datos, lo que le permite a usted y a su equipo administrar el contenido de su aplicación.
puedes probar Use esta aplicación de muestraque se basa en MongoDB y Postgres.
35 tortita
Este es otro motor de juego para crear juegos 2D multiplataforma basados en HTML5. Cuando lo compartí por primera vez, ganó mucha tracción. Aunque se hace una lista, parece que se necesita Python en el paso de compilación después de escribir el juego.
La API principal usa JavaScript puro, puedes ver muy corto ejemplo aquí.
34. Mosaico Lite
Encontré muchas plantillas de tablero creadas con diferentes tecnologías frontales. Esto está hecho con Tailwind y React e incluye un componente de gráfico adicional creado con Chart.js.
Al igual que otras plantillas similares, esta se puede usar para productos SaaS, paneles de administración y más. Demo en vivo.
33 icono de pato
Esta es otra gran fuente de íconos de código abierto, que ofrece más de 100,000 íconos de búsqueda de palabras clave, todos disponibles para proyectos comerciales.
El sitio incluye la capacidad de marcar y guardar íconos y colecciones de íconos para su uso posterior (se requieren cookies, pero no es necesario iniciar sesión).
32. Lusa CSS
Esta es una biblioteca CSS que en realidad se lanzó a fines de 2020, pero la comparto por primera vez en 2021. Se describe como un marco CSS "minimalista".
Luxa CSS incluye algunos estilos básicos, así como diferentes estilos de componentes, ayudantes y diseño que puede consultar en la documentación o por inspección Esta colección CodePen.
31 destello
Glitter es definitivamente una de las herramientas front-end más extrañas pero geniales que he encontrado en el último año, y parece haber mucho interés, aunque es tan simple como cualquier herramienta.
Este es un generador de texto estilo flash que puede guardar como SVG. Definitivamente no es el 99% de tu proyecto, pero sí un efecto de texto realmente genial.
30 componente de IA
Cuando compartí esto por primera vez, compartí el generador de temas por separado, por lo que está en esta lista. Pero vale la pena compartir el conjunto completo de más de 15 herramientas.
Además de los generadores de temas, hay generadores de resaltado de sintaxis, herramientas de degradado y sombra, generadores de plantillas SVG, fondos animados y más.
29 Flecha Unicode
eso es mucho sólo. Unicode Arrows es un lugar para copiar y pegar, lo adivinó, flechas Unicode y el código hexadecimal asociado para cada una.
No hay mucho que decir al respecto, excepto que el sitio le permite comprar joyas con una flecha Unicode. No es que un grupo de maníacos de la codificación estén interesados en esto, imposible.
28 Tipo de generador de soporte de escala
Esta no es la primera herramienta que intenta generar escalas de fuentes para usted, pero es una herramienta relativamente nueva que combina CSS clamp() Característica.
Las herramientas de front-end le permiten elegir rangos, fuentes, obtener una vista previa del texto e incluso probar la capacidad de respuesta (aunque no veo mucho uso en la última característica, ya que es solo texto).
27 animación XYZ
Descrito como "el primer kit de herramientas compuesto para animación CSS", es compatible con Vue y React. Esto significa que no tiene que escribir ningún fotograma clave. Se parece un poco a Tailwind para la animación, ya que solo usa clases HTML.
Además de agregar clases, estos valores se construyen en su totalidad utilizando variables CSS. Esto significa que puede personalizar el valor modificando la propia variable.
26 Kit de herramientas de interfaz
Esta es otra solución de herramienta universal que incluye más de 20 herramientas para diversas tareas de codificación e imagen.
Incluye herramientas para CSS, JSON, favicons, SVG, compresión de imágenes, npm, expresiones regulares y más.
25 paleta.tierra
Esto es único en la lista y puede inspirar algunos diseños geniales. La herramienta muestra paletas de imágenes naturales (tomadas de Unsplash) incluidas en el sitio web, y periódicamente se agregan nuevas paletas.
Pulsa sobre cualquier imagen y obtendrás un modo con acceso al valor hexadecimal de cada color que compone la paleta obtenida de la imagen.
veinticuatro. sin cortar
Además de la variedad de esta lista, también hay un directorio de fuentes, que actualmente tiene 90 fuentes con énfasis en fuentes modernas o actualizadas.
Todas las fuentes incluidas son de código abierto, por lo que puede usarlas libremente en sus proyectos personales y comerciales.
veintitrés. Clave baja
Construir herramientas interiores parece estar de moda en estos días, y es una solución que puede considerar que le permite construir sus herramientas escribiendo YAML.
Se describe como "un marco de código abierto bajo para la creación sencilla de aplicaciones web, paneles administrativos, paneles de BI, flujos de trabajo y aplicaciones CRUD".
Veintidós. refuerzo de JavaScript
Esta es una extensión para VS Code, diseñada para ayudarlo, como dice en la lata, Promover Su eficiencia de codificación de JavaScript, TypeScript y React. La extensión agrega un ícono de bombilla en ciertos puntos del código, lo que indica que puede activar inmediatamente una refactorización de código predefinida.
Algunos ejemplos incluyen convertir funciones simples en funciones de flecha, invertir construcciones if-else y algunas refactorizaciones específicas de React.
veinte uno. modo de diseño
Esta es una de las últimas incorporaciones a los recursos web.dev de Google Developers y supongo que seguirá creciendo el próximo año.
Incluye muchos modelos de interfaz de usuario "creados con una API CSS moderna". En otras palabras, esta es una colección muy prometedora de ejemplos de CSS, pero debe usarse con precaución, ya que es posible que los navegadores aún no admitan algunas de las tecnologías incluidas.
20 Eliminador de fondo de línea de base
Por supuesto, las herramientas de eliminación de fondo basadas en inteligencia artificial se han convertido recientemente en centavos. Este es gratuito y, según mi breve prueba, funciona muy bien.
Puede cargar imágenes de hasta 5 MB si acepta archivos JPEG y PNG. Las imágenes resultantes se descargan en formato JPEG. Lo único que parece faltar es la posibilidad de descargar el resultado como PNG transparente o tener un color de fondo personalizado.
19 teatro.js
Aquí hay otra biblioteca de animación, pero esta vez una solución de JavaScript que le permite animar elementos DOM o WebGL usando un práctico editor visual que funciona con el código que escribe.
Esta es una herramienta muy poderosa que es difícil de resumir en unos pocos párrafos. Vídeos basados en capítulos Se utiliza en toda la documentación, lo cual es realmente útil si desea familiarizarse con él.
18 perido.css
Las bibliotecas de complementos de CSS siempre han sido populares y, por lo general, encuentro al menos una o dos buenas cada año. Esto incluye algunas transiciones CSS puras que quizás no haya visto en ningún otro lugar.
Puedes probarlos directamente en la página. Mis favoritos son los que tienen algunas dudas en la animación para que sean más únicos.
17 biblioteca de componentes
Esta es una característica integral para un sistema de diseño, ya que los ejemplos de sus componentes provienen de diferentes tecnologías: React, CSS, Angular, Vue, etc. - с sistemas de diseño reales construidos por varias marcas, incluidas eBay, Goldman Sachs, GOV.UK y otras.
Esta es una referencia útil para cualquiera que construya su propio sistema de diseño, ya que puede comparar componentes idénticos de los sistemas existentes incluidos aquí.
dieciséis fiesta.js
Esta es una biblioteca de JavaScript única y divertida que le permite agregar efectos de partículas a las páginas web, especialmente confeti y brillo.
Solo lo usará en situaciones muy específicas, pero puede personalizar la forma de las partículas, la cantidad de partículas, la extensión, etc., lo cual es bueno.
15. interfaz de usuario sin cabeza
Según Nacho Libre, ahora estamos entender realmente los detallesLanzada a finales de 2020, esta biblioteca de componentes de interfaz de usuario ha reunido más de 12 000 estrellas en GitHub.
Los componentes (menús desplegables, pestañas, ventanas emergentes, etc.) son "headless". Esto no significa que tapa quitada; lo que significa que no están estilizados, por lo que puedes marcarlos como quieras. También están completamente disponibles, diseñados para integrarse con Tailwind CSS y compatibles con React y Vue. Así es, esta palabra toca casi todas las palabras de moda a partir de 2022.
14 turbina
Este es otro producto que funcionó bien en 2021 después de su lanzamiento a fines de 2020. Se anuncia como "la velocidad de una aplicación web de una página sin escribir JavaScript".
En resumen, Turbo es una biblioteca que le permite aprovechar cuatro características principales: Turbo Drive, Turbo Frames, Turbo Streams y Turbo Native. Usan componentes web para agregar rendimiento e interactividad similar a una aplicación de una página a sus páginas sin redescubrir la rueda con pesados scripts personalizados.
13 aseado.js
Esta es una biblioteca de funciones de JavaScript relacionadas con datos diseñada para "borrar" sus datos.
Incluye más de 70 funciones en diferentes categorías (organizar, agrupar, matemáticas, ordenar, etc.) que puedes usar este patio de recreo.
12 kit de cola
Este es el primer kit de interfaz de usuario de Tailwind en la lista de las mejores herramientas de front-end y es genial. Tiene más de 250 componentes de código abierto compatibles con React, Vue y Angular.
Hay componentes categorizados en Elementos, Formularios, Comercio, Navegación, Secciones y Listas, o puede usar muchas plantillas categorizadas en Tableros, Páginas de destino y Páginas de error.
11 Componentes a sotavento
Aquí hay otro kit de interfaz de usuario de Tailwind, nuevamente con componentes y plantillas de código abierto en 13 categorías más refinadas y una categoría "excelente" con componentes gratuitos pero premium.
El sitio es más o menos un directorio con varios componentes de Tailwind importados de la comunidad, en lugar de un conjunto coherente de elementos de interfaz de usuario como otras herramientas.
10 Picardía
El selector de fechas de JavaScript piratea las 10 mejores herramientas para 2021: ¿quién lo hubiera pensado? Parece marcar todas las casillas que necesita el componente datepicker: sin dependencias, ligero y estilizado con CSS modular.
Al igual que algunas de las otras herramientas de front-end de esta lista, esta no es una herramienta nueva. Ha existido por un tiempo, pero lo compartí por primera vez en 2021 y está increíble en el top 10 este año.
9. plantilla html
Este es un pequeño generador de HTML en línea útil que le permite personalizar el tipo de plantilla de inicio de HTML para generar y proporciona opciones de cambio para qué incluir. Esto es probablemente más útil para generar plantillas o demostraciones de página de destino rápidas.
Honestamente, creo que sería bueno actualizar la herramienta para usar algunas opciones más modernas, pero para un punto de partida HTML simple, eso podría funcionar.
8. turno
Aquí hay otra biblioteca para animación CSS, esta vez una colección de animaciones dedicadas a la carga de spinner. Incluye más de 100 cargadores de animación, algunos de los cuales son muy buenos y únicos.
Me gusta cómo las animaciones en la lista (que puede probar directamente en la página) se clasifican en pseudoelementos, elementos únicos y elementos múltiples. La mejor animación hasta ahora es la animación "pong", ¡pero dudo que alguien clasifique correctamente esto como "cargando contenido"!
7. Río
Imagina si CodePen y JSFiddle tienen un bebé, luego córtalo en 224 piezas. Esto es exactamente Riju, una plataforma en línea rápida para casi cualquier lenguaje de programación.
No puedo imaginar la falta de lenguaje de codificación con el que quieres jugar aquí, y la mayor parte es algo que normalmente no asociarías con trabajar en un navegador.
6. interfaz de desarrollador
Este es un conjunto de herramientas de Angular para aplicaciones empresariales, que incluye componentes, íconos, plantillas de tablero y un sistema de diseño de estilo y marca.
Supongo que este es el top 10 para herramientas front-end, ya que al principio no mencioné específicamente que es para aplicaciones Angular (y no estaba claro al principio página). Sin embargo, especifiqué que es para proyectos a nivel empresarial, lo que parece llamar mucho la atención.
5. polen floral
Esta biblioteca es la base de su propio sistema de diseño y su utilidad es obvia en el uso de propiedades CSS personalizadas.
Le brinda símbolos de diseño de bajo nivel que se pueden personalizar y expandir fácilmente. Los módulos incluyen tipografía, diseño, interfaz de usuario, cuadrícula y color. Supongo que eso agregará más, por lo que es algo que debe vigilar el próximo año.
4. durante la noche
A los desarrolladores les encanta VS Code, el modo oscuro y los complementos. Combine estas tres cosas y tendrá una pequeña gran herramienta frontal.
AlterNight es un hermoso tema de VS Code con alrededor de 3000 instalaciones hasta el momento, pero logró ubicarse entre los 5 primeros en la lista de este año.
3. Interfaz de usuario
Esta es una colección de plantillas de front-end, pero con un giro que creo que muchos parecen apreciar: están en tonos grises.
Actualmente, la colección incluye ocho plantillas con diferentes diseños. Sin marca basada en colores, estas son excelentes opciones de personalización para sus propias necesidades, no como cualquier otra página de destino.
2. super interfaz de usuario
Aquí hay otra biblioteca de componentes de código abierto, esta diseñada para React y diseñada específicamente para productos Supabase (una alternativa a Firebase de código abierto).
Está listo para Tailwind y también debo señalar que todavía está en desarrollo temprano. Sin embargo, es lo suficientemente popular como para ponerlo en segundo lugar en esta lista.
1 Generador de diseño CSS
Esta es la herramienta con más clics en mi boletín durante el último año. Es un generador de CSS y JSX con todas las funciones para generar diferentes tipos de diseños utilizando la sintaxis de diseño de red CSS.
Haga clic en uno de los cinco estilos de diseño e ingresará a un editor en línea interactivo que le permite trabajar con varias funciones de red CSS, como filas, columnas, espacio entre filas, espacio entre columnas, orientación, alineación de cuadrícula y más. Hay mucho que jugar aquí y, obviamente, la herramienta incluirá algunos ejemplos de sintaxis de Flexbox más adelante.
¿Cuál es tu herramienta frontal favorita en 2021?
Con esto se completa la lista de este año de las herramientas front-end más interesantes. Espero que haya encontrado algo aquí para marcar o comenzar a usar en un nuevo proyecto. Es realmente genial que esta lista incluya tantas herramientas: hay kits de interfaz de usuario, bibliotecas de animación, sitios de fotos, herramientas de imágenes y más.
Durante el último año, ¿disfrutó descubriendo herramientas de front-end que no se mencionan en esta lista? Siéntete libre de ponerlo en los comentarios. Tú también puedes Suscríbete a mi boletín Obtenga más herramientas de front-end en 2022 y no dude en ponerse en contacto conmigo si crea algo usted mismo que desea compartir en futuras versiones.
Deja una respuesta