Owen Buckley thescientist13

🎯

The right time is always now

HTML enabler, Javascript enthusiast, all words in markdown.

thescientist13 / Dockerfile

Last active October 15, 2017 17:05

Docker for NodeJS development environmet

	FROM ubuntu:16.04

	RUN apt-get update
	RUN apt-get install -y curl vim git bzip2 ssh

	# install HeadlessChrome X11 packages
	# https://github.com/Quramy/puppeteer-example#with-docker-based-ci-services
	RUN apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
	libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
	libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \

thescientist13 / config.yml

Created October 14, 2017 04:35

CircleCI config.yml before custom Docker image

thescientist13 / nodejs-dev-circleci-output.txt

Last active October 14, 2017 22:09

CircleCI output confirming custom nodejs-dev Docker image

	Build-agent version 0.0.4355-1897c1d (2017-10-13T22:25:17+0000)
	Starting container thegreenhouse/nodejs-dev:0.1.0
	image cache not found on this host, downloading thegreenhouse/nodejs-dev:0.1.0
	0.1.0: Pulling from thegreenhouse/nodejs-dev

thescientist13 / config.yml

Created October 14, 2017 17:12

CircleCI config.yml after custom nodejs-dev Docker image

	# Javascript Node CircleCI 2.0 configuration file
	#
	# Check https://circleci.com/docs/2.0/language-javascript/ for more details
	#
	version: 2
	jobs:
	build:
	docker:
	- image: thegreenhouse/nodejs-dev

thescientist13 / karma.conf.js

Last active October 15, 2017 14:32

Headless Chrome Karma configuration for NodeJS Dev Docker

	// 1) from the terminal, install latest version of karma-chrome-launcher and puppeteer (yarn or npm)
	// $ yarn add karma-chrome-launcher puppeteer --dev

	// 2) in your Karam config
	// https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer
	process.env.CHROME_BIN = require('puppeteer').executablePath();

	const config = {
	// start of your config
	// ...

thescientist13 / vendor-code-splitting

Last active January 22, 2018 14:53

Options for code splitting vendor dependencies w/webpack

	/***** option A - separate vendor entry point in webpack config

	// webpack config
	module.exports = {
	entry: {
	index: './index.js',
	vendor: './vendor.js'
	},

	plugins: [

thescientist13 / webpack-optimization-config.js

Last active May 4, 2018 20:12

webpack optimization API configuration

	optimization: {
	minimizer: [
	new UglifyJsWebpackPlugin(),
	new OptimizeCssAssetsPlugin({
	cssProcessorOptions: { discardComments: { removeAll: true } }
	})
	],
	splitChunks: {
	chunks: 'all',
	cacheGroups: {

thescientist13 / index.jsx

Created May 4, 2018 21:39

Example of the Providence Geeks website entry point

	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}>

thescientist13 / index-lazy-loading.jsx

Created May 4, 2018 21:50

Example of the Providence Geeks website entry point w/ Lazy Loading

	# 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 / mini-css-extract-plugin-configuration.js

Created May 7, 2018 19:40

	module: {

	rules: [{
	test: /\.(s*)css$/,
	use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'sass-loader'
	]
	}]