Gister is a utility for creating, editing and debugging small web pages. It can easily be used to test css and javascript all on the client side.
Gister is hooked into github and so saving your work in gister will save your work to github.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Game of Life</title> | |
</head> | |
<body> | |
<canvas id="canvas" width="400" height="300">There should be a canvas somewhere here.... :-/</canvas> | |
<script type="text/javascript"> | |
var canvas = document.getElementById('canvas'); | |
var context = canvas.getContext('2d'); |
{ | |
"description": "Optional description of the plunk", // Optional | |
"index": "index.html", // Optional (if provided must have a corresponding file entry, otherwise must provide index.html) | |
"files": { // Required | |
// Inline format below for defining files (filename => content) | |
"index.html": "<html><head><link rel="stylesheet" href="style/style.css" /><script src="https://raw.github.com/JerrySievert/cromagjs/master/cromag.js"></script></head><body><h1>Header</h1></body><p>If the header above is red, that means that both this file (index.html) and the stylesheet (style.css) were property served by plunker.</p></html>", | |
// Complete format below for defining files (filename => file description) | |
"style/style.css": { | |
"mime": "text/css", // Optional (will be guessed otherwise based on filename) | |
"encoding": "utf-8", // Optional (will be guessed otherwise based on mime type) |
compile = (fn) -> | |
fnText = fn.toString() | |
fnArgs = fnText.substring(fnText.indexOf("(") + 1, fnText.indexOf(")")).replace(/^\s+|\s+$/g, "").split(",") | |
fnBody = fnText.substring(fnText.indexOf("{") + 1, fnText.lastIndexOf("}")) | |
code = "with(context) { with (window.drykup()) {" | |
for arg, i in fnArgs | |
unless arg.replace(/^\s+|\s+$/g, "") is "" | |
code += "var #{arg} = arguments[#{i}];\n" |
bcrypt = require 'bcrypt' | |
# define the user db object | |
class Account | |
constructor: (@db) -> | |
@account = @db.collection 'accounts' | |
Gister is a utility for creating, editing and debugging small web pages. It can easily be used to test css and javascript all on the client side.
Gister is hooked into github and so saving your work in gister will save your work to github.
Instruct lumbar that this attribute should be included in the object returned by model.toJSON()
.
If a serializer function is included, the attribute's value will be passed through this function.
### traced.coffee | |
# | |
## Usage: | |
# class app.Class | |
# method1: traced "app.Class.method1", -> | |
# "return value of method1" | |
# | |
# method2: traced "app.Class.method2, (prefix) -> | |
# prefix + @method1() | |
# |
TRY ME OUT AT: http://bl.ocks.org/1483563
As is evident from the name chosen for this library - lumbar - this has been heavily influenced by the incredible Backbone.js. In fact, the full lumbar framework is designed to sit on top of Backbone.js for the time being. This is because the model, collection and router components of Backbone.js are 10x better than anything I can write.
I wrote this because I'm not a major fan of the way Backbone.js' View system works. This system is very similar, but has a few key differences. Please refer to the last section below.
/* File: drykup.coffee Author: Mark Hahn DryCup is a CoffeeScript html generator compatible with CoffeeKup but without the magic. DryKup is open-sourced via the MIT license. See https://github.com/mark-hahn/drykup*/ | |
var Drykup, attrAliases, dbg, doctypes, drykup, elements, expandAttrs, expandStyle, extendX, merge_elements, styleAliases, styleValueAliases, util, whiteSpace; | |
var __slice = Array.prototype.slice, | |
__hasProp = Object.prototype.hasOwnProperty, | |
__indexOf = Array.prototype.indexOf || | |
function (item) { | |
for (var i = 0, l = this.length; i < l; i++) { | |
if (__hasProp.call(this, i) && this[i] === item) return i; | |
} | |
return -1; |
<!doctype html> | |
<html> | |
<head> | |
<title>Test page</title> | |
<link rel="stylesheet" href="style.css" type="text/css" /> | |
</head> | |
<body> | |
<h1>Header 1</h1> | |
<p>Paragraph</p> | |
</body> |