Skip to content

Instantly share code, notes, and snippets.

@maxandersen
maxandersen / init.lua
Created Aug 25, 2019 — forked from fmaiabatista/hs-text-expander.lua
HammerSpoon Text Expansion Feature
View init.lua
--[[
=== HammerText ===
Based on: https://github.com/Hammerspoon/hammerspoon/issues/1042
How to "install":
- Simply copy and paste this code in your "init.lua".
How to use:
- Add this init.lua to ~/.hammerspoon/Spoons/HammerText.spoon
- Add your hotstrings (abbreviations that get expanded) to the "keywords" list following the example format.
@gaearon
gaearon / uselayouteffect-ssr.md
Last active Jul 23, 2021
useLayoutEffect and server rendering
View uselayouteffect-ssr.md

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
@medeirosjoaquim
medeirosjoaquim / server.js
Created Mar 5, 2019 — forked from ryanoglesby08/server.js
A node.js SPA server that serves static files and an index.html file for all other routes.
View server.js
/*
Incredibly simple Node.js and Express application server for serving static assets.
Given as an example from the React Router documentation (along with examples
using nginx and Apache):
- https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory
*/
const express = require('express');
const path = require('path');
@bvaughn
bvaughn / React.unstable_Profiler.md
Last active Jun 24, 2021
Notes about the in-development React <Profiler> component
View React.unstable_Profiler.md

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:

View Preventing-Puppeteer-Detection.md

I’m looking for any tips or tricks for making chrome headless mode less detectable. Here is what I’ve done so far:

Set my args as follows:

const run = (async () => {

    const args = [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-infobars',
@pablen
pablen / PubSub.js
Created Jan 13, 2018
React PubSub pattern
View PubSub.js
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
class App extends Component {
state = { show: true };
render() {
return (
<div className="App">
<button onClick={() => this.setState(state => ({ show: !state.show }))}>
{this.state.show ? 'Hide panel' : 'Show panel'}
View Infrastructure.js
let cache = new Map();
let pending = new Map();
function fetchTextSync(url) {
if (cache.has(url)) {
return cache.get(url);
}
if (pending.has(url)) {
throw pending.get(url);
}
@kitze
kitze / conditionalwrap.js
Created Oct 25, 2017
one-line React component for conditionally wrapping children
View conditionalwrap.js
import React from 'react';
const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;
const Header = ({shouldLinkToHome}) => (
<div>
<ConditionalWrap
condition={shouldLinkToHome}
wrap={children => <a href="/">{children}</a>}
>
@faressoft
faressoft / dom_performance_reflow_repaint.md
Last active Jul 21, 2021
DOM Performance (Reflow & Repaint) (Summary)
View dom_performance_reflow_repaint.md

DOM Performance

Rendering

  • How the browser renders the document
    • Receives the data (bytes) from the server.
    • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
    • Turns tokens into nodes.
    • Turns nodes into the DOM tree.
    • Builds CSSOM tree from the css rules.
@janit
janit / sw.js
Last active Oct 31, 2019
Service Worker example for controlling what is cached - See https://malloc.fi/fix-duplicate-redirects-service-worker-caching
View sw.js
self.addEventListener('install', function (event) {
event.waitUntil(preLoad());
});
var preLoad = function () {
// console.log('[PWA Builder] Install Event processing');
return caches.open('pwabuilder-offline').then(function (cache) {
// console.log('[PWA Builder] Cached index and offline page during Install');
return cache.addAll(['/offline.html', '/']);
});