Jérôme Pott mornir

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

1. Clone your fork:

git clone [email protected]:YOUR-USERNAME/YOUR-FORKED-REPO.git

2. Add remote from original repository in your forked repository:

cd into/cloned/fork-repo
git remote add upstream git://github.com/ORIGINAL-DEV-USERNAME/REPO-YOU-FORKED-FROM.git
git fetch upstream

Building an assistant (chatbot) that translates languages, integrated with Slack

If you're trying to do this, you came to the right place!

See this code in action here: https://twitter.com/CodingDoug/status/953031540811825152

Setup

Create a Firebase project at the Firebase Console

Copying data from Firebase Realtime Database to a Google Sheet in real time via Cloud Functions

If you're trying to do this, you came to the right place!

Watch this code work in real time: https://twitter.com/CodingDoug/status/940022568089554944

See also this gist for copying in the other direction: https://gist.github.com/CodingDoug/44ad12f4836e79ca9fa11ba5af6955f7

Setup

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

	:root {
	--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

	const sanity = require('@sanity/client')
	const fs = require('fs')
	const EOL = require('os').EOL
	const flatMap = require('lodash.flatmap')
	const { subDays, isBefore } = require('date-fns')
	const sanityExport = require('@sanity/export')

	/**
	* @param context {WebtaskContext}
	*/

	// Copyright 2017 Google LLC.
	//
	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use this file except in compliance with the License.
	// You may obtain a copy of the License at
	//
	// https://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,

	async function fetchAsync () {
	// await response of fetch call
	const response = await fetch('https://api.github.com');
	// only proceed once promise is resolved
	const data = await response.json();
	// only proceed once second promise is resolved
	return data;
	}

	// more concise

	// Trigger function copies new data in FB database to Google Sheet

	const FUNCTIONS_CLIENT_ID = functions.config().googleapi.client_id;
	const FUNCTIONS_SECRET_KEY = functions.config().googleapi.client_secret;
	const FUNCTIONS_REDIRECT = '{YOUR_FUNCTIONS_SUBDOMAIN}.cloudfunctions.net/OauthCallback';
	// TODO: use firebase functions:config:set to configure your Google API client ID and secret
	// Also update FUNCTIONS_REDIRECT

	const googleAuth = require('google-auth-library');
	const google = require('googleapis');