Gabo Esquivel gaboesquivel

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.

Vagrant with Ansible Provisioner on Windows

Long story short, ansible does not work on a Windows control machine, so you basically have to:

either run ansible --connection=local ... in the target vm
set up a separate control vm where ansible is installed via shell provisioner

Below are Vagrantfile examples for both approaches

Within the Target VM

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

New ES6 Constructor Semantics and Usage Examples

Manual super: Alternative Design where subclass constructors do not automatically call superclass constructors

This Gist presents a new design of class-based object construction in ES6 that does not require use of the two-phase @@create protocol.

One of the characteristics of this proposal is that subclass constructors must explicitly super invoke their superclass's constructor if they wish to use the base class' object allocation and initialization logic.

An alternative version of this design automatically invokes the base constructor in most situations.

This is an excerpt from an interview that I had recently.

Just wanted to share.

Volkan

Since how long do you develop for the web ? Front-end or Back-end?

	// Usage:
	// Copy and paste all of this into a debug console window of the "Who is Hiring?" comment thread
	// then use as follows:
	//
	// query(term \| [term, term, ...], term \| [term, term, ...], ...)
	//
	// When arguments are in an array then that means an "or" and when they are seperate that means "and"
	//
	// Term is of the format:
	// ((-)text/RegExp) ( '-' means negation )

	/**
	* This gulpfile will copy static libraries and a index.html file as well as
	* merge, babelify and uglify the rest of the javascript project.
	*
	* TODO:
	* - Separate media, libs and src with different watchers.
	* - Media and libs should only be copied to dist if they are different sizes.
	*
	* The expected project is to be laid out as such:
	*

	import test from 'tape';

	const before = test;
	const after = test;

	// beforeEach/afterEach rely on shared state.
	// That's a big anti-pattern for testing.

	// It's also silly to run something before and after
	// ever test -- many of your tests won't need it.

	#!/bin/bash
	PROJECT_NAME=MyApp
	SCHEME_NAME=MyApp
	STARTTIME=$(date +%s);

	set -e
	set -x

	### Install dependencies
	echo "--- Install dependencies [Time Elapsed $(($(date +%s) - $STARTTIME))s]"

	// Generated on 2014-12-15 using
	// generator-webapp 0.5.1
	'use strict';

	// # Globbing
	// for performance reasons we're only matching one level down:
	// 'test/spec/{,/}.js'
	// If you want to recursively match all subfolders, use:
	// 'test/spec/*/.js'