mjackson

Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren

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

datchley

/**
 * Primary application logic for our Functional Programming blog example
 * See related blog series at: http://www.datchley.name/tag/functional-programming/
 * Version: 2.0
 */
 
// A simple, resuable comparison for '>='
function greaterThanOrEqual(a, b) {
  return a >= b
}

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

cowboy

document.write = (function(write){
  var override = function() {
    if(document.readyState !== "loading") { // document has finished loading - we want to intercept this call to document.write
      if (window.ueLogError) {
        try {
          throw new Error("`document.write` called after page load on the gateway.");
        }
        catch(e) {
          ueLogError(e, { logLevel : 'ERROR', attribution: 'gw-third-party-js' });
        }

razwan

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

WebReflection

var SCROLLBAR_SIZE = SCROLLBAR_SIZE || function(d){
  var
    e = d.documentElement,
    p = d.createElement('p'),
    r
  ;
  p.style.cssText = [
    ';position:absolute',
    ';margin:0',
    ';padding:0',

h3h

https://github.com/[yourname]

Ambition

[Describe ambitions: type of work, attributes of team, what you want to learn & teach]

Experience

[in reverse chronological order, list at most 5 positions or 10 years back, whichever is fewer]

potfur

window.S = function(s) {
    return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName'}[s[0]]
        || 'querySelectorAll'](s.slice(1))
};

// [S('#header'), S('.container'), S('?div')]