🐝 Introduction to Papillon Bits.
🐝 Published packages.
📚 Components
📗 Primer
📖 Blankslate
To be documented soon📖 Box
To be documented soon📖 BranchName
To be documented soon📖 Breadcrumb
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Button
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Concept
To be documented soon📖 Dropdown
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Form
📃 Checkbox
🔖 Documentation
🔖 Implementation
🔖 Story
📃 Input
🔖 Documentation
🔖 Implementation
🔖 Story
📃 Radio
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Grid
📃 DisplayTable
🔖 Documentation
🔖 Implementation
🔖 Story
📃 FlexGrid
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Icon
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Label
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Layout
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Loader
To be documented soon📖 Navigation
📃 Menu
🔖 Documentation
🔖 Implementation
🔖 Story
📃 TabNav
🔖 Documentation
🔖 Implementation
🔖 Story
📃 UnderlineNav
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Pagination
To be documented soon📖 Popover
To be documented soon📖 Progress
To be documented soon📖 SelectMenu
To be documented soon📖 Subhead
🔖 Documentation
🔖 Implementation
🔖 Story
📖 Toast
To be documented soon
📚 CSS
📗 Primer
📖 Base
📃 Base
🔖 Implementation
📃 Keyboard Shortcuts
🔖 Implementation
📃 Normalize
🔖 Implementation
📃 Typography Base
🔖 Implementation
📖 Support
📃 Mixins
📄 Buttons
🔖 Implementation
📄 Layout
🔖 Implementation
📄 Miscellaneous
🔖 Implementation
📄 Typography
🔖 Implementation
📃 Variables
📄 Color System
🔖 Implementation
📄 Colors
🔖 Implementation
📄 Layout
🔖 Implementation
📄 Miscellaneous
🔖 Implementation
📄 Typography
🔖 Implementation
📖 Utilities
📃 Animations
🔖 Implementation
📃 Borders
🔖 Implementation
📃 Box Shadows
🔖 Implementation
📃 Colors
🔖 Implementation
📃 Details
🔖 Implementation
📃 Flexbox
🔖 Implementation
📃 Layout
🔖 Implementation
📃 Margin
🔖 Implementation
📃 Padding
🔖 Implementation
📃 Typography
🔖 Implementation
📃 Visibility Display
🔖 Implementation
📚 Library
📗 Accessibility
📖 Check
🔖 Implementation
📗 Browser
📖 Browser
🔖 Implementation
📗 Environment
📖 API
🔖 Implementation
📖 Host
🔖 Implementation
📗 Hooks
📖 React
🔖 Implementation
📗 Navigation
📖 Item
🔖 Implementation
📗 Object
📖 Clone
🔖 Implementation
📗 State
📖 Default
📃 Context
🔖 Implementation
📃 API
To be documented soon📃 UI
🔖 Implementation
📖 Mock
📃 Context
🔖 Implementation
📃 API
To be documented soon📃 UI
🔖 Implementation
📗 Store
📖 Mock
🔖 Implementation
🐝 Applied concepts.
📚 Accessibility
📗 Specifications/Standards/Guidelines
📖 MDN
📃 Web technology for developers » Accessibility
🔖 Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.
🔖 For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.
🔖 "The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."
📖 Web Accessibility Initiative (WAI)
📃 Web Content Accessibility Guidelines (WCAG) Overview
🔖 Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
📖 World Wide Web Consortium (W3C)
📃 W3C » Standards » Web Design and Applications » Accessibility
🔖 The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
🔖 Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.
🔖 Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.
🔖 The mission of the Web Accessibility Initiative (WAI) is to lead the Web to its full potential to be accessible, enabling people with disabilities to participate equally on the Web.
📖 React.JS
📃 Accessibility
🔖 Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
🔖 React fully supports building accessible websites, often by using standard HTML techniques.
📗 Open Source Dependency Projects
📖 Axe Core
📃 Accessibility engine for automated Web UI testing
🔖 Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
📃 Axe: Accessibility for Development Teams
🔖 Axe is the World’s most popular accessibility testing toolkit built on the World’s most popular accessibility rules library. Axe is ideal for development teams to test their Web or Android applications to help identify and resolve common accessibility issues. Built to scale with your needs, users have run axe for everything from ad-hoc single page tests to testing hundreds of thousands of pages while integrated into existing CI/CD processes. It’s simple to use, doesn’t require advanced accessibility knowledge and won’t waste your time with false positives.
📖 @axe-core/react
📃 Accessibility auditing for React.js applications
🔖 Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console.
📖 Storybook
📃 @storybook/addon-a11y
🔖 This storybook addon can be helpful to make your UI components more accessible.
📖 ESLint
📃 eslint-plugin-jsx-a11y
🔖 Static AST checker for accessibility rules on JSX elements.
🔖 Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.
🔖 Note: This project does not replace react-a11y, but can and should be used in conjunction with it. Static analysis tools cannot determine values of variables that are being placed in props before runtime, so linting will not fail if that value is undefined and/or does not pass the lint rule.
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
🔖 package.json
✎ Installs eslint-plugin-jsx-a11y and @storybook/addon-a11y as devDependencies🔖 .eslintrc
✎ Lets ESLint make use of eslint-plugin-jsx-a11y🔖 .storybook/main.js
✎ Lets Storybook make use of @storybook/addon-a11y🔖 .storybook/preview.js
✎ Lets Storybook make use of withA11y decorator📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Application Architecture
📗 Specifications/Standards/Guidelines
📖 Redux
📃 A Predictable State Container for JS Apps
🔖 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.
🔖 You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.
📃 Redux Style Guide
🔖 This is the official style guide for writing Redux code. It lists our recommended patterns, best practices, and suggested approaches for writing Redux applications.
🔖 Both the Redux core library and most of the Redux documentation are unopinionated. There are many ways to use Redux, and much of the time there is no single "right" way to do things.
🔖 However, time and experience have shown that for some topics, certain approaches work better than others. In addition, many developers have asked us to provide official guidance to reduce decision fatigue.
🔖 With that in mind, we've put together this list of recommendations to help you avoid errors, bikeshedding, and anti-patterns. We also understand that team preferences vary and different projects have different requirements, so no style guide will fit all sizes. You are encouraged to follow these recommendations, but take the time to evaluate your own situation and decide if they fit your needs.
📖 Flux
📃 Application architecture for building user interfaces
🔖 These are the important high-level concepts and principles you should know about when writing applications that use Flux.
🔖 Flux is a pattern for managing data flow in your application. The most important concept is that data flows in one direction. As we go through this guide we'll talk about the different pieces of a Flux application and show how they form unidirectional cycles that data can flow through.
🔖 These are the important high-level concepts and principles you should know about when writing applications that use Flux.
📗 Open Source Dependency Projects
📖 Redux
📃 Predictable state container for JavaScript apps
🔖 Redux is a predictable state container for JavaScript apps. (Not to be confused with a WordPress framework – Redux Framework.)
🔖 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.
🔖 You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).
📃 Official React bindings for Redux
🔖 React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
🔖 React Redux provides , which makes the Redux store available to the rest of your app:
🔖 React Redux provides a connect function for you to connect your component to the store.
📃 Thunk middleware for Redux
🔖 With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extend the store's abilities, and let you write async logic that interacts with the store.
🔖 Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests.
🔖 Redux Thunk middleware 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.
🔖 An action creator that returns a function to perform asynchronous dispatch
🔖 A thunk is a function that wraps an expression to delay its evaluation.
🔖 Any return value from the inner function will be available as the return value of dispatch itself. This is convenient for orchestrating an asynchronous control flow with thunk action creators dispatching each other and returning Promises to wait for each other’s completion.
🔖 Since 2.1.0, Redux Thunk supports injecting a custom argument using the withExtraArgument function.
📃 Logger for Redux
🔖 You can create your own logger with following custom options:
🔖 predicate: If specified this function will be called before each action is processed with this middleware.
🔖 collapsed: Takes a Boolean or optionally a Function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
🔖 duration = false: Boolean: Print the duration of each action?
🔖 timestamp = true: Boolean: Print the timestamp with each action?
🔖 level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info': console's level
🔖 colors: ColorsObject: Colors for title, prev state, action and next state
🔖 titleFormatter: Format the title used when logging actions.
🔖 stateTransformer: Transform state before print. Eg. convert Immutable object to plain JSON.
🔖 actionTransformer: Transform action before print. Eg. convert Immutable object to plain JSON.
🔖 errorTransformer: Transform error before print. Eg. convert Immutable object to plain JSON.
🔖 logger = console: LoggerObject: Implementation of the `console` API.
🔖 logErrors = true: Boolean: should the logger catch, log, and re-throw errors?
🔖 diff = false: Boolean: (alpha) Show diff between states?
🔖 diffPredicate: (alpha) Filter function for showing states diff, similar to `predicate`
📃 A mock store for testing Redux async action creators and middleware
🔖 A mock store for testing Redux async action creators and middleware. The mock store will create an array of dispatched actions which serve as an action log for tests.
🔖 Please note that this library is designed to test the action-related logic, not the reducer-related one. In other words, it does not update the Redux store. If you want a complex test combining actions and reducers together, take a look at other libraries (e.g., redux-actions-assertions). Refer to issue #71 for more details.
🔖 Synchronous actions: The simplest usecase is for synchronous actions. In this example, we will test if the addTodo action returns the right payload. redux-mock-store saves all the dispatched actions inside the store instance. You can get all the actions by calling store.getActions(). Finally, you can use any assertion library to test the payload.
🔖 Asynchronous actions A common usecase for an asynchronous action is a HTTP request to a server. In order to test those types of actions, you will need to call store.getActions() at the end of the request.
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon
📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
✎ package.json
✎ store/client.js
✎ store/base.js
📃 Knowledge base
To be documented soon
📚 Bootstrap
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
To be documented soon📖 Microsites
📃 Install
✎ Run rm -rf node_modules package-lock.json && npm install for repository root and packages/core folder to remove node_modules directory, package-lock.json file and install all packages from scratch
📃 Bootstrap
✎ Run npm run bootstrapto run linting, formatting, testing and building sequentially
📃 Start
✎ Run npm start in 1nd terminal in packages/core to start up webpack-dev-server
✎ Run npm run test -- --watch --onlyChanged --verbose in 2rd terminal to let Jest watch changed tests
📃 Dynamic Code Splitting
✎ Babel enables parsing dynamic imports through @babel/plugin-syntax-dynamic-import since v7.5.0
✎ Webpack recommends this technique instead of the legacy webpack-specific approach through optimization.splitChunks configuration option.
📚 Code Style
📗 Specifications/Standards/Guidelines
📖 Code Linting
📃 JavaScript
📄 AirBnb JavaScript Style Guide
🔖 A mostly reasonable approach to JavaScript
🔖 Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.
📄 Airbnb React/JSX Style Guide
🔖 A mostly reasonable approach to React and JSX
🔖 This style guide is mostly based on the standards that are currently prevalent in JavaScript, although some conventions (i.e async/await or static class fields) may still be included or prohibited on a case-by-case basis. Currently, anything prior to stage 3 is not included nor recommended in this guide.
📃 Sass
📄 Airbnb CSS / Sass Styleguide
🔖 A mostly reasonable approach to CSS and Sass
📖 Code Formatting
📃 HTML, JavaScript and Sass
To be documented soon📖 File Formatting
📃 Any file type
To be documented soon📗 Open Source Dependency Projects
📖 Code Linting
📃 JavaScript
📄 ESLint
🔖 ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions:
📄 SublimeLinter ESLint
🔖 This linter plugin for SublimeLinter provides an interface to ESLint
🔖 This linter plugin for SublimeLinter provides an interface to ESLint. It will be used with "JavaScript" files, but since eslint is pluggable, it can actually lint a variety of other files as well.
📄 VSCode ESLint
🔖 VSCode extension to integrate eslint into VSCode
🔖 Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
🔖 The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
🔖 On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.
📄 JetBrains ESlint
🔖 ESLint intellij integration.
🔖 Support displaying eslint warnings as intellij inspections
🔖 Quick fixes for several rules
🔖 Support for custom eslint rules
🔖 Support for eslint config annotation and completion
📃 Sass
📄 Stylelint
🔖 A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
🔖 It's mighty as it:
🔖 understands the latest CSS syntax including custom properties and level 4 selectors
🔖 extracts embedded styles from HTML, markdown and CSS-in-JS object & template literals
🔖 parses CSS-like syntaxes like SCSS, Sass, Less and SugarSS
🔖 has over 170 built-in rules to catch errors, apply limits and enforce stylistic conventions
🔖 supports plugins so you can create your own rules or make use of plugins written by the community
🔖 automatically fixes the majority of stylistic violations (experimental feature)
🔖 is well tested with over 15000 unit tests
🔖 supports shareable configs that you can extend or create
🔖 is unopinionated so that you can customize it to your exact needs
📄 SublimeLinter Stylelint
🔖 This linter plugin for SublimeLinter provides an interface to stylelint.
📄 VSCode Stylelint
🔖 Official Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
🔖 The extension uses the stylelint library installed in the opened workspace folder. If the workspace folder does not provide the stylelint, the extension looks for a global installed stylelint. If not in the global installed stylelint, the extension uses the stylelint embedded in the extension. (However, using stylelint embedded in the extension is not recommended.)
📄 JetBrains Stylelint
🔖 IntelliJ IDEA integrates with Stylelint so you can inspect your CSS code from inside the IDE. Stylelint wakes up automatically when you edit a CSS file and highlights the detected problems. To view the description of a problem in an information popup, hover the mouse pointer over a stripe in the Validation sidebar. To examine errors and apply suggested quick fixes, press ⌥⏎.
📖 Code Formatting
📃 HTML, JavaScript and Sass
📄 Prettier
🔖 Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
🔖 Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style
📄 Sublime JsPrettier
🔖 JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter.
🔖 JsPrettier is compatible with both Sublime Text 2 and 3, and all supported Operating Systems.
🔖 The easiest and recommended way to install Js Prettier is using Package Control.
📄 Prettier VSCode
🔖 Visual Studio Code extension for Prettier
🔖 Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
🔖 Install through VS Code extensions. Search for Prettier - Code formatter
📄 JetBrains Prettier
🔖 This plugin adds support for Prettier (https://prettier.io), an opinionated code formatter. To use it:
🔖 Add prettier to your project with npm install prettier --save-dev or install it globally
🔖 Select the code or file you want to format using Prettier
🔖 Use the “Reformat with Prettier” action (Alt-Shift-Cmd-P on macOS or Alt-Shift-Ctrl-P on Windows and Linux) or find it using the “Find Action” popup (Cmd/Ctrl-Shift-A)
📖 File Formatting
📃 Any file type
📄 Editorconfig
🔖 EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
📄 Editorconfig Sublime
🔖 Sublime Text plugin for EditorConfig - helps developers define and maintain consistent coding styles between different editors and IDEs
🔖 Install with Package Control
📄 Editorconfig VSCode
🔖 EditorConfig extension for Visual Studio Code
🔖 This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.
📄 JetBrains Editorconfig
🔖 A JetBrains IDE plugin supporting the EditorConfig standard
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Code Linting
📄 JavaScript
🔖 Setup file(s)
✎ .eslintrc
✎ .eslintignore
🔖 Script(s)
✎ "lint:format": "npm-run-all lint format"
✎ "lint": "npm-run-all lint:js:jsx lint:scss"
✎ "lint:js:jsx": "eslint --ext .js --ext .jsx packages/**/src --fix"
🔖 Knowledge base
To be documented soon📄 Sass
🔖 Setup file(s)
✎ .stylelintrc
✎ .stylelintignore
🔖 Script(s)
✎ "lint:format": "npm-run-all lint format"
✎ "lint": "npm-run-all lint:js:jsx lint:scss"
✎ "lint:scss": "stylelint \"packages/**/src/**/*.{css,scss}\" --custom-syntax=postcss-scss --fix"
🔖 Knowledge base
To be documented soon📃 Code Formatting
📄 HTML, JavaScript and Sass
🔖 Setup file(s)
✎ .prettierrc
✎ .prettierignore
🔖 Script(s)
✎ "format": "npm-run-all format:js:jsx format:scss"
✎ "format:js:jsx": "prettier --write \"packages/**/src/**/*.{js,jsx}\""
✎ "format:scss": "prettier --write \"packages/**/src/**/*.{css,scss}\""
🔖 Knowledge base
To be documented soon📃 File Formatting
📄 Any file type
🔖 Setup file(s)
✎ .editorconfig
🔖 Script(s)
✎ N/A🔖 Knowledge base
To be documented soon
📚 Compiling
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
📖 Transpiling
📃 Babel
📄 Babel is a compiler for writing next generation JavaScript
🔖 Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.
🔖 Docs Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
🔖 Setup How to use Babel with your tool of choice.
🔖 Try it out
🔖 Videos Videos and podcasts about Babel and its underlying concepts.
🔖 Blog
📖 Bundling
📃 Webpack
📄 A bundler for javascript and friends. Packs many modules into a few bundled assets
🔖 Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. https://webpack.js.org
🔖 Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
🔖 Getting Started Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API. If you're still new to webpack, please read through the core concepts and this comparison to learn why you might use it over the other tools that are out in the community.
🔖 Plugins Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.
🔖 Loaders Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Transpiling
📄 Babel
🔖 Setup file(s)
✎ babel.config.js for Jest
✎ webpack.common.js for regular build
✎ .babelrc for storybook build
🔖 Script(s)
✎ "build": "lerna run build --stream"
✎ "build-storybook": "NODE_ENV=develop build-storybook -c .storybook -o .storybook-static"
🔖 Knowledge base
To be documented soon📃 Bundling
📄 Webpack
🔖 Setup file(s)
✎ webpack.settings.js
✎ webpack.common.js shared by regular development and production builds
✎ webpack.develop.js for regular development build
✎ webpack.release.js for regular production build
✎ webpack.config.js for storybook build
🔖 Script(s)
✎ "build": "webpack --config ./webpack/webpack-build.babel.js --mode=production"
✎ "build-storybook": "NODE_ENV=develop build-storybook -c .storybook -o .storybook-static"
🔖 Knowledge base
To be documented soon
📚 Component Design
📗 Specifications/Standards/Guidelines
📖 React.JS
📃 Hooks and Function Components
🔖 What is a Hook? A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.
🔖 When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!
📗 Open Source Dependency Projects
📖 React.JS
📃 A JavaScript library for building user interfaces
🔖 DeclarativeReact makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.
🔖 Component-BasedBuild encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
📃 A declarative, efficient, and flexible JavaScript library for building user interfaces
🔖 Getting Started This page is an overview of the React documentation and related resources.
🔖 Tutorial: Intro to React This tutorial doesn’t assume any existing React knowledge.
🔖 Blog
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Component Partitions
📄 Implementation folder ../
🔖 File(s)
✎ index.js: All named exports
✎ .jsx: Main UI implementation
✎ .part.jsx: Specific JSX parts implementation if any
✎ .scss: Sass styling implementation if applicable
✎ .part.scss: Sass styling parts implementation if any
✎ .prop.js: Default props and prop types
📄 Test folder ../__tests__
🔖 File(s)
✎ .int.story.js: Implements Storybook stories for various flavors of the component for integration testing purposes
✎ .int.test.js: Implements Jest snapshots for various flavors of the component for integration testing purposes
📚 Component Driven Development
📗 Specifications/Standards/Guidelines
📖 Atomic Design
📃 Atomic Design
🔖 What is atomic design? Atomic design is methodology for creating design systems. There are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages.
🔖 Why atomic design? In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.
🔖 Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.
🔖 Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
📃 Atoms
🔖 Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
🔖 Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
🔖 Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
📃 Molecules
🔖 Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
🔖 For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
🔖 Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
📃 Organism
🔖 Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
🔖 Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
🔖 Building up from molecules to organisms encourages creating standalone, portable, reusable components.
📃 Templates
🔖 At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
🔖 Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place. In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable.
📃 Pages
🔖 Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.
🔖 Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.
🔖 The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.
🔖 Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.
📗 Open Source Dependency Projects
📖 N/A
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Continuous Delivery
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Continuous Integration
📗 Specifications/Standards/Guidelines
📖 Service
📃 Travis CI
📄 Travis CI Documentation
🔖 Use the tutorials, samples, how-to, and reference documentation to learn Travis CI
📖 Branching Model
📃 Git Flow
📄 Axasoft Documentation
🔖 Gitflow utilizes the core feature of Git, which is the power of branches. In this model, a repository has two main branches:
🔖 Master This is a highly stable branch that is always production-ready and contains the last release version of source code in production.
🔖 Develop Derived from the master branch, the development branch serves as a branch for integrating different features planned for an upcoming release. This branch may or may not be as stable as the master branch. It is where developers collaborate and merge feature branches.
📄 Atlassian Documentation
🔖 Gitflow Workflow is a Git workflow design that was first published and made popular by Vincent Driessen at nvie. The Gitflow Workflow defines a strict branching model designed around the project release. This provides a robust framework for managing larger projects.
🔖 Gitflow is ideally suited for projects that have a scheduled release cycle. This workflow doesn’t add any new concepts or commands beyond what’s required for the Feature Branch Workflow. Instead, it assigns very specific roles to different branches and defines how and when they should interact. In addition to feature branches, it uses individual branches for preparing, maintaining, and recording releases. Of course, you also get to leverage all the benefits of the Feature Branch Workflow: pull requests, isolated experiments, and more efficient collaboration.
📄 A successful Git branching model
🔖 This model was conceived in 2010, now more than 10 years ago, and not very long after Git itself came into being. In those 10 years, git-flow (the branching model laid out in this article) has become hugely popular in many a software team to the point where people have started treating it like a standard of sorts — but unfortunately also as a dogma or panacea.
📗 Open Source Dependency Projects
📖 Travis CI
📃 Continuous Integration and Deployment
🔖 Documentation for Travis CI
🔖 Installation resources for Travis CI Enterprise
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Cross Browser Compatibility
📗 Specifications/Standards/Guidelines
📖 ES6 / ES2015
📃 From var to const/let
📄 Reference
📄 Compatibility
🔖 Browser Support
✎ const > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
✎ let > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer 🌦
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📃 From objects to maps
📄 Reference
🔖 MDN
✎ Array.prototype.map() The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓ Safe to use ✅
📃 New Array methods
📄 Reference
🔖 MDN
✎ from Array.prototype.indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
to Array.prototype.findIndex() The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
✎ from Array.prototype.slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.
to Array.from() or the spread operator The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.
✎ from Array.apply()
The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
to Array.prototype.fill()The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.
📄 Compatibility
🔖 Browser Support
✎ indexOf > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
✎ findIndex > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
✎ Array.prototype.slice() > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
✎ Array.from() > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
✎ Array.apply() > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
✎ Array.prototype.fill() > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅
✎ Polyfilled if not native ✓, Safe to use ✅
✎ Polyfilled if not native ✓, Safe to use ✅
📃 From CommonJS modules to ES6 modules
📄 Reference
🔖 MDN
✎ JavaScript modules This guide gives you all you need to get started with JavaScript module syntax.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📖 ES7 / ES2016
📃 Array.prototype.includes()
📄 Reference
🔖 MDN
✎ Array.prototype.includes() The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅
📃 Exponentiation operator (**)
📄 Reference
🔖 MDN
✎ Exponentiation (**) The exponentiation operator returns the result of raising the first operand to the power of the second operand. That is, var1var2, in the preceding statement, where var1 and var2 are variables. The exponentiation operator is right-associative. a ** b ** c is equal to a ** (b ** c).
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📖 ES8 / ES2017
📃 Async function
📄 Reference
🔖 MDN
✎ Async function The async function declaration defines an asynchronous function — a function that is an AsyncFunction object. Asynchronous functions operate in a separate order than the rest of the code via the event loop, returning an implicit Promise as its result. But the syntax and structure of code using async functions looks like standard synchronous functions.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📃 Object.entries() and Object.values()
📄 Reference
🔖 MDN
✎ Object.entries() The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. (The only important difference is that a for...in loop enumerates properties in the prototype chain as well).
and Object.values() The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. (The only difference is that a for...in loop enumerates properties in the prototype chain as well.)
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅
📃 New string methods
📄 Reference
🔖 MDN
✎ String.prototype.padStart() The padStart() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.
and String.prototype.padEnd() The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅
📃 Object.getOwnPropertyDescriptors()
📄 Reference
🔖 MDN
✎ Object.getOwnPropertyDescriptors() The Object.getOwnPropertyDescriptors() method returns all own property descriptors of a given object.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅
📃 Trailing commas
📄 Reference
🔖 MDN
✎ Trailing commas Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.
📄 Compatibility
🔖 Browser Support
✎ Trailing commas > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
✎ Trailing commas in functions > Chrome ✓, Firefox ✓, Safari ╳, Edge ╳, Internet Explorer ╳
✎ Trailing commas in object literals > Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ✓
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📖 ES9 / ES2018
📃 Spread syntax and Rest syntax (parameters)
📄 Reference
🔖 MDN
✎ Spread syntax Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
and Rest syntax (parameters) Rest syntax looks exactly like spread syntax, but is used for destructuring arrays and objects. In a way, rest syntax is the opposite of spread syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.
📄 Compatibility
🔖 Browser Support
✎ Spread in array literals > Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
✎ Spread in function calls > Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
✎ Spread in destructuring > Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
✎ Spread in object literalsExperimental > Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅
📃 Promise.prototype.finally()
📄 Reference
🔖 MDN
✎ Promise.prototype.finally() The finally() method returns a Promise. When the promise is settled, i.e either fulfilled or rejected, the specified callback function is executed. This provides a way for code to be run whether the promise was fulfilled successfully or rejected once the Promise has been dealt with. This helps to avoid duplicating code in both the promise's then() and catch() handlers.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ✓, Internet Explorer ╳
🔖 Transpiled / Polyfilled
Polyfilled if not native ✓, Safe to use ✅
📖 ES10 / ES2019
📃 Array.prototype.flat() and Array.prototype.flatMap()
📄 Reference
🔖 MDN
✎ Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
and Array.prototype.flatMap() The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅📃 Object.fromEntries()
📄 Reference
🔖 MDN
✎ Object.fromEntries() The Object.fromEntries() method transforms a list of key-value pairs into an object.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅📃 String.prototype.trimStart() and String.prototype.trimEnd()
📄 Reference
🔖 MDN
✎ String.prototype.trimStart() The trimStart() method removes whitespace from the beginning of a string. trimLeft() is an alias of this method.
and String.prototype.trimEnd() The trimEnd() method removes whitespace from the end of a string. trimRight() is an alias of this method.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ?, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅📃 Optional catch binding
📄 Reference
🔖 MDN
✎ Optional catch binding The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Transpiled ✓, Safe to use ✅📃 Array.prototype.sort()
📄 Reference
🔖 MDN
✎ Array.prototype.sort() The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
📄 Compatibility
🔖 Browser Support
✎ Chrome ✓, Firefox ✓, Safari ✓, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅📃 Function.prototype.toString() revision
📄 Reference
🔖 MDN
✎ Function.prototype.toString() revision The toString() method returns a string representing the source code of the function.
📄 Compatibility
🔖 Browser Support
✎ Chrome ╳, Firefox ✓, Safari ╳, Edge ╳, Internet Explorer ╳
🔖 Transpiled / Polyfilled
✎ Polyfilled if not native ✓, Safe to use ✅📗 Open Source Dependency Projects
📖 N/A
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 CSS Architecture
📗 Specifications/Standards/Guidelines
📖 ITCSS (Inverted Triangle CSS) Organization
📃 Harry Roberts - Managing CSS Projects with ITCSS
🔖 Managing CSS at scale is hard; and a lot harder than it should be. ITCSS is a simple, effective, and as-yet unpublished methodology to help manage, maintain, and scale CSS projects of all sizes. In this talk we’ll take a sneak peek at what ITCSS is and how it works to tame and control UI code as it grows.
📃 ITCSS × Skillshare
🔖 ITCSS video course
📃 ITCSS: Scalable and Maintainable CSS Architecture
🔖 How do I make my CSS scalable and maintainable? It’s a concern for every front-end developer. ITCSS has an answer.
📃 ITCSS from CSS Wizardry
🔖 A sane, scalable, managed CSS architecture from CSS Wizardry
📖 CSS Modules Scoping
📃 What are CSS Modules and why do we need them?
🔖 I’ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to implement or level up your usage, part 3 will be about using them in a React environment.
📃 Getting Started with CSS Modules
🔖 There isn’t one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we’ll look at one approach. The goal of this post is to get a CSS Modules project up and running.
📃 CSS Modules and React
🔖 In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will have two templates: a homepage and an about page with a couple of React components to explain how it works in practice.
📖 Desktop First Responsive Strategy
📃 Responsive strategy
🔖 Right now around 11 or 12% of the top 100,000 sites are responsive, and no doubt that number is slated to rise over the next few years.
📃 Desktop-First Design Tips for Responsive Websites
🔖 Most web designers know about mobile-first design and how it has dramatically affected responsive design. But there is another technique that may be less popular but can solve problems in a clearer fashion.
🔖 With a desktop-first approach you can build all the features you want and create them to the highest specs. Then as you test on smaller devices you’ll focus on keeping the interface light while supporting as many “high-end” features as possible.
🔖 This workflow is quite different but starting from the desktop can be better for web designers who create feature-rich designs.
📖 Sass preprocessor scripting language
📃 Sass Tutorial
🔖 Sass is a CSS pre-processor.
🔖 Sass reduces repetition of CSS and therefore saves time.
📃 CSS with superpowers
🔖 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
📃 Sass Style Guide
🔖 With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass.
🔖 Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you’re looking for more examples, Sass Guidelines is another good place to look.
📃 Sass Techniques from the Trenches
🔖 Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything I could about it. Over the past five years, I’ve utilized a number of different Sass techniques and patterns and fell in love with some that, to steal Apple’s phrase, just work.
📃 Introducing Sass Modules
🔖 Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features.
📖 Layout
📃 CSS Flexible Box Layout
🔖 CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.
📃 CSS Grid Layout
🔖 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
🔖 Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
📗 Open Source Dependency Projects
📖 Sass Loader
🔖 Sass Loader in Webpack Contrib Compiles Sass to CSS
🔖 Sass Loader in Webpack Docs Loads a Sass/SCSS file and compiles it to CSS.
📖 Node Sass
🔖 Node.js bindings to libsass Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
🔖 It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Language
📗 Specifications/Standards/Guidelines
📖 JavaScript
📃 MDN
🔖 JavaScript JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.
📃 TC39
🔖 ECMAScript® 2021 Language Specification This document is the most accurate and up-to-date ECMAScript specification. It contains the content of the most recent yearly snapshot plus any finished proposals (those that have reached Stage 4 in the proposal process and thus are implemented in several implementations and will be in the next practical revision) since that snapshot was taken.
📖 HTML
📃 MDN
🔖 HTML: Hypertext Markup Language HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
📃 W3C
🔖 HTML 5.3 W3C Working Draft This specification defines the 5th major version, third minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability.
🔖 HTML 5.2 W3C Recommendation This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability.
📃 WHATWG
🔖 HTML Living Standard This specification defines a big part of the Web platform, in lots of detail. Its place in the Web platform specification stack relative to other specifications can be best summed up as follows:
📖 CSS
📃 MDN
🔖 CSS: Cascading Style Sheets Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
📃 W3C
🔖 W3C Descriptions of all CSS specifications This page contains descriptions of all specifications that the CSS WG is working on. See the ‘current work’ page for a compact view and how to give feedback.
📗 Open Source Dependency Projects
📖 JavaScript
📃 Ecma International, Technical Committee 39 - ECMAScript
🔖 Status, process, and documents for ECMA-262
🔖 Tracking ECMAScript Proposals
🔖 Official ECMAScript Conformance Test Suite
🔖 TC39 meeting agendas
🔖 Status, process, and documents for ECMA 402
🔖 TC39 meeting notes
📖 HTML
To be documented soon📖 CSS
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Local Development
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
📖 Webpack DevServer
🔖 Webpack DevServer in Webpack Serves a webpack app. Updates the browser on changes
🔖 Webpack DevServer in Webpack Docs webpack-dev-server can be used to quickly develop an application. See the development guide to get started
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Microsite
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Monorepo
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
📖 Lerna
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Rendering
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
📖 React
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Routing
📗 Specifications/Standards/Guidelines
To be documented soon📗 Open Source Dependency Projects
📖 React Router
To be documented soon📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Runtime
📗 Specifications/Standards/Guidelines
📖 Client
📃 Google Chrome
🔖 Google Documentation
🔖 Download
📃 Mozilla Firefox
🔖 Mozilla Documentation
🔖 Download
📃 Apple Safari
🔖 Apple Documentation
🔖 Download
📃 Microsoft Edge
🔖 Microsoft Documentation
🔖 Download
📃 Microsoft IE11
🔖 Microsoft Documentation
🔖 Download
📖 Server
📃 Node.JS
🔖 Node.JS Documentation
🔖 Download
📗 Open Source Dependency Projects
📖 Client
📃 Google Chrome
🔖 GitHub Organization
📃 Mozilla Firefox
🔖 GitHub Organization
📃 Apple Safari
To be documented soon📃 Microsoft Edge
🔖 GitHub Organization
📃 Microsoft IE11
To be documented soon📖 Server
📃 Node.JS
🔖 GitHub Organization
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon
📚 Testing
📗 Specifications/Standards/Guidelines
📖 Unit Testing
📃 Jest
🔖 Getting Started
📃 Knowledge base
📄 Jest API
🔖 async/await
✎ async/await must be used with test blocks covering asyncronous functions conforming to the following pattern
test('must ...', async () => { ... await expect(someFunction).someExpectMethod() })🔖 describe
✎ describe() must be used to group related tests conforming to the following pattern
describe('file name of module under test', () => { beforeEach(() => { jest.resetModules() ... }) afterEach(() => { jest.clearAllMocks() ... } describe('name of function as the unit under test', () => { test('must do something', () => { }) test('must do something else', () => { }) }) })🔖 mock
✎ jest.mock() must be used to mock dependency modules
jest.mock('some dependency module name or relative path with module name', () => ({ someExposedFunction: () => ({}), someOtherExposedFunction: jest.fn(), }))🔖 require
✎ require() must be used to mock dependency modules
const someModuleMockObject = require('some-module') const someOtherModuleMockObject = require('../../../relative-path-to/some-module')🔖 spyOn
✎ jest.spyOn() must be used to mock functions exposed by mocked dependency modules conforming to the following pattern
jest.spyOn(requiredMockObject, 'functionExposedByRequiredMockObject')🔖 mockImplementation
✎ jest.mockImplementation() must be used to mock the implementations of mocked functions exposed by mocked dependency modules conforming to the following pattern
jest.spyOn(requiredMockObject, 'functionExposedByRequiredMockObject').mockImplementation(jest.fn()) jest.spyOn(requiredMockObject, 'functionExposedByRequiredMockObject').mockImplementation(jest.fn() => { replace with desired implementation})🔖 mockReturnValue
✎ jest.mockReturnValue() must be used to mock return values of mocked functions exposed by mocked dependency modules conforming to the following pattern
jest.spyOn(requiredMockObject, 'functionExposedByRequiredMockObject').mockReturnValue(someValue)🔖 expect
✎ expect() must be used to assert expected values against received values using matchers conforming to the following pattern
expect(someMockFunction).toHaveBeenCalled() expect(someMockFunction).not.toHaveBeenCalled() ... expect(someMockFunction).toHaveBeenCalledTimes(someNumber) expect(someMockFunction).not.toHaveBeenCalled() ... expect(someMockFunction).toHaveBeenCalledWith({ someObjectProperty: 'some-value', someOtherObjectProperty; expect.any(Boolean)}) ... expect(someObject).toMatchObject(someOtherObject) expect(someObject).not.toMatchObject(someOtherObject) ... expect(someObject).toBe(someOtherObject) expect(someObject).not.toBe(someOtherObject) ... expect(someValue).toEqual(someOtherValue) expect(someValue).not.toEqual(someOtherValue) ... expect(someObject).toBeUndefined() expect(someObject).not.toBeUndefined() ... expect(somevAlue).toBeTruthy() expect(somevAlue).toBeFalsy()📖 Integration Testing
📃 Jest
🔖 Getting Started
📃 Storybook
🔖 Introduction Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
📃 Knowledge base
📄 Jest API
🔖 Snapshot Testing with Jest
✎ Snapshot Testing with Jest Snapshots must be implemented conforming to the following pattern
describe('', () => { describe('Render', () => { test('must match composition', () => { expect(global.renderToJSON()).toMatchSnapshot() }) }) })📄 Storybook API
🔖 Writing Stories with Storybook
✎ Writing Stories with Storybook Stories must be implemented conforming to the following pattern
storiesOf('SomeApplication/SomeAtomicDesignPattern/SomeComponent', module).add(someRenderInfo.text, () => someRender, someRenderInfo.parameters)📖 End to end Testing
📃 Puppeteer
🔖 Quick start
📗 Open Source Dependency Projects
📖 Unit Testing
📃 Jest
🔖 Website
🔖 GitHub Repository
📖 Integration Testing
📃 Jest
🔖 Website
🔖 GitHub Repository
📃 Storybook
🔖 Website
🔖 GitHub Repository
📖 End to end Testing
📃 Puppeteer
🔖 Website
🔖 GitHub Repository
📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Unit Testing
📄 Unit tests run by Jest
🔖 Setup file(s)
✎ jest.config.js
✎ jest.setup.js
🔖 Script(s)
✎ "test": "jest -u --no-cache --silent --runInBand --coverage"
✎ "report-coverage": "codecov"
📃 Integration Testing
📄 Snaphot tests run by Jest
🔖 Setup file(s)
✎ jest.config.js
✎ jest.setup.js
🔖 Script(s)
✎ "test": "jest -u --no-cache --silent --runInBand --coverage"
✎ "report-coverage": "codecov"
📄 Stories run by Storybook
🔖 Setup file(s)
✎ .storybook/addons.js
✎ .storybook/config.js
🔖 Script(s)
✎ "start-storybook": "NODE_ENV=develop start-storybook -p 3003 -c .storybook"
📃 End to end Testing
To be documented soon📃 Knowledge base
📄 Using mock store with mock state
🔖 Mock Store
✎ Mock store is acquired in store/mock.js and uses redux-mock-store
🔖 Mock State
✎ Mock state is acquired in state/mock.js
🔖 Immutability
✎ Immutability of mock state across integration tests is achieved using deepCloneObject()
✎ Changes specific to a test scenario can be applied to the immutable mock state clone
✎ Then adjusted mock state clone is passed on to the mock store and mock store is provided to any UI components involved in the test using react-redux provider🔖 React Redux Provider
✎ React Redux Provider is used to provide the mock store with a mock state to any UI component
✎ It accepts any store object in the store prop and provides the store to UI components rendered as its children
📚 Version Control
📗 Specifications/Standards/Guidelines
📖 Git
🔖 Git SCM Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
🔖 Git Commands Learn Git with Bitbucket Cloud
📖 Git Hooks
🔖 Git SCM Documentation Hooks are programs you can place in a hooks directory to trigger actions at certain points in git’s execution. Hooks that don’t have the executable bit set are ignored.
🔖 Atlassian Documentation Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. They let you customize Git’s internal behavior and trigger customizable actions at key points in the development life cycle.
📖 GitHub
🔖 Status
🔖 Guides
🔖 Help
🔖 Learning Lab
🔖 Open Source Guides
🔖 Topics
🔖 Trending
🔖 Collections
🔖 Marketplace
🔖 Debug
🔖 Desktop
🔖 Engineering
🔖 Blog
🔖 Explore
🔖 Services
📖 Git Client
📃 Git Kraken
🔖 The coolest, the finest and the best Git client in the world 👌
🔖 Over 1.5 Million GitKraken Users❗
🔖 Legendary Git Client 🚀
📃 Sublime Merge
🔖 Meet a new Git Client, from the makers of Sublime Text
🔖 It's alright
📃 GitHub Desktop
🔖 Focus on what matters instead of fighting with Git
🔖 It's alright
📃 Sourcetree
🔖 Simplicity and power in a beautiful Git GUI
🔖 It's alright
📗 Open Source Dependency Projects
📖 Git
🔖 N/A📖 Git Hooks
📃 Husky
🔖 Git hooks made easy
📃 Lint Staged
🔖 Run linters on git staged files
📖 GitHub
🔖 N/A📖 Git Client
🔖 N/A📗 Papillon Bits Implementation
📖 Papillon Bits
📃 Setup file(s)
To be documented soon📃 Knowledge base
To be documented soon📖 Microsites
📃 Git
🔖 N/A
📃 Git Hooks
🔖 Setup file(s)
✎ .huskyrc
✎ .lintstagedrc
🔖 Script(s)
✎ N/A🔖 Knowledge base
To be documented soon📃 GitHub
🔖 N/A
📃 Git Client
🔖 N/A