Skip to content

Instantly share code, notes, and snippets.

@pangolingo
pangolingo / gist:165cfbc64343dc452bee205fbfff254e
Created March 29, 2024 21:37
Example of Supabase Auth in a Next.js app (Next v14) - validating a Supabase JWT sent in an Authorization header from an API client
import { createClient } from "@supabase/supabase-js";
import jwt from "jsonwebtoken";
import { headers } from "next/headers";
export const dynamic = "force-dynamic"; // defaults to auto
export async function GET(request: Request) {
// const authHeader = req.headers.get('Authorization')!
const headersList = headers();
const authHeader = headersList.get("Authorization") ?? "";
@pangolingo
pangolingo / ReactNativeInterpolation.js
Created March 14, 2018 16:52
An example of how to interpolate animation properties based on a base Animated.Value
let baselineAnimationValue = new Animated.Value(0);
let titleXPosition = new Animated.Value(0);
let titleOpacity = new Animated.Value(0);
// our baseline animation, going from 0 to 1
function runBaselineAnimation() {
Animated.timing(this.state.baselineAnimationValue, {
toValue: 1,
duration: 2000, // 2 seconds
}).start();
@pangolingo
pangolingo / opencv-hue-webcam.py
Last active August 18, 2019 03:37
Webcam Color Picker For Phillips Hue
import time
import cv2
import numpy as np
from sklearn.cluster import MiniBatchKMeans
from phue import Bridge
HUE_IS_ENABLED = False
if HUE_IS_ENABLED:
hue = Bridge('10.0.0.12')
@pangolingo
pangolingo / AnimatedPropAsNumberHOC.js
Created December 27, 2017 16:09
A React Native higher-order component that converts an animated value to a number
// @flow
import * as React from 'react';
import { Animated } from 'react-native';
type HOCProps = {
/**
* The distance that a ScrollView has been scrolled
*/
[key: string]: Animated.Value
}
@pangolingo
pangolingo / react-navigation-performance.md
Last active November 16, 2017 15:45 — forked from anonymous/react-navigation-performance.md
React Navigation Performance Thoughts
  • Like TabNavigator, StackNavigator keeps previous screens in the stack - it doesn't unmount/unrender them. Unmounting would cause previous screens to lose state, making them slower to load when you return to them. There is an active Github discussion about this, but no official solution yet.
  • Screens in the middle of the navigation stack will still re-render when props change. We may be able to do some work with shouldComponentUpdate on each screen to avoid re-rendering. Again, there's a long discussion on Github about fixing this.
  • When navigating to a screen you've already been to, the screen is mounted again (meaning two of the same screen are in the stack).
  • We can remove screens from the navigation stack using goBack or reset. goBack will pop the current screen off the stack and return to the previous screen. reset allows you to manually clear the stack and set the active screen. We should use goBack wherever possible, and look for places where we can reset the stack.
  • I'm not clear
@pangolingo
pangolingo / organizing.js
Created December 14, 2016 20:36
Organizing Javascript Talk
// WHERE TO PUT SCRIPT TAGS
<script src="whatever.js"></script>
</body>
<html>
// if they don't depend on the DOM or script load order, you can put them in the head with an "async attribute
<script src="whatever.js" async></script>
</head>