¡Hey Coders! Hace Mucho tiempo publique un video acerca de recursos para desarrolladores y programadores, basicamente el video consistia en compartirles una serie de sitios web que proveen colores, imagenes, comprimen archivos, convierten codigo, y asi, es decir sitios que son muy utiles al momento de desarrollar. El día de hoy les traigo una nueva version de este video solo que con muchos más recusos.
¿Como buscar más rapido entre estos recursos?
Personalmente, utilizo mucho esta web cuando tengo que usar alguna herramienta pero no recuerdo el nombre. De hecho lo que hago es buscarlo de manera rapida de la siguiente forma:
- Ctrl + F, si usas este atajo de teclado podras abrir un cuadro de buscado que te provee tu navegador (ya sea chrome, firefox, brave, entre otros).
Generadores de Texto
Los generadores de texto son muy utiles cuando creas un sitio web o aplicacion, supongamos que estas creando un blog y necesitas probar como se veria con textos extensos. si usas un editor de codigo seguro que tienes emmet, pero para aquellos caso en los que no funcione tienes los siguientes sitios web.
- lorem ipsum
- https://loremipsum.io/
- GetLorem.com
- https://www.boom-online.co.uk/lorem-ipsum/
- https://loremipsum.io/es/ultimate-list-of-lorem-ipsum-generators/
- https://loremipsum.es/
- http://www.cupcakeipsum.com/
- http://www.cheeseipsum.co.uk/
- http://www.zombieipsum.com/#
- pirare ipsum
Generadores de Favicons
Generadores de Datos Falsos
muchas veces cuando desarrollamos aplicaciones o traajamos con bases de datos necesitamos datos de pruebas con los cuales practicar o simplemente tener datos de ejempo o mocks.
- Mockaro
- fakerjs Faker es un modulo de npm que te permite generar datos falsos desde codigo.
- https://datafakegenerator.com/
Cifrado y Generadores de IDs
Muchas veces cuando se esta creando aplicaciones se necesita generar un hash o una serie de caracteres aleatorios para utilizarlos como palabras secretes, Client secrets o simplemente en una biblioteca de cifrado. Muchas lenguajes de programacion te permiten generarlo con una lineas de codigo, pero usando estos sitios web se pueden generar simplemente dando un click en un boton.
- https://www.uuidgenerator.net/
- https://randomkeygen.com/
- https://passwordsgenerator.net/
- https://www.base64decode.org/
Imágenes
Los siguientes sitios son muy utiles cuando se esta buscando imagenes para usar en nuestros proyectos. Algunos ofrecen imagenes sin atribucion.
- Unsplash.com
- PixaBay.com
- https://burst.shopify.com/
- https://www.freeimages.com/
- https://kaboompics.com/
- https://stocksnap.io/
- https://www.canva.com/photos/free/
- https://www.lifeofpix.com
- https://gratisography.com/
- https://www.flickr.com/
- https://www.freepik.es/
- Pexels.com
Videos
Imágenes de Ejemplos
Minificadores de Imágenes
Minificadores de otros formatos Web
Los siguientes sitios permiten reducir el peso de tu código minificandolo. Básicamente estas herramientas quitan los espcios en blanco, los tabs de mas, y colocan todo el código en una sola linea. Muy utiles para producción y cuando son fragmentos pequeños de codigo.
- https://www.websiteplanet.com/es/webtools/jscssminifier, Fácil de Usar y No contiene publicida.
- https://www.minifier.org/
- https://codebeautify.org/jsonviewer
- https://codebeautify.org/
Iconos
si no usas bibliotecas de iconos como Font awesome, material icons entre otros, estas son algunos sitios populares de iconos:
- https://fontawesome.com/
- https://fonts.google.com/icons
- https://feathericons.com/
- https://www.iconfinder.com/
- Feather Icons
- Wikimedia Commons
Diferenciadores de Textos
Conversores de Código
playgrounds
Los playgrounds son sitios que te permiten ejecutar porciones de codigo en multiples lenguajes de programacion en la web. Muy util cuando se necesita entender una porcion de código.
- https://regex101.com/, Playground de Regex
- https://babeljs.io/repl/
- https://www.typescriptlang.org/play
- https://play.golang.org/
- https://play.rust-lang.org/
- https://try.redis.io/
html
CSS
Generadores de CSS
Muchas veces cuando estilizamos un sitio, es tedioso generar un shadow, o una onda con CSS puro. por suerte existen sitios que nos permiten generar facilmente muchos tipos reglas de CSS.
Generadores de Ondas de CSS
- GetWaves.io, Genera ondas de CSS
- WickedBackground.com, Genera ondas para poder ser descargadas en forma SVG
Otros Generadores de CSS
- https://www.layoutit.com/es
- https://css3buttongenerator.com/
- https://www.cssportal.com/ glosario de css
- https://9elements.github.io/fancy-border-radius/ genera formas
- https://loading.io/flexbox/ flexbox
- http://tridiv.com/ formas en 3d
- https://ui.glass/generator/
- https://glassgenerator.netlify.app/
- https://hype4.academy/tools/glassmorphism-generator
- https://neumorphism.io/#e0e0e0
- Clip-Path Generator
- Box-Shadow Generator
- Cubiz-Bezier Generator for Animations
- animista.net
- Cross-Browser Generator
Generador de Loaders de CSS
Estos son algunos sitios para poder generar Loaders a partir de CSS.
Sass
Less
javascript
- https://developer.mozilla.org/es/docs/Web/JavaScript
- https://kangax.github.io/compat-table/es6/
- javascript.info Guias de como usar multiples funcionalidades de Javacript
Documentación
compresores
snippets
colores
- https://www.colorsandfonts.com/, Hermosas Paletas de Colores para temas oscuros
- https://coolors.co/, Paleta de Colores
- https://hexcolor.co/image-to-colors Sube una imagen y extrae un color
- https://hexcolor.co/, Multiples herramientas relacionadas a colores
- https://www.color-hex.com/ Información acerca de los colores
- https://mycolor.space/
- https://flatuicolors.com/
- https://color.hailpixel.com/
- https://colorhunt.co/
- https://uigradients.com/#Telegram
- http://stylifyme.com/
- https://www.canva.com/colors/color-palette-generator/
- brandpalettes.com permite ver la paleta de colores de multiples marcas populares como Google, Airbnb, Microsoft, Facebook, etc.
Mockups y Wireframes
- https://app.diagrams.net/
- https://wireframe.cc/
- https://moqups.com/es/
- https://mockuphone.com/
- https://app-mockup.com/
Test de velocidad para Sitios Web
Cuando se busca mejorar la experiencia de usuario es importante preocuparse por la velocidad de carga de nuestros sitios web y cuanto tiempo toma servir assets como imagenes, iconos, entre otros recursos. Para conocer esto, los siguientes sitios web te permite poder analizar la velocidad de carga de tus web.
- https://developers.google.com/speed/pagespeed/insights/?hl=es
- https://tools.keycdn.com/speed
- https://tools.pingdom.com/
Responsive
- https://www.responsinator.com/
- https://www.webfx.com/tools/whats-my-browser-size/
- https://responsively.app/
Encuestas
Todas las herramientas de la web tiendan a cambiar o desfasarse por otras muchos más modernas. En estas web podras ver encuentas para conocer las nuevas herramientas que muchos desarrolladores estan usando actualmente.
Edicion de Video Online
Tutoriaes de Código
esta es una lista de multiples Sitios web en donde encontraras tutoriales de tecnologias nuevas, explicados de una forma sencilla y practica: