Skip to content

Instantly share code, notes, and snippets.

Adrian Adkison trainiac

Block or report user

Report or block trainiac

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@trainiac
trainiac / useReveal.ts
Last active Jun 20, 2019
A React hook to assist in animating a component on mount and destroy.
View useReveal.ts
/*
When you want to add a component to the DOM and have it animate on mount
you have to give a little delay before changing the css to
trigger a css animation. Otherwise the css transition doesn't work.
When you want to remove a component from the DOM and have it animate before
being removed you have to wait until an animation is complete.
This gives you two pieces of state to make that easy.
*/
@trainiac
trainiac / MyRouteComponent.vue
Created Dec 18, 2018
An example of defining custom route hooks in a component.
View MyRouteComponent.vue
<script>
export default {
name: 'MyRouteComponent',
permissions(store, to, from) {
// request permissions data
// return a promise to resolve or reject navigation
},
criticalData(store, to, from) {
// request critical data
// return a promise so that data can finish loading during Server Request lifecycle
@trainiac
trainiac / clientEntry.js
Last active Dec 18, 2018
An example of using custom route hooks in a vue universal web application's client entrypoint.
View clientEntry.js
const store = createStore()
// data populated from server
store.replaceState(window.__INITIAL_STATE__)
const router = createRouter()
const routerReady = new Promise(resolve => {
router.onReady(resolve)
}).then(() => {
// onReady hook
@trainiac
trainiac / serverEntrypoint.js
Last active Dec 18, 2018
An example of using custom route hooks in vue universal web application's server entrypoint.
View serverEntrypoint.js
export default context => {
const store = createStore()
const router = createRouter()
const app = createApp(store, router)
return new Promise((resolve, reject) => {
router.onReady(resolve, reject)
router.push(context.url)
}).then(() => {
// onReady hook
View stylelint.config.js
module.exports = {
extends: ['stylelint-config-recommended-scss', 'stylelint-config-prettier'],
processors: ['stylelint-processor-html'],
plugins: ['stylelint-no-unsupported-browser-features'],
quiet: false,
rules: {
'no-invalid-double-slash-comments': null,
'no-empty-source': null,
'property-no-unknown': true,
'color-no-invalid-hex': true,
View .eslintrc.js
/* eslint-disable no-magic-numbers */
// Add eslint-plugin-prettier once merged https://github.com/prettier/eslint-plugin-prettier/pull/70
module.exports = {
extends: ['standard', 'prettier', 'plugin:vue/recommended'],
plugins: ['compat'] /*, 'prettier' */,
globals: {
process: true,
},
View errorListeners.js
import Vue from 'vue'
import { some } from 'utils/arr'
const harmlessMessages = [
// Facebook throws error that doesn't matter to us
'https://staticxx.facebook.com',
// Chrome from autocomplete bug.
'__gCrWeb.autofill.extractForms',
]
You can’t perform that action at this time.