maxandersen

--[[ 
    === 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

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

/*
  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');

jbutko

import React from 'react';
import {ScrollView, Text} from 'react-native';

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};

const MyCoolScrollViewComponent = ({enableSomeButton}) => (

bvaughn

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:

tegansnyder

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

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'}

sebmarkbage

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

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

DOM Performance

• 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.