Gokulakrishnan Kalaikovan gokulkrishh

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.

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);

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

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

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

	var HashTable = function() {
	this._storage = [];
	this._count = 0;
	this._limit = 8;
	}


	HashTable.prototype.insert = function(key, value) {
	//create an index for our storage location by passing it through our hashing function
	var index = this.hashFunc(key, this._limit);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	//See https://github.com/togakangaroo/simple-modules

	{
	"cssconf": {
	"location": {
	"date": "September 12, 2014",
	"country": "Germany",
	"city": "Berlin",
	"venue": "Radialsystem V",
	"lat": 52.51039,
	"long": 13.42864
	},

	main_module
	.factory('twitter', function (env, $localStorage, $log, $q,$rootScope) {
	$log.log(env);
	var url_q = $q.defer();
	var cb = new Codebird, auth_url;
	cb.setConsumerKey(env.twitter.consumerKey, env.twitter.consumerSecret);
	if ($localStorage.twitter_tokken && $localStorage.twitter_tokken_secret) {
	cb.setToken($localStorage.twitter_tokken, $localStorage.twitter_tokken_secret);
	}
	cb.__call(