Cool Bits
-
Have you ever wondered how React Query keeps its data in sync with the server? No…? Oh, well we wrote this wonderful piece on how that happens anyway.
-
Josh Goldberg wrote about why typed linting needs TypeScript today. For some reason, the last dinner party I went to wasn’t impressed when I spent 15 minutes monologuing on the same topic.
-
Cameron Pavey and Dan Moore wrote about how to avoid authentication system lock-in when using a third-party auth platform like FusionAuth. [sponsored]
-
Leerob made a free mini-course called Vim for React Developers. Guaranteed to finally earn you the respect of your peers, or your money back.
-
Nolan Lawson wrote about improving rendering performance with CSS content-visibility.
-
Everything in the WordPress ecosystem is totally normal and not on fire at all right now. Not.
-
Lindsay Piper wrote about how to optimize JavaScript bundle sizes using Codecov’s bundle analysis tool, so you can cut down your JS bloat for good. [sponsored]
-
Jim Nielsen wrote about sanding down your UI – which proves that there might be at least one thing I can teach the Home Depot workers that they don’t already know.
-
Ahmad Shadeed wrote an in-depth case study about how he redesigned his personal website.
-
Sunil Pai wrote an article called Partial prerendering for everyone with Cloudflare Workers. I just hope he makes good on this campaign promise once he gets elected President of PPR. Remember the little people like us who got you there, Sunil.
Pop Quiz: Answer
Sponsored by Snyk’s DevSecCon 2024
What gets logged?
const array = new Array(3).fill([])
array[0].push("bytes")
console.log(array) // [ ["bytes"], ["bytes"], ["bytes"] ]
The key to understanding this one is in knowing that arrays in JavaScript are reference values.
When you call .fill([]), what you’re really doing is “filling up” the array with three references to the same array. You can kind of think of it like this.
const reference = []
const array = new Array(3).fill(reference)
Where now, array has three elements and they’re all referencing the same reference array. Therefore, if you add an item to any of the three elements, since they all point to the same array, it’s as if you’re adding an item to all of them.
To get the same functionality without the referential weirdness, you can use Array.from.
const array = Array.from({ length: 3 }, () => []);
array[0].push("bytes"); // [ ["bytes"], [], [] ]
Want us to write about your company?
Built with ❤️ by uidotdev
50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101
酷点
-
你有没有想过 React Query 如何保持数据与服务器同步？不…？哦，好吧，我们写了这篇精彩的文章[这是如何发生的](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/l2heh6u3m5xm6kf6/aHR0cHM6Ly91aS5kZXYvYy9xdWVyeS9kYXRhLXN5bmNocm9uaXphdGlvbj9zPW J5dGVz）无论如何。
-
Josh Goldberg 写了一篇关于 [为什么今天类型化 linting 需要 TypeScript](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/m2h7h6u86k46motm/aHR0cHM6Ly93d3cuam9zaHVha2dvbGRiZXJnLmNvbS9ibG9nL3 doeS10eXBlZC1saW50aW5nLW5lZWRzLXR5cGVzY3JpcHQtdG9kyXkv)。出于某种原因，我上次参加的晚宴上我花了 15 分钟就同一话题独白，但并没有给我留下深刻的印象。
-
Cameron Pavey 和 Dan Moore 写了关于[如何避免身份验证系统锁定](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/dphehmu09zp980cm/aHR0cHM6Ly9mdXNpb25hdXRoLmlvL2FydGljbGVzL2F1dGhlbn RpY2F0aW9uL2F2b2lkLWxvY2tpbj91dG1fY2FtcGFpZ249c2VwMjRfbmV3c2xldHRlciZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==) 使用第三方身份验证平台时[ FusionAuth](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/e0hph0u039r3q7s8/aHR0cHM6Ly9mdXNpb25hdXRoLmlvLz91dG1fY2FtcGFpZ249c2VwMjRfbmV3c2xldHRlci Z1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==）。 [赞助]
-
Leerob 制作了一个名为 [Vim for React Developers](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/7qh7h2uo2vn2wwtz/aHR0cHM6Ly9naXRodWIuY29tL2xlZXJvYi92aW0tZm9yLXJlYWN0 LWRldnM=)。 保证最终为您赢得同行的尊重，或者退款。
-
Nolan Lawson 写了关于[通过 CSS 内容可见性提高渲染性能](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/owkhwurm3qmgobv/aHR0cHM6Ly9ub2xhbmxhd3Nvbi5jb20vMjAyNC8wOS8xOC9pbXByb3Z pbmctcmVuZGVyaW5nLXBlcmZvcm1hbmNlLXdpdGgtY3NzLWNvbnRlbnQtdmlzaWJpbGl0eS8=)。
-
WordPress生态系统中的一切都完全正常，目前根本没有着火。 [不](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/m2h7h6u86 k46motm/aHR0cHM6Ly93d3cuam9zaHVha2dvbGRiZXJnLmNvbS9ibG9nL3doeS10eXBlZC1saW50aW5nLW5 lZWRzLXR5cGVzY3JpcHQtdG9kYXkv)。
-
Lindsay Piper 写了关于[如何优化 JavaScript 包大小](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/z2hgh7u329l2p0hp/aHR0cHM6Ly9hYm91dC5jb2RlY292LmlvL2Jsb2cvaW1wcm92ZS13ZWI tcGVyZm9ybWFuY2UtYnktb3B0aW1pemluZy1qYXZhc2NyaXB0LWJ1bmRsZS1zaXplcy8 _dXRtX2NhbXBhaWduPWNvZGVjb3YtZnkyNXEyLWJ1bmRsZWFuYWx5c2lzJnV0bV9jb25 0ZW50PW5ld3NsZXR0ZXItYnVuZGxlYmxvZy1yZWFkJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT10bGRy）使用 Codecov 的捆绑分析工具，这样你就可以永远减少 JS 膨胀。 [赞助]
-
Jim Nielsen 写了关于 [打磨你的 UI](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/p8hehquzwkqwgraq/aHR0cHM6Ly9ibG9nLmppbS1uaWVsc2VuLmNvbS8yMDI0L3NhbmRpbmctdWkv ）——这证明我至少可以教给家得宝员工一件事：他们还不知道。
-
Ahmad Shadeed 撰写了一篇关于[他如何重新设计个人网站]的深入案例研究(https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/x0hph3uwv8qv9ob5/aHR0cHM6Ly9pc2hhZGVlZC5jb20vYXJ0aWNsZS9yZWRlc2lnbi 0yMDI0Lw==)。
-
Sunil Pai 写了一篇文章，名为 [为每个人使用 Cloudflare Workers 进行部分预渲染](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/25h2h9u2prmp4pi3/aHR0cHM6Ly9zdW5pbHBhaS5kZXYvcG9zdHMvcHByLWZvci1ldmV yeW9uZS8 =）。我只希望他当选 PPR 主席后能够兑现竞选承诺。苏尼尔，请记住像我们这样把你带到这里的小人物。
小测验：答案
由 [Snyk 的 DevSecCon 2024] 赞助（https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/vqh3hmup92w9edsg/aHR0cHM6Ly90aGVhbmNob3Jncm91cC5zd29vZ28uY29tL2R ldnNly2Nvbi81OTU0NjQ1P3JlZj1ieXRlcy1hZHZlcnRpc2VyMiZ1dG1fY2FtcGFpZ249Z G1fchHAtYnl0ZXMtYWR2ZXJ0aXNlci0yNDA5MjZfMjQxMDA4X2RldnNly2NvbiZ1dG1fY29 udGVudD1ldmVudHNfMjQxMDA4X2RldnNlY2NvbiZ1dG1fbWVkaXVtPWVtLXBhJnV0bV9zb3VyY2U9Ynl0ZXMtYWR2ZXJ0aXNlcg==)
记录了什么？
const array = new Array(3).fill([])
array[0].push("bytes")
console.log(array) // [ ["bytes"], ["bytes"], ["bytes"] ]
理解这一点的关键是要知道JavaScript中的数组是[参考值](https://click.convertkit-mail4.com/75u9w592ens8hkxqrela9uw6mv966tn/g3hnhwu387q86qbr/aHR0cHM6Ly91aS5kZXYvcHJpbWl0aXZlLXZzLXJlZmVyZW5jZS12Y Wx1ZXMtaW4tamF2YXNjcmlwdA==）。
当你调用 .fill([]) 时，你真正做的是用三个对同一数组的引用“填充”数组。你可以这样想。
const reference = []
const array = new Array(3).fill(reference)
现在，“array”具有三个元素，它们都引用相同的“reference”数组。因此，如果您将一个项目添加到三个元素中的任何一个，因为它们都指向同一个数组，所以就好像您正在向所有元素添加一个项目。
要获得相同的功能而不会有奇怪的引用，您可以使用“Array.from”。
const array = Array.from({ length: 3 }, () => []);
array[0].push("bytes"); // [ ["bytes"], [], [] ]
希望我们写一下您的公司吗？
使用 ❤️ 构建，作者：uidotdev
50 W Broadway Ste 333 PMB 51647 盐湖城，犹他州 84101
发布者