gillkyle

Make your Gatsby site a “Progressive web app" (PWA)

“Progressive web app” (PWA) is a term for a new philosophy of building websites.

They help provide native-like features to web apps across platforms and require 3 things:

1. A manifest file (gatsby-plugin-manifest)
2. A service worker (gatsby-plugin-offline)
3. Run on https

gillkyle

Create transitions between Gatsby pages

You can create transitions for animating between entering and exiting Gatsby pages.

---

The first step is installing the NPM packages you need:

gillkyle

import React from "react"
import AniLink from "gatsby-plugin-transition-link/AniLink";

export default () => (
  <div>
    This is an example page! Click on this link to test an animation:
    <AniLink paintDrip to="/transition-fade">
      Paint drip to another page
    </AniLink>
  </div>

gillkyle

import React from "react"
import AniLink from "gatsby-plugin-transition-link/AniLink";

export default () => (
  <div>
    This is an example page! Click on this link to test an animation:
    <AniLink fade to="/transition-paint-drip">
      Fade to another page
    </AniLink>
  </div>

gillkyle

Getting Started with Elixir

Install on Mac with:

brew install elixir

Start an interactive shell (sort of like Rail's rails console):

gillkyle

{
  "New React file": {
    "prefix": "nr",
    "body": [
      "import React from \"react\"",
      "",
      "const $1 = ({ $2 }) => {",
      "  $3",
      "}",
      "",

gillkyle

await new Promise(f => setTimeout(f, 5000))

gillkyle

/* removes content from page layout but keeps information available to accessibility APIs */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

gillkyle

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^2.13.42",
    "gatsby-image": "^2.2.7",
    "gatsby-plugin-manifest": "^2.2.4",

gillkyle

# make sure that you have an iTerm2 profile called "Egghead" to apply it with this command
alias egghead="echo -e '\033]50;SetProfile=Egghead\x7' && export PS1='\\$ ' && clear"