Jiri Sifalda jsifalda

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.

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

Cooperative Multitasking, Components, Nette & Flow

On GitHub I provide example or Cooperative Multitasking components on a single site served by Nette Framework. These components need to process several network requests to render themselves, which is normally slow.

This example takes advantage of yield operator (available since PHP 5.5) to switch between tasks, Flow as scheduler and Rect as parallel http client.

This post introduces the Flow framework and cooperative multitasking in general.

The Example Application

Setup Mac OS X

I've done the same process every couple years since 2013 (Mountain Lion, Mavericks, High Sierra, Catalina) and I updated the Gist each time I've done it.

I kinda regret for not using something like Boxen (or anything similar) to automate the process, but TBH I only actually needed to these steps once every couple years...

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 0 };

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	//sample entry file
	require('./node_modules/riot/dist/riot.js');
	require('./timer.tag')
	require('./todo.tag')
	require('./todo.css')


	riot.mount('todo', {
	title: 'I want to behave!',
	items: [

	➜ receipts php run.php
	Tesseract Open Source OCR Engine v3.02.02 with Leptonica
	EEE!

	BILLA, SPOL. S R.U., MODLETICE 67
	251 01 ŘÍČANY U PRAHY
	FIL. PRAHA 2, KARLOVO NAMESTI
	DIC:CZ00685976 IČ:00B85976
	WWW.BILLA.CZ

	<?php

	class AdminerColors
	{

	function head()
	{
	static $colors = array(
	'127.0.0.1' => '#ED1C24',
	'localhost' => '#009245',