A cheatsheet by @rstacruz|Refreshed over 3 years ago.Refresh|View source on Github

This repository supports contribution using gitpod which is online IDE using Theia.

To open-up the environment simple natigate on https://gitpod.io/#https://github.com/rstacruz/cheatsheets

Or using a button:

Open in Gitpod

Preview built website

Preview built website

To preview the website you need to first build it then you can navigate to file that you are trying to contribute and preview directly.

This starts Jekyll and Parcel. This requires recent versions of Node.js, Yarn, Ruby and Bundler installed.

yarn install
bundle install
env PORT=4001 yarn run dev



You can also run a local instance using Docker. This is the preferred method, especially for Windows.
You only need to install Docker (macOS, Windows, Ubuntu, Arch Linux, other).

First time setup:

# Build images (takes ~12mins)
docker-compose build

# First-time setup
docker-compose run --rm web bundle install && docker-compose run --rm web yarn install

Starting the server:

docker-compose up

See https://devhints.io/cheatsheet-styles for a reference on styling.

When updating JavaScript, be sure Parcel is running (yarn dev takes care of this).

This auto-updates /assets/packed/ and _includes/2017/critical/ with sources in _parcel/.

Before committing, run yarn parcel:build first.

There are also automated tests:

yarn run test --watch

Each sheet supports these metadata:

title: React.js
layout: 2017/sheet # 'default' | '2017/sheet'

# Optional:
category: React
updated: 2020-06-14
ads: false # Add this to disable ads
weight: -5 # lower number = higher in related posts list
deprecated: true # Don't show in related posts
deprecated_by: /enzyme # Point to latest version
prism_languages: [vim] # Extra syntax highlighting
intro: |
  This is some *Markdown* at the beginning of the article.
  - WIP
  - Featured

# Special pages:
# (don't set these for cheatsheets)
type: home # home | article | error
og_type: website # opengraph type

This example sets up a redirect from es2015 to es6:

# /es2015.md
title: ES2015
category: Hidden
redirect_to: /es6

See _data/content.yml for chrome strings.

So you want to fork this repo? Sure, here’s what you need to know to whitelabel this:

  • It’s all GitHub pages, so the branch has to be gh-pages.
  • All other GitHub pages gotchas apply (CNAME, etc).
  • Edit everything in _data/ - this holds all ‘config’ for the site: ad IDs, strings, etc.
  • Edit _config.yml as well, lots of things may not apply to you.

The site devhints.io is backed by CloudFlare. Updates will take 2 days to propagate to the website by default. To make sure recent changes will propagate, use this helper script. It will give instructions on how manual selective cache purging can be done.


There are multiple ways to set meta description.

Keywords (and intro)

Keywords (and intro)

Set keywords (and optionally intro). This is the easiest and the preferred
way for now.

React cheatsheet - devhints.io
https://devhints.io/react ▼
React.Component · render() · componentDidMount() · props/state · React is a
JavaScript library for building web...

Description (and intro)

Description (and intro)

Set description (and optionally intro)

React cheatsheet - devhints.io
https://devhints.io/react ▼
One-page reference to React and its API. React is a JavaScript library for
building web user interfaces...

Intro only

Intro only

If you left out description or keywords, a default description will be added.