Nuevos recursos para diseñadores y desarrolladores web (abril de 2022)

El desarrollo de sitios web no siempre se trata de codificación. También necesita un buen sentido del diseño para que el sitio sea utilizable, accesible, y realmente se ve bien para los usuarios. Entonces, en esta ronda de la serie, vamos a explorar algunas de estas características más en la categoría de diseño. Encontrarás herramientas para componer animaciones en el navegador, maquetas de alta calidad, biblioteca de iconos animados, algunos bibliotecas CSS, es mucho más. Sin más preámbulos, entremos para ver la lista completa.

Nuevas funciones para diseñadores y desarrolladores web (marzo de 2022)

Nuevas funciones para diseñadores y desarrolladores web (marzo de 2022)

PHP, a pesar de ser llamado el lenguaje «muerto», continúa mejorando a lo largo de los años. Con la última versión de… Leer más

Léxico

Una iniciativa de código abierto de Facebook, Lexical es una biblioteca de JavaScript para crear un editor de texto enriquecido centrado en el rendimiento, la accesibilidad y la extensibilidad. Esto permite a los desarrolladores agregar nuevas funcionalidades a sus necesidades. En el momento de escribir este artículo, Lexical se encuentra en desarrollo activo y proporciona enlace React.js.

Cohete

Un modelo de pila completa para crear un sitio web estático moderno con JavaScript. Viene con las herramientas esenciales para crear un sitio web que funcione, como división automática de código, enrutamiento y componentes con todo preconfigurado para que pueda concentrarse en ser productivo.

ls gráficos

Una colección de maquetas de alta calidad de una amplia gama de presentaciones de productos. Esto incluye tazas de cerámica, postales, mac studio, macbook pro, iPhone, varios paquetes y más. Todas estas maquetas son gratuitas y se pueden utilizar en proyectos personales o comerciales. También están disponibles en Photoshop, Sketch, XD y Figma.

Deformación

Una aplicación de terminal creada desde cero con Óxido. Es rápido y está repleto de características que no encontraría en una Terminal tradicional, como la capacidad de usar múltiples cursores y autocompletar y sugerencias similares a las de un editor de texto que lo hacen moderno.

componentes de IA

Una colección de herramientas web, generadores y editores para HTML, CSS y SVG. Encontrarás una herramienta para generar temas de color, degradados, gráficos SVG en 2D o 3D y mucho más. Estas herramientas pueden ser útiles para aumentar la productividad con una interfaz de usuario agradable.

Picea CSS

Un framework CSS construido con Hablar con descaro a. Proporciona Variables, Mixins, Funciones, así como los estilos básicos para elementos comunes como todos los elementos Tipográficos, Botones, Formularios y Tablas. También es responsable del color. accesibilidad así como la internacionalización al admitir estilos RTL listos para usar. Es un marco que proporciona una base sólida para su sitio web.

herramientas de movimiento

Una extensión de Chrome DevTools que le permite inspeccionar, grabar y reproducir animaciones CSS directamente en el navegador. Una herramienta útil para depurar animaciones CSS y que puede ayudarte a crear animaciones más atractivas.

Caparazón

El caparazón fue diseñado como una alternativa libro de cuentos con un enfoque en el rendimiento y la facilidad de uso. Es una herramienta para desarrollar y probar componentes. Es rápido; carga o recarga los cambios instantáneamente, sin importar cuántos componentes se representen.

Estándares

Un libro electrónico gratuito de Addy Osmani y Lydia Hallie que cubre patrones de diseño en la creación de aplicaciones web con JavaScript. Aquí encontrará algunos consejos y trucos para diseñar mejor sus aplicaciones que darán como resultado un mejor código.

Instrumentos

Otra colección útil de herramientas para desarrolladores web. Incluye una herramienta para generar código QR, hash, diferencia de texto y algunos convertidores de datos como JSON a TypeScript, HTML a Markdown, JSON a Rust y algunos más. Es la herramienta que necesitas tener en tu marcador.

abierto por diseño

Open by Design proporciona una lista seleccionada de diseño de interfaz de usuario para aplicaciones y sitios web. Cada diseño está disponible en formato Figma y puedes usarlo para uso personal o comercial. ¿Estás sin inspiración para tu próxima aplicación o diseño web? No busque más. Debes tenerlo en tu favorito.

Abierto

unDraw proporciona una colección de ilustraciones de alta calidad. Puede personalizar el color base para que coincida con su diseño, seleccione una de las ilustraciones y descárguela en formato SVG o PNG. ¿No eres capaz de diseñar? Sin problemas. Undraw puede hacer que su sitio web se vea instantáneamente profesional y estéticamente agradable.

pantallamente

Una herramienta útil que te permite crear una maqueta de navegador rápidamente. Simplemente suelte la imagen en la página web y le mostrará algunas opciones donde puede seleccionar estilos de marco del navegador, colores de fondo, espaciado y una opción para descargarla como una imagen PNG.

usar animaciones

Una colección de iconos animados creados para lotería estructura. Incluye varios íconos, como cargar íconos en varios estilos, íconos de redes sociales, íconos de navegación y más. Estos íconos harán que tu sitio web sea más atractivo.

Mellizo

Twind es una especie de implementación de CSS-in-JS para CSS viento de cola. Proporciona las funciones de utilidad para generar el nombre de la clase Tailwind y representará los estilos. Twind es un marco agnóstico, que le permite usarlo en HTML simple y cualquier marco, incluidos React.js, Vue.js y Lit Element.

Bloques de cola

Una colección de más de 60 bloques de diseño creados con TailwindCSS. Puede encontrar algunos diseños comunes para contenido, blog, formulario, comercio electrónico, CTA y más. Si va a usar TailwindCSS, usar estos bloques es un buen comienzo para aumentar su productividad.

práctica de front-end

Proporciona una colección de proyectos en los que puede trabajar para evaluar sus habilidades de frente. Los proyectos se agrupan en 3 niveles: en el nivel 1 desarrollará un diseño simple de una página, mientras que en el nivel 3 se enfrentará al desafío de un diseño más complejo que consta de más elementos.

maquetacion de cimientos

Una biblioteca React.js que proporciona componentes de utilidad que facilitan la organización de su contenido con patrones de diseño comunes. Por ejemplo, puede usar el componente MasonryGrid para mostrar contenido en rejilla de mampostería. O bien, el marco que le permite recortar los medios en una proporción específica. Puede instalar esta biblioteca a través de NPM y analizar algunos ejemplos de casos reales proporcionados en el sitio web para que pueda comenzar a correr de inmediato.

adonis js

Un marco JavaScript de pila completa para crear un sitio web moderno. AdonisJS destaca algunas características que normalmente puede encontrar en un estructura MVC tal como el enrutamiento, Controlador, Middleware, Validación y Model Engine. Si ha usado Laravel o Ruby on Rail, inmediatamente se sentirá como en casa.

dechado

Sampler es una utilidad de Shell o Terminal que puede ver procesos o actividades que suceden en su computadora (muy parecido a lo que vemos en una película de ciencia ficción), como el tráfico de red, el uso de RAM y CPU, y las estadísticas del contenedor Docker, por nombrar algunos. . Si desea impresionar a su familia o amigos, esto es lo que necesita instalar en su computadora.