lupitasuarez / bits

Una colección de imágenes que explican diferentes conceptos entorno a desarrollo web.

BITS

¡Hola!, bienvenido a bits.

Una colección de imágenes que explican diferentes conceptos en torno a desarrollo web. Sus principales características es que sean cortos, directos y fáciles de digerir, he de ahí el nombre (Bits). Espero que estos te sean de ayuda, como introducción, guía o simplemente para repasar conceptos.

Aquí encontrarás la imagen o imágenes que componen un bit, el código que se usó, una breve descripción y los recursos que utilicé para su creación.

Existen dos tipos de bits hasta el momento:

1. BitCode: Fragmentos de código.
2. BitSnack: Una serie de imágenes que explican un tema o tecnología.

🤓 Aprende algo nuevo hoy

Comparto los bits al menos una vez por semana.

Instagram: @fili.santillan
Twitter: @FiliSantillan
Facebook: Fili Santillán
Sitio web: http://filisantillan.com

❤ Contenido

• BitCode

  • CSS

    • ::before
    • :active
    • :after
    • :checked
    • :disabled
    • :first-child
    • :hover
    • :invalid
    • :last-child
    • :valid
    • Child selector
    • font-display
    • image-set
    • is()
    • Media Query Ranges
    • nth-child
    • nth-last-child
    • nth-of-type
    • object-fit
    • prefers-color-scheme
    • Selector de hermanos adyacentes
    • Selector de hermanos generales
    • Selectores de atributo
    • Scroll Snap

  • JavaScript

    • arrow functions
    • BigInt
    • Clipboard API
    • Destructuring
    • Dynamic import
    • filter
    • for...in
    • for...of
    • forEach
    • globalThis
    • includes
    • length
    • map
    • MutationObserver
    • Promise.allSettled
    • Promise.any
    • reduce
    • replaceAll
    • Rest VS. Arguments
    • trim()
    • slice()
    • var, let y const
    • URLSearchParams
    • Vibration API

  • React

    • useState

  • Otros

    • async
    • CSSOM
    • defer
    • DOM

• BitSnack

  • CSS

    • :nth-child
    • 5 Características de CSS
    • Background Blend Mode
    • CSS Calc
    • CSS Houdini
    • CSS Units
    • Especificidad en CSS
    • Flexbox
    • Grid Layout

  • JavaScript

    • async/await
    • De jQuery a JavaScript
    • Destructuring
    • ES2020
    • ES2021
    • for...in
    • for...of
    • forEach
    • Formas de clonar arrays
    • includes()
    • Object.entries()
    • Object.values()
    • Picture-in-picture
    • Promesas en JavaScript
    • V8 y el JavaScript Engine
    • var, let y const
    • Web Share

  • React

    • Qué es y cómo funciona React
    • React Hooks

  • Otros

    • 2020
    • 4 sitios para mantenerse actualizado
    • 4 técnicas para mejorar el performance
    • 4 técnicas para mejorar el performance 2
    • 5 Consejos para organizar tus objetivos
    • 6 Setups increíbles e inspiradores
    • 8 fuentes para programar
    • 8 paletas de colores que debes conocer
    • Comandos básicos para git
    • Conoce las expresiones regulares 01
    • Conoce las expresiones regulares 02
    • Conoce las expresiones regulares 03
    • Console
    • GraphQl
    • Ghost
    • Libros que debes de conocer
    • Mis Apps
    • Mis Apps 2
    • Mi Stack 2020
    • Ruta para convertirse en Frontend Developer
    • srcset
    • Tipos de input en HTML
    • Tips para Chrome DevTools
    • VSCode (extensiones)
    • VSCode (temas)
    • VSCode (temas 2)

• Posters

  • CSS

    • Centrar elementos con CSS
    • CSS Houdini

  • JavaScript

    • Características de ES2020
    • Hoisting
    • JavaScript Intro
    • Web APIs

  • Otros

    • 4 Sitios para practicar y mejorar como dev
    • Extensiones para VSCODE
    • Personas fascinantes que debes conocer 01
    • Personas fascinantes que debes conocer 02

✨ Comparte

Eres bienvenido a descargar y compartir mis bits. Sería increíble llegar a más personas y compartir conocimiento. Solo te pido que no edites las imágenes o quites mi nombre. Muchas imágenes incluso no tienen mis datos, para que sean más cómodas de leer, por lo que agradecería mucho una mención 😇 .

🤜 Contribuye

Cualquier contribución es bienvenida, si crees que podrías tener un tema interesante para crear un bit, puedes crear un issue. También puedes mandar un PR para correcciones de ortografía, typos o mejoras.

📚 Recursos

En cada Bit vas a ver los recursos que utilicé para la creación del mismo. Aunque quisiera hacer algunas menciones generales que me ayudaron a lograr este tipo de contenido.

• Samantha Ming: Aunque ya compartía este contenido desde hace tiempo en mis redes sociales, sus tidbits fueron de gran inspiración para darles forma a mis bits.
• Las portadas y finales usan iconos de Freepik: https://www.flaticon.es/autores/freepik
• Los BitQuiz están inspirados en los ¡Quiz! de teffcode

📜 Licencia

Este trabajo está bajo una licencia CC BY-NC-ND 4.0.

Siempre es bueno compartir conocimiento, por cual agradezco mucho el hecho de que quieras compartir mi trabajo. En cuanto a las atribuciones, solo no edites las imágenes, éstas ya cuentan con mi nombre, pero, si quieres compartir algo que no tenga mi nombre, agradecería mucho que me hagas una mención en cualquiera de mis redes sociales para así llegar a más gente 😃 .