Skip to content

Instantly share code, notes, and snippets.

View jazlalli's full-sized avatar

Jaz jazlalli

20 followers · 5 following
  • London
View GitHub Profile
@jazlalli
jazlalli / index.html
Last active June 5, 2020 18:04
JS Bin - Responsive Layout (https://jsbin.com/kaxonig)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Responsive Layout">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive Layout (3-col -> mobile)</title>
</head>
<body>
<div class="wrapper">
@jazlalli
jazlalli / modalify.js
Last active November 24, 2016 16:19
A higher-order React component for wrapping things in a Modal
import React, { Component, PropTypes } from 'react';
import Modal from 'react-modal';
/*
@desc: wraps any component provided in a react-modal
@param: ModalContent - any React component that you want as a modal
@param: Trigger (optional) - a clickable component that will trigger the modal to open
@param: triggerProps (optional) - some data to provide to the trigger component
@usage:
@jazlalli
jazlalli / React-callback-example.jsx
Last active December 22, 2016 10:44
What is the "ideal" way to pass data to a callback prop? An inline function callback which invokes the prop? Or use prop as is and attach data to the event object?
// inline event handler which invokes callback prop
const UsingAnInlineFunction = ({
itemId,
itemName,
itemCount,
onClick
}) => (
<div onClick={() => onClick(itemId)}>
<span>{`${itemCount}x ${itemName}`}</span>
</div>
@jazlalli
jazlalli / listWithModal.js
Last active August 29, 2015 14:26
Pseudo-code example of single Modal, which is triggered by items in a list that also pass in their data. After editing that data, how can I ensure that the right list item gets it's value back?
var Modal = React.createClass({
getInitialState() {
return {
text: this.props.text
};
},
onChange(e) {
this.setState({text: e.target.value});
},
closeModal() {
@jazlalli
jazlalli / desktop.css
Created February 27, 2015 10:28
Disable all pointer events when you're scrolling the window
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
@jazlalli
jazlalli / scrollToX.js
Created January 23, 2015 11:23
Function to scroll to specified X coord with a map of easing functions to choose from.
function scrollTo(X, duration, easingFunction, callback) {
callback = callback || function () {};
var start = Date.now(),
elem = document.scrollLeft ? document : document.body,
from = elem.scrollLeft;
if (from === X) {
callback();
return; /* Prevent scrolling to the X point if already there */
@jazlalli
jazlalli / gist:6510962
Created September 10, 2013 15:19
Example of a node-amqp subscriber with dead lettering
var amqpconnection = amqp.createConnection({url: config.CLOUD_AMQP}, connOptions);
amqpconnection.on('ready', function() {
// dead letter exchange for rejected messages
amqpconnection.exchange(
deadLetterExchange,
options = {durable: true, autoDelete: false, type: 'topic'},
function (ex) {
@jazlalli
jazlalli / gist:4757988
Created February 11, 2013 21:59
server.js - connects to amqp and registers router.route as the subscriber
var environment = process.env.NODE_ENV || '';
var amqp = require('amqp'),
router = require('./routing/messagerouter'),
routes = require('./routing/routes'),
config = require('./config_' + environment);
var amqpconnection = amqp.createConnection({
url: config.CLOUD_AMQP
});
@jazlalli
jazlalli / gist:4757900
Created February 11, 2013 21:47
message router - binds event handlers and emits event on message
var environment = process.env.NODE_ENV || '';
var config = require('../config_' + environment),
routes = require('./routes'),
EventEmitter = require('events').EventEmitter,
messagerouter = {},
topic;
var emitter = new EventEmitter();
@jazlalli
jazlalli / gist:4757774
Last active December 12, 2015 10:18
simple object for routing messages by topic
var visit = require('../eventhandlers/visithandler'),
click = require('../eventhandlers/clickhandler');
var routes = {
'Visit': visit.log,
'Click': click.log
};
module.exports = routes;