Skip to content

Instantly share code, notes, and snippets.

@blainekasten
blainekasten / jquery.weekcalendar.css
Created March 28, 2013 15:55
Backbone Calendar Structure
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='js/libs/css/smoothness/jquery-ui-1.8.11.custom.css' />
</head>
<body>
<script type="text/html" id="CalendarTemplate">
<div id="calendar" style="border:2px solid black;">
<div class="ui-widget wc-container">
<div class="ui-widget-header wc-toolbar">
<div class="wc-display ui-buttonset">
@blainekasten
blainekasten / constants.js
Last active January 3, 2016 06:19
Javascript Constants
// Ever need to create constants in javascript?
// Option 1:
// Browser Support: ie9+ ff4+ chrome6+ opera12+ safari 5.1+
// You must wrap your constants variables in an object:
var constants =
{
@blainekasten
blainekasten / environment.js
Last active September 11, 2020 12:39
Mirroring Rails Environment in Javascript
// This should actually be a .js.erb file so you can interpolate Ruby code in it
// I left it off the file naming because the gist would color words weird when .js.erb
// was the file extension
;(function(window){
var _environment;
/*
* Namespace.
* You could name this anything you want, even stick to rails conventions and do:
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
check_run() {
echo "$changed_files" | grep --quiet "$1" && eval "$2"
}
@blainekasten
blainekasten / observable-react.js
Last active December 31, 2016 06:10
Makes paths observable to state locations.
/*
* This is just a concept to use ES6 Proxies for a flux-like implementation where
* components are observers of state nodes. Using Proxie setters, when the specific
* state node is mutated, the components who observe that are re-rendered on the spot.
*
* likely missing some logic, just a concept
*/
import state from 'state';
import { componentToStateMap, pathMapper } from 'pathMapperProxy';
@blainekasten
blainekasten / connect-context.js
Last active June 2, 2020 15:52
Use Redux Connect, with context in your map* methods!
import React from 'react';
import { connect as reduxConnect } from 'react-redux';
function wrapWithContext(mapStateToProps, mapDispatchToProps, contextTypes, component) {
return class ConnectedComponent extends React.Component {
constructor(props, context) {
super(props, context);
/*
* This is the magic right here!
@blainekasten
blainekasten / get-data-list.js
Created November 16, 2017 20:19
RenderProps vs HOC
// This Component fetches data from a server and then renders its children.
// Important to remember that any time the parent component re-renders, this component re-renders also.
// I think the main difference is this version makes the fetching a Child while the HOC makes the fetching a Parent.
export class GetDataList extends Component {
props: { children: Function }
state = { dataList: null };
componentDidMount() {
// filepath: src/pages/product/[...id].js
// This is an example of a fallback route for your product collection route. If a user visites /product/id and the id
// does not match an id from your dataset, we will render this fallback url with a `/product/*id` named splat
export default function ProductNotFound(props) {
return (
<div>
<h1>Product not found</h1>
</div>
)