Drew Powers drwpow

Option	Default	Description
`team`	(none)	Set the team label for this app
`project`	(none)	Set the project label for this app

Connection	CPU	Before	After	Improvement
Fast (200MB)	Fast	1.5s	0.2s	750%
Average (3G)	Fast	5.6s 🐢	1.1s	500%
Average (3G)	Average	7.5s 😞	1.3s	570%
Slow (Slow 3G)	Average	22s 😱	4s	550%

will.i.am, on brand

First off, your logo has to be just as impactful in black-and-white. You have to start there. If your logo is not powerful, black-and-white, then there’s a problem.

If your logo isn’t powerful very very small, then there’s a problem.

If your logo collapses when you blow it up really, really big, then there’s a problem.

If your logo can’t transform itself to other things, and you still know what that logo is, then there’s a problem.

So your logo should be able to have all those things in the new world, where, you know, it’s symbolic—it has some type of, uh, meaning that represents your brand’s and company’s—I don’t even like to use the term “brand”—if the logo doesn’t represent the company’s objective on a symbolic level, right? Because you have to think of what India is going to do to the world. We know what Silicon Valley did to the world. We know what China does for the world. But what India is going to do for the world is they’re going to create this symbolic language. Because Ind

Setup

yarn add webpack webpack-merge

File structure

Can be changed, but affects context and resolve.modules in webpack.common.js:

├── config

	class HomePage extends React.Component {
	static getInitialProps() {
	// This only fires on the first SSR pass
	}
	componentDidMount() {
	// This only fires in the client, when mounted (not on SSR)
	}
	…
	}

	module.exports = {
	webpack: (config, options) =>
	Object.assign(config, {
	node: config.isServer ? undefined : { fs: 'empty' },
	}),
	};

	module.exports = {
	webpack: (config, options) =>
	Object.assign(config, {
	plugins: config.plugins.concat([
	new webpack.ProvidePlugin(
	config.isServer
	? {}
	: { fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' }
	),
	]),

	/* Old (React Router) */

	<Link to="/my/page">
	A link
	</Link>

	/* New (Next.js router) */

	<Link href="/my/page" passHref>
	<a>

	{
	"plugins": [
	"stylelint-order"
	],
	"processors": ["stylelint-processor-styled-components"],
	"extends": [
	"stylelint-config-recommended",
	"stylelint-config-styled-components"
	],
	"rules": {

	if (typeof window !== 'undefined') {
	// Pls let me access `window` without everything blowing up
	}