Skip to content

Instantly share code, notes, and snippets.

Avatar

James Doyle james2doyle

View GitHub Profile
@james2doyle
james2doyle / vue.sublime-project
Last active Jan 25, 2021
A Sublime project file for Vue projects
View vue.sublime-project
{
"folders": [
{
"file_exclude_patterns": [
".eslintcache",
".gitkeep",
"*.min.*",
"*.ts.snap",
"*.pem",
"*lock*"
@james2doyle
james2doyle / render-php-file.php
Created Aug 29, 2013
A function to render a php file with data. Allows templating and then sending an array of data into the view.
View render-php-file.php
function renderPhpFile($filename, $vars = null) {
if (is_array($vars) && !empty($vars)) {
extract($vars);
}
ob_start();
include $filename;
return ob_get_clean();
}
// usage
@james2doyle
james2doyle / vue.eslintrc.js
Last active Jan 22, 2021
An Eslint config with some of the Vue (nuxt) rules I use often, which also includes typescript, jest, and i18n rules
View vue.eslintrc.js
/* eslint-disable no-magic-numbers */
/**
* Packages to be installed:
*
* @intlify/eslint-plugin-vue-i18n
* @nuxtjs/eslint-config
* @nuxtjs/eslint-config-typescript
* @nuxtjs/eslint-module
* @typescript-eslint/eslint-plugin
* @typescript-eslint/parser
@james2doyle
james2doyle / make-uuid.ts
Created Jan 20, 2021
Create a UUID using window.performance or Date.now
View make-uuid.ts
/**
* Create a UUID
* @see http://stackoverflow.com/a/8809472/188246
*
* @return {string}
*/
export default function makeUuid(): string {
// your favourite guid generation function could go here
// ex: http://stackoverflow.com/a/8809472/188246
let d = new Date().getTime() + (window.performance || Date).now();
@james2doyle
james2doyle / shopify-vue-app.js
Last active Jan 19, 2021
Support Vue apps inside the Shopify section editor. Supports refreshing the Vue instance when changes happen in the section editor
View shopify-vue-app.js
import Vue from 'vue';
/**
* EventHub to listen or broadcast to all components
*
* @see https://shopify.dev/tutorials/develop-theme-sections-integration-with-theme-editor
*
* Usage: eventHub.$on('shopify:section:select:{my-section-name}', (event) => handleSelect());
*
*/
@james2doyle
james2doyle / vue.pretty-bytes.filter.js
Last active Jan 13, 2021
Vue.js pretty bytes filter. This filter formats bytes into human readable formats
View vue.pretty-bytes.filter.js
// usage: {{ file.size | prettyBytes }}
Vue.filter('prettyBytes', function (num) {
// jacked from: https://github.com/sindresorhus/pretty-bytes
if (typeof num !== 'number' || isNaN(num)) {
throw new TypeError('Expected a number');
}
var exponent;
var unit;
var neg = num < 0;
@james2doyle
james2doyle / jquery.getStylesheet.js
Created Feb 3, 2016
An implementation of $.getScript but for stylesheets. Call it $.getStylesheet
View jquery.getStylesheet.js
(function($) {
$.getStylesheet = function (href) {
var $d = $.Deferred();
var $link = $('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: href
}).appendTo('head');
$d.resolve($link);
return $d.promise();
@james2doyle
james2doyle / i18n.lodash.ts
Created Jan 7, 2021
An incredibly simple i18n translation function using lodash `get` and `template` functions
View i18n.lodash.ts
import { get, template } from 'lodash';
const en = require('@/lang/en.json');
/**
* Translate a string from a preloaded JSON document
*/
const intl = function(key: string, values: Record<string, string | number> = {}): string {
const compiled = template(get(en, key), {
interpolate: /{([\s\S]+?)}/g, // {myVar}
});
@james2doyle
james2doyle / dd.php
Last active Jan 4, 2021
A implementation of "dump and die" (dd) for WordPress
View dd.php
<?php
if (!function_exists('dd')) {
function dd($data)
{
ini_set("highlight.comment", "#969896; font-style: italic");
ini_set("highlight.default", "#FFFFFF");
ini_set("highlight.html", "#D16568");
ini_set("highlight.keyword", "#7FA3BC; font-weight: bold");
ini_set("highlight.string", "#F2C47E");
@james2doyle
james2doyle / gentle-flex.css
Created Dec 18, 2020
Gentle Flex is a truer centering-only strategy. As gently as possible, all items are * stacked, centered, and spaced
View gentle-flex.css
/*
* Gentle Flex is a truer centering-only strategy. It's soft and gentle,
* because unlike `place-content: center`, no children's box sizes are
* changed during the centering. As gently as possible, all items are
* stacked, centered, and spaced.
*
* @see https://web.dev/centering-in-css/#2.-gentle-flex
*/
.gentle-flex {
display: flex;