Cool Bits
-
Last week’s React Native release also gave us the first stable version of the React Native DevTools. Still no word on how long until we get RN 1.0, but let’s check back in another 6.5 years.
-
If you’ve ever thought to yourself, “why tf is this rendering?” – The Interactive Guide to Rendering in React is probably for you.
-
Adam Argyle wrote a Halloween-themed article about headless, boneless, skinless, & lifeless UI. Because sometimes it’s fun to let the dark thoughts win.
-
Tests are dead – because Meticulous is a new tool that creates and maintains a continuously evolving e2e UI test suite for you, with zero effort and zero flakes. Companies like Lattice and Bilt Rewards are already using it for all their frontend testing, and it looks pretty game-changing. [sponsored]
-
The Next.js team created this quick recap of Next Conf, in case you were also banned from attending unable to make it.
-
Wasmer just released v5.0 of its fast and secure Wasm runtime that now has iOS support and experimental support for V8 and other backends.
-
austinoaq created this single Vanilla JavaScript file that shows the basic principles of how React, Vue, and Angular work.
-
CarbonQA gives your team high-quality QA services that scale, with US-based testers who work directly alongside you in your tools (Slack, GitHub, Jira, Asana, etc.). They’ll break your app repeatedly and find all the errors for you, so your devs can just focus on being devs. [sponsored]
-
Adam Wolf wrote a visual blog post about rendering outlines with a post-processing shader.
-
Ahmad Shadeed wrote an article that dares to ask, Should masonry be part of CSS grid? That’s almost as controversial as my take that Linus should’ve just gone trick-or-treating with all his friends in Charlie Brown and The Great Pumpkin, instead of spending all night alone in a pumpkin patch waiting for pumpkin-Santa to bring him stuff.
Pop Quiz: Answer
Sponsored by query.gg
How would you remove the duplicate elements from this array?
const list = [
{ name: 'John' },
{ name: 'Sara' },
{ name: 'Sara' },
{ name: 'Lynn' },
{ name: 'Jake' }
];
There are a few ways to do this. Your first intuition might be to do something like this.
const uniqueList = Array.from(new Set(list))
It’s the right idea since creating a Set will ensure our collection only contains unique values and Array.from allows us to create a new, shallow-copied array. Unfortunately, Sets only enforce uniqueness for primitive values, but our list is full of objects.
Instead, we can do something like this.
const map = new Map();
list.forEach(item => {
map.set(item.name, item)
});
const uniqueList = Array.from(map.values())
Notice we’re using a Map here. Since Map’s preserve insertion order, our uniqueList will have the same order as the original list, but without the duplicates since we’re using name as the key.
Another fancy approach is using filter with findIndex,
const uniqueList = list.filter((item, index) =>
list.findIndex(({name}) =>
name === item.name
) === index
);
Or using .reduce and .map,
const uniqueList = Object.keys(
list.reduce((acc, cur) => {
acc[cur.name] = cur.name;
return acc;
}, {}),
).map((name) => ({ name }));
Or one of the other various ways that I’m sure you’ll all let me know about 🫶.
Want us to write about your company?
Built with ❤️ by uidotdev
50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101
酷点
-
上周的 React Native 版本还为我们提供了 [React Native DevTools 的第一个稳定版本](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/dphehmu0le3r07sm/aHR0cHM6Ly9yZWFjdG5hdGl2ZS5kZXYvYmxvZy8yMDI0LzEw LzIzL3JlbGVhc2UtMC43Ni1uZXctYXJjaGl0ZWN0dXJlI3JlYWN0LW5hdGl2ZS1kZXZ0b29scw==）。仍然没有关于我们需要多长时间才能获得 RN 1.0 的消息，但让我们再过 6.5 年再回顾一下。
-
如果您曾经想过，“为什么要这样渲染？” – React 渲染交互式指南可能适合您。
-
Adam Argyle 写了一篇关于 [headless、boneless、skinless 和 lifeless UI] 的万圣节主题文章(https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/9qhzhdupod7npob9/aHR0cHM6Ly9uZXJkeS5kZXYvaGVhZGxlc3MtYm9uZWxlc3MtY W5kLXNraW5sZXNzLXVp)。因为有时候让黑暗的想法获胜很有趣。
-
[测试已死](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/3ohphdu7e3wv7pfr/aHR0cHM6Ly9tZXRpY3Vsb3VzLmFpP3V0bV9jYW1wYWlnbj1ub3ZlbWJlcl8xJnV0bV 9zb3VyY2U9Ynl0ZXNfbmV3c2xldHRlcg==) – 因为 Meticulous 是一款新工具，可以为您创建和维护不断发展的 e2e UI 测试套件，零努力和零碎片。 Lattice 和 Bilt Rewards 等公司已经在所有前端测试中使用它，而且它看起来相当改变游戏规则。 [赞助]
-
Next.js 团队创建了 [Next Conf 的快速回顾](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/48hvh7ur4mokr3ax/aHR0cHM6Ly92ZXJjZWwuY29tL2Jsb2cvcmVjYXAtbmV4dC1qcy1jb25mLTI wMjQ=)，万一你也被禁止参加而无法参加。
-
Wasmer刚刚发布v5.0快速且安全的 Wasm 运行时，现在具有 iOS 支持以及对 V8 和其他后端的实验性支持。
-
austinoaq 创建了这个[单个 Vanilla JavaScript 文件](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/reh8h9u0gm8nm9h2/aHR0cHM6Ly9naXN0LmdpdGh1Yi5jb20vZmF1c3Rpbm9hcS9iMTlkYT c1OGZjNDUxNTVhMGIzYjEwZDlmNTc4YzVjZQ==），展示了 React、Vue 和 Angular 工作原理的基本原理。
-
CarbonQA 为您的团队提供[可扩展的高质量 QA 服务](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/8ghqh3ulmo4ko2bk/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2Jp dHMmdXRtX2NvbnRlbnQ9bm92MSZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZXM=)，以及在您的工具中直接与您一起工作的美国测试人员 ( Slack、GitHub、Jira、Asana 等）。他们会反复破坏您的应用程序并为您找到所有错误，因此您的开发人员可以专注于开发人员。 [赞助]
-
Adam Wolf 撰写了一篇关于[使用后处理着色器渲染轮廓]的视觉博客文章(https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/l2heh6u38lgwlvt6/aHR0cHM6Ly93d3cuYXRvbXdvbGYub3JnL3Bvc3RzL3JlbmRlcm luZy1vdXRsaW5lcy13aXRoLWEtcG9zdC1wcm9jZXNzaW5nLXNoYWRlci8=)。
-
Ahmad Shadeed 写了一篇文章，敢问，[砖石应该成为 CSS 网格的一部分吗？](https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/m2h7h6u8d3rw37bm/aHR0cHM6Ly9pc2hhZGVlZC5jb20vYXJ0aWNsZS9j c3MtZ3JpZC1tYXNvbnJ5Lw==）这几乎和我的看法一样有争议莱纳斯应该在《查理·布朗和大南瓜》中和他所有的朋友一起玩“不给糖就捣蛋”的游戏，而不是独自在南瓜地里整夜等待南瓜圣诞老人给他带来东西。
小测验：答案
由 query.gg 赞助
如何从该数组中删除重复元素？
const list = [
{ name: 'John' },
{ name: 'Sara' },
{ name: 'Sara' },
{ name: 'Lynn' },
{ name: 'Jake' }
];
有几种方法可以做到这一点。您的第一直觉可能是做这样的事情。
const uniqueList = Array.from(new Set(list))
这是正确的想法，因为创建“Set”将确保我们的集合仅包含唯一值，而“Array.from”允许我们创建一个新的浅复制数组。不幸的是，“集合”仅强制原始值的唯一性，但我们的列表充满了对象。
相反，我们可以做这样的事情。
const map = new Map();
list.forEach(item => {
map.set(item.name, item)
});
const uniqueList = Array.from(map.values())
请注意，我们在这里使用“Map”。由于“Map”保留插入顺序，因此我们的“uniqueList”将具有与原始列表相同的顺序，但没有重复项，因为我们使用“name”作为键。
另一种奇特的方法是将“filter”与“findIndex”一起使用，
const uniqueList = list.filter((item, index) =>
list.findIndex(({name}) =>
name === item.name
) === index
);
或者使用.reduce和.map，
const uniqueList = Object.keys(
list.reduce((acc, cur) => {
acc[cur.name] = cur.name;
return acc;
}, {}),
).map((name) => ({ name }));
或者我相信你们都会让我知道的其他各种方式之一。
希望我们写一下您的公司吗？
由 [uidotdev] 使用 ❤️ 构建（https://click.convertkit-mail4.com/xmurv9rn37i6hrmvpq2hgu29erlllsn/7qh7h2uor9g39oiz/aHR0cHM6Ly91aS5kZXY=）
50 W Broadway Ste 333 PMB 51647 盐湖城，犹他州 84101
发布者