dimroth/AwesomeTools

I have gathered this list of links over time, and it is made of resources I have found helpful or worth remembering.

Tools

Images, fonts, front-end, UX

• Unsplash, Pexels - Collection of beautiful, high resolution, free (and free of rights) images
• Carbon - Create and share beautiful images of your source code
• Vector Logo - Might find what you're desperately looking for
• Fontstorage, FontSquirrel - Collection of free fonts for your websites and designs
• TheNounProject - Endless collection of icons (credit required)
• Amp-What - A quick, interactive reference of 14,500 HTML character entities
• Color Safe - Accessible text colors generation
• Coloors.io - Super fast color schemes generator
• Type Scale - Generate type scale by determining ratio
• Fresh Gradients - Need beautiful selected gradients ?
• Loading status - Loading SVG, GIF, PNG... templates
• Canvas System - Using documentation to cultivate co-ownership between design and development
• SVG Data URI Optimizer - Nice utility to set nice optimized svg backgrounds
• Flowbase - The best curated collection of webflow cloneable assets, templates and guides
• Checklist Design - A collection of the best UX and UI practices
• ReallyGoodUX - Inspiring UX, straight to your inbox

Development tooling

• Noisli - Ambient sounds to wash away distraction
• Transfer.sh - Easy file sharing from the command line
• 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
• Regexr, Regex101 - Regex validator / tutorials
• CodeSandbox - The online code editor for React
• JSONPlaceholder - Generate templated JSON responses
• ES6Console - Try latest ES features online (👍 for algorithms)

IDE

Generators

• Real Favicon Generator - Easy generation of favicons

SEO

• Spyfu, Semrush - Spy competitors SEO
• RankBrain Guide - Google RankBrain Guide

Social MEdia

• Tailles covers - Article mis à jour fréquemment

Productivity

• Word to HTML - Copy paste from Google Doc

Testing

• PingDom - Test ping, requests, loading time

Awesome Things

• Style systems

Mails

• Really Good Emails - Really good emails to get inspiration and templates

Others

• IFTTT - Applets linked to the services you love
• ConferCal - A conference calendar for developers and other people in tech

Git / Github

• Git flight rules - Flight rules for git
• Tell Me When it Closes - Get emailed when an issue or PR closes

Databases (articles and libraries)

• Postgres hierarchical data
• Mockaroo - Generate a random set of data

Javascript

• Mozilla re-introduction to Javascript
• Javascript Without Loops
• A Beginner’s Guide to Currying in Functional JavaScript
• How I rediscovered my love for JavaScript after throwing 90% of it in the trash
• EcmaScript 6 Features
• ES6: Default Arguments
• Taming the asynchronous beast with ES7
• AirBnB Javascript styleguide
• The increasing nature of frontend complexity

Typescript

• React-javascript-to-typescript-transform - Convert React JavaScript code to TypeScript with proper typing
• Monorepo examples
  • downwrite
  • yarn, nextjs, storybook, typeorm, type-graphql
  • How to build TypeScript mono-repo project with yarn and lerna
  • Monorepo starter project for Kotlin, Python, TypeScript x React
  • A monorepo example using TypeScript and Next.js
  • A Fullstack GraphQL Airbnb Clone with React and React Native

Node

• Node best practices - The largest Node.JS best practices list. Curated from the top ranked articles and always updated

Maps

• MapBox - Alternative to Google Maps API n°1
• Here - Alternative to Google Maps API n°2

CSS

Vanilla

• Margin or padding?
• Float labels with CSS
• Moving letters
• Single element CSS spinners
• Creating a Loading Placeholder with Sass

CSS Modules

• CSS Modules
• Article on CSS Modules

Animations

• 10 principles for smooth web animations
• Lottie
• How to create fancy revealing animations with these simple CSS tricks

React

Documentation, concepts, articles

• React docs
• List of curated resources from facebook/react
• Lifecycle Simulators
• Why is setState async
• Presentational and Container Components
• React-bits - React patterns, techniques, tips and tricks
• Functional setState is the future of React
• Reusable State with Higher Order Components
• React Pattern: Extract Child Components to Avoid Binding
• The constructor is dead, long live the constructor!
• Behind the Scenes: Improving the Repository Infrastructure - React 16 release retrospective
• Horizontal scrolling containers with grid

Blessed libraries

• Create-react-app - Create React apps with no build configuration
• Awesome-react-render-props - Awesome list of React components with render props

Useful, promising libraries / components

• React-codemod - React codemod scripts
• React components & libraries
• JS.coach
• React-docgen - A CLI and toolbox to extract information from React component files for documentation generation purposes
• 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 Native

Documentation, concepts, articles

• React Native docs
• Awesome React Native - An awesome style list that curates the best React Native libraries, tools, tutorials, articles and more

Blessed libraries

• Create-react-native-app - Create a React Native app on any OS with no build config

Useful, promising libraries / components

• Babel-plugin-functional-hmr - Babel plugin enables HMR for functional components in React Native
• React-native-sideswipe - Simple React Native carousel with sensible defaults

Redux

Documentation, concepts, articles

• Redux docs
• Getting Started with Redux - Course by @dan_abramov @eggheadio
• Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and Intent
• Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy
• Redux-ecosystem-links - A categorized list of Redux-related addons, libraries, and utilities
• React-redux-links - Curated tutorial and resource links Mark Erikson has collected on React, Redux, ES6, and more
• Awesome-redux - Awesome list of Redux examples and middlewares
• 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
• Using Redux DevTools in production

Useful, promising libraries / components

• 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

GraphQL

Documentation, concepts, articles

• GraphQL docs
• GraphiQL - In-browser IDE for writing, validating, and testing GraphQL queries
• Awesome-graphql - Awesome list of GraphQL & Relay
• A Front-End Developer's Guide to GraphQL
• Adding GraphQL into Existing Express APIs
• GraphQL vs REST: Caching
• Eslint-plugin-graphql - Check your GraphQL query strings against a schema

Relay vs Apollo

• Choosing a GraphQL Client: Apollo vs. Relay
• Relay vs Apollo - From the Graphcool team
• Upgrading to Relay Modern or Apollo - From the New-York Times team

Relay Modern

• Relay - Relay is a JavaScript framework for building data-driven React applications
• Exploring Relay Modern

Apollo

Documentation, concepts, articles

• Apollo docs
• Apollo Client 2.0: Beyond GraphQL APIs - From the Apollo team
• The future of state management - From the Apollo team
• What's next - Query components - From the Apollo team
• Write Queries, Not Code - By @peggyrayzis
• Improved Apollo Client Devtools
• Zero-config GraphQL state management
• React Native with Apollo— Part 1, Apollo Server
• React Native with Apollo — Part 2, Apollo Client

Useful, promising libraries / components

• React-apollo - React higher-order component for Apollo Client
• Apollo-link-state - Manage your application state with Apollo!
• 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
• Yaba-social - Yet Another Boilerplate App showing off react-navigation and the excellent new tools from Apollo

Jest

Documentation, concepts, articles

• Jest docs
• 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

Useful, promising libraries / components

• Jest-codemods - Codemods for migrating to Jest
• React-fake-props - Automatically generate fake props for your React tests (Jest, Enzyme, ...)

Other test solutions

• Cypress - Fast, easy and reliable testing for anything that runs in a browser
• Sizzy - Test your website on different device sizes at once

Webpack

Documentation, concepts, articles

• Webpack docs
• Long-term caching of static assets with Webpack
• BundlePhobia - Find the cost of adding a npm package to your bundle

Useful, promising libraries / components

• 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

Webpack alternatives

• Rollup - Next-generation ES6 module bundler
• Parcel - Blazing fast, zero configuration web application bundler

No config tools

• Tools without config
• Kcd-scripts - CLI toolbox for common scripts for my projects

Server Side Rendering

Documentation, 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

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

Frameworks

• Gatsby.js - Blazing fast static site generator for React
• Next.js - Framework for server-rendered React apps
• Learning Next.js to build server rendered JS web apps with React
• Lessons Learned Building in Next.js
• Create-react-next-app - Create Next.js apps in one command
• 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

Gatsby.js

Documentation, concepts, articles

• Gatsby.js docs
• Why GraphQL for Gatsby 1.0
• Gatsby.js: How to set up and use the React Static Site Generator
• Gatsby + Contentful + Netlify (and Algolia)
• Practical Gatsby.js
• Using CSS Modules
• Image Optimization Made Easy with Gatsby.js

Plugins

• gatsby-plugin-offline

Netlify

• Netlify docs
• 10 Netlify features to surprise and delight

Performances (and SEO)

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

User-side

• The Illusion of Speed
• Designing for the Appearance of Speed

Browser-side

• Preload, Prefetch And Priorities in Chrome
• The Critical Request
• Performance Analysis Reference
• How to Simulate Mobile Devices with Device Mode in Chrome
• Using the Paint Timing API
• Twitter Lite and High Performance React Progressive Web Apps at Scale
• Optimising the front end for the browser
• Deploying ES2015+ Code in Production Today
• Measuring web performance; it’s really quite simple
• Step Your Meta Game Up
• Web fonts: when you need them, when you don’t
• HTTP/2 push is tougher than I thought
• Why you should be focusing on the 99th percentile when tracking request performance

React-side

• Infinite List and React
• Rearchitecting Airbnb’s Frontend
• 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
• Performance tests between several styling libraries

Progressive Web Apps

• Progressive Web Apps
• How to turn your website into a PWA
• Service Workers
• A React And Preact Progressive Web App Performance Case Study: Treebo
• Progressive Web App with Webpack

Benchmarks

• PageSpeed Insights
• Lighthouse
• Test My Site With Google
• Real User Experience Test
• Website Speed Test Image Analysis Tool
• Page Weight by Imgx

Security

• Please Stop Using Local Storage

Electron

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

Blog posts

UX / Design

• UX in Motion Manifesto

Backend

• Best Practices for Node error handling

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

Product insights

• How to Manufacture Design
• How to Design an Addictive Product
• Mobile First, Desktop Never

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
• What fonts do you use in your editor(s)?

Leadership / 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

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

Writing articles

• The Two Minutes It Takes To Read This Will Improve Your Writing Forever

Speaking at events

• I’ve spoken at JSConf and so can you!
• 5 Essential Ingredients for an Awesome Tech Talk

Interviews

• Salary Negotiation: Make More Money, Be More Valued

Coding interviews

• How NOT to succeed in your 45-minute coding interview
• React Interview Questions

Resumes

• Intermediate to senior dev resume

Others

• FRENCH - 5 raisons de rejoindre une startup très early stage
• FRENCH - Pourquoi nous sommes 100% transparents sur les salaires de nos employés

Job hunting / Freelance (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

Personal achievements

• React Top 10 Articles of Oct 2017 - #8

Emails

• Tips to improve email campaigns
• Same as above
• Welcome email best practices
• 🎬 La meilleur arme de growth hacking
• 🎬 10 secrets pour éviter que vos mails arrivent en spam

Growth tools

Cold mailing / Drip campaigns

• AutopilotHQ
• Lemlist
• Prospect.io
• PersistIQ
• Reply.io