20 Recursos para desarrolladores y diseñadores web #3

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.

Relacionado

Nuevos cambios en los Iconos de Bootstrap: Versión 1.1

Un nuevo lanzamiento menor de los Iconos de Bootstrap, ahora vienen con más de 30 nuevos iconos y algunas correcciones. Los nuevos íconos incluyen variaciones de relleno para íconos ya existentes, y además, se incluyen algunos emojis nuevos y varios íconos de nuevos formatos de archivos. ¡SEGUIR LEYENDO!

Colección de Recursos para el Framework Bootstrap CSS (+300 recursos)

Una colección de recursos relacionados con Bootstrap 4 y 5. ? Colección Recursos CSS / ? Frameworks CSS / ? Cursos Gratis de CSS / ? Libros Gratis de CSS / ? 85 Geniales Recursos CSS Gratuitos Recursos oficiales Proyectos creados y mantenidos por los creadores ¡SEGUIR LEYENDO!

Nuevas Opciones para Ayudar a los Sitios Web a Obtener una Vista Previa de su Contenido en la Búsqueda de Google

? ?? Meta etiquetas y robots, aprender paso a paso a implementar las nuevas vistas previas que muestra Google a través de su buscador, por John Mueller: analista de tendencias para webmasters Google usa vistas previas de contenido, incluidos fragmentos de texto y otros medios, para ¡SEGUIR LEYENDO!

Guías y Chuletas de Javascript, Vue, CSS, HTML, Linux y Más de Manz Dev

Las Chuletas de Manz Dev (antiguamente Emezeta) son todo un clásico en la web, se encuentran enlazadas en nuestro repositorio de libros desde hace mucho tiempo, más actualidad han recibido mejoras. Por eso, me ha parecido interesante compartirlas de forma individual para todos aquellos/aquellas que aún ¡SEGUIR LEYENDO!

5 Aplicaciones de visualización de datos que deberías conocer

La visualización de datos es uno de los temas que siempre encontré interesantes. Desempeña un papel importante en las finanzas, la infografía, el periodismo, las relaciones públicas, la ingeniería, etc. De hecho, se puede argumentar que todas las industrias podrían beneficiarse del uso de la visualización ¡SEGUIR LEYENDO!

Deja un comentario