Derek Knox derek-knox

The purpose of this gist is to become aware of algorithms or existing solutions that I'm currently unaware of (I want to know what I don't know).

Below are some constraints and a few example problems leveraging said constraints. I believe the constraints and example problems are heavily related to bin-packing, but if anyone has additional info to steer me toward better algorithms or solutions that would be ideal.

Constraints:

container with set width and height
n number of items
n number of display styles
account for padding between items (but not container edges)

	/* 1st Approach - 6 LOC */

	if(insertBefore) {
	workElements[adjacentWorkEntryId].before($workEntry);
	}
	else {
	workElements[adjacentWorkEntryId].after($workEntry);
	}

	/* 2nd Approach - 4 LOC (curly brace removal) */

	var pattern = /<code>(markup\|css\|javascript) ?(.+)<\/code>/gm;

	/*
	The goal is to turn this markdown (highlight syntax inline vs code block):
	...for HTML (`markup .html`)...
	to this HTML:
	...for HTML (<code class="language-markup">.html</code>`)...
	My current problem is due to the latter part of my pattern:
	(.+)<\/code>
	How do I ensure the capture ends exactly at the "</code>" character sequence?

	// example list
	var list = [ { id: 0 }, { id: 1 }, { id: 2 } ];

	// desired behavior
	function reduceLazy(arr, prop, val) {
	for(var i = 0, len = arr.length; i < len; i++) {
	console.log('iteration', i);
	if(arr[i][prop] === val){
	console.log('found at', i, 'exit now');
	return arr[i];

	using System;

	public class Test { public int num = 44; }

	public class Signal
	{
	private int _listenerCount;

	public object Arg1;
	public object Arg2;

	function makeBackgroundBlack() {
	document.body.style.backgroundColor = '#000000';
	}

	makeBackgroundBlack();

	/*

	- browser parses html
	- browser sees <script> - blocks (and downloads if src attr)

	{
	"MobX React Component": {
	"prefix": "mxrc",
	"body": "import React, {Component} from 'react';\nimport {inject, observer} from 'mobx-react';\n\n@inject('stores')\n@observer\nexport default class ${1:componentName} extends Component {\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t);\n\t}\n\n}",
	"description": "Creates a MobX React component class with default export"
	},
	"MobX React Component with Action": {
	"prefix": "mxrca",
	"body": "import React, {Component} from 'react';\nimport {action} from 'mobx';\nimport {inject, observer} from 'mobx-react';\n\n@inject('stores')\n@observer\nexport default class ${1:componentName} extends Component {\n\n\[email protected] onClickX(e) {\n\t\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div onClick={(e) => this.onClickX(e)}>\n\t\t\t\t$0\n\t\t\t</div>\n\t\t);\n\t}\n\n}",
	"description": "Creates a MobX React component class with default export and MobX action"

	.flex-container {

	/* Flex context for direct children */
	display: flex;

	/* Main axis direction */
	flex-direction: row /* \| row-reverse \| column \| column-reverse */;

	/* Main axis multiline (default flexbox restricts to single line) */
	flex-wrap: nowrap /* \| wrap \| wrap-reverse */;

	{
	"window.zoomLevel": -1,

	"workbench.colorTheme": "Monokai",
	"workbench.colorCustomizations": {
	"editor.findMatchBackground": "#135564",
	"editor.findMatchBorder": "#ffffff",
	"editor.findMatchHighlightBackground": "#FD5F0099",
	"editor.findMatchHighlightBorder": "#99cc33",
	"editor.selectionBackground": "#135564",

	// Node.js Helper for parsing Adobe XD .svg files while updating for use in Reticle Designer:
	// https://derekknox.com/articles/reticle-designer-part-1-deconstructing-the-design/
	// https://derekknox.com/articles/reticle-designer-part-2-subtle-gamification/
	// https://derekknox.com/articles/reticle-designer-part-3-svg-flexbox-react-mobx
	// The parsing code and processFile() function could be abstracted for custom use

	var fs = require('fs');

	fs.readdir('.', function (err, files) {