Skip to content

Instantly share code, notes, and snippets.

Derek Knox derek-knox

Block or report user

Report or block derek-knox

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
@derek-knox
derek-knox / svg-graphics-library-formatter.js
Created Aug 11, 2018
Node.js Helper for parsing Adobe XD .svg files (while updating for Reticle Designer)
View svg-graphics-library-formatter.js
// 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) {
@derek-knox
derek-knox / vscode-user-settings.json
Last active Aug 15, 2018
VSCode User Settings in case an update nukes them again
View vscode-user-settings.json
{
"window.zoomLevel": -1,
"workbench.colorTheme": "Monokai",
"workbench.colorCustomizations": {
"editor.findMatchBackground": "#135564",
"editor.findMatchBorder": "#ffffff",
"editor.findMatchHighlightBackground": "#FD5F0099",
"editor.findMatchHighlightBorder": "#99cc33",
"editor.selectionBackground": "#135564",
View flexbox-cheatsheet.less
.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 */;
@derek-knox
derek-knox / javascript.json
Last active May 18, 2018
VSCode MobX React Snippets + Utility Snippets
View javascript.json
{
"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\t@action.bound 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"
@derek-knox
derek-knox / browser-and-engine.js
Last active Mar 7, 2018
Simple method definition and execution with detailed comments on browser and engine behavior. Anything missing or incorrect in the comment breakdown?
View browser-and-engine.js
function makeBackgroundBlack() {
document.body.style.backgroundColor = '#000000';
}
makeBackgroundBlack();
/*
- browser parses html
- browser sees <script> - blocks (and downloads if src attr)
@derek-knox
derek-knox / example.md
Last active Mar 2, 2018
algorithm research (bin-packing-esque)
View example.md

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)
@derek-knox
derek-knox / SignalTest.cs
Created Jan 22, 2018
C# Signal On/Do/Use/All
View SignalTest.cs
using System;
public class Test { public int num = 44; }
public class Signal
{
private int _listenerCount;
public object Arg1;
public object Arg2;
@derek-knox
derek-knox / reduce-lazy-example.js
Last active Jan 18, 2018
Is there a native `reduceLazy()`-like method in JavaScript that has the behavior as below?
View reduce-lazy-example.js
// 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];
@derek-knox
derek-knox / Regex .md to .html Help
Created Dec 30, 2017
.md to .html highlight syntax for inline code vs code blocks using regex
View Regex .md to .html Help
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?
@derek-knox
derek-knox / ternary-bracket-notation-combo.js
Last active Sep 15, 2017
Decreasing LOC while maintaining clarity with ternary and bracket notation (1st Approach - 6 LOC from Kyle Simpson's Deep JS Foundations)
View ternary-bracket-notation-combo.js
/* 1st Approach - 6 LOC */
if(insertBefore) {
workElements[adjacentWorkEntryId].before($workEntry);
}
else {
workElements[adjacentWorkEntryId].after($workEntry);
}
/* 2nd Approach - 4 LOC (curly brace removal) */
You can’t perform that action at this time.