Tristen Brown tristen

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: mathisonian/requirify#5

inspiration

yo heather! very cool that you're looking into a scooter. i can guarantee a good time. anyway, to the point:

displacement

(disclaimer: I DON'T MEAN TO SOUND LIKE A MANSPLAINING D-BAG, so if i do, i'm sorry, i just get excited about this shit and want to pass on what i know)

displacement is the volume of gas moved by all the cylinders in an internal combustion engine. you've seen these:

Getting Started

I recently made my first map with MapBox's new WebGL+JavaScript API. There aren't many examples of how to do this yet, even on MapBox's API page, so I'll document my own experience here.

The Van Gogh Map

My map is made of several textures taken from Van Gogh paintings. The long-term goal is to allow a user to select which artworks they want to take textures from, but for now there is just one setting.

Why are we changing maps?

This is a more wordy, narrative accompaniment to my pretty bare presentation about d3 that I gave to the jQuery DC Meetup.

What is d3?

Not a chart library (though you can make charts with it)
Not a map library (though you can make maps with it)

Which is to say, d3 can be used for building things, but the 'atomic parts' are lower-level than bar graphs or projections or so on. This is a powerful fact. It also means that d3 is a good basis for simple interfaces, like Vega.js, that make its power accessible in other ways.

Not a compatibility layer (it doesn't work with bad browsers)

	<html>

	<head>

	<script is:inline defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />

	<style>
	.slider {
	width: 70%;

	// custom mapbopx-gl-draw mode that modifies draw_line_string
	// shows a center point, radius line, and circle polygon while drawing
	// forces draw.create on creation of second vertex

	import MapboxDraw from 'mapbox-gl-draw';
	import numeral from 'numeral';
	import lineDistance from 'npm:@turf/line-distance';

	const RadiusMode = MapboxDraw.modes.draw_line_string;

	/*-----------------------------------------------------------.
	/ ColorBlind correction /
	'-----------------------------------------------------------*/
	// Daltonize (source http://www.daltonize.org/search/label/Daltonize)
	// Modified to simulate color blindness.
	float4 Daltonize( float4 input, float2 tex )
	{
	// RGB to LMS matrix conversion
	float3 L = (17.8824f * input.r) + (43.5161f * input.g) + (4.11935f * input.b);
	float3 M = (3.45565f * input.r) + (27.1554f * input.g) + (3.86714f * input.b);

	#import <Cocoa/Cocoa.h>

	@interface NSColor (isLight)

	- (BOOL)isLight;

	@end

	#!/usr/bin/env python
	# saved to ~/bin/batcharge.py and from
	# http://stevelosh.com/blog/2010/02/my-extravagant-zsh-prompt/#my-right-prompt-battery-capacity
	#!/usr/bin/env python
	# coding=UTF-8

	import math, subprocess

	p = subprocess.Popen(["ioreg", "-rc", "AppleSmartBattery"], stdout=subprocess.PIPE)
	output = p.communicate()[0]

	#!/bin/bash

	PROGNAME=${0##*/}
	INPUT=''
	QUIET='0'
	NOSTATS='0'
	max_input_size=0
	max_output_size=0

	usage()