Skip to content

Instantly share code, notes, and snippets.

View AlanJenkinsVS's full-sized avatar

Alan Jenkins AlanJenkinsVS

View GitHub Profile
@AlanJenkinsVS
AlanJenkinsVS / competitions.json
Last active October 12, 2020 10:13
Competitions List endpoint with EssentialFields
{
"meta": {
"request_ref": "get.competitions.5f842b59dac02",
"num_notices": 0,
"num_data_lines": 3,
"num_warnings": 0,
"num_errors": 0,
"time_taken": 0.30497,
"org_id": 1
},
const OFF = 0;
const WARN = 1;
const ERROR = 2;
module.exports = {
root: true,
env: {
browser :true,
es6: true
<!--
Pagination for product listing
Expects array of objects from endpoint:
{
"items": {
"pages": [{
"value": 1,
"text": "1",
"selected": true
<!--
Switch client-side view from 3 to 4 column grid
-->
<!-- Start Grid Size -->
<amp-bind-macro
id="activeButtonStyle"
arguments="attr, val"
expression="filtering[attr] == val ? 'p-1 border bg-black text-white cursor-pointer' : 'p-1 border cursor-pointer'"></amp-bind-macro>
@AlanJenkinsVS
AlanJenkinsVS / results_per_page.amp.html
Created November 29, 2018 11:07
Using AMP to display a dropdown showing options for Results per Page
<!--
Expect back-end src to respond with a results_per_page array of objects
{
"items": {
"results_per_page" :[{
"value": "10",
"text": "10",
"selected": true
},{
@AlanJenkinsVS
AlanJenkinsVS / map.js
Created April 16, 2018 16:11
7. Rendering non-HTML - Vue JS Optimisation
const map = new mapboxgl.Map(/* ... */);
map.on('load', () => {
// Data
map.addSource(/* ... */);
// Layers
map.addLayer(/* ... */);
map.addLayer(/* ... */);
@AlanJenkinsVS
AlanJenkinsVS / App.vue
Created April 16, 2018 15:59
6. Single Root Components - Vue JS Optimisations
<template>
<ul>
<NavBarRoutes :routes="persistentNavRoutes />
<NavBarRoutes
v-if="loggedIn"
:routes="loggedInNavRoutes" />
<NavBarRoutes
v-else
@AlanJenkinsVS
AlanJenkinsVS / App.vue
Created April 16, 2018 15:50
5. Transparent Wrappers - Vue JS Optimisations
<script>
export default {
inheritAttrs: false
}
</script>
<BaseInput placeholders="What's your name" @focus="doSomething" />
@AlanJenkinsVS
AlanJenkinsVS / router_view.js
Created April 16, 2018 15:43
4. Cleaner Views - Vue JS Optimisation
/*
Add a key to router view. This tells Vue to re-render the view from scratch.
While this has negligibly worse performance from route to route it does simplify the
component as you no longer need to reset starting variables, etc within the component.
*/
<router-view :key="$route.fullPath"></router-path>
@AlanJenkinsVS
AlanJenkinsVS / index.js
Created April 16, 2018 15:24
3. Module Registration - Vue JS Optimisations
// Typical module registration attaches all modules immediately to the Vuex store
import auth from './modules/auth';
import posts from './modules/posts';
import comments from './modules/comments';
// ...
export default new Vuex.Store({
modules: {
auth,
posts,