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; // ¯\\_(ツ)_/¯

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.

chitchcock

Stevey's Google Platforms Rant

I was at Amazon for about six and a half years, and now I've been at Google for that long. One thing that struck me immediately about the two companies -- an impression that has been reinforced almost daily -- is that Amazon does everything wrong, and Google does everything right. Sure, it's a sweeping generalization, but a surprisingly accurate one. It's pretty crazy. There are probably a hundred or even two hundred different ways you can compare the two companies, and Google is superior in all but three of them, if I recall correctly. I actually did a spreadsheet at one point but Legal wouldn't let me show it to anyone, even though recruiting loved it.

I mean, just to give you a very brief taste: Amazon's recruiting process is fundamentally flawed by having teams hire for themselves, so their hiring bar is incredibly inconsistent across teams, despite various efforts they've made to level it out. And their operations are a mess; they don't real

SheldonWangRJT

This notes is written by Sheldon. You can find me with #iOSBySheldon in Github, Youtube, Facebook, etc.

Need

Convert .mov/.MP4 to .gif

Reason

As a developer, I feel better to upload a short video when I create the pull request to show other viewers what I did in this PR. I tried .mov format directly got after finishing recording screen using Quicktime, however, gif offers preview in most web pages, and has smaller file size.

This is not limited to developer, anyone has this need can use this method to convert the files.

gaearon

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

takien

/**
* Get YouTube ID from various YouTube URL
* @author: takien
* @url: http://takien.com
* For PHP YouTube parser, go here http://takien.com/864
*/

function YouTubeGetID(url){
  var ID = '';
  url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);

hrldcpr

One-line Tree in Python

Using Python's built-in defaultdict we can easily define a tree data structure:

def tree(): return defaultdict(tree)

That's it!

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

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 带来了巨大的名望，这么重要的项目，为什么不能多投入一点资源呢？

jimbojsb

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2: