/fundbuero

fundbuero is my personal collection of interesting stuff from the web.

fundbüro

fundbüro is my personal collection of interesting things from the web.

Basics & Learning

Base libs

General helpers

  • lodash provides great helpers for dealing with arrays and objects.
  • i18next is a full-featured i18n javascript library for translating your webapplication.
  • strman is a JavaScript string manipulation library without npm dependencies.
  • date-fns is a modern JavaScript date utility library.
  • common-tags provide useful template literal tags for dealing with strings in ES2015+.
  • just is a library of dependency-free utilities that do just do one thing.
  • superstruct provides a simple and composable way to validate data in JavaScript.
  • dlv provides safe deep property access in 128 bytes. See also idx or lodash/get.

Dealing with async code

  • async provides async utilities for node and the browser.
  • asynquence provides promise-style async sequence flow-control.
  • vo is a control flow library for minimalists.
  • promise-frites provides promise utilities.
  • callbag is a tiny and fast reactive/iterable programming library.

Streams

  • highland.js provides High-level streams library for Node.js and the browser.
  • pull-stream provides a minimal streams.
  • pump pipes streams together and closes all of them if one of them closes.
  • pumpify combines an array of streams into a single duplex stream.
  • mississippi is a collection of useful stream utility modules for writing better code using streams.

Frontend

Styling

  • patternbolt is a election of SVG pattern background, packed in a single CSS or SCSS file.
  • Bytesize Icons is a tiny style-controlled SVG iconset.

Styling with CSS

  • base-files is a plain CSS starter kit.
  • primercss.io "The CSS toolkit and guidelines that power GitHub."
  • CSS-Best-Practices "Notes meant as a guide for writing clean CSS"
  • milligram is a a minimalist CSS framework.
  • grd is a CSS grid framework using Flexbox. Only 512 bytes (Gzipped).
  • layout.css is a wrapper around flexbox to make doing flexbox layouts simple and declarative. Inspired by polymer.
  • tachyons provides Functional CSS for humans.
  • tailwindcss is a utility-first CSS framework for rapid UI development.
  • css-gridish automatically builds your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.

Styling with JS

  • css-in-js is a CSS in JS techniques comparison.
  • free-style makes CSS easier and more maintainable by using inline style objects.
  • glamor provides inline css for react et al.
  • glamorous provides React component styling solved with an elegant (inspired) API, small footprint, and great performance (via glamor).
  • styled-components provide visual primitives for the component age.
  • jss is an abstraction over CSS.
  • react-with-styles let's you use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation.

DOM

  • sprint is a tiny, lightning fast jQuery-like library for modern browsers.
  • zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API .
  • jQuery
  • You-Dont-Need-jQuery provides examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.
  • fastdom eliminates layout thrashing by batching DOM measurement and mutation tasks.
  • vdom provides a DOM create and patch algorithm for vtree.

Input & Interactions

  • draggabilly makes things draggable.
  • dragscroll is a tiny library for drag-n-drop scrolling style.
  • hammer.js is a JavaScript library for multi-touch gestures.
  • pressure.js is a JavaScript library for handling both Force Touch and 3D Touch on the web.
  • zingtouch is a JavaScript touch gesture detection library for the modern web.

Conversational Interfaces

  • botui is a JavaScript framework to build UI for your bot.
  • bottender lets you make bots in your way, fast and flexibly.

Drawing & Imaging

Media

  • FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
  • howler.js is a JavaScript audio library for the modern web.

Micro Components

  • balloon.css provides simple tooltips made of pure CSS.
  • Slideout.js is a touch slideout navigation menu for your mobile web apps.
  • layzr.js is a small, fast, modern, and dependency-free library for lazy loading.
  • minigrid is minimal 2kb zero dependency cascading grid layout.
  • FieldKit lets you take control of your text fields.
  • cleave.js lets you format input text content when you are typing.
  • Jets.js is a native CSS search engine.
  • tether.js is a library for efficiently making an absolutely positioned element stay next to another element on the page.
  • popper.js is a positioning engine, its purpose is to calculate the position of an element.
  • clipboard.js provides modern copy to clipboard. No Flash.
  • in-view notifies you when a DOM element enters or exits the viewport.
  • localForage provides offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
  • Clusterize.js is a tiny vanilla JS plugin to display large data sets easily.
  • fitty makes text fit perfectly.
  • scroll provides a function that animates an element’s scrollTop/scrollLeft positions.
  • lozad.js is a highly performant, light ~0.5kb and configurable lazy loader with no dependencies for images, iframes and more.
  • genie.js is a keyboard control for web applications inspired by Alfred.
  • scrollama is a helper for Scrollytelling with IntersectionObserver.
  • driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page.
  • scroll-into-view-if-needed is an Element.scrollIntoView ponyfills for things like "if-needed" and "smooth".

Grid Layouts

  • muuri provides responsive, sortable, filterable and draggable grid layouts.

Webapp Components

Routers

  • history manages session history with JavaScript.
  • router5 is a flexible and powerful universal routing solution.

Editors

  • slate.js is a completely customizable framework for building rich text editors.
  • Draft.js is a rich Text Editor Framework for React.
  • mobiledoc-kit is a toolkit for building WYSIWYG editors with Mobiledoc.

DataGrids

  • ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components.

Website Components

  • PhotoSwipe is an image gallery for mobile and desktop, modular, framework independent.
  • okayNav is a responsive navigation plugin für jQuery.
  • bootstrap-easy-sidebar is sidebar for bootstrap designed around theme integration and flexibility.

Mobile

  • ionic is a beautiful, open source front-end SDK for developing amazing mobile apps with web technologies.
  • TouchstoneJS is a React.js powered UI framework for developing beautiful hybrid mobile apps.

Animation/Transitions

  • Velocity.js is an accelerated animation engine with the same API as jQuery's $.animate().
  • anime.js is a flexible yet lightweight JavaScript animation library.
  • popmotion is a functional, flexible JavaScript motion library.
    • popmotion/pose is a declarative motion system for HTML, SVG, React & React Native.
  • mo.js is a motion graphics toolbelt for the web.
  • Rebound.js provides spring dynamics in JavaScript.
  • react-spring is helping react-motion and animated to become best friends.
  • reaction-motion is a spring that solves your animation problems.
  • GSAP is a full-blown animation and tweening engine that also supports timelines.
  • dynamics.js lets you create physics-based animations.
  • raf is a requestAnimationFrame polyfill.
  • loaders "Delightful and performance-focused pure css loading animations."
  • granim.js creates fluid and interactive gradients animations.

Charting & Graphing

  • dc.js provides Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js.
  • epoch is a general purpose, real-time visualization library based on d3.
  • MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data.
  • c3.js is a D3-based reusable chart library.
  • Labella.js enables placing labels on a timeline without overlap.
  • nivo provides a rich set of dataviz components, built on top of d3 and React.
  • vx react + d3 = vx | visualization components.
  • sparkline generate SVG sparklines with JavaScript without any external dependency.

Physics

  • TremulaJS Picture Streams + Momentum Engine + Bézier Paths + Multi-Device.

Drawing and Rendering frameworks

  • Pixi.js is a super fast HTML 5 2D rendering engine that uses webGL with canvas fallback

UI libraries and frameworks

  • React is a view layer based upon the concept of a virtual DOM.
  • vue.js is a simple yet powerful library for building modern web interfaces.
  • choo is a sturdy 4kb frontend framework.
  • riot.js is a React-like, 3.5KB user interface library.
  • hyperHTML is a fast & light virtual DOM alternative.

Design Systems

  • seek-style-guide/ is the living style guide for SEEK, powered by React, webpack, CSS Modules and Less.
  • gestalt is a set of components that supports Pinterest’s design language.
  • carbon-design-system is the design system for IBM Cloud products.

React

  • nwb provides a toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration.
  • Wrapping DOM libs explains how to make React work with traditional DOM libs.
  • react-awesome-components is catalog of React components.
  • react-sketchapp renders React components to Sketch.

React.Concepts

React.Helpers

  • recompose is a React utility belt for function components and higher-order components.
  • react-helmet is a document head manager for React.
  • repng converts React components to PNG.
  • loadable-components makes React code splitting easy.
  • react-loadable is a higher order component for loading components with promises.
  • react-perimeter creates an invisible perimeter around an element and respond when its breached.
  • react-scrolllock prevents scroll on body.
  • why-did-you-update puts your console on blast when React is making unnecessary updates.
  • exenv provides React's ExecutionEnvironment module extracted for use in other packages & components.

React.Routing

React.Interactions

React.UI-Components

  • belle is a collection of configurable React Components.
  • react-dates is an accessible, easily internationalizable, mobile-friendly datepicker library for the web
  • react-date-range is a React component for choosing dates and date ranges.
  • reactable provides fast, flexible, and simple data tables.
  • react-select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and async support.

React.Meta-Components

  • boron is a collection of dialog animations with React.js.
  • react-tween-state is a tweening solution for React.js.
  • react-virtualized provides React components for efficiently rendering large lists and tabular data.
  • react-spring is helping react-motion and animated to become best friends.
  • react-game-kit is a component library for making games with React & React Native.
  • downshift provides primitives to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components.
  • react-content-loader uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded.

React.Forms

  • react-jsonschema-form is a React component for building Web forms from JSONSchema.
  • formsy-react is a form input builder and validator for React.
  • redux-form is a Higher Order Component using react-redux to keep form state in a Redux store.
  • formstate provides form state so simple that you will fall in love.
  • formik provides forms in React, without tears.

React.UI.Frameworks

  • material-ui provides React Components that Implement Google's Material Design.
  • office-ui-fabric-react provides React components for building experiences for Office and Office 365.
  • blueprint is a React-based UI toolkit for the web.
  • Semantic-UI-React is the official Semantic-UI-React integration.
  • arwes is a futuristic sci-fi and cyberpunk GUI framework for web apps.

React.Performance

React.Testing

  • enzyme provides JavaScript Testing utilities for React.

Stores & State Container

  • mobx provides simple, scalable state management. .
  • Redux provides predictable state management for JavaScript apps.
  • PureState is the stupidest state management library that works.
  • freezer an immutable tree data structure that is always updated from the root, making easier to think in a reactive way.
  • scour is a general-purpose library for dealing with JSON trees.
  • baobab is a JavaScript persistent and optionally immutable data tree with cursors.

Data Fetching

  • ladda is a JavaScript data fetching layer with caching.
  • sheetsee.js is a client-side library for connecting Google Spreadsheets to a website and visualizing the information in tables and maps.

Static site generators

  • gatsby is a blazing fast static site generator for React.
  • react-static is a progressive static site generator for React.

Hacks & Tricks

Inspiration

Automation

  • hygen is a simple, fast, and scalable code generator that lives in your project.

Frontend Backend Communication

  • socket.io enables real-time bidirectional event-based communication.
  • oboe.js enables streaming JSON from server to client.

Data

  • sql.js is SQLite compiled to JavaScript through Emscripten.
  • PouchDB is a pocket-sized database.
  • NeDB is a MongoDB compatible datastore written in JavaScript.
  • Yjs is a framework for real-time p2p shared editing on any data.

Building and Bundling

  • webpack is a bundler for JavaScript and friends.
  • rollup is a module bundler for JavaScript.
  • browserify provides browser-side require() the node.js way.
  • budo is a dev server for rapid prototyping.
  • bankai is a streaming {js,html,css} compiler.
  • autoprefixer parses CSS and adds vendor prefixes to rules.
  • uncss removes unused styles from CSS.
  • imagemin minifies PNG, JPEG, GIF and SVG images.

webpack

Browser Testing & Automation

  • puppeteer provides a high-level API to control headless Chrome.
  • nightmare is a high-level browser automation library.
  • webdriverio is a webdriver (browser automation) module for Node.js.
  • pixelmatch is a small, simple and fast JavaScript pixel-level image comparison library.
  • sharp provides high performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images.

Machine Learning & AI

  • brain.js provides neural networks in JavaScript.

Tools

  • ai2html is a script for Adobe Illustrator that converts your Illustrator document into html and css.
  • wzrd is a super minimal browserify development server.
  • sizzy is a tool for developing responsive websites crazy-fast.
  • insomnia is a cross-platform REST client, built on top of Electron.

Storytelling

  • reveal.js is the HTML Presentation Framework.
  • Spectacle is a React based Presentation Library.
  • decktape is an PDF exporter for HTML presentation frameworks.
  • lagom.js is a simplistic presentation generator.

Mapping

  • turf.js is a modular geospatial engine written in JavaScript.
  • ngraph.path provides path finding in a graph.
  • geo-maps provides high Quality GeoJSON maps programmatically generated.
  • flatbush is a very fast static spatial index for 2D points and rectangles in JavaScript.

Desktop

  • electron is across-platform desktop application shell by github.
  • muon is a framework that leverages the full power of Chromium including extensions support, and allows you to build browsers and browser like applications with HTML, CSS, and JavaScript.
  • nativefier wraps any web page natively without even thinking, across Windows, OSX and Linux.
  • electron-packager packages and distributes your electron app in OS executables (.app) via JS or CLI.
  • menubar is a high level way to create menubar desktop applications with electron.
  • nw.js "Call all Node.js modules directly from DOM and enable a new way of writing applications with all Web technologies."

Tracing / Profiling / Debugging

  • vector is an on-host performance monitoring framework which exposes hand picked high resolution metrics to every engineer’s browser.
  • statsd is a simple daemon for easy stats aggregation.

IoT

  • awesome-open-iot is a curated list of awesome open source IoT frameworks, libraries and software.

WebRTC / P2P

  • simple-peer provides simple WebRTC video/voice and data channels for the browser and Node.js.

Language & Speech

  • nlp_compromise is a cool way to use natural language in JavaScript.
  • tesseract.js provides pure Javascript OCR for 62 Languages.
  • annyang is a tiny SpeechRecognition library that lets your users control your site with voice commands.
  • github.com/words is a collection of linguistic javascript modules.

Misc

  • HEAD is a list of everything that goes in the head of your document.
  • airpaste is a 1-1 network pipe that auto discovers other peers using mdns.
  • node_mdns enables mdns/zeroconf/bonjour service discovery add-on for Node.js.
  • tern.js is a stand-alone code-analysis engine for JavaScript.
  • twemoji provides Twitter Emojis for everyone.

CLI

  • ora is an elegant terminal spinner.
  • cli-spinners is a collection of spinners for use in the terminal.

Print

  • Gutenberg is a modern framework to print the web correctly.
  • pdfmake provides client/server side PDF printing in pure JavaScript.

Design

  • awesome-design is a collection of UI/UX design resources for developers & designers.
  • [webgradients.com]https://webgradients.com/) is a free collection of 180 linear gradients that you can use as content backdrops.

Typo

  • Asap is a contemporary sans-serif family with subtle rounded corners.
  • hack is a typeface designed for source code.
  • Cairo is a contemporary Arabic and Latin typeface family.
  • Maven Pro is a sans-serif typeface with unique curvature and flowing rhythm.
  • Titillium was born inside the Accademia di Belle Arti di Urbino as a didactic project Course Type design of the Master of Visual Design Campi Visivi.

Discussions