Skip to content

Instantly share code, notes, and snippets.

View azamatsmith's full-sized avatar

Matthew Smith azamatsmith

View GitHub Profile
@azamatsmith
azamatsmith / Title.js
Last active September 7, 2022 17:07
Reusable media queries with Styled Components
import styled from 'styled-components';
import { media } from 'utils/mediaQuery';
const Title = styled.h1`
font-size: 24px;
${media.medium`
font-size: 30px;
`}
${media.large`
font-size: 36px;
@azamatsmith
azamatsmith / prebuild.js
Created April 4, 2019 15:12
(Hacky) Netlify cache populator for large Gatsby Projects
const { join, resolve, basename } = require('path');
const { ensureDir, remove, readdir, copySync } = require('fs-extra');
async function calculateDirs() {
const program = {
directory: join('/', 'opt', 'build', 'cache'),
};
const dirsToCache = [resolve(program.directory, 'public'), resolve(program.directory, '.cache')];
@azamatsmith
azamatsmith / useTimer.js
Last active March 2, 2019 00:56
React Hooks - Timer example using setInterval
import React from 'react';
function Timer() {
const [time, setTime] = React.useState(0);
const [timerRunning, setTimerRunning] = React.useState(0);
const intervalRef = React.useRef();
React.useEffect(() => {
if (timerRunning) {
intervalRef.current = setInterval(() => {
@azamatsmith
azamatsmith / gist:8fef677fc0defcdd00a17f160687cad3
Created December 13, 2018 23:14
Gatsby - Reusable Static Query Example
import React from 'react';
import PropTypes from 'prop-types';
import { graphql, StaticQuery } from 'gatsby';
function TestimonialQuery({ children, identifier }) {
return (
<StaticQuery
query={graphql`
query {
allContentfulTestimonial {
@azamatsmith
azamatsmith / Loading.test.js
Created April 7, 2018 14:10
Example test of a react native loading component with Enzyme and Jest
import React from 'react';
import {shallow} from 'enzyme';
import Loading from './';
describe('<Loading />', () => {
const notLoadingWrapper = shallow(<Loading loading={false} />);
const defaultWrapper = shallow(<Loading />);
it('renders without crashing', () => {
expect(defaultWrapper.find('View').length).not.toEqual(0);
@azamatsmith
azamatsmith / monty_hall.js
Created April 1, 2018 13:56
Suppose you're on a game show, and you're given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what's behind the doors, opens another door, say No. 3, which has a goat. He then says to you, "Do you want to pick door No. 2?" Is it to your advantage to switch your …
// Inspired by the movie 21. I wanted to run a simulation to better understand the
// problem and test to see if the odds really do shift to 66%.
// Spoiler Alert: They do!
// NOTE: Also swapped llamas for goats since they are way cooler
// Generate a random number between 1 and 3
function getNum() {
return Math.floor(Math.random() * 3) + 1
}
@azamatsmith
azamatsmith / queryFragments.js
Last active February 21, 2018 16:05
Gatsby Query Fragment - Multiple Images Example
// Your Component (anywhere in your project)
//
// Place this fragment at the bottom of your component
// and Gatsby will collect it prior to running any
// page queries
export const profileImageFragment = graphql`
fragment ProfileImage on RootQueryType {
mattProfile: imageSharp(id: {regex: "/matt-profile.png/"}) {
resolutions(width: 339, height: 339) {
...GatsbyImageSharpResolutions
@azamatsmith
azamatsmith / gatsby-browser.js
Last active May 23, 2021 11:38
Adding Redux to Gatsby - with devtools and redux-thunk
import React from 'react';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './src/reducers';
const loadDevTools = () =>
process.env.NODE_ENV === 'development' && window.devToolsExtension
? window.__REDUX_DEVTOOLS_EXTENSION__ &&