Skip to content

Instantly share code, notes, and snippets.

View imgiseverything's full-sized avatar

Phil Thompson imgiseverything

18 followers · 2 following
View GitHub Profile
@imgiseverything
imgiseverything / parent-state-reset
Last active June 23, 2021 13:22
Parent state is reset when child function runs
/* .tsx */
import React, { useState, useCallback } from 'react';
// Tab list options, nothing fancy
const options = [
{ label: 'Option 1', value: '1'},
{ label: 'Option 2', value: '2'},
{ label: 'Option 3', value: '3'},
]
@imgiseverything
imgiseverything / svg-sprite
Last active March 4, 2016 14:39
<!--
Place the SVG sprite inside a div with its display set to none.
SVG sprites must appear before they are used in HTML source order and they must be hidden from view.
Inlining the CSS means if there's any delay loading your stylesheet then the sprite will still be hidden
-->
<div style="display:none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 8.3 8.3" id="icon-close" aria-label="Close"><title>Close</title><path d="M8.3,0.3L8,0L4.2,3.8L0.3,0L0,0.3l3.8,3.8L0,8l0.3,0.3l3.8-3.8L8,8.3L8.3,8L4.5,4.2"/>
</symbol>
</svg>
@imgiseverything
imgiseverything / economist-films-picture
Created March 4, 2016 14:03
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 633px)" srcset="/assets/images/content/drone-rangers/cover-961x600.jpg" type="image/jpeg">
<source media="(min-width: 472px)" srcset="/assets/images/content/drone-rangers/cover-632x600.jpg" type="image/jpeg">
<source media="(min-width: 321px)" srcset="/assets/images/content/drone-rangers/cover-471x600.jpg" type="image/jpeg">
<source srcset="/assets/images/content/drone-rangers/cover-312x600.jpg" type="image/jpeg">
<!--[if IE 9]></video><![endif]-->
<img srcset="/assets/images/content/drone-rangers/cover-312x600.jpg" alt="" width="961" height="600" class="ef-video__media ef-video__media--hero">
</picture>
@imgiseverything
imgiseverything / webfont async-loading tracking
Created August 28, 2015 13:19
the HTML
<head>
<script type="text/javascript">
var MTUserId='xyz'; // made xyz instead of actual string
var MTFontIds = new Array();
MTFontIds.push("abc"); // made abc instead of id of the fonts
MTFontIds.push("def"); // made def instead of id of the fonts
(function() {
@imgiseverything
imgiseverything / wp_nav_menu-functions.php
Last active October 27, 2015 15:20
/**
* Place this code in your theme's functions.php file to make the HTML
* it produces is more BEM friendly.
* This works out the menu_class value from wp_nav_menu() and uses that to create
* the class values.
*/
// Add a class to wp_nav_menu <li> tags so you get <li class="{menu_class}_item">
add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 3);
function my_nav_special_class($classes, $item, $args){
@imgiseverything
imgiseverything / gist:2157663
Created March 22, 2012 10:53
IMG Custom Post Types: Retreiving custom post types and ordering by a date field
// This will get all posts whose 'event_date' is today or later ordered by closest date
$custom_posts = get_posts(array(
'meta_compare' => '>',
'meta_key' => 'event_date_strtotime', // <- this is your custom field (see notes below)
'meta_value' => strtotime('-1 day'),
'numberposts' => 4,
'order' => 'ASC',
'orderby' => 'meta_value',
'post_type' => 'event' // <- this is the name of your custom post type
@imgiseverything
imgiseverything / img-custom-post-types.php
Created February 29, 2012 11:04
IMG Custom Post Types WordPress plugin
<?php
/*
Plugin Name: IMG Custom Post Types
Plugin URI: http://imgiseverything.co.uk/wordpress-plugins/img-custom-post-types/
Description: Functionality to allow easy adding of custom post types via the functions.php file
Author: Phil Thompson
Version: 0.92
Author URI: http://imgiseverything.co.uk/
@imgiseverything
imgiseverything / gist:1939932
Created February 29, 2012 10:52
IMG Custom Post Types: Example with custom meta fields and data types
if (class_exists('IMGCustomPostTypes') === true ) { // check for plugin activation
// 1 Initialise a new custom post type
$cpt_example = new IMGCustomPostTypes();
// 2 Add your custom fields - appending _textarea or _boolean changes the custom meta field edit box
$cpt_example->customFields = array('example_foo_textarea', 'example_bar_boolean', 'example_bar_date');
// 3 Set your naming conventions
$cpt_example->namingConventions = array(
@imgiseverything
imgiseverything / gist:1939907
Created February 29, 2012 10:50
IMG Custom Post Types: Example with custom meta fields
if (class_exists('IMGCustomPostTypes') === true ) { // check for plugin activation
// 1 Initialise a new custom post type
$cpt_example = new IMGCustomPostTypes();
// 2 Add your custom fields
$cpt_example->customFields = array('example_foo', 'example_bar');
// 3 Set your naming conventions
$cpt_example->namingConventions = array(
@imgiseverything
imgiseverything / gist:1939891
Created February 29, 2012 10:48
IMG Custom Post Types: Simple Example
if (class_exists('IMGCustomPostTypes') === true ) { // check for plugin activation
// 1 Initialise a new custom post type
$cpt_example = new IMGCustomPostTypes();
// 2 Set your naming conventions
$cpt_example->namingConventions = array(
'name' => 'example',
'singular' => 'Example',
'plural' => 'Examples',