scottdomes’s gists

scottdomes / manifest.json

Last active May 22, 2018 13:23

	{
	"short_name": "My First PWA",
	"name": "My First Progressive Web App",
	"icons": [
	{
	"src":"icon.png",
	"sizes": "192x192",
	"type": "image/png"
	}
	],

scottdomes / index.html

Created April 21, 2017 20:55

ProgressivelyEnhancedIndex

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	<title>React App</title>
	<!-- Add in some basic styles for our HTML -->
	<style type="text/css">
	body {

scottdomes / service-worker.js

Last active May 22, 2018 13:56

	// Set this to true for production
	var doCache = false;

	// Name our cache
	var CACHE_NAME = 'my-pwa-cache-v1';

	// Delete old caches that are not our current one!
	self.addEventListener("activate", event => {
	const cacheWhitelist = [CACHE_NAME];
	event.waitUntil(

scottdomes / pwa-starter.js

Last active March 9, 2019 14:52

	import React, { Component } from 'react';
	import { Router, browserHistory, Route, Link } from 'react-router';
	import logo from './logo.svg';
	import './App.css';

	const Page = ({ title }) => (
	<div className="App">
	<div className="App-header">
	<img src={logo} className="App-logo" alt="logo" />
	<h2>{title}</h2>

scottdomes / ImageGrid.js

Last active March 17, 2017 21:50

Starting ImageGrid Component

	import React, {Component} from 'react'
	import Masonry from 'masonry-layout'
	import './ImageGrid.css'

	export default class ImageGrid extends Component{
	state = { allImagesLoaded: false }
	imagesLoaded = 0

	handleImageLoad = () => {
	this.imagesLoaded++

scottdomes / FunctionalComponent.js

Last active February 15, 2018 13:49

React Component Best Practices: Functional Component

	import React from 'react'
	import { observer } from 'mobx-react'
	import { func, bool } from 'prop-types'
	// Separate local imports from dependencies
	import './styles/Form.css'

	// Declare propTypes here, before the component (taking advantage of JS function hoisting)
	// You want these to be as visible as possible
	ExpandableForm.propTypes = {
	onSubmit: func.isRequired,

scottdomes / ClassComponent.js

Last active September 28, 2018 18:02

React Component Best Practices: Class Component

	import React, { Component } from 'react'
	import { observer } from 'mobx-react'
	import { string, object } from 'prop-types'
	// Separate local imports from dependencies
	import ExpandableForm from './ExpandableForm'
	import './styles/ProfileContainer.css'

	// Use decorators if needed
	@observer
	export default class ProfileContainer extends Component {

scottdomes / AppWithInitialBenchmark.js

Created December 20, 2016 01:30

	componentWillMount() {
	window.performance.mark('App')
	}

	componentDidMount() {
	console.log(window.performance.now('App'))
	}

scottdomes / ListItemWithShouldComponentUpdate.js

Created December 20, 2016 01:17

	import React, { Component } from 'react'

	export default class ListItem extends Component {
	shouldComponentUpdate(nextProps, nextState) {
	return nextProps.text !== this.props.text
	}

	render() {
	let { text } = this.props
	return <li>{text}</li>

scottdomes / Perf.js

Created December 20, 2016 01:09

Scott scottdomes