gillkyle

Getting Started with Elixir

Install on Mac with:

brew install elixir

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

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

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

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

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

Add Authentication with Auth0 to a Gatsby site

All the pieces of authentication are possible in Gatsby. Thanks to Auth0, setting it up doesn't have to be so cumbersome!

This setup comes straight from Auth0's official quick start for React.

---

The first step is installing the official Auth0 SDK for JavaScript from npm.

gillkyle

{
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "workbench.colorTheme": "Hyper Term Black",
  "workbench.iconTheme": "vscode-icons",
  "workbench.sideBar.location": "right",
  "workbench.colorCustomizations": {
    "editor.selectionHighlightBackground": "#24386e",
    "editor.findMatchBackground": "#2d364e",
    "editor.findMatchHighlightBackground": "#38415c"
  } 

gillkyle

#!/usr/bin/env python3

# NOTE: this is a really naive solution that just checks for alt="" in the returned html from the page, 
# it would probably give a lot of erroneous results on other projects but got the job done for me.

import urllib.request as urllib2

base_path = "https://gatsbyjs.com"
blog_paths = 'blog_paths.txt'

gillkyle

add_action('graphql_register_types', function() {
	register_graphql_mutation('submitShowcaseSiteFromPublicUser', [
		'description' => __('Allow unauthenticated users to submit sites to the showcase, with limited fields.'),
		'inputFields' => [
			'title' => [
				'type' => ['non_null' => 'String'],
			],
			'mainUrl' => [
				'type' => ['non_null' => 'String'],
			],

gillkyle

import * as React from 'react'
import { Skeleton } from '@chakra-ui/react'

export default function SkeletonLoader({ skeletonProps, status, children }) {
  if (status === 'loading')
    return <Skeleton height="100%" width="100%" {...skeletonProps} />
  if (status === 'error') return null

  return children
}