Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Frain benfrain

View GitHub Profile
@lucasfais
lucasfais / gist:1207002
Created Sep 9, 2011
Sublime Text 2 - Useful Shortcuts
View gist:1207002

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
@mrinalwadhwa
mrinalwadhwa / data_url.rb
Created Jun 20, 2012
SCSS custom function to insert data uri into style sheets.
View data_url.rb
require 'base64'
# tools.ietf.org/html/rfc2397
# developer.mozilla.org/en/data_URIs
# "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}"
@benfrain
benfrain / gist:3011711
Created Jun 28, 2012
Sublime Text 2 - Useful Shortcuts
View gist:3011711

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

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

Selection

@ls-lukebowerman
ls-lukebowerman / sitemap.xml.erb
Created Aug 7, 2012
Sitemap (sitemaps.org) 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="http://www.sitemaps.org/schemas/sitemap/0.9">
<% pages.each do |p| %>
<url>
<loc>http://youdomain.com/<%=p.destination_path.gsub('/index.html','')%></loc>
<priority>0.7</priority>
</url>
<% end %>
</urlset>
@mirisuzanne
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();
@sergiolopes
sergiolopes / README.md
Last active Jul 11, 2019
A script to generate SVG sprites, including CSS and PNG fallbacks.
View README.md
View 0_namespacing.scss
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
}
}
@tommillard
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
@austinhyde
austinhyde / js-observables-binding.md
Last active Jan 22, 2021
Vanilla JavaScript Data Binding
View js-observables-binding.md

Observables

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
setN(10);
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
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.
View pseudo_elements.md

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] {