Nuevos recursos para diseñadores y desarrolladores web (septiembre de 2021)

Están sucediendo muchas cosas este mes en la industria de la tecnología; de Docker actualizando su negocios y planesprominente Negocios de WordPress siendo adquirido, Web3, NFT, ya que siguen llegando nuevas funciones y actualizaciones en HTML, CSS y JavaScript. Es por eso que hemos puesto algunos de ellos para mantenerlo actualizado. Primero tenemos algunas cosas geniales Bibliotecas JavaScript para crear animaciones, una herramienta CLI para ayudarlo a administrar e implementar su sitio de WordPress en DigitalOcean, también hay algunos recursos en la categoría CSS que mejorarán la forma en que escribe CSS en aplicaciones modernas y mucho más. Vamos a ver.

Nuevas funciones para diseñadores y desarrolladores web (agosto de 2021)

Nuevas funciones para diseñadores y desarrolladores web (agosto de 2021)

Cada día surgen nuevas herramientas y técnicas en el campo del desarrollo web. Y a veces… Leer más

Theatre.js

Theatre.js es una biblioteca de JavaScript para escribir animaciones. Viene con una rica interfaz de usuario llamada «Studio» que lo hace más intuitivo de usar en comparación con bibliotecas similares. También es rico en funciones; puede usarlo para animar HTML, SVG, WebGL o usarlo con una biblioteca JavaScript de gráficos 2D/3D como Three.js o Pixie.js.

Sailed

Una interfaz de línea de comandos (CLI) gratuita y de código abierto para administrar sus sitios de WordPress para DigitalOcean. La CLI le permite administrar de manera eficiente su sitio web, incluidos los servidores de aprovisionamiento. También puede implementar el sitio web, hacer una copia de seguridad del sitio web y revertirlo, e incluso administrar el certificado DNS y SSL con vamos a cifrar. Una gran herramienta útil para usuarios avanzados de WordPress y SysOps.

Metatags

Una aplicación web para generar una vista previa de su sitio web en Google y varios sitios de redes sociales como Facebook, Twitter, Pinterest y Slack. Puede usar esta herramienta para administrar el título, la descripción y la imagen de su sitio para asegurarse de que encajen y estén optimizados antes de compartirlos en estos sitios.

Houdini

“Houdini” hace que CSS sea más poderoso. Funciona de manera similar a cómo funciona el elemento personalizado en HTML; permite a los desarrolladores web definir propiedades CSS personalizadas con su propia funcionalidad personalizada. Por lo tanto, puede crear algo como –cool-text-decoration, que le brindará una decoración de texto personalizada más rica que la que proporciona el navegador.

Stitches

Una biblioteca JavaScript que le permite escribir CSS para su aplicación directamente en archivos JavaScript; también conocido como CSS-in-JS. La biblioteca ha optimizado el CSS a medida que se compila. Solo proporciona el CSS que necesita el componente de la aplicación y admite la representación del lado del servidor. Además, Stitches es independiente del marco, por lo que puede usarlo en cualquiera de sus favoritos, ya sea React.js, Vue.js o delgado.

desenchufar.js

Unplugin es una biblioteca de JavaScript que tiene como objetivo proporcionar un sistema unificado para la creación de complementos. para herramientas de construcción me gusta paquete web, Rodary Vite. Si usted es un desarrollador que desea admitir varias de estas herramientas de compilación, esta es la biblioteca que quizás desee consultar, ya que puede ahorrarle tiempo y acelerar el desarrollo.

Rastreador de renderizado de React

La representación de un componente React.js a veces puede ser bastante costosa para que el navegador la procese y puede afectar el rendimiento de la aplicación. Puede usar esta herramienta para inspeccionar cuántas veces se representa el componente en el navegador. Debe asegurarse de que el componente no se renderice en exceso. Una herramienta útil para depurar y optimizar su aplicación React.js.

Gran texto «Alt»

El texto alternativo es información importante sobre la imagen. Proporciona la información de imagen adicional que beneficiaría no solo al motor de búsqueda sino también al dispositivo de asistencia. Esto permite que su imagen funcione mejor en el motor de búsqueda y hace que su sitio sea más accesible para los usuarios. Pero, ¿cómo se crea un gran texto alternativo? Jake Archibaled de Google Developer Advocate tiene algunos consejos para ti.

modelador

Esta pequeña herramienta puede ayudarlo a crear rápidamente un prototipo de su próxima aplicación web increíble. En lugar de crearlo desde cero, puede ahorrar tiempo utilizando esta herramienta para generar estilos de interfaz de usuario básicos con algunos parámetros definidos como la familia de fuentes, el tamaño del texto, el acento de color y su relación de aspecto. La herramienta generará inmediatamente la vista previa y el CSS base que puede copiar y pegar en la hoja de estilo de su sitio web.

Estudio BeeKeeper

Una aplicación de escritorio para conectar y administrar la base de datos. Admite múltiples tipos de bases de datos, incluidos MySQL, Postgres, SQLite y SQL Server. Con esta aplicación, puede realizar convenientemente varias operaciones de base de datos, como crear o eliminar una base de datos, ejecutar una consulta SQL y más. BeeKeeperStudio está disponible para macOS, Windows y algunas distribuciones de Linux. Es de código abierto y gratuito; y siempre será gratis.

Administrador de filamentos

Filament es una pila ALTA (Tailwind, Alpine.js, Laravel y Livewire) para crear una aplicación de plano de administración. Está preempaquetado con las funciones que necesitaría para crear una aplicación estándar que funcione, como autenticación de usuario, autorización y algunas utilidades que faciliten el desarrollo y aumenten la productividad.

movimiento.dev

Una biblioteca de animación de JavaScript centrada en el rendimiento y la simplicidad. el disfruta API de animación lo que le permite permanecer pequeño (3.1kb) mientras proporciona funciones de animación nativas como para transformar, transiciones y fotogramas clave sale de la caja. Además, también ofrece opciones y facilidades para crear una animación que se vea más viva.

cal.com

Recientemente cambió su nombre a Cal.com, Calendso es una herramienta de código abierto para hospedar y administrar su propia aplicación de calendario. Es una buena alternativa general a Google Calendar o Calendly, especialmente si necesita tener un control total sobre los datos y personalizarlos como quiera para que se adapten a sus requisitos de negocio o desarrollo.

Cesio

Una biblioteca JavaScript multinavegador para crear objetos 3D o 2D. Utiliza WebGL para gráficos acelerados por hardware. Diseñado para precisión dinámica y calidad visual, Cesium es la biblioteca perfecta para crear modelos 3D interactivos como globo, paisaje urbano, terreno y otras visualizaciones dinámicas.

Punto de partida

Esta es otra biblioteca de JavaScript genial que vale la pena mencionar. Dropzone.js convierte cualquier elemento HTML en una «zona de caída». Puede arrastrar y soltar un archivo en él. Mostrará la vista previa del archivo, manejará el proceso de carga y mostrará el progreso. Si desea mejorar la UX para cargar archivos en su sitio web, esta es la biblioteca de JavaScript que desea.

ROE

Un React Hook que mejora y simplifica la obtención de datos para una aplicación web. A diferencia de la obtención de datos tradicional, SWR cubre los requisitos comunes para una aplicación moderna con React. Además de ser rápido, liviano y reutilizable, también es compatible con SSR (Representación del lado del servidor) y SSG (Generador del lado del servidor), React Suspense y React Native. Esta biblioteca brinda cobertura para que pueda concentrarse en desarrollar la mejor experiencia de usuario para su aplicación.

UptimeKuma

Una aplicación de monitoreo de sitios web autoalojada. UptimeKuma presenta una agradable interfaz de usuario interactiva y admite varios protocolos, como HTTP (S), TCP, Ping o mediante registros DNS básicos. Puede configurarlo para enviar notificaciones a varios canales, incluidos correo electrónico, Slack, Discord, Telegram, etc. UptimeKuma es una buena alternativa a la oferta comercial como Uptime Robot; es de código abierto y puede agregar tantos sitios como desee monitorear sin el costo adicional de $.

dopefolio

Un cliché y una plantilla para crear una cartera en línea rápidamente. Está construido solo con HTML, CSS (Sass) y JavaScript. Está preconfigurado, por lo que todo lo que necesita hacer es completar la página HTML, personalizar los estilos con Sass y ejecutar el comando NPM para compilar los estilos. Es rápido, receptivo y, dado que es solo un sitio web estático, puede implementarlo fácilmente en sitios web estáticos de alojamiento como Netlify o Cloudflare Pages.

Norte

Una paleta de colores cuidadosamente seleccionada tiene como objetivo crear diseños claros y elegantes siguiendo un patrón de estilo minimalista y plano. Esta paleta se ha traducido para colorear algunas aplicaciones de desarrolladores populares como Atom, Coda, JetBrains, SublimeText, Terminal e incluso Slack. Una gran iniciativa para unir sus aplicaciones cotidianas con un esquema de color unificado.