Skip to content

Instantly share code, notes, and snippets.

View jonathan-beebe's full-sized avatar

Jonathan Beebe jonathan-beebe

30 followers · 3 following
View GitHub Profile
@axemclion
axemclion / Readme.md
Last active August 29, 2015 14:03
GPU Composited CSS - Performance

Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.

The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.

Pre-requisites

  1. Ensure that you have node and npm installed
  2. Ensure that you have Selenium running, or can connect to Sauce Labs
  3. Dowload this gist using git clone https://gist.github.com/853d34ebd776047836f3.git
  4. Install other dependencies using npm install
@asmallteapot
asmallteapot / .gitattributes
Last active September 15, 2024 12:58
Diff Xcode localizable strings files in Git.
*.strings utf16 diff=localizablestrings
@razwan
razwan / _baseline.scss
Created April 14, 2014 16:20
Aligning type to baseline the right way with SASS
$base-font-size: 16px;
$base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
@KittyGiraudel
KittyGiraudel / SassMeister-input.scss
Created April 14, 2014 07:51
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// Overengineering mixin output
// By caching values and on-the-fly generating placeholders
// Clever and crazy. I like it so far.
// ---
@mattt
mattt / UTTypeForImageData.m
Created March 27, 2014 23:19
A quick function for determining an image's file type by its first couple of bytes
@import MobileCoreServices;
static CFStringRef UTTypeForImageData(NSData *data) {
const unsigned char * bytes = [data bytes];
if (data.length >= 8) {
if (bytes[0] == 0x89 && bytes[1] == 0x50 && bytes[2] == 0x4E && bytes[3] == 0x47 && bytes[4] == 0x0D && bytes[5] == 0x0A && bytes[6] == 0x1A && bytes[7] == 0x0A) {
return kUTTypePNG;
}
}
@mobilemind
mobilemind / git-tag-delete-local-and-remote.sh
Last active August 10, 2025 11:21
how to delete a git tag locally and remote
# delete local tag '12345'
git tag -d 12345
# delete remote tag '12345' (eg, GitHub version too)
git push origin :refs/tags/12345
# alternative approach
git push --delete origin tagName
git tag -d tagName
@jazzychad
jazzychad / SPVMainViewController.m
Created December 8, 2013 22:04
example of transferring velocity of UIPanGestureRecoginizer to a UIView spring animation.
#import "SPVMainViewController.h"
@implementation SPVMainViewController
{
UIView *_weightView;
UIPanGestureRecognizer *_recog;
}
- (void)viewDidLoad
{
@swizzlr
swizzlr / blockdeclsyntax.md
Created August 19, 2013 13:11
Block Declaration Syntax List, originally by [pcperini](http://stackoverflow.com/a/9201774/929581), parsed to markdown for printing with your favourite CSS (I recommend @ttscoff's Marked)

List of Block Declaration Syntaxes

Throughout, let

  • return_type be the type of object/primitive/etc. you'd like to return (commonly void)
  • blockName be the variable name of the block you're creating
  • var_type be the type object/primitive/etc. you'd like to pass as an argument (leave blank for no parameters)
  • varName be the variable name of the given parameter And remember that you can create as many parameters as you'd like.

Blocks as Variables

Possibly the most common for of declaration.

@paulrouget
paulrouget / functions.html
Last active August 3, 2017 16:44
Defining JavaScript functions, the ES6 way
<!DOCTYPE html>
<meta charset=utf-8 />
<title>Defining JavaScript functions, the ES6 way</title>
<h1>Defining JavaScript functions, the ES6 way</h1>
<em>Use Firefox 22 (Firefox Nightly)</em>
<script>
@jayj
jayj / flexbox.less
Last active April 22, 2025 14:38
CSS3 Flexbox - LESS Mixins
// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------
// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
display: ~"-webkit-@{display}";
display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox