Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

David Miranda panphora

🎯
Focusing
View GitHub Profile
@panphora
panphora / crud-web-app.md
Last active Sep 21, 2019
What is a CRUD web application?
View crud-web-app.md

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
View grayfox.java
import java.util.stream.IntStream;
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>
{{/forEachItem}}
</ul>
<button data-i-new="todo">Add Todo</button>
View reserved-url-paths.json
[
"about",
"account",
"action",
"add",
"admin",
"agree",
"alert",
"api",
"arguments",
View test-all-widths-on-page-elements.js
var elem = document.querySelector("body");
function deepForEachElem (elem, callback) {
callback(elem);
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) {
View Annotated-Todos-with-Remake.md

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>
<div 
@panphora
panphora / remake-quickref.md
Last active Jul 16, 2019
A quick reference card of all Remake.js attributes
View remake-quickref.md

Remake.js Quick Reference

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

Switch.js

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: https://github.com/moxystudio/js-deep-for-each
function isPlainObject (obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
You can’t perform that action at this time.