Skip to content

Instantly share code, notes, and snippets.

View lourd's full-sized avatar

Louis DeScioli lourd

View GitHub Profile
@lourd
lourd / mixin.less
Created February 11, 2015 21:40
Less Responsive Design Mixin
// A basic media query mixin that makes responsive work simple.
@screen-sm-min: 481px;
@screen-md-min: 768px;
@screen-lg-min: 1025px;
@screen-xl-min: 1281px;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@lourd
lourd / TrackerMixin.js
Created March 5, 2015 18:50
Tracker Mixin for React
/**
* React Mixin for binding reactive data sources and DDP subscriptions
* to the state of a component using Tracker
*
* Components using this mixin should implement getTrackerState and/or
* ddpSubscriptions
*/
TrackerMixin = {
getInitialState: function() {
@lourd
lourd / D3-Rendering.js
Created May 26, 2015 14:21
D3 and React Integration Example
function createChart(dom, props){
var width = props.width;
var height = props.height;
width = width + 200;
var data = props.data;
var sum = data.reduce(function(memo, num){ return memo + num.count; }, 0);
var chart = d3.select(dom).append('svg').attr('class', 'd3').attr('width', width).attr('height', height)
.append("g")
.attr("transform", "translate(" + (props.width/2) + "," + (height/2) + ")");
var outerRadius = props.width/2.2;
@lourd
lourd / BetterError.es6
Created July 6, 2015 14:45
ES6 Inheriting Errors
// Making this a global and not exporting because Meteor
BetterError = class extends Error {
constructor(message, details) {
var stack = super().stack;
this.stack = stack;
this.message = message;
if (typeof details === 'object') {
details = JSON.stringify(details);
}
this.details = details;
@lourd
lourd / FontAwesome.jsx
Created August 13, 2015 06:30
An awesome FontAwesome React component
import React from 'react';
import radium from 'radium';
const version = '4.4.0';
const url = 'https://maxcdn.bootstrapcdn.com/font-awesome';
const fontFace = `
@font-face {
font-family: 'FontAwesome';
src: url('${url}/${version}/fonts/fontawesome-webfont.eot?v=${version}');
@lourd
lourd / simple-server-and-client.js
Last active May 21, 2016 22:49
Simple Node http server and client communication example
// Bring in the core HTTP module
var http = require('http')
/////////////////////////
// Server code
/////////////////////////
// The in-memory state. Will be reset every time the server restarts!
var state = 'OFF'
{
positions: {
[id]: {
title: String,
receivedFrom: [Recruiter],
company: EmployingCompany,
description: String,
link: String,
receivedOn: Date,
teamSize: Number,
const loaderUtils = require('loader-utils')
/**
* Turns a javascript object into sass variables
* @param {Object} obj POJO, values should be strings
* @param {String} options.prefix pre-pended to each sass variable
* @return {String} string to be injected into a Sass stylesheet
*/
function sassify(obj, { prefix = '' } = {}) {
return Object.entries(obj).reduce((str, [key, value]) => {
@lourd
lourd / firebaseChannel.test.js
Last active September 19, 2018 03:56
Example of making a channel in redux-saga with a firebase source and testing it with jest
import { eventChannel } from 'redux-saga'
function firebaseChannel(firebase, {
eventType = 'value',
returnSnapshot = false,
} = {}) {
return eventChannel(emit => {
const subscription = firebase.on(eventType, snapshot => {
emit(returnSnapshot ? { snapshot } : { value: snapshot.val() })
})
@lourd
lourd / emitterChannel.test.js
Created March 23, 2017 17:10
Example of making a channel in redux-saga with a generic emitter source and testing it with jest
import { eventChannel } from 'redux-saga'
function emitterChannel(emitter, eventType) {
return eventChannel(emit => {
emitter.on(eventType, emit)
return () => emitter.off(eventType, emit)
})
}
describe('emitterChannel', () => {