Skip to content

Instantly share code, notes, and snippets.

Avatar

Sam Davis treetrum

View GitHub Profile
@treetrum
treetrum / twig-webpack.js
Created Oct 10, 2018
Twig Webpack Copy/Compile
View twig-webpack.js
const Path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Twig = require('twig');
module.exports = {
mode: 'development',
entry: './src/app.js',
output: {
path: Path.join(__dirname, 'dist'),
filename: 'bundle.js'
@treetrum
treetrum / index.js
Last active Sep 28, 2018
jQuery Slideup & Slidedown replacement with GSAP - TweenLite
View index.js
import { TweenLite } from 'gsap';
const DEFAULT_DURATION = 0.3;
export const hideElement = (el, speed = DEFAULT_DURATION) => {
const oldSpacing = { height: el.clientHeight };
const newSpacing = { height: 0 };
const additionalSpacingProperties = ['paddingTop', 'paddingBottom', 'marginTop', 'marginBottom'];
additionalSpacingProperties.forEach(property => {
@treetrum
treetrum / inline-svg-min.js
Last active Apr 19, 2018
Automatically inline SVGs when using img tags.
View inline-svg-min.js
'use strict';(function(){var a=new DOMParser,b=document.querySelectorAll('img[data-svg-inline]');b.forEach(function(c){var d=c.src,e=c.parentNode;fetch(d).then(function(f){return f.text()}).then(function(f){var g=a.parseFromString(f,'image/svg+xml'),h=g.documentElement;e.replaceChild(h,c)})})})();
@treetrum
treetrum / flexFridWithInsideBorders.scss
Last active Feb 9, 2018
Sass Mixin to create a flex grid with inside/internal borders Raw
View flexFridWithInsideBorders.scss
@mixin flexGridWithInsideBorders( $numberOfColumns, $borderColor: hsl(0, 0, 90%), $borderWidth: 1px, $borderStyle: solid, $numberOfItemsInLastRow: false) {
// Handle default numberOfItemsInLastRow
@if ( $numberOfItemsInLastRow == false ) { $numberOfItemsInLastRow: $numberOfColumns; }
// Setup the base flex grid
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
@treetrum
treetrum / pdf-one-page-jpg.sh
Created Jan 24, 2018
Get a JPEG of the first page of a PDF file
View pdf-one-page-jpg.sh
# Extracts the first page of the PDF
gs -dSAFER -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -sOutputFile="page1.pdf" -dFirstPage=1 -dLastPage=1 {pdf-file-name}
# Converts that 1 page PDF into a JPEG
convert "page1.pdf" {pdf-file-name}.jpg
# Delete the 1-page pdf
rm "page1.pdf"
@treetrum
treetrum / remove-comments-wordpress.php
Last active Oct 9, 2017
Remove comments on WordPress without a plugin
View remove-comments-wordpress.php
<?php
add_action('init', 'remove_comment_support', 100);
function remove_comment_support() {
// Remove post type support for each post type
foreach (get_post_types() as $post_type) {
if (post_type_supports( $post_type, 'comments' )) {
// Don't remove comment support for shop orders
View tlm-donation-try-catch.php
<?php
// Add contact
$donation->setContact(
$safe_data['contact-title'],
$safe_data['contact-firstname'],
$safe_data['contact-surname'],
$safe_data['addressline1'],
$safe_data['addressline2'],
$safe_data['suburb'],
@treetrum
treetrum / target-placeholder-text-mixin.scss
Last active Sep 13, 2016
Sass mixin for easily target placeholder text within an input.
View target-placeholder-text-mixin.scss
@mixin targetPlaceholderText {
&::-webkit-input-placeholder { @content; }
&:-moz-placeholder { @content; } // Firefox 18-
&::-moz-placeholder { @content; } // Firefox 19+
&:-ms-input-placeholder { @content; }
}
// Usage example:
input {
@include targetPlaceholderText {
@treetrum
treetrum / previous-next-post-looped.php
Last active Aug 1, 2018
Get Next or Previous Post (Looped). Will continue working once end of posts reached.
View previous-next-post-looped.php
<?php
/**
* Gets the next post in the current post type, even if is last post
* Inspired from https://gist.github.com/banago/5603826
*
* @method get_next_post_looped
* @return WordPress Post Object
*/
function get_next_post_looped() {
$post_type = get_post_type();
View animated-hamburger.scss
/**
The following mixin works when @include[ed] onto a div containing three empty spans:
<div class="animated-hamburger">
<span></span>
<span></span>
<span></span>
</div>
To get the animation on click, use the following JQuery: