Skip to content

Instantly share code, notes, and snippets.


David Miranda panphora

View GitHub Profile
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
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]';
You can’t perform that action at this time.