Recursos para desarrolladores y diseñadores web
Recursos para desarrolladores y diseñadores web
  • Tiempo de lectura:9 minutos de lectura
  • Categoría de la entrada:Recursos Web / Webmaster

Están sucediendo muchas cosas últimamente en la industria de la tecnología. Desde Docker actualizando sus negocios y planes, las empresas destacadas de WordPress que se están adquiriendo, la Web3 o los NFT.

No por ello, se dejan de lanzar nuevos recursos y actualizaciones para HTML, CSS o JavaScript.

Es por eso que recopilo estas herramientas para los desarrolladores y diseñadores web.

Primero, algunas bibliotecas de JavaScript geniales para crear animaciones, una herramienta CLI para ayudarte a administrar e implementar tu sitio de WordPress en DigitalOcean y también hay un par de recursos en la categoría de CSS y más.

Theather.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 tiene muchas funciones; puede usarlo para animar HTML, SVG, WebGL o usarlo con una biblioteca JavaScript gráfica 2D / 3D como Three.js o Pixie.js.

Sailed

Una interfaz de línea de comandos (CLI) gratuita de código abierto para administrar sus sitios de WordPress en DigitalOcean. La CLI le permite administrar su sitio de manera eficiente, incluidos los servidores de aprovisionamiento.

También puede implementar el sitio, hacer una copia de seguridad del sitio y hacer una reversión, e incluso administrar el certificado DNS y SSL con Let’s Encrypt. Una gran herramienta útil para usuarios avanzados de WordPress y SysOps.

MetaTags

Una aplicación web para generar una vista previa de su sitio en Google y varios sitios de redes sociales como Facebook, Twitter, Pinterest y Slack. Puede utilizar 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 esos sitios.

Houdini

Houdini hace que CSS sea más poderoso. Funciona de forma similar a como funciona el elemento personalizado en HTML; que permite a los desarrolladores web para definir las propiedades de CSS personalizado con sus propias funcionalidades personalizadas.

Por lo tanto, puede crear algo como --cool-text-decorationlo que proporcionará una decoración de texto personalizada más rica que la que proporciona el navegador.

Stitches

Una biblioteca JavaScript que permite escribir CSS para su aplicación directamente en los archivos JavaScript ; también conocido como CSS-in-JS. La biblioteca optimizó CSS a medida que se compila.

Proporciona solo 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 framework, por lo que puede usarlo en cualquiera de sus favoritos, ya sea React.js, Vue.js o Svelte.

Unplugin.js

Unplugin es una biblioteca de JavaScript que tiene como objetivo proporcionar un sistema unificado para crear complementos para herramientas de compilación como Webpack, Rollup y Vite.

Si es un desarrollador que busca admitir varias de estas herramientas de compilación, esta es la biblioteca que quizás desee examinar y que puede ahorrarle tiempo y acelerar el desarrollo.

React Render Tracker

A veces, renderizar un componente React.js puede resultar bastante caro de procesar para el navegador y podría afectar el rendimiento de la aplicación. Puede utilizar esta herramienta para inspeccionar cuántas veces se representa el componente en el navegador.

Querrá asegurarse de que el componente no se vuelva a renderizar en exceso. Una herramienta útil para depurar y optimizar su aplicación React.js.

Alt alternativo

El texto alternativo es un dato importante en la imagen. Proporciona la información adicional de la imagen 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 web sea más accesible para los usuarios.

Pero, ¿cómo se hace un gran texto “alternativo”? Jake Archibaled de Google Developer Advocate tiene algunos consejos para ti.

Shaper

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 base de interfaz de usuario con algunos parámetros definidos como Familia de fuentes, Tamaño de texto, Acento de color y su proporción.

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.

BeeKeeperStudio

Una aplicación de escritorio para conectar y administrar la base de datos. Es compatible con varios tipos de bases de datos, incluidos MySQL, Postgres, SQLite y SQL Server. Con esta aplicación, puede realizar varias operaciones de base de datos de manera conveniente, 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.

Filament Admin

Filament es una pila TALL (Tailwind, Alpine.js, Laravel y Livewire) para crear una aplicación de plano de administración. Está preempaquetado con características que necesitaría para crear una aplicación estándar que funcione, como autenticaciones de usuario, autorización y algunas utilidades que facilitan el desarrollo y aumentan la productividad.

Motion.dev

Una biblioteca de animación JavaScript con un enfoque en el rendimiento y la simplicidad. Aprovecha la API de animación que le permite mantenerse pequeño (3,1 kb) al tiempo que proporciona funciones de animación nativas como transformación, transiciones y fotogramas clave listos para usar.

Además de eso, también proporciona opciones y facilidad para crear una animación que se siente más viva.

Cal.com

Recientemente cambiado su nombre a Cal.com, Calendso es una herramienta de código abierto para alojar y administrar su propia aplicación de calendario.

Es una buena alternativa en general a Google Calendar o Calendly, especialmente si necesita tener un control total sobre los datos y personalizarlos como desee para adaptarse a su negocio o requisito de desarrollo.

Cesium

Una biblioteca de JavaScript para varios navegadores para crear objetos 3D o 2D. Utiliza WebGL para gráficos acelerados por hardware. Diseñado para una 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.

Dropzone

Esta es otra biblioteca de JavaScript genial que vale la pena mencionar. Dropzone.js convierte cualquier elemento HTML en, bueno, 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 procesará el progreso. Si está buscando mejorar la UX para cargar archivos en su sitio , esta es la biblioteca de JavaScript que desea.

SWR

Un React Hook que mejora y simplifica la búsqueda de datos para una aplicación web. A diferencia de la búsqueda de datos tradicional, SWR cubre los requisitos comunes para una aplicación moderna con React.

No solo es rápido, liviano y reutilizable, sino que también es compatible con SSR (renderización del lado del servidor) y SSG (generador del lado del servidor), React Suspense y React Native.

Esta biblioteca lo tiene cubierto para que pueda concentrarse en desarrollar la mejor experiencia de usuario para su aplicación.

UptimeKuma

Una aplicación autohospedada para la supervisión del sitio. UptimeKuma presenta una interfaz de usuario interactiva agradable y admite una serie de protocolos, como HTTP (S) básico, TCP, Ping o mediante registros DNS.

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 como el sitio que desea monitorear sin el costo adicional de $.

Dopefolio

Un modelo 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 estático, puede implementarlo fácilmente en el alojamiento de sitios estáticos como Netlify o Cloudflare Pages.

Nord

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 desarrollo populares como Atom, Coda, JetBrains, SublimeText, Terminal e incluso Slack.

Una gran iniciativa para unir sus aplicaciones diarias con un esquema de color unificado.