velzie

How to keep using adblockers on chrome and chromium

1. google's manifest v3 has no analouge to the webRequestBlocking API, which is neccesary for (effective) adblockers to work
2. starting in chrome version 127, the transition to mv3 will start cutting off the use of mv2 extensions alltogether
3. this will inevitably piss of enterprises when their extensions don't work, so the ExtensionManifestV2Availability key was added and will presumably stay forever after enterprises complain enough

You can use this as a regular user, which will let you keep your mv2 extensions even after they're supposed to stop working

Linux

In a terminal, run:

arkatsy

import { useSyncExternalStore } from "react";
// For more on the useSyncExternalStore hook, see https://react.dev/reference/react/useSyncExternalStore

// The code is almost identical to the source code of zustand, without types and some features stripped out.
// Check the links to see the references in the source code.
// The links are referencing the v5 of the library. If you plan on reading the source code yourself v5 is the best way to start. 
// The current v4 version contains lot of deprecated code and extra stuff that makes it hard to reason about if you're new to this.

// https://github.com/pmndrs/zustand/blob/fe47d3e6c6671dbfb9856fda52cb5a3a855d97a6/src/vanilla.ts#L57-L94
function createStore(createState) {

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.

jamiebuilds

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

mjackson

import React from "react";

export type ColorScheme = "light" | "dark";

export default function useColorSchemePreference(
  defaultColorScheme: ColorScheme = "light"
) {
  let darkQuery = "(prefers-color-scheme: dark)";
  let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
    typeof window === "object" && window.matchMedia

jordansinger

import SwiftUI
import PlaygroundSupport

struct iPod: View {
    var body: some View {
        VStack(spacing: 40) {
            Screen()
            ClickWheel()
            Spacer()
        }

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

jaredpalmer

import React from 'react';

class ReducerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  reducer = (state, action) => state;

  dispatch = action => this.setState(state => this.reducer(state, action));

whmountains

const SW_PRECACHE_CONFIG = './sw-precache-config'
const OUT_FILE = 'build/precache.appcache'

const glob = require('globby')
const { staticFileGlobs, stripPrefix } = require(SW_PRECACHE_CONFIG)
const fs = require('fs')
const path = require('path')

glob(staticFileGlobs).then(files => {
  // filter out directories

developit

tracked

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation