Skip to content

Instantly share code, notes, and snippets.

Avatar

James Doyle james2doyle

View GitHub Profile
@james2doyle
james2doyle / vue.eslintrc.js
Last active Jan 21, 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
/**
* 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
* babel-eslint
@james2doyle
james2doyle / DynamicIcon.vue
Created Jan 21, 2021
Load an icon dynamically in Vue 3 using the import keyword and a ref
View DynamicIcon.vue
<!--
Icon Component
Usage:
<icon icon="button"></icon>
-->
<template>
<transition name="fade" mode="out-in">
<div v-if="!loadedIcon" class="w-4">&nbsp;</div>
<component :is="loadedIcon" v-else class="icon-wrapper" :name="icon" v-bind="$attrs" v-on="$listeners" />
@james2doyle
james2doyle / simple-json-reponse.php
Last active Jan 20, 2021
A simple JSON response function for PHP. Used in various PhileCMS plugins.
View simple-json-reponse.php
<?php
function json_response($code = 200, $message = null)
{
// clear the old headers
header_remove();
// set the actual code
http_response_code($code);
// set the header to make sure cache is forced
header("Cache-Control: no-transform,public,max-age=300,s-maxage=900");
@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 / git.fish
Last active Jan 7, 2021
Git abbreviations for Fish shell
View git.fish
# tj git aliases
abbr -a gd "git diff -M"
abbr -a ga "git add"
abbr -a gaa "git add --all ."
abbr -a gbd "git branch -D"
abbr -a gs "git status"
abbr -a gca "git commit -a -m"
abbr -a gm "git merge --no-ff"
abbr -a gpt "git push --tags"
abbr -a gp "git push"
@james2doyle
james2doyle / social.blade.php
Created Mar 17, 2016
Social Share Links in Laravel Blade syntax
View social.blade.php
<a href="https://www.facebook.com/sharer.php?u={{ $url }}" rel="me" title="Facebook" target="_blank"><i class="fa facebook"></i></a>
<a href="https://twitter.com/share?url={{ $url }}&text={{ $title }}" rel="me" title="Twitter" target="_blank"><i class="fa twitter"></i></a>
<a href="https://pinterest.com/pin/create/button/?url={{ $url }}&media={{ $image }}&description={{ $title }}" rel="me" title="Pinterest" target="_blank"><i class="fa pinterest"></i></a>
<a href="https://www.thefancy.com/fancyit?ItemURL={{ $url }}&Title={{ $title }}&Category={{ $category }}&ImageURL={{ $image }}" rel="me" title="Fancy" target="_blank"><i class="fa fancy"></i></a>
<a href="https://plus.google.com/share?url={{ $url }}" rel="me" title="Google Plus" target="_blank"><i class="fa google"></i></a>