Skip to content

Instantly share code, notes, and snippets.

View thomasboyt's full-sized avatar

Thomas Boyt thomasboyt

View GitHub Profile

No, .mjs is not a Python 3-like split

Seen a few tweets on this. I want to dispel some FUD.

Node is probably going to introduce a new file extension for JavaScript modules, .mjs. The reasons for this are long and perilous, and trying to summarize the discussion that led to it is maddening. The short version is that ES6 modules have different semantics from existing scripts, and need to be executed differently. In browsers, this is done with <script type="module">. In Node, this will be done by analyzing the file extension of the imported file.

I'll be honest: I don't love this solution! I was rooting for the TC39 counter-proposal. But I also understand the solution that the Node developers chose, and why they chose it.

The new file extension is a good enough solution. You can read the [draft spec](https://github.com/nodejs/node-eps/

@thomasboyt
thomasboyt / concat.js
Last active March 3, 2022 10:13
grunt post
module.exports = {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
}
/** @jsx React.DOM */
define([
'react',
'modernizr',
'punycode'
], function(React, Modernizr, punycode) {
/**
* Replaces the emojis in a text string with <img> tags

Why I think Webpack is the right approach to build pipelines

(I've reposted this on my blog, which you may find more pleasant to read: http://devlog.disco.zone/2016/06/01/webpack/)

I was asked on Twitter why I think Webpack is the right approach to build tooling in JavaScript applications. My explanation is, uh, a bit longer than fit in a single tweet.

When I say "right approach," I'm specifically talking about the way Webpack's pipeline functions. There are certainly some deficiencies in various aspects of Webpack: it has a rather unintuitive API, and often requires quite a bit of boilerplate to set up. However, even with these issues, I think the core principles of how Webpack functions are sound.

I should also mention here this argument basically applies to SystemJS as well. I'm skeptical of various aspects of SystemJS, but I've only taken a very surface-level look at it, so I'm gonna withhold judgement until I've had a chance

import moment from 'moment';
/**
* XXX: Okay, so, no date library, other than moment, appears to currently
* support _formatting a date with a specified time offset_. That is, given the
* date string `2018-11-21T15:00:00+0100` (UTC+1:00), I want to format it as
* `3:00 PM`, regardless of the system's current local time.
*
* This seems like it should be easy, right? We don't need time zone data,
* because we're not specifying a time zone, just a UTC offset. All we need to
@thomasboyt
thomasboyt / index.html
Created October 2, 2012 02:27
SquiggleVision Graphing
<html>
<head>
<title>Squiggle Demo</title>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js "></script>
<script src="squiggle.js"></script>
<style>
path {
@thomasboyt
thomasboyt / question.md
Last active November 9, 2017 00:51
a graphql question

so, let's say I have a "master/detail"-ish architecture, where my UI has a section for a specific user, and within that section is a page that shows that user's followers. it's at a route like /users/:username/followers.

in my component hierarchy, this works with something like

<FollowersPage>         <-- top level route component, matched by react-router
  <UserSectionWrapper>  <-- renders the outer wrapper for the user section
    <FollowersList />   <-- the inner content of the page
  </UserSectionWrapper>
</FollowersPage>
/*
* Immutable JS's Record type allows you define maps that you can access with
* standard dot-notation instead of a get() method. It's mainly used for
* defining the shape of complex objects, such as the root state of a Redux
* component.
*
* Unfortunately, they basically don't work in TypeScript. Check this out:
*/
import * as I from 'immutable';
@thomasboyt
thomasboyt / _doc.md
Last active July 30, 2017 16:23
immediate-mode canvas rendering with react
@thomasboyt
thomasboyt / loading.md
Created October 22, 2014 15:09
Flux loading state pattern

I've been struggling to come up with a good pattern for handling loading state in Flux (specifically using Fluxxor, though I think this is an issue for any implementation).

When I say "loading state," what I mean is state in a store that tracks:

  • Whether the data handled by the store was loaded
  • Whether the store is currently attempting to load data
  • Whether the data loaded successfully or errored
  • The error message, if it errored

Here's my first (very simple) pass at this, a store mixin called LoadingStoreMixin.js: