首发 枫上雾棋的日志
前端动态
1、2019 前端工具调查结果
在 CSS 工具方面,Sass 仍然是最受欢迎的 CSS 处理器;大多数开发人员现在选择不在其项目中使用任何 CSS 框架;减少使用 CSS 并使用 CSS 命名方案 的开发人员的数量超过了未使用 CSS 的开发人员;CSS-in-JS 继续以稳定的速度增长。在 JavaScript 框架和库方面,React 依旧保持领先地位,Vue 紧随其后。结果中令人意外的是与 可访问性测试 相关的数字,有 63.13% 的受访者表示他们没有使用任何工具来对其项目进行可访问性测试。
2、来自 25 位 React 专家的经验,使你的工作效率提升
从 React 和 JavaScript 专家那里获取的关于如何提升效率的一些提示:为什么以及如何专注于 Vanilla React;Redux 并不是 React 的一部分;其实你不总是需要 React;拥抱 TypeScript;大佬使用的一些插件等。
3、Lifecycle methods,hooks,suspense:哪个更适合来请求数据
作者综合比较了 Lifecycle methods,hooks,suspense 三种方式在 React 中请求数据,分别列出了各自的优缺点,最终的结论是 suspense 更接近 React 的声明式。
4、谷歌推出新提案 Portals:Web 上的无缝跳转体验
想要了解新提案的 Portals API 是如何改善页面跳转用户体验的吗?本文将主要对 Portals 的具体内容、Portals 在 Chrome Canary 中的试用、Portals 的规范等几个方面进行详细讲解。如果你希望用户在浏览自家网站时,能够在不同页面跳转得更加流畅,不妨来读一读这篇文章。
5、尤雨溪谈 Vue.js:缔造自由与真我
尤雨溪回答了关于 Vue 的一系列问题,包括 Vue 的产生,Vue 的发展历程,Vue 的规划,以及一些个人经验的分享等。尤雨溪说,Vue 带给自己最大的收获就是 自由。
6、React + Typescript 工程化治理实践
本文是作者对一次 React + TypeScript 组件的工程化治理过程所做的总结,主要针对静态检查,开发体验和代码质量三个方面。
7、Lodash 源码中的那些迷人的细节
在 Lodash 中,函数的实现非常严谨、高效、兼容性强,以及具有一定的前瞻性,本文只拎出来一丁点儿细微的点,强力建议去撸源码。
8、迈向更快的网络
Chrome 的目标是让用户告别加载延迟,未来,Chrome 可能会在在用户界面中使用明显的徽章来标记加载缓慢的网站。Google 希望网站开发者提前做好准备,它推荐了一系列工具帮助开发者识别导致网站加载缓慢的因素,这些工具包括 PageSpeed Insights 和 Lighthouse,并推荐阅读 Web.dev/fast。
明星项目
1、react-interactive-paycard
有人看到 JavaScript Weekly 最近展示的 vue-interactive-paycard,认为我们也需要 React 版本。
2、react-adaptive-hooks
const MyComponent = () => {const { effectiveConnectionType} = useNetworkStatus();
let media;
switch (effectiveConnectionType) {
case "slow-2g":
media = <img src="..." alt="low resolution" />;
break;
case "2g":
media = <img src="..." alt="medium resolution" />;
break;
case "3g":
media = <img src="..." alt="high resolution" />;
break;
...
}
return <div>{media}</div>;
};
使用这些 hooks 和 utilities 可以帮你向用户提供最适合其设备和网络的出色体验。
本周热点
1、GitHub 将开源软件保存 1000 年:为了留给子孙后代
GitHub 宣布开放 Arctic Code Vault(“北极代码库”)的计划。为了把开源软件留给子孙后代,将在 2020 年 2 月 2 日为所有公共存储库生成快照,然后保存在北极一个地下 250 米的废弃煤矿。快照储存在胶片上,寿命高达 1000 年。
2、GitHub for mobile
GitHub 首次发布官方的手机客户端,iOS 用户可“尝鲜”,安卓版将稍后发布。目前还是 beta(公测版),可以通过 官方渠道 进行下载。
最后
问你一个简单的问题
var a = {n: 1};
a.x = a = {n: 2};
alert(a.x); // --> a.x 是什么