Skip to content

Instantly share code, notes, and snippets.

View charliepark's full-sized avatar
🚀

Charlie Park charliepark

🚀
62 followers · 2 following
View GitHub Profile
@charliepark
charliepark / gistore.md
Last active December 14, 2015 08:09

Similar to https://gist.github.com/charliepark/3171750, this is CSS / JS for using a Gist as a datastore, without relying on the Gist / GitHub API.

Why would you want to avoid the API? Maybe you wouldn't. But sometimes it's easier to parse a few lines of JS than to try to fully get the GitHub API. Also, unless you know the name of the file that you're accessing, you have to do some key-sniffing to pick apart the JSON and get your file contents if you're going the API route. (You can see more about how to do that here: https://gist.github.com/charliepark/5054053)

First, you need to know the Gist you'll be using. In this case, https://gist.github.com/5037450. In the head of your document, call it, like so:

<script src='https://gist.github.com/5037450.js'></script>

Note that you're calling the .js version of that resource.

@charliepark
charliepark / gistWrap.js
Created February 28, 2013 03:58
A JavaScript wrapper for the Gist API. NOT preferred for gistore processing, due to asynchronous-ness of it all. If you try this instead of the embedded / parsed gist file, the page might end up blank. But if you want a barebones function to extract the contents out of a Gist, this works well.
var gistId = "5037450";
var gistContents = "";
fetchGistContents = function(gistId){
var http = new XMLHttpRequest();
http.open("GET", "https://api.github.com/gists/"+gistId, true);
http.send();
http.onreadystatechange = function() {
if (http.readyState === 4) {
if (http.status === 200) {
@charliepark
charliepark / gistribute.json
Last active December 14, 2015 05:48
Just some data I'm testing out.
[{
"title":"Product Manager - Self Help",
"company":"Shopify",
"postDate":"2013-02-27",
"url":"https://www.shopify.com/careers?posting=product-manager-self-help"
},
{
"title":"Performance Engineer",
"company":"Basho",
"postDate":"2013-02-26",
@charliepark
charliepark / notebook.html
Last active January 6, 2017 19:37
An easy way to represent a notebook in HTML/CSS, styled after the Field Notes memo books.
/***********
The CSS
***********/
.notebook{
background: #AC1622;
border-radius: .3em 1em 1em .3em;
box-shadow: .3em .3em .3em rgba(0,0,0,0.2);
color: rgba(0,0,0,0.5);
font-family: futura, sans-serif;
font-size: .5em;
@charliepark
charliepark / callbacks in javascript.js
Created December 24, 2012 18:49
// from http://www.impressivewebs.com/callback-functions-javascript/
function mySandwich(param1, param2, callback) {
alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
$('#sandwich').animate({
opacity: 0
}, 5000, function() {
// Animation complete.
});
@charliepark
charliepark / MIT license
Created December 15, 2012 20:48
The MIT License
Copyright (c) ${year} ${owner}
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
@charliepark
charliepark / gist:4266921
Created December 12, 2012 10:58
You can use arrays and hashes in HTML5 data attributes. Use JSON.parse, and make sure you're using single quotes around the brackets and double quotes inside the brackets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="animals" data-animals='["cat", "dog", "bird"]'></div>
<div id="vehicles" data-vehicles='{"motorcycle":"Harley", "car":"Herbie", "steamshovel":"Mike"}'></div>
@charliepark
charliepark / git merge and push master
Created October 22, 2012 16:00
An alias for quickly merging your branch's changes to master and pushing it to the remote origin
alias gpm="temp=$(git branch 2> /dev/null | grep '^\*' | sed 's/^\*\ //'); git checkout master; git merge $temp; git push; git checkout $temp;" # mnemonic: git push master
@charliepark
charliepark / local_and_canonical_datastores.md
Created September 11, 2012 14:51
Thoughts on offline, in-browser datastores (localStorage) working in conjunction with canonical DBs (server: MySQL, etc.)

This is for a thick-client App that stores data in localStorage (called "Local" in numbered lines below) and on a centralized server, in a MySQL (or other) database (called "Canonical" in numbered lines below). localStorage would also have a "Local Migration Log". Think of this like Redis's "replay" or Rails's timestamped migrations.

  1. Canonical DB has updated_at timestamp for each model. Or, in the top-level record (e.g. User), columns for each sub-class with an updated_at timestamp for that model (e.g. receipts_updated_at, categories_updated_at).
  2. At initialization, Local store clones Canonical and saves it. Data rendered for user in App comes from Local.
  3. User Creates a new record or Updates / Deletes an existing record.
  • App saves new record to Local.
  • If App is online, App saves record to Canonical.
  • If App is offline, App saves a copy of the change to a Local Migration Log.
  1. When App is next online, App uploads Local Migration Log and updates Canonical. Local datastore and Loc
@charliepark
charliepark / sticky.html
Created September 6, 2012 17:34
An example of position:sticky (CSS to give you static table headers). Only works in latest version of Chrome Canary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Title</title>
<link rel="SHORTCUT ICON" href="/favicon.ico" />
<style type="text/css" media="screen">
/* from Eric Meyer: v1.0 | 20080212 */