Skip to content

Instantly share code, notes, and snippets.

Avatar
😴
eyelids heavy, moms spaghetti

Christopher Lis christopher4lis

😴
eyelids heavy, moms spaghetti
View GitHub Profile
@christopher4lis
christopher4lis / index.js
Last active Jul 28, 2020
Contents of /server directory scaffolded by older versions of create-nuxt-app
View index.js
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'
async function start() {
View FadeInOut.vue
<template>
<Transition
name="fade-translate"
mode="out-in"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<slot />
View ScaleIn.vue
<template>
<Transition
:css="false"
name="scale-in"
mode="out-in"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<slot />
View Hero.vue
<template>
<section class="banner-section mb-16 lg:mb-0 relative">
<div class="swiper-container">
<div class="swiper-wrapper relative">
<div class="banner-content swiper-slide">
<div
class=" w-full hero-img bg-cover relative pb-8 sm:pb-16 md:pb-32"
>
<div class="overlay blue-overlay" />
<div
@christopher4lis
christopher4lis / util-elastic-collision.js
Last active Oct 9, 2021
A set of utility functions used to reproduce the effect of elastic collision within HTML5 canvas. Used in the Chris Courses tutorial video on collision detection: https://www.youtube.com/watch?v=789weryntzM
View util-elastic-collision.js
/**
* Rotates coordinate system for velocities
*
* Takes velocities and alters them as if the coordinate system they're on was rotated
*
* @param Object | velocity | The velocity of an individual particle
* @param Float | angle | The angle of collision between two objects in radians
* @return Object | The altered x and y velocities after the coordinate system has been rotated
*/
@christopher4lis
christopher4lis / browser-sync-config.js
Last active Mar 14, 2021
Webpack Dev Server + Browser Sync Config
View browser-sync-config.js
new BrowserSyncPlugin({
host: 'localhost',
port: 3001,
proxy: 'http://localhost:8081/',
files: [{
match: [
'**/*.hbs'
],
fn: function(event, file) {
if (event === "change") {
@christopher4lis
christopher4lis / restrict-route-access-middleware.js
Created Jun 22, 2017
Used to restrict access to particular pages in combination with Passport.js
View restrict-route-access-middleware.js
function authenticationMiddleware () {
return (req, res, next) => {
console.log(`req.session.passport.user: ${JSON.stringify(req.session.passport)}`);
if (req.isAuthenticated()) return next();
res.redirect('/login')
}
}
@christopher4lis
christopher4lis / hot-reload-extracted-stylesheets
Created Jun 10, 2017
This snippet allows webpack-dev-server to hot reload stylesheets extracted with the ExtractTextWebpackPlugin
View hot-reload-extracted-stylesheets
if (module.hot) {
const hotEmitter = require("webpack/hot/emitter");
const DEAD_CSS_TIMEOUT = 2000;
hotEmitter.on("webpackHotUpdate", function(currentHash) {
document.querySelectorAll("link[href][rel=stylesheet]").forEach((link) => {
const nextStyleHref = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`);
const newLink = link.cloneNode();
newLink.href = nextStyleHref;
@christopher4lis
christopher4lis / UsStatesArray.swift
Last active Oct 5, 2015
A Swift array of all 50 of the U.S. states, plus its territories.
View UsStatesArray.swift
let usStatesArray = [
"Alaska",
"Alabama",
"Arkansas",
"American Samoa",
"Arizona",
"California",
"Colorado",
"Connecticut",
"District of Columbia",