Jon-Kyle jondashkyle

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

Operational PGP

This is a guide on how to email securely.

There are many guides on how to install and use PGP to encrypt email. This is not one of them. This is a guide on secure communication using email with PGP encryption. If you are not familiar with PGP, please read another guide first. If you are comfortable using PGP to encrypt and decrypt emails, this guide will raise your security to the next level.

Architecture in Elm

This document is a collection of concepts and strategies to make large Elm projects modular and extensible.

We will start by thinking about the structure of signals in our program. Broadly speaking, your application state should live in one big foldp. You will probably merge a bunch of input signals into a single stream of updates. This sounds a bit crazy at first, but it is in the same ballpark as Om or Facebook's Flux. There are a couple major benefits to having a centralized home for your application state:

There is a single source of truth. Traditional approaches force you to write a decent amount of custom and error prone code to synchronize state between many different stateful components. (The state of this widget needs to be synced with the application state, which needs to be synced with some other widget, etc.) By placing all of your state in one location, you eliminate an entire class of bugs in which two components get into inconsistent states. We also think yo

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Route Mapping Module

Small regex based router (maybe route checker is a better name) whose main purpose is just to map routes to functions. Built with the intention of using with jQuery pjax, so on pjax:complete check to see if the new route has specific code that needs to be executed. If you don't want to use with pjax, just leave the event option blank (or plop in any event you want the router to be bound to). There's jQuery dependency in here, but could be rejiggered to be without pretty easy.

Check out the router.usage.js file for config.

Regex matching logic from miniroutes!

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

	a break and a fracture
	a buffalo and a bison
	a college and a university
	a sweet potato and a yam
	a violin and a fiddle
	add and adhd
	almond flour and almond meal
	alzheimer's and dementia
	an attorney and a lawyer
	autumn and fall

	/**
	* Functionality:
	* - adds breakpoint attributes to body & fires callbacks
	*
	* todo: callback params, height, matchMedia?
	*/
	var extend = require('extend');

	var _data = {
	currentBreakpoints : [],

	/*
	Goes after
	Polygon.MakeObservable(Polygon.prototype);

	//...

	*/

	var Text = Two.Text = function( text ) {

	<?php

	/**
	* Instructions:
	*
	* 1. Put this into the document root of your Kirby site
	* 2. Make sure to setup the base url for your site correctly
	* 3. Run this script with `php statify.php` or open it in your browser
	* 4. Upload all files and folders from static to your server
	* 5. Test your site