Skip to content

Instantly share code, notes, and snippets.

@chrismademe
chrismademe / date-diff-in-days.php
Created May 19, 2021
PHP: Difference between 2 dates in days
View date-diff-in-days.php
<?php
/**
* Date diff in days
* The difference in days between 2 dates
*
* @param $from string Y-m-d date string
* @param $to string Y-m-d date string
*/
function date_diff_in_days($from, $to) {
View gist:5b1791c73205572efea369cfaf85313f
{
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
"editor.fontSize": 14, //14
"editor.lineHeight": 42,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.codeLens": false,
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?_",
"editor.snippetSuggestions": "top",
View base-colours.css
:root {
--color-gray-90: #373946;
--color-gray-70: #565869;
--color-gray-50: #77798a;
--color-gray-30: #b3b4bd;
--color-gray-10: #eeeef0;
--color-neutral-90: #002c59;
--color-neutral-50: #0779e4;
--color-neutral-10: #e1eefa;
@chrismademe
chrismademe / temporary-variables.js
Created Jul 4, 2020
Sometimes it can be tidier not to use temporary variables
View temporary-variables.js
// Sometimes it can be tidier not to use temporary variables :)
// Before
async render() {
let inputPath = path.join(__dirname, '/assets/css/style.scss');
let { sassOptions } = siteConfig || {};
const { css } = sass.renderSync({
file: inputPath,
...sassOptions,
@chrismademe
chrismademe / vs-code.json
Last active May 25, 2020
VS Code Settings
View vs-code.json
{
"workbench.iconTheme": "material-icon-theme",
"editor.fontFamily": "'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace",
"editor.fontSize": 14,
"editor.lineHeight": 34,
"editor.formatOnSave": true,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"editor.codeLens": false,
"workbench.startupEditor": "none",
@chrismademe
chrismademe / alpine-toggle.js
Last active May 15, 2020
AlpineJS Progressively Enhanced Checkbox
View alpine-toggle.js
<div x-data="{ checked: false, ready: false }" x-init="ready = true" @click="checked = !checked" class="flex items-center space-x-2">
<button type="button" class="hidden" :class="{ 'flex bg-gray-300 rounded-full w-12 cursor-pointer border': ready, 'hidden': !ready }">
<div :class="{ 'bg-green-600 translate-x-6': checked, 'bg-gray-500': !checked }" class="pointer-events-none rounded-full w-6 h-6 transition duration-150 ease-in-out transform"></div>
</button>
<label class="flex items-center" for="remember_me">
<input :class="{ 'hidden': ready }" class="mr-2" type="checkbox" name="remember_me" x-bind:checked="checked">
<span>Remember Me</span>
</label>
</div>
@chrismademe
chrismademe / image-gallery.css
Created Mar 27, 2020
Image Gallery Web Component with FS Lightbox & CSS Grid
View image-gallery.css
@chrismademe
chrismademe / appearance-access.php
Created Mar 4, 2020
WordPress: Give Editor role access to the Appearance menu
View appearance-access.php
<?php
add_action( 'init', function() {
$role = get_role('editor');
$role->add_cap('edit_theme_options');
} );
@chrismademe
chrismademe / order-has-product.php
Created Jan 15, 2020
WooCommerce - order_has_product
View order-has-product.php
<?php
/**
* Order Has Product
*
* Checks a WooCommerce order to see if it contains
* a given product ID
*
* @param object $order
* @param int $product_id
@chrismademe
chrismademe / container-query.js
Created Oct 10, 2019
Container Query using ResizeObserver
View container-query.js
/**
* Written by Philip Walton
* @see https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
*/
if ('ResizeObserver' in self) {
// Create a single ResizeObserver instance to handle all
// container elements. The instance is created with a callback,
// which is invoked as soon as an element is observed as well