Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

David Miranda panphora

🎯
Focusing
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>
{{/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]';
}
View slugify.js
export default function slugify (str) {
return str
.trim()
.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
.toLowerCase();
}
View forEachNestedData.js
// DESCRIPTION:
// ============
// loops through all items in a nested object/array
//
// USE:
// ===
// forEachNestedData({currentItem, callback});
//
// OUTPUT:
// ======
You can’t perform that action at this time.