David Furlong davidfurlong

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:

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

require-from-twitter

Since Twitter doesn't have an edit button, it's a suitable host for JavaScript modules.

How to use

Source tweet: https://twitter.com/rauchg/status/712799807073419264

const leftPad = await requireFromTwitter('712799807073419264');

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

	// Returns the score if within the proximity, else returns -1

	Array.prototype.indexOfAll = function(term) {
	if(typeof term == 'object'){
	console.error('indexOfAll expects an array of terms as an argument');
	return;
	}
	var posOfTerms = [];
	for(i in this){
	if(this[i] == term){

	server {
	listen 80;

	root /var/www/YOUR_DIRECTORY;
	index index.php index.html index.htm;

	###################################################
	# Change "yoururl.com" to your host name

	server_name yoururl.com;

	export function login(loginHandle, password) {
	return {
	types: [LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE],
	promise: (api) => api.post('/auth/login', { login: loginHandle, password }).then(response => {
	setAuthCookie(response.token); // side effect pre success dispatch
	return response;
	}),
	then: (response) => {
	postLoginRedirect(browserHistory.push, response.user, response.organisation); // side effect post success dispatch
	},

	import React, { Component, PropTypes } from 'react';
	import { reduxForm, Field } from 'redux-form';

	export class CreateUser extends Component {

	static propTypes = {
	createUser: PropTypes.func.isRequired,
	initialValues: PropTypes.object,
	submitting: PropTypes.bool.isRequired,
	invalid: PropTypes.bool.isRequired,

	// @flow
	/* eslint-disable */

	declare module 'redux-form' {
	declare export type InputProps = {
	checked?: boolean,
	name: string,
	value: any,
	onBlur: Function,
	onChange: Function,