Skip to content

Instantly share code, notes, and snippets.

View peterwilsoncc's full-sized avatar

Peter Wilson peterwilsoncc

View GitHub Profile
@peterwilsoncc
peterwilsoncc / css.css
Last active December 17, 2015 11:29
Using media queries in JavaScript (based around http://adactio.com/journal/5429/)
#js-mediaquery {
overflow: hidden;
width: 1px;
height: 1px;
position: absolute;
top: -999999em;
left: auto;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
@maddisondesigns
maddisondesigns / functions.php
Last active December 21, 2015 03:51
Filter the Gravity Forms button type to change it to a proper button
<?php
/*
* mytheme_form_submit_button
*
* Filter the Gravity Forms button type to change it to a proper button
*/
function mytheme_form_submit_button( $button, $form ) {
$button = str_replace( "input", "button", $button );
$button = str_replace( "/", "", $button );
$button .= "{$form['button']['text']}</button>";
@ganey
ganey / phpversion.sh
Last active October 31, 2019 09:04 — forked from vjandrea/phpversion.sh
Change php cli version in plesk
#!/bin/sh
printf "Switching php to version 7.1 with symlinks.\n"
printf "Press any key to continue...\n"
read CONTINUE
printf "Creating backups..."
# Backup original binaries
/*
* Property prefix hacks
*/
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
/* IE6/7 only - any combination of these characters */
@chriscoyier
chriscoyier / frontendplugins.md
Last active March 3, 2021 17:31
How WordPress Plugins Should Handle Front End Resources

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

@scottkellum
scottkellum / normalized.html
Created December 6, 2011 14:58
pixel normalization
<!doctype html>
<html>
<head>
<!-- Encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
@markjaquith
markjaquith / gist:2628225
Last active March 29, 2023 23:30
Script to sync WordPress SVN to GitHub
#!/bin/bash
# cd into the directory
cd ~/gitsync/github-wordpress-sync/;
# Make sure we are not already running
if [ -f .sync-running ];then
if test ! `find ".sync-running" -mmin +10`;then
# Currently running, but not stuck
exit 1;
fi
fi;
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@PaulKinlan
PaulKinlan / criticalcss-bookmarklet-devtool-snippet.js
Last active February 21, 2024 01:58
CriticalCSS Bookmarklet and Devtool Snippet.js
(function() {
var CSSCriticalPath = function(w, d, opts) {
var opt = opts || {};
var css = {};
var pushCSS = function(r) {
if(!!css[r.selectorText] === false) css[r.selectorText] = {};
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
for(var i = 0; i < styles.length; i++) {
if(!!styles[i] === false) continue;
var pair = styles[i].split(": ");
@necolas
necolas / README.md
Last active March 28, 2024 20:34
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name