-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
- Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
- ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
- Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror
These use separate document structures instead of HTML, some are more modular libraries than full editors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 |
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.