Skip to content

mattwagl/fundbuero

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

🧳 fundbüro [ˈfʊntbyroː]

fundbüro is my personal collection of interesting things.

👉 fundbüro [ˈfʊntbyroː] is the German translation for “Lost and found office”.

Table of contents

Basics & Concepts

JavaScript

Node.js

Data Structures & Algorithms

Testing

Version Control

  • Conventional Commits is a specification for adding human and machine readable meaning to commit messages.

Architecture

Domain-Driven Design

Field Reports & Product Analysis

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.
  • tinydate is a tiny (340B) reusable date formatter. Extremely fast!
  • 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.
  • emuto transforms and queries data structures like JSON, text, csv, tsv, and dsv.
  • big.js is a small, fast JavaScript library for arbitrary-precision decimal arithmetic.
  • klona is a tiny (366B) and fast utility to "deep clone" Objects, Arrays, Dates, RegExps, and more.

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.

EventEmitter

  • emittery is a simple and modern async event emitter.

Rate limiting and queueing

  • deque is an extremely fast double-ended queue implementation.
  • async-sema is a semaphore using async and await.

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.

Dates & Time

  • moment.js is a JavaScript date library for parsing, validating, manipulating, and formatting dates.
  • You-Dont-Need-Momentjs provides a list of date-fns or native functions which you can use to replace moment.js.
  • date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
  • Day.js is a 2KB immutable date library alternative to Moment.js with the same modern API.

Validation

  • iodine is a micro client-side validation library.

Search

  • fuzzysearch is a iny and blazing-fast fuzzy search in JavaScript.
  • Fuse provides lightweight fuzzy-search, in JavaScript.

Frontend

Basics

Icons

  • Bytesize Icons is a tiny style-controlled SVG iconset.
  • iconify is universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (100+ icon sets, 100,000+ icons).

Styling

  • patternbolt is a election of SVG pattern background, packed in a single CSS or SCSS file.

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.
  • Pure CSS scrolling shadows with background-attachment: local is an article by Ley Verou about creating scroll shadows with CSS only.

Styling with JS

  • emotion is a CSS-in-JS library designed for high performance style composition.
  • css-in-js is a CSS in JS techniques comparison.
  • free-style makes CSS easier and more maintainable by using inline style objects.
  • jss is an abstraction over CSS.
  • polished provides Sass-style helper functions for writing styles in JavaScript.
  • stitches provides CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
  • twind is the smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

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.
  • cash is an absurdly small jQuery alternative for modern browsers.

Webworker & "Multi-Threading"

  • comlink makes WebWorkers enjoyable.
  • partytown relocates resource intensive third-party scripts off of the main thread and into a web worker.

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.
  • artyom.js is a voice control - voice commands - speech recognition and speech synthesis javascript library.

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.
  • wavesurfer.js provides navigable waveform built on Web Audio and Canvas.
  • video.js is an Open Source HTML5 & Flash video player.

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.
  • floating-ui is a low-level toolkit to position floating elements while intelligently keeping them in view. Tooltips, popovers, dropdowns, menus, and more .
  • 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".
  • WinBox is an HTML5 window manager for the web: lightweight, no dependencies, fully customizable.

Grid Layouts

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

Application 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 Components

  • 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

  • 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.
  • 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

  • datavizcatalogue.com is a handy guide and library of different data visualization techniques.
  • 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.
  • muze provides composable data visualisation library for web with a data-first approach.
  • vega & vega-lite Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.
  • reaviz is a data visualization library for React based on D3.
  • d3fc is a collection of components that make it easy to build interactive charts with D3 using SVG, Canvas and WebGL.

Graphs and Flows

  • flowy is a minimal javascript library to create flowcharts.
  • algorithm-visualizer is an interactive online platform that visualizes algorithms from code.

Physics

  • TremulaJS Picture Streams + Momentum Engine + Bézier Paths + Multi-Device.
  • Proton is a particle engine for JavaScript.

Gaming, Drawing and Creative Coding

  • Pixi.js is a super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.
  • p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing.
  • pts is a library for visualization and creative-coding.
  • canvas-sketch is a (beta) framework for making generative artwork in JavaScript and the browser.
  • stage.js is a 2D HTML5 rendering and layout engine for game development.

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.
  • heresy provides React-like Custom Elements via V1 API builtin extends.
  • alpine is a lightweight JavaScript framework.

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.
  • braid-design-system is the themeable design system for the SEEK Group.

React

React.Misc

React.Basics

React.Concepts

React.TypeScript

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 is React code splitting made 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-custom-scrollbars provides custom scrollbars as React component.
  • libreact is a collection of useful React components.
  • react-use Collection of essential React Hooks (Port of libreact).
  • the-platform is Web API's turned into React Hooks and Suspense-friendly React components.

React.Stores-And-State-Container

  • mobx provides simple, scalable state management. .
  • Redux provides predictable state management for JavaScript apps.
  • immer creates the next immutable state by mutating the current one.
  • unistore is 350b / 650b state container with component actions for Preact & React.
  • xstate provides state machines and statecharts for the modern web.
  • 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.

React.CSS-in-JS

  • emotion is a CSS-in-JS library designed for high performance style composition.
  • styled-components provide visual primitives for the component age.
  • react-with-styles let's you use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation.
  • @compiled/css-in-js provides the CSS in JS authoring experience we love without the runtime cost.

React.Routing

React.Data-Fetching

  • swr provides React components for efficiently rendering large lists and tabular data.
  • react-query provides hooks for fetching, caching and updating asynchronous data in React.

React.Universal-Rendering

  • Next.js is a React hooks library for remote data fetching.
  • razzle enables server-rendered universal JavaScript applications with no configuration.

React.Interactions

React.Accessibility

  • react-aria is a library of React Hooks that provides accessible UI primitives for your design system.

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-laag provides primitives to build things like tooltips, dropdown menu's and popovers in React

React.Animation

  • framer/motion is an open source, production-ready animation and gesture library for React.
  • react-motion is a spring that solves your animation problems.
  • react-spring is helping react-motion and animated to become best friends.
  • react-move provides beautiful, data-driven animations for React.

React.Meta-Components

  • boron is a collection of dialog animations with React.js.
  • 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-powerplug is a set of pluggable renderless components and helpers that provides different types of state and logics so you can use with your dumb components.

React.Windowing

  • react-virtualized provides React components for efficiently rendering large lists and tabular data.
  • react-window provides React components for efficiently rendering large lists and tabular data.

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.Design-System-Basics

  • xstyled provides consistent theme based CSS for styled-components & emotion.
  • styled-system provides style props for rapid UI development .

React.UI-Frameworks

  • chakra-ui provides React Components that Implement Google's Material Design.
  • radix provides unstyled, accessible components for building high‑quality design systems and web apps in React.
  • 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.
  • reakit is a toolkit for building interactive UIs with React.
  • evergreen is a React UI Framework by Segment.
  • react-ui-kits is a list of UI Kits available for React and React Native.
  • prisma/lens is the Prisma design system.

React.Live-Coding-WYSIWYG

  • react-syntax-highlighter is a syntax highlighting component for react with prismjs or highlightjs ast using inline styles.
  • react-live provides a flexible playground for live editing React components.
  • jarle is Just Another React Live Editor.

React.Performance

React.Testing

  • enzyme provides JavaScript Testing utilities for React.

React.RealWorldApplications

  • dpla-frontend: React application for the Digital Public Library of America website.

React.Next.js

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.

Client-side Databases

  • 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.
  • Nano-SQL is a universal database layer for the client, server & mobile devices.

Static site generators

  • gatsby is a blazing fast static site generator for React.
  • react-static is a progressive static site generator for React.
  • eleventy is a simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.
  • eleventy-high-performance-blog A high performance blog template for the 11ty static site generator.

Hacks & Tricks

Inspiration

Sandboxing

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.
  • aedes is a barebone MQTT broker that can run on any stream server, the node way.

Building and Bundling

Bundler & Compiler

  • webpack is a bundler for JavaScript and friends.
  • rollup is a module bundler for JavaScript for libraries.
  • Parcel.js is a bundler focused on web applications.
  • browserify is a bundler focused on Node.js compatibility.
  • budo is a dev server for rapid prototyping.
  • bankai is a streaming {js,html,css} compiler.

Optimize & Minify

  • 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.

Image processing

  • sharp provides high performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images.
  • pixelmatch is a small, simple and fast JavaScript pixel-level image comparison library.
  • Resemble.js provides image analysis and comparison.

Deployment

  • fastlane builds and releases mobile apps.

Static servers

  • http-server is a simple zero-configuration command-line http server.
  • servor is a dependency free file server for single page app development.

Backend

Databases

  • ElectroDB is a DynamoDB library to ease the use of modeling complex hierarchical relationships and implementing a Single Table Design while keeping your query code readable.

Deployment

  • fly.io runs your full stack apps (and databases!) all over the world. No ops required.

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.
  • rclone is rsync for cloud storage.

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.
  • mdx-deck enables MDX-based presentation decks.

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.
  • opentrees is the front end for opentrees.org, a data visualisation of hundreds of thousands of council-maintained trees.

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.
  • electron-forge is a complete tool for creating, publishing, and installing modern Electron applications.
  • 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.

P2P / WebRTC

  • hypercore is a secure, distributed append-only log.
  • hyperdrive is a secure, real time distributed file system.
  • hypertrie is a distributed single writer key/value store.
  • dat is a distributed data community.
  • 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.
  • artyom.js is a voice control - voice commands - speech recognition and speech synthesis javascript library.

Misc

  • 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.

Services & APIs

Public Clouds

  • Scaleway Elements is a public cloud with data centers in Paris (France), Amsterdam (Netherlands) and Warsaw (Poland).

Mobile

Application Monitoring

i18n

Video

Testing

  • maze.design is a platform for user testing from first design mockup to a full-fledged product.
  • applitools.com is a test automation platform powered by Visual AI.
  • checklyhq.com is an API & E2E monitoring/testing platform.

Data Exploration & Data Science

  • datasette.io is an open source multi-tool for exploring and publishing data.

AI

CLI

  • ora is an elegant terminal spinner.
  • cli-spinners is a collection of spinners for use in the terminal.
  • oclif is a Node.js Open CLI Framework built by Heroku.

Package Mangement

  • verdaccio is a lightweight private npm proxy registry.

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.

Typography

Fonts

  • 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.
  • Cal Sans is the geometric sans-serif typeface to adorn the headlines and interfaces of Cal.com.

Tools

  • capsize is flipping how we define typography in CSS.

Discussions

About

fundbuero [ˈfʊntbyroː] is my personal collection of interesting stuff from the web.

Resources

Stars

Watchers

Forks

Languages