Personal collection of articles to study

Format of the articles:

mm/dd/yyyy (The day that I’ve read the article)’

• A link with Date that the post was made - Title of the article

  Brief description of what is written in the article;

---

Contents

• Self Learn
• JavaScript
• Tutorials
• Open Source
• Tools
• React
• Front End
• Blogs/Docs
• Accessibility
• Interview

Self Learn

12/21/2020:

• Stop Memorizing!: The #1 Advice I Wish Someone Would Have Told Me:

  Focus on learning problems-solving skills and practice algorithms and data structures;
  Do not fear google + copy and paste and learn to use keywords to find what you are looking for faster;
  Make your studying notes easy to go back when needed.
  

07/21/2024:

• May 01, 2024, You need to understand the business to design a good engineering strategy

  How to understand where you work to make decisions.
  

JavaScript

12/22/2020:

• JavaScript Cheatsheets Series’ Articles:

  JS Array Cheatsheet -> length; concat; join; slice; indexOf; lastIndexOf; map; sort; reverse; forEach; every; some; filter; shift; unshift; pop; push; splice;
  JS Math Cheatsheet -> abs; round; ceil; floor; max; min; pow; random; sqrt.
  

01/07/2020:

• Fastest Way of Passing State to JavaScript, Re-visited

  How and why parsing objects with <script type="mime/invalid"> can be faster than plain parse and JSON.parse
  

11/30/2024:

• Sep 20, 2024 - JavaScript Generators Explained, But On A Senior-Level

  Import JavaScript files from a script tag; Import libraries from CDNs; Installing external libraries locally; More about managing dependencies and other libraries/tools that might break.
  

01/19/2024:

• Nov 27, 2024 - Writing Modern JavaScript without a Bundler

  Streams - push and pull; Lazy and eager evaluation; Generators and its use cases;
  

Tutorials

• Introduction to Videogames and Emulators:

  9 Consoles Generations;
  Understanding Emulators;
  16 to 32-bits and Assembly to C;
  GPUs.
  

Open Source

12/25/2020:

• Don’t be scared, get started with Open Source as soon as possible

  Cool open source projects such as -> Kubernetes, TensorFlow and others;
  Helpful links to start contributing with OS projects.
  

Tools

12/28/2020:

• Tools and Resources Series’ Articles:

  Tools and resources to help developers;
  Twitter threads to help find jobs.
  

React

11/26/2023:

• Building a drawer component - Emil Kowalski

  Development of BottomSheet component on top of Radix.
  

12/09/2023:

• Sep 15, 2023 - How to create a React components ESM+CJS library

  How to create a component lib using typescript, react, and rollup. Builds for cjs, mjs, iife and umd.
  

01/14/2024:

• Nov, 2023 - Solid Principles in React / React Native

  How to use SOLID with React Native examples.
  

01/14/2024:

• Jan, 2024 - React Tricks: Fast, Fit and Fun

  Good ways to use React.cloneElement - Component composition Good examples of how react re-renders and ways to avoid it Uses for React.useState initializer function useEvent hook, similar to React.useCallback but stables the callback Uses for React.useSyncExternalStore, subscribing to external state
  

07/20/2024:

• May 17, 2020 - A (Mostly) Complete Guide to React Rendering Behavior

  Details of how React renders; Rules of React render; Reconciliation; Async render, Closures; Performance; Context.
  

08/01/2024:

• Jul 23, 2024 - How Airbnb Smoothly Upgrades React

  Upgrading react 16 to 18; Challenges doing it; Their system to migrate; How they test it; How they manage to make progressive releases.
  

01/01/2025:

• Aug 21, 2024 - Example of Using useSyncExternalStore with LocalStorage

  Example of how to synchronize a state between tabs.
  

01/05/2025:

• Dec 2, 2024 - How To Improve INP: React

  Examples of INP improvements on React apps, mainly with React 18 features: Concurrent React (startTransition, Suspense); Event handling; Abortable transitions; Portals.
  

Front End

12/01/2023:

• Nov 5, 2023 - Building modern Web Applications: 5 Essential Frontend Architecture Principles

  Principle 1: Async or defer load, consider the critical path;
  Principle 2: Tree-shake, consciously bundle and eliminate dead code;
  Principle 3: Define and respect a performance budget;
  Principle 4: Stick to the web platform APIs and web standards;
  Principle 5: Use new generation frontend frameworks.
  

12/02/2023:

• Nov 22, 2023 - An Interactive Guide to CSS Grid

  Teaches everything about CSS grid with embed code examples.
  

12/06/2023:

• Oct 24, 2023 - From Idea to Design for Non-Designers

  Goals;
  Inspiration;
  Layout;
  Colors;
  Typography;
  Buttons;
  Links;
  Putting It All Together.
  

04/26/2024:

• Mar 15, 2023 - 6 CSS snippets every front-end developer should know in 2023

  A container query;
  Scroll snap;
  Grid pile;
  Quick circle;
  Control variants with @layer;
  Memorize less and reach more with logical properties.
  

04/26/2024:

• Oct 24, 2023 - 5 CSS snippets every front-end developer should know in 2024

  CSS:has(.potential-beyond-being-a-parent-selector);
  Create a subgrid;
  Nest the CSS way;
  Let the browser balance headlines;
  Use container query units.
  

05/10/2024:

• Jan 21, 2024 - What is CSS Motion Path?

  How to elements with css using path; Animating svg paths; Animating texts along a path; Animating and moving an icon based on scroll.
  

07/07/2024:

• November 21, 2023 - The Perfect Theme Switch Component

  Simple way to change themes with minimal js.
  

07/07/2024:

• January 17, 2024 - A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

  Lots of examples;
  How to use scroll and animation css props;
  Creating an carousel with minimal js.
  
  

07/16/2024:

• February 21, 2024 - View transitions: Handling aspect ratio changes

  Animating text with view transitions.
  

07/20/2024:

• May 2, 2024 - Combining CSS :has() And HTML select For Greater Conditional Styling

  Uses of :has on forms; Example for required select; Example for entire page font size changes; Example for a theme picker,
  

07/25/2024:

• Jul 16, 2024 - Understanding SSR with Hydration: Pros, Cons, and Scenarios for Software Architects

  Explaining hydration; Shows use cases and project examples.
  

07/28/2024:

• July 16, 2024 - How to make complex Chrome extensions: a zero gravity guide

  How playbook developed their extension (chrome); Implementing auth, reading cookies; Interactive with web page; Publishing it.
  

08/04/2024:

• Aug 21, 2023 - Patterns for Reactivity with Modern Vanilla JavaScript

  PubSub Pattern (Publish Subscriber); Observer Pattern (Proxies, Signals, and others); Reactive Rendering of UI (String literals, MutationObserver, Web Components, Animations and Reactive css).
  

08/04/2024:

• Jul 29, 2024 - Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript

  Tips for More Efficient DOM Manipulation (Hiding/Showing over creating/deleting elements, textContent over innerText, insertAdjacentHTML over innerHTML); Examples of these approaches; Associating data to DOM with WeakMap to avoid memory leak (data garbage collected if the element is removed); Event delegation; AbortController API to remove multiple events; Profiling and Debugging.
  

08/04/2024:

• Jul 25, 2024 - The User Location is a Lie

  Ways to get user location; What not to do (i.e asking for location right when the content loads); Examples and strategies for some scenarios (Translation, Weather, etc).
  

10/23/2024:

• Jul 30, 2024 - Frontend Security Checklist

  Practical (React/Express) examples of how to secure frontend applications; XRSS: Sanitizing user input; CSP: Content Security Policy - Headers; CSRF: Using tokens generated by the server; IDOR: Insecure Direct Object Reference - Checking permissions on the server; Environment variables: Avoid hardcoding secrets;
  

03/07/2024:

• Nov 29, 2024 - If Not React, Then What?

  The Rule Of Least Client-Side Complexity; Know your user before choosing how to render and deliver content; Examples of type of applications and how to choose a rendering strategy; Refuting common arguments in favour of React; Also speaks a lot about common misconceptions about choosing React.
  

Blog/Docs

• Webkit newest blog posts

  Useful to keep up with safari updates; Blog posts very well written with lots of details and explanations; Safari features, Announcements, etc.
  

Accessibility

02/03/2024:

• Dec 7, 2020 - aria-label, aria-labelledby, and aria-describedby: What’s the Difference?

  How to use accessibility attributes, with practical examples.
  

• Apr 13, 2017 - Content Structure

  Web pages content structure: Articles, Sections, Lists, Quotes and Tables.
  

• Oct 19, 2021 - Alternative Text

  Useful practical examples of how to use alt texts.
  

• Dec 21, 2023 - The Top Accessibility Errors Found in 2023

  
  

Interview

02/05/2024:

• Sep 10, 2023 - Questions to ask your interviewer Coding; System Design; Behavioral; Lots of links and tips.
  

07/20/2024:

• Jan 18, 2016 - How to pass the interview for software engineering roles in Big Tech
  

05/12/2024:

• Jan 27, 2024 - How to hire low experience, high potential people

  Hiring new people; What to do on interviews.