Páginas

Documentación:

Documentacion HTML, CSS, Javascript (midu)
developer.mozilla.org
Página de documentación (midu)
devdocs.io
Documentación de varios lenguajes
overapi.com

Hosting:

Github pages
Hosting gratuito para paginas web estaticas (HTML, CSS y JS)
La carpeta que debo subir al repositorio es la carpeta docs con mis archivos de produccion adentro y esta es la que usa Github pages.
Entro al repositorio y doy en settings, pages, en sources selecciono la rama main, la carpeta que subí y doy en save. espero que este lista la pagina. si realizo algun cambio puede tardar varios minutos en verse reflejados.
- Github Pages con Vite:
  En el archivo vite.config.js configuro la base de la pagina y la carpeta de salida cuando se hace el build si asi lo deseo:
```
export default defineConfig({
  base: '/nombre-repositorio/',
  build: {
    outDir: 'docs'
  }
});
```
  Otra forma puede ser:
  - Puedo instalar: npm install gh-pages --save-dev
  - Agregar en el package.json:
```
"scripts": {
  "deploy": "gh-pages -d dist"
}
```
  - Seguir los pasos de la documentación.
    vitejs.dev/guide/static-deploy.html
  - Ver video
- Github Pages con Angular:
  Se puede configurar en el archivo angular.json, la propiedad baseHref de la configuracion de production:
```
"configurations": {
  "production": {
    "baseHref": "/nombre-repositorio/"
  }
}
```
  Una vez se hace el build, debo crear una copia del archivo docs/index.html y llamarlo docs/404.html y subir los cambios.
  
  También puedo cambiar el outputPath de la configuracion de build para que la carpeta de salida sea docs:
```
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "docs"
  }
}
```
- Failed to load resource: the server responded with a status of 404
  si tengo el error anterior al entrar a la página o al recargar, pruebo con una de las soluciones anteriores.
Netlify
Hosting gratuito para paginas web estaticas (HTML, CSS y JS)
Simplemente subo la carpeta de produccion que genere
- error: Si me encuentro con el problema de Page Not Found en mi sitio web, debo agregar el archivo netlify.toml a la carpeta que voy a subir a produccion, éste lo encuentro en la carpeta de Angular
vercel.com (gratis) => paginas estaticas (HTML, CSS, JS)
surge.sh (gratis) => paginas estaticas (HTML, CSS, JS)
digitalocean.com => gratis par paginas estaticas y tiene plan de pago para aplicaciones con backend
render.com (gratis) => despliegue de aplicaciones con backend y bases de datos
fly.io (gratis) => aplicaciones con backend
railway.app (de pago) => aplicaciones con backend
heroku.com (de pago) => aplicaciones con backend
https://www.fl0.com/ => despliegue de aplicaciones con backend y bases de datos
https://www.koyeb.com/ => despliegue de aplicaciones con backend
https://zeabur.com/ => despliegue de aplicaciones con backend
dev.new (gratis) => despliegue de aplicaciones y bases de datos
workers.cloudflare.com (cloudflare pages) (gratis)
Gitlab Pages
Firebase
AWS (es gratis para estudiantes)
Google Cloud
Microsoft Azure

API:

API de la NASA
api.nasa.gov
Informacion de superheroes de Marvel
developer.marvel.com
Gifs
developers.giphy.com
Fakestore
fakestoreapi.com
fakeapi.platzi.com
Cambio de divisas
fixer.io
Usuarios, comentarios, fotos, posts
jsonplaceholder.typicode.com
Noticias
newsapi.org
Informacion del clima
openweathermap.org/api
Imagenes
pexels.com/es-es/api
Informacion sobre pokemons
pokeapi.co
Generar datos aleatorios
random-data-api.com
Generar usuarios aleatorios
randomuser.me
Usuarios
reqres.in
dummyapi.io
Paises
restcountries.com
Comidas
spoonacular.com/food-api
Informacion de peliculas
themoviedb.org
Imagenes
unsplash.com/developers
Mapas
developers.arcgis.com/javascript/latest
API para musica
developer.spotify.com/documentation/web-api/
Pagina con muchas APIs (midu)
rapidapi.com
Apis publicas
github.com/public-apis/public-apis
Crear APIs de prueba
https://sandapi.com/

Páginas frontend:

Aprender programacion
30secondsofcode.org
codingame.com/start
freecodecamp.org
Aprender Javascript
aprendejavascript.dev (midu)
aprendejavascript.org
javascript.info (midu)
Retos de programacion
adventjs.dev (midu)
codechef.com
codesignal.com (midu)
codewars.com
codewell.cc
cssbattle.dev
https://devchallenges.io/
exercism.org (midu)
hackerrank.com
leetcode.com
https://pruebastecnicas.com/ (midu)
retos.dev (midu)
retosdeprogramacion.com
https://angular-challenges.vercel.app/ Retos de Angular
Proyectos Frontend
codewithrandom.com
devchallenges.io (midu)
frontendmentor.io (midu)
frontendpractice.com
Proyectos open source para contribuir
firsttimersonly.com
React
reactjs.wiki
Practicar css
stylestage.dev
Cheat sheets de distintos programas
cheatography.com
Todo sobre entrevistas
techinterviewhandbook.org (midu)
Otros
dailyui.co
dev.to
geeksforgeeks.org
hackerearth.com
hiredintech.com
html5up.net
interviewbit.com
interviewcake.com
javascript30.com
onepagelove.com
simpleprogrammer.com
teamtreehouse.com
theodinproject.com
topcoder.com
webcode.tools

Repositorios Github:

Aprender Javascript
30-Days-Of-JavaScript
Aprender React
30-Days-Of-React
preguntas-entrevista-react
reactjs-interview-questions
30-seconds-of-interviews
Algoritmos y estructuras de datos (midu):
TheAlgorithms
Algoritmos y estructuras de datos en Javascript (midu):
javascript-algorithms
javascript-algorithms
Ideas de proyectos
app-ideas
preguntas y soluciones de distintos lenguajes de programacion (midu):
awesome-interview-questions
awesome-javascript-interviews
plan de estudios para pasar cualquier proceso de entrevista (midu):
codung-interview-university
Clean code para Javascript
clean-code-Javascript
https://github.com/andersontr15/clean-code-javascript-es
Recursos para desarrolladores
design-resources-for-developers
developer-roadmaps
Libros gratis de programacion
free-programming-books
Notas para frontend
frontendCollection
Preparacion para entrevista frontend
front-end-interview-handbook
libreria de aprendizaje de programacion (midu):
awesome-learning
Proyectos javascript (midu)
50projects50days
vanillawebprojects
repositorio que te enseña a construir cualquier cosa (midu):
build-your-own-x
Conceptos que deberias saber como programador (midu):
every-programmer-should-know
plan de estudios para pasar cualquier proceso de entrevista (midu):
coding-interview-university
libros gratuitos de programacion (midu):
free-programming-books
ideas para portafolios
github.com/Evavic44/portfolio-ideas
guia de pruebas de javascript (midu):
javascript-testing-best-practices
roadmap para cualquier tecnologia (midu):
developer-roadmap
curso de frontend de microsoft (midu):
Web-Dev-For-Beginners
recursos (midu):
frontend-developer-resources
Patrones de diseño
awesome-design-patterns
proyectos y tutoriales para javascript (midu):
JavaScript30
Un clon de medium fullstack para ver un ejemplo real de buenas practicas (midu):
realworld
como funciona la web (midu):
how-web-works
Templates HTML
html5-boilerplate
Preguntas de Javascript y su respuesta
javascript-questions
nodejs-interview-questions
node.js best practices
aprender a programar con proyectos (midu):
project-based-learning
public-apis
Explica como funciona la web
https://github.com/ByteByteGoHq/system-design-101 (midu)
spellbook-of-modern-webdev
Explica el diseño de sistemas
system-design-primer
preparar para una entrevista (midu)
tech-interview-handbook
you-dont-know-js
Explica como hacer todo sin JQuery
you-dont-need-jquery
Buenas practicas de testing
github.com/goldbergyoni/javascript-testing-best-practices
gist.github.com/paulirish/5d52fb081b3570c81e3a (midu):
explica el problema que hay con las API HTML que son sincronas como element.clientWidth y element.clientHeight y comopuede ser un problema segun el evento en el que usen porq se estan recalculando muchas veces de manera sincrona.
una mejor alternativa a element.clientWidth y element.clientHeight seria element.getBoundingClientRect() que viene con mas informacion, entre ellas el width y el height
(GIA): Buenas practicas y la estructura de un proyecto de angular

Librerías JAVASCRIPT:

Para buscar cualquier libreria con vanilla javascript:
vanillalist.top

Animaciones:
animejs.com
greensock.com/gsap
theatrejs.com
https://gsap.com/
Anotaciones animadas:
roughnotation.com
Efectos parallex 3d:
atroposjs.com
Sliders:
embla-carousel.com
swiperjs.com
kenwheeler.github.io/slick
Libreria para generar informacion falsa
fakerjs.dev
Poner unidades de la mejor manera segun el tamaño de un archivo
filesizejs.com
Tooltips
floating-ui.com
Funciones de JS
lodash.com
github.com/angus-c/just
underscore.js
Funciones matemáticas:
mathjs.org
Manejar fechas y tiempos (no usar momentjs)
Luxon
Efectos de confeti y demas
party.js.org
kirilv.com/canvas-confetti
Manejar estados de la aplicacion
superstate.dev
Dialogos
sweetalert2.github.io
https://a11y-dialog.netlify.app/ (script para usar dialogos accesibles)
Validar formularios de forma declarativa
vestjs.dev
Loaders
spin.js.org
whirl.netlify.app
Poner formato a los inputs
nosir.github.io/cleave.js
Notificaciones
apvarun.github.io/toastify-js
Libreria para crear un buscador:
fusejs.io
Fondos personalizados (particulas)
vincentgarreau.com/particles.js
Gráficas (charts)
https://d3js.org/
https://d3-graph-gallery.com/
https://echarts.apache.org/en/index.html
https://www.tradingview.com/lightweight-charts/
https://apexcharts.com/
Mapas:
leafletjs.com
https://chartkick.com/mapkick-js
Fullscreen scrolling websites: alvarotrigo.com/fullPage
Add touch gestures to your webapp:
hammerjs.github.io
Convertir de Markdown a HTML y viceversa:
github.com/showdownjs/showdown
Fetching de datos con React:
tanstack.com/query/latest
Regex:
regexp.dev
Validaciones:
zod.dev
Generar IDs:
uuid npm package
Dropzone (subir archivos): https://pqina.nl/filepond/?ref=pqina
Para hacer un tour por la página:
https://driverjs.com/

Otras utilidades JAVASCRIPT:

Javascript Minifier => pagina para minificar archivos JS

Frameworks CSS:

Minimal css framework
picocss.com
Frameworks classless, que estilan un poco la página, tienen dark mode y son responsive
pero no tienen clases predefinidas. Permite que sin poner nosotros los estilos, ya se
vea bien la página.
watercss.kognise.dev
boltcss.com
simplecss.org

Librerías CSS:

Animaciones
animate.style
animatiss
animxyz.com
keyframes.app/animate
sarthology.github.io/Animatopy/
all-animation.github.io
https://www.tailwindcss-animated.com/ (Animaciones con Tailwind)
Graficos
chartscss.org
Varias utilidades y componentes
tachyons.io
Elementos UI
uiverse.io
Componentes UI
storybook.js.org
https://www.hover.dev/
Componentes Tailwind
headlessui.com
tailwindui.com
flowbite.com
hyperui.dev
https://konstaui.com/
https://tailwind-elements.com/

Generadores CSS:

fancy-border-radius
Formas
bennettfeely.com/clippy
Distintos Elementos
uiverse.io
cssgrid-generator.netlify.app
Gradientes
csshero.org/mesher
designgradients.com
larsenwork.com/easing-gradients
csslayout.io
Hovers
ianlunn.github.io/Hover/
Loaders
cssloaders.github.io
getwaves.io
loading.io
Sombras
joshwcomeau.com/shadow-palette
shadows.brumm.af
Transiciones CSS
https://www.transition.style/
neumorphism.io
Diferentes utilidades
omatsuri.app
purecss.io
keyframes.app

Otras utilidades CSS:

Trucos para css
css-tricks.com
Selectores en css
css-speedrun.netlify.app
Ejemplos visuales de todas las propiedades CSS (midu)
cssreference.io
Reset CSS
joshwcomeau.com/css/custom-css-reset

Imágenes libres:

Iconos:

3dicons.com (midu)
boxicons.com (midu)
css.gg (midu)
devicon.dev
feathericons.com (midu)
flaticon.com (midu)
fontawesome.com
fonts.google.com/icons (midu)
heroicons.com (midu)
iconer.app
icones.netlify.app (midu)
iconfinder.com
iconhub.io
iconmonstr.com (midu)
icons8.com (midu)
iconsax.io
iconoir.com (midu)
iconscout.com (midu)
icons.radix-ui.com
lineicons.com (midu)
lordicon.com (iconos animados)
manypixels.co/free-icons
https://phosphoricons.com/
simpleicons.org (midu)
svgl.vercel.app => logos de distintas tecnologias
svgrepo.com (midu)
https://tabler-icons.io/ (midu)
tablericons.com (midu)
thenounproject.com
useanimations.com (iconos animados)

Ilustraciones:

Colores:

color.adobe.com
colorhunt.co
colors.muz.li
colorsandfonts.com
coolors.co
flatuicolors.com
happyhues.co
hue.tools (midu)
hypercolor.dev: Gradientes de colores para usar con tailwind y sus clases
instagram.com/interface.colour
khroma.co
mycolor.space
paletton.com
UIgradientes (degradados)
https://uicolors.app/ (paleta de colores)

Fuentes:

cufonfonts.com
dafont.com/es
fontbundles.net
fontfabric.com
fonts.google.com
fontshare.com
https://fontsource.org/
fontspace.com
fontsquirrel.com
urbanfonts.com
fontsquirrel.com
Generador de fuentes web, subo la fuente en un formato y la convierte a otro.

Mockups:

carbon.now.sh => Mockups de codigo
freepik.com
ls-graphics
mockups-design.com
mockupworld.co
pixeden.com
preview.app => Mockups con diferentes dispositivos
unblast.com
https://shots.so/ (midu)

Emojis:

Optimizador de imágenes:

squoosh.app (midu)
Ademas se tienen mas opciones como comprimirlo, quitarle atributos y demas.
Tinypng
Shortpixel
svgomg (midu)
se pega el svg y en la parte de abajo a la derecha se copia el código HTML del svg.
No remover viewbox porque no se podría redimensionar el svg

Otras utilidades:

Colección de recursos (Iconos, ilustraciones, herramientas, diseños)
https://uigoodies.com/ https://www.toools.design/
Imagenes para fondos
app.haikei.app
tabbied.com
https://www.svgbackgrounds.com/
Editor de fotos
pixlr.com
Diseños de paginas web
awwwards.com
Diseños
dribbble.com
behance.net
https://collectui.com/
https://godly.website/ https://www.dark.design/ (diseños de dark mode)
Patrones de diseño de Interface de usuario
ui-patterns.com
Atajos para los programas de diseño
shortcuts.design
Tips de diseño UI
https://www.adhamdannaway.com/blog/ui-design/16-ui-design-rules

Trabajo

angel.co => trabajo remoto
arc.dev (midu) => trabajo remoto
getmanfred.com (midu) => trabajo remoto y se puede crear hoja de vida
getonbrd.com
lemon.io => trabajo remoto
remoteok.com => trabajo remoto
showwcase.com => trabajo remoto
talenteca.com
https://justremote.co/
https://lalent.co/
https://www.tecla.io/
https://remotive.com/
https://hireline.io/
https://www.capgemini.com/careers/join-us/#size=15
https://trabajosremotos.es/
https://weworkremotely.com/
torre.co
https://remoteleads.io/
linkedin.com
indeed.com
co.computrabajo.com
resume.io => crear la hoja de vida
between.tech => empresa de España que ofrece vacantes
Guia para crear hoja de vida

Otros

caniuse.com (midu)
para saber si algo es soportado por los navegadores
node.green (midu)
para saber si algo es soportado por node
bundlephobia.com (midu)
para saber cuanto pesa un paquete en el navegador, en el lado del usuario, muestra lo que ocupa cuando un usuario lo descarga para ver la web y cuano tiempo tarda en descargarse en el navegador, por ej Vite no lo muestra bundlephobia porq no se utliza en el lado del cliente, en cambio packagephobia si lo muestra
packagephobia.com (midu)
para saber cuanto pesa un paquete al instalarlo, es de lo que tu harias el npm install
gradejs.com (midu)
Ver las dependencias que usa una pagina web
quicktype.io
Crear interfaces, metodos y demas a partir de un json en cualquier lenguaje.
Pego el json en la parte izquierda, en la parte de arriba pongo el nombre, el source type es json, en la parte derecha en options, selecciono typescript, activo Interaces only y Verify JSON.parse
transform.tools
Para hacer transformaciones de cualquier tipo.
Tambien incluye una transformacion que permite crear una interfaz a partir de un json como quicktype.io
gitexplorer.com
cheatsheet para GIT
Bases de datos
mongodb.com/atlas/database (midu)
https://jsonbin.io/ para guardar jsons.
lucia-auth.vercel.app (midu)
Servicio de Autenticacion
ngrok.com (midu)
localhost accesible desde Internet
checklyhq.com (midu)
Monitoriza tus webs y APIs
responsively.app (midu)
probar diseño responsive
mobile friendly test
comprobar compatibilidad con responsive
Analizar la velocidad de la pagina
Page speed insights
Pingdom
GTMetrix
regexr.com
expresiones regulares para validaciones
autoregex.xyz
Toma las palabras y las convierte a regex
regex101.com
Probar expresiones regulares
pravatar.cc
para obtener una imagen de perfil aleatoria
unavatar.io
Consigue la imagen desde varios proveedores, se podria poner como src de la etiqueta img, por ej:
<img src="https://unavatar.io/github/midudev"/>
downforeveryoneorjustme.com
para saber si una pagina esta disponible
tinywow.com
resolver cualquier problema con un archivo
npm trend
ver tendencias
grep.app
buscador de repositorios de Github
dropzone.dev
Subir archivos arrastrando y soltando. Hay un componente de React que se llama Dropzone
devhints.io
Cheatsheet de varias tecnologias (midu)
qrcode-monkey.com
generador de codigo QR
10minutemail.com
crear un email por 10 minutos
excalidraw.com
permite crear dibujos y podemos hacer diagramas o lo que queramos
epochconverter.com
Convierte una fecha a timestamp y viceversa.
haveibeenpwned.com
comprobar si se ha filtrado mi informacion
embed.im/snow
Poner efecto de nieve a la pagina
https://imagekit.io/ Subir y guardar imagenes y videos en la nube, se pueden optimizar y transformar para optimizarlas. Se puede poner el src de la imagen apuntando a este servicio para cargarla optimizada desde aqui.
Patrones de diseño
https://www.patterns.dev/
https://refactoring.guru/design-patterns
https://jsonbin.io/ Puedes tener una API y el archivo json como base de datos
https://mui.com/ Componentes basados en el diseño de material
Curso FullStack
https://fullstackopen.com/es/
Aprender Node
https://aprendenode.dev/ (midu)
https://www.jsondataai.com/
Generar informacion en un json
https://free-for.dev/#/ Recrusos gratuitos para desarrolladores
https://www.umletino.com/umletino.html
Crear diagramas de flujo UML
https://es.khanacademy.org/computing/computer-science/algorithms
Curso de algoritmos
https://wave.webaim.org/
Analiza la accesibilidad de una pagina web
https://github.com/ByteByteGoHq/system-design-101 (midu)
Explicación de distintos temas web
https://www.engvid.com/
Curso de ingles

Libros de programación

Impacient programmers (Javascript para programadores impacientes)
JavaScript: The Good Parts
Elocuent Javascript
You Don’t Know Javascript

Libros que ayudan a subir el nivel de la programación pero que no son de programación (midu):

Como ganar amigos e influir sobre las personas - Dale Carnegie
El arte de presentar - Gonzalo Alvarez Marañon
Running lean - Eric Ries
Radical candor - KimScott
El metodo Ikigai - Hector Garcia
English is not easy - Luci Gutierrez
Good to great - Jim Collins