stipsan

// Run these snippets from your DevTools console
const {default: createClient} = await import('https://unpkg.com/@sanity/client@esm/dist/sanityClient.browser.mjs')
const client = createClient({projectId: '81pocpw8', dataset: 'production'})

// Get all v3 ready plugins
await client.fetch(`*[studioVersion == 3 || defined(v3DistTag)].packageName`)

// Get v3 only, the listing never had a v2 version
await client.fetch(`*[studioVersion == 3 && studioV2Support == ""]`)

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

stordahl

import sanityClient from '@sanity/client';

type Client = {
  projectId: string,
  dataset: string,
  token: string,
  useCdn: boolean
}

// create instance of sanityClient

sibelius

jest.mock('ioredis', () => {
  const Redis = require('ioredis-mock');

  if (typeof Redis === 'object') {
    // the first mock is an ioredis shim because ioredis-mock depends on it
    // https://github.com/stipsan/ioredis-mock/blob/master/src/index.js#L101-L111
    return {
      Command: { _transformer: { argument: {}, reply: {} } },
    };
  }

riggaroo

name: Create Release Branch
on:
  workflow_dispatch:
    inputs:
      versionName:
        description: 'Name of version  (ie 5.5.0)'
        required: true
      versionCode:
        description: 'Version number (50500)'
        required: true

br3ndonland

Getting the Gist of GitHub Actions

Tutorial and tips for GitHub Actions workflows

Table of Contents

• Introduction
• Workflows and actions

stipsan

// Plan on making a react/web component that reuses the layout logic from the worklet to lay out and
// reoder a css columns top down layout to a ltr flow

// From https://github.com/GoogleChromeLabs/houdini-samples

registerLayout(
    'masonry',
    class {
        static get inputProperties() {
            return ['--padding', '--columns'];

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.

WebReflection

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

bvaughn

This API was removed in React 17

---

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.