Skip to content

Instantly share code, notes, and snippets.

View grayghostvisuals's full-sized avatar
🐢
I may be slow to respond.

GRAY GHOST grayghostvisuals

🐢
I may be slow to respond.
View GitHub Profile
@grayghostvisuals
grayghostvisuals / disable-scroll.js
Created November 27, 2013 01:40
Disable hover on scroll to improve performance and avoid costly paints.
// Disable Hover on Scroll Class
// Add these helpers to your utlity.css
// http://www.thecssninja.com/javascript/pointer-events-60fps
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
// ----------------------------------------------------------------------
@grayghostvisuals
grayghostvisuals / validator.addMethod.passMatch.js
Created October 15, 2013 00:12
A simplistic way to make sure two password fields match using jQueryValidation (http://jqueryvalidation.org/validate) Using minlength, and a custom message.
jQuery.validator.addMethod( 'passwordMatch', function(value, element) {
// The two password inputs
var password = $("#register-password").val();
var confirmPassword = $("#register-pass-confirm").val();
// Check for equality with the password inputs
if (password != confirmPassword ) {
return false;
} else {

Debug iOS 6+7 Mobile Safari using the Chrome DevTools

$ brew install ios-webkit-debug-proxy
SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer
"$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator" \
-SimulateApplication \
@grayghostvisuals
grayghostvisuals / grunt-use-min.js
Created September 12, 2013 23:31
This is an example of a Grunt build task from https://github.com/yeoman/grunt-usemin/issues/176#issuecomment-24361368 that copies over a file with replaced references and stashes them into a build directory for production.
module.exports = function (grunt) {
grunt.initConfig({
clean: ['build'],
copy: {
html: { // in preparation for usemin
files: [
{src: 'index.html', dest: 'build/'}
]
}
},
@grayghostvisuals
grayghostvisuals / rwd-please.md
Last active December 19, 2015 18:38
RWD is where it's at. An ongoing list to help solidify the absolute need to have our content as the seed and fluid layouts as our soil. Includes articles, links and tools all centered around RWD.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
compass: {
files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
tasks: ['compass:dev']
},
bake: {
files: [ "HTML/**" ],
@grayghostvisuals
grayghostvisuals / _gaq.push.js
Last active December 18, 2015 13:59
Google Analytics Event Tracking for Open Source File Downloads. Example depicts the better way of including this event tracking script from an external file over inline event handlers suggested by the Google Analytics Event Tracking documentation.
// Example Markup For Download Link
//
// data-name is the name of your project's package download file
// data-category is the name for your tracking event. i.e. (“Download” or “Video” or simply “Click” if you must)
// <a href="#" class="dl-item" data-pkgcategory="" data-pkgname="">Download Our File</a>
//
// For Example:
// <a href="//myproject.com/download-sass.scss" class="dl-item" data-pkgcategory="Downloads" data-pkgname="Sass Port">Download Sass File</a>
@grayghostvisuals
grayghostvisuals / dandelion.yml
Created May 30, 2013 02:55
My boilerplate dandelion config using Media Temple Grid Servers for the host
# Required
# --------
scheme: sftp
host: XXXXXX.gridserver.com
username: XXXXXX
password: XXXXXX
# Optional
# --------
@grayghostvisuals
grayghostvisuals / schema-logo.html
Created May 23, 2013 03:05
Using schema.org Organization markup, you can indicate to our algorithms the location of your preferred logo. For example, a business whose homepage is www.example.com can add the following markup using visible on-page elements on their homepage: This example indicates to Google that this image is designated as the organization’s logo image for …
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Home</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>
@grayghostvisuals
grayghostvisuals / expensive-scroll.js
Created May 16, 2013 00:23
Unnecessary-Paints by Paul Lewis http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints Attach a scroll handler that will disable hover effects and set a timer for enabling them again once the user has stopped scrolling.
// Used to track the enabling of hover effects
var enableTimer = 0;
/*
* Listen for a scroll and use that to remove
* the possibility of hover effects
*/
window.addEventListener('scroll', function() {
clearTimeout(enableTimer);
removeHoverClass();