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-decoration lo 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

ForEach de Javascript: Array para bucles

Como una de las estructuras de control básicas en la programación, los bucles son casi una adición diaria al código que escribimos. El bucle forEach clásico es uno de los primeros fragmentos de código que aprendemos a escribir como programadores. Si fueras un desarrollador de Javascript, sabrías que Javascript no es ajeno a la iteración a través de los elementos de una matriz o un mapa ¡SEGUIR LEYENDO!

10 Mejores alternativas de Sci-hub para descargar artículos de investigación gratis

Como sabemos, Sci-hub es un sitio web increíble con millones de artículos de investigación para todos los estudiantes universitarios y académicos. El sitio web de Sci-Hub se encarga de obtener los artículos de investigación y artículos de pago utilizando las credenciales que se filtran. La fuente de credenciales utilizada por este sitio web no está clara. Sin embargo, se supone que muchas de ellas son donadas, ¡SEGUIR LEYENDO!

10 Características Sorprendentes de Windows que Deberías Conocer en 2024

Aunque haya sido usuario de Windows durante décadas, el sistema operativo es tan amplio y complejo que siempre existen características útiles, pero menos conocidas, que podrían sorprenderte. En este sentido, he identificado diez funciones poco conocidas de Windows que pueden potenciar su eficiencia, comodidad e incluso su experiencia de uso lúdico en su PC.

¡REBAJADO!
Microsoft Surface Go 2 - Portátil 2 en 1 de 10.5 pulgadas Full HD, Wifi, Intel...
  • Procesador Dual-Core Intel Pentium Gold 4425Y (2...
  • Memoria RAM de 8 GB LPDDR3
  • Disco SSD de 128 GB
Todas estas características deberían ser compatibles tanto con Windows 10 ¡SEGUIR LEYENDO!

10 Criptomonedas con Potencial de Crecimiento de Futuro

El rumor en torno a las criptomonedas no se desvanece por mucho que existan grandes pesimistas alrededor de los malos rumores. Entonces, si consideras invertir en el mundo de las criptomonedas, deberías estar atento a las criptomonedas que se espera que tengan un buen desempeño para el resto de 2021. En los últimos tiempos, los tokens DeFi están recibiendo toda la atención y es más que ¡SEGUIR LEYENDO!

10 Empresas de robótica más importantes del mundo

Los cambios de paradigma revolucionarios debido a los desarrollos de la robótica en todo el mundo están generando nuevos puntos de vista en muchos sectores, entre ellos en los de la industria y la tecnología. Con la ayuda de la Inteligencia Artificial, la tecnología produce resultados innovadores cada segundo y el campo de la robótica define y reconfigura su uso a cada instante. Cada día que ¡SEGUIR LEYENDO!

10 Frameworks que los Desarrolladores de Software deberían Aprender 2024

Bienvenidos desarrolladores web y de software, estamos en los inicios de 2023 y es posible que muchos se esten planteado sus objetivos para lo largo del año. Con anterioridad ya he compartidos las rutas de aprendizaje para un desarrollador front-end, un desarrollador full-stack o un desarrollador back-end entre otros muchos contenidos más. En este artículo, me gustaría compartir algunos de los mejores frameworks y bibliotecas para ¡SEGUIR LEYENDO!

10 Repositorio de GitHub que todo Desarrollador Web debería conocer

GitHub es el lugar que debes buscar cuando intentas mejorar como desarrollador, toda la información que necesitas está disponible en algún repositorio que alguien ya se ha molestado en indexar. Sin embargo, la parte complicado es encontrar el repositorio más adecuado. Es fácil sentirse perdido en todos los repositorios disponibles dentro de GitHub. Para ayudarte, he elaborado una lista de 10 repositorios de GitHub que pueden ¡SEGUIR LEYENDO!

Deja un comentario