Context: frontend-dev-bookmarks / Ecosystem
Commercial companies and nonprofit organizations around web development.
| + Airbnb: Airbnb is a website for people to list, find, and rent lodging. + Airbnb CSS + Sass Style Guide: This style guide covers Terminology, Rule Declaration, Selectors, Properties, Formatting, Comments, OOCSS and BEM, ID Selectors, JavaScript hooks Sass, Syntax, Ordering, Mixins, Placeholders, Nested selectors. + Airbnb JavaScript Style Guide: A style guide for writing JavaScript code at Airbnb. + Enzyme: Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output. + Polyglot: Polyglot.js is a I18n helper library written in JavaScript, made to work both in the browser and in CommonJS environments (Node). It provides a simple solution for interpolation and pluralization. + Turbocharged JavaScript Refactoring with Codemods: Joe Lencioni describes how they used codemods to transform a large JavaScript code base at AirBnB + Box Inc.: Box is an online file sharing and content management service for businesses based in Redwood City, California. + Leche: A JavaScript testing utility designed to work with Mocha and Sinon. This is intended for use both by Node.js and in browsers, so any changes must work in both locations. + Nicholas C. Zakas: Former principal front-end engineer at Yahoo! and YUI developer. Leads a team of frontend engineers at Box now. + Box Tech Talk: Scalable JavaScript Application Architecture: A video by Nicholas Zakas (2012) about JavaScript Architecture. + Scalable JavaScript Application Architecture: In this video (2011) Nicholas Zakas discusses frontend architecture for complex, modular web applications with significant JavaScript elements. + T3: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code. + Understanding ECMAScript 6: Free (as in pay what you want) E-Book by Nicholas C. Zakas describing the new features in EcmaScript 6. + Shalam: A friendly tool for CSS spriting. Shalam allows you to add Retina-friendly, high-quality image sprites to your website without modifying any markup. + T3: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code. + stalker: A jQuery plugin allowing elements to follow the user as they scroll a page. + Facebook: Facebook is a corporation and online social networking service headquartered in Menlo Park, California, in the United States. + Immutable.js: Immutable persistent data collections for Javascript which increase efficiency and simplicity. + 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. + Regenerator: This package implements a source transformation that takes the proposed syntax for generators/yield from future versions of JS and spits out efficient JS-of-today (ES5) that behaves the same way. + Google: Google’s mission is to organize the world’s information and make it universally accessible and useful. + Addy Osmani: Engineer at Google working on open web tooling. + Learning JavaScript Design Patterns: In this free book Addy Osmani explores applying both classical and modern design patterns to the JavaScript programming language. + Patterns For Large-Scale JavaScript Application Architecture: An extensive overview by Addy Osmani of existing architectural solutions in the frontend development field. + Writing Modular JavaScript With AMD, CommonJS & ES Harmony: In this article Addy Osmani reviewes several of the options available for writing modular JavaScript using modern module formats AMD, CommonJS and ES6 Modules. + Closure Compiler: The Closure Compiler parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. + Introducing Incremental DOM: Incremental DOM is a library inspired by Virtual DOM developed at Google. + Microsoft: Microsoft Corporation is an American multinational technology company, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. + Dev Tools by Microsoft: These tools allow you to test your product on different version of Internet Explorer and Microsoft Edge. + Knockout.js: Knockout is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates. + Reactive Extensions (RxJS): RxJS is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators. + Async JavaScript with Reactive Extensions: Jafar Husain explains in this video how Netflix uses the Reactive Extensions (Rx) library to build responsive user experiences that strive to be event-driven, scalable and resilient. + Exploring Rx Operators: FlatMap: Christoph Burgdorf introduces the FlatMap operator and its usage for collections and observables. + Exploring Rx Operators: Map: Christoph Burgdorf explains how to use the map operator in RxJS. + Functional Core Reactive Shell: Giovanni Lodi makes an overview of different architecture meta-patterns and describes his current findings about functional programming and observables as a way to control side effects. + Learn RX: A series of interactive exercises for learning Microsoft’s Reactive Extensions (Rx) Library for Javascript. + Learn RxJS: This site focuses on making RxJS concepts approachable, the examples clear and easy to explore, and features references throughout to the best RxJS related material on the web. + Real World Observables: Sergi Mansilla writes an FTP client to use it as an example for a real world application based on RxJS. + Rx Training Games: Rx Training Games is a coding playground that can be used to learn and practice Reactive Extensions coding grid-based games + Rx-Book: A complete book about RxJS v.4.0. + RxMarbles: A webapp for experimenting with diagrams of Rx Observables, for learning purposes. + RxState: Simple opinionated state management library based on RxJS and Immutable.js + Taking Advantage of Observables in Angular 2: Christoph Burgdorf describes the advantages of Observables and how you can use them in Angular 2 context. + Transducers with Observable Sequences: A chapter from the RxJS Book describing Transducers. + Why We Built Xstream: The authors needed a stream library tailored for Cycle.js. It needs to be “hot” only, small in kB size and it should have only a few and intuitive operators. + Visual Studio Code: Build and debug modern web and cloud applications. VS Code is free and available on your favorite platform - Linux, Mac OSX, and Windows. + Mozilla: Mozilla is a community, which uses, develops, spreads and supports free software products. It is supported institutionally by the Mozilla Foundation and its tax-paying subsidiary, the Mozilla Corporation. + Firefox: Firefox is the highly popular free web browser. It is available for Linux, Mac, Windows, handheld devices, and in more than 70 different languages. + James Long: Works on Firefox Developer Tools at Mozilla. + A Study on Solving Callbacks with JavaScript Generators: This article describes how Generators help fight callback hell. + 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. + Transducers.js Library by James Long: A small library for generalized transformation of data (inspired by Clojure’s transducers) + Transducers.js Round 2 with Benchmarks: Refactored version of Transducers.js, some benchmarks, Laziness, the transformer protocoll. + Transducers.js: A JavaScript Library for Transformation of Data: A post announcing the transducers.js library with some explanation. + Transducers.js Round 2 with Benchmarks: Refactored version of Transducers.js, some benchmarks, Laziness, the transformer protocoll. + Transducers.js: A JavaScript Library for Transformation of Data: A post announcing the transducers.js library with some explanation. + Mozilla Developer Network (MDN): The MDN is a complete learning platform for Web technologies and the software that powers the Web. + Nunjucks: A rich and powerful templating language for JavaScript. + Stripe: Stripe is an Irish technology company that allows both private individuals and businesses to accept payments over the Internet. + Alex Sexton: Alex Sexton is an engineer at Stripe. He is on the Modernizr core team, the jQuery Board of Directors, as well as the Dojo Foundation Board. + Modernizr: It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. + Mikito Takada (mixu): Software engineer at Stripe. + Learn CSS Layout the pedantic way: Walks you through every major concept in CSS layout, without trying to simplify away the underlying mechanisms described in the CSS 2.1 and flexbox specs. + Single Page Apps in Depth: This free book is what I wanted when I started working with single page apps. It’s not an API reference on a particular framework, rather, the focus is on discussing patterns, implementation choices and decent practices. + jquery.mobilePhoneNumber: A general purpose library for validating and formatting mobile phone numbers. + jquery.payment: A general purpose library for building credit card forms, validating inputs and formatting numbers. + TODO Group: TODO is an open group of companies who want to collaborate on practices, tools, and other ways to run successful and effective open source projects and programs. + Twitter: Twitter is an online social networking service that enables users to send and read short 140-character messages called “tweets”. + Flight: An event-driven web framework, from Twitter. + Hogan.js: Hogan.js is a 3.4k JS templating engine developed at Twitter. It was developed against the mustache test suite. + Nicolas Gallagher: Frontend Engineer at Twitter. + Normalize.css: A modern, HTML5-ready alternative to CSS resets. + World Wide Web Consortium (W3C): The W3C is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. + Architecture of the World Wide Web: Identification: This architecture document by W3C discusses the core design components of the Web. They are identification of resources, representation of resource state, and the protocols that support the interaction between agents and resources in the space. + CSS Flexible Box Layout Module Level 1: W3C specification for CSS flexbox. + Document Object Model (DOM) Technical Reports: Specifications by the W3C. + Notes on Using ARIA in HTML: This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification. + Service Workers: A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline. + Instant Loading Web Apps With An Application Shell Architecture: Addy Osmani describes how to leverage the Service Worker API to drastically improve the loading speed of your web application. + Introduction to Service Worker: Matt Gaunt introduces the main features of Service Worker API in this article. + Is ServiceWorker Ready?: Tracks the implementation status across the main browsers. + Shadow DOM W3C Editor’s Draft: This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM. + Yandex: Yandex is one of the largest internet companies in Europe, operating Russia’s most popular search engine and its most visited website. + Block Element Modifier (BEM): Methodology aimed at achieving fast to develop long-lived projects, team scalability, and code reuse. + A New Front-End Methodology: BEM: An introduction by Varvara Stepanova at SmashingMagazine. + An Introduction to the BEM Methodology: General introduction article on tutsplus. + BEM 101: A collaborative post by Joe Richardson, Robin Rendle, and CSS-Tricks staff giving an introduction to BEM with some good examples. + BEM I (finally) understand: In this article Andrei Popa will focus on the basics of BEM and how to approach simple to complex anatomies. + Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them: This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it. + Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack. + Emmet filter for BEM: If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes. + Fifty Shades of BEM: Article describes different flavors of BEM. + How We Use BEM to Modularise Our CSS: Andrei Popa describes the challenges, AlphaSights team had, implementing BEM in their projects. + Introduction To BEM Methodology (Toptal): General introduction to BEM methodology and platform. + MindBEMding – getting your head ’round BEM syntax: Article on csswizardry explaining the BEM syntax for CSS classes. + Pobem: PostCSS plugin for BEM syntax. + Support for BEM modules in Sass 3.3: The next major release of Sass is poised for release and with it comes real support for BEM-style modules… + To BEM or not to BEM: A series of interviews on BEM methodology. + Yandex Browser: Chromium based browser developed by Yandex. + Zurb: ZURB is a product design company since 1998. Through consulting, product design tools and training, they transform the way businesses approach Progressive Design. + 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. + Foundation for Emails 2: Frontend Framework for E-Mails including a grid, global styles, aligment classes, buttons, callout panels, thumbnail styles, typography, visibility classes. + Responsive Email Templates: Zurb Studios put together this set of super awesome email templates so that you can make your email campaigns responsive. |
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.