mathisonian

// 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

  /**
   * 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

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

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

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

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).

mathisonian

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

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

/*
 * Gets the starting index of the selected text
 */


function _getSelectionHtml() {
    /*
     * Returns HTML String of current selection
     */
    var html = "";

mathisonian

import React from 'react';
let YouTube;

class YoutubeComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      mounted: false
    }