Mia-Salazar / resources

A list of resources

Tech Resources

Una lists de recursos que me han resultado útiles. Están ordenadas por temática. En cada recurso viene marcado el idioma en el que está escrito y el tipo qué es.

Todos los recursos son gratuitos.

Accesibilidad

Inglés

• [EN] Artículo - Are we live?
• [EN] Artículo - More Accessible Skeletons
• [EN] Artículo - ACCESSIBLE LINKS: When to Use aria-label
• [EN] Artículo - 43 Browser Extensions to Perform Accessibility Testing Effectively
• [EN] Artículo - Accessible Icon Buttons
• [EN] Artículo - The digital gap: Accessibility and the elderly
• [EN] Artículo - WAI-ARIA Roles
• [EN] Artículo - A Developer’s Nightmare: Web Accessibility
• [EN] Artículo - How to build a more accessible carousel or slider
• [EN] Artículo - In Quest of Search
• [EN] Artículo - Semantic HTML: Survival Guideh
• [EN] Artículo - A 10-step approach to inclusive branding, using the BBC as an example
• [EN] Artículo - Stories of Web Users
• [EN] Artículo - Accessibility Beyond Compliance: What Baking Teaches Us
• [EN] Artículo - The problem with auto-generated alternative texts for images
• [EN] Artículo - How to build accessible main navigation?
• [EN] Artículo - Accessible Loading Indicators—with No Extra Elements!
• [EN] Herramienta - Generador de paletas accesibles
• [EN] Herramienta - Generador de paletas accesibles
• [EN] Herramienta - Accessibility testing
• [EN] Herramienta - Paletas accesibles
• [EN] Herramienta - Cool Contrast
• [EN] Herramienta - Checklist - The A11Y Project
• [EN] Herramienta - Accessible Button Contrast Generator
• [EN] Herramienta - Accessibility Not-Checklist
• [EN] Herramienta - Colorblindy
• [EN] Herramienta - Screen reader
• [EN] Herramienta - Checklist

Español

• [ES] Artículo - Ejemplo ARIA: Live Region
• [ES] Artículo - ARIA attributes: The forgotten ones of accessibility
• [ES] Artículo - Ocultar y mostrar elementos a los lectores de pantalla
• [ES] Artículo - Accesibilidad web: Navegación por teclado
• [ES] Artículo - Proyectos adaptados a personas con discapacidad visual
• [ES] Artículo - La importancia del color en la accesibilidad
• [ES] Artículo - ¿Sabes escribir un buen Alt-Text?
• [ES] Artículo - Declaración de accesibilidad
• [EN] Libro - Libro "Accesibilidad web. WCAG 2.1 de forma sencilla". Descarga gratuita.
• [ES] Vídeo - ¿Cómo testear la accesibilidad web en tu proyecto?
• [ES] Vídeo - EXPRESIONES REGULARES Desde Cero
• [ES] Vídeo - Por qué no puede haber SOLID sin Eventos de Dominio
• [ES] Vídeo - Javascript killed the Powerpoint star - T3chFest 2024
• [ES] Vídeo - Accesibilidad web: Guía para noobies - T3chFest 2024
• [ES] Vídeo - Perros robots como asistentes para personas invidentes o dependientes - T3chFest 2024

Arquitectura

Inglés

• [EN] Artículo - Tao of React - Software Design, Architecture & Best Practices

Español

• [EN] Vídeo - Clean Architecture: Los peligros del módulo Shared

Angular

Inglés

• [EN] Artículo - Component styles
• [EN] Artículo - Angular 11 Tutorial & Example — Upload Files with FormData, HttpClient, RxJS, and Material ProgressBar
• [EN] Artículo - Best Practices for Angular 13
• [EN] Vídeo - Remove unused Angular Material CSS (2020)
• [EN] Artículo - To Angular Material or not to Angular Material?

CSS

Inglés

• [EN] Artículo - Don't use @font-face in styled-components
• [EN] Artículo - A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH
• [EN] Artículo - The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
• [EN] Artículo - CSS Language Speak: Container vs Wrapper?
• [EN] Artículo - Ellipsis truncation and flexbox without a specific width
• [EN] Artículo - Why you should never use px to set font-size in CSS PUBLISHED: October 28, 2022
• [EN] Artículo - An Introduction to the fr CSS unit
• [EN] Artículo - The “Gray Dead Zone” of Gradients
• [EN] Artículo - The 30 CSS Selectors You Must Memorize
• [EN] Artículo - Reduce Angular style size (using PurgeCSS to remove unused styles)
• [EN] Artículo - 13 Beautiful Gradient Tools Every Web Designer Should Know
• [EN] Artículo - What The Heck, z-index??
• [EN] Artículo - CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained
• [EN] Artículo - Styling range input with CSS and JavaScript for better UX
• [EN] Artículo - Why you should never use px to set font-size in CSS
• [EN] Artículo - How camel-cased classes are way better than kebab-cased classes
• [EN] Artículo - CSS Specificity
• [EN] Artículo - CSS Container Queries
• [EN] Artículo - CSS functions
• [EN] Artículo - Proximity Glow Cards
• [EN] Artículo - When to use @extend; when to use a mixin
• [EN] Artículo - Use border-radius and outline simultaneously on Safari
• [EN] Artículo - :focus-within
• [EN] Artículo - Simplify Your Color Palette With CSS Color-Mix()
• [EN] Artículo - Attribute selectors
• [EN] Artículo - Using Flexbox and text ellipsis together
• [EN] Artículo - How to Hide Scrollbar and Visible Only Scrolling
• [EN] Herramienta - CSS filter generator to convert from black to target hex color
• [EN] Herramienta - Learn the CSS Grid!
• [EN] Herramienta - Librería de componentes con Tailwind
• [EN] Herramienta - Evitar cambio de classnames
• [EN] Herramienta - Generador de grandient text
• [EN] Herramienta - Generador de degradados con Tailwind
• [EN] Herramienta - Patrones para fondos
• [EN] Herramienta - A free visual guide to CSS
• [EN] Herramienta - Unique gradients
• [EN] Herramienta - 10 Modern CSS layout
• [EN] Herramienta - CSS Selectors: A Visual Guide
• [EN] Herramienta - Mastering CSS Grid
• [EN] Herramienta - Flex cheatsheet
• [EN] Herramienta - The most popular component library for Tailwind CSS
• [EN] Herramienta - Flexbox Patterns
• [EN] Herramienta - An Interactive Guide to CSS Grid

Español

• [ES] Artículo - Styled-components: ¿Amigo o enemigo?
• [EN] Artículo - Zelda Transición con perspectiva

Componentes

Inglés

• [EN] Artículo - Margin considered harmful
• [EN] Artículo - Creando mejores componentes

Cyberseguridad

Inglés

• [EN] Artículo - SQL Injection
• [EN] Artículo - The 6 types of Hat Hackers
• [EN] Artículo - Cybersecurity in front-end development.
• [EN] Artículo - What is Google Hacking?
• [EN] Artículo - What is the difference between Spam and Phishing?
• [EN] Artículo - Credit Card Fraud: What is and how can you prevent it?
• [EN] Artículo - Updates: why are they important for cybersecurity?
• [EN] Artículo - 9 tips to protect yourself from identity theft
• [EN] Artículo - 10 Cybersecurity tips for remote workers
• [EN] Artículo - 5 types of phishing and how to protect from them
• [EN] Artículo - Leaked credentials: the importance of employees awareness
• [EN] Artículo - Why are Data Leaks dangerous and how to prevent them?
• [EN] Artículo - Discover how to protect your company from web exposition with Kartos
• [EN] Artículo - The importance of maintaining the health of your DNS
• [EN] Artículo - The 9 most common types of malware and how to protect from them.

Español

• [ES] Artículo - ¿Qué es un honeypot?
• [ES] Vídeo - Vídeos sobre ciberseguridad

Front-end

Inglés

• [EN] Artículo - Microfrontends: Which Framework to Use?
• [EN] Herramienta - Improve your HTML and CSS skills by practicing on real design templates
• [EN] Herramienta - Improve your front-end coding skills by building real projects
• [EN] Herramienta - Frontend practice

Español

• [EN] Herramienta - Pruebas técnicas de Programación

Git

Inglés

• [EN] Artículo - git blame
• [EN] Artículo - Professional Git Workflow & GitHub Setup for (React) Developers (incl screencast)
• [EN] Artículo - Trunk-based Development vs. Git Flow
• [EN] Artículo - Git - How to fix a bad commit
• [EN] Artículo - How I teach Git
• [EN] Artículo - You have not concluded your merge (MERGE_HEAD exists)
• [EN] Artículo - All the Git Commands You Need to Know
• [EN] Artículo - How do you stash an untracked file?
• [EN] Artículo - Move existing, uncommitted work to a new branch in Git
• [EN] Herramienta - git-standup
• [EN] Herramienta - Juego para aprender Git

Español

• [ES] Artículo - Crear alias de comandos con git
• [ES] Artículo - ¿Cómo usar git cherry-pick sin morir en el intento?
• [ES] Libro - Aprendiendo Git

HTML

Inglés

• [EN] Artículo - Void elements
• [EN] Artículo - Void elements
• [EN] Artículo - HTML
• [EN] Artículo - inputmode
• [EN] Artículo - A free guide to HTML
• [EN] Artículo - Is there any way to prevent input type="number" getting negative values?
• [EN] Artículo - HTML5: ¿Cuál es la forma correcta de poner negritas? ¿strong, b o "font-weight"?
• [EN] Herramienta - HTML validator
• [EN] Herramienta - HTML5 Element Flowchart
• [EN] Herramienta - Can I use (with HTML)
• [ES] Artículo - Guía responsive image: Los atributos srcset y sizes y las bases de selección: art direction, dpi y tamaños

Español

• [ES] Artículo - ¿Cuáles son las diferencias entre los atributos disabled y readonly de los campos de texto de los formularies?
• [ES] Artículo - Etiquetas de HTML Semántico?

IA

Inglés

• [EN] Herramienta - AI Voice Generator and Text to Speech
• [EN] Herramienta - Talk with internet
• [EN] Herramienta - Free AI photos. Realistic human models. Your own products.
• [EN] Herramienta - Text in. Audio out
• [EN] Herramienta - Generate images

Javascript

Inglés

• [EN] Artículo - Understanding JavaScript Prototypes
• [EN] Artículo - How do I copy to the clipboard in JavaScript?
• [EN] Artículo - How to Use the Web Share API
• [EN] Artículo - URLSearchParams
• [EN] Artículo - Javascript. Constantes y enumerados
• [EN] Artículo - Optional chaining (?.)
• [EN] Artículo - Falsy
• [EN] Artículo - Buscar: getElement*, querySelector*
• [EN] Artículo - Return Early Pattern
• [EN] Artículo - What reason is there to use null instead of undefined in JavaScript?
• [EN] Artículo - Nullish Coalescing vs OR - JavaScript operators (?? vs ||)
• [EN] Artículo - Regular Expressions: Now You Have Two Problems
• [EN] Artículo - How to use the Dev.to API in 2022
• [EN] Artículo - Everything You Need to Know About Cookies for Web Development
• [EN] Herramienta - Getting Better at Regular Expressions with 3 Games

Español

• [ES] Artículo - ¿Qué diferencia async y defer en JavaScript?
• [ES] Artículo - Métodos de Promesa en JavaScript
• [ES] Artículo - ¿Qué es el hoisting?
• [ES] Artículo - Tipos de console
• [ES] Artículo - Propagación y captura
• [ES] Artículo - CÓMO TRABAJAR CON FECHAS EN JAVASCRIPT
• [ES] Vídeo - 21. CLAUSURAS (Closures) EN JAVASCRIPT
• [ES] Vídeo - JSDayES 2018 - Pablo Magaz - "Escribiendo Service Workers con Workbox"

PHP

Inglés

• [EN] Artículo - Optimizing PHP applications for performance
• [EN] Artículo - Login with Google using JavaScript and PHP

Español

• [EN] Artículo - PHP y la función header(location: )
• [ES] Artículo - Cabeceras HTTP en PHP para permitir el acceso CORS
• [EN] Artículo - PHP: ¿Cuál es la diferencia entre bindParam() y bindValue() en PDO?

React

Inglés

• [EN] Artículo - How to solve the "update was not wrapped in act()" warning in testing-library-react?
• [EN] Artículo - Publish a React app with FTP
• [EN] Artículo - React Snapshot Testing: The Bad Parts
• [EN] Artículo - Handling undefined in React Query and Typescript
• [EN] Artículo - Aprende Cómo Aplicar los Principios SOLID en React JS
• [EN] Artículo - A Guide to React Context and useContext() Hook
• [EN] Artículo - What is prop drilling and how to avoid it ?
• [EN] Artículo - The Most Powerful React JS Cheat Sheet
• [EN] Artículo - JavaScript to Know for React
• [EN] Artículo - How to Import SVGs in a React and Vite app
• [EN] Artículo - Next.js vs React: What are the differences?
• [EN] Artículo - Conditional hooks?
• [EN] Artículo - How to create sticky headers on scroll with react
• [EN] Artículo - React Query - useMutation
• [EN] Artículo - Avoiding flash of unwanted animation on first render in React
• [EN] Artículo - Theming React Components with CSS Variables
• [EN] Artículo - How To Structure React Projects From Beginner To Advanced
• [EN] Artículo - Controlled and uncontrolled form inputs in React don't have to be complicated
• [EN] Artículo - Difference between PropTypes.exact and PropTypes.shape
• [EN] Herramienta - React Dev Tools
• [EN] Herramienta - Create React Content Loader
• [EN] Herramienta - Story Explorer Visual Studio Extension
• [EN] Vídeo - React typing animation with hooks

Español

• [ES] Artículo - ¿Y eso del Virtual DOM de React qué es?
• [ES] Artículo - React Testing Library, ¿cómo testear componentes con y sin hooks?
• [ES] Artículo - Lifting - Datos de Hijos a Padres
• [ES] Artículo - useAxios: A React Hook for using Axios
• [ES] Vídeo - Aprendiendo NextJS, el framework de React con Server Side Rendering
• [ES] Vídeo - ¿Qué es JSX? Todo lo que necesitas saber
• [ES] Vídeo - React Query - Estado asíncronos con superpoderes

SQL

Inglés

• [EN] Artículo - How to select first 10 elements from database using SQL?
• [EN] Artículo - Empty string vs NULL

Testing

Inglés

• [EN] Artículo - Mockist vs Classical testing strategy
• [EN] Artículo - Jest / Enzyme - How to test at different viewports?
• [EN] Artículo - Migrate from Jasmine to Jest and Testing Library in Angular
• [EN] Artículo - How to run, ignore or skip Jest tests, suites and files
• [EN] Artículo - Using the debug method
• [EN] Artículo - Common mistakes with React Testing Library
• [EN] Artículo - Write fewer, longer tests
• [EN] Artículo - How to change default language Chromium/Firefox using Playwright?
• [EN] Artículo - Fast and easy authentication with Playwright
• [EN] Artículo - Cypress vs Playwright: Which is best for E2E testing?
• [EN] Artículo - Migrating from Cypress to Playwright
• [EN] Artículo - Playwright Select First or Last Element
• [EN] Herramienta - Generador datos falsos
• [EN] Herramienta - Testing Playground

Español

• [ES] Artículo - Playwright: Primeros pasos y ejemplos de uso
• [ES] Vídeo - Guía Definitiva: Aprende Cómo Crear Jest Mock Tutorial Fácil y Sin dolor [Functions, Methods, etc]
• [ES] Vídeo - Aprende Tests End to End con Playwright y Debbie O'Brien [miduConf]

Typescript

Inglés

• [EN] Artículo - Typescript strict
• [EN] Artículo - unknown vs any in TypeScript
• [EN] Herramienta - Librerías tipadas
• [EN] Herramienta - TypeScript Style Guide

Español

• [ES] Artículo - Typescript para desarrolladores de Angular
• [ES] Artículo - Patrones de diseño Typescript

UX/UI

Inglés

• [EN] Artículo - 10+ Resources for recreating old school & retro user interfaces today!
• [EN] Artículo - [Responsive Grid Design: Ultimate Guide]https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892)
• [EN] Artículo - Why icomoon, why?
• [EN] Artículo - Selección de fuentes que van bien juntas
• [EN] Artículo - How to use chatGPT for UI/UX design: 25 examples
• [EN] Artículo - How to use chatGPT for UI/UX design: 25 examples
• [EN] Libro - Design systems guide
• [EN] Herramienta - Generador de paletas de colores
• [EN] Herramienta - Generador de logos
• [EN] Herramienta - Buttons Generator
• [EN] Herramienta - Biblioteca de iconos Open Source
• [EN] Herramienta - Wireframe, Diagram & Whiteboard Online
• [EN] Herramienta - Analyze fonts
• [EN] Herramienta - Inspiración
• [EN] Herramienta - Saber más de una tipografía
• [EN] Herramienta - CSS Patterns
• [EN] Herramienta - Theme toggles
• [EN] Herramienta - CSS Gradient Genrator
• [EN] Herramienta - Animations
• [EN] Herramienta - Spinners
• [EN] Herramienta - Font pairing made simple
• [EN] Herramienta - Super duper SVG Doodles
• [EN] Herramienta - The good line-height
• [EN] Herramienta - Font playground
• [EN] Herramienta - Generador de tonos y matices
• [EN] Herramienta - Probar matices de color en una interfaz
• [EN] Herramienta - Escalas proporcionales de tipografía
• [EN] Herramienta - SVG a personalizar
• [EN] Herramienta - SVG logos
• [EN] Herramienta - Explorar colores
• [EN] Herramienta - CSS Gradient Generator
• [EN] Herramienta - Implementing theme toggles was never easier
• [EN] Herramienta - Fluid Type Scale Calculator
• [EN] Herramienta - CSS Section Separator Generator
• [EN] Herramienta - Modern fluid typography editor
• [EN] Herramienta - Free AI - Text prompt to SVG
• [EN] Herramienta - Golden Ratio Typography (GRT) Calculator

Español

• [ES] Artículo - Cómo hacer el handoff UX al equipo de desarrollo
• [ES] Presentación - ¿Qué hay de nuevo en la Web UI?

Otros

Recursos y herramientas que no se pueden clasificar en las anteriores categorías

MUJERES guays

Mujeres que inspiran y a las que admiro

• Alba Silvente Fuentes
• Alena Nikolaeva
• Ariane Jurado
• Azahara Fernández Guizán
• Belén
• Carmel Hassan Montero
• Carmen Ansio
• Carolina Arjona Soler
• Concha Asensio
• Cris
• Cris Pampín
• Debbie O'Brien
• Desiré
• Diana Aceves
• eMe
• Erica Aguado
• Jimena Bermúdez
• Kaky Rodríguez Petrella
• María Barrios
• María Ozámiz
• Marina Aísa
• Miriam González
• Natalia Venditto
• Nerea Luis
• Núria
• Patty O'Callaghan
• Sophie Alpert
• Soraya
• Silvia
• Tasia
• Valeria Castro
• Yodra López

Cursos gratuitos

Inglés

• [EN] Diferentes lenguages
• [EN] Accesibility
• [EN] Accesibilidad
• [EN] Accesibilidad
• [EN] CSS
• [EN] CS50's Introduction to Cybersecurity
• [EN] Full stack bootcamp
• [EN] HTML
• [EN] JavaScript
• [EN] JavaScript
• [EN] JavaScript Testing
• [EN] JavaScript Algorithms and Data Structures
• [EN] Javascript ES6
• [EN] PHP
• [EN] (New) Responsive Web Design
• [EN] Responsive Web Design Fundamentals
• [EN] SQL
• [EN] SQL
• [EN] SVG
• [EN] SVG
• [EN] Tailwind
• [EN] Typescript
• [EN] Version Control with Git
• [EN] Web Accessibility
• [EN] Google Cybersecurity Professional Certificate
• [EN] Python Game

Español

• [ES] React Query
• [ES] Python
• [ES] Gut
• [ES] Google Activate: Cursos gratuitos de competencias digitales
• [ES] C#
• [ES] Accesibilidad

Herramientas

Inglés

• [EN] Convertir texto en caligrafía
• [EN] Convert Images to Ascii Art

Útil

Inglés

• [ES] Artículo - GIT vs SVN – ¿Cuáles son las principales diferencias?
• [ES] Artículo - WTF is SRE? The job nobody understands.
• [ES] Artículo - 21 AI Tools that are changing the World
• [EN] Artículo - The Clean Architecture
• [EN] Artículo - Simulate slow 3G network speed with Chrome DevTools
• [EN] Artículo - Análisis de Core Web Vitals
• [EN] Artículo - How DNS works
• [EN] Artículo - How do we control web page caching, across all browsers?
• [EN] Artículo - How to do a GOOD technical onboarding
• [EN] Artículo - CORS Enabled
• [EN] Artículo - Learn about CPU
• [EN] Artículo - Naming Standards for Browser Cookies
• [EN] Artículo - How to redirect HTTP to HTTPS Using .htaccess
• [EN] Artículo - Geolocation getCurrentPosition() Method
• [EN] Artículo - SOLID: The First 5 Principles of Object Oriented Design
• [EN] Artículo - How to Structure CSS in Vue Like a Pro
• [EN] Artículo - Manage global state with Recoil.js
• [EN] Libro - Patrones
• [EN] Herramienta - The very first escape game for coders and non-coders
• [EN] Herramienta - Remote jobs
• [EN] Herramienta - Coste añadir paquete npm
• [EN] Herramienta - Type JSON
• [EN] Herramienta - DevChallenges
• [EN] Herramienta - 300+ FREE APIs Every Developer Needs to Know
• [EN] Herramienta - iterview warmup
• [EN] Herramienta - No web without women
• [EN] Herramienta - npm trends
• [EN] Herramienta - Open source browser tools for everyday use
• [EN] Herramienta - URL Throttler, endpoint simulator
• [ES] Vídeo - How To Manage Translations For Your Application | Crowdin & GitHub Tutorial
• [ES] Vídeo - Por qué es importante saber comunicar bien, por Raquel Lainde en Tech SHEssions 2020
• [ES] Vídeo - Tips & Trics: Cómo hacer que tu CV enamore
• [ES] Vídeo - ¿Para qué sirve la física? - T3chFest 2024
• [ES] Vídeo - Mánu Fosela: Liderar no es coser y cantar.

Español

• [ES] Artículo - La primera mujer del videojuego español
• [ES] Artículo - 3.1. La arquitectura de un browser
• [ES] Artículo - Querido/a Junior: el sector tech post-pandemia
• [ES] Artículo - Cómo dar soporte a IE y no morir en el intento
• [ES] Artículo - Cómo escribir documentación ÚTIL
• [ES] Artículo - Optimizar tu GitHub y CV para pasar la revisión técnica
• [ES] Artículo - Derecho laboral para dummies
• [ES] Artículo - Copyright, Copyleft y Creative Commons ¿Cómo se diferencian?
• [ES] Artículo - Arrays de provincias en España
• [ES] Artículo - Crear métricas en Google Analytics 4
• [ES] Herramienta - Elementary OS, el Linux parecido a macOS muy seguro y rápido
• [ES] Herramienta - Step4ward mentoras
• [ES] Vídeo - Teresa Lobo - Testeando la caja de Schrödinger: QA para sistemas de ML
• [ES] Vídeo - ¿Redux no te convence? Descubre Recoil y dale una vuelta a tu app #React
• [ES] Vídeo - Aprender a aprender mejor
• [ES] Vídeo - Developers y demás parientes | T3chFest 2019
• [ES] Vídeo - VISUAL STUDIO CODE: Tutorial para principiantes
• [ES] Vídeo - Las 15 MEJORES EXTENSIONES para VSCODE
• [ES] Vídeo - Sororidad práctica: estrategias y tácticas que contrarrestan la discriminación inconsciente
• [ES] Vídeo - "Superando a Murphy: qué hacer cuando todo sale mal" por María Fernández
• [ES] Vídeo - Storytelling: El arte de deleitar a tu audiencia, por Ester de Nicolás
• [ES] Vídeo - Fighting: el síndrome del impostor, por Laura Lacarra.
• [ES] Vídeo - Internet ha muerto: ¿realidad o ficción digital? - T3chFest 2024
• [ES] Vídeo - ¿Cómo se programa el tiempo? La increíble historia del calendario y el software - T3chFest 2024

368 - Actualización 29/06/2023