Ben benweizhu

Pure CSS browser mockups

Forked from Adrien Jarthon's Pen Pure CSS browser mockups.

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

	var babelJest = require('babel-jest');

	module.exports = {
	process: function (src, filename) {
	return babelJest.process(src.replace(/import.from.\.((less)\|(scss)\|(svg)).*;/gi, ''), filename);
	}
	};

	import React from "react";
	import { render } from "react-dom";

	const ParentComponent = React.createClass({
	getDefaultProps: function() {
	console.log("ParentComponent - getDefaultProps");
	},
	getInitialState: function() {
	console.log("ParentComponent - getInitialState");
	return { text: "" };

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	FROM gocd/gocd-agent-ubuntu-16.04:v17.11.0

	RUN apt-get clean && apt-get update && apt-get install -y locales

	RUN locale-gen en_US.UTF-8
	ENV LANG en_US.UTF-8
	ENV LANGUAGE en_US:en
	ENV LC_ALL en_US.UTF-8

	RUN apt-get update && \


	#user nobody;
	#Defines which Linux system user will own and run the Nginx server

	worker_processes 1;
	#Referes to single threaded process. Generally set to be equal to the number of CPUs or cores.

	#error_log logs/error.log; #error_log logs/error.log notice;
	#Specifies the file where server logs.

	const path = require('path');
	const webpack = require('webpack');
	const nodeExternals = require('webpack-node-externals');
	module.exports = {
	target: "node",
	entry: "./index.js",
	externals: [nodeExternals()],
	output: {
	libraryTarget: 'commonjs2',
	path: path.resolve(__dirname, ""),

	docker stop $(docker ps -a -q)
	docker rm $(docker ps -a -q)