Gilbert gilbert

🪐

Security in space

A humble programmer.

gilbert / gist:0cfa65ce832ce35a278e

Last active March 27, 2017 09:06

Global AJAX loading indicator for Mithril.js

	(function () {
	//
	// Global ajax loaders
	//
	// This is useful for showing a loading animation, yet still taking
	// advantage of the default behavior of m.request, which is to wait
	// for all requests to complete before rendering the view.
	//
	// The loader is assumed to already be on the page
	var loader = document.querySelector('.ajax-loader')

gilbert / Autocomplete.scss

Last active August 29, 2015 14:23

Basic Autocomplete Widget

	@mixin li-hover {
	background: #3875d7;
	color: #fff;
	}

	.autocomplete-input--select-drop {
	background: white;
	border: 1px solid #aaa;
	margin-top: -1px;
	position: absolute;

gilbert / ajax-loader.scss

Created July 8, 2015 16:15

Global Mithril.js AJAX Loader

	// Taken from http://loading.io/
	uiload {
	display: inline-block;
	position: relative;
	& > div {
	position: relative;
	}
	}

	@-webkit-keyframes ajax-loader {

gilbert / comment-model.js

Last active March 31, 2018 19:38

Mithril-friendly Model Layer


	var Comment = {}

	Comment.store = Store('Comment')

	Comment.fetchForPost = function (postId) {
	return m.request({ method: 'GET', url: '/api/post/' + postId + '/comments' })
	.then(Comment.store.syncAll)
	}

gilbert / example.js

Last active August 3, 2016 21:19

Mithril.js - Avoiding m.props



	// m.prop is a great pattern, but Plain-old JavaScript Objects (POJO) are
	// much more pleasant to work with.
	// Here's an example of using POJOs with one- and two-way data binding.

	// First, the helper methods
	m.setValue = function (obj, prop) {
	return m.withAttr('value', function(value) { obj[prop] = value })
	}

gilbert / view-model-example.js

Last active October 6, 2019 23:39

Mithril View-Model Example

	var Comment = {]

	Comment.create = function (attrs) {
	return m.request({ method: 'POST', url: '/comments', data: attrs })
	}

	// A view-model is basically a temporary, disposable copy of a model.
	// It allows the user can either commit or cancel the changes they make.
	Comment.vm = function (attrs) {
	attrs = attrs \|\| {}

gilbert / example-use.js

Last active August 18, 2016 13:44

Back-button & forward-button compatible Redux-like state management for Mithril.js

	var BlogComments = {}

	BlogComments.controller = function (options) {
	App.state.fetch('blogComments', `/api/blog-post/${ options.blog_id }/comments`)
	}

	BlogComments.view = function (ctrl, options) {
	var comments = App.state.blogComments

	return m('.blog-comments-component', [

gilbert / exercises.md

Last active February 23, 2016 16:57

Exercise 1.1

Draw a diagram of the result of following code.

var businessName = "Trader Joe's";
var location     = "Austin";

gilbert / example.html

Created June 7, 2016 19:24

JavaScript DOM: Render line numbers on pre with no dependencies

	<!DOCTYPE html>
	<head>
	<link rel="stylesheet" type="text/css" href="line-numbers.css">
	</head>
	<body>

	<pre><code>function add (a, b) {
	return a + b;
	}</code></pre>

gilbert / definition.js

Last active August 5, 2016 18:07

Expand / Collapse Animation with Mithril v1.x

	var animateHeight = {
	oncreate: function (vnode) {
	var height = vnode.dom.clientHeight
	vnode.dom.style.maxHeight = 0
	vnode.dom.offsetHeight // Trick to recalc layout
	window.requestAnimationFrame( ()=> (vnode.dom.style.maxHeight = height+1+"px") )
	},
	onbeforeremove: function (vnode, done) {
	vnode.dom.addEventListener('transitionend', done)
	vnode.dom.style.maxHeight = 0