Skip to content

Instantly share code, notes, and snippets.

@stevecastaneda
stevecastaneda / Example.tsx
Created July 16, 2020 00:49
A Tailwind-ready Modal using React Aria from Adobe
import React, { useState, useContext, useRef } from "react";
import { useOverlayTriggerState } from "@react-stately/overlays";
import { useButton } from "@react-aria/button";
import { Modal } from "components/overlays/Modal";
export function Example() {
let state = useOverlayTriggerState({});
function onOpen() {
state.open();
@finom
finom / Touchable.js
Last active December 16, 2020 17:09
[finom/react-native-touchable] A universal Touchable (React Native) which behaves like TouchableOpacity on iOS but like TouchableNativeFeedback on Android
import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';
import { createElement } from 'react';
// use TouchableNativeFeedback for android and TouchableOpacity for ios
// use TouchableOpacity with activeOpacity=1 for both platforms if disabled=true
const Touchable = ({
disabled,
onPress,
...props
}) => {
@madkoding
madkoding / pair-dual-boot-bluetooth.md
Last active April 19, 2025 08:14
Pairing bluetooth devices in dual boot with Linux Ubuntu and Windows 10/11

Pairing Bluetooth Devices in Dual Boot with Linux Ubuntu and Windows 10/11

Introduction

This guide provides updated instructions for pairing Bluetooth devices (such as keyboards or mice) in a dual-boot environment with Linux Ubuntu and Windows 10/11, incorporating community feedback and suggestions.

Instructions

1. Pair in Linux First

  • Pair your Bluetooth device in Linux. This is crucial to ensure the LinkKey remains consistent.
  • Note: Do not re-pair the device in Linux after completing the pairing in Windows.
@slikts
slikts / advanced-memo.md
Last active February 25, 2025 15:19
Advanced memoization and effects in React

nelabs.dev

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

  • Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
  • Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory
@diffficult
diffficult / bluetoothdoubledipping.md
Last active April 20, 2025 15:30
Bluetooth Pairing one device on Dual Boot of Windows & Linux - Stop having to Pair Devices

Bluetooth Pairing one device on Dual Boot of Windows & Linux - Stop having to Pair Devices

You may have experienced when dual booting that you need to re-pair your bluetooth devices (ie., Headphones, mouse, keyboard, etc) this usually happens because you have already paired the device with another operating system using the same bluetooth adapter when dual booting (either Linux or Windows).

Some devices cannot handle multiple pairings associated with the same MAC address (ie., bluetooth adapter). As per suggested on the ArchWiki you can fix this by re-pairing the device each time, but there's actually another solution to not do so each time you choose to use your device on a different OS.

How can we accomplish this?

Easy, just pair the device on a OS and copy the bluetooth keys generated to the other OS so our device doesn't notice the difference.

@ciiqr
ciiqr / dispatch.sh
Last active February 19, 2025 12:25
github actions, repository_dispatch with client_payload
# TODO: replace :token, :user, and :repo
curl -H "Authorization: token :token" \
-H 'Accept: application/vnd.github.everest-preview+json' \
"https://api.github.com/repos/:user/:repo/dispatches" \
-d '{"event_type": "awesomeness", "client_payload": {"foo": "bar"}}'

"Knowledge is powerful, be careful how you use it!"

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools, and more.

@bvaughn
bvaughn / React.unstable_Profiler.md
Last active May 21, 2024 11:40
Notes about the in-development React <Profiler> component

Profiler

React 16.4 will introduce a new Profiler component (initially exported as React.unstable_Profiler) for collecting render timing information in order to measure the "cost" of rendering for both sync and async modes.

Profiler timing metrics are significantly faster than those built around the User Timing API, and as such we plan to provide a production+profiling bundle in the future. (The initial release will only log timing information in DEV mode, although the component will still render its children- without timings- in production mode.)

How is it used?

Profiler can be declared anywhere within a React tree to measure the cost of rendering that portion of the tree. For example, a Navigation component and its descendants:

@sebmarkbage
sebmarkbage / The Rules.md
Last active April 12, 2025 17:55
The Rules of React

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.