Skip to content

Instantly share code, notes, and snippets.

View mathisonian's full-sized avatar

Matthew Conlen mathisonian

View GitHub Profile
mathisonian / browser-export.js
Created November 9, 2014 19:54
exporting client side code
View browser-export.js
// export as a Node module, an AMD module or a global browser variable
if (typeof module !== 'undefined') {
module.exports = myModule;
} else if (typeof define === 'function' && define.amd) {
define(function() {
return myModule;
mathisonian / emoji-support.js
Created December 10, 2013 03:24
Detect emoji support
View emoji-support.js
* Determine if this browser supports emoji.
* Modified from
* and probobly originally github's javascript source
function doesSupportEmoji() {
var context, smiley;
if (!document.createElement('canvas').getContext) return;
context = document.createElement('canvas').getContext('2d');
mathisonian / index.js
Last active July 25, 2023 21:42
postgres full text search in sequelize.js. see this blog post for more information
View index.js
var Sequelize = require('sequelize');
module.exports = function(config) {
var models = {};
sequelize = new Sequelize(config.database, config.username, config.password, config.options);
// Bootstrap models
fs.readdirSync(__dirname).forEach(function (file) {
mathisonian /
Last active March 22, 2023 05:31
requiring npm modules in the browser console

demo gif

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


mathisonian / example.idyll
Last active March 30, 2020 23:18
Example question component that is only shown after a previous question is answered correctly. I haven't tested this but it should provide the basic structure.
View example.idyll
How to use:
[var name:"q1Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test1" correct:q1Correct /]
[var name:"q2Correct" value:false /]
[Question options:`["test1", "test2"]` trueAnswer:"test2" correct:q2Correct showAfter:q1Correct /]
mathisonian /
Last active February 11, 2020 01:39
Loading data with Parcel

This is a quick guide to loading static files with Parcel. There are two ways to load data in JavaScript:

  • including the data in the JavaScript bundle itself
  • fetching the data as an external resource

Including data directly in the JavaScript bundle

This is the preferred way of doing things if your data payload is relatively small (<1 MB) as it will lead to fewer network requests (which often gives better perfromance).

View app.js
var aspectRatio= '16:9'
var svg ='#example-4')
.attr('width', '100%')
.attr('viewBox', '0 0 ' + aspectRatio.split(':').join(' '));
// draw a rect to act as an outline
mathisonian / nav.js
Last active July 11, 2019 05:40
Nav Component
View nav.js
const React = require('react');
class CustomComponent extends React.Component {
render() {
const { hasError, idyll, updateProps, ...props } = this.props;
return (
<div style={{position: 'fixed', top: 0, left: 0, right: 0, display: 'flex', padding: '1em', background: '#000', justifyContent: 'space-between'}}>
<div style={{fontWeight: 'bold', fontSize: '2em', color: '#fff'}}>MY BLOG</div>
<div style={{display: 'flex'}}>
<div style={{fontSize: '1.5em', color: '#fff', marginRight: '1em'}}>A Link</div>
mathisonian / gist:4067528
Created November 13, 2012 18:34
Getting the starting index of selected text
View gist:4067528
* Gets the starting index of the selected text
function _getSelectionHtml() {
* Returns HTML String of current selection
var html = "";
mathisonian / youtube.js
Last active August 23, 2018 01:12
Idyll Youtube Component
View youtube.js
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
this.state = {
mounted: false