Skip to content

Instantly share code, notes, and snippets.

View garronej's full-sized avatar
🧢
Bluehat

Joseph Garrone garronej

🧢
Bluehat
View GitHub Profile
@slikts
slikts / react-memo-children.md
Last active April 27, 2024 02:44
Why using the `children` prop makes `React.memo()` not work

nelabs.dev

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing
@josephm28
josephm28 / promise-load-css.js
Created March 13, 2019 21:22
Dynamically load CSS using JS, with a promise to know when the style has been loaded. Do it all in bulk
async loadCSSStyles(){
return new Promise((resolve, reject)=>{
const styleURLs = [...];
await Promise.all(styleURLs.map(async style => await fetchStyle(style)));
resolve();
})
})
const fetchStyle = (url) => {
//https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
return new Promise((resolve, reject) => {
@morajabi
morajabi / useRect.js
Created February 18, 2019 14:35
useRect — getBoundingClientRect() React Hook with resize handler
import { useLayoutEffect, useCallback, useState } from 'react'
export const useRect = (ref) => {
const [rect, setRect] = useState(getRect(ref ? ref.current : null))
const handleResize = useCallback(() => {
if (!ref.current) {
return
}
@nadavmatalon
nadavmatalon / .gitattributes
Created October 24, 2016 23:08
Github: Exclude Folder from Repo's Language Statistics
extras/* linguist-documentation
@drmalex07
drmalex07 / README-oneshot-systemd-service.md
Last active April 26, 2024 09:25
An example with an oneshot service on systemd. #systemd #systemd.service #oneshot

README

Services declared as oneshot are expected to take some action and exit immediatelly (thus, they are not really services, no running processes remain). A common pattern for these type of service is to be defined by a setup and a teardown action.

Let's create a example foo service that when started creates a file, and when stopped it deletes it.

Define setup/teardown actions

Create executable file /opt/foo/setup-foo.sh:

@parmentf
parmentf / GitCommitEmoji.md
Last active May 6, 2024 12:46
Git Commit message Emoji
@carcinocron
carcinocron / debugger pause beforeunload
Last active April 25, 2024 16:48
Chrome: pause before redirect
// Run this in the F12 javascript console in chrome
// if a redirect happens, the page will pause
// this helps because chrome's network tab's
// "preserve log" seems to technically preserve the log
// but you can't actually LOOK at it...
// also the "replay xhr" feature does not work after reload
// even if you "preserve log".
window.addEventListener("beforeunload", function() { debugger; }, false)
@myusuf3
myusuf3 / delete_git_submodule.md
Created November 3, 2014 17:36
How effectively delete a git submodule.

To remove a submodule you need to:

  • Delete the relevant section from the .gitmodules file.
  • Stage the .gitmodules changes git add .gitmodules
  • Delete the relevant section from .git/config.
  • Run git rm --cached path_to_submodule (no trailing slash).
  • Run rm -rf .git/modules/path_to_submodule (no trailing slash).
  • Commit git commit -m "Removed submodule "
  • Delete the now untracked submodule files rm -rf path_to_submodule
@kamikat
kamikat / trig.scss
Last active December 7, 2023 12:50
SCSS/SASS module calculating sin/cos/tan using Taylor Expansion.
///////////////////////////////////////////////////////////
// Plain SASS Trigonometry Algorithm in Taylor Expansion //
// //
// Based on //
// http://japborst.net/posts/sass-sines-and-cosines //
///////////////////////////////////////////////////////////
$pi: 3.14159265359;
$_precision: 10;
@mudge
mudge / eventemitter.js
Last active April 29, 2024 07:48
A very simple EventEmitter in pure JavaScript (suitable for both node.js and browsers).
/* Polyfill indexOf. */
var indexOf;
if (typeof Array.prototype.indexOf === 'function') {
indexOf = function (haystack, needle) {
return haystack.indexOf(needle);
};
} else {
indexOf = function (haystack, needle) {
var i = 0, length = haystack.length, idx = -1, found = false;