Skip to content

Instantly share code, notes, and snippets.


David Miranda panphora

Block or report user

Report or block panphora

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View remake-todos.hbs
<ul data-o-type="list">
{{#forEachItem data.todos itemName="todo"}}
<li data-o-type="object" data-l-key-text data-i-editable>{{todo.text}}</li>
<button data-i-new="todo">Add Todo</button>
View reserved-url-paths.json
View test-all-widths-on-page-elements.js
var elem = document.querySelector("body");
function deepForEachElem (elem, callback) {
Array.from(elem.children || []).forEach(function (el) {
deepForEachElem(el, callback);
deepForEachElem(elem, function (el) {
View special-deep-extend.js
let isObject = (a) => typeof a === "object" && a !== null && !Array.isArray(a);
let isArray = (a) => Array.isArray(a);
let forEachKeyValuePair = (obj, cb) => {
Object.keys(obj).forEach(function (k) {
cb(k, obj[k]);
let fillMissingKeys = (target, source) => {
forEachKeyValuePair(source, (key, value) => {
if (target[key] === undefined) {

An Annotated Remake Todos Web App

This is an example of how to build a simple todos web app with Remake, using only data attributes.

Parent template:

<h1>Todo list</h1>
panphora /
Last active Jul 16, 2019
A quick reference card of all Remake.js attributes

Remake.js Quick Reference

A framework that uses a set of powerful data attributes to help you build web apps quickly!


Allows you to treat the DOM like a state machine, meaning you can toggle the state of one or more elements, turning a specified flag on or off.

View remakejs
# REMAKE.JS web app framework
# overview
- handles rendering your templates with data
- handles creating routes for your templates
- handles letting people modify the data on the page
- handles serializing the data on the page so it can saved
- handles merging the saved data into the user data
- handles activating and deactivating page elements
View find-path-of-nested-child-object-inside-parent-object.js
// starting with: object, childObject
// goal
// - given an object/array and a child object/array, give me the path to the child
// some code copied from:
function isPlainObject (obj) {
return === '[object Object]';
View slugify.js
export default function slugify (str) {
return str
.replace(/[^0-9A-Za-z\-\s]/g, " ") // keep alphanumeric, dashes, and spaces
.replace(/ +/g, " ") // replace double spaces with single space
.replace(/ /g, "-") // replace single spaces with single dash
.replace(/\-\-/g, "-") // replace double dashes with single dash
View forEachNestedData.js
// ============
// loops through all items in a nested object/array
// USE:
// ===
// forEachNestedData({currentItem, callback});
// ======
You can’t perform that action at this time.