KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #mcp #open-source #deepseek-harness #dsh-plugin #ai

bits

★ 59 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://www.instagram.com/fili.santillan/)  
Twitter: [@FiliSantillan](https://twitter.com/FiliSantillan)  
Facebook: [Fili Santillán](https://www.facebook.com/FiliSantillan96/)  
Sitio web: http://filisantillan.com

## ❤ Contenido

-   ### [BitCode](/BitCode/)

-   ### CSS
        -   [::before](BitCode/before/before.md)
        -   [:active](BitCode/active/active.md)
        -   [:after](BitCode/after/after.md)
        -   [:checked](BitCode/checked/checked.md)
        -   [:disabled](BitCode/disabled/disabled.md)
        -   [:first-child](BitCode/first-child/first-child.md)
        -   [:hover](BitCode/hover/hover.md)
        -   [:invalid](/BitCode/invalid/invalid.md)
        -   [:last-child](BitCode/)
        -   [:valid](/BitCode/valid/valid.md)
        -   [Child selector](BitCode/child-selector/child-selector.md)
        -   [font-display](/BitCode/font-display/font-display.md)
        -   [image-set](BitCode/image-set/image-set.md)
        -   [is()](BitCode/is/is.md)
        -   [Media Query Ranges](/BitCode/media-query-ranges/media-query-ranges.md)
        -   [nth-child](/BitCode/nth-child/nth-child.md)
        -   [nth-last-child](/BitCode/nth-last-child/nth-last-child.md)
        -   [nth-of-type](/BitCode/nth-of-type/nth-of-type.md)
        -   [object-fit](/BitCode/object-fit/object-fit.md)
        -   [prefers-color-scheme](/BitCode/prefers-color-scheme/prefers-color-scheme.md)
        -   [Selector de hermanos adyacentes](/BitCode/adjacent-sibling-selector/adjacent-sibling-selector.md)
        -   [Selector de hermanos generales](/BitCode/general-sibling-selector/general-sibling-selector.md)
        -   [Selectores de atributo](/BitCode/attribute-selectors/attribute-selectors.md)
        -   [Scroll Snap](/BitCode/scroll-snap/scroll-snap.md)

-   ### JavaScript
        -   [arrow functions](/BitCode/arrow-functions/arrow-functions.md)
        -   [BigInt](/BitCode/BigInt/BigInt.md)
        -   [Clipboard API](/BitCode/ClipboardApi/clipboardApi.md)
        -   [Destructuring](/BitCode/Destructuring/destructuring.md)
        -   [Dynamic import](/BitCode/DynamicImport/dynamic-import.md)
        -   [filter](/BitCode/filter/filter.md)
        -   [for...in](/BitCode/for...in/for...in.md)
        -   [for...of](/BitCode/for...of/for...of.md)
        -   [forEach](/BitCode/forEach/forEach.md)
        -   [globalThis](/BitCode/globalThis/globalThis.md)
        -   [includes](/BitCode/includes/includes.md)
        -   [length](/BitCode/length/length.md)
        -   [map](/BitCode/map/map.md)
        -   [MutationObserver](/BitCode/mutationObserver/mutationObserver.md)
        -   [Promise.allSettled](/BitCode/Promise.allSettled/Promise.allSettled.md)
        -   [Promise.any](/BitCode/Promise.any/Promise.any.md)
        -   [reduce](/BitCode/reduce/reduce.md)
        -   [replaceAll](/BitCode/replaceAll/replaceAll.md)
        -   [Rest VS. Arguments](/BitCode/RestVSArguments/RestVSArguments.md)
        -   [trim()](/BitCode/trim/trim.md)
        -   [slice()](/BitCode/slice/slice.md)
        -   [var, let y const](./BitCode/var-let-const/var-let-const.md)
        -   [URLSearchParams](/BitCode/URLSearchParams/URLSearchParams.md)
        -   [Vibration API](/BitCode/vibration-api/vibration-api.md)

-   ### React
        -   [useState](/BitCode/useState/useState.md)

-   ### Otros
        -   [async](/BitCode/async/async.md)
        -   [CSSOM](/BitCode/CSSOM/CSSOM.md)
        -   [defer](/BitCode/defer/defer.md)
        -   [DOM](/BitCode/DOM/DOM.md)

-   ### [BitSnack](/BitSnack/)

-   ### CSS

-   [:nth-child](/BitSnack/nth-child/nth-child.md)
        -   [5 Características de CSS](/BitSnack/css-features/css-features.md)
        -   [Background Blend Mode](/BitSnack/background-blend-mode/background-blend-mode.md)
        -   [CSS Calc](/BitSnack/css-calc/css-calc.md)
        -   [CSS Houdini](/BitSnack/css-houdini/css-houdini.md)
        -   [CSS Units](/BitSnack/css-units/css-units.md)
        -   [Especificidad en CSS](/BitSnack/css-specificity/css-specificity.md)
        -   [Flexbox](/BitSnack/flexbox/flexbox.md)
        -   [Grid Layout](/BitSnack/grid-layout/grid-layout.md)

-   ### JavaScript

-   [async/await](/BitSnack/async-await/async-await.md)
        -   [De jQuery a JavaScript](/BitSnack/jquery-js/jquery-js.md)
        -   [Destructuring](/BitSnack/Destructuring/destructuring.md)
        -   [ES2020](/BitSnack/ES2020/ES2020.md)
        -   [ES2021](/BitSnack/ES2021/ES2021.md)
        -   [for...in](/BitSnack/for...in/for...in.md)
        -   [for...of](/BitSnack/for...of/for...of.md)
        -   [forEach](/BitSnack/forEach/forEach.md)
        -   [Formas de clonar arrays](/BitSnack/clone-arrays/clone-arrays.md)
        -   [includes()](/BitSnack/includes/includes.md)
        -   [Object.entries()](/BitSnack/Object.entries/Object.entries.md)
        -   [Object.values()](/BitSnack/Object.values/Object.values.md)
        -   [Picture-in-picture](/BitSnack/pip/pip.md)
        -   [Promesas en JavaScript](/BitSnack/promises/promises.md)
        -   [V8 y el JavaScript Engine](/BitSnack/v8-js-engine/v8-js-engine.md)
        -   [var, let y const](/BitSnack/var-let-const/var-let-const.md)
        -   [Web Share](/BitSnack/web-share/web-share.md)

-   ### React

-   [Qué es y cómo funciona React](/BitSnack/react/react.md)
        -   [React Hooks](/BitSnack/react-hooks/react-hooks.md)

-   ### Otros
        -   [2020](/BitSnack/2020/2020.md)
        -   [4 sitios para mantenerse actualizado](/BitSnack/learn/learn.md)
        -   [4 técnicas para mejorar el performance](/BitSnack/performance/performance.md)
        -   [4 técnicas para mejorar el performance 2](/BitSnack/performance-2/performance-2.md)
        -   [5 Consejos para organizar tus objetivos](BitSnack/organization/organizacion.md)
        -   [6 Setups increíbles e inspiradores](/BitSnack/setups/setups.md)
        -   [8 fuentes para programar](/BitSnack/fonts/fonts.md)
        -   [8 paletas de colores que debes conocer](/BitSnack/color-palettes/color-palettes.md)
        -   [Comandos básicos para git](/BitSnack/git-commands/git-commands.md)
        -   [Conoce las expresiones regulares 01](/BitSnack/regExp/regExp.md)
        -   [Conoce las expresiones regulares 02](/BitSnack/regExp2/regExp2.md)
        -   [Conoce las expresiones regulares 03](/BitSnack/regExp3/regExp3.md)
        -   [Console](/BitSnack/console/console.md)
        -   [GraphQl](/BitSnack/graphql/graphql.md)
        -   [Ghost](/BitSnack/Ghost/Ghost.md)
        -   [Libros que debes de conocer](/BitSnack/books/books.md)
        -   [Mis Apps](/BitSnack/apps/apps.md)
        -   [Mis Apps 2](/BitSnack/apps-2/apps-2.md)
        -   [Mi Stack 2020](/BitSnack/stack-2020/stack.md)
        -   [Ruta para convertirse en Frontend Developer](/BitSnack/frontRoadmap/frontRoadmap.md)
        -   [srcset](/BitSnack/srcset/srcset.md)
        -   [Tipos de input en HTML](/BitSnack/html-inputs/html-input.md)
        -   [Tips para Chrome DevTools](/BitSnack/devTools/devTools.md)
        -   [VSCode (extensiones)](/BitSnack/vscode-extensions/VSCode-extensions.md)
        -   [VSCode (temas)](/BitSnack/vscode-theme/vscode-themes.md)
        -   [VSCode (temas 2)](/BitSnack/vscode-theme-2/vscode-themes-2.md)

-   ### [Posters](/posters/)
    -   ### CSS
        -   [Centrar elementos con CSS](/posters/css/flexbox/flexbox-center.png)
        -   [CSS Houdini](/posters/css/houdini/css-houdini.png)
        
    -   ### JavaScript
        -   [Características de ES2020](/posters/javascript/ES2020/ES2020.png)
        -   [Hoisting](/posters/javascript/hoisting/hoisting.png)
        -   [JavaScript Intro](/posters/javascript/intro/javascript.png)
        -   [Web APIs](/posters/javascript/webAPIs/webAPIs.png)

-   ### Otros
        -   [4 Sitios para practicar y mejorar como dev](/posters/others/learn/sites-learn.png)
        -   [Extensiones para VSCODE](/posters/vscode/vscode-extensions.png)
        -   [Personas fascinantes que debes conocer 01](/posters/others/creators/creators.png)
        -   [Personas fascinantes que debes conocer 02](/posters/others/creators/creators-02.png)

## ✨ 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](https://github.com/FiliSantillan/Bits/issues). 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](https://www.instagram.com/samanthaming/): 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](https://gist.github.com/teffcode)

## 📜 Licencia

![Creative Commons](https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-nc-nd.svg)

Este trabajo está bajo una licencia [CC BY-NC-ND 4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.es).

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](#aprende-algo-nuevo-hoy) para así llegar a más gente 😃 .

bits

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README