Skip to content

Instantly share code, notes, and snippets.

@dtimmerman
Last active April 7, 2018 03:49
Show Gist options
  • Save dtimmerman/50c3d8329b6b83880ab8513b3883fa24 to your computer and use it in GitHub Desktop.
Save dtimmerman/50c3d8329b6b83880ab8513b3883fa24 to your computer and use it in GitHub Desktop.
favorite links

Favorite Software Projects

React

^ back to top

React: Universal Component Libraries

  • pinterest/gestalt

    Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

  • Semantic-Org/Semantic-UI-React

    Semantic UI React is the official React integration for Semantic UI (a development framework that helps create beautiful, responsive layouts using human-friendly HTML).

React: Utilities

  • acdlite/recompose

    A React utility belt for function components and higher-order components. "like lodash for react"

  • renatorib/react-powerplug

    React PowerPlug is a set of pluggable renderless components that provides different types of state and logics so you can use with your dumb components. It creates a state and pass down the logic to the children, so you can handle your data/callbacks.

  • AlexGilleran/jsx-control-statements

    JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null.

React: Styling

  • styled-components/styled-components

    Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

  • FormidableLabs/radium

    A toolchain for React component styling. Extends normal inline styles, provides API for declaring browser state styles such as :hover, provides API for declaring media queries.

  • Khan/aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Colocate your styles within your Javascript component.

React: Learning

  • krasimir/react-in-patterns

    List of design patterns/techniques used while developing with React. Foundational topics (event handlers, children, HOC's, etc), dependency management, data flow, third party library integration.

React: Layout Management

  • tcoopman/react-flexbox

    Implementation of css flexbox in react with inline styles. It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for it I can add a transpiled version to the repo.

  • tajo/react-portal

    Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its children into it. That's necessary for proper styling (especially positioning). Uses React v16 and its official API for creating portals

  • brigade/react-waypoint

    A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window. React Waypoint can be used to build features like lazy loading content, infinite scroll, scrollspies, or docking elements to the viewport on scroll.

  • ReactTraining/react-media

    react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based on whether the query matches or not.

React: Application / Shared Concerns

  • enactjs/enact

    The goal of Enact is to provide the building blocks for creating robust and maintainable applications. To that end, we've pulled together the best solutions for internationalization (i18n), accessibility (a11y), focus management, linting, testing and building. Then, we created a set of reusable components and behaviors on top of that. We combined these pieces and ensured that they work together seamlessly, allowing developers to focus on implementation.

Data (Client)

^ back to top

Data (Client): State Management

  • mobxjs/mobx

    MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).

  • facebook/flux

    An application architecture for React utilizing a unidirectional data flow.

  • reactjs/redux

    Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

  • reactjs/reselect

    Simple “selector” library for Redux inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

  • redux-observable/redux-observable

    RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.

  • gaearon/redux-thunk

    Thunk middleware for Redux. Allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

  • redux-saga/redux-saga

    redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.

  • keajs/kea

    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.

  • optimizely/nuclear-js

    Traditional Flux architecture built with ImmutableJS data structures. Framework agnostic.

Data (Client): Data Structures

  • facebook/immutable-js

    Immutable persistent data collections for Javascript which increase efficiency and simplicity. Provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

Data (Client): Data Manipulation and Validation

  • paularmstrong/normalizr

    Normalizr is a small, but powerful utility for taking JSON with a schema definition and returning nested entities with their IDs, gathered in dictionaries.

Tooling

^ back to top

  • storybooks/storybook

    Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

  • bit

  • openbot/openbot

    An unoptionated bot driven by a configuration file in the repository. Operates on issue/PRs. Triggered by webhook event or manual batch processing (CLI). Rules specify behavior. Runs on AWS with serverless.

  • cypress

    Fast, easy and reliable testing for anything that runs in a browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment