tannerlinsley

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

bvaughn

Pre-rendering virtual rows

Example list with ten total rows and a viewport large enough to display two rows.

Legend

█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)

danielkcz

function useFormik(props) {
  // useState to keep the same observable around without recreating it on each render
  const [formik] = React.useState(() =>
    mobx.observable({
      values: props.initialValues || {},
      touched: {}
    })
  )

  // just mutate state, this function itself can be considered an action+reducer 

bvaughn

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

Manouchehri

https://rfc3161.ai.moda
https://rfc3161.ai.moda/adobe
https://rfc3161.ai.moda/microsoft
https://rfc3161.ai.moda/apple
https://rfc3161.ai.moda/any
http://rfc3161.ai.moda
http://timestamp.digicert.com
http://timestamp.globalsign.com/tsa/r6advanced1
http://rfc3161timestamp.globalsign.com/advanced
http://timestamp.sectigo.com

sammylupt

var npm = require("npm");
var fs = require("fs-extra");
var chokidar = require("chokidar");

var packagePaths = [
  "../mobile-app/node_modules/shared-package/lib",
  "../web-app/node_modules/shared-package/lib",
];

var noop = () => {};

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

kristopolous

// Usage:
//   Copy and paste all of this into a debug console window of the "Who is Hiring?" comment thread 
//   then use as follows:
//
//   query(term | [term, term, ...], term | [term, term, ...], ...)
// 
// When arguments are in an array then that means an "or" and when they are seperate that means "and"
//
// Term is of the format:
//    ((-)text/RegExp)  ( '-' means negation )

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

cletusw

{
  // http://eslint.org/docs/rules/

  "ecmaFeatures": {
    "binaryLiterals": false,                    // enable binary literals
    "blockBindings": false,                     // enable let and const (aka block bindings)
    "defaultParams": false,                     // enable default function parameters
    "forOf": false,                             // enable for-of loops
    "generators": false,                        // enable generators
    "objectLiteralComputedProperties": false,   // enable computed object literal property names