Skip to content

Instantly share code, notes, and snippets.


Kevin Kirchner kevnk

  • Springfield MO
View GitHub Profile
kevnk / Magento Frontend
Last active Dec 22, 2015
Snippets for a Magento front-end developer doing some repeated customizations not native to default theme.
View Magento Frontend


Add breadcrumbs

<reference name="breadcrumbs">
    <action method="addCrumb">
kevnk / local.xml
Created Sep 19, 2013
Boilerplate Magento local.xml file
View local.xml
<?xml version="1.0"?>
* Magento
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
kevnk / Default (OSX).sublime-keymap
Last active Dec 27, 2015
Useful Sublime Text key bindings
View Default (OSX).sublime-keymap
// SidebarEnhancements package enhancements
{ "keys": ["super+ctrl+r"], "command": "reveal_in_side_bar"}
, { "keys": ["super+shift+r"], "command": "side_bar_rename" }
kevnk / magento-boilerplate-cache-bust-gulpfile.js
Last active Aug 29, 2015
Be sure to replace `mytheme` with your theme's directory name on lines 59 and 62
View magento-boilerplate-cache-bust-gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');
kevnk /
Last active Aug 29, 2015
Coding Style Guide


Let me start with the solution: ReactJS includes the styles inline and/or in the same file as the elements they're being used on. This removes my frustrations with multiple people working on the same SASS/LESS project.

So this is only for projects that don't follow the methodology above.

A couple frustrations

  1. Classes and IDs (more often than not) need to communicate and describe the styles they are setting, not describe what/where the element is.
kevnk /
Last active Mar 15, 2017
Test for mobile via coffeescript
Site = ->
# @see:
_isHighDensity: ->
((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3))
_isRetina: ->
((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixel
kevnk / flatten.js
Last active Nov 7, 2016
Flatten Array
View flatten.js
* Takes a nested array and flattens it. Default use is for a nested array of integers
* But can be used for nested arrays with any type of value by passing in custom mapping and/or filtering functions
* @param {Array} arr The nested array to be flattened
* @param {Function} mapIt Function to map each value
* @param {Function} filterIt Function to filter out unwanted values left over from the mapping
* @return {Array} Returns empty array if `arr` is invalid
export default function flatten(arr, mapIt=Number, filterIt=Number.isInteger) {
let result = []
View gist:5683fd0c5a9c5623d49c9ca10aea794e
Verifying that "" is my Blockstack ID.
kevnk / _variables.scss
Created Nov 14, 2019
Golden Ratio setup for bootstrap
View _variables.scss
$gr: 1.61803398875;
$spacer: 1.25rem !default;
$spacers: (
0: 0,
1: $spacer / $gr / $gr / $gr,
2: $spacer / $gr / $gr,
3: $spacer / $gr,
4: $spacer,