OliverJAsh

import * as React from 'react';

const useIsFirstRender = (): boolean => {
  const isFirst = React.useRef(true);

  if (isFirst.current) {
    isFirst.current = false;

    return true;
  } else {

na2hiro

Remix request cheatsheet

Navigates?	declarative?	Makes GET, triggers loader	Makes POST, triggers action	No requests
navigates	declarative	<Link to=""> <Form method="get">	<Form method="post">	<Link to="#...">
navigates	imperative	navigate() setSearchParams()	submit()	navigate("#")
stays	declarative	<fetcher.Form method="get">	<fetcher.Form method="post">	(doesn't make sense)
s

Aslemammad

// Consistent version of `useMutableSource`, Inspired by https://github.com/pmndrs/valtio/blob/master/src/useMutableSource.ts
import { useEffect, useRef, useState } from 'react';

const TARGET = Symbol('target');
const GET_VERSION = Symbol('getVersion');

export type Source<TargetType extends any, VersionType extends any> = {
	[TARGET]: TargetType;
	[GET_VERSION]: (target: TargetType) => VersionType;
};

taniarascia

Authentication in Real-World Web Apps with JavaScript

Outline of ideas, concepts to cover, potential projects to write.

Setup Idea

• Book with a video for each chapter.

Prerequisites/Overview

rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

developit

finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.

Useful for browsers that support Promise but not the .finally() method.

Usage

npm install finally-polyfill

scottdejonge

UI Examples

• Shopify
• Stripe
• Help Scout
• ZEIT
• Netlify
• Baremetrics
• DigitalOcean
• AirBnb

ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

mikowl

// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

//  Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]

// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);

matthewp

function decorate(tag, template) {
  customElements.define(tag, class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }
    
    connectedCallback() {
      let root = this.shadowRoot;
      if(!root.firstChild) {