frontend-dev-bookmarks
Manually curated collection of resources for frontend web developers.
Communities Around Projects
Context: frontend-dev-bookmarks / Ecosystem
Successful open source projects attract many developers who produce plugins, libraries, tutorials and other resources. This section collects such resources.
- Angular: AngularJS is a web application framework trying to address many of the challenges encountered in developing single-page applications.
- Adventures in Angular: Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.
- Angular 2 ESNext Starter: This repo stands as a starting point for those who try Angular 2 in Javascript. It shows techniques how easy development can be also without Typescript.
- Angular 2 Template Syntax: Victor Savkin writes about Angular 2 Templates including bindings, interpolation, syntax sugar, web component support and much more.
- Angular 2 Upgrade Strategies from Angular 1.x: Some thoughts on general upgrading to Angular 2 and what you/your team can do to prepare.
- Building Redux in TypeScript with Angular 2: In this post we’re going to discuss the ideas behind Redux. How to build our own mini version of the Redux Store and hook it up to Angular 2.
- Change Detection in Angular 2: In this article Victor Savkin talks in depth about the Angular 2 change detection system.
- How to Implement Conditional Validation in Model-driven Forms: In this article, we will learn about how to handle conditional validation in our model-driven form using the latest forms module.
- How to Prevent Name Collisions in Angular 2 Providers: Opaque tokens are distinguishable and prevent us from running into naming collisions. Whenever we create a token that is not a type, OpaqueToken should be used.
- Ng-Newsletter: The free, weekly newsletter of the best AngularJS content on the web.
- PrimeNG: PrimeNG is a collection of rich UI components for AngularJS2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.
- Simple Language Translation: Create a pipe that we can use to translate words in the HTML view and a service that we can use to translate our words in JS / Typescript.
- Using Model-Driven Forms with FormGroup and FormControl: In this article, we will learn about building model-driven form with validation using the latest forms module, then we will talk about what are the advantages / disadvantages of using model driven form as compared to template-driven form.
- Backbone.js: Backbone supplies structure to JavaScript-heavy applications by providing models, collections, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
- Bootstrap: Bootstrap is a HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- Bootstrap 4 Cheat Sheet: A quick reference for Bootstrap v4 by Alexander Rechsteiner.
- Tree Shaking Bootstrap: Jacob Parker describes how to include only those parts of Bootstrap you are really using on your website by leveraging CSS modules and ES6 modules.
- Cycle.js: A functional and reactive JavaScript framework that solves the cyclic dependency of Observables which emerge during dialogues (mutual observations) between the Human and the Computer.
- Async Driver: Higher order factory for creating cycle.js async request based drivers. Allows you almost completely eliminate boilerplate code for this kind of drivers.
- Cycle.js Was Built to Solve Problems: In this video André Staltz shows how Cycle.js has a practical purpose, meant to solve problems your customers/business may relate to.
- Cycle.js and Functional Reactive User Interfaces: In this talk we will discover how Cycle.js is purely reactive and functional, and why it’s an interesting alternative to React.
- Draw Cycle: Simple Cycle.js program visualized
- Drivers: Drivers are functions that listen to Observable sinks (their input), perform imperative side effects, and may return Observable sources (their output).
- Animation: A Cycle driver for requestAnimationFrame.
- Audio Graph Driver: Audio graph driver for Cycle.js based on virtual-audio-graph.
- Cookie: Cycle.js Cookie Driver, based on cookie_js library.
- DOM: The standard DOM Driver for Cycle.js based on virtual-dom, and other helpers.
- Fetch: A Cycle.js Driver for making HTTP requests, using the Fetch API.
- Fetcher: A Cycle.js Driver for making HTTP requests using stackable-fetcher.
- Firebase: Thin layer around the firebase javascript API that allows you to query and declaratively update your favorite real-time database.
- HTTP: A Cycle.js Driver for making HTTP requests, based on superagent.
- Hammer.js: The driver incorporates the Hammer.js gesture library.
- History: Cycle.js URL Driver based on the rackt/history library.
- Keys: A Cycle.js driver for keyboard events.
- Mongoose.js: A driver for using Mongoose with Cycle JS. Accepts both, write and read operations.
- Notification: A Cycle.js Driver for showing and responding to HTML5 Notifications.
- Router: A router built from the ground up with Cycle.js in mind. Stands on the shoulders of battle-tested libraries switch-path for route matching and rackt/history for dealing with the History API.
- Router5: A source/sink router driver for Cycle.js, based on router5.
- Server-Sent Events: Cycle.js driver for Server-Sent Events (SSE), a browser feature also known as EventSource. Server-Sent Events allow the server to continuously update the page with new events, without resorting to hacks like long-polling.
- Snabbdom: Alternative DOM driver utilizing the snabbdom library.
- Socket.IO: A Cycle driver for applications using Socket.IO
- Storage: A Cycle.js Driver for using localStorage and sessionStorage in the browser.
- Example Projects: Example applications built with Cycle.js
- Cycle.js Examples: Browse and learn from examples of small Cycle.js apps using Core, DOM Driver, HTML Driver, HTTP Driver, JSONP Driver, and others.
- RX Marbles: Interactive diagrams of Rx Observables.
- TODO: Minimum Viable Pizza: Minimum Viable Pizza implemented with Cycle.js
- Tricycle: A scratchpad for trying out Cycle.js.
- Intro to Functional Reactive Programming with Cycle.js: Nick Johnstone gives an introduction to developing with Cycle.js in this video presentation.
- Learning How to Ride: an Introduction to Cycle.js: In this talk, Fernando Macias Pereznieto introduces us to the good, the bad, and the beautiful of using Cycle.js, whether you are a complete beginner or an experienced JS ninja.
- Motorcycle.js: This is a sister project that will continue to evolve and grow alongside Cycle.js for the foreseeable future. The primary focus of this project is to tune it for performance as much as possible.
- Most: Monadic reactive streams with high performance.
- Plug and Play All Your Observable Streams With Cycle.js: Frederik Krautwald explains the principles behind Cycle.js, it’s inner workings and how to use it to create a simple program with drivers.
- Tricycle: A scratchpad for trying out Cycle.js.
- What Developers Need to Know about MVI (Model-View-Intent): The article explains the general MVI pattern and how it relates to React, Reactive Programming and Cycle.js
- Dojo Toolkit: A JavaScript toolkit that saves you time and scales with your development process. Provides everything you need to build a Web app. Language utilities, UI components, and more, all in one place, designed to work together perfectly.
- Ember: Ember.js is an open-source JavaScript web framework, based on the MVC pattern. It allows developers to create scalable single-page web applications.
- Bindings in Ember: Unlike most other frameworks that include some sort of binding implementation, bindings in Ember.js can be used with any object.
- Router.js (Ember): Router.js is the routing microlib used by Ember.js.
- Foundation: Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
- Gulp: Gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. It’s very fast, platform-agnostic and simple.
- Articles & Tutorials: Publications about gulp or step by step guides for setting up and using gulp in a project.
- Building with Gulp 3 and 4 (Series): Great series of articles about single components and gulp as a whole.
- Part 1: Examples: Introduction to gulp and gulpfile.js.
- Part 2: Gulp’s anatomy: Orchestrator, Undertaker, Vinyl and Vinyl FS, Gulp Plugins.
- Part 3: Writing transformers: Using map-stream, though2 and event-stream.
- Part 4: Incremental builds: Building files which changed since last run and caching.
- Part 5: Caveats: Error management in Gulp 3 and “MANY:1 disguised as a 1:1” problem.
- The vision, history, and future of the project (Apr. 2014): The article talks about Streams, Vinyl, Vinyl Adapters, Orchestrator and Error Management in Gulp 4.
- Why Gulp might not be the Answer: … there is still a conceptual problem that Gulp has yet to address. Many build steps are not 1:1 (one file in, one file out) but rather n:1 or 1:n.
- Building with Gulp 3 and 4 (Series): Great series of articles about single components and gulp as a whole.
- CSS: Gulp plugins for working with CSS files.
- gulp-clean-css: gulp plugin to minify CSS, using clean-css.
- gulp-cssnano: Minify CSS with cssnano.
- Concatenation: Plugins for file concatenation. For example bundling CSS or JavaScript files.
- gulp-concat: This plugin will concat files by your operating systems newLine. It will take the base directory from the first file that passes through it.
- gulp-group-concat: Concats groups of files into a smaller number of files
- Deployment: Plugins for pushing built files into production.
- Ecosystem: The network of developers and plugins around gulp.
- @sindresorhus plugins: A collection of plugins by Sindre Sorhus.
- Gulp Friendly NPM Packages: Normal node packages that work with gulp.
- Filters: Plugins for filtering files in a vinyl stream.
- gulp-cache: A temp file based caching proxy task for gulp.
- gulp-cached: A simple in-memory file cache for gulp.
- gulp-changed: Only pass through changed files.
- gulp-filter: Filter files in a vinyl stream.
- gulp-newer: Pass through newer source files only.
- gulp-remember: A plugin for gulp that remembers and recalls files passed through it.
- vinyl-diff: This library allows you to perform diffs between streams of vinyl.
- Images: Plugins for working with images.
- gulp-imagemin: Minify PNG, JPEG, GIF and SVG images.
- gulp-webp: Convert PNG, JPEG, TIFF images to WebP.
- JavaScript: Module loaders, minifiers and other tools for working with JavaScript files.
- gulp-pure-cjs: Gulp plugin for Pure CommonJS builder.
- gulp-uglify: Minify files with UglifyJS.
- yoloader: A CommonJS module loader implementation. It provides tools to bundle a CommonJS based project and to load such bundles.
- SourceMaps: A source map provides a way of mapping code within a compressed file back to it’s original position in a source file.
- Plugins with gulp sourcemaps support: A list of plugins which support gulp-sourcemaps.
- gulp-sourcemaps: Source map support for Gulp.js
- vinyl-sourcemaps-apply: Apply a source map to a vinyl file, merging it with preexisting source maps.
- Utility: Tools and parts for building gulp plugins.
- gulp-count: Count files in a vinyl stream.
- gulp-debug: Debug vinyl file streams to see what files are run through your gulp pipeline.
- gulp-size: Logs out the total size of files in the stream and optionally the individual file-sizes.
- lazypipe: Lazypipe allows you to create an immutable, lazily-initialized pipeline. It’s designed to be used in an environment where you want to reuse partial pipelines, such as with gulp.
- map-stream: Create a through stream from an asyncronous function.
- Vinyl: Vinyl is a very simple metadata object that describes a file.
- gulp-chmod: Change permissions of Vinyl files.
- gulp-rename: A plugin to rename files easily.
- mem-fs: Simple in-memory vinyl file store.
- vinyl-ast: Parse-once and generate-once AST tool bridge for Gulp plugins.
- vinyl-buffer: Creates a transform stream that takes vinyl files as input, and outputs buffered (isStream() === false) vinyl files as output.
- vinyl-file: Create a vinyl file from an actual file.
- vinyl-fs: Vinyl adapter for the file system.
- vinyl-fs-fake: A vinyl adapter that extends vinyl-fs to allow for easy debugging by passing in virtual files instead of globs, and calling a function instead of writing.
- vinyl-git: Vinyl adapter for git.
- vinyl-map: Map vinyl files’ contents as strings, so you can easily use existing code without needing yet another gulp plugin!
- vinyl-paths: Get the file paths in a vinyl stream.
- vinyl-source-buffer: Convert a text stream into a vinyl pipeline whose content is a buffer.
- vinyl-source-stream: Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream.
- vinyl-to-stream: Convert a vinyl stream to a text stream.
- vinyl-transform: Wraps standard text transform streams so you can write fewer gulp plugins. Fulfills a similar use case to vinyl-map and vinyl-source-stream.
- Articles & Tutorials: Publications about gulp or step by step guides for setting up and using gulp in a project.
- Meteor: Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages.
- React: React is a JavaScript library for creating user interfaces. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time.
- 3 Lightweight React Alternatives: Dan Prince explores Preact, VirtualDom & Deku.
- A Stateless React App?: James K Nelson describes how to avoid state in React Components.
- Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
- CSS Modules To The Rescue.jsx: If you use react-like templates/components, use webpack CSS loader to enable CSS Modules and forget about global CSS problems.
- Find Your Perfect React Starter Project: A simple search engine for React boilerplates with the ability to pick the ingredients.
- Full-Stack Redux Tutorial: We will go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development.
- Functional DOM Programming: One of the earliest intros to React and its purpose by Pete Hunt.
- Functional Principles In React: Jessica Kerr talks about four functional principles: Composition, Declarative Style, Isolation and Flow Of Data, and their usage in React.
- Getting Started with TDD in React: Learn how to test React components using a TDD approach with minimal setup, while learning exactly what to test and how to avoid common pitfalls.
- Getting to Grips with React (as an Angular developer): In a series of posts Dave Ceddia tries to help you apply your hard-won knowledge of “Angularisms” to React.
- How to Handle State in React. The Missing FAQ: Osmel Mora challenges the common misconception that you always need a Flux-like architecture in your React apps.
- How we use the Flux architecture in Delve: Øystein Hallaråker describes how Delve utilizes the Flux application architecture.
- Immutable Data and React: Lee Byron talks about how persistent immutable data structures work, and techniques for using them in a React applications with Immutable.js.
- JSX Transform: JSX transpiler. A standard and configurable implementation of JSX decoupled from React.
- Jest: A JavaScript unit testing framework, used by Facebook to test services and React applications.
- Model-View-Intent with React and RxJS: Satish Chilukuri shows an example implementation of MVI pattern with React.
- Monocle: A developer tool for generating visual representations of your React app’s component hierarchy.
- Nothing New in React and Flux Except One Thing: Andre Staltz talks about aspects of React and Flux which make them innovative and compelling.
- Pure UI: Guillermo Rauch discusses the definition of an application’s UI as a pure function of application state.
- React - Basic Theoretical Concepts: Sebastian Markbage attempts to formally explain his mental model of React. The intention is to describe this in terms of deductive reasoning that lead us to this design.
- React App: React App is a small library powered by React, Universal Router and History that handles routing, navigation and rendering logic in isomorphic (universal) and single-page applications.
- React Components, Elements, and Instances: Dan Abramov explains the Virtual DOM dictionary in React.
- React Demystified: This article is an attempt to explain the core ideas behind React.js and Virtual DOM.
- React Native for Web: This project allows components built upon React Native to be run on the Web, and it manages all component styling out-of-the-box.
- React Starter Kit: Isomorphic web app boilerplate including Node.js, Express, GraphQL, React.js, Babel 6, PostCSS, Webpack, Browsersync.
- React Storybook: Isolate your React UI Component development from the main app.
- React Workshop: This is a self-directed workshop. Follow along to the steps at your own pace, and feel free to ask your instructors questions as you go.
- React in Patterns: List of design patterns/techniques used while developing with React.
- React vs Incremental DOM vs Glimmer: In this post we will explore three technologies to build dynamic DOMs. We will also run benchmarks and find out which one is faster.
- React: Rethinking best practices (2013): A video introduction to React by Pete Hunt.
- ReactPerfTool: ReactPerfTool tries to give you a more visual way of debugging performance of your React application. It does this by using the addons delivered by the React team and community to get measurements and visualize this using graphs.
- Removing User Interface Complexity, or Why React is Awesome: In this post James Long tries not to evangelize React specifically, but to explain why its technique is profound.
- Rethinking Best Practices: Pete Hunt talks about React’s design decisions challenging established best practices.
- Retractor: Retractor exposes the internals of a React application for end-to-end testing purposes. This allows you to select DOM nodes based on the name of the React Component that rendered the node as well as its state or properties.
- Some Problems with React/Redux: André Staltz goes through the pros and cons of React + Redux.
- Taming the React Setup: Cody Lindley lays out seven React setups in this article and explains the relation of React to BYOA (Bring Your Own Architecture) approach.
- Testing a React & Redux Codebase: This series aims to be a very comprehensive guide through testing a React and Redux codebase, where you can really cover a lot with just unit tests because the code is mostly universal.
- The Bare Minimum to Work with React: Krasimir Tsonev describes how to start working with React after installing only 7 dependencies and learning only three commands.
- The Redux Ecosystem: Let’s take a look at most of the features that you’ll have to deal with when the time comes, — and where React & Redux themselves can’t help you.
- The SoundCloud Client in React + Redux: After finishing this step by step tutorial you will be able to author your own React + Redux project with Webpack and Babel.
- Tutorial: Cloning Yelp: This post will guide you through building a full React app, even with little to no experience in the framework. We are going to build a Yelp clone in React.
- Using React to Sync Updates and Offline Activity: Firas Durri describes how React based architectures make syncing state across devices much easier.
- What Developers Need to Know about MVI (Model-View-Intent): The article explains the general MVI pattern and how it relates to React, Reactive Programming and Cycle.js
- Why Did You Update?: A function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.
- Why did we build React?: Pete Hunt tries to explain why Facebook devs built React in the first place.
- Yeoman: Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. It provides a generator ecosystem.
- jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler.
- Alternatives: Other libraries which intend to replace jQuery in one way or another.
- Cash: Cash is a small library for modern browsers that provides jQuery style syntax for manipulating the DOM.
- Chibi: Chibi focuses on just the essentials, melted down and mixed with optimisation rainbows to create a really light micro-library that allows you to do awesome things.
- DOM CSS: Small module for fast and reliable DOM styling.
- Minified.js: Minified.js is a client-side JavaScript library that’s both powerful and small. It offers jQuery-like features and utility functions with a single, consistent API.
- Plain.js: Vanilla JS utilities for writing powerful web applications without jQuery.
- Zepto.js: Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API.
- Authoring jQuery Plugins: jQuery is an utility library and a plugin framework. This section collects resources about creating such plugins.
- Advanced Plugin Concepts: A collection of best practices for jQuery plugin authoring.
- How to Create a Basic Plugin: The article describes basic plugin creation and provides a simple boilerplate.
- Signs of a poorly written jQuery plugin: Collection of jQuery plugin antipatterns.
- The Ultimate Guide to Writing jQuery Plugins: A comprehensive guide on how to develop jQuery plugins including a simple boilerplate.
- Writing Stateful Plugins with the jQuery UI Widget Factory: The article demonstrates the capabilities of the Widget Factory by building a simple progress bar plugin.
- jQuery Boilerplate: This project won’t seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
- jQuery Plugin Patterns: This project won’t seek to provide implementations for every possible pattern, but will attempt to cover popular patterns developers often use in the wild.
- Pragmatic jQuery Style: Coding guidelines for working with jQuery.
- jQuery Fundamentals: A guide to the basics of jQuery including a built-in editor for examples.
- jQuery UI: jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
- Learning jQuery UI: Series of articles about jQuery UI on learn.jquery.com.
- Alternatives: Other libraries which intend to replace jQuery in one way or another.
License
This work is licensed under a Creative Commons Attribution 4.0 International License.
Please provide a link back to this repository. This is not necessary for GitHub forks.