lucasfais

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

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}"

ls-lukebowerman

<% 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

// 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

SVG sprite generator, by Sérgio Lopes

• https://twitter.com/sergio_caelum
• http://sergiolopes.org

Requirements

• Python
• Inkscape (on command line path)
• ImageMagick

chriseppstein

mymodule {
  @at-root {
    .#{&}-header { ... }
    .#{&}-footer { ... }
    .#{&}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... } 
    }
  }

tommillard

browse to folder in terminal and run:
 
python -m SimpleHTTPServer

austinhyde

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

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

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent