¡El programa que TODO DESARROLLADOR debería tener INSTALADO! 🔨 5 utilidades en 1 para el día a día
Summary
TLDREste video presenta cinco útiles herramientas para desarrolladores web y diseñadores. Incluye un repositorio de icons SVG, un directorio de APIs públicas, un sitio para verificar compatibilidad de propiedades web, una librería de componentes de React para alertas y notificaciones, y una colección de loaders CSS personalizables. Estas herramientas pueden mejorar la eficiencia y la experiencia en el desarrollo web, además de ofrecer un aprendizaje progresivo para quienes comienzan en este campo.
Takeaways
- 🎨 Para encontrar iconos y ilustraciones gratuitas, visita SVG Repo, que ofrece más de 500.000 imágenes vectores y iconos.
- 🔍 Si necesitas un API para tu aplicación web, Public APIs es una plataforma que reúne una amplia variedad de APIs para diferentes temas como anime, películas, calendario, etc.
- 💻 Can I Use es una herramienta esencial para verificar la compatibilidad de propiedades CSS, HTML y JavaScript con diferentes navegadores.
- 📚 Aprende desarrollo web desde cero y sigue una ruta de aprendizaje progresiva a través de los cursos disponibles en la descripción del video.
- 🚀 Utiliza la librería de componentes de React llamada 'soner' para crear alertas y modales con diseño atractivo y fácil de personalizar.
- 🌐 CSS Loaders ofrece una gran variedad de loaders de efecto de carga hechos con CSS, lo que permite una mejor optimización de la carga de tu sitio web.
- 🎥 Los cursos de desarrollo web son una excelente opción para aquellos que desean aprender y perfeccionar sus habilidades en este campo.
- 📧 Suscríbete a la lista de correos electrónicos gratuita para recibir consejos, anécdotas y trucos de desarrollo web diariamente.
- 💡 No te pierdas las oportunidades de aprender y mejorar tus habilidades con los recursos y cursos disponibles.
- 🌟 Mantén tus conocimientos actualizados con las últimas tendencias y tecnologías en desarrollo web para mantener tu perfil profesional competitivo.
Q & A
¿Cuál es la primera herramienta que se presenta en el vídeo para desarrolladores web?
-La primera herramienta presentada es svgrepo.com, un sitio web donde se pueden encontrar más de 500.000 imágenes SVG vectores o iconos gratuitas para incrustar en proyectos web.
¿Cómo se puede utilizar la primera herramienta presentada en el vídeo?
-Se puede utilizar para buscar y descargar iconos o ilustraciones para proyectos web, como logos de redes sociales, íconos de carritos de compras o corazones para likes en aplicaciones web.
¿Qué es la segunda herramienta que se menciona en el vídeo y cuál es su propósito?
-La segunda herramienta es publicapis.com, un sitio que ofrece una amplia variedad de APIs para diferentes propósitos, como obtener información de series de anime, datos de películas, días festivos, etc.
¿Cómo se puede aprovechar publicapis.com para el desarrollo de aplicaciones?
-Se puede utilizar para encontrar y consumir APIs específicas que proporcionen la información necesaria para el desarrollo de aplicaciones relacionadas con series de anime, películas, calendarios, entre otros.
¿Qué es can i use y cómo ayuda en el desarrollo web?
-Can i use es una herramienta que permite verificar la compatibilidad de propiedades CSS, HTML y JavaScript con diferentes navegadores, ayudando a los desarrolladores a asegurarse de que su código funcione en todos los navegadores donde es posible.
¿Cómo se puede utilizar can i use para verificar la compatibilidad de un elemento HTML o propiedad CSS?
-Bastante sencillo, solo se debe buscar el elemento o propiedad específica y la herramienta mostrará la compatibilidad con diferentes navegadores y versiones, permitiendo al desarrollador tomar decisiones sobre su implementación.
¿Qué es la librería de componentes de React que se presenta en el vídeo?
-La librería de componentes de React que se presenta es called 'soner', sirve para crear alertas y notificaciones en la aplicación.
¿Qué ventajas tiene usar componentes de alertas como 'soner' en un proyecto de React?
-Los componentes como 'soner' facilitan la creación de alertas y notificaciones, proporcionan un código fácil de usar y personalizar, y mejoran la experiencia del usuario al tener notificaciones atractivas y bien diseñadas.
¿Cuál es la utilidad que se presenta para encontrar loaders hechos con CSS?
-La utilidad presentada para encontrar loaders hechos con CSS es cssloaders.com, que ofrece una variedad de loaders de efecto de carga creados con CSS para usar en aplicaciones web.
¿Por qué es beneficioso usar loaders hechos con CSS en lugar de imágenes o GIFs?
-Los loaders hechos con CSS son más beneficiosos porque no son imágenes estáticas, no aumentan el tamaño del archivo de la página y mejoran el rendimiento general de la web, ya que no requieren descargas adicionales de recursos de imagen.
¿Cómo se pueden personalizar los loaders encontrados en cssloaders.com?
-Los loaders encontrados en cssloaders.com se pueden personalizar editando el código CSS y HTML para cambiar aspectos como los colores, la velocidad de animación y el tipo de efecto de carga de acuerdo a las necesidades del proyecto.
¿Qué recursos adicionales se mencionan en el vídeo para aprender desarrollo web?
-Se mencionan cursos de desarrollo web en la descripción del vídeo, así como una lista de correos electrónicos gratuita donde se comparten consejos, anécdotas y trucos de desarrollo web.
Outlines
🛠️ Herramientas para desarrolladores web
En este primer párrafo, se presenta una selección de cinco herramientas útiles para desarrolladores web. Destacan una extensa colección de iconos y ilustraciones gratuitas en svgrepo.com, que abarca más de 500.000 imágenes vectores. También se menciona la importancia de suscribirse a la lista de correos electrónicos del creador para recibir consejos y tutoriales de programación, así como una ruta de aprendizaje completa de cursos de desarrollo web. Además, se sugiere la utilidad de caniuse.com para verificar la compatibilidad de diferentes propiedades de HTML, CSS y JavaScript en varios navegadores, lo que es esencial para asegurar que las aplicaciones web sean cross-browser compatibles.
🌐 Consumo de APIs y librerías de componentes
Este párrafo se centra en la utilización de APIs para el desarrollo de aplicaciones web. Se recomienda publicapis.com como una plataforma para encontrar diversas APIs, ya sea para aplicaciones relacionadas con anime, películas, calendarios, o cualquier otro tema. Además, se habla sobre la herramienta 'Can I Use' para verificar la compatibilidad de ciertas funcionalidades web con diferentes navegadores. Finalmente, se presenta la librería de componentes de React llamada 'soner', que permite crear alertas y ventanas emergentes personalizadas con facilidad, mejorando la experiencia del usuario y la interacción con la aplicación.
🎨 Recursos de diseño y efectos de carga en CSS
El tercer párrafo aborda la temática de diseño y animaciones en la web, destacando cssloaders.com como una fuente de infinidad de loaders y efectos de carga creados con CSS. Estos loaders son ligeros y pueden ser personalizados fácilmente, lo que permite a los desarrolladores web adaptarlos a sus necesidades específicas. Los ejemplos incluyen efectos clásicos, spinners y animaciones 3D. La ventaja de utilizar loaders en CSS es que no dependen de imágenes, mejorando así la performance de la página. Además, se sugiere la posibilidad de manipular estos efectos con maestría en cursos avanzados de CSS3.
Mindmap
Keywords
💡herramientas para desarrolladores web
💡SVGRepo
💡Public APIs
💡Can I Use
💡React
💡Soner
💡CSS loaders
💡desarrollo web
💡cursos de desarrollo web
💡newsletter
💡compatibilidad de navegadores
Highlights
Se presentan cinco herramientas esenciales para desarrolladores web que mejorarán el día a día en el trabajo.
La primera herramienta, svgrepo.com, ofrece más de 500,000 imágenes SVG vectores e iconos para incrustar en proyectos web.
Con svgrepo.com, los desarrolladores pueden encontrar iconos para redes sociales, logos de empresas y otros elementos de diseño.
La segunda herramienta, publicapis.com, facilita el consumo de APIs específicas para diferentes tipos de aplicaciones.
Public APIs cubre una amplia variedad de temas, desde información de anime hasta datos meteorológicos.
Can I Use es una herramienta indispensable para verificar la compatibilidad de propiedades CSS, HTML y JavaScript en diferentes navegadores.
Can I Use muestra la compatibilidad detallada de cada propiedad y método con navegadores y versiones específicas.
La librería de componentes de React llamada 'soner' permite crear alertas y ventanas emergentes personalizadas con facilidad.
Los componentes de 'soner' son muy flexibles y permiten customizar la apariencia y el comportamiento de las alertas.
CSS Loaders ofrece una gran variedad de loaders de efecto de carga hechos con CSS, mejorando la experiencia del usuario y la optimización de la página.
Los loaders de CSS son ligeros y atractivos, y pueden ser personalizados para adaptarse a las necesidades de diseño específicas.
El creador de este contenido también ofrece cursos de desarrollo web para aprender desde cero y una lista de correos electrónicos con consejos y anécdotas.
Se destaca la importancia de utilizar recursos actualizados y gratuitos para mantenerse al día en el desarrollo web.
Se menciona la disponibilidad de cursos nuevos y un formato de contenido emergente de emails diarios con consejos de programación.
El contenido de hoy es una guía práctica para mejorar la eficiencia y la creatividad en el trabajo diario de un desarrollador web.
Transcripts
hoy te traigo cinco utilidades para tu
díaa a día cinco herramientas que a
partir del día de hoy que yo te las
descubra no vas a poder dejar de usarlas
cinco herramientas que todo
desarrollador web debería utilizar o que
por lo menos debería probarlas así que
no te pierdas ni un segundo de este
vídeo porque creo que te van a encantar
Pero antes de empezar con las
herramientas te recomiendo que te
suscribas a mi lista de correos gratuita
que está aquí abajo en la descripción
donde mando un email al día contando
alguna experiencia anécdota historia que
me han pasado en el mundo de la
programación o dando consejos y
enseñando algún truco de desarrollo web
creo que te puede gustar también y es
completamente gratis lo tienes en la
descripción y lo que también tienes en
la descripción es la ruta de aprendizaje
completa de todos mis cursos de
desarrollo web que si no sabes nada y
empiezas desde absoluto cero Pues sigue
ese orden eh que te indico en la
descripción o entra en esta URL y sigue
los cursos en ese orden para aprender
desde cero y poder tener una ruta de
aprendizaje progresiva para en un futuro
con práctica y esfuerzo poder conseguir
un trabajo como desarrollador la primera
herramienta que te traigo creo que te
puede te puede sorprender te puede
gustar porque a quien no le ha pasado
que está desarrollando algo está
haciendo algún diseño o lo que sea y de
repente necesita utilizar algún icono
algún logo alguna ilustración para
incrustar en tu página web y en tu
proyecto web Vale pues muchas veces
estas ilustraciones nos las dan Eh Pues
el equipo de diseño que tengamos en
Nuestra Empresa pero muchas veces cuando
somos freelance o estamos haciendo algún
proyecto personal no tenemos un sitio
donde encontrar esos iconos Pues en esta
web que te traigo hoy que se llama svg
repo tú puedes buscar un montón de
iconit para lo que tú necesites y son
completamente gratuitos pone aquí que
hay más de
500.000 imágenes svg vectores o iconos
no Por ejemplo si yo quisiera poner en
una web los iconos de redes sociales por
ejemplo Twitter vale Voy a buscarlo y el
logo de Twitter lo tengo aquí 500,000
veces con 500,000 versiones diferentes
no que simplemente si yo quisiera usar
el logo de Twitter el Antiguo logo de
Twitter pues simplemente le doy clic y
me puedo descargar la imagen en vector
en svg pero también me la puedo bajar en
png que a veces es más cómodo no o por
ejemplo si estoy haciendo una tienda
online y necesito un icono para el
carrito de compra pues puedo poner aquí
carrito a ver si lo entiende en español
no en español no lo va a entender tienes
que ponerlo en inglés tendrías que poner
pues por ejemplo cart vale buscas cart y
tienes 1000 opciones 1000 imágenes de
carritos de la compra 1000 imágenes o
por ejemplo si estás haciendo una red
social y quieres un corazón Pues puedes
buscar hert vale para hacer el típico
like vale Y aquí tienes un montón de
corazones y tien infinitas páginas con
imágenes gratuitas para eso Si quieres
buscar un like pues lo buscas like y te
aparece por aquí vale Si quieres el logo
de yo que sé si quieres el logo de
YouTube lo buscas YouTube YouTube vale Y
te sale aquí 1000 opciones o sea es una
web brutal y es completamente gratuita y
además también te puedes guardar eh
iconos en favoritos Por si te interesa
tenerlo a mano en algún momento Aparte
también hay colecciones de iconos por
ejemplo esto es una colección de icono y
puede seguir una homogeneidad en los
iconos que tú vayas a poner en tu
aplicación web o en tu aplicación de lo
que sea de acuerdo pues bueno es una web
muy útil para los desarrolladores web y
diseñadores web también la siguiente
utilidad me encanta porque muchas veces
queremos desarrollar algún tipo de
aplicación que consuma un Api y que
consuma un Api concreta Por ejemplo si
yo quiero hacer una aplicación de anime
Pues a lo mejor me interesa tener un Api
que me eh proporcione toda la
información de todas las series de anime
o de todos los cómics de anime o lo que
sea de esos animes si yo pueda sacar
información de ahí o Necesito hacer una
aplicación relacionada con películas
Pues a lo mejor Necesito un Api para
consumir esa información de las
películas o depende del tipo de
aplicación que yo quiera hacer que me
hayan mandado hacer o que se me haya
ocurrido hacer puedo necesitar un Api u
otra y en esta web que se llama public
[Música]
apis.com utilizar en internet por
ejemplo hablando de lo del anime yo
tengo esta esta sección de anime por
ejemplo y tienes un montón de apis que
tú podrías utilizar que tienen pues la
base de datos de de muchas series de
anime y movidas así no por ejemplo si
estamos hablando de negocios Pues
también tenemos apis para ello apis para
todo ello e si estamos hablando de un
calendario pues Aquí tengo apis para
sacar información de del calendario de
los días festivos por ejemplo aquí hay
un Api para sacar los días festivos de
los bancos en UK en en United Kingdom no
en fin cualquier cosa pero tú podrías
incluso buscarlo por aquí en plan Si
buscas E Weather wea vale busca el
tiempo un Api del tiempo para hacer una
aplicación del tiempo lo que sea puedes
buscar y tienes un montón incluso tienes
un Api de la amed por ejemplo que es eh
Si estás en España en la la agencia
meteorológica Por decirlo así es oficial
no tienes un montón de apis que podrías
consultar aquí para lo que sea para lo
que sea si hablamos de Marvel seguro que
hay apis de Marvel Sí hay alguna si
hablamos de yo que sé de cualquier cosa
es que de cualquier cosa diccionarios
por ejemplo Pues sí que hay diccionarios
también vale Incluso si lo Busca en
español A lo mejor hay un dicionario en
español diccionario diccionario Sí hay
diccionarios de todo tipo en fin tienes
todo tipo de apis para tú consultar
simplemente para consultar una de esas
apis pues le das click a la Api y te
lleva a dónde a dónde está esa Api te
lleva esa documentación y tú puedes
directamente pues utilizar sus métodos y
tal esto es útil ya te digo para hacer
aplicaciones de prueba o para hacer
aplicaciones consumiendo ciertas apis
otra utilidad que muchos conoceréis ya
si os dedicáis al mundo del desarrollo
web es can iuse en can iuse tú puedes
comprobar propiedades de css de html de
javascript puedes comprobar diferentes
funcionalidades que implementan los
lenguajes de programación web eh más
estándar ya te digo sobre todo Estamos
hablando de html css Y javascript si
Buscamos por ejemplo javascript vale
nosotros podemos ver que hay ciertos
módulos de javascript que podríamos
consultar y podemos ver la
compatibilidad con los navegadores vale
podemos ver la compatibilidad con los
navegadores pero por ejemplo si hablamos
de alguna propiedad de css Como por
ejemplo una transform vale transform
transform vamos a ponerlo bien transform
css3 2D transform puedes ver la
compatibilidad que tiene con los
navegadores Okay fíjate como pues te
dice los navegadores y las versiones en
las que sería compatible entonces tú
Aquí puedes poner una propiedad de css
una etiqueta de html por ejemplo la
etiqueta Mark vale la etiqueta Mark de
html el elemento Mark Pues fíjate te
dice desde dónde es compatible desde qué
navegador desde qué versión Hasta qué
otra Hasta qué otra versión no y qué
navegadores no son compatible incluso
hablando de navegadores de móvil y de
escritorio no este si hablamos por
ejemplo de javascript y estamos hablando
de por ejemplo utilizar un método nuevo
por ejemplo el el tu reversed reversed
aquí lo tienes
reversed si hablamos de javascript y
Buscamos por ejemplo el método to
reversed que es nuevo para los arris más
o menos nuevo pues te dice las versiones
con las cuales es compatible por ejemplo
no es compatible del firefox 2 al 114
pero 115 en adelante Sí y con por
ejemplo Google Chrome es compatible a
partir del 110 y el 110 está eh sacado a
partir de 2023 vale por tanto eh fíjate
como usar ciertos métodos de javascript
como este imposibilitaría que lo usaras
o que funcionara en navegadores de estas
versiones de versiones un poco más
antiguas porque es una propiedad nueva
que está disponible a partir de 2023 por
ejemplo entonces tú puedes mirar aquí
toda clase de métodos por ejemplo el
método tu shorted también que es nuevo
shorted también lo puedes mirar y puedes
ver la compatibilidad que tiene No pero
por ejemplo si buscáramos el método
alert de javascript que es super
conocido está compatible con
absolutamente todo de todas las
versiones o sea de toda versión a toda
otra Además tú si te pones encima de la
de la casilla donde quieres comprobar la
versión te dice De qué momento está
disponible no eh Por ejemplo si hablamos
de Safari o hablamos de firefox desde
2006 está compatible ese método para que
tú lo puedas utilizar con javascript y
funcion en ese navegador no y lo mismo
si hablamos de por ejemplo
funcionalidades como css nesting si tú
lo miras css nesting que es una forma de
anidar elementos dentro de css de anidar
eh reglas y propiedades como si fuera un
PR procesador pues te dice qué
navegadores lo tienen compatible ahora
mismo y hay poca compatibilidad todavía
hay muy poquita Porque todavía se usa
bastante todavía se usan bastante
ciertas versiones de estos navegadores
antiguos donde no hay completa
compatibilidad incluso eh versiones de
navegadores que han sacado en 2023 que
se siguen usando Por decirlo así pues
todavía no es compatible eh la anidación
Y por supuesto en muchos navegadores
móviles todavía no es compatible el css
nesting en este caso por eso es una
propiedad un poco experimental Pero
bueno con canaus tú puedes
despreocuparte de eso y puedes comprobar
antes de usar algo que pueda ser
experimental o algo que no sabes si es
compatible con todos los navegadores lo
puedes comprobar aquí Así que es una
herramienta espectacular y necesaria
Vale ahora cambiando radicalmente de
tipo de herramienta o de tipo de
utilidad Te voy a enseñar una librería
de componentes de react muy buena muy
muy buena que se llama soner y este
componente de react sirve directamente
para hacer esto Fíjate en la parte
inferior derecha de la pantalla fíjate
cóm salen pantallitas por aquí aleras es
superbonito y simplemente
instalándose para hacer ese ese tipo de
ventanas pero no solo eso puede generar
este tipo de ventan o de aler tias que
son muy chulas e también puedes hacer
este tipo de aleras este otro tipo y el
código es muy sencillo muy muy fácil
entonces un componente de r que puede
ser Útil para ti y que yo en algún
proyecto lo he utilizado Ya fíjate
puedes hacer todo tipo de alertas Okay
fíjate est de cargando Qué chula está Y
también puedes customizar la es decir
puedes hacerlas como como tú quieras
simplemente haciendo un di y poniéndole
el contenido que quieras también las
puedes poner en diferentes partes de las
de la pantalla vale es muy fácil
poniéndole el atributo Pos Okay y puedes
también hacerla como como si fueran
cayendo por aquí arriba o por defecto
que se vayan acumulando o sea las
posibilidades son bastantes bastante
bastante y está muy bien es una librería
de alertas o un componente de alertas
para rat muy muy muy bueno y aparte que
se te quedan aquí como acumulada y
puedes consultarlo después Mola me gusta
mucho creo que alguno le puede servir me
gusta me gusta bastante otra web de
recursos y utilidades que te puede
servir es css loaders de acuerdo donde
tienes infinidad de los adders
directamente hechos con css es decir no
son imágenes No son png no son gif no
son absolutamente nada simplemente son
loaders los típicos loaders de efectos
de carga que se hacen infinitamente en
una web sobre todo si es una web spa
también a día de hoy pues tienes un
montón de tipos de efectos es decir tú
estás buscando por ejemplo un efecto de
carga clásico Pues bueno tienes aquí un
montón de efectos de carga clásicos que
tú te podrías copiar por ejemplo este si
te interesa copias el css vale Y ya lo
tienes aquí es decir si lo pego por aquí
pues tengo todo el css de ese elemento
Incluso el html copiar y pegar
directamente no si hablo notas por
ejemplo lo puedo pegar por aquí para que
lo veas Te da todo el código css es
lader y tú te tienes que despreocupar en
ese sentido de poner una imagen o lo que
sea ya tienes ejemplos muy bonitos hecho
pero si hablamos de spinner del típico
que da vueltas Hay un montón también es
decir esto carga cero la web porque como
está hecho con css completamente no es
ninguna imagen pues es más beneficioso
tener un cargador un un loader hecho con
css que hecho con una imagen o con un
gif al final Eso hace que la web vaya
pesando más entonces fíjate como nos
proporciona el código incluso 3D También
tenemos cargadores 3D como estos que
están muy guapos también y son
llamativos en fin hay muchos muchos
muchos efectos de carga por aquí que tú
podrías utilizar dependiendo del
proyecto depend dependiendo tal de lo
que te interesara pero es que además no
solo eso sino que también los puedes
manipular tú ya que estamos hablando de
css que tú lo pegas por aquí y puedes
cambiar Pues el html y el css como tú
quieras para cambiar esa animación
colores efectos lo que sea como ya te he
enseñado en algunos cursos como el
máster en css3 avanzado donde aprendemos
maquetación avanzada tien el curso en la
descripción pues ahí te enseño a
manipular toda clase de animaciones y a
cambiar cualquier tipo de de efecto en
una web pero sobre todo también si
tienes un trozo de código con un loader
de esto y quieres cambiar pues la
velocidad los colores no sé qué no sé
cuántas adaptar el tipo de animación
para que tenga un teing diferente Pues
también lo podrías hacer y Estas son las
utilidades que te traía hoy las
herramientas que te traía hoy Yo creo
que están muy muy interesantes están muy
guapas te pueden servir bastante y nada
espero que te ayuden en tu día a día de
trabajo como desarrollador web que por
cierto si quieres aprender desarrollo
web tienes todos mis cursos aquí abajo
en la descripción para que puedas
aprender conmigo desde cero y paso a
paso he sacado cursos nuevos que algunos
no conocen por ejemplo la guía completa
para conseguir trabajo de programador y
Bueno hay muchos cursos míos que a lo
mejor no tienes y a lo mejor te interesa
tenerlo y los tienes en la descripción
del vídeo Por cierto ahora valen muy
poquito valen más o menos 10 o 12 creo
que incluso 10 te podría decir depende
de cuando esté viendo Este vídeo y es un
precio gastronómico es es un precio
desorbitado no 10 para la verdad que es
un regalo totalmente qué te voy a decir
eso por ahí y aparte también estoy
creando un nuevo formato de contenido
que es mandar un email al día donde doy
algún consejo de programación alguna
anécdota mando alguna utilidad enseño
algo bueno cosas cada día una cada día
diferente Así que nada nos vemos en el
siguiente vídeo de Este canal suscríbete
like y activa la campanita chao
関連動画をさらに表示
TOP 5 mejores herramientas de DESARROLLO y DISEÑO WEB (2020) 🔥 | Keyquotes
Como instalar y configurar XAMPP
Usar Inspeccionar elemento para los estilos de CSS
Live exclusivo para miembros 2
Las 8 mejores extensiones para potenciar tu experiencia en Visual Studio Code
🎯 CSS GRID en 10 minutos (DESDE CERO).
5.0 / 5 (0 votes)