OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

mondaychen

对 React 团队工作经历的思考

今天在写2023的年终总结，再额外聊两句在 React Core team 的经历和反思吧，也算是正式画上句号了。

我在2022 年加入了 React，算是某种程度上实现了自己的梦想：加入这个在前端领域最有影响力的团队，真的很令人骄傲。可惜加入没多久，公司就开始 hire freeze，我在的 Dev Tooling 组原先说好5个 headcount 变成了两个，工作量却一点也没少。开会讨论我们组要做什么的时候，来了二三十个人，提了五六十个想法，个个都说要做行业标杆。而现实是作为 DevTools 最主要载体的 Chrome 扩展 API 和几个 moible 工具都在不断更新，光跟进维护和解决 bug 都够忙的了。我觍着脸开口问谁能贡献一部分时间来帮我们做一个项目，人人都面露难色。 大家也能感受到，工程师们都很希望自己使用的工具能变好，但是这个东西在 Meta 这家公司里是真的排不上优先级。其实不只 React DevTools，整个 React 组都是如此。只有跟公司重视的 VR 有关系的项目才能得到资源。团队里一些想重点发展 web 方向的核心成员，即使是 Seb 和 Andrew 这种级别，也只能另谋出路，跳槽去了 Vercel。

为什么 React 在 Meta 得不到资源

我和不少同样做前端的朋友都有这样的困惑：React 在 Meta 到处都用，在业界也为 Meta 带来了巨大的名望，这么重要的项目，为什么不能多投入一点资源呢？

DavidWells

/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
  headers: {
    'User-Agent': 'xyz',
    'Authorization': `bearer ${token}`
  }
})

DavidWells

/* Using a JavaScript proxy for a super low code REST client */
// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
// also see https://github.com/fastify/manifetch
// also see https://github.com/flash-oss/allserver
// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

const createApi = (url) => {
  return new Proxy({}, {
    get(target, key) {

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.

steveruizok

import log from "ololog"

class Grid {
	rows = []
	width = 0
	height = 0

	chars = {
		active: ["┌", "─", "┒", "┃", "┛", "━", "┕", "│"],
		inactive: ["┌", "─", "┐", "│", "┘", "─", "└", "│"],

getify

What Hiring Should Look Like

This is definitely not the first time I've written about this topic, but I haven't written formally about it in quite awhile. So I want to revisit why I think technical-position interviewing is so poorly designed, and lay out what I think would be a better process.

I'm just one guy, with a bunch of strong opinions and a bunch of flaws. So take these suggestions with a grain of salt. I'm sure there's a lot of talented, passionate folks with other thoughts, and some are probably a lot more interesting and useful than my own.

But at the same time, I hope you'll set aside the assumptions and status quo of how interviewing is always done. Just because you were hired a certain way, and even if you liked it, doesn't mean that it's a good interview process to repeat.

If you're happy with the way technical interviewing currently works at your company, fine. Just stop, don't read any further. I'm not going to spend any effort trying to convince you otherwise.

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

moskytw

(function () {

const intervalMiliseconds = 10;
const waitToLoadMiliseconds = 1000;

const getUnsaveA = () => document.querySelector('.uiContextualLayerPositioner:not(.hidden_elem) li:last-child a');
const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);

const unsaveAndLoad = (recursive) => {

KyleAMathews

import React from "react"
import { render, Static, Box, Color, Text } from "ink"
import BigText from "ink-big-text"
import BBox from "ink-box"
import TextInput from "ink-text-input"
import { Tabs, Tab } from "ink-tab"
import _ from "lodash"

const purple = [102, 51, 153]
const hexPurple = `#663399`