Skip to content

Instantly share code, notes, and snippets.

💯
The right time is always now

Owen Buckley thescientist13

💯
The right time is always now
Block or report user

Report or block thescientist13

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@thescientist13
thescientist13 / package.json
Last active Sep 11, 2018
Example of ExpressJS SSR Dependencies
View package.json
{
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"express": "^4.16.2",
"pm2": "^2.7.2"
}
@thescientist13
thescientist13 / package.json
Created Sep 11, 2018
Example of dependencies for a basic React App
View package.json
{
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/preset-env": "^7.0.0",
@thescientist13
thescientist13 / server.js
Last active Sep 13, 2018
Example server.js for an Express app
View server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send(`
<html>
<head>
<title>SSR App</title>
</head>
@thescientist13
thescientist13 / Dockerfile
Last active Sep 11, 2018
ExpressJS Dockerfile
View Dockerfile
FROM node:8
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json
# AND package-lock.json are copied
COPY package*.json ./
@thescientist13
thescientist13 / custom-element-example.js
Last active Sep 1, 2018
Basic Custom Element Example
View custom-element-example.js
// https://jsfiddle.net/thegreenhouseio/qjj9hvv9/
class HelloWorld extends HTMLElement {
constructor(name) {
super();
this.subject = name || 'World';
// creates a Shadow DOM tree
this.root = this.attachShadow({ mode: 'closed' });
}
@thescientist13
thescientist13 / providence-geeks-stats-pt3.csv
Last active May 15, 2018
Build stats for the Providence Geeks website article series, pt. 3
View providence-geeks-stats-pt3.csv
Benchmark Before After Difference
JS Payload 198KB 166KB ⬇️32KB
CSS Payload 12.1KB 11.2KB ⬇️.9KB
DOMContentLoaded 340ms 203ms ⬇️137ms
Lighthouse Performance Score 72 86 ⬆️14
Time To First Meaningful Paint 4.4s 1.2s ⬇️3.2ms
Time To Interactive 4.4s 4.9s ⬆️.5ms
@thescientist13
thescientist13 / webpack4-build-stats-local.csv
Last active May 15, 2018
Local build stats for webpack v4 for Providence Geeks
View webpack4-build-stats-local.csv
Benchmark Before After Difference
JS Payload 716KB 622KB ⬇️94KB
Build Time 44.71s 29.08s ⬇️15.63s
Lighthouse Performance Score 47 52 ⬆️5
View mini-css-extract-plugin-configuration.js
module: {
rules: [{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}]
@thescientist13
thescientist13 / index-lazy-loading.jsx
Created May 4, 2018
Example of the Providence Geeks website entry point w/ Lazy Loading
View index-lazy-loading.jsx
# routes.js
import Bootstrap from './components/bootstrap/bootstrap';
// thanks to https://brotzky.co/blog/code-splitting-react-router-webpack-2/!
function handleRouteLoadingError(error) {
throw new Error(`Dynamic page loading failed: ${error}`);
}
function loadRoute(cb) {
return module => cb(null, module.default);
@thescientist13
thescientist13 / index.jsx
Created May 4, 2018
Example of the Providence Geeks website entry point
View index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import Bootstrap from './components/bootstrap/bootstrap';
import Home from './views/home/home';
import PostDetails from './views/post-details/post-details';
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/' component={Bootstrap}>
You can’t perform that action at this time.