Skip to content

Instantly share code, notes, and snippets.

Avatar

Matthew Conlen mathisonian

View GitHub Profile
@mathisonian
mathisonian / index.md
Last active Oct 7, 2022
requiring npm modules in the browser console
View index.md

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

inspiration

@mathisonian
mathisonian / emoji-support.js
Created Dec 10, 2013
Detect emoji support
View emoji-support.js
/**
* Determine if this browser supports emoji.
*
* Modified from https://gist.github.com/mwunsch/4710561
* 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
mathisonian / example.idyll
Last active Mar 30, 2020
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
mathisonian / GUIDE.md
Last active Feb 11, 2020
Loading data with Parcel
View GUIDE.md

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 = d3.select('#example-4')
.append('svg')
.attr('width', '100%')
.attr('viewBox', '0 0 ' + aspectRatio.split(':').join(' '));
// draw a rect to act as an outline
svg.append('rect')
@mathisonian
mathisonian / index.js
Last active Nov 13, 2019
postgres full text search in sequelize.js. see this blog post for more information http://www.mathisonian.com/weblog/postgres-full-text-search-with-sequelizejs
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
mathisonian / nav.js
Last active Jul 11, 2019
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
mathisonian / gist:4067528
Created Nov 13, 2012
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
mathisonian / youtube.js
Last active Aug 23, 2018
Idyll Youtube Component
View youtube.js
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
mounted: false
}
@mathisonian
mathisonian / d3-component.js
Last active Dec 4, 2017
Example stepper / play / pause
View d3-component.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {