Curated list of links

Everytime I find a new resource and think I might need it in the future, it gets added to this list. I hope it can help you as much as it helps me.

Table of content

• Developer toolbox

  • Shell
  • Git / GitHub
  • Package managers
  • Web development tools

• Programming languages

  • JavaScript

  • TypeScript

  • Reason

  • HTML

    • Semantics
    • HTML accessibility

  • CSS

    • CSS base features
    • Flexbox
    • Grid
    • Transitions / Animations
    • Data visualization
    • Cool demos
    • SCSS
    • CSS Modules
    • CSS-in-JS
    • JS-in-CSS (because why not)
    • Other CSS frameworks
    • Common CSS bugs

• Frameworks

  • NodeJS
  • React
  • React Native
  • Native Mobile Development

• React frameworks

  • Gatsby.js
  • Next.js
  • Astro
  • Electron
  • Browser extensions

• State management libraries

  • Redux
  • Recoil
  • GraphQL
  • Apollo client
  • Apollo server
  • SWR

• Animations libraries

  • D3.js
  • Framer Motion
  • React-spring
  • React-native-reanimated

• Code quality

  • Linters

    • Eslint

  • Test frameworks

    • Jest
    • Cypress

• Bundling

  • Bundlers

    • Webpack
    • Rollup
    • Parcel

  • Transpilers and optimizers

    • Babel
    • Prepack

• Hosting providers

  • Netlify
  • Vercel

• Continuous development platforms

• SaaS useful to front-end developers

  • BaaS (Back-end as a service)

    • AWS Amplify
    • Google Firebase
    • Supabase
    • Prisma

• CMS

  • Strapi

• Website generators

  • Styleguide generators

    • Styleguidist
    • Storybook

  • Documentation generators

  • Presentation generators

• Design systems

• Advanced concepts

  • State machines

  • Server Side Rendering

    • SSR Boilerplates
    • SSR Frameworks

  • Performance

    • Illusion of speed
    • Big picture performance
    • Network performance
    • Images performance
    • Fonts performance
    • CSS performance
    • JavaScript performance
    • React performance
    • Core Web Vitals
    • Progressive Web Apps
    • Performance case studies
    • Performance benchmarks

  • SEO

  • Security

  • Web3

• Misc. tools

  • Images, videos, assets, colors, fonts

  • Productivity

  • Mock APIs

  • Regex testers

  • IDEs

    • Visual Studio Code
    • Online IDEs

  • Design tools

    • Sketch
    • Framer X

  • Presentation tools

  • File sharing

• Developer insights

  • Software insights

  • Product insights

  • Being a developer

  • Being a Staff-Plus Engineer

  • Technical decision making

  • Engineering strategies

  • Leadership / Mentoring / Teaching

  • Management

  • Career ladders

  • OSS

  • Remote working

  • Communicating

  • Writing documentation

  • Writing articles

  • Speaking at events

  • Job interviews

  • Coding interviews

  • Resumes

  • Compensation

  • Startups

  • Freelance

    • Freelance advice
    • Job hunting / Freelancing (mainly for French people)

• Personal achievements

  • Talks

• Personal links

Developer toolbox

Shell

• tldr pages - Simplified and community-driven man pages
• Explainshell - Write down a command-line to see the help text that matches each argument
• ShellCheck - VSCode extension
• Shell-format - VSCode extension
• Cheat - Cheat allows you to create and view interactive cheatsheets on the command-line
• Crontab guru - The quick and simple editor for cron schedule expressions

Git / GitHub

• Git flight rules - Flight rules for git
• Tell Me When it Closes - Get only 1 email when an issue or PR closes
• GitHub Contributions Chart Generator
• 8 Productivity Tips for GitHub
• Creating the Perfect Commit in Git
• GitHub code search
• Oh Shit, Git!?!
• Ignoring mass reformatting commits with git blame

Package managers

Principles

• The Basics of Package.json
• Dependency Managers Don’t Manage Your Dependencies
• monorepo.tools - Everything you need to know about monorepos, and the tools to build them.
• Monorepos in JavaScript & TypeScript

Yarn 1

• Running Yarn offline
• Welcome to JS Dependency Hell
• Creating a Monorepo with Lerna & Yarn Workspaces
• Yarn-deduplicate - Cleans up yarn.lock by removing duplicates
• Yarn Lock Changes - Creates a comment inside Pull Request with the human-readable summary of changes to the Yarn lock file

Yarn 3

• Migrating our Monorepo to Yarn 2
• Migration to Yarn 3
• Yarn 3.1: Corepack, ESM, pnpm, Optional Packages, ...
• Yarn Plug'n'Play
• Yarn patch-commit - Patch-package built into Yarn 3

Tools

• Path-package - Fix broken node modules with no fuss
• Npkill - List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space
• Npm semver calculator
• Visualization of npm dependencies
• pkg - Package your Node.js project into an executable
• Bundlephobia - Find the cost of adding a npm package to your bundle
• Packagephobia - Find the cost of adding a new dev dependency to your project
• Depcheck - Check your npm module for unused dependencies
• Release - Minimalistic, opinionated, and predictable release automation tool
• The Perfect Development Environment - by Christoph Nakazawa

Web development tools

• How to Simulate Mobile Devices with Device Mode in Chrome
• Eruda - Console for Mobile Browsers
• OutFrontJS - Console for mobile browsers
• Browserslist - A page to display compatible browsers from browserslist string

Programming languages

JavaScript

Documentation / News 📚

• Mozilla re-introduction to JavaScript
• EcmaScript 6 Features
• Asynchronous JS Cheatsheet
• Flavio Copes JavaScript tutorials

Concepts / Articles 💡

JavaScript features

• Modern Javascript: Everything you missed over the last 10 years (ECMAScript 2020)
• ES6: Default Arguments
• Taming the asynchronous beast with ES7
• Property order is predictable in JavaScript objects since ES2015
• Working With Strings in Modern JavaScript
• The triple dot syntax (...) in JavaScript: rest vs. spread
• When You Should Prefer Map Over Object In JavaScript

JavaScript patterns

• A Beginner’s Guide to Currying in Functional JavaScript
• Awesome one-liners you might find useful while coding
• The shortest way to conditional insert properties into an object literal
• Applying a timeout to your promises
• Listify a JavaScript array
• 9 single-statement JS algorithms for common data transformations
• Refactoring cascading conditionals in favor of readability
• Naming-cheatsheet - Comprehensive language-agnostic guidelines on variables naming
• A Visual Guide to References in JavaScript

Functional / Declarative programming

• Imperative vs Declarative Programming
• JavaScript Without Loops
• How I rediscovered my love for JavaScript after throwing 90% of it in the trash

Others

• The increasing nature of frontend complexity
• Contrarian idea: JS doesn't move too fast - Twitter thread
• This year in JavaScript: 2018 in review and npm’s predictions for 2019
• You don't need MomentJS - List of date-fns or native functions which you can use to replace moment.js + ESLint Plugin
• Is postMessage slow?
• JavaScript Pass By Value Function Parameters
• End-to-End Encryption in the Browser
• How To Use Vibration API In Your Website
• Browsers decode images differently
• A Proposal For Type Syntax in JavaScript

Related tools 🛠️

• Operator Lookup - Enter a JavaScript operator to learn more about it
• DOM Events - Learn about the DOM Event system through exploration
• Does it mutate? - Learn which functions of the language mutate and which do not
• Airbnb JavaScript styleguide
• Hasty - JS performance measurement tool

Useful libraries 💾

• Tippy.js - A highly customizable vanilla JS tooltip & popover library
• NProgress.js - A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening
• Guess.js - Libraries & tools for enabling Machine Learning driven user-experiences on the web
• Progress-estimator - Logs a progress bar and estimation for how long a Promise will take to complete
• Quicklink - Faster subsequent page-loads by prefetching in-viewport links during idle time
• FBT - An internationalization framework by Facebook
• Date-fns - Modern date utility library
• Date-fns-tz - Complementary library for date-fns v2 adding IANA time zone support
• PullToRefresh.js - A small, but powerful JavaScript library crafted to power your webapp's pull to refresh feature
• Exponential-backoff - A utility that allows retrying a function with an exponential delay between attempts
• party.js - A JavaScript library to brighten up your user's site experience with visual effects!
• WinBox.js - Professional HTML5 window manager for the web
• Zx - A tool for writing better scripts
• Elementary - Finally, write audio apps in JavaScript
• Yare - Real-Time Strategy game where you control your units by writing JavaScript code
• Smartcrop.js - Content aware image cropping
• Xterm.js - A terminal for the web
• Lite-youtube-embed - A faster youtube embed
• Lax.js - Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll

TypeScript

Documentation / News 📚

• TypeScript docs
• TypeScript Evolution
• TypeScript Deep Dive
• TypeScript and Babel 7

Concepts / Articles 💡

• Understanding TypeScript’s type notation
• The TypeScript Tax - A Cost vs Benefit Analysis
• The unknown Type in TypeScript
• Understanding TypeScript Generics
• Starting a TypeScript Project in 2021
• Covariance and Contravariance in TypeScript
• 6 ways to narrow types in TypeScript
• A Complete Guide To TypeScript’s Never Type
• How not to learn TypeScript
• TypeScript: Array.includes on narrow types
• TypeScript: Low maintenance types
• Tidy TypeScript: Prefer type aliases over interfaces
• TypeScript: Improving Object.keys
• TypeScript: Type predicates
• TypeScript: Match the exact object shape
• Notes on Advanced TypeScript: Transforming Types
• Notes on Advanced TypeScript: Runtime Validations
• How to convert an array into string literal union type in TypeScript?

Migration stories 📖

• DevTools architecture refresh: migrating DevTools to TypeScript
• Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript
• The continual evolution of Airtable’s codebase: Migrating a million lines of code to TypeScript
• Etsy’s Journey to TypeScript
• Migrating millions of lines of code to TypeScript

Related tools 🛠️

• TypeScript Playground
• Type challenges
• Typescript-cheatsheet - A list of typescript helper libraries
• New ESLint / TypeScript Configuration
• TypeScript errors and how to fix them

Useful libraries 💾

• React-javascript-to-typescript-transform - Convert React JavaScript code to TypeScript with proper typing
• Flow2ts - Flow declarations to TypeScript declarations transpiler
• Typedoc - Documentation generator for TypeScript projects
• Type-fest - A collection of essential TypeScript types
• Ts-pattern - An exhaustive Pattern Matching library for TypeScript, with smart type inference
• Tsm - TypeScript Module Loader
• Ts-toolbelt - TypeScript's largest type utility library

Reason

• ReasonML docs
• Reason React Playground

HTML

Semantics

• HTML & CSS is hard - Course to learn HTML & CSS
• Understanding why Semantic HTML is important, as told by TypeScript
• On the
• CanInclude - This site helps you understand which tag you can include in another

HTML accessibility

• Practical ARIA Examples

Others

• htmlq - Like jq, but for HTML.

CSS

CSS base features

• Pseudo-classes MDN docs
• Margin or padding?
• Float labels with CSS
• Don’t Use The Placeholder Attribute
• Keys to maintainable CSS: Order
• 4 reasons your z-index isn’t working (and how to fix it)
• Overflow In CSS
• What the heck, z-index??
• Diving into the ::before and ::after Pseudo-Elements
• Did You Know About the :has CSS Selector?
• Sticky Headers: 5 Ways to Make Them Better
• A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors
• CSS Tips - CSS tips and tricks you won’t see in most of the tutorials
• Practical CSS Scroll Snapping
• Easing Gradients
• You want enabling CSS selectors, not disabling ones

Others

• "last 2 versions" considered harmful
• How to force restart any iOS device with just CSS? - Twitter thread
• CSS hack to show elements depth on a page
• Avoiding jagged edges on gradients
• The Just in Case Mindset in CSS
• Thoughts on CSS frameworks and stylized component libraries - From Josh Comeau's newsletter
• Lightning CSS - An extremely fast CSS parser, transformer, bundler, and minifier

Flexbox

• Flexbox Zombies - Free course on flexboxes
• Flex Box Adventure - Free course on flexboxes
• Test CSS Flexbox Rules

Grid

• Grid critters - Free course on grid
• CSS Grid Layout Interface

Transitions / animations

• 10 principles for smooth web animations
• How to create fancy revealing animations with these simple CSS tricks
• Lottie
• Lottie Files - An online community to find, test, and share striking animations
• The ultimate guide to proper use of animation in UX
• An Interactive Guide to CSS Transitions
• A whimsical twist on hover transitions
• Transition.css - Drop-in CSS transitions

Data visualization

• Charts.css - CSS data visualization framework

Cool demos

• Moving letters
• Single element CSS spinners
• 30 Seconds of CSS
• Responsive animated progress bar to donut
• CSS Stripes Generator
• CSS Gradient
• Keyframes - Dead simple visual tools to help you generate CSS for your projects
• CSS Accordion Slider Generator
• Cube Life - The game of life on a cube
• ui.wtf
• The Hero Generator - Hero cover generator
• CSS Separator Generator
• Awwwards - The awards of design, creativity and innovation on the internet

SCSS

• Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
• Linting SCSS files with settings for orders in logical chunks
• Where is the source of Autoprefixer data? - Twitter thread
• Sass migrator - Programatically migrate to the newest SASS patterns

CSS Modules

• CSS Modules
• CSS Modules - Welcome to the future

CSS-in-JS

• Stop using CSS in JavaScript for web development
• A Unified Styling Language
• Emotion - The Next Generation of CSS-in-JS
• Announcing Emotion 10!
• Linaria - Zero-runtime CSS in JS library
• Treat - Themeable, statically extracted CSS‑in‑JS with near‑zero runtime
• vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
• Sprinkles - Zero-runtime atomic CSS framework for vanilla-extract

JS-in-CSS (because why not)

• React-native-css-modules - Use CSS modules in React Native
• React-native-sass-transformer - Load Sass files to react native style objects

Other CSS frameworks

• Why Tailwind Isn't for Me

Common CSS bugs

• Internet Explorer Hacks

Frameworks

NodeJS

• Node.js - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine
• Node best practices - The largest Node.JS best practices list. Curated from the top ranked articles and always updated
• Super Simple Start to ESModules in Node.js
• fnm - Fast and simple Node.js version manager, built in Rust
• Corepack

Deno

• Deno - A secure runtime for JavaScript and TypeScript

React

Documentation / News 📚

• React docs
• Behind the Scenes: Improving the Repository Infrastructure - React 16 release retrospective
• Sneak Peek: Beyond React 16
• Update on Async Rendering
• You Probably Don't Need Derived State
• Introducing Hooks
• Versioning Policy
• React 16.x Roadmap
• Building the New facebook.com with React, GraphQL and Relay
• What's new in react 18?
• React 18

Concepts / Articles 💡

React prerequisites

• JavaScript to Know for React
• Typescript-cheatsheets-react - Cheatsheets for experienced React developers getting started with TypeScript

React functional components & hooks

• React Stateless Functional Components: Nine Wins You Might Have Overlooked
• Making Sense of React Hooks
• A Simple Intro to React Hooks
• When to useMemo and useCallback
• How to implement useState with useReducer
• The State Reducer Pattern with React Hooks
• React hook flow diagram

React patterns

• Presentational and Container Components
• React-bits - React patterns, techniques, tips and tricks
• Reusable State with Higher Order Components
• Headless User Interface Components
• Using Composition and Render Props instead of Context API
• The Suspense is Killing Redux
• Avoiding unnecessary renders with React context
• Guide To Async Components
• Lazy-loading components in React 16.6
• Lazy loading (and preloading) components in React 16.6
• How to use React Context effectively
• How to optimize your context value
• Authentication in React Applications
• One simple trick to optimize React re-renders
• Fix the slow render before you fix the re-render
• State Colocation will make your React app faster
• Don't Sync State. Derive It!
• Understanding React's key prop
• The Latest Ref Pattern in React
• How and when to debounce or throttle in React
• Josh W. Comeau's snippets - Short solutions to discrete problems which can be copied and pasted
• Good advice on JSX conditionals
• When to break up a component into multiple components
• React Children: The misunderstood prop
• Avoiding useEffect with callback refs
• Why React Re-Renders
• Understanding useMemo and useCallback

Others

• What is React: A Visual Introduction For Beginners
• The React Handbook
• Profile a React App for Performance
• How Concurrent React changes the game for data-heavy UI
• Don't call a React function component
• Initializing focus state in React: you might be doing it wrong
• The Fault in Our Tolerance: Accounting for Failures in React
• Stop using client-side route redirects
• Everything About React Server Components
• Why I Love React by Kent C. Dodds
• Memoization and React
• React 18 Alpha is out! Now what?
• Not All Components Are Created Equal
• When is onChange not the same as onChange?
• Virtual DOM is pure overhead

Related tools 🛠️

• Lifecycle Simulators
• Use React DevTools - Youtube
• Create-react-app - Create React apps with no build configuration
• React-codemod - React codemod scripts
• SVGR : The SVG to JSX transformer

Useful libraries 💾

• React components & libraries
• JS.coach
• Awesome-react-render-props - Awesome list of React components with render props
• React-dnd - Drag and Drop for React
• React-beautiful-dnd - Beautiful, accessible drag and drop for lists with React.js
• React-trend - Simple, elegant spark lines
• React-perimeter - Create an invisible perimeter around an element and respond when its breached
• React-blur-image-loader - Blurred progressive image loader for React
• React-log - React for the Console
• React-mosaic - A React tiling window manager
• React-detect-offline - Offline and Online components for React
• Upload - Higher order React components for file uploading (with progress) react file upload
• React-markings - Markdown in <Components/>, <Components/> in Markdown
• React-slidez - React Slideshow Component
• React-virtualised - React components for efficiently rendering large lists and tabular data
• React-reveal - Easily add reveal on scroll animations to your React app
• React-ab-test - A/B testing React components and debug tools. Isomorphic with a simple, universal interface
• React-component-benchmarl - A component to help benchmark React components and their trees
• React-chartkick - Create beautiful JavaScript charts with one line of React
• React-flip-move - Effortless animation between DOM changes (eg. list reordering) using the FLIP technique
• React-show - React-Show - A 3kb show/hide component for React
• React-preload - Preload a React component tree in the background before rendering it
• React-fns - React Components for common Web APIs
• Immer - Create the next immutable state by mutating the current one
• React-window - React components for efficiently rendering large lists and tabular data
• React-flip-toolkit - A React FLIP animation helper library for highly configurable transitions
• Css-suspense - CSS loading for react
• React-filepond - A handy FilePond (file uploader) adapter component for React
• React-credit-cards - Beautiful credit cards for your payment forms
• Loadable-components - React code splitting made easy
• React-lazyload - Lazy load your component, image or anything matters the performance
• React-waypoint - A React component to execute a function whenever you scroll to an element
• React-rewards - Reward your users for little things and make them smile!
• React-content-loader - SVG component to create placeholder loading, like Facebook cards loading
• React-table - A lightweight, fast and extendable datagrid for React
• React-chaos - Chaos Engineering for your React apps
• Remotion - Create motion graphics in React
• Vocab - Strongly typed internationalization framework for React
• React-hook-form - Performant, flexible and extensible forms with easy-to-use validation
• React-ux-form - A simple, fast and opinionated form library for React & React Native focusing on UX
• React-gui - React GUI is designed as the foundation for React design systems and component libraries
• React-joyride - Create guided tours in your apps
• Kbar - Fully extensible command+k interface for your site
• Flexbox for react-three-fiber
• @artsy/fresnel - An SSR compatible approach to CSS media query based responsive layouts for React
• React-lite-youtube-embed - A private by default, faster and cleaner YouTube embed component for React applications
• React-live - A flexible playground for live editing React components

Hooks

• The-platform - Web API's turned into React Hooks and Suspense-friendly React components
• Hooks.guide
• Collection of React Hooks
• Rehooks - Collection of React Hooks
• useHooks - Easy to understand React Hook recipes
• React-use-local-storage - React hook that persists and syncs state with local storage
• How to fetch data with React Hooks?
• 5 Tips to Help You Avoid React Hooks Pitfalls
• React-adaptive-hooks - Deliver experiences best suited to a user's device and network constraints

React Native

Documentation / News 📚

• React Native docs
• State of React Native 2018
• Open Source Roadmap
• Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native
• React Native's Many Platform Vision

Concepts / Articles 💡

React Native prerequisites

• Why Choose React Native?
• Know React? Try React Native.
• Typescript-cheatsheets-react-native - Cheatsheets for experienced React Native developers getting started with TypeScript

React Native patterns

• React Native Performance: Do and Don't
• Setup your React Native splash screen in 15 minutes
• How I improved my React Native app 50x faster
• ELI5: Yoga - Cross-Platform Layout Engine

Others

• Awesome React Native - An awesome style list that curates the best React Native libraries, tools, tutorials, articles and more
• Hunting JS memory leaks in React Native apps
• Bridging React Native Back to its Roots - Vincent Riemer (@vincentriemer) at @ReactEurope 2018
• Shipping React Native apps with Fastlane and Travis
• Progressive Image Loading in React Native
• Using SVG in Latest React Native Version 0.57
• Testing Mobile Applications Across Hundreds of Real Devices with Appium, Node.js & AWS Device Farm
• React Native's new architecture - Glossary of terms
• You can now use Expo APIs in any React Native app
• How to convince your boss to use React Native
• The New React Native Architecture Explained
• Best Build Platforms for React Native Apps in 2021
• Bringing Hermes to iOS in React Native 0.64
• Hermes Performance on iOS
• Navigating Xcode for React Native Developers (with a web background)
• Coinbase’s animated TabBar in React Native
• Optimizing React Native
• How Discord achieves native iOS performance with React Native
• How to implement over the air updates with expo-updates in React Native

Migration stories 📖

• React Native at Airbnb
• React Native is the Future of Mobile at Shopify
• Announcing Coinbase’s successful transition to React Native

Related tools 🛠️

• Create-react-native-app - Create a React Native app on any OS with no build config
• Flipper - Extensible mobile app debugger
• RN diff purge - Upgrade your React Native apps (and get diffs between versions)
• App Icon Generator
• React Native Upgrade Helper
• Android-capture - Capture video and screenshots from Android devices and emulators
• Don't kill my app! - Android manufacturers prefer battery life over proper functionality of your apps. See how you can fix it
• React Native Developer Tools - Modern, scalable tools. Exceptional developer experience.

Useful libraries 💾

• React-native-sideswipe - Simple React Native carousel with sensible defaults
• React-native-fast-image - FastImage, performant React Native image component
• Swr-react-native - React Native/React Navigation compatibility for Vercel's useSWR hook
• React-native-quick-base64 - A fast base64 module for React Native
• React-native-bottom-sheet - A performant interactive bottom sheet with fully configurable options
• React-native-portal - A simplified portal implementation for ⭕️ React Native & Web ⭕️
• RNUI - UI Toolset & Components Library for React Native
• Ignite - Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!
• Recylerlistview - High performance listview for React Native and web!
• Stripe-react-native - React Native library for Stripe
• React-native-mmkv - ⚡An extremely fast key/value storage library for React Native. ~30x faster than AsyncStorage!

Native Mobile Development

Related tools 🛠️

• Flinto - Easily test iOS icon designs on your home screen

Useful libraries 💾

• Litho - A declarative UI framework for Android
• ComponentKit - A React-Inspired View Framework for iOS
• Shard - Dynamic alerts in mobile apps

React frameworks

Gatsby.js

Documentation / News 📚

• Gatsby.js docs
• Why GraphQL for Gatsby 1.0 - GitHub issue
• Gatsby + Contentful + Netlify (and Algolia)
• Announcing Gatsby 2.0.0
• Web Performance 102: Keeping Gatsby Sites Blazing Fast
• Beyond Static: Building Dynamic Apps with Gatsby
• Gatsby for Apps

Concepts / Articles 💡

• Gatsby.js: How to set up and use the React Static Site Generator
• Practical Gatsby.js
• Using CSS Modules
• Image Optimization Made Easy with Gatsby.js
• Youfit uses Gatsby to increase lead generation by 60%
• How to Talk about Gatsby to Clients and Your Team
• Gatsby: Why We Write

Useful libraries 💾

• gatsby-plugin-offline

Next.js

Documentation / News 📚

• Learning Next.js to build server rendered JS web apps with React
• Vercel raises $102M Series C for its front-end development platform

Concepts / Articles 💡

• Lessons Learned Building in Next.js
• Using Feature Flags in Next.js
• Using Mapbox with Next.js (Instead of Google Maps)
• Things I've Learned Building Next.js Apps
• Configuring Sentry for Next.js Apps
• Going Serverless with Next.js and Firebase
• Static Sites with Next.js 9.3 and Prisma
• Which Back End Should I Use As A Front-End Developer?
• Authentication Patterns for Next.js
• 10 Next.js Tips You Might Not Know
• Building Forms with Next.js
• Thread on security headers and Next.js - Here's how to take your Next.js site to an A
• Refreshing Server-Side Props
• A Complete Guide To Incremental Static Regeneration (ISR) With Next.js
• ISR vs DPR: Big Words, Quick Explanation
• How we reduced Next.js page size by 3.5x and achieved a 98 Lighthouse score
• Migrating a Blog to Next.js from Gatsby
• Using the Next.js Image Component with MDX
• Optimizing third-party script loading in Next.js

Related tools 🛠️

• Code elimination preview - Understand what parts of your Next.js code will be trimmed before being sent to the client

Useful libraries 💾

• Create-react-next-app - Create Next.js apps in one command
• Happykit/flags - Feature Flags for Next.js
• Nookies - A set of cookie helpers for Next.js
• Next-stripe - Simplified server-side Stripe workflows in Next.js
• Next-optimized-images - next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif)
• Next-apollo - React higher-order component for integrating Apollo Client with Next.js
• Solito - React Native + Next.js, unified

Astro

Documentation / News 📚

• Introduction article
• Astro docs

Electron

• From React to an Electron app ready for production
• Building Electron Apps with Next.js

Browser extensions

• Plasmo - The browser extension framework

State management libraries

• React State Management Libraries and How to Choose

Redux

Documentation / News 📚

• Redux docs
• Getting Started with Redux - Course by @dan_abramov @eggheadio
• Building React Applications with Idiomatic Redux - Course by @dan_abramov @eggheadio

Concepts / Articles 💡

• Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent
• Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy
• Avoiding Accidental Complexity When Structuring Your App State
• Dissecting Twitter’s Redux Store
• Redux isn't slow, you're just doing it wrong - An optimization guide
• Scaling your Redux App with ducks
• Redux vs. The React Context API
• Goodbye Redux
• Escaping Redux pitfalls in React Native world
• Using Redux DevTools in production

Useful libraries 💾

• Redux-ecosystem-links - A categorized list of Redux-related addons, libraries, and utilities
• Awesome-redux - Awesome list of Redux examples and middlewares
• Introducing Redux-rest-easy: A library to generate your Redux code
• Introducing Redux Offline: Offline-First Architecture for Progressive Web Applications and React
• Introducing Redux VCR
• Redux-bug-reporter - A bug reporter and bug playback tool for redux

Recoil

Documentation / News 📚

• Recoil

GraphQL

Documentation / News 📚

• GraphQL docs
• Apollo Odyssey - Learn GraphQL with Apollo
• Principled GraphQL
• Series of articles by Marc-André Giroux
• GraphQL Weekly - A weekly newsletter of the best news, articles and projects about GraphQL

Concepts / Articles 💡

Comparisons between GraphQL and REST / other technologies

• Why GraphQL: Advantages, Disadvantages & Alternatives
• GraphQL vs REST: Caching
• Why not use a JSON DSL instead of GraphQL?
• Is GraphQL Still Relevant in an HTTP2 World?

Type generation with GraphQL

• Generate Javascript static types from GraphQL: TypeScript and Flow

Implementation examples

• Adding GraphQL into Existing Express APIs
• Building a GraphQL API by Example: Restaurant Reviews

Others

• Awesome-graphql - Awesome list of GraphQL & Relay
• A Front-End Developer's Guide to GraphQL
• Is GraphQL The Future?
• GraphQL Stitching 101
• GraphQL Resolvers: Best Practices
• The Problems of "Schema-First" GraphQL Server Development
• The rise of GraphQL “Overambitious API gateways”
• The tension between data & use-case driven GraphQL APIs
• GraphQL & Caching: The Elephant in the Room
• GraphQL API Design Pitfall - Twitter thread
• The GraphQL Dataloader Pattern: Visualized
• How GraphQL can improve your development workflow
• Why We Don’t See Many Public GraphQL APIs
• Why You Can't Select All Fields on a Type in GraphQL
• How should we version GraphQL APIs?
• Handling GraphQL errors like a champ with unions and interfaces
• GraphQL in 2020: What's next?
• gqless or gqlful?
• Unlimited free requests for developers on GraphCDN

Migration stories 📖

• Reconciling GraphQL and Thrift at Airbnb
• GraphQL: A success story for PayPal Checkout
• Our learnings from adopting GraphQL
• Lessons Learned Migrating APIs to GraphQL
• Lessons Learned Migrating APIs to GraphQL - Twitter thread
• A year of large scale GraphQL - the biggest takeaways
• Scaling GraphQL at PayPal

Useful libraries 💾

• Sofa — The best way to REST (is GraphQL)
• Graphql-doctor - Prevent Breaking Changes in a GraphQL API with GitHub Checks
• Eslint-plugin-graphql - Check your GraphQL query strings against a schema
• Gest - A sensible GraphQL testing tool - test your GraphQL schema locally and in the cloud
• graphql-request - Minimal GraphQL client supporting Node and browsers for scripts or simple apps
• JSON2SDL - Convert JSON to Schema Definition Language (SDL)

Related tools 🛠️

• Try GraphQL - Purpose-built Demo APIs for GraphQL
• GraphiQL - In-browser IDE for writing, validating, and testing GraphQL queries
• Introducing GraphQL for Visual Studio Code
• DocQL - Beautiful documentation & guides for your GraphQL APIs
• GraphQL Nexus - Declarative, Code-First GraphQL Schemas for JavaScript/TypeScript
• GraphQL Code Generator - Generate code from your GraphQL schema with a single function call
• GraphCDN - The fastest way to cache GraphQL
• Envelop - The missing GraphQL plugin system

Apollo client

Documentation / News 📚

• Apollo docs
• Apollo Client 2.0: Beyond GraphQL APIs
• The future of state management
• What's next - Query components
• Write Queries, Not Code - Slides by @peggyrayzis
• Improved Apollo Client Devtools
• Zero-config GraphQL state management
• Introducing React Apollo 2.1
• A first look at Async React + Apollo
• Reducing our Redux code with React Apollo
• GraphQL Schema Design: Building Evolvable Schemas
• Full Stack Error Handling with GraphQL and Apollo
• Using nullability in GraphQL
• Testing Apollo’s Query Component
• GraphQL state management for React Native
• Introducing @defer in Apollo Server
• Batching Client GraphQL Queries
• Introducing the Apollo GraphQL Platform
• Announcing Apollo Client 2.5
• A new Apollo docs experience
• Apollo Federation
• What’s new in Apollo Client 2.6
• Announcing managed federation
• Apollo Client, now with React Hooks

Concepts / Articles 💡

• React Native with Apollo — Part 1, Apollo Server
• React Native with Apollo — Part 2, Apollo Client
• Apollo Client - the stuff no-one ever told ya
• Why Apollo: Advantages, Disadvantages & Alternatives
• How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo
• Automatically Generate TypeScript Definitions for GraphQL Queries with Apollo Codegen
• A new approach to mocking GraphQL data
• Basics of Caching Data in GraphQL Apollo React client

Useful libraries 💾

• Apollo-client - A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server
• Apollo Community Links
• Apollo-link-rest - Use existing REST endpoints with GraphQL
• Apollo-cache-persist - Simple persistence for all Apollo Cache implementations
• Apollo-codegen - Generate API code or type annotations based on a GraphQL schema and query documents

Apollo server

Documentation / News 📚

• Caching Strategies in a Federated GraphQL Architecture
• Schema Services: Transitioning Towards a Federated Architecture
• How Netflix Scales its API with GraphQL Federation (Part 1)
• How Netflix Scales its API with GraphQL Federation (Part 2)
• Securing Your GraphQL API from Malicious Queries

Gqless

Documentation / News 📚

• Gqless docs
• What's new in 2.0 - Mutations, subscriptions, hooks, ...

SWR

Documentation / News 📚

• SWR docs - React Hooks library for data fetching
• Announcing SWR 1.0

Useful libraries 💾

• Swr-sync-storage - Synchronize SWR cache with localStorage or sessionStorage to get offline cache

Animations libraries

D3.js

Documentation / News 📚

• D3.js documentation

Concepts / Articles 💡

• How to learn D3.js
• React + D3.js

Framer Motion

Concepts / Articles 💡

• Learn Framer Motion in 10 tweets

React-spring

Documentation / News 📚

• React-spring documentation

React-native-reanimated

Documentation / News 📚

• React-native-reanimated documentation
• Animations in React Native: Performance and Reason-about-ability with Reanimated 2

Useful libraries 💾

• Moti - Moti is the universal animation package for React Native (based on react-native-reanimated)

Code quality

Linters

Eslint

Useful libraries 💾

• Eslint-plugin-import-helpers - ESLint plugin to help with imports
• Eslint-plugin-clean-regex - ESLint plugin for writing better regular expressions

Test frameworks

Jest

Documentation / News 📚

• Jest docs
• Jest 27: New Defaults for Jest, 2021 edition

Concepts / Articles 💡

• How to Test React Components Using Jest
• The Right Way to test React Components
• How to Snapshot Test Everything in Your Redux App With Jest
• Unit Testing a React Redux App
• Low effort, high value. Integration tests in Redux apps
• Redux Testing Step by Step: A Simple Methodology for Testing Business Logic
• So you think you don’t need unit tests? Think again - Twitter thread
• Data-driven Unit Tests with Jest
• How to add testing to an existing project
• Make Your Jest Tests up to 20% Faster by Changing a Single Setting

Useful libraries 💾

• Jest-codemods - Codemods for migrating to Jest
• React-fake-props - Automatically generate fake props for your React tests (Jest, Enzyme, ...)
• Jest-watch-master - Jest watch plugin for checking changes since master
• Jest-in-case - Jest utility for creating variations of the same test

Cypress

Documentation / News 📚

• Cypress - Fast, easy and reliable testing for anything that runs in a browser
• We're officially out of beta!
• Visual testing for Cypress
• Introducing the Cypress Component Test Runner– new in 7.0.0

React-testing-library

Documentation / News 📚

• React Testing Library docs

Concepts / Articles 💡

• Common mistakes with React Testing Library

Useful libraries 💾

• React-native-testing-library - Simple React Native testing utilities helping you write better tests with less effort

Others

• Sizzy - Test your website on different device sizes at once
• Stryker - Test your tests with mutation testing

Bundling

Bundlers

Webpack

Documentation / News 📚

• Webpack docs
• Webpack 4: Code Splitting, chunk graph and the splitChunks optimization

Concepts / Articles 💡

• Long-term caching of static assets with Webpack
• Why would I use a Webpack?
• Keep webpack Fast: A Field Guide for Better Build Performance
• Put Your Webpack Bundle On A Diet - Part 1
• How to Fully Optimize Webpack 4 Tree Shaking
• link rel=”prefetch/preload” in webpack

Useful libraries 💾

• Webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
• Webpack Visualizer - Visualize your bundles
• Source-map-explorer - Analyze and debug space usage through source maps
• Easy Offline First Apps With Webpack's Offline Plugin
• Sw-precache-webpack-plugin - Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets
• Webpackmonitor - A tool for monitoring webpack optimization metrics through the development process
• Image-trace-loader - Loads images and exports traced outlines as image/svg+xml URL-encoded data
• Guess.js - Libraries & tools for enabling Machine Learning driven user-experiences on the web
• Webpackbar - Elegant ProgressBar and Profiler for Webpack 3 and 4
• Webpack-notifier - webpack + node-notifier = build status system notifications
• Imagemin-webpack-plugin - Plugin to compress images with imagemin
• Webpack-merge - Merge designed for Webpack (MIT)
• Terser-webpack-plugin - Terser plugin
• Static-site-generator-webpack-plugin - Minimal, unopinionated static site generator powered by webpack
• Emoji-favicon-webpack-plugin - Let webpack generate an emoji favicon for you
• Bundlesize - Keep your bundle size in check

Rollup

Documentation / News 📚

• Rollup docs - Next-generation ES6 module bundler

Concepts / Articles 💡

• Introducing Preconstruct 🎁

Parcel

Documentation / News 📚

• Parcel docs - Blazing fast, zero configuration web application bundler
• Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more!
• Parcel v1.10.0 — Babel 7, Flow, Elm, and more!

Concepts / Articles 💡

• ParcelJS: How simple really is it?
• Switching to Parcel from Webpack

Others

• Comparing the New Generation of Build Tools
• Faster JavaScript Builds with Metro

Transpilers and optimizers

Babel

Documentation / News 📚

• Babel docs
• Babel 7 released

Useful libraries 💾

• Babel-plugin-macros - Enables zero-config, importable babel plugins

Prepack

Concepts / Articles 💡

• A Gentle Introduction to Prepack (Part 1)

Hosting providers

Netlify

• Netlify docs
• 10 Netlify features to surprise and delight
• Incremental Static Regeneration: Its Benefits and Its Flaws
• Distributed Persistent Rendering (DPR) - RFC
• Faster builds for large sites on Netlify with On-demand Builders: Now in early access

Vercel

• Vercel docs
• Firebase vs. Vercel
• Enable Suspect Commits, Unminify JS, and Track Releases with Vercel and Sentry

Others

• Fleek

Continuous development platforms

• CircleCI
• Drone
• BuildKite

SaaS useful to front-end developers

BaaS (Back-end as a service)

AWS Amplify

Documentation / News 📚

• AWS Amplify docs
• AWS Amplify Sandbox

Concepts / Articles 💡

• How to Design Almost Any Backend and Deploy It to AWS with No Code
• Introducing the AWS Amplify Admin UI: Create an Application Backend in Clicks
• Next.js-amplify-workshop
• Nextjs-aws-dynamodb

Useful libraries 💾

• AWS Amplify SDK

Google Firebase

Documentation / News 📚

• Google Firebase docs

Concepts / Articles 💡

• Authenticated server-side rendering with Next.js and Firebase
• Next-firebase-ssr

Useful libraries 💾

• Google Firebase SDK

Supabase

Concepts / Articles 💡

• Firebase vs. Supabase: Which is better?

Prisma

Documentation / News 📚

• Prisma docs

Concepts / Articles 💡

• Productive Development With Prisma’s Zero-Cost Type Safety

Others

• @databases - Query SQL Databases using Node.js and TypeScript
• JavaScriptDB - The easiest to use javascript database

Others

• Magic - Auth simplified - One SDK for passwordless, WebAuthn, and social login - fully customizable
• Insights - Privacy-Focused Analytics Platform For Developers
• Cusdis - Lightweight, privacy-first, open-source comment system

CMS

Strapi

Documentation / News 📚

• Strapi docs
• Announcing Strapi v3.6 with Internationalization

Website generators

Styleguide generators

Styleguidist

• React Styleguidist docs - Isolated React component development environment with a living style guide

Storybook

• Storybook docs - The UI development environment you'll love to use
• React Native + Storybook = ❤️
• Chroma articles - Storybook tutorials by Chroma

Others

• Playroom - Design with JSX, powered by your own component library
• a11y-color-tokens - Generate accessible UI colors from your base color tokens

Documentation generators

• GitBook - Documentation your users will love!
• Docz - It has never been so easy to document your things!
• React-docgen - A CLI and toolbox to extract information from React component files for documentation generation purposes
• Nextra - Nextra is a Next.js based static site generator. 0 lines of code needed.
• Markdoc - Markdoc is a powerful, flexible, Markdown-based authoring framework.

Presentation generators

Spectacle

• Spectacle docs
• Spectacle-code-slide
• Spectacle-terminal
• Spectacle-image-slide
• Presentations With Spectacle — How I Modularize My Deck

Others

• MDX - Markdown for the component era
• Mdx-deck docs
• Code-surfer - React component for scrolling, zooming and highlighting code
• Shiki-twoslash - You take some Shiki, add a hint of TypeScript compiler, and tada! incredible static code samples

Design systems

Concepts / Articles 💡

• Living Design System
• Design tokens for dummies
• Tokens in Design Systems
• What is a Design System?
• Welcome to Design Systems
• Accessibility, a powerful design tool
• Design System in Figma
• Everything you need to know about Design Systems
• ReactiveConf 2019 - Mark Dalgleish: Rethinking Design Practices
• Everything I Know About Style Guides, Design Systems, and Component Libraries
• Yes, Design Systems Do Improve Developer Efficiency and Design Consistency

Useful libraries 💾

• Zeroheight - Document your design system, together
• Design System Playground

Design Systems in the wild 🌈

• Design Systems France - Liste des Design Systems français
• Awesome-design-systems - A collection of awesome design systems
• Introducing Base Web, Uber’s New Design System for Building Websites in React
• Braid design system - Themeable design system for the SEEK Group
• Druids - Datadog's design system

Advanced concepts

State machines

Concepts / Articles 💡

• Welcome to the world of Statecharts
• Implementing a simple state machine library in JavaScript
• The FaceTime Bug and the Dangers of Implicit State Machines

Useful libraries 💾

• XState - State machines and statecharts for the modern web
• XState catalogue - Collection of professionally designed state machines you can drop into your projects

Server Side Rendering

Concepts / Articles 💡

• You might (not) need a Server Side Rendering framework
• Server-Side Rendering and Code Splitting with React-Router 4 and Webpack 2
• An Almost Static Stack
• Code Cracked for Code-Splitting + SSR in Reactlandia: React Universal Component + Webpack Flush Chunks and more
• Server-Render like a Pro /w Redux-First Router in 10 steps
• ReactCasts #13 - Server Side Rendering: Data Fetching & Routing
• Server Rendering - Redux
• What’s New With Server-Side Rendering in React 16
• What’s Server Side Rendering and do I need it?
• Rendering on the Web
• Server-Rendering Responsively

SSR Boilerplates

• Ssr-starter-pack - A starter pack to help you implement your handmade solution for SSR
• React-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
• React-isomorphic-render (notes on performances) - Isomorphic rendering with React, Redux, React-router

SSR Frameworks

• Gatsby.js - Blazing fast static site generator for React
• Razzle - Create server-rendered universal JavaScript applications with no configuration
• React-server - Blazing fast page load and seamless navigation
• After.js - Next.js-like framework for server-rendered React apps built with React Router 4
• Next.js vs. Gatsby vs. Create React App

Performance

• Front-end-checklist - The perfect Front-End Checklist for modern websites and meticulous developers

Illusion of speed

• The Illusion of Speed
• Designing for the Appearance of Speed
• Speed is the killer feature
• Why Performance Matters

Big picture performance

• Optimising the front end for the browser
• The Cost Of JavaScript In 2018
• Start Performance Budgeting
• How to Convince Your Boss to Care About Speed
• Can You Afford It?: Real-world Web Performance Budgets

Network performance

• Preload, Prefetch And Priorities in Chrome
• The Critical Request
• HTTP/2 push is tougher than I thought
• Why you should be focusing on the 99th percentile when tracking request performance
• Brotli Compression – How Much Will It Reduce Your Content?
• Web performance basics
• The Low Hanging Fruit of Web Performance
• Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)
• Idle Until Urgent
• Improving Client-Side Performance
• Fast load times by web.dev
• Load Scripts in Your React Bundle Asynchronously
• Loading Third-Party JavaScript
• Modern Asynchronous CSS Loading
• Async and defer, the difference
• Hard Costs of Third-Party Scripts
• How we reduced our initial JS/CSS size by 67%
• Polyfill as needed with polyfill-service
• An introduction to HTTP/2 for SEOs
• Brotli compression delivered from AWS
• AWS CloudFront Compression using Lambda@Edge - where is brotli?!
• To push, or not to push?! - A journey of resource loading in the browser
• Inline SVG... Cached

Images performance

• Converting Images To WebP
• How Image Optimization Decreased my Website’s Page Weight by 62%
• Optimize your images by web.dev
• State of the Web: Top Image Optimization Strategies
• Your Choice of Image formats for Websites and Web Apps
• Essential Image Optimization
• Lazy Loading Images and Video
• The Complete Guide to Lazy Loading Images
• Native image lazy-loading for the web!
• AVIF and WebP encoding quality settings
• AVIF has landed
• Time for Next-Gen Codecs to Dethrone JPEG

Fonts performance

• How to Load Multiple Google Fonts in One URL Request
• The Font Loading Checklist
• The Fastest Google Fonts
• The Best Font Loading Strategies and How to Execute Them

CSS performance

• CSS and Network Performance
• Reducing CSS bundle size 70% by cutting the class names and using scope isolation
• Extract critical CSS
• Improve Page Rendering Speed Using Only CSS

JavaScript performance

• Using the Paint Timing API
• Reduce JavaScript Payloads with Tree Shaking
• Reduce JavaScript Payloads with Code Splitting
• Deploying ES2015+ Code in Production Today
• JavaScript Start-up Performance
• ECMAScript modules in browsers
• Things that should not end up in production clientside code - Twitter thread
• Are long JavaScript tasks delaying your Time to Interactive?
• Building a Faster Web Experience with the postTask Scheduler
• Don’t Sink Your Website With Third Parties

React performance

• Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense
• Performance-tuning a React application
• Infinite List and React
• React is Slow, React is Fast: Optimizing React Apps in Practice
• React at Light Speed
• Using Purecomponent To Prevent Wasted Renders In React
• Optimize React Performance
• High Performance React: 3 New Tools to Speed Up Your Apps
• Two Tips to Improve Performance by 30% With React and Webpack
• Introducing React Loadable
• Perf-hoc - Visualize and detect unnecessary rendering and performance issues in React
• Progressive React - Want to make your React site more performant? Here's a quick checklist
• Performance tests between several styling libraries

Core Web Vitals

• Google Web Vitals best practices for single-page apps
• How Core Web Vitals Will Impact Google Rankings in 2021
• How We Improved Our Core Web Vitals (Case Study)

Progressive Web Apps

• Progressive Web Apps
• How to turn your website into a PWA
• Service Workers
• Progressive Web App with Webpack
• Why Progressive Web Apps Should Be Your Business Choice Over a Native App
• Every website deserves a service worker
• Speed up your App with Web Workers
• Workerize - Run a module in a Web Worker
• Workerize-loader - Automatically move a module into a Web Worker (Webpack loader)

Performance case studies

• Measuring Wikipedia page load times
• A Netflix Web Performance Case Study
• Improving third-party web performance at The Telegraph
• Making Instagram.com faster: Part 1
• Making Instagram.com faster: Part 3 - cache first
• Making Instagram.com faster: Part 4 - code size and execution optimizations
• Rearchitecting Airbnb’s Frontend
• Twitter Lite and High Performance React Progressive Web Apps at Scale
• React Performance Fixes on Airbnb Listing Pages
• How We Improved SmashingMag Performance
• Making GitHub’s new homepage fast and performant
• A React And Preact Progressive Web App Performance Case Study: Treebo

Related tools 🛠️

• ImageOptim
• ImgBot

Performance benchmarks 💯

• How To Think About Speed Tools
• Performance features reference
• Google Metrics - Measure and optimize performance and user experience
• Estimator.dev - Find out how much turning on modern JS could save
• PageSpeed Insights
• Lighthouse
• Lighthouse-ci - Run Lighthouse in CI using Docker
• Test My Site With Google
• Winning on Mobile by Google
• Google Mobile Optimisation Test
• Real User Experience Test
• Website Speed Test Image Analysis Tool
• Page Weight by Imgx
• Custom site performance reports with the CrUX Dashboard
• Lightest.app - Visualize web performance against competitors
• Sitespeed
• Instant Vitals - Open source tools to track Web Vitals metrics in the field

SEO

Concepts / Articles 💡

• Step Your Meta Game Up
• How To Use H1-H6 HTML Elements Properly
• ContentKing Academy
• Speed is now a landing page factor for Google Search and Ads
• The Definitive Guide To SEO In 2019
• SEO component for structured data
• The End of AMP
• SEO for devs - Learn to grow your developer blog or side project with SEO

SEO benchmarks 💯

• SEO Checker
• Hey Meta - Quickly check & build your meta tags
• Checkbot - Find broken links, duplicate titles, insecure pages, invalid HTML/CSS/JS & more

Security

• Security checklist - Be safe on the internet

Concepts / Articles 💡

• Please Stop Using Local Storage
• Third party CSS is not safe
• Here's Why Your Static Website Needs HTTPS
• ScottHelme.uk - Blog about web security
• Microsoft security chief: IE is not a browser, so stop using it as your default

Security benchmarks 💯

• Security headers - Audit your website for performances
• Observatory by Mozilla

Web3

• HERE IS THE ARTICLE YOU CAN SEND TO PEOPLE WHEN THEY SAY “BUT THE ENVIRONMENTAL ISSUES WITH CRYPTOART WILL BE SOLVED SOON, RIGHT?”
• Web3 is doing just great - ...and is definitely not an enormous grift that's pouring lighter fluid on our already-smoldering planet.

Misc. Tools

Images, videos, assets, colors, fonts

• Unsplash - Collection of beautiful, high resolution, free (and free of rights) images
• Coverr - Beautiful Free Stock Video Footage
• Carbon - Create and share beautiful images of your source code
• Fontstorage - Collection of free fonts for your websites
• Terminalizer - Record your terminal and generate animated gif images
• unDraw - Open-source illustrations for every project you can imagine and create
• DrawKit - Beautiful, free illustrations. Updated weekly
• Emoji-as-a-service - Service that returns a high-res, predictable emoji image for a given URL
• Image Color Picker - Find your perfect color palette by uploading an image you like
• Coolors - Create the perfect palette or get inspired by thousands of beautiful color schemes
• Remove.bg - Remove image background
• Unscreen - Remove video background
• Material Icons - Free (and free of right) icons from Google
• Iconic - Free, “do wtf you want with” pixel-perfect icons
• SuperTinyIcons - Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
• Boring avatars - Generates custom, SVG-based, round avatars from any username and color palette
• Free Illustrations
• Fluent Icons - Open source icons by Microsoft
• Lorem Picsum - The Lorem Ipsum for photos
• Reasonable Colors - Open-source color system for building accessible, nice-looking color palettes

Productivity

• A Soft Murmur - Ambient sounds to wash away distraction
• Linear - The issue tracking tool you'll enjoy using
• Airtable - Excel-like issue tracking tool

Mock APIs

• Reqres - A hosted REST-API ready to respond to your AJAX requests.
• Mocky - Easily test your REST-powered web services with an HTTP responses generator
• Kanye.rest - A free REST API for random Kanye West quotes (Kanye as a Service)

Regex testers

• Regexr - Regex validator / tutorials
• Regex101 - Regex validator / tutorials

IDEs

Visual Studio Code

• Visual Studio Code
• VSCode Themes
• Snipsnap Templates - Manage, share and use code templates with cloud UI and VS Code Extension
• GitHub Copilot

Online IDEs

• Awesome-online-ide - A list of awesome online development environments
• Visual Studio Code online
• CodeSandbox - The online code editor for React
• Stackblitz - Online VS Code IDE for Modern Web Applications
• Demoboard: a live editor with every package on NPM

Design tools

Sketch

• Sketching in the Browser
• React-sketchapp - Render React components to Sketch
• Html-sketchapp - HTML to Sketch export solution

Framer X

• Bringing Design System Components from Production into Framer X

Others

• ColorBox by Lyft Design
• Visly - Build React components visually

Presentation tools

• Kap - Capture your screen
• KeyCastr - An open-source keystroke visualizer
• Codetour - VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor

File sharing

• Transfer.sh - Easy file sharing from the command line
• Snapdrop - Like Airdrop, but on the web
• Wormhole - Simple, private file sharing

Others

• How HTTPS Works
• How DNS works
• Mess with DNS - Try experimenting with DNS
• Flycut - Clean and simple clipboard manager for developers
• IFTTT - Applets linked to the services you love
• ConferCal - A conference calendar for developers and other people in tech
• jsonmatic - Transform a CSV into a JSON
• FracturedJson - A JSON formatter that produces human-readable but fairly compact output
• Curl converter - Convert curl commands to Python, JavaScript, PHP, R, Go, Rust, Elixir, Java, MATLAB, Dart, CFML, Ansible URI, Strest or JSON
• Terms of Service Didn't Read - Transparent retranscriptions of the terms of service of major web actors

Developer insights

Software insights

• Buggy Software, Loyal Users: Why Bug Reporting is Key To User Retention
• User Tests Will Make You a Better Developer
• Don't leave broken windows
• Code Rot
• Web Caching Explained by Buying Milk at the Supermarket
• Falsehoods programmers believe about time
• Big-O Notation: Beginners Guide
• Imperative vs Declarative Programming
• Tech Choices I Regret at Spectrum
• STAR Apps: A New Generation of Front-End Tooling for Development Workflows
• Too DRY - The Grep Test
• Avoid the Test User
• Is High Quality Software Worth the Cost?
• Colocation
• No, disabling a button is not app logic.
• Inversion of Control
• Building resilient frontend architecture — Monica Lent
• De Morgan's Laws
• Why users care about how you write code
• Uber migration from Objective C to Swift (Twitter thread)
• The joy of deleting code
• WTF is JAMstack
• The Case for Lower Code
• No Code VS Low Code. What’s the Difference? It. Doesn't. Matter.
• How we ship code faster and safer with feature flags - From the GitHub blog
• Notion's page load and navigation times just got faster
• Chaotic good
• Computers can be understood
• Systems that defy detailed understanding
• Migrations: the sole scalable fix to tech debt
• What I learned from Software Engineering at Google
• Testing in Production, the safe way
• Managing Complex Waiting Experiences on Web UIs
• Write tasks not user stories
• Stackshare - Popular Tech Stacks
• Learnings from 5 years of tech startup code audits

Product insights

• How to Manufacture Design
• How to Design an Addictive Product
• Mobile First, Desktop Never
• Design Better Forms
• Breaking the Deadlock Between User Experience and Developer Experience
• Ever wonder why the most popular apps are starting to look the same? It might be a good thing
• Your Body Text Is Too Small
• What comes after product market fit? - Talk from Intercom co-founder at WebSummit 2018
• The 8-second rule in UX
• 7 UX Quick Wins from Airbnb
• How we prioritize features at Brigad — The SIEVE checklist
• Write tests. Not too many. Mostly integration.
• Foundations to build on: Intercom’s principles for building product
• When a rewrite isn’t: rebuilding Slack on the desktop
• 7 Practical Tips for Cheating at Design
• How things "look" in a user interface isn't just aesthetic - Twitter thread
• The Evolution of Material Design’s Text Fields
• Margin considered harmful
• Chasing the Pixel-Perfect Dream
• How to Report Errors in Forms: 10 Design Guidelines
• How Stripe Designs Beautiful Websites
• How To Write Great Microcopy
• How to Negotiate & Persuade
• Why I'm losing faith in UX
• Launch an app that people actually want to use
• Why You Should Include Your Developer In The Design Process
• How Frontend Developers Can Empower Designer’s Work
• Everything you need to know about skeleton screens
• Tiny Wins
• Optimal Placement for Mobile Call to Action Buttons
• The Everything is a Giant Project Mentality

Being a developer

• Give it five minutes
• When programming was no longer fun
• Rituals of Shaming in the Software Industry
• Office distractions could be costing your company more than $30k per high-performance employee each year
• The obligation of a software developer
• How I Became a Better Programmer
• What Makes A Senior Software Engineer
• On Senior Engineers
• There's No Such Thing as a Full Stack Developer
• What fonts do you use in your editor(s)?
• Why Being Too Polite in Web Design Is a Bad Thing
• Cheat to Win: Learn React with Copywork
• AHA Programming
• ooooops I guess we’re* full-stack developers now
• How to get experience as a software engineer
• To the brain, reading computer code is not the same as reading language
• A Front End Developer is Aware
• Know your "One Job" and do it first
• Specializing in Being a Generalist
• How to Build a Career in Tech: Cassidy Williams (@cassidoo) Connects the Dots 🎥
• The 80% Energy Principle
• The art of Frontend Engineering
• Why Constraints Are Good for Innovation
• Being Glue
• How I Became a Software Engineer (From Designer to Developer)
• How To Learn Stuff Quickly
• Why flow matters more than passion
• How To Learn Stuff Quickly

Being a staff-plus engineer

• Guides @StaffEng - Guides for reaching and succeeding at Staff-plus roles
• Stories @StaffEng - Folks who have shared their stories of reaching Staff-plus engineer roles
• Defining a Distinguished Engineer
• Being a principal engineer at Skyscanner
• Not all engineering leaders are engineering managers
• Staff Engineering
• More than Coding: What is Exploratory Work?
• What's a senior engineer's job?
• What a Senior Staff Software Engineer Actually Does - Part 1: The Role and My Tasks
• What a Senior Staff Software Engineer Actually Does - Part 2: The Mindset and Focus of the Role
• On becoming a senior technical leader
• Staff eng archetypes

Technical decision making

• Technical Decision Making
• Technical Research and Preparation
• Where to Start
• A practical guide to writing technical specs
• Design Docs at Google
• How to write a better technical design document
• Stepping Stones not Milestones

Engineering strategies

• On Drafting an Engineering Strategy
• Your first 90 days as CTO or VP Engineering
• Delivering on an architecture strategy
• The difficult teenage years: Setting tech strategy after a launch
• Run less software

Leadership / Mentoring / Teaching

• 11 Best Ways to Improve Your Emotional Intelligence
• Onboarding New Developers
• How to Set the Technical Direction for Your Team
• #2 CTO Digest — Growing up
• Amazon Leadership Principles
• Managers and Seagulls
• "Solidifying what you learn"
• How I Teach
• Why mentorship in tech is important
• Lessons from training teams to use React Native
• Patterns in confusing explanations
• The Behind-the-scenes Work of Tech Leadership
• How to Make Good Code Reviews Better
• Servant leadership: why being a servant leader is worth the work

Management

• How do you manage underperforming team members? - Twitter thread
• The CEO of $48 billion Shopify says long hours aren't necessary for success: 'I'm home at 5:30pm every evening'
• The epistemology of software quality
• The Evolution of Trust - Game on trust theory
• The Nakazawa Management Starter Pack
• If Your Boss Could Do Your Job, You’re More Likely to Be Happy at Work
• The Importance of Career Laddering
• Career Ladders - A sample of career ladders [Sarah Drasner uses for her] organization, open sourced for anyone
• Your Team is Not “Them”
• Understanding Project Management Will Improve Your Developer Job
• Mission Command: enabling autonomous software teams
• Distributing Challenge: On Building Highly Engaged Teams
• What Silicon Valley "Gets" about Software Engineers that Traditional Companies Do Not
• What To Do When Your Feedback Doesn't Land

Career ladders

• Progression.fyi
• Rent the Runway career ladder
• Kickstarter carrer ladder
• On eng ladders, promotions, glue work & success
• Malt career ladder

OSS

• Don't "Push" Your Pull Requests
• Building the Open Source Community We Want

Remote working

• Why (I think) "Cost of Living" pay for remote workers is BS
• Tips for a successful switch to a standing desk
• Taking the Pain Out of Video Conferences
• The Basecamp Guide to Internal Communication
• Spotify says it's letting employees work from anywhere, while still paying San Francisco and New York salaries
• Inclusion in a Distributed World
• Why I Stopped Using Multiple Monitors

Communicating

• Active Listening: The Master Key to Effective Communication
• The Work Required To Have An Opinion
• Proximate vs Root Causes: Why You Should Keep Digging to Find the Answer
• How To Work With Developers - A Guide for Non-Developers
• Give it five minutes
• Beyond best intentions
• Manage Your Manager
• The Art of the Awkward 1:1
• The P Rules
• The four layers of communication in a functional team
• The Skill of Naming What's Happening in the Room

Writing documentation

• Why it’s worth it to invest in internal docs
• Docs for Everyone!

Writing articles

• The Two Minutes It Takes To Read This Will Improve Your Writing Forever
• How to Write Concisely

Speaking at events

• I’ve spoken at JSConf and so can you!
• 5 Essential Ingredients for an Awesome Tech Talk
• How to prepare a talk
• Awesome conference practices - Did you like anything in particular about a conference? Let's make an awesome list
• Twitter thread about speaking in public
• Things I recommend for submitting talk idea - Twitter thread

Job interviews

• Salary Negotiation: Make More Money, Be More Valued
• Tech Screenings: Why The Interview Process Fails Candidates
• Twitter thread on interview questions before joining a startup
• Salary negotiation thread - by Stephanie Hurlburt
• Getting a Gig: A Guide - Guide for getting a gig as a tech student by Cassidy Williams
• Interview the interviewer

Coding interviews

• How NOT to succeed in your 45-minute coding interview
• React Interview Questions
• Hiring without whiteboards - Companies that don't have a broken hiring process
• Senior Interviews != Three Junior Interviews in a Trench Coat

Resumes

• Intermediate to senior dev resume

Compensation

• Whimsical Guide to Compensation
• TechPays - Let's change the information assymetry for compensation

Startups

• FRENCH - 5 raisons de rejoindre une startup très early stage
• FRENCH - Pourquoi nous sommes 100% transparents sur les salaires de nos employés
• Equity 101 for Software Engineers at Big Tech and Startups
• TLDR: Stock options - Roughly estimate what your stock options could be worth

Others

• How to Get Rich (without getting lucky) - Twitter thread

Freelance

Freelance advice

• Pricing Freelance Projects
• How to price yourself $$$ as a freelance developer - YouTube video
• Breaking Into Freelancing & Consulting as a Developer - How I made over $400,000 Per Year 🎥

Job hunting / Freelance platforms (mainly for French people)

• Stack Overflow: Calculate your salary
• Crème de la crème
• Talent.io
• Flaiiir.io
• Hired
• JobGlober
• FiftyTalents
• FreelanceRepublik
• Front end developer jobs
• JobTeaser
• How I Find Six Figure Remote Software Developer Jobs
• We Work Remotely
• Relocate.me - Job relocation made easy. Find tech jobs w/ relocation packages
• TypeScript.careers - Find a job writing TypeScript

Personal achievements

Talks

• Power your mobile apps with Apollo-client - 21'40

Personal links

• Mechanical Watch
• Once In A Lifetime