Kevin Ingersoll frolic

Javascript `log` Function

Every time I start a new project, I want to pull in a log function that allows the same functionality as the console.log, including the full functionality of the Console API.

There are a lot of ways to do this, but many are lacking. A common problem with wrapper functions is that the line number that shows up next to the log is the line number of the log function itself, not where log was invoked. There are also times where the arguments get logged in a way that isn't quite the same as the native function.

This is an attempt to once and for all document the function that I pull in to new projects. There are two different options:

The full version: Inspired by the plugin in HTML5 Boilerplate. Use this if you are writing an application and want to create a window.log function. Additionally,

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

Documentation-Driven Development

The philosophy behind Documentation-Driven Development is a simple: from the perspective of a user, if a feature is not documented, then it doesn't exist, and if a feature is documented incorrectly, then it's broken.

Document the feature first. Figure out how you're going to describe the feature to users; if it's not documented, it doesn't exist. Documentation is the best way to define a feature in a user's eyes.
Whenever possible, documentation should be reviewed by users (community or Spark Elite) before any development begins.
Once documentation has been written, development should commence, and test-driven development is preferred.
Unit tests should be written that test the features as described by the documentation. If the functionality ever comes out of alignment with the documentation, tests should fail.
When a feature is being modified, it should be modified documentation-first.
When documentation is modified, so should be the tests.

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

This middleware does a few interesting things:

Ensures a url shape in the zustand store, where we'll store URL information.
Assumes we will be storing our url state slice in the ?state search parameter after it has been stringified and base 64 encoded.
On creation, decodes stores state from the ?state search parameter into the url slice of our store.
After each state update, updates the ?state search parameter with the new url state slice.
Sets up an event listener that listens for popstate and re-decodes the state from the URL into our store.

	/* The Grid ---------------------- */
	.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row.large-collapse .column,
	.lt-ie9 .row.large-collapse .columns { padding: 0; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row .row.large-collapse { margin: 0; }

	.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
	.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

	tim@touchsmart:~/Code$ nvm use v0.11.2-generators
	Now using node v0.11.2-generators
	tim@touchsmart:~/Code$ node --harmony testgen.js
	<Buffer 76 61 72 20 66 73 20 3d 20 72 65 71 75 69 72 65 28 27 66 73 27 29 3b 0a 66 75 6e 63 74 69 6f 6e 20 72 65 61 64 46 69 6c 65 28 70 61 74 68 2c 20 65 6e 63 ...>
	Sleeping for 2000ms...
	Done

	from twitter import Twitter, OAuth, TwitterHTTPError


	OAUTH_TOKEN = 'foo'
	OAUTH_SECRET = 'bar'
	CONSUMER_KEY = 'baz'
	CONSUMER_SECRET = 'bat'

	t = Twitter(auth=OAuth(OAUTH_TOKEN, OAUTH_SECRET, CONSUMER_KEY, CONSUMER_SECRET))

	// Tired of getting Meetup.com notifications? Me too.
	// 1. Navigate to: http://www.meetup.com/account/comm/ (you must be logged in!)
	// 2. Open your browser's console, and paste in the script below:

	$('.commSettings').each(function(idx, item) {var $item = $(item);var boardId = $item.attr("id").split('_')[1];var url = $item.children('form').attr('action');var params = {evRemind:1,mailing_list_status:0, submitButton:'Save Settings', submit:'submit'};params['board_' + boardId] = boardId;$.ajax({data: params, url: url, type: 'post'});});$('.generalEmailSettings').find('input[type="checkbox"]').prop('checked', false);$('.generalEmailSettings').find('input[type="submit"]').click();

	import * as React from 'react'
	import { SpringValue, easings, useSpring } from 'react-spring'

	/**
	* Hook that animates height when args.animationKey changes
	*
	* Ex:
	* const animatedBlock = useAnimatedHeight({
	* animationKey: key,
	* })