Cómo hacer un Sitio Web o Blog en 2022 - Guía fácil y Gratuita para Crear un Sitio Web

Nuevos recursos para diseñadores y desarrolladores web (julio de 2023)

Como desarrollador web, siempre hay algo que puedes aprender todos los días y crecer. Puede aprender principios de diseño, experiencia de usuario, diseño de interfaz de usuario y comportamientos de usuario a través de datos analíticos. O bien, puede ramificarse en servidores, como instalar y ejecutar un paquete de servidor usted mismo.

En esta ronda de la serie, hemos reunido diferentes recursos, desde herramientas, podcasts, artículos y mucho más, donde puedes aprender múltiples disciplinas más allá de simplemente crear el sitio web en sí. ¡Empecemos!

Generador de vidrio UI

La interfaz de usuario Glassy está regresando. Podemos ver que ahora es una parte integral del nuevo diseño de interfaz en Windows y macOS. Gracias a la última función CSS, también podemos adoptar una interfaz similar para el sitio web, y esta herramienta hará que crear una sea aún más fácil y rápido.

Puede use la GUI para ajustar el color, la opacidad y el fondo de su sitio web y generará el CSS que puedes copiar y pegar.

Tema VS Code Fortnite

A Tema inspirado en Fortnite para Visual Studio Code. Viene con algunos efectos especiales al permitir que Fortnite: habilitar legendario opción. Si disfrutas el juego y las bengalas mientras codificas, este tema de VSCode es para ti.

Estaciones Maker

Este sitio recopila configuraciones de escritorio de varios profesionales (diseñadores, desarrolladores, escritores, etc.). No sólo los presenta como inspiración, sino que también profundiza en las personalidades del propietario y razones detrás de la configuración.

Si actualmente estás buscando inspiración para la configuración de tu nuevo escritorio, no busques más. Seguramente encontrarás algunos buenos en Estaciones Maker.

Reaccionar.js ARIA

Una colección de funciones de React.js que ayudan en Creación de componentes de interfaz de usuario y sistemas de diseño accesibles. para su aplicación web.

Está diseñado para ofrecer la mejor experiencia interactiva posible a los usuarios, ya sea que utilicen un teclado, un mouse o un dispositivo de asistencia. Es una gran iniciativa de Adobe para una mejor web.

Biblioteca de pruebas de ganchos de reacción

Hooks es un concepto en React.js para crear componentes menos rígidos y podemos cree ganchos personalizados además de los que se proporcionan integrados.

Ahora bien, si se ha encontrado con una situación en la que le gustaría realizar una prueba automatizada para el gancho personalizado, esta biblioteca te resultará útil. Proporciona el patrón para probar su gancho React.js personalizado tan cerca como cuando se usa dentro de un componente real.

Tarjeta Wi-Fi

Esta herramienta hace compartir credenciales WiFi es más conveniente usando el código QR. Simplemente necesitas ingresar el nombre de WiFi y la contraseña. Imprime y adjuntalo en algún lugar de la habitación.

Umamí

Umami es una aplicación de código abierto para recopilar datos analíticos. Es fácil de instalar en tu propio servidor o VPS con requisitos mínimos. Solo Necesito Node.js y MySQL (o PostgreSQL). Es una gran aplicación si estás buscando una alternativa a Google Analytics donde usted posee y controla todos los datos.

El podcast de CSS

Dirigido por el dúo de Google Developer Advocates, Una Kravets y Adam Argyle, aprenderá mucho sobre CSS; de consejos prácticos, accesibilidad, rendimiento y mucho más. Es una de las fuentes de mejor calidad para aprender CSS y desarrollo web en general.

Fosscard

Discordia está surgiendo como un herramienta de comunicación interactiva para comunidades. Puedes unirte a varios grupos, incluidos grupos para desarrollo y programación webpara chatear con la comunidad o realizar una llamada de voz o videollamada.

Sin embargo, Discord es un SaaS. Si buscas un alojamiento propio donde puedas tener más control, Fosscard puede ser una buena alternativa.

Código limpio PHP

Una coleccion de Consejos para escribir códigos PHP que sean legibles, reutilizables y, lo más importante, mantenibles.. Es un gran recurso donde puedes aprender algunos consejos prácticos; como por ejemplo cómo nombrar mejor las variables, cómo estructurar el bloque condicional y cómo nombrar una función y los argumentos, por nombrar algunos.

MiniCLI

Una pequeña Biblioteca PHP para construir una interfaz de línea de comandos (CLI). Proporciona la estructura base para registrar sus líneas de comando personalizadas, así como las funciones auxiliares y de utilidad para manejar la entrada y salida del usuario. Un excelente comienzo para crear una línea de comando basada en PHP.

uniformeCSS

A generador y marco CSS de utilidad creado con Sass. Es una combinación de lo bueno de ambos mundos en la que puede aprovechar la flexibilidad del flujo de trabajo que prioriza las utilidades y al mismo tiempo tener el poder de Sass, como las variables, los mixins y las funciones.

Generador de diseño

Un herramienta en línea para generar un diseño base para su sitio web. Utiliza Grid para el diseño y proporciona GUI para generar el diseño. Por ejemplo, puedes establecer el número de columnas, filas y alineaciones. Creo que es una forma más intuitiva de generar un diseño con CSS Grid.

flor

La metodología CSS que prioriza las utilidades se está volviendo bastante popular. Ofrece flexibilidad para ser escalable en sitios web pequeños o grandes. Si te gusta escribir CSS en JS para su aplicación web y apóyese en un Enfoque CSS que prioriza la utilidad para componer los estilos, quizás te interese probar esta biblioteca.

La flor es independiente del marco por lo que puedes aplicarlo en varios frameworks como React.js, Vue.js y Svelt, o JavaScript simple.

RTL WTF

Una excelente fuente para aprender consejos, casos de uso y mejores prácticas para crear un sitio web para la dirección de escritura de derecha a izquierda, como árabe y hebreo. Este sitio web debería estar en sus favoritos.

notitack

Una biblioteca React.js que facilita la visualización de notificaciones “brindis” en su aplicación web. Es altamente configurable y le permite presentar la mejor experiencia de usuario posible.

Por nombrar algunos, puedes establecer el número máximo de notificacionesevite duplicados al no mostrar notificaciones con el mismo mensaje y establezca el tipo de transición.

Kopio

Un Aplicación de servidor de código abierto que puede utilizar para ejecutar y administrar copias de seguridad en sus propios servidores en la nube.. Kopia también proporciona una buena aplicación de escritorio que se ejecuta en Windows, macOS y Linux, donde puede administrarla cómodamente, como crear una instantánea y restaurarla.

Herramientas de desarrollo de componentes web

El componente web le permite crear un componente personalizado que el navegador pueda comprender y representar. Si necesita crear un componente web personalizado, necesitará esta extensión de Chrome que le permite depurar el componente web en el navegador.

Tipografía fluida

Una pequeña y práctica herramienta para crear un tamaño de texto que se ajuste al tamaño de la ventana. La herramienta le ayuda a generar el estilo que permite que el texto de su sitio web luzca excelente y proporcional en cualquier pantalla.

millonesjs

Una pequeña biblioteca de JavaScript (menos de 1 KB) para crear un interfaz de usuario interactiva para su sitio web. Implementa Virtual DOM detrás de escena y algunos enfoques únicos que agilizan su renderizado en el navegador.

Creo que puede ser un buena alternativa a algunos marcos más establecidos como React.js y Vue.jsespecialmente si solo necesita el DOM virtual.