Skip to content

Instantly share code, notes, and snippets.

@YurkaninRyan
YurkaninRyan / useClickOutside.js
Created July 10, 2019 12:48
useClickOutside
import React from "react";
export default function useClickOutside(onClickOutside, exempt = []) {
const container = React.useRef(null);
const mouseDownTargetIsOutside = React.useRef(false);
React.useEffect(() => {
/* if the click event doesnt start outside of the element then we want to ignore it */
/* imagine if someone clicked while swiping the cursor, if it started inside, then they probably */
/* wouldn't expect mouseup to fire like it was outside */
@victorbruce
victorbruce / Firebase.md
Last active March 12, 2024 12:07
My journey with Firebase so far. Cheatsheet to serve as a quick reference when developing firebase applications

Firebase

Set up firebase and Deploy

  • Head over to firebase. Sign in and create a project.

  • Copy your project settings under Firebase SDK snippet into your local project (ie your project's api key, auth domain, databaseURL, etc)

  • Create a file (firebase.js or config.js Any name that suits you is fine)

@YurkaninRyan
YurkaninRyan / welcome-to-the-wild-west.html
Created February 1, 2018 20:58
Why am I a developer again?
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta name=Title content="">
<meta name=Keywords content="">
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Word.Document>
@codediodeio
codediodeio / index.js
Created September 13, 2017 00:21
Integrate Twilio with Firebase Cloud Functions
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
const twilio = require('twilio');
const accountSid = functions.config().twilio.sid
const authToken = functions.config().twilio.token
const client = new twilio(accountSid, authToken);
@manigandham
manigandham / rich-text-html-editors.md
Last active March 13, 2024 23:51
Rich text / HTML editors and frameworks

Strictly Frameworks

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

@moos
moos / mousetrap.numbers.js
Last active December 10, 2021 23:03
Number sequence handler for Mousetrap
/**
* Mousetrap numbers plugin -- add support for 'number' and 'numbers' keywords
*
* Usage:
*
* Mousetrap.bind('number', callback) - handle any single number
*
* Mousetrap.bind('numbers', callback) - handle a sequence of 1+ numbers
*
* // pre sequence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.