git技巧
git-tips想要添加您的建议吗？请查看contribute.md文件。
English |中文| Русский |俄罗斯한국어 | Tiếng Việt |日本语| नेपाली |波兰|阿尔斯
工具：
- git-tip - 一个方便的命令行工具，可充分利用这些技巧。（此处运行于 Docker 容器中）
PS：所有这些命令都已在 .上测试过git version 2.7.4 (Apple Git-66)。
每周摘要 16/2021
无尽的酸性重金属
网站
介绍
如何使用此库。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
欢迎阅读我的第16期每周简报，这也是四月份的最后一期。
本周精选内容包括我本周阅读的许多有趣且富有启发性的文章、视频、推文、播客和设计作品。
值得一读的精彩文章
我是如何建立我的博客的
深入了解本博客背后的技术栈！我们将看到 Josh 如何使用 Next 的 API 路由来实现点击量和点赞量计数器，如何使用 MDX 添加交互和自定义功能，以及他如何组织代码库等等。
如何记住 JavaScript
JavaScript 包含很多东西——很多不同的方法和实现方式。你如何记住它们呢？
CSS布局开发者工具 2021版
作为一名热爱 CSS 并几乎每天都使用 CSS 的人，开发者工具对我来说意义非凡。最近，Chen 注意到 Webkit 和 Chrome 团队都发布了关于与布局相关的开发者工具功能的更新信息。
最佳 Tailwind CSS 组件和模板合集
探索七个最佳免费 Tailwind 组件和模板集合，您可以利用它们快速构建自定义用户界面。
最佳 Tailwind CSS 组件和模板合集 - LogRocket 博客
如何真正测试用户界面
领先工程团队使用的测试技术
如何提升 CSS 性能
了解 CSS 导致的最常见的速度问题以及如何避免这些问题。
这周我看了几个很棒的视频。
使用 Jest Coverage 发现 JavaScript 代码中的测试薄弱环节
如果你曾经苦恼于该为你的代码编写哪些测试，Jest 的代码覆盖率报告可以成为一个强大的工具，它可以清晰地展示代码库中哪些部分尚未经过测试。当与持续集成 (CI) 结合使用时，它的功能会更加强大，因为它可以实现自动化，甚至可以阻止拉取请求合并，我们将在本视频中演示这一点。
吉米·克利夫兰
使用 Storybook 的 Chromatic 进行视觉回归测试
在构建设计系统或组件用户界面时，随着项目规模的扩大，发现视觉错误变得越来越困难。尤其当更改一个组件会影响到使用它的其他组件时，这种情况更为突出，因为测试人员不可能检查所有相关的组件。
视觉回归测试为此提供了一层额外的安全保障，而 Storybook 的 Chromatic 是我用过的最完善的视觉回归测试工具。那么，让我们创建一个新项目，来展示一下 Chromatic 的一些功能。
吉米·克利夫兰
如何在 React 中使用 TypeScript……但应该这样做吗？
学习如何使用 TypeScript 配置 React。比较在 React 项目中使用 TypeScript 的优缺点。
由火船
思考解决文本分割问题的方法
在今天的GUI挑战中，Adam Argyle将在节目播出后的前30分钟内回复大家的评论。欢迎在此与我们互动、提问或提交您自己的代码！
作者：亚当·阿盖尔
JavaScript 到底有多慢？JavaScript 与 C++ 的对比
JavaScript 真的那么慢吗？还是这只是过去时代的一种印象？
作者：西蒙
进行技术面试
在本期节目中，杰克和苏尔玛畅聊了网页开发岗位的面试，分享了他们作为求职者的成功与失败经历，以及作为面试官犯过的错误。内容涵盖面试准备、提问技巧、编程任务和候选人评价等。
有用的 GitHub 代码库
git技巧
最常用的 Git 使用技巧。
无尽的酸性重金属
一场人机算法技术狂欢
vitling / acid-banger
无尽的酸性重金属
无尽的酸性重金属
一场人机算法技术狂欢
使用 TypeScript 和 WebAudio API 构建。
在线版本请访问www.vitling.xyz/toys/acid-banger
支持
您可以通过在 GitHub 上赞助我或购买 我的音乐来支持我的工作。
许可及预期用途
这是一个艺术项目，而非音乐创作软件工具。我认为它已经完成，因此可能不会接受任何功能请求或以功能为导向的 PR。如果您有兴趣，欢迎 fork 这个项目并进行其他开发——我非常乐意看到更多基于此的创意作品。
本作品采用知识共享署名 4.0 国际许可协议进行许可。我知道这对于代码来说是一个不同寻常的选择，但这体现了它作为艺术项目的性质。我不是律师，所以我不确定这在法律上是否站得住脚，但在我看来……
transition.css
46 个预置的即插即用型 CSS 过渡效果
argyleink / transition.css
:octocat: 即插即用的 CSS 过渡
46 个预设转场效果！
在Codepen上动手实践，或预览所有 @ transition.style
基础知识
导入 CSS 并在某些 HTML 中设置属性：在 Codepen 上尝试一下
<link rel="stylesheet" href="https://unpkg.com/transition-style">
<div transition-style="in:wipe:up">
👍
</div>
安装
NPM
npm i transition-style- 从CSS导入
@import "transition-style";
- 或从JS导入
import 'transition-style';
CDN
https://unpkg.com/transition-style
单个类别组合
- 界
https://unpkg.com/transition-style/transition.circles.min.css - 正方形
https://unpkg.com/transition-style/transition.squares.min.css - 多边形
https://unpkg.com/transition-style/transition.polygons.min.css - 湿巾
https://unpkg.com/transition-style/transition.wipes.min.css
也从 NPM 导入分类包
import "transition-style/transition.circles.min.css"
👉 Hackpack
https://unpkg.com/transition-style/transition.hackpack.min.css
更多选项、更多控制、更小的导入空间：
仅导入自定义属性和基本样式：
- 编写自定义过渡组合
- 创建多段过渡
- 你可以使用类、CSS-in-JS 或其他任何方式来构建自己的架构！
.min.css自定义属性也随每个产品一起提供。
🔗 书签小程序
几乎可以在任何现有网站上尝试 transition.css ！只需复制以下代码，创建一个…
JSEncrypt
一个用于执行 OpenSSL RSA 加密、解密和密钥生成的 Javascript 库。
网站
http://travistidwell.com/jsencrypt
介绍
在互联网上寻找 RSA Javascript 加密的好解决方案时，你会发现很多库基本上都采用了 Tom Wu 在http://www-cs-students.stanford.edu/~tjw/jsbn/所做的出色工作，然后修改代码来实现他们想要的功能。
然而，我找不到的是一个简单的库封装器，它基本上完全不修改该库，但添加了一个封装器来解析使用 OpenSSL 生成的实际私钥和公钥对。
这个图书馆就是这些努力的成果。
如何使用此库。
这个库应该能与 OpenSSL 完美配合。接下来，我们将介绍如何使用这个库。
- 在终端（Unix操作系统）中输入以下命令。
openssl genrsa -out rsa_1024_priv.pem 1024
- 这将生成一个私钥，您可以通过执行以下操作查看该私钥……
cat rsa_1024_priv.pem
- 然后您可以将此内容复制并粘贴到私钥中……
运球投篮
侧边栏导航 Web 应用
作者：戈洛
手机银行 - 控制面板
作者：威尔丹·瓦里
图标
作者：扎伊布·阿里
Doku - 数字钱包应用程序
头像制作应用概念
作者：萨贾德·穆罕默迪·尼亚
推文
挑选的笔
可拉扯灯
作者：Jhey
按钮切换
作者：亚当·库恩
值得一听的播客
CSS播客：路径、形状、裁剪和遮罩
路径、形状、裁剪、遮罩，真是太棒了！CSS 形状的功能非常强大——从创建过渡效果到打造有趣且自然的排版布局，无所不能。在本期节目中，我们将深入探讨如何在 CSS 中处理形状效果。
容器查询
速递 - 容器查询在此
在本期“速览”节目中，Scott 和 Wes 将讨论 CSS 容器查询，包括它们是什么以及如何使用它们。
Matt Pinner - 亚马逊软件工程师
Matt 和 David 讨论了如何建立你的社群、在自由职业中找到激情，以及如何利用你的专业经验来发展你的事业。
感谢阅读，下周再见，注意安全！👋
文章来源：https://dev.to/marcobiedermann/weekly-digest-16-2021-top-of-the-week-h14