dergachev

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

chriseppstein

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

jjmu15

// hasClass, takes two params: element and classname
function hasClass(el, cls) {
  return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}


/* use like below */
// Check if an element has class "foo"
if (hasClass(element, "foo")) {

samrocketman

diff --git a/Gemfile b/Gemfile
index 195de7b..84bb745 100644
--- a/Gemfile
+++ b/Gemfile
@@ -164,7 +164,7 @@ gem "jquery-ui-rails",  "2.0.2"
 gem "raphael-rails", "~> 2.1.2"
 gem 'bootstrap-sass', '~> 3.0'
 gem "font-awesome-rails", '~> 3.2'
-gem "gitlab_emoji", "~> 0.0.1.1"
+gem "gemoji", "~> 1.3.0"

frdmn

Install OS X 10.10 Yosemite in VirtualBox

Due to the high usage of this guide and the lack of comfort in Gist's commenting area, I decided to make a blog post out of this which you can find here:

http://blog.frd.mn/install-os-x-10-10-yosemite-in-virtualbox/

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

frdmn

#!/usr/bin/env bash

# Installation instructions:
#   $ curl -s https://gist.githubusercontent.com/frdmn/c6700ade5a0fc906271f/raw/checker.sh > /usr/local/bin/osx-checker
#   $ chmod +x /usr/local/bin/osx-checker
#   $ osx-checker

URL="https://itunes.apple.com/search?entity=macSoftware&term=OS+X"
SEARCH_STRING="OS X El Capitan"
TIMEOUT_IN_SECONDS="60"