Carlos Villuendas Zambrana carlosvillu

Service Worker - offline support for the web

Progressive apps - high-res icon, splash screen, no URL bar, etc.

Progressive Web Apps: Escaping Tabs Without Losing Our Soul

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

	cite 'about-alias'
	about-alias 'common npm abbreviations'

	# Aliases
	alias ni='npm install'
	alias nis='npm install --save'
	alias nid='npm install --save-dev'
	alias nit='npm install-test'
	alias nits='npm install-test --save'
	alias nitd='npm install-test --save-dev'

	# Version key/value should be on his own line
	PACKAGE_VERSION=$(cat package.json \
	\| grep version \
	\| head -1 \
	\| awk -F: '{ print $2 }' \
	\| sed 's/[",]//g' \
	\| tr -d '[[:space:]]')

	echo $PACKAGE_VERSION

	// UPD:
	// Now available as npm module!
	// Check out https://github.com/RReverser/better-log for details.

	console.log = (function (log, inspect) {
	return function () {
	return log.apply(this, Array.prototype.map.call(arguments, function (arg) {
	return inspect(arg, { depth: 1, colors: true });
	}));
	};

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

	<plist version="1.0">
	<dict>
	<!-- array of downloads. -->
	<key>items</key>
	<array>
	<dict>

	<!-- an array of assets to download -->

	var express = require('express'),
	http = require('http'),
	path = require('path'),
	child_process = require("child_process");

	var app = express();

	// Server settings
	app.set('port', process.env.PORT \|\| 9999);
	app.use(express.favicon());

	#!/bin/sh
	docker build -t $1 .