Skip to content

Instantly share code, notes, and snippets.

@kylebarrow
kylebarrow / example.html
Created June 23, 2011 06:30
Prevent links in standalone web apps opening Mobile Safari
<!DOCTYPE html>
<head>
<title>Stay Standalone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="stay_standalone.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="http://google.com/">Remote Link (Google)</a></li>
@lucasfais
lucasfais / gist:1207002
Created September 9, 2011 18:46
Sublime Text 2 - Useful Shortcuts

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
@idan
idan / Default (OSX).sublime-keymap
Created October 27, 2011 17:51
Sublime Text asymmetric layout - place files in Packages/User
[
{
"keys": ["super+alt+shift+5"],
"command": "set_layout",
"caption" : "1-2 Grid",
"args":
{
"cols": [0.0, 0.5, 1.0],
"rows": [0.0, 0.5, 1.0],
"cells":
@twosixcode
twosixcode / gist:1988097
Created March 6, 2012 18:40
Make "Paste and Indent" the default paste in Sublime Text 2
// swap the keybindings for paste and paste_and_indent
{ "keys": ["super+v"], "command": "paste_and_indent" },
{ "keys": ["super+shift+v"], "command": "paste" }
@tommcfarlin
tommcfarlin / jquery-boilerplate.js
Created March 7, 2013 16:12
[WordPress] Properly loading jQuery within WordPress without having to use the `noConflict` method, or creating your own reference such as `$wp = jQuery`.
/**
* This gist demonstrates how to properly load jQuery within the context of WordPress-targeted JavaScript so that you don't
* have to worry about using things such as `noConflict` or creating your own reference to the jQuery function.
*
* @version 1.0
*/
(function( $ ) {
"use strict";
$(function() {
@Integralist
Integralist / Description.md
Last active April 25, 2020 16:20
This is how BBC News currently implements it's Image Enhancer for responsive images. Note: this is a completely rebuilt version of the code so the BBC's original source code doesn't actually look anything like the below example.

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe
@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
@if $side == "top" {
border-bottom-color: $arrowColor;
top: -2 * $arrowSize;
}
@if $side == "bottom" {
border-top-color: $arrowColor;
bottom: -2 * $arrowSize;
}
@if $side == "left" {