Skip to content

Instantly share code, notes, and snippets.

View cvan's full-sized avatar
🚌
🌊

Christopher Van cvan

🚌
🌊
View GitHub Profile
@sir-dunxalot
sir-dunxalot / README.md
Last active August 22, 2022 12:17
An example of Cypress, Auth0, and Next.js authentication for a local Cypress test

Edit:

Since writing this gist, sir-dunxalot/cypress-nextjs-auth0 was released, which encapsulates this gist in a more user-friendly way. Try it out:

yarn add cypress-nextjs-auth0 --dev

This gist

@cvan
cvan / made-with-nextjs.md
Last active October 30, 2023 09:51
next.js production examples - sites in the wild open with open-source code
@stramel
stramel / server.js
Last active May 5, 2022 07:27
NX Next.js Custom Server
const express = require('express')
module.exports = async function customServer(app, settings, proxyConfig) {
const handle = app.getRequestHandler()
await app.prepare()
const server = express()
if (proxyConfig) {
const proxyMiddleware = require('http-proxy-middleware')
Object.keys(proxyConfig).forEach(context => {
@mogelbrod
mogelbrod / portal.js
Last active May 22, 2020 10:23
Non-bubbling React Portals
import PropTypes from 'prop-types'
import React from 'react'
import ReactDOM from 'react-dom'
function portalContainer() {
return document.getElementById('portal-container')
}
// Taken from https://reactjs.org/docs/events.html
@kawazoe
kawazoe / force-reload.js
Last active February 1, 2024 06:50
Auto refresh page on manifest.json change. iOS offline PWA hack to handle auto updates.
// ------------------------------------------- IMPORTANT -------------------------------------------
// This is a development file to be minified using https://javascript-minifier.com/ and inlined in
// the index.html file. This file is not compiled or processed by webpack so it should be treated as
// low-level precompiled es5-compatible javascript. The code here is not meant to be clean, it's
// meant to be as light and fast as possible since it runs in the head tag.
// HACK: This file a hack to ensure that home-screen apps on mobile devices gets refreshed when they
// start. It works by forcing a load of the service-worker.js file and use the precache-manifest
// file name as an application version, just like a desktop browser like chrome would do. When
// when it detects a change in the application version, it reloads the page and bypass the browser's
@ericlaw1979
ericlaw1979 / ShowSameSiteCookieInfo.js
Last active October 1, 2019 04:21
FiddlerScript function adds a SSCookie column to show the SameSite attribute for Set-Cookie response headers
public static BindUIColumn("SSCookie", 60, 5)
function FillSSCookieInfoColumn(oS: Session): String {
if (oS.state < SessionStates.ReadingResponse) return "";
if (!oS.ResponseHeaders.Exists("Set-Cookie")) return "";
var sbVals = new System.Text.StringBuilder();
for (var i=0; i<oS.ResponseHeaders.Count(); i++){
var thisHeader = oS.ResponseHeaders[i];
if (!StringExtensions.OICEquals(thisHeader.Name, "Set-Cookie")) continue;
if (!StringExtensions.OICContains(thisHeader.Value, "samesite")) { sbVals.Append("+ "); continue; }
@wybiral
wybiral / noscript-tracking.go
Last active September 11, 2023 08:53
Tracking cursor position in real-time with remote monitoring (without JavaScript)
// Tracking cursor position in real-time without JavaScript
// Demo: https://twitter.com/davywtf/status/1124146339259002881
package main
import (
"fmt"
"net/http"
"strings"
)
/*
* This script fetches all color styles from a Figma team/document.
*
* Dependencies:
*
* - node-fetch
*
* Due to a limitation in the Figma /styles endpoint, we need to use a
* document for actually using the colors in a color grid 🙄That's why
* we're both fetching from /styles and /files below.
@OliverJAsh
OliverJAsh / README.md
Last active February 24, 2022 05:26
Flexbox gutters

Flexbox gutters

Problem

  • We use flexbox for our layout.
  • We want to add horizontal and vertical gutters inbetween these items.
  • Items wrap according to contents (flex-wrap: wrap), therefore we can't decide when/where to apply gutters using breakpoints.

Solution

@hacknug
hacknug / tailwind.config.js
Created February 8, 2019 16:54
TailwindCSS default config
/*
Tailwind - The Utility-First CSS Framework
A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
Welcome to the Tailwind config file. This is where you can customize
Tailwind specifically for your project. Don't be intimidated by the
length of this file. It's really just a big JavaScript object and