Skip to content

Instantly share code, notes, and snippets.


Ben Frain benfrain

View GitHub Profile
benfrain / gist:3011711
Created Jun 28, 2012
Sublime Text 2 - Useful Shortcuts
View gist:3011711

Sublime Text 2 – Useful Shortcuts (Mac OS X)


⌘⌃P go to project
⌘KB toggle side bar
⌘⇧P command palette


mrinalwadhwa / data_url.rb
Created Jun 20, 2012
SCSS custom function to insert data uri into style sheets.
View data_url.rb
require 'base64'
# "data:" + MIME type + ";base64," + base64-encoded content
def to_data_url(content, content_type)
outuri = 'data:' + content_type + ';base64'
content = Base64.encode64(content).gsub("\n", '')
outuri += ",#{content}"
mirisuzanne / type.scss
Created Sep 2, 2012
Using modular scale with vertical rhythms
View type.scss
// Using the Modular Scale plugin along with Compass Vertical Rhythms module.
// The goal is to use MS to give us the values,
// and use VR to apply those values to our typography.
// ---------------------------------------------------------------------------
// Defaults
$base-size: 24px;
$ratio: major-third() fifth();
View 0_namespacing.scss
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
tommillard / SimpleHTTPServer
Last active Nov 13, 2018
Serve a local folder as a server at http://localhost:8000/
View SimpleHTTPServer
browse to folder in terminal and run:
python -m SimpleHTTPServer
sergiolopes /
Last active Jul 11, 2019
A script to generate SVG sprites, including CSS and PNG fallbacks.
subhaze / JavaScript NG.sublime-syntax
Last active Oct 13, 2020
very start of Angular 2 sublime syntax file
View JavaScript NG.sublime-syntax
%YAML 1.2
# See
name: JavaScript NG
- js
- ng.js
austinhyde /
Last active Jan 22, 2021
Vanilla JavaScript Data Binding


You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5
p3t3r67x0 /
Last active Jan 25, 2021
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;

video /deep/ input[type=range] {
ls-lukebowerman / sitemap.xml.erb
Created Aug 7, 2012
Sitemap ( generator for Middleman
View sitemap.xml.erb
<% pages = sitemap.resources.find_all{|p| p.source_file.match(/\.html/) } %>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="">
<% pages.each do |p| %>
<% end %>