Skip to content

Instantly share code, notes, and snippets.

View firstChairCoder's full-sized avatar
🔥
...

Joshua A. firstChairCoder

🔥
...
View GitHub Profile
@OrionReed
OrionReed / dom3d.js
Last active May 27, 2024 22:42
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
const SHOW_SIDES = false; // color sides of DOM nodes?
const COLOR_SURFACE = true; // color tops of DOM nodes?
const COLOR_RANDOM = false; // randomise color?
const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
const MAX_ROTATION = 180; // set to 360 to rotate all the way round
const THICKNESS = 20; // thickness of layers
const DISTANCE = 10000; // ¯\\_(ツ)_/¯
@smontlouis
smontlouis / SplitScreen.tsx
Created November 13, 2023 06:53
Amie in-app split screen in react-native
import { useWindowDimensions } from 'react-native'
import { Gesture } from 'react-native-gesture-handler'
import Animated, {
Extrapolation,
WithSpringConfig,
interpolate,
scrollTo,
useAnimatedRef,
useAnimatedScrollHandler,
useAnimatedStyle,
@shirakaba
shirakaba / Creating an Expo app in 2023.md
Created July 12, 2023 08:08
Creating an Expo app in 2023

Creating an Expo app in 2023

12th July, 2023. I'm going to try creating an iOS app called Paranovel, using Expo. My environment for mobile app dev (Xcode, Ruby, etc.) should be in reasonably good shape already as I frequently develop with React Native and NativeScript.

Creating the app

Go to https://docs.expo.dev, and see the Quick Start: npx create-expo-app paranovel

This runs with no problem, then I get this macOS system popup:

@RaphBlanchet
RaphBlanchet / SkewedBackground.tsx
Created January 24, 2023 20:40
React-Native Skewed Background using react-native-svg
type Props = {
targetSize: [number, number];
color?: string;
angle?: number;
style?: ViewStyle;
};
const SkewedBackground: React.FC<Props> = ({
targetSize,
color: _color,
@MarioMastr
MarioMastr / mactutorial.md
Last active April 28, 2024 12:29
A handy tutorial for building RSDKv5(U) and running Sonic Mania Plus or Sonic Origins on Mac (not featuring pictures).

WARNING: OUTDATED TUTORIAL. I will get around to updating this at some point, but for now I don't recommend following this tutorial to build the apps.

Seen all the tutorials for building RSDKv5(U) on Mac that you can muster but still haven't gotten it up and running yet? Well, I hope you can handle one more, because this will finally be the one to fix it! I can guarantee it because I was in your shoes and had to figure all this stuff out myself. This is a text tutorial for learning how to decompile RSDKv5(U) and run Sonic Mania Plus or Sonic Origins on your Mac.

How to build RSDKv5:

Step 1: Install Xcode and the command tools (the command tools can be installed by running this command: xcode-select --install but only after installing Xcode). If you already have them, move on to step 2.

@eveningkid
eveningkid / react-native-reanimated-drag-sort_apple-music.jsx
Last active March 18, 2024 02:16
React Native Reanimated 2 Multiple Drag and Sort: Apple Music Example
// Expo SDK40
// expo-blur: ~8.2.2
// expo-haptics: ~8.4.0
// react-native-gesture-handler: ~1.8.0
// react-native-reanimated: ^2.0.0-rc.0
// react-native-safe-area-context: 3.1.9
import React, { useState } from 'react';
import {
Image,
@mrousavy
mrousavy / useStyle.ts
Last active August 1, 2023 13:16
`useStyle` - a typed `useMemo` for styles which also includes style flattening and searching
import { DependencyList, useMemo } from "react";
import {
ImageStyle,
RegisteredStyle,
StyleProp,
StyleSheet,
TextStyle,
ViewStyle,
} from "react-native";
@mrousavy
mrousavy / MEMOIZE.md
Last active May 27, 2024 21:19
Memoize!!! 💾 - a react (native) performance guide
In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and  
returning the cached result when the same
inputs occur again.                                         
                                                     — wikipedia
@silvioramalho
silvioramalho / react-native-authentication.md
Last active December 28, 2023 04:10
Creating React Native Authentication

Creating React Native Authentication

Creating a complete authentication flow using context-api. (Step-by-step)

This flow can be replicated to React-JS (Web)

Creating App

npx react-native init reactNativeAuth --template react-native-template-typescript

@eleddie
eleddie / delayTiming.ts
Created April 18, 2020 12:16
Delay a timing function using React Native Reanimated
import Animated, { Easing } from 'react-native-reanimated';
const { and, cond, block, set, eq, neq, not, clockRunning, startClock, Clock, timing, stopClock, Value } = Animated;
type ResetParams = {
state: Animated.TimingState;
from?: Animated.Adaptable<number>;
to?: Animated.Adaptable<number>;
config: Animated.TimingConfig;
clock: Animated.Clock;