Nathaniel Inman

Atomic Design System In Context

Tue, 15 Aug 2023 00:00:00 +0000

Brad Frost created a design system for thinking about developing for the web as a front-end specialist. Atomic Design System is essentially boiled down into 5 separate categories:

Atoms (Elements) - These are the smallest functional elements of a page, such as text labels, buttons, inputs or other HTML elements that can’t further be broken down.
Molecules (Components) - Simple compositions or groups of atoms that comprise a single unit. This may be an input box with a search button next to it and a label above it. Within Brad’s book he mentions these should follow the “S” in “SOLID” from Robert C. Martin’s Principles of Object Oriented Design which stands for Single Responsibility Principle. By this Brad implies that the molecule must only do one specific thing, not necessarily that it has only one reason to change. Brad refers to molecules near the end as “simple, functional, reusable components.”
Organisms (Widgets) - Comprised of potentially multiple molecules or atoms and molecules in conjunction to form a cohesive purpose. Here Brad specifically refers to organisms as “components” numerous times as well. In comparison, these may be more sophisticated components compared to molecules.
Templates - Templates are simply a collection of elements, components and widgets that when together build an entire page and lays it out without actual data. You can think of these as a Class in object oriented design.
Pages - Pages are instanced Templates, or Templates with actual data.

The actual benefit of the design system is in it’s name. Atomic Design System helps by putting an emphasis on breaking things down into their most atomic units and creating categories of complexity that are well-named to be able to refer to them.

Pihole On-top of UDM Pro

Mon, 19 Dec 2022 00:00:00 +0000

Here are some concise steps on how to step-by-step block ads on your network with pihole’s DNS-level ad blocker.

Enabling SSH on UDM Pro

Go to 192.168.1.1 or wherever you’re hosting your UDM Pro
Within “settings” cog, click on “system” tab
Click “enabled” on SSH near the bottom
Leverage “change password” button if you don’t remember it

Log Into SSH & Get Unifi-OS Scripts

Open Terminal and ssh root@192.168.1.1 -o HostKeyAlgorithms=+ssh-rsa
Jump into Unifi shell with unifi-os shell
Download package curl -L https://udm-boot.boostchicken.dev -o udm-boot.deb
Install package dpkg -i udm-boot.deb
Enable boot script with systemctl enable udm-boot
Leave Unifi shell but stay within ssh with exit

Create Network Within UDM Web GUI

Create a pihole network with the following settings:

Announcing Credential Broker

Wed, 07 Apr 2021 00:00:00 +0000

tl;dr: The utility is open-source, you can download, contribute or learn more on github here.

A credential broker service stores all sensitive information and has a command-line client which can act as a streaming pre-hook to initialize environment variables upon an application at runtime that does not store anything to disk. The broker service itself stores everything in encrypted format with the broker client having a key to unlock the data, provided the user is authenticated and has been authorized for the data requested. The server mimics an SSH authentication using Diffie-Hellman to establish encryption of traffic, performing a challenge to validate a user owns the private OpenPGP key to their account and a 2FA request at a configurable time period to ensure the user hasn’t been compromised. SSL should be configured on the server to help prevent man-in the middle.

Kepler452b Released

Tue, 04 Aug 2020 00:00:00 +0000

Kepler452b is available for Windows, Linux & MacOS. Enjoy a roguelike with one of 8 classes, 5 unique worlds, beautiful graphics by Oryx, music by Scott Buckley & Sergey Cheremisinov, 28 unique enemies, 101 supervisors to modify your gameplay, a story and much more! Whether you prefer to sneak around and backstab with the assassin, use a flamethrower as a pyrotechnic or grapple enemies to you and poison them, there’s bound to be a play style you will enjoy!

XMLHttpRequest Security

Tue, 02 Jun 2020 00:00:00 +0000

It’s possible to intercept, adjust and otherwise tamper with a XHR request with javascript in the browser. The most common way of doing this is simply making a pointer reference to the original XMLHttpRequest.prototype.send function, overwriting that function with a new one that does the tampering and then calls the original send function once finished. Here’s an example:

const XHR = XMLHttpRequest,
 XHRopen = XHR.prototype.open;

 XHR.prototype.open = function() {
 onFinish();
 XHRopen.apply(this, arguments);
 };

Identifying Tampering

It’s very straight forward to identify tampering of the function. Simply ensure that the XMLHttpRequest.prototype.open.toString() === 'function send() { [native code] }'; evaluates to true. The function should always be native code if it wasn’t corrupted or tampered with.

Kepler452b Coming 2020

Tue, 03 Dec 2019 00:00:00 +0000

August 4th, 2020 Update: v1.0.0 Release

Official release page is here.

You can submit bugs or request features here.

Downloads & Links

Windows Download

Mac Download

Linux Snapfile Download

Linux App Image Download

Screenshots

Building a Modern Roguelike in 2019

Wed, 13 Nov 2019 00:00:00 +0000

At numerous times I’ve created demos trying to figure out how to merge a traditional roguelike into a FPS without sacrificing it’s roots. Here’s an article I made in 2017. Unlike many others I don’t feel like just random maps makes a roguelike, I’ve even gone so far as saying no FPS is a roguelike. In this experiment I’ve tried to merge those ascii characters into the map itself and dropped the textures. The code can be executed and ran or viewed in its entirety on Github here.

Mapping Genealogy in Neo4J

Fri, 26 Jul 2019 00:00:00 +0000

This summer I’ve worked on a behavior and trait mapper in C++ that establishes entirely dynamic AI routines, allowing actors to propagate and interact with each other in unique ways. You can think of it as a super sophisticated Langton's Ant, where the goal was to identify the reflective sociological impacts of personal traits from as minute and mundane as a vegan to criminal desires like burglary, sexual preferences like pansexual or uncontrollable hunger desires of a cannibal, etc. The graphing of the application was with Vis.js.

Runtime Pipeline Patterns

Mon, 25 Feb 2019 00:00:00 +0000

Introduction

Pipeline patterns are most commonly used for simple data workflows like general functional composition or user registration processes. After briefly describing the basics, this article focuses on a couple of behavioral software design patterns under the strategy pattern we’ll refer to as “runtime patterns” for use with pipelines. Their power in modern applications is allowing pipelines to expand or contract dynamically. Whether it be through behavior modeling with ai, blueprint fulfilling or more basic conditional pipeline adaptation, the runtime patterns are helpful and with forethought can be simply understood and implemented.

Async Await Chaining

Sun, 06 Jan 2019 00:00:00 +0000

Creating synchronously chained functions is straight forward. Codepen.

const UserCollectionSync = {
 find(id=''){
 document.writeln('1');
 return this;
 },
 update(){
 document.writeln('2');
 return this;
 },
 save(){
 document.writeln('3');
 return this;
 }
}
UserCollectionSync
 .find()
 .update()
 .save();

But when we decide to just throw some ‘async’ ‘await’ flags on those functions everything doesn’t work. FOLLOWING CODE IS WRONG: Codepen.

// delay is used to represent some asynchronous work
function delay(ms){
 return new Promise(resolve => setTimeout(resolve, ms));
} //end delay()

const UserCollectionAsync = {
 async find(id=''){
 await delay(1000)
 document.writeln('1');
 return this;
 },
 async updateFor(options={}){
 await delay(50);
 document.writeln('2');
 return this;
 },
 async save(){
 await delay(50);
 document.writeln('3');
 return this;
 }
}
UserCollectionAsync
 .find()
 .updateFor('')
 .save();

The reason it fails is because when the ‘find()’ is called it returns a promise that hasn’t resolved instead of the ‘UserCollectionAsync’ object (Factory pattern.) Therefor you can’t find a function ‘update()’ on a promise. One common way of solving the issue is by allowing the factory to maintain a queue and force the user to add ‘done()’ at the end of the chain: Codepen.

Meander Algorithm

Tue, 04 Sep 2018 00:00:00 +0000

The meander algorithm is a combination of using mazes to allow a meandering with bresenhams line. Below you can see the actual algorithm in simplicity. Obviously you could use noise maps to created heighted terrain based on the river to make it look pretty.

Choose a starting map edge and ending map edge, acquire the terminal points based on those edges. Usually this would be a random point on those edges. Maybe you’d want to weight it so it’s predominately in the center, or you could restrict it to a certain part.
Create Bresenhams line between the terminal points. This is called the pathing vector.
Break up the pathing vector into chunks of 9x9 where the pathing vector crosses the center. There may be left-over of the pathing vector.
For each chunk, perform a recursive maze generation algorithm on the chunk. Repeat this step until there is a path from the start of the pathing vector within the chunk to the end of the pathing vector in the chunk. A* pathing algorithm can be used for the pathing.
Merely use Bresenhams line to wrap up the extraneous pathing vector not covered by chunks, alternatively break up the remaining path into the largest odd number and chunk and process it similarly to the previous part of the algorithm to make it more consistent. Left overs in this optional way would still be filled in with bresenhams line.

Recursive Maze Generation:

Generating Exhumed River Channel

Mon, 06 Aug 2018 00:00:00 +0000

I recently did some work in generating rivers in a 2d game. Revisiting this work to create an exhumed river channel, I decided it might be fun to revisit how to generate it to make the channel look more realistic. Instead of using a drunken walker, this is a more expensive but interesting map generator:

Start by generating 2d simplex noise where
less <0.6 is floor
rest is walls
Generate terminal lines at each map exit (north, south, east, west). Shuffle those lines and randomly choose a start and end location for the river based on two of those lines.

Later you can add another line with terminal point to allow a split river channel

Generating Cliffs for 2d Game

Tue, 31 Jul 2018 00:00:00 +0000

Source code available on github here.\n\nA recurring problem in 2d games is how to represent depth. In isometric games this is easily solved but in discretely top-down games it’s harder to solve. After doing a lot of research I fell onto a simple idea: do the best you can insinuating the depth and leave the rest to the imagination. Here’s the algorithm I used to create 2d top-down cliffs:

Create a small map of perlin noise and a wide map of perlin noise. Add the two together and give the large map a weight of 3 with the small a weight of 1 and render the result with different breakpoints. This is ref map A.

Less than 0.01 on A is deep water

Generating 2d Rivers

Wed, 11 Jul 2018 00:00:00 +0000

Rivers are really hard to generate for 2d top-down games for multiple reasons:

Rivers primarily form based on heightmaps which are hard to display in top-down
Displaying fluidity when working with sectors or grid-based rendering can be complicated, bresenham’s line algorithm only goes so far to make things look smooth
naturally occurring mechanisms of nature have numerous factors in play that caused them to exist. Simulating all of these factors isn’t reasonable.

I was able to make relatively decent 2d rivers using a few techniques.

Balancing Game Mechanics

Wed, 06 Jun 2018 00:00:00 +0000

Two of the most influential components to decreasing LOE in balancing game mechanics is automating the most essential parts of testing those mechanics, and providing meaningful and easy to understand graphs. Some meaningful questions to better lay the foundation of balancing and creating these components:

What are the actual ‘core stat(s)’ that identify survival? (Usually health)
What are the ‘ancillary stat(s)’ that help facilitate the increase or decrease that core? (damage, strength, dexterity, etc.) I’m assuming all actors here are equal and we aren’t comparing apples and oranges.
What are the ‘supplemental stat(s)’ that may contribute to the increase or decrease of the ancillary stats? (class, rank, level)
What are the ’extraneous stat(s)’ that don’t affect the other stats already identified.

I found that creating a tree by drawing lines connecting these identified stats provided incredible insight and direction.

Pigeon Hole Stepping v2

Tue, 08 May 2018 00:00:00 +0000

I had originally written an article on how to implement PHS. Having found the maps generated slightly redundant I decided to take another look. Here are the steps taken to successfully generate a more realistic town. It’s essentially a drunken walker like Diffusion Limited Aggregation mixed with a hallway constraint that mimics the large part of PHS.

Start somewhere in the middle, add this and all possible directions up to a certain dynamic length (I used a standard deviation of 1.4 with a mean of 5, ) as nodes: [{x,y,direction},...].
We will be looping until all nodes and edges (we’ll describe that shortly,) are gone.
When we have node then check to see if the path between it’s ‘x,y’ and ‘x2,y2’ (given the length and direction) is clear. If it is, then add the entire path minus the start and end as edges, and add the end as a new node. Shuffle nodes after adding a new one. After building the path run through the path array randomly attempting to build a room in all directions. (this won’t be entirely possible and will leave negative space to fill with edges.)
If there are no nodes, repeat step 3 except with edges (this helps fill the map negative space.)
After all nodes and edges are gone then cover all cells adjacent to floors with walls if it’s empty.

I found it helpful to use this simple formula to generate hallway lengths with a mean and standard deviation constraint. Both the x and y would work fine, here we’re using the y only.

Generating Ancient Ruins

Thu, 03 May 2018 00:00:00 +0000

While creating algorithms for random continent generation, I came across an old algorithm I had worked with called Coupled Map Lattice. Using that to create a continent was hard but I was able to accomplish it doing layers of filters:

generate map with noise between -1 and 1
apply CML using Spatiotemporal Intermittency settings

(a = 1.75, ε = 0.6)

I found that using something too chaotic didn’t have a noticeable affect compared to just generating noise in general.

normalize values to between 0 and 255 apply a gaussian blur normalize values to between 0 and 1 apply slight height restrictions based on distance to center of map

Ability Icon User Experience

Wed, 07 Mar 2018 00:00:00 +0000

When using abilities within most games the user doesn’t have any time to look for an ability name so recalling an ability quickly by an image or icon that accurately represents it is incredibly beneficial. Similar to this idea, there are 4 basic requirements when creating ability icons. Below they are listed in priority order.

It must be easily used (click/button press, etc.)

The user shouldn’t have to look around documentation to understand what button to press
The user shouldn’t have to struggle to hold down multiple buttons just to use it
Accessibility should be taken into account (screen readers, etc.)

It must be easy to interpret it’s purpose

The user can immediately see the icon and have a meta thought about what it means, and thereby understand the ability that is being represented intuitively.

It must be identifiably unique to other icons

Icons shouldn’t look exactly alike
Sometimes its best to have certain icons look similar if they have similar functions, but how similar they look should not cause confusion

It must not be too distracting

The icon should be convenient to the user, not distracting from the gameplay.
The icon must be appropriately sized
The icon must be carefully colored
The icon must have an appropriate amount of contrast

Updating a SPA automatically without browser refresh

Tue, 11 Jul 2017 00:00:00 +0000

I was asked a very interesting interview question today.

Lets assume you have a single page application running on n users computers as a dashboard and you updated the application, how does all of the clients receive and manage the updated assets without incurring a browser refresh.

The first problem to figure out is how do I know the application was updated?

Polling the entry bundle asset
Polling the Index.html and comparing hashes/versions
Polling some custom tiny server text doc
Dashboard websocket contains the version
On acquisition of new data it contains version
We don’t update until a change of route

Now we have a version, we distinguish that the server version is ‘greater’ than ours. How do we acquire the new asset?

Angular was dead on arrival

Mon, 10 Jul 2017 00:00:00 +0000

I’m commonly asked why more people don’t choose angular2 which in my head I correct to angular. (we’re on angular 3 alread.. no, 4,… no.) Quite simply, the answer is Typescript. Whether we like it or not the majority of javascript developers in our field are new or mediocre developers who don’t have the time or cognitive ease to attempt to learn another language.

It was a huge mistake for the team to release the library with the small amount of constantly outdated documentation entirely in Typescript. Most stackoverflow searches for angular aren’t even relevant or accurate given the constantly changing api. Without good documentation, and so much irrelevant or outdated answers on stackoverflow these developers lose hope, and angular lost potential users.

Zsh Theme For Pragmata Pro

Sun, 02 Apr 2017 00:00:00 +0000

Having spent a lot of money on purchasing the Pragmata Pro font (mostly to acquire a well-made set of glyphs for things like lambdas etc, I decided to allow this font to supplement my zsh theme. Here’s the results.

This file is updated often and available on Github here.

#!/usr/bin/env zsh

local LAMBDA="%(?,%{$fg_bold[green]%}λ,%{$fg_bold[red]%}λ)"
if [[ "$USER" == "root" ]]; then USERCOLOR="red"; else USERCOLOR="yellow"; fi

# Git sometimes goes into a detached head state. git_prompt_info doesn't
# return anything in this case. So wrap it in another function and check
# for an empty string.
function check_git_prompt_info() {
 if git rev-parse --git-dir > /dev/null 2>&1; then
 if [[ -z $(git_prompt_info) ]]; then
 echo "%{$fg[blue]%}detached-head%{$reset_color%}) $(git_prompt_status)
%{$fg[yellow]%}→ "
 else
 echo "$(git_prompt_info) $(git_prompt_status)
%{$fg_bold[cyan]%}→ "
 fi
 else
 echo "%{$fg_bold[cyan]%}→ "
 fi
}

function get_right_prompt() {
 if git rev-parse --git-dir > /dev/null 2>&1; then
 echo -n "$(git_prompt_short_sha)%{$reset_color%}"
 else
 echo -n "%{$reset_color%}"
 fi
}

PROMPT='
${LAMBDA}\
 %{$fg_bold[$USERCOLOR]%}%n\
 %{$fg_no_bold[magenta]%}[%3~]\
 $(check_git_prompt_info)\
%{$reset_color%}'

RPROMPT='$(get_right_prompt)'

# Format for git_prompt_info()
ZSH_THEME_GIT_PROMPT_PREFIX="%{$fg[blue]%}"
ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%}"
ZSH_THEME_GIT_PROMPT_DIRTY="%{$fg_bold[yellow]%} "
ZSH_THEME_GIT_PROMPT_CLEAN="%{$fg_bold[green]%} "

# Format for git_prompt_status()
ZSH_THEME_GIT_PROMPT_ADDED="%{$fg_bold[green]%}⮹ "
ZSH_THEME_GIT_PROMPT_MODIFIED="%{$fg_bold[blue]%}⭍"
ZSH_THEME_GIT_PROMPT_DELETED="%{$fg_bold[red]%}⮾ "
ZSH_THEME_GIT_PROMPT_RENAMED="%{$fg_bold[magenta]%}⭷ "
ZSH_THEME_GIT_PROMPT_UNMERGED="%{$fg_bold[yellow]%}⮓ "
ZSH_THEME_GIT_PROMPT_UNTRACKED="%{$fg_bold[cyan]%}⯑ "

# Format for git_prompt_ahead()
ZSH_THEME_GIT_PROMPT_AHEAD="%{$fg_bold[white]%}⮍ "
ZSH_THEME_GIT_PROMPT_BEHIND="%{$fg_bold[white]%}⮏ "

# Format for git_prompt_long_sha() and git_prompt_short_sha()
ZSH_THEME_GIT_PROMPT_SHA_BEFORE=" %{$fg_bold[white]%}[%{$fg_bold[blue]%}"
ZSH_THEME_GIT_PROMPT_SHA_AFTER="%{$fg_bold[white]%}]"

Responsive Game Interfaces

Fri, 24 Mar 2017 00:00:00 +0000

It’s abundantly clear that making interfaces for portals, single page applications, analytics or CRUD apps is so much easier than creating applications for games. UX within games is much more complicated. Now add upon that complication a responsive design.

It took the better part of 8 hours to get a design mock-up that worked on the smallest iphone device (man they’re tiny!) and that scales up to the largest phablet. I still need to work on detaching the pane and having a more ‘diablo-esque’ two-pane character panel / inventory approach for desktop users.

Textures make a difference

Wed, 22 Mar 2017 00:00:00 +0000

I’ve been playing around with textures in exploring the bleak to see how much of a difference it would make. Essentially I’m torn between two ideas:

Make the floors all a plain color and glow them based on the environment color so as not to be too realistic and keep a more roguelike feel.
Struggle with having textures that blend together between sectors so it has a more natural feel albeit simple in perspective to traditional 3d games.

At the moment I’m leaning towards number two, but I haven’t been able to reproduce a reliable glow postprocessing effect that I actually like and that feels natural. I’ll follow down both roads further before making a discrete decision.

No FPS is a Roguelike

Fri, 10 Mar 2017 00:00:00 +0000

I’ve struggled with the concept of merging the roguelike turn-based system with a FPS. Having a turn based on when you fully leave a cell makes the monsters seem jumpy which doesn’t make for very nice gameplay. Because I believe turn-based systems are core to roguelikes and first person shooters can’t be turned based in a cohesive way, I’ve dropped the FPS perspective altogether and pulled the camera above the player.

Building A Modern Roguelike in 2017

Wed, 08 Mar 2017 00:00:00 +0000

Building games has become easier to do with the increase in quality of tooling and specialization software. The unfortunate side effect is the developer has to become more trained and specialized in a variety of facets in order to maintain competency in the field. Ergo building games is also harder.

This year for the 7DRL competition I’ve been pretty lazy, which doesn’t help much to making deadlines. Setting aside playing games for making games I decided to finally venture into the competition whole heartedly.

Space Invaders Released

Fri, 02 Dec 2016 00:00:00 +0000

So I’ve recently compiled a bunch of my libraries together into a collection I call ‘ion-cloud’ available on ’npm’. In order to best test these, I’ve recreated my own adaptation of ‘Space Invaders’ available free to play here on my website by clicking the games above or here and ‘open source’ on github here.

Coterie Released

Wed, 03 Aug 2016 00:00:00 +0000

(Aug 3, 2016 Update: Coterie is now playable on mobile or touch devices as well. Play Coterie)

Growing up I deeply enjoyed two specific cards games: Triple Triad in Final Fantasy VIII and Tetra Master in Final Fantasy IX. Having some extra time this past week I developed a simple card game variant called Coterie. What started as an excuse to get more familiar with flexbox in css ended up actually being fun to play!

Cleaner complex IF Statements

Thu, 12 May 2016 00:00:00 +0000

Writing clean code like Uncle Bob describes can be complicated sometimes. So you have this long if statement that’s relatively simple in design but ugly to the eyes and somewhat hard to read.

if(
 x1>=img.left&&x1=img.top&&y1=img.left&&x2=img.top&&y2=lowerX&&x1=lowerY&&y1=lowerX&&x2=lowerY&&y2=a&&this=img.left&&x1=img.left&&x2=img.top&&y2=img.top&&y2r)){
 img.scaling = Math.pow(x1-x2,2)+Math.pow(y1-y2,2);
} //end if

At what point does sacrificing performance become worth it for code readability?

Pigeon Hole Stepping

Tue, 08 Mar 2016 00:00:00 +0000

For 7DRL this year I developed a new map generation algorithm called Pigeon Hole Stepping.

Fill the map with walls

This map generation algorithm relies on negative building techniques. This concept will make more sense as the later steps are explained.

Dig Hallways

Essentially, we can assume that hallways that are parallel to each other are at least the length of a single room and up to two rooms apart in distance. Because of this assumption, we can make a random walker that will move around with this restriction in mind until map is filled completely.

NPM Module: Jugs

Sat, 30 Jan 2016 00:00:00 +0000

App generator jugs makes development fun again! You can view the source code here.

Vite.js : Performant Module bundler with tree-shaking, hot module reloading & minification
Babel : Transpile modern javascript, formerly called 6to5
Eslint : Lint your javascript in its modern format
Stylus : Powerful CSS Preprocessor with a beautiful syntax
Ion-Cloud : A micro library for animations & game development

Simply install this app generator globally:

npm i -g jugs
mkdir appName
cd appName
jugs

File Structure:

Automata Generated Caverns

Fri, 13 Nov 2015 00:00:00 +0000

Randomly generated dungeons are a lot of fun to program, but sometimes they can be pretty difficult to originally wrap your head around. For this years 7DRL I added Automata Generated Caverns as one of the algorithms I wanted to figure out completely. You can read more specifically on the theory here.

.zshrc

Sun, 09 Aug 2015 00:00:00 +0000

It all started one long rainy night after setting down my Archlinux laptop and picking up my macbook pro.. inevitably annoyed quickly by the ancient bash version. Switched to z shell. Downloaded oh-my-zsh for a prettiness template to start with.. customized my own theme, and have been hooked for a solid 3 months so far.

(Many years later, it’s much more refined - 2019/01/28)

You can alternatively view all my dotfiles on github here.

.vimrc

Fri, 15 May 2015 00:00:00 +0000

I’ve decided to release my small .vimrc file to others who are interested.

You can also view all my dotfiles on github here.

"----------------------------------------
" Start general configurations
"----------------------------------------
set encoding=utf-8
set nocompatible " don't lose new vim features due to compatibility
set ts=2 sw=2 et " 2 space tabs (tabstop=2, shiftwidth=2, expandtab=true)
set autoindent "Always autoindent
set hlsearch " highlight search terms
set incsearch " show search while typing it
set smartcase " ignore case if search is lc, sensitive otherwise
set showmatch " set show matching parenthesis
set mouse=a " Allow mouse scrolling (peer programming)
set backspace=indent,eol,start " Allow backspace to work normally
set number " Turn on line numbers
set relativenumber " show relative line numbers
set laststatus=2 " Always show statusline
set list "Show invisible characters, next line specifies characters
set belloff=all "Turn off the annoying audible error bell
set listchars=eol:¬,nbsp:¤,space:⋅,trail:•,tab:››,extends:…,precedes:…,conceal:‡
set rtp+=~/.vim/bundle/Vundle.vim/ " set runtime path to use vundle for plugins

"----------------------------------------
" Start Vundle and loading plugins
"----------------------------------------
call vundle#begin()
Plugin 'VundleVim/Vundle.vim' "Best plugin management for vim
Plugin 'moll/vim-node' "Allows gf/gF on relative node paths
Plugin 'digitaltoad/vim-pug' "Jade/Pug templating for Node
Plugin 'wavded/vim-stylus' "Stylus preprocessor for css
Plugin 'airblade/vim-gitgutter' "See git + / - / ~ in gutter
Plugin 'scrooloose/nerdtree' "File management
Plugin 'Xuyuanp/nerdtree-git-plugin' "Shows modifications in nerdtree
Plugin 'itchyny/lightline.vim' "pretty statusline
Plugin 'ctrlpvim/ctrlp.vim' "Fuzzy file finder
Plugin 'scrooloose/nerdcommenter' "Allows commenting of lines easier
Plugin 'ap/vim-buftabline' "Allows the buffers as tabs
Plugin 'easymotion/vim-easymotion' "Allows quick movement around vim
Plugin 'chr4/nginx.vim' "nginx sytax support
Plugin 'arcticicestudio/nord-vim' "color scheme
Plugin 'pangloss/vim-javascript' "Better tabbing in javascript
Plugin 'posva/vim-vue' "vue file syntax support
Plugin 'junegunn/goyo.vim' "distraction-free centering of file
call vundle#end()

filetype plugin indent on " Plugins default to indent

"---------------------------------------
" Reconfigure Plugin Options
"---------------------------------------
let g:NERDCustomDelimiters = {'vue': {'left': '//'}, 'javascript': {'left': '//'}}
let g:vue_pre_processors = ['pug', 'stylus']
let g:lightline = {'colorscheme': 'nord'}
let g:lightline.separator = { 'left': '', 'right': '' }
let NERDTreeQuitOnOpen = 1
let g:gitgutter_sign_added="++"
let g:gitgutter_sign_modified="~~"
let g:gitgutter_sign_removed="--"
let g:gitgutter_max_signs=3000
let g:ctrlp_map = '' " ctrl+p starts plugin
let g:ctrlp_cmd = 'CtrlP'
let g:ctrlp_working_path_mode = 'ra' " start nearest search dir @ root .git
"---------------------------------------
" Keyboard mappings
"---------------------------------------
let mapleader="\"

" Session management
nnoremap s :ToggleWorkspace

" Distraction-free editing
nmap d :Goyo 80x75%:set showtabline=0
nmap v :Goyo!:set showtabline=2

" Open nerdtree and then open current file location in nerdtree
nmap \ :NERDTreeToggle
nmap \ :NERDTreeFind

" New buffers, quitting buffers
nmap T :enew
nmap bl :bnext
nmap bh :bprevious
nmap bq :bp bd #
nmap bs :ls
nmap nj :rightbelow sb #
nmap nk :leftabove sb #
nmap nh :vert leftabove sb #
nmap nl :vert rightbelow sb #

" Indicate color code under cursor
nmap z :echo "hi trans lo"

" Selecting, making and resizing windows
nnoremap j j
nnoremap l l
nnoremap h h
nnoremap k k
nnoremap mk K
nnoremap mj Kr
nnoremap mh H
nnoremap ml Hr
nnoremap sk :res +5
nnoremap sj :res -5
nnoremap sh :vertical res -5
nnoremap sl :vertical res +5
nnoremap j gj
nnoremap k gk

"---------------------------------------------
" Color scheme configuration
"---------------------------------------------
syntax on "Make sure syntax highlighting is on
colorscheme nord
hi BufTabLineCurrent ctermfg=16 ctermbg=6 cterm=NONE
hi BufTabLineHidden ctermfg=8 ctermbg=NONE cterm=NONE
hi BufTabLineFill ctermfg=NONE ctermbg=NONE cterm=NONE

" Color Fixes Caused by Plugins
hi link vueSurroundingTag htmlEndTag

Versioning NPM packages

Thu, 30 Apr 2015 00:00:00 +0000

A lot of people don’t know that it’s super simple to version npm packages. And have used things like gulp-bump or other needless packages. man npm-version shows us that it’s as simple as:

npm version major
npm version minor
npm version patch

Following semver, it will update the package.json file automatically and apply a git tag with the version. This allows you to duplicate annotated package versions on github with what’s been released in your packages through npm deploy. Couldn’t be simpler!

Works

Mon, 01 Jan 0001 00:00:00 +0000

Free and open-source games and projects