David Miranda panphora

Why I'm Building Remake

I’m beyond frustrated with modern web development. It feels hyper-inefficient when it could be completely streamlined.

We currently use massively scalable tools from the biggest companies on earth to solve even the most basic problems. We’ve got infinitely nested component with jumbles of state being passed every which way, a new build tool or framework or best practice every week, and then we have to constantly switch contexts between 12+ disparate technologies just to get an app online.

There should be a simpler way for product-focused founders who want to solve user problems instead of spending all their time debugging their monster stack and gluing things back together.

What about the concept of a “web app object”? A dynamic object that looks like an HTML node but contains all the web app capabilities you need across the stack collapsed into a single primitive.

Estimation

This document is an attempt to pin down all the things you don't think about when quoting for a project, and hopefully provide a starting point for some kind of framework to make quoting, working and delivering small-medium jobs more predictable and less stressful.

Quoting

The hardest bit of any job, and lots of pitfalls

Estimating the work

the actual work of what you see on screen will only be a fraction of the work to do

Feedback on Remake

Notes:

Run on Fedora Linux with Node v12 and Yarn
- Yarn seems to break some of the dependencies so I'm on npm now.

What I did

Ran remake create...

	function addSubscriberToMailChimp ({email, firstName, formAction, onSuccess, onError}) {
	// Get url for mailchimp
	let url = (formAction \|\| "").replace('/post?', '/post-json?');

	// add email and first name
	url += `&EMAIL=${encodeURIComponent(email)}&FNAME=${encodeURIComponent(firstName)}`;

	// Create & add post script to the DOM
	let script = document.createElement('script');
	script.src = url + "&c=mailchimpCallback";

	<!-- FIND THE FULL PAGE HERE: https://www.todopal.com/ -->
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TodoPal - Make room for big projects</title>
	<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
	<link rel="stylesheet" type="text/css" href="/assets/css/boxes.css">

	/*

	MIT License
	David Miranda: Author of boxes.css
	Jeremy Thomas: Author of minireset.css (github.com/jgthms/minireset.css)
	Andy Bell and other contributors: Author of a modern CSS reset (https://github.com/andy-piccalilli/modern-css-reset)

	*/

	html {

	/*

	SHOW-IF PLUGIN
	--------------
	Conditionally show elements based on the values of the attributes in their ancestors.

	How to use:
	===========
	1. Run this code when the page loads
	2. Run this code whenever a new elements that has a show-if attribute is added to the page (or if you want: simply whenever the page changes)

	<div class="header">
	<div
	class="header__text"
	object
	key:board-heading="@innerText"
	default:board-heading="My Projects"
	edit:board-heading:without-remove
	>{{boardHeading}}</div>
	<button
	class="button button--add-stack"

	<template>
	<div>
	<modal name="add-course-flow-modal" :classes="modalClasses" height="auto" :scrollable="true" @before-open="modalBeforeOpen" @opened="modalOpened" @closed="modalClosed">
	<training-bundle :action="action" :caregiver-ids="caregiverIds" :caregiver-goal="caregiverGoal" :compliance-types="complianceTypes" :waive-types="waiveTypes" :courses="selectableCourses" :selected-course-ids="selectedCourseIds" :current-step="currentStep" :total-steps="totalSteps" :active-tab="activeTab" :created-courses="createdCourses" :course-being-edited="courseBeingEdited" :edit-mode="editMode" :can-input-bundle-name="canInputBundleName" :has-due-date="hasDueDate" :force-update="forceUpdate" :waive-modal-data="waiveModalData" :paths="paths" :agency-id="agencyId" :agency-name="agencyName"></training-bundle>
	</modal>
	</div>
	</template>

	<script>
	import $ from 'jquery';

	body .email-modal .email-modal__content {
	background-color: #191c1f;
	}

	body .email-modal .email-modal__top-image {
	background-color: #fff;
	}

	body .bottom-bar, body .bottom-bar , body .email-modal, body .email-modal {
	color: #fff;