markerikson

// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
  someBoolean, // 1) Destructure values from `props` object
  someList,
}) {
  // 2) Declare state values
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

markerikson

[10:57 PM] acemarke: so, the canonical "bad perf for React+Redux" example is a todo list of 10,000 items
[10:58 PM] Sinistral: I always thought passing an object through was just a typical JS pointer
[10:58 PM] acemarke: the trivially obvious store shape is a single array of all 10K todo objects
[10:58 PM] acemarke: with a single connected list component
[10:58 PM] Sinistral: eh, ignore me, finish
[10:59 PM] acemarke: the list's mapState retrieves the array, and the list component renders this.props.todos.map(todo => <TodoListItem todo={todo} /> )
[10:59 PM] acemarke: which works fine the first time around
[10:59 PM] acemarke: but if you edit, say, the "text" field in a single todo
[11:00 PM] acemarke: your reducer returns a new updated todo object inside of a new array reference, shallow-copied
[11:00 PM] Sinistral: You are re-drawing the enti...oh

rauchg

Minimum Viable Async with Node 6

With the release of Node 6.0.0, the surface of code that needs transpilation to use ES6 features has been reduced very dramatically.

This is what my current workflow looks like to set up a minimalistic and fast microservice using micro and async + await.

The promise

ryanspradlin

type BatchLoadFn<K, V> = (keys: Array<K>) => Promise<Array<V | Error>>;

type LoadAllFn<K, V> = () => Promise<Array<[K, V]>>;

type Options<K, V> = {
  batch?: boolean,
  cache?: boolean,
  cacheMap?: CacheMap<K, Promise<V>>,
  cacheKeyFn?: (key: any) => any
};

Azerothian

// Babel 2015 - ES6
// Convert a complex JS Object to GraphQL Query, should handle most use cases as of 21/01/2016
const o = {
  query: {
    fields: {
      complex: {
        aliasFor: "Products",
        processArgs: {
          coupon: (value) => {
            return `"${JSON.stringify(value).replace(/"/g, "\\\"")}"`; // passing json string as a argument

Chunlin-Li

Set vs Object

node version : v4.1.2
platform: Intel I7, 16G DDR3, Ubuntu x64

var theSet = new Set();
start = process.hrtime();
/***********************************/
for(let i = 0 ; i < N; i++ ) {

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

tresf

/*
 * The re-use of the ZPL syntax and US Shipping Label
 *    - Provided as education example
 *    - Re-released by open source community under fair use
 *    - Fair use per US Copyright Act of 1976, 17 U.S.C. § 107
 * The ZPL Printer Language
 *    - Copyright © 2014 ZIH Corp (zebra.com)
 * The JavaScript syntax (minus ZPL markdown)
 *    Copyright © 2015 QZ Industries, LLC (qz.io)
 *    Licence: LGPL 2.1

reohjs

// A Meteor CheatSheet for Iron-Router by Gentlenode.com (converted to JavaScript using http://js2.coffee)
// Original Gist: https://gist.github.com/LeCoupa/59738c28fdc9085b9212

var AdminController, PostsEditController;

meteor add iron: router

meteor update iron: router

// Iron Router > Configuration

LeCoupa

# A little Meteor CheatSheet about Iron-Router. (updated on a weekly basis)
# Check our Studio: https://gentlenode.com/


meteor add iron:router
meteor update iron:router


# Iron Router > Configuration