Recursos nuevos para diseñadores y desarrolladores web (septiembre de 2022)

En esta ronda de la serie, presentaremos una lista de nuevas bibliotecas, marcos y herramientas que estoy bastante seguro de que los desarrolladores y diseñadores front-end apreciarán. Tenemos una nueva herramienta CSS avanzada, una herramienta útil y una biblioteca para animación, y algunos recursos nuevos para íconos. Saltemos para encontrar la lista completa.

Recursos nuevos para diseñadores y desarrolladores web (agosto de 2022)

Recursos nuevos para diseñadores y desarrolladores web (agosto de 2022)

En esta ronda de la serie, presentaremos una lista de nuevas bibliotecas, marcos y herramientas que estoy bastante seguro de que los desarrolladores y diseñadores front-end usarán. Leer más

Webc

WebC es un Biblioteca de JavaScript que hace que el desarrollo de un componente web sea más manejable. No solo puede definir un componente web, sino que también puede expandirlo en un marcado HTML básico con convenciones estándar web y generar el CSS del HTML.

Es compatible con SSR (representación del lado del servidor), por lo que puede usarlo con algunos Marcos SSR como Next.js y Gatsby.

Webc

RayoCSS

Lightning CSS es más que un simple minificador de CSS. También le permite escribir la próxima generación de CSS estándar ahora, como anidamiento, consultas de medios personalizadas, propiedades lógicas y algunos selectores nuevos.

Convertirá automáticamente estas funciones en una sintaxis compatible según las configuraciones de destino de su navegador. Con todo, es como Babel pero para CSS.

RayoCSS

Por quéFrame

Una herramienta que te permite desarrollarse de forma aislada. Puede diseñar cada componente que viva por sí solo, lo que facilita la optimización y el encapsulado de problemas sin afectar a otros componentes. Es rápido, flexible y compatible con muchos marcos front-end incluidos Svelte, Vue.js, React.js, Solid.js y React.js.

Por quéFrame

JSONCrack

JSON hace que los datos sean portátiles entre diferentes lenguajes de programación. Leer JSON también es fácil, a menos que haya demasiados allí. Aquí es donde entra JSONCrack.

JSONCrack es un editor en línea que le permite representar la estructura de datos en un gráfico, lo que a su vez hará que sea más fácil escanear y captar los datos. Además de eso, también puede ajustar el diseño del gráfico, compartirlo e incluso insértelo en su sitio web.

JSONCrack

Maestro

Maestro es un software que le permite probar su aplicación móvil. Significa que puede realizar aserciones de prueba e interacciones como presionar en el botón Atrás, desplazarse, deslizar e incluso tomar capturas de pantalla. Una herramienta imprescindible instalada para todos los desarrolladores móviles.

Maestro

Motionidad

un libre y aplicación web de código abierto para componer y editar gráficos en movimiento para desarrolladores. Es como Adobe After Effects con la facilidad de uso de Canva. Tiene funciones como fotogramas clave, máscaras, filtros y muchas más. Puede descargue la animación como WebM, GIF o simplemente una imagen.

Motionidad

Escala de tipo de fluido

Tradicionalmente, usamos un tamaño de fuente estático para el sitio web. Pero como el medio del sitio web para ver el sitio web, necesitamos la capacidad de usar el tamaño de fuente de manera más dinámica para que el contenido se vea bien. Esto ahora es posible solo con CSS y, como su nombre lo indica, esta herramienta facilitará la generación de códigos CSS.

Escala de tipo de fluido

Campo de entrenamiento

un nuevo fuente oficial para aprender Laravel. Esta nueva guía está diseñada para que pueda comenzar más rápido con la creación de una aplicación que funcione con la práctica moderna en Laravel. Puede elige tu camino entre usar Vue.js o React.js. En general, creo que esta es una gran fuente para Laravel principiante o experimentado.

Campo de entrenamiento

StarbeamJS

Una biblioteca de JavaScript para agregar «reactividad» a su aplicación. Esta reactividad hace que su aplicaciones más dinámicas y se siente más fluida. Es una biblioteca agnóstica que funciona con cualquier marco de front-end como React.js, Vue.js y Svelte.

StarbeamJS

Corsé

Corset es una biblioteca JavaScript para agregue reactividad a su aplicación sin la complejidad. Funciona de manera similar a jQuery de manera que se enlaza directamente con HTML y proporciona una sintaxis expresiva similar a CSS. Dado que funciona solo con HTML, es fácil de elegir, rápido y puede integrarse fácilmente con su aplicación existente.

Corsé

Conjunto de historias

Una coleccion de ilustraciones gratuitas que puedes usar en tu sitio web. Proporciona ilustraciones sobre varios temas. Cada ilustración es configurable. Puede personalizar el fondo y el color, ocultar algunas de las propiedades y descargarlo como SVG o PNG.

Conjunto de historias

Iconomonstruo

Iconmonstr es un colección de más de 4000 iconos. Otra buena fuente para diseñadores web. Cada icono tiene un diseño único. También viene en varias variaciones y está disponible en SVG y PNG. Independientemente de la necesidad de la aplicación, estoy bastante seguro de que encontrará los íconos correctos.

Iconomonstruo

FuenteCompartir

Una práctica herramienta en línea para generar hermosos pares de fuentes. Es gratis para uso personal y comercial. Podemos seleccionar el tipo de fuente como sans-serif, manuscrita o script. Incluso lo hace más fácil donde puede generar el par de fuentes por la fuente «sensación» o «personalidad».

FuenteCompartir

Tostada Sólida

Una biblioteca React.js que te permite agrega hermosas notificaciones de brindis. Es liviano, solo 4kb. Puede personalizar el contenido, los iconos, los colores y los atributos. Es compatible con SSR y proporciona Promise API.

Tostada Sólida

API simulada

Una herramienta gratuita en línea que proporciona API para recuperar datos simulados para probar su aplicación. Puede encontrar varios tipos de datos, como animales, países, monedas, etc.

API simulada

Revelación impresionante de React

Una biblioteca para React.js que proporciona una conjunto de efectos animados, como Bounce, Fade, Flip, Roll, Rotate y Slide animation. Lo usa para agregar animaciones reveladoras a sus componentes cuando ingresan a la ventana del navegador a medida que los usuarios se desplazan por la página.

Revelación impresionante de React

AbrirMoji

Una biblioteca gratuita y de código abierto de Emojis. Contiene más de 4000 emojis. Es compatible con los estándares estándar de Emoji, así como con los personalizados. También es totalmente compatible con la escala de tonos de piel de Fitzpatrick y múltiples combinaciones de tonos de piel.

Una biblioteca perfecta si quieres proporcionar selección de emoji en su sitio web o su aplicación..

AbrirMoji

Desarrollo web simplificado

A blog que destaca algunas actualizaciones sobre el desarrollo web. Cubre varios temas, incluidos CSS, JavaScript, HTML, React.js, Node.js y más. Esta es una buena fuente para mantenerse al día con el desarrollo web sin sentirse abrumado.

Desarrollo web simplificado

Sistema de diseño para Figma

Una colección de Design System hecha en Figma a partir de varios nombres y marcos populares en Internet. Puede encontrar el sistema de diseño de Uber, Atlassian e incluso de Goldman Sachs. Esta es una joya escondida que todos los diseñadores deberían agregar en el marcador.

Sistema de diseño para Figma

Patrón TS

La coincidencia de patrones es una técnica de programación que le permite componer condiciones complejas o estructuras de datos en una expresión más corta y legible. Esta técnica está implementada en Haskell, Rust, Swift, Elixir y otros lenguajes. Con esta biblioteca, puede aplicar la misma técnica en TypeScript.

Patrón TS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio