Gavin McFarland gavinmcfarland

Step 1 - Make a Discord Webhook

Find the Discord channel in which you would like to send commits and other updates
In the settings for that channel, find the Webhooks option and create a new webhook. Note: Do NOT give this URL out to the public. Anyone or service can post messages to this channel, without even needing to be in the server. Keep it safe!

Step 2 - Set up the webhook on Github

Navigate to your repository on Github, and open the Settings

Debugging ES6 in VS Code

My current editor of choice for all things related to Javascript and Node is VS Code, which I highly recommend. The other day I needed to hunt down a bug in one of my tests written in ES6, which at time of writing is not fully supported in Node. Shortly after, I found myself down the rabbit hole of debugging in VS Code and realized this isn't as straightforward as I thought initially. This short post summarizes the steps I took to make debugging ES6 in VS Code frictionless.

What doesn't work

My first approach was a launch configuration in launch.json mimicking tape -r babel-register ./path/to/testfile.js with babel configured to create inline sourcemaps in my package.json. The debugging started but breakpoints and stepping through the code in VS Code were a complete mess. Apparently, ad-hoc transpilation via babel-require-hook and inline sourcemaps do not work in VS Code. The same result for attaching (instead of launch) to `babel-node

Directory structure for JavaScript/Node Projects

While the following structure is not an absolute requirement or enforced by the tools, it is a recommendation based on what the JavaScript and in particular Node community at large have been following by convention.

Beyond a suggested structure, no tooling recommendations, or sub-module structure is outlined here.

Directories

lib/ is intended for code that can run as-is
src/ is intended for code that needs to be manipulated before it can be used

	let angle = 45
	let theta = angle * (Math.PI/180) //radians

	let sel = figma.currentPage.selection[0]
	//cx,cy is the center of the node
	let cx = sel.x + sel.width/2
	let cy = sel.y + sel.height/2
	let newx = Math.cos(theta) * sel.x + sel.y * Math.sin(theta) - cy * Math.sin(theta) - cx * Math.cos(theta) + cx
	let newy = - Math.sin(theta) * sel.x + cx * Math.sin(theta) + sel.y * Math.cos(theta) - cy * Math.cos(theta) + cy

	#!/bin/bash

	function deploy {
	# Update the rsync target on the server
	rsync \
	-av \
	--delete \
	--delete-excluded \
	$rsync_ignore_list_param \
	$rsync_source/ $target:$rsync_target

	#!/usr/bin/env python

	"""

	Copyright (c) 2014 Koen Bok / Podium BV / framerjs.com

	Small web server script that you can drop in and run from every Framer Studio
	project to serve it to the browser over http. This is great if you want to avoid
	same origin policy errors in the browser, but also nice to preview it on another
	device connected to the same network.

	# An example with classes building components.
	# This stuff is a little fiddly to get set up,
	# but once it's working it's great - you can just
	# add new instances of the components, and each
	# components holds references to all of its
	# children. You can set defaults & states for each
	# component separately.
	#
	# (try clicking on the post author, and then on each
	# of the comments on a post)

	EventEmitter = (require?("./EventEmitter") \|\| Framer).EventEmitter

	class AppStateMachine extends EventEmitter

	constructor: ->
	@states = []

	# Start the state machine with the document's hash, or the given route
	start: (name) ->
	@go if document.location.hash then document.location.hash[1..-1] else name

	{
	"name": "polymer-globals-behavior",
	"dependencies": {
	"polymer": "Polymer/polymer#~1.0.5"
	}
	}