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 example-test-code-for-remake.html
<!-- starting html: -->
<div class="elements-to-be-parsed">
<div data-o-type="list"></div>
<div data-o-type="object"></div>
panphora /
Last active Sep 21, 2019
What is a CRUD web application?

What is a CRUD web application?

A CRUD Web application is the most basic type of web application. It allows you to create and edit data and show that data to your users.

The simplest example of a CRUD web application would probably be a blog. A blog allows you to create, read, update, and delete blog posts.

A more advanced web application like an analytics platform (e.g. Google Analytics) or a social network (e.g. LinkedIn) is not considered a CRUD web application because it has many advanced features that go beyond simply creating and updating data.

CRUD Means:

  • Create
class Main {
public static void main(String[] args) {
System.out.println(IntStream.range(1,5).map(n -> n*2).reduce(1, (a,b)->a+b));
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
You can’t perform that action at this time.