mrmartineau

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "react"
  ],

mrmartineau

import React from 'react'
import { connect } from 'react-redux'
import { doClearQuery } from './some/file/of/action/creators'

// We again use a simple, functional component.
const OurComponent = ({ query, results, clearQuery }) => (
  <div>
    query: {query}
    <button onClick={clearQuery}>Clear</button>
    <ul>

mrmartineau

const USERNAME = 'admin@foobar.com'
const TOKEN = 'hPPacTBSv7k0xAhAJrZjtmrmfhBj6rYd4UVfZvCO'
const authToken = btoa(
  unescape(encodeURIComponent(`${USERNAME}:${TOKEN}`))
)

// authToken = 'YWRtaW5AZm9vYmFyLmNvbTpoUFBhY1RCU3Y3azB4QWhBSnJaanRtcm1maEJqNnJZZDRVVmZadkNP'

mrmartineau

Table of contents

• General resources
• CSS
  • CSS-in-JS
• JavaScript
  • Framework agnostic packages
    • General utilities
• Async

mrmartineau

// 1
scripts: {
  // ...
  "precommit": "lint-staged",
  "lint-staged-stash": "git stash save --keep-index 'lint-staged' && touch .didstash || rm .didstash || true",
  "lint-staged-stash-pop": "test -f .didstash && rm .didstash && git stash pop || true"
},
"lint-staged": {
  "*.js": ["lint-staged-stash", "eslint --fix", "git add", "lint-staged-stash-pop"]
},

mrmartineau

var callback = (entries, observer) => {
  entries.forEach(entry => {
    console.log('entry', entry)
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds

mrmartineau

Basic grid

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, 112px);
  /* or this */
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

mrmartineau

Stimulus cheatsheet

• Website: https://stimulusjs.org/
• GitHub repo: https://github.com/stimulusjs/stimulus
• Handbook: https://stimulusjs.org/handbook/introduction
• Discourse: https://discourse.stimulusjs.org/

Lifecycle callbacks

• initialize: once, when the controller is first instantiated
• connect: anytime the controller is connected to the DOM

mrmartineau

Verifying my Blockstack ID is secured with the address 1yEg3gcmHZtHZp2eoFy8UocU3H8dxuKPh https://explorer.blockstack.org/address/1yEg3gcmHZtHZp2eoFy8UocU3H8dxuKPh

mrmartineau

Git Cheat Sheet

Initial Setup

Initialize a repo

Create an empty git repo or reinitialize an existing one

$ git init