A curated list of Design System articles, resources and tools

Adele: The repository of publicly available design systems and pattern libraries https://adele.uxpin.com/

A pattern library of inclusive web interfaces* https://inclusive-components.design/

Resources, links, references and articles on Design Systems* https://uxdesign.cc/resources-links-references-and-articles-on-design-systems-e8ab898e0ab5

Get a master bundle of 35 “Design Thinking” templates for free* https://www.interaction-design.org/template-bundles/design-thinking

You Front End Pre-Flight Check List* https://frontendchecklist.io/

Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished* https://github.com/danielbayerlein/dashboard

Open Source Guides* https://opensource.guide/

Component Styling API: Thinking About Design Systems at 10,000 Feet http://mrmrs.github.io/writing/2018/06/18/component-styling-api/

Benevolent dictator governance model http://oss-watch.ac.uk/resources/benevolentdictatorgovernancemodel

Meritocratic governance model http://oss-watch.ac.uk/resources/meritocraticgovernancemodel

Jeff Bezos Banned PowerPoint in Meetings. His Replacement Is Brilliant* https://www.inc.com/carmine-gallo/jeff-bezos-bans-powerpoint-in-meetings-his-replacement-is-brilliant.html

Design Systems Handbook* https://www.designbetter.co/design-systems-handbook/introducing-design-systems

Design Systems are for People* https://publication.design.systems/design-systems-are-for-people-a484620b6988

The People Layer 1.0* https://publication.design.systems/the-people-layer-1-0-5ce84942c4c0

Distilling How We Think About Design Systems https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9

Design Systems, Style Guides, and Pattern Libraries: Oh My! https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries

Design Systems vs. Pattern Libraries vs. Style Guides – What's the Difference? https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/

The Component Cut-Up Workshop* https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517

Tokens in Design Systems* https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

Theo is a an abstraction for transforming and formatting Design Tokens* https://github.com/salesforce-ux/theo

Managing Heading Levels In Design Systems* https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3

Consolidating Design Systems https://medium.com/eightshapes-llc/consolidating-design-systems-6bb7ce72f393

How to Build a Design System with a Small Team https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac

Designing Design System for Complex Products* https://uxdesign.cc/designing-design-system-for-complex-products-5ff2d3051fa1

Laying the foundations for system design* https://medium.com/owl-studios/laying-the-foundations-7e503ef2120f

Why design systems are a single point of failure* https://blog.hichroma.com/why-design-systems-are-a-single-point-of-failure-ec9d30c107c2

Documenting Components "engineers first, designers second"* https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015

Airbnb built an AI that turns design sketches into product source code https://thenextweb.com/artificial-intelligence/2017/10/25/airbnb-ai-sketches-design-code/

React Sketch App* https://github.com/airbnb/react-sketchapp

Create A Design System* https://www.uxpin.com/create-design-system-guide

Building a Visual Language https://airbnb.design/building-a-visual-language/

How to build a design system that will last* https://www.atlassian.com/blog/apps/what-is-design-system-how-to-build-one

Why Design Systems Fail* https://24ways.org/2017/why-design-systems-fail/

What I learned about leading a design system in 2017. https://publication.design.systems/what-i-learned-about-leading-a-design-system-in-2017-46b85e9d7eab

Letter to a Junior Product Manager https://builttoadapt.io/letter-to-a-junior-product-manager-37b79bbe801e

Tracking where your time went with Lego workstream visualisation https://code.joejag.com/2018/lego-workstream-visualisation.html

How IBM is Training Its Workforce to Think Like Designers* http://fortune.com/2017/12/22/ibm-design-thinking/

The 4 Layers of Single Page Applications You Need to Know* https://hackernoon.com/architecting-single-page-applications-b842ea633c2e

2 Fast 2 Furious: migrating Medium’s codebase without slowing down (GraphQL) https://medium.engineering/2-fast-2-furious-migrating-mediums-codebase-without-slowing-down-84b1e33d81f4

Learning from Lego: A Step Forward in Modular Web Design http://alistapart.com/article/learning-from-lego-a-step-forward-in-modular-web-design

Dual-Track Agile: Why Messy Leads to Innovation https://www.mindtheproduct.com/2017/04/dual-track-agile-messy-leads-innovation/

Designing very large (JavaScript) applications (with empathy)* https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3

the Origins of Opera and the Future of Programming* https://medium.com/@jessitron/the-origins-of-opera-and-the-future-of-programming-bcdaf8fbe960

Evidence Based Management https://www.slideshare.net/VALOZ/evidence-based-management

Keep track of yourself is a good way to prioritize your workflow https://github.com/omidfi/moro

Task Warrior* https://blog.djy.io/taskwarrior-where-have-you-been-all-my-life/

Shopify Polaris Design Tokens* https://github.com/Shopify/polaris-tokens

Catalog www.catalog.style

seek-style-guide* https://github.com/seek-oss/seek-style-guide

Storybook* https://storybook.js.org/

Styleguidist https://react-styleguidist.js.org/

Compositor https://compositor.io/

Brad Frost Style-Guide-Guide https://github.com/bradfrost/style-guide-guide

BlueKit http://bluekit.blueberry.io/

UI Storybook https://github.com/ui-storybook/sb

REACT COMPONENTS LIVING STYLE GUIDES OVERVIEW https://www.nearform.com/blog/react-living-style-guides/

Pattern: Backends For Frontends* https://samnewman.io/patterns/architectural/bff/

Domain Driven Design* https://en.wikipedia.org/wiki/Domain-driven_design

Pass Components not Data* https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991

How to Avoid Accidental Complexity in Software Design https://medium.com/swlh/how-to-avoid-accidental-complexity-in-software-design-2792ad99fddc

API Gateway* http://microservices.io/patterns/apigateway.html

Microfront Ends: Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.* https://micro-frontends.org/

Decompose by business capability* http://microservices.io/patterns/decomposition/decompose-by-business-capability.html

Decompose by subdomain http://microservices.io/patterns/decomposition/decompose-by-subdomain.html

Lava Layer https://mikehadlow.blogspot.com.au/2014/12/the-lava-layer-anti-pattern.html

A streaming layout service for front-end microservices https://github.com/zalando/tailor

Single-spa the javascript metaframework. Build micro frontends that coexist and can each be written with their own framework. https://github.com/CanopyTax/single-spa

REST Maturity Model* https://www.martinfowler.com/articles/richardsonMaturityModel.html

Pa11y Dashboard is a web interface to the [Pa11y][pa11y] accessibility reporter; allowing you to focus on fixing issues rather than hunting them down* https://github.com/pa11y/dashboard

Accessibility for developers* https://www.invisionapp.com/blog/accessibility-for-developers/

Static AST checker for accessibility rules on JSX elements* https://www.npmjs.com/package/eslint-plugin-jsx-a11y

HTML_CodeSniffer comes with standards that enforce the three conformance levels of WCAG 2.0* http://squizlabs.github.io/HTML_CodeSniffer/

Understanding CSS Stats: How to Make the Most of the Numbers* https://webdesign.tutsplus.com/tutorials/understanding-css-stats-how-to-make-the-most-of-the-numbers--cms-22756

Facebook: Design Systems & Tools at Facebook — SketchHackBLN 2017 https://vimeo.com/242899818

A framework to create an accessible and harmonious color system for faster design-dev handoff https://blog.prototypr.io/a-framework-to-create-accessible-and-harmonious-color-system-for-faster-design-dev-handoff-8138b3a9604d

Introducing true design version control without changing your tools. Manage changes, document work and keep your team in sync. https://kactus.io/

MobX - Simple, scalable state management* https://github.com/mobxjs/mobx/tree/6ed404b96a8b4074a473accd2bc22eda7223d924

A mostly reasonable approach to JavaScript https://github.com/airbnb/javascript

Algorithms study materials, behavioral content and tips for rocking your coding interview* https://github.com/yangshun/tech-interview-handbook

Kick-ass browser extension to debug your apps* https://github.com/krasimir/kuker

Browser devtools extension for debugging Vue.js applications. https://github.com/vuejs/vue-devtools

Vue.js Cheatsheet* https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/vue.js

Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components. https://github.com/vue-perf-devtool/vue-perf-devtool

CLI for rapid Vue.js development https://github.com/vuejs/vue-cli

Clooney is an actor library for the web. Use workers without thinking about workers. https://github.com/GoogleChromeLabs/clooney

A training project for learning Webpack optimizations https://github.com/GoogleChromeLabs/webpack-training-project

❤️ JavaScript happiness style linter https://github.com/xojs/xo

Create and share beautiful images of your source code https://github.com/dawnlabs/carbon

Experimental HTML to Sketch export solution https://github.com/brainly/html-sketchapp

Headless Chrome Node API* https://github.com/GoogleChrome/puppeteer

Make bots for Messenger, LINE, Slack, Telegram and Viber https://github.com/Yoctol/bottender

A framework for building GitHub Apps to automate and improve your workflow https://github.com/probot/probot

A CLI dashboard for your webpack dev server* https://github.com/FormidableLabs/webpack-dashboard

Storybook: Interactive UI component dev & test: React, React Native, Vue, Angular* https://github.com/storybooks/storybook

Extract & Inline Critical-path CSS in HTML pages https://github.com/addyosmani/critical

A fantastic mobile ui lib implementation by Vue https://github.com/didi/cube-ui

JavaScript Style Guide, with linter & automatic code fixer https://github.com/standard/standard

Fast and Reliable E2E Web Testing with only Javascript https://github.com/Nike-Inc/burnside

Useful utilities for developing Electron apps and modules https://github.com/sindresorhus/electron-util

A Javascript library for browser exploitation https://github.com/theori-io/pwnjs

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension. https://github.com/IBM/css-gridish

A declarative library for application development using cloud services with JavaScript https://github.com/aws/aws-amplify

Redux Box (minimal Redux) https://github.com/anish000kumar/redux-box

Vue Enterprise Boilerplate https://github.com/chrisvfritz/vue-enterprise-boilerplate

Generate Isometric views from Artboards and Rectangles in Sketch app. https://github.com/sureskumar/sketch-isometric

Create ASCII Diagrams http://asciiflow.com/

Convert ASCII diagrams to beautiful SVGs https://github.com/dhobsd/asciitosvg#asciitosvg

cmder: Portal console emulator for Windows* http://cmder.net

ttygif converts a ttyrec file into gif files. It's a stripped down version of ttyplay that screenshots every frame* https://github.com/icholy/ttygif

React for CLIs* https://github.com/vadimdemedes/ink

Record and share your terminal sessions, the right way https://asciinema.org/

A terminal for a more modern age https://eugeny.github.io/terminus/

Cool Retro Terminal* https://github.com/Swordfish90/cool-retro-term

Cathode: A vintage terminal https://itunes.apple.com/au/app/cathode/id499233976?mt=12

Hyper: The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. https://hyper.is/

iTerm: terminal emulator for MacOS that does amazing things https://www.iterm2.com/

Eev: A tiny, fast, zero-dependency event emitter* https://github.com/chrisdavies/eev

##Electron Alternatives

Universal Windows Platform (UWP) app https://docs.microsoft.com/en-us/windows/uwp/get-started/whats-a-uwp

Build Desktop Applications for Linux, Windows and Mac using HTML, CSS and Javascript http://appjs.com/

Build cross platform desktop applications with HTML, CSS and script https://sciter.com/

Lightweight alternative to Electron for making macOS apps using Javascript https://github.com/francoislaberge/shrinkray

NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. https://nwjs.io/

The fastest way to build beautiful Electron apps using simple HTML and CSS http://photonkit.com/

How To Use Color In UI Design Wisely to Create A Perfect UI Interface?* https://blog.prototypr.io/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-6e524bd023bc

Pigment: color palette tool https://pigment.shapefactory.co/

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles* http://patternlab.io/

7 Rules of Using Radio Buttons vs Drop-Down Menus* https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1

Lean Customer Journey* https://uxdesign.cc/proto-journey-a-lean-ux-customer-journey-map-30ea3a241edc

User Interface Design: 10 Principles Learned from Painful Mistakes* https://boagworld.com/design/user-interface-design/

A Playbook for Improving Customer Journeys* https://medium.com/capitalonedesign/a-playbook-for-improving-customer-journeys-d23feb0d41a2

75 GoodUI ideas that we are about to show you, are being actively A/B tested by us and others.* http://goodui.org/

UI Patterns* https://ui-patterns.com

Which input when* https://morgancarter.com.au/design-solutions/which-input-when

Retain UX Talent by Tracking UX Capacity* https://www.nngroup.com/articles/tracking-ux-capacity/

The Role of Design in Business Strategy* https://uxdesign.cc/the-role-of-design-in-business-strategy-c06768877e18

EXAMPLE UX DOCS AND DELIVERABLES* http://www.uxforthemasses.com/resources/example-ux-docs/

THE CUSTOMER EXPERIENCE JOURNEY MAPPING TOOLKIT* http://designingcx.com/cx-journey-mapping-toolkit/

LEGO’s User Experience Wheel* http://www.uxbydesign.org/2009/07/06/legos-user-experience-wheel/

Buttons shouldn't have a hand cursor* https://adamsilver.io/articles/buttons-shouldnt-have-a-hand-cursor/

Setting up a JavaScript Monorepo* https://staltz.com/setting-up-a-javascript-monorepo.html

Lerna: A tool for managing JavaScript projects with multiple packages* https://github.com/lerna/lerna

Green Sock: Ultra high-performance, professional-grade animation for the modern web https://greensock.com/

Tablesaw Responsive Tables (With Sorting and i18n) https://github.com/filamentgroup/tablesaw

Awesome React Components* https://github.com/brillout/awesome-react-components

Bit: Scalable code sharing for the age of code components https://github.com/teambit/bit

How To Share React UI Components Between Projects And Apps* https://blog.bitsrc.io/how-to-easily-share-react-components-between-projects-3dd42149c09

Catalog of React Components & Libraries* https://github.com/brillout/awesome-react-components

React UI library based on styled-components https://github.com/smooth-code/smooth-ui

React Final Form: subscription-based form state management* https://github.com/final-form/react-final-form

Create React App* https://github.com/facebook/create-react-app

React Boilerplate https://github.com/react-boilerplate/react-boilerplate

React Patterns* https://reactpatterns.com/

React Higher Order Components in depth* https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

The Present Future of User Interface Development* https://medium.com/@jevakallio/the-present-future-of-user-interface-development-ebd371255175

Machine Learning-Driven Bundling. The Future of JavaScript Tooling. http://blog.mgechev.com/2018/03/18/machine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react/

Build your own React https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec

React Suspense (loading indicator for nested components)* https://medium.com/@lmatteis/react-suspense-for-the-layman-caae7f48686f

A Comprehensive Guide to Test-First Development with Redux, React, and Immutable https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

Bringing DataTables to React-Redux https://blog.kenforthewin.com/bring-datatables-to-react-redux/

React Table* https://react-table.js.org

Reactabular - A framework for building the React table you need* https://github.com/reactabular/reactabular

A smart data table component for React.js meant to be configuration free* https://github.com/joaocarmo/react-smart-data-table

High performance listview for React Native and web!* https://github.com/Flipkart/recyclerlistview

Beautiful, accessible drag and drop for lists with React.js https://github.com/atlassian/react-beautiful-dnd

Scaling your Redux App with ducks* https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be

Re-ducks: An attempt to extend the original proposal for redux modular architecture* https://github.com/alexnm/re-ducks

Redesigning Redux* https://hackernoon.com/redesigning-redux-b2baee8b8a38

Redux Reduced* https://github.com/rematch/rematch

Reusing Reducer Logic https://github.com/reactjs/redux/blob/master/docs/recipes/reducers/ReusingReducerLogic.md

Selector library for Redux https://github.com/reactjs/reselect

Step by Step Guide To Building React Redux Apps (Thinking in Components [State, Actions, Containers, Components])* https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a

Vertical Rhythm and Font Baselines with Styled Components https://github.com/ceteio/styled-components-rhythm

All hail Unistore https://medium.com/@tevthuku/all-hail-unistore-9b2f79184592

Kea is a state management library for React. It empowers Redux, making it as easy to use as setState while retaining composability and improving code clarity* https://kea.js.org/

Feature flagging made easy for React and Redux https://github.com/garbles/flag

Embracing real-time feature toggling in your React application* https://techblog.commercetools.com/embracing-real-time-feature-toggling-in-your-react-application-a5e6052716a9

Flip or flop features in your React application in real-time backed by flag provider of your choice* https://github.com/tdeekens/flopflip

Controlled and uncontrolled form inputs in React don't have to be complicated* https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

Avoid bind when passing props https://daveceddia.com/avoid-bind-when-passing-props/

React Blessed: ASCII Dashboard https://www.npmjs.com/package/react-blessed-contrib

React JSX Parser https://github.com/TroyAlford/react-jsx-parser

docz: Zero Config, MDX (with Typescript) documentation for React https://www.docz.site/

React Internationalization – How To* https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/

SVG to React* https://savage.now.sh/

How do I GraphQL?* https://dev-blog.apollodata.com/how-do-i-graphql-2fcabfc94a01

GraphQL explained https://dev-blog.apollodata.com/graphql-explained-5844742f195e

GraphQL Concepts Visualized* https://dev-blog.apollodata.com/the-concepts-of-graphql-bc68bd819be3

Example implementation + explanation + tutorial of a GraphQL server and client in node.js* https://github.com/theogravity/graphql-apollo-server-client-example

Introducing GraphQL Playground* https://blog.graph.cool/introducing-graphql-playground-f1e0a018f05d

An in-browser IDE for exploring GraphQL* https://github.com/graphql/graphiql

The JavaScript reference implementation for GraphQL https://github.com/graphql/graphql-js

GraphQL Playground Github* https://github.com/graphcool/graphql-playground

GraphQL Playground Desktop App* https://github.com/graphcool/graphql-playground/releases

Represent any GraphQL API as an interactive graph* https://apis.guru/graphql-voyager/

GraphQL Voyager Example* https://apis.guru/graphql-voyager/

Learn GraphQL by querying a schema based on JSON data https://www.graphql.college/practice-graphql/

Light, Electron-based Wrapper around GraphiQL https://github.com/skevy/graphiql-app

Awesome GraphQL* https://github.com/chentsulin/awesome-graphql

Vue.js 2.3 Complete API Cheat Sheet https://vuejs-tips.github.io/cheatsheet/

A simple, clean data table for vuejs with essential features like sorting, column filtering, pagination etc https://github.com/xaksis/vue-good-table

Code Splitting With Vue.js And Webpack https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

Authentication Best Practices for Vue* https://blog.sqreen.io/authentication-best-practices-vue/

Redux Vue Connect https://www.npmjs.com/package/redux-vue-connect

Creating Custom Inputs With Vue.js* https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/

Ember Feature Flags* https://github.com/kategengler/ember-feature-flags

Ember Visual Test* https://www.npmjs.com/package/ember-visual-test

Ember Data Preload https://www.npmjs.com/package/ember-data-preload

Ember Redux Mock Store Shim* https://www.npmjs.com/package/ember-redux-mock-store-shim

Ember GraphQL Adapter* https://www.npmjs.com/package/ember-graphql-adapter

Ember-cli-mirage: A client-side mock server to develop, test and prototype your app https://github.com/samselikoff/ember-cli-mirage

Measure user-percieved performance data in your ember.js app* https://github.com/mike-north/ember-perf

Ember Skeleton Screens and Container Components* https://emberway.io/skeleton-screen-loading-in-ember-js-2f7ac2384d63

Ember + ESLint + Prettier + Ember Suave* https://gist.github.com/sarupbanskota/2394fc439e538239a073c39514a5aa55

Ember Freestyle http://ember-freestyle.com/

Ember can React* http://unspace.github.io/ember-can-react/#1

Ember Lifecycle Hooks https://github.com/ksnyde/ember-lifecycle-hooks

Simple redux example to help inspire something like react-redux https://github.com/toranb/ember-redux-example

Ember Sass Pods (Sass with component directories)* https://www.npmjs.com/package/ember-cli-sass-pods

Ember-component-css https://www.npmjs.com/package/ember-component-css

Using React components in your Ember app https://medium.com/front-end-hacking/using-react-components-in-your-ember-app-8f7805d409b0

Making an Ember component more reusable* https://balinterdi.com/blog/making-an-emberjs-component-more-reusable/

Continuous Visual Integration for Ember apps* https://balinterdi.com/blog/continuous-visual-integration-for-ember-apps/

Complex Component Design in Ember.js https://balinterdi.com/blog/complex-component-design-in-ember-intro/

Complex Components in Ember.js - Part 1 - Analyzing user flows https://balinterdi.com/blog/complex-components-in-ember-dot-js-part-1-analyzing-user-flows/

Complex Components in Ember - Part 2 - A more reactive component https://balinterdi.com/blog/complex-components-in-ember-dot-js-part-2-towards-a-more-reactive-component/

Complex Component Design in Ember - Part 3 - Replace the observer https://balinterdi.com/blog/complex-component-design-in-ember-replace-the-observer/

Complex Component Design in Ember - Part 4 - Use the hash helper https://balinterdi.com/blog/complex-component-design-in-ember-part-4-use-the-hash-helper/

Ember Redux* https://github.com/ember-redux/ember-redux

Ember Changeset* https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a

Ember Redux DDAU http://www.ember-redux.com/ddau/

Functional Programming In Ember? The Ember-Redux Origin Story* https://vimeo.com/166199795

The hidden power of Handlebars partials (Layouts and Design Systems) https://cloudfour.com/thinks/the-hidden-power-of-handlebars-partials/

Ember Freestyle (Living Style Guide) https://github.com/chrislopresto/ember-freestyle

Ember Cli file creator https://www.npmjs.com/package/ember-cli-file-creator

Ember React Presentation http://ghempton.github.io/ember-react-preso/

Ember React Project https://github.com/ghempton/ember-react

Visualise Ember-cli build statistics: Broccoli Viz Sunburst* https://github.com/benblank/broccoli-viz-sunburst

10 Tips for Javascript Debugging Like a PRO with Console* https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6

Subfont: A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page.* https://www.npmjs.com/package/subfont

Progressive web metrics at your fingertipz* https://github.com/paulirish/pwmetrics/

Loading Third-Party JavaScript https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/

What is the maximum size of a JavaScript object in browser memory? https://www.quora.com/What-is-the-maximum-size-of-a-JavaScript-object-in-browser-memory

A powerful UI toolkit for managing JavaScript apps https://github.com/kitze/JSUI

Generation of diagram and flowchart from text in a similar manner as markdown* https://github.com/knsv/mermaid

20 Node.js modules you need to know https://www.creativebloq.com/features/20-nodejs-modules-you-need-to-know

JavaScript Performance Monitor* https://github.com/mrdoob/stats.js/

Minimal monitor for JS Heap Size via performance.memory* https://github.com/paulirish/memory-stats.js

Tools I wish I had known about when I started coding https://medium.freecodecamp.org/tools-i-wish-i-had-known-about-when-i-started-coding-57849efd9248

Flow Diagrams and Decision Trees* https://coggle.it/

Using Chrome as a Local Web Server https://medium.com/@jmatix/using-chrome-as-a-local-web-server-af04baffd581

Cool Chrome DevTools tips and tricks you wish you knew already https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2

CSSStats (CSS Complexity Report)* https://github.com/cssstats/cssstats

Plato (Code Complexity Report)* https://github.com/es-analysis/plato

PULL_REQUEST_TEMPLATE https://github.com/coryhouse/react-slingshot/blob/master/PULL_REQUEST_TEMPLATE.md

CSS at Scale: LinkedIn's New Open Source Projects Take on Stylesheet Performance* https://engineering.linkedin.com/blog/2018/04/css-at-scale--linkedins-new-open-source-projects-take-on-stylesh

Confused About REM and EM?* https://j.eremy.net/confused-about-rem-and-em/

Contextual styling with custom properties http://simurai.com/blog/2018/04/01/contextual-styling

Contextual styling with custom properties (in SCSS)* simurai/simurai.com#13

Naming Conventions for Sizes in Scalable CSS https://speckyboy.com/naming-conventions-sizes-scalable-css/

CSSess is a JS tool that helps find extra CSS rules on your site. It is designed to be used as a bookmarklet. https://github.com/driverdan/cssess

CSS Critic: CSS Regression Testing https://github.com/cburgmer/csscritic

Backstop: Catch CSS curve balls. https://github.com/garris/BackstopJS

Spectre: A simple UI for browsing and inspecting CSS diffs* https://github.com/wearefriday/spectre

JWT.IO allows you to decode, verify and generate JWT. https://jwt.io/

CI and CD with Gitlab runner on Digital Ocean https://www.digitalocean.com/community/tutorials/how-to-autoscale-gitlab-continuous-deployment-with-gitlab-runner-on-digitalocean

Continuous Delivery and Continuous Deployment for Kubernetes (part 1) https://codefresh.io/kubernetes-tutorial/cd_helm_kubernetes_microservices_1/

Danger runs after your CI, automating your team's conventions surrounding code review* https://github.com/danger/danger

HTML Modules https://glitch.com/edit/#!/html-modules

How to communicate tech debt in your organization https://hackernoon.com/how-to-communicate-tech-debt-in-your-organization-f22a43633656

ES6 Generators: Complete Series https://davidwalsh.name/es6-generators

Why Can’t Anyone Write a Simple es6 Generators Tutorial https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-es6-generators-tutorial-ec2bbdf6ff45

How to Write CSS That Works in Every Browser, Even the Old Ones https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/

Getting Vanilla ready for v1: the roadmap https://design.canonical.com/2016/07/getting-vanilla-ready-for-v1-the-roadmap/

Today I found out that nearly all browsers have an Intl object that handles formatting for DateTime, Currency, Number, and Pluralization! 🤯 https://twitter.com/lukeed05/status/978014294875914240

Visualize your cloud architecture like a pro https://cloudcraft.co/

Effectively Managing Memory at Gmail scale https://www.html5rocks.com/en/tutorials/memory/effectivemanagement/

AngularPlayground http://www.angularplayground.it/

ReactShowroom https://github.com/OpusCapita/react-showroom-client

SkateJS is a web component library designed to give you an augmentation of the web component specs https://github.com/skatejs/skatejs

Dead Simple Web Components http://www.grml.in

Webdash helps you visualize, monitor & manage your web project using community-driven plugins* https://webdash.xyz/

Find the cost of adding a npm package to your bundle* https://bundlephobia.com/

Multi-framework javascript browser testing* https://github.com/defunctzombie/zuul

Testing Components https://guides.emberjs.com/v3.0.0/testing/testing-components/

Monkey Testing via Gremlins.js https://github.com/marmelab/gremlins.js/blob/master/README.md

Software Testing Anti-patterns* http://blog.codepipes.com/testing/software-testing-antipatterns.html

zxcvbn: Low-Budget Password Strength Estimation* https://github.com/dropbox/zxcvbn

Crypto JS https://github.com/sytelus/CryptoJS

Json-server: REST API (prototyping and mocking) with zero coding in less than 30 seconds* http://nmotw.in/json-server/

Web-Services Testing Made Simple https://github.com/intuit/karate

Behave Pro - BDD & Agile Testing in Jira https://marketplace.atlassian.com/plugins/pro.behave.hosted/cloud/overview

Pioneer is an easy to understand javascript DSL to interact with your app via a real browser and test its state against expectations http://pioneerjs.com

Modern Era Acceptance Testing for NodeJS https://codecept.io

AcceptJS is an acceptance testing framework built on top of Selenium WebDriver API https://github.com/hamid6/acceptjs

Webpack Dashboard* https://github.com/FormidableLabs/webpack-dashboard

Webpack bundle analyzer* https://github.com/webpack-contrib/webpack-bundle-analyzer

PWA Builder (analyses your site and makes recommendations) https://www.pwabuilder.com/

Taxonomy of Tech Debt https://engineering.riotgames.com/news/taxonomy-tech-debt

Open-source error tracking that helps developers monitor and fix crashes in real time. https://sentry.io/welcome/

Front End Masters https://frontendmasters.com/books/front-end-handbook/2018/

UXPin http://www.uxpin.com

ZeroHeight https://zeroheight.com/

Invision DSM https://support.invisionapp.com/hc/en-us/articles/115005685166

Electrode http://www.electrode.io/

Screely instantly turns your screenshot or design into a beautiful image you can share anywhere https://www.screely.com/

Acephalic Agile—worse than Waterfall? https://tech.labs.oliverwyman.com/blog/2018/05/16/acephalic-agile/

DSDM https://en.wikipedia.org/wiki/Dynamic_systems_development_method

JSCity is an implementation of the Code City metaphor for visualizing source code. JSCity represents a JavaScript program as a city* https://github.com/ASERG-UFMG/JSCity/wiki/JSCITY

Open source workshops that teach web software skills* https://nodeschool.io/

Move an async function into its own thread* https://github.com/developit/greenlet

Most Useful Command Line Tools: 50 Cool Tools to Improve Your Workflow, Boost Productivity, and More* https://stackify.com/top-command-line-tools/

How to rethink the Design process, fail, reflect and iterate* https://uxdesign.cc/how-to-fuck-up-the-design-thinking-process-and-make-it-right-dc2cb7a00dca

Forget about react/angular/flux/redux, design your app first — part 1/3 https://medium.com/@bohou/forget-about-react-angular-flux-redux-design-your-app-first-part-1-3-92159010d415

Amara's Law https://en.wikipedia.org/wiki/Roy_Amara

Colour Picker for Data Visualisation* http://projects.susielu.com/viz-palette

How to escape async/await hell* https://medium.freecodecamp.org/avoiding-the-async-await-hell-c77a0fb71c4c

THE MARVELLOUSLY MYSTERIOUS JAVASCRIPT MAYBE MONAD* https://jrsinclair.com/articles/2016/marvellously-mysterious-javascript-maybe-monad/

A tale of Webpack 4 and how to finally configure it in the right way https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1

CSS is Awesome https://css-tricks.com/css-is-awesome/

Change And Its Detection In JavaScript Frameworks https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Refactoring* https://sourcemaking.com/refactoring

Strategy, not Technology, Drives Digital Transformation* https://sloanreview.mit.edu/projects/strategy-drives-digital-transformation/

Ponyfill: Like polyfill but with pony pureness* https://github.com/sindresorhus/ponyfill

Gifsockets (because ... you can) https://github.com/videlalvaro/gifsockets