justinwoo

Reposted from Qiita

For almost a year now, I've been using this "flux" architecture to organize my React applications and to work on other people's projects, and its popularity has grown quite a lot, to the point where it shows up on job listings for React and a lot of people get confused about what it is.

Why I'm tired of using and teaching flux

There are a billion explainations on the internet, so I'll skip explaining the parts. Instead, let's cut to the chase -- the main parts I hate about flux are the Dispatcher and the Store's own updating mechanism.

If you use a setup similar to the examples in facebook/flux, and you use flux.Dispatcher, you probably have this kind of flow:

jed

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 Jed Schmidt <http://jed.is>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

mmrko

// setup.js
import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  preprocessCss: data => sass.renderSync({ data }).css
})

shilman

NOTE: This was written in 2020 and has been superseded by docs at storybook.js.org

Storybook React props handling for Typescript

We've flip-flopped on prop table handling for React components written in Typescript. This document attempts to be a final reference for anybody who's been trying to follow along.

TLDR:

SB6 uses react-docgen-typescript by default. We hope to use react-docgen in SB7. The whole experience led to zero-config in SB6, so it's now a one-line change main.js to switch between the two.

jaens

/* eslint-disable react-refresh/only-export-components */
import {
    createMemoryHistory,
    createRootRoute,
    createRoute,
    createRouter,
    useRouterState,
    type NotFoundRouteProps,
} from "@tanstack/react-router";
import { createContext, useContext, type ReactNode } from "react";

isaacs

// See comments below.

// This code sample and justification brought to you by
// Isaac Z. Schlueter, aka isaacs

// standard style
var a = "ape",
  b = "bat",
  c = "cat",
  d = "dog",

adripo

;===== Change filament G-code without AMS ===
;===== version: 1.2 =========================
;===== original version date: 20230719 ======

;===== description ==========================
; Everything between M620 and M621 is executed only if AMS is connected.
; All M620, M620.x and M621 commands are removed to enable manual filament change.

; first filament change is skipped
{if toolchange_count > 1}

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

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

piscisaureus

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this: