Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Matt Michel ninjaPixel

🎯
Focusing
View GitHub Profile
@ninjaPixel
ninjaPixel / vega-flight-data.json
Last active Jun 6, 2022
going through the vega tutorial for re-creating the classic Mikey B viz on US airports
View vega-flight-data.json
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 900,
"height": 560,
"padding": {"top": 0, "left": 0, "right": 0, "bottom": 0},
"signals": [
{
"name": "hover",
"value": null,
"on": [
@ninjaPixel
ninjaPixel / ninja.json
Last active Apr 17, 2022
My custom arrow key mappings. The right option key is used to 'shift' into a different mode.
View ninja.json
{
"title": "Arrows (right_alt || right_control) v0.2.0",
"rules": [
{
"description": "right_alt + e = up",
"manipulators": [
{
"type": "basic",
"from": {
"modifiers": {
@ninjaPixel
ninjaPixel / DeferredComponent.jsx
Created Aug 10, 2018
Defer the loading of a react component, in Meteor.js.
View DeferredComponent.jsx
import React from 'react';
class DeferredComponent extends React.Component {
constructor(props) {
super(props);
this.state = {Component: null, loading: true};
}
componentDidMount() {
this.loadComponent();
@ninjaPixel
ninjaPixel / .babelrc
Created Aug 10, 2018
Strip unused modules from your app
View .babelrc
{
"plugins": [["direct-import", { "modules": ["@material-ui/core", "@material-ui/icons"] }], "lodash"]
}
@ninjaPixel
ninjaPixel / Test.js
Last active Aug 10, 2018
Our 'Test' component. It pulls in some external libs, bloating our Meteor app
View Test.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, Typography } from '@material-ui/core';
import moment from 'moment';
import _ from 'lodash';
const Test = (props) => {
const { classes, name } = props;
const lodash = _.get({}, 'x', true);
@ninjaPixel
ninjaPixel / App.js
Created Aug 10, 2018
The 'fat' version of our meteor app.
View App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Test from '../../screens/Test/Test.js';
const HomeScreen = props => (
<div>
<header>
<h1>The App</h1>
</header>
<p>
@ninjaPixel
ninjaPixel / App.js
Created Aug 10, 2018
An example of @ninjapixel/meteor-deferred-component in action
View App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import DeferredComponent from '@ninjapixel/meteor-deferred-component';
const LoadingComponent = () => (
<div className="loading">
<h3>Fetching component...</h3>
</div>
);
@ninjaPixel
ninjaPixel / index.html
Created Jun 29, 2018
A nicer "Book Now" button for your website
View index.html
<a href="https://app.bookin.online/my_company_name">
<button style="font-size:32px;background-color:#FFEB3B; color:rgba(0, 0, 0, 0.87);padding:10px;border:none; box-shadow: 0 2px 4px rgba(0, 0, 0, .6);">
BOOK NOW
</button>
</a>
@ninjaPixel
ninjaPixel / index.html
Created Jun 29, 2018
A simple "Book Now' button for your website.
View index.html
<a href="https://app.bookin.online/my_company_name">
<button>Book now</button>
</a>
@ninjaPixel
ninjaPixel / currencies.js
Last active Apr 25, 2018
Currencies supported by Stripe. Including name, code and if it's a decimal currency
View currencies.js
const currencies = [
{name: 'Afghan Afghani', code: 'afn', decimalCurrency: 1},
{name: 'Albanian Lek', code: 'all', decimalCurrency: 1},
{name: 'Algerian Dinar', code: 'dzd', decimalCurrency: 1},
{name: 'Angolan Kwanza', code: 'aoa', decimalCurrency: 1},
{name: 'Argentine Peso', code: 'ars', decimalCurrency: 1},
{name: 'Armenian Dram', code: 'amd', decimalCurrency: 1},
{name: 'Aruban Florin', code: 'awg', decimalCurrency: 1},
{name: 'Australian Dollar', code: 'aud', decimalCurrency: 1},
{name: 'Azerbaijani Manat', code: 'azn', decimalCurrency: 1},