前端月刊

2023.07月刊

• 41 min read

开源工具

这里是当月发现的有趣、有用的开源项目…

Vue TermUI

https://vue-termui.dev/

基于Vue.js的终端UI框架，允许你轻松构建现代终端应用程序。 PS：ink是用React的方式打开命令行工具的一个工具

image.png

File Nesting Updater

https://marketplace.visualstudio.com/items?itemName=antfu.file-nesting

这个插件其实来自Anthony Fu(Vue.js的贡献者之一) 在2022 Vue Conf中的推荐，它可以帮你“收纳归类”一些项目中的配置文件，可以让目录结构变得简单，适合追求简洁的人，需要适应。

image.png

camaro

https://github.com/tuananh/camaro

一个高性能的XML到JSON转换器

image.png

lithent

https://github.com/superlucky84/lithent

一个可扩展的虚拟DOM库，用于各种环境中的轻量级使用。 Lithent的开发是为了使将虚拟DOM组件片段插入到已经使用SSR绘制的页面中变得容易，并且旨在在各种情况下轻松使用。

image.png

A beautiful primer on SVG paths

https://www.nan.fyi/svg-paths 这是一个非常好的交互式指南，用于理解SVG路径和路径命令，涵盖光标，直线，贝塞尔曲线等。内联注释是一个整洁的功能，提供了额外的上下文，创建者希望在今年晚些时候发布更完整的交互式SVG动画课程

Hurl

https://hurl.dev/ Hurl是一个命令行工具，它运行以简单纯文本格式定义的HTTP请求，类似于curl命令，但是它更加多才多艺。Hurl可以轻松使用HTML内容，REST / SOAP / GraphQL API或任何其他基于XML / JSON的API。👉可以看它的使用过程

remotion

https://www.remotion.dev/ 使用React创建真实的MP4视频。

MDsvex

https://github.com/pngwn/mdsvex 一个Svelte的markdown预处理器。

cross-fetch

https://github.com/lquixada/cross-fetch 适用于Node、Browser、Workers和React Native的通用WHATWG Fetch API

Slidev

https://cn.sli.dev/ image.png

hyper

https://hyper.is/ 一个终端模拟器 Hyper，它基于 Electron，使用 HTML/CSS/JS 构建，充分利用了网页技术。 image.png

@extractus/article-extractor

https://github.com/extractus/article-extractor 从URL中提取主文章、主图像和meta数据的工具。

import { extract } from '@extractus/article-extractor'

const input = 'https://www.cnbc.com/2022/09/21/what-another-major-rate-hike-by-the-federal-reserve-means-to-you.html'

// here we use top-level await, assume current platform supports it
try {
  const article = await extract(input)
  console.log(article)
} catch (err) {
  console.error(err)
}

tinypool

https://github.com/tinylibs/tinypool 一个极小的Node.js工作线程池实现（38KB）

import Tinypool from 'tinypool'

const pool = new Tinypool({
  filename: new URL('./worker.js', import.meta.url).href,
})

const result = await pool.run({ a: 4, b: 6 })
console.log(result) // Prints 10

// worker.js
export default ({ a, b }) => {
  return a + b
}

fnm

https://github.com/Schniz/fnm 🚀 快速简单的Node.js版本管理器，基于于Rust。

fastify

https://fastify.dev/ 基于Node.js的快速且低开销的Web框架 特性关键词：高性能、可扩展性、Schema based、日志、开发人员友好、基于TypeScript

clipanion

https://mael.dev/clipanion/ 类型安全的CLI库，没有运行时依赖关系 image.png

Koala Form

https://koala-form.mumblefe.cn/

低代码表单解决方案，让你跟考拉一样“懒”，代码量比较少，用来做更复杂的二次开发也很好。

image.png

MDX Editor

https://mdxeditor.dev/

MDX Editor是一个开源的React组件，允许用户自然地创作Markdown文档。

image.png

boa

https://github.com/boa-dev/boa

这是一个用Rust编写的实验性JavaScript词法分析器，解析器和解释器。

Release It! 🚀

https://github.com/release-it/release-it release-it.svg

Terminalizer

https://github.com/faressoft/terminalizer

一个用来记录终端操作并生成Gif动画的神器，同时也支持很多自定义配置，如文字、水印、边框、标题等

$ terminalizer record demo
# 将在当前目录生成一个demo文件
$ terminalizer play demo
# 可以重播内容
$ terminalizer render demo
# 生成Gif文件

floating.gif

driver.js

https://driverjs.com/

用来生成引导和高亮功能的插件

image.png

Leafer UI

一个国产的 Canvas 2D 图形渲染引擎，追求极致性能

image.png

docusaurus.io

https://docusaurus.io/

文档网站生成器，利用React和Markdown，并带有翻译和版本控制功能。

nve

https://github.com/ehmicky/nve

nve 是一个可以让你使用指定版本的node运行脚本的工具

# Same as `node file.js` but with Node 8
$ nve 8 node file.js

# Any command can be used
$ nve 12 npm test

fast-png

https://github.com/image-js/fast-png 纯JS PNG图像解码器和编码器-通过TypedArray或Buffer传递PNG进行解码，或者传递Canvas ImageData（或兼容对象）以编码为PNG。

技术新视界

Chrome 新特性：文档画中画

Chrome 震撼新特性：文档画中画！（不光是视频）

21个你还没有使用的很棒的web功能

https://www.youtube.com/watch?v=q1fsBWLpYW4&ab_channel=Fireship 内容不算新，主要是对使用HTML、CSS和JavaScript的Web开发人员最有用的新功能的细分介绍，可以快速了解一些比较新的技术特性。

2023年前端流行什么技术和框架了？ - 小爝的回答

https://www.zhihu.com/question/609395923/answer/3104801549

CommonJS is hurting JavaScript

https://deno.com/blog/commonjs-is-hurting-javascript

ECMAScript Modules in Node.js

https://www.typescriptlang.org/docs/handbook/esm-node.html

Sass in the Browser

https://sass-lang.com/blog/sass-in-the-browser/

在Sass的一生中，我们已经看到了许多我们在浏览器中率先采用的功能。CSS变量、数学函数和最近的嵌套都受到了Sass的启发。但是在浏览器中运行Sass本身作为编译器是不可能的。直到现在，随着Dart Sass 1.63的发布，我们正式添加了对 sass npm包的支持，以便直接在浏览器中运行。

一个简单的示例形态：

const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

亲身体验Node.js测试运行器

https://www.sonarsource.com/blog/node-js-test-runner/

Node.js在版本18中发布了一个实验性的测试运行器，并在版本20中使该测试运行器稳定。这对我们这些JavaScript开发者来说意味着什么？ Node.js测试运行器背后的意图是提供一组有限的测试功能，可用于测试项目，而无需依赖第三方。

一个简单的示例形态：

import { test } from "node:test";

test("will pass", () => {
  console.log("hello world");
});

test("will fail", () => {
  throw new Error("fail");
});

React困境与未来，何时迎来自己的“Angular.js时刻”？

React困境与未来，何时迎来自己的“Angular.js时刻”？

2023年NPM的状态

https://blog.sandworm.dev/state-of-npm-2023-the-overview

Chrome 116 中有关扩展程序的新增功能

https://developer.chrome.com/blog/chrome-116-beta-whats-new-for-extensions/

VueConf US 2023：State of the Vuenion

【第3008期】VueConf US 2023：State of the Vuenion

PNG规范（第三版）

https://www.w3.org/TR/png-3/

技术方案

这里是当月发现的有用的技术方案…

Node.js健康检查和过载保护

【第2985期】Node.js健康检查和过载保护

作者通过简单的工具搭配实操案例介绍了针对node服务中以下几个方面的检测方法

  • 高可用性
  • 负载均衡
  • 自动化部署
  • 监控和警报

团队把图标方案从iconfont换成iconify了，说说我们的思考

团队把图标方案从iconfont换成iconify了，说说我们的思考

一个值得参考的性能守卫思路

前端打包加个性能检测~性能不过关就发邮件告诉领导！

Vue3 除了keep-alive，还有哪些页面缓存的实现方案

Vue3 除了 keep-alive，还有哪些页面缓存的实现方案

本文主要介绍的几种缓存的实现方案

  1. keep-alive 的再加工
  2. 状态管理实现缓存
  3. 页面弹窗实现缓存
  4. 父子路由实现缓存

10w单元格滚动卡顿如何解决？

10w单元格滚动卡顿如何解决？腾讯文档的7个秘笈

解锁 PDF 文件

https://mp.weixin.qq.com/s/RGRbgcNveAcqXnRNKt_0Jw

技术好文

这里是当月发布摘录的技术原理之类的优质文章…

如何开发了一个前端库 or 框架

我是如何开发了一个前端库 or 框架？

作者开发了一个可以将字符串转换成视图的JavaScript库，值得关注一下，去了解一个框架体系应该具备哪些功能及生态。

image.png

分析前端业务团队如何进行技术建设

分析前端业务团队如何进行技术建设

作者从以下几个方面探讨了“技术建设”这个话题的方法论，值得参考

  • 维护团队知识库
  • 建设业务架构虚拟团队
  • 高效地造有用的轮子

现代前端框架的渲染模式

现代前端框架的渲染模式

作者介绍了目前主流的前端框架渲染模式，并分别讨论了它们各自适用的场景、优缺点

  • CSR - 客户端渲染
  • SSR - 服务端渲染
  • SSG - 静态生成
  • ISG - 增量静态生成
  • Progressive Hydration - 渐进水合 -> React Selective Hydration
  • SSR width streaming - 流式SSR
  • Selective Hydration - 选择性水合 Next.js
  • Islands Architecture - 岛屿架构
  • React Server Component - React 服务端组件

如何方便的检测React项目的性能？

https://mp.weixin.qq.com/s/WKGqodCLumBWkOY_knNo4A

本文主要介绍了React内置组件Profiler的实际使用和相应的技巧，值得考率的是使用Profiler本身也会对性能产生影响（即检测这个行为本身就会对被检测对象产生影响），因此对于更极致的性能调试还应借助开发者工具或者其它第三方无侵入性的工具进行分析。

View Transitions API 简介

https://www.sitepoint.com/view-transitions-api-introduction/

View Transitions API可以简化页面中和页面加载之间更改元素状态时的动画。这种类型的转换以前是可能的，但它们需要大量的JavaScript -我们必须小心不要破坏浏览器导航，比如返回按钮。

图片的decoding属性实际上是做什么的？

https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">
  • jpeg, 2.jpeg, 4.jpeg 图像会立即加载并延迟窗口的加载事件。
  • 3.jpeg 由于位于视口中，当布局已知时，图像将加载，但它不会延迟窗口的加载事件。
  • 5.jpeg 图像仅在滚动到视口中时加载，并且不会延迟窗口的加载事件。

Soft and Hard Skills Every Front-End Developer Must Have

https://superdevresources.com/soft-and-hard-skills-every-front-end-developer-must-have/

作为一名优秀的前端开发人员需要硬技能和软技能的动态组合。掌握HTML、CSS和JavaScript等技术语言，熟悉框架和库，了解Git等版本控制系统，以及响应式设计的技巧是所需的基本硬技能。同时，软技能对于克服日常障碍和在团队环境中取得成功至关重要。

How to Minify JavaScript — Recommended Tools and Methods

如何缩小JavaScript -推荐的工具和方法 https://kinsta.com/blog/minify-javascript/

如果你想在最短的时间内提高你的网站的性能，你需要熟悉JavaScript Minify。本文将介绍一系列的工具和方法，帮助你为WordPress和非WordPress网站缩小JavaScript代码。

How CSS Spacing Works – A Guide for Web Developers

CSS间距如何工作-Web开发人员指南 https://www.freecodecamp.org/news/css-spacing-guide-for-web-devs

在本教程中，作者讨论了CSS间距，并教你如何更好地创建一个高度可访问和视觉吸引力的网站。它涵盖了所有你需要知道的关于CSS中的间距以及如何有效地实现它。值得留意的是，作者对“盒模型”的区别释义和完整介绍采用了一些配图值得参考。

Best Practices for Writing Clean and Maintainable JavaScript Code

编写干净且可维护的JavaScript代码的最佳实践 https://www.westagilelabs.com/blog/best-practices-for-writing-clean-and-maintainable-javascript-code 编写干净且可维护的JavaScript代码意味着它提高了代码质量并提高了代码可读性，针对这些要求，作者给出了以下几点建议：

  1. 使用明确而有意义的名称进行声明；
  2. 声明变量并为其赋值，而不是直接使用值；
  3. 使用注释。注释有助于解释代码和功能的概念。它帮助其他人理解代码和背后的逻辑；
  4. 使用代码转换工具。一致的格式和缩进对于编写干净和可维护的代码非常重要；
  5. 避免代码重复；
  6. 使用const和let代替var；
  7. 使用严格模式，即“use strict”；
  8. 使用可选链接，可选链接允许您访问对象的属性和方法，而不必担心中间属性是否存在；
  9. 避免嵌套太深。

In Defence of DOM­Content­Loaded

https://csswizardry.com/2023/07/in-defence-of-domcontentloaded/ Jul-06-2023 14-17-46.gif

在上面的比较中，您认为哪一种提供了更好的用户体验？我敢打赌你们都说B，对吧？A DOMContentLoaded 比A快11.292s！ 作者通过以上示例展开对DOMContentLoaded的详细解读，可以更深入的理解为什么DOMContentLoaded 对我们来说是一个非常非常有用的指标。

现代JavaScript：过去10年你错过的一切

https://turriate.com/articles/modern-javascript-everything-you-missed-over-10-years 以下总结来自MDH

这篇文章是一份 JavaScript 的速查表，作者总结了近年来在现代浏览器中广泛支持的 JavaScript 新语法和功能。包括内置数组函数、const/let 关键字、空值合并和可选链运算符、Async/Await 关键字、箭头函数、for…of 循环、异步迭代、类、get/set 函数、函数默认参数、命名参数、剩余参数、Object.assign 和展开运算符、解构、简写函数、Promise.all、模板字面量、代理以及模块导入 / 导出等。每个主题都附有示例代码和进一步文档的链接。此外，作者还提供了其他参考资源，如 Map、Set、生成器、严格模式、数组方法、对象静态方法、反射、URL 等。

用Rust写一个Node库

https://blog.metlo.com/writing-a-node-library-in-rust/

debugger 拦截

JavaScript 奇技淫巧：debugger 拦截 这个方法可以解决那些打开控制台就直接用debugger中断操作的网站哈哈哈

React Server Component 从理念到原理

https://mp.weixin.qq.com/s/Chm8sySfmSloQEyx0fmLRg

本文从理念、原理角度讲解了RSC，过程中回答了几个问题。 Q：RSC和其他服务端渲染方案有什么区别？ A：RSC是服务端运行时的方案，采用流式传输。 Q：为什么需要区分RSC与RCC（通过文件后缀）？ A：因为RSC需要在后端获取数据后流式传输给前端，而RCC在后端编译时编译成独立文件，前端渲染时再以JSONP的形式请求该文件 Q：为什么RCC中不能import RSC？ A：因为他们的运行环境不同（前者在前端，后者在后端）

从自研走向开源的 TinyVue 组件库

【第2991期】从自研走向开源的 TinyVue 组件库

Tiny是当前值得关注的企业级前端工程化解决方案 全文包含以下章节： 1、完全自研的 HAE 前端框架

  • 实现数据的双向绑定
  • 实现面向对象的 JS 库
  • 配置式开发的注册表

2、迁移到 Vue 的 AUI 组件库

  • 封装成 Vue 组件
  • 后端服务适配器
  • 标签式与配置式

3、全新架构的 TinyVue 组件库

  • 开发组件库面临的问题
  • 面向逻辑编程与无渲染组件
  • 跨端跨技术栈 TODO 组件示例

一个挺好的monorepo实践项目路径

带你了解并实践monorepo和pnpm，绝对干货！熬夜总结！

关于微前端，关于qiankun

作为面试官，为什么我推荐微前端作为前端面试的亮点？ - 掘金

虽然作者是针对“面试”为切入点，其实也可以作为针对qiankun的使用及排坑参考，很好！

JavaScript 知识点 Import Maps

又新学到了一个 JavaScript 知识点 Import Maps

Multithreading with Worker Threads in Node.js

Node.js中的多线程与工作线程 https://blog.appsignal.com/2023/07/05/multithreading-with-worker-threads-in-nodejs.html

面向React开发人员的TypeScript手册-如何构建类型安全的Todo应用程序

https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/

以下是摘取的部分实例大纲：

  • How to set up the Todo app component
  • How to create a simple form element in React
  • What is a type error in TypeScript and how to fix it?
  • What are the Generic types in TypeScript?
  • How to handle form submission with TypeScript in React
  • How to automatically focus on an input field in React
  • What is useRef and how to to use it with TypeScript
  • How to create type-safe React components with TypeScript
  • What is forwardRef in React?
  • How to create a todo item on the form submission?
  • What is React Context?
  • How to use React Context with TypeScript?
  • What are Interfaces in TypeScript?
  • How to use TypeScript interfaces with React Context
  • How to create a custom hook to consume React Context
  • How to define an interface for Todo items
  • How to build a custom React component for displaying Todo items
  • How to implement functionality: Edit, Delete, and Update Todo items

这篇手册涵盖了React+TypeSript程序中绝大多数使用场景，作为上手前了解和上手后巩固都很值得阅读。

次世代前端视图框架都在卷啥？

次世代前端视图框架都在卷啥？ - 掘金

本文主要讲了次世代前端框架的内卷方向，目前来看还处于量变的阶段，并没有脱离现在主流框架的心智模型，因此我们上手起来基本不会有障碍。 作为普通开发者，我们可以站在更高的角度去审视这些框架的发展，避免随波逐流和无意义的内卷。

滚动驱动动画性能的案例研究

https://developer.chrome.com/blog/scroll-animation-performance-case-study/

文章介绍了滚动驱动动画，这是一种通过用户的滚动位置触发的方式，增加网站或网络应用的互动性和视觉吸引力。过去，创建滚动驱动动画的唯一方式是在主线程上响应滚动事件，这存在两个主要问题：滚动是在单独的进程上执行并异步传递滚动事件；主线程动画容易出现卡顿。因此，创建与滚动同步且高效的滚动驱动动画非常困难。现在，我们引入了一套新的 API 来支持滚动驱动动画，可以通过 CSS 或 JavaScript 使用。新 API 尽可能少地使用主线程资源，使得实现滚动驱动动画更加容易和流畅。文章还通过对比新旧方法，展示了新 API 如何轻松实现平滑的滚动驱动动画。最后，文章指出新 API 不仅限于 CSS，还可以使用 JavaScript 创建流畅的滚动驱动动画，与 CSS 版本的底层技术相同，尽可能少地使用主线程资源，使动画比传统的 JavaScript 方法更流畅。

旧方法的playground：https://codepen.io/nyb1030/pen/gOBvZgR 新方法的playground：https://codepen.io/nyb1030/pen/MWPLgbe 一些demo：https://scroll-driven-animations.style/

在2023年编写CSS：和几年前有什么不同吗？

https://www.smashingmagazine.com/2023/07/writing-css-2023/

动画SVG徽标

https://antfu.me/posts/animated-svg-logo

React 18如何提高应用程序性能

https://vercel.com/blog/how-react-18-improves-application-performance

作者主要围绕React 18 引入的并发特性讲解了它是如何提升性能的，文章配图和案例讲解甩出国内一众水文几条街。

为什么React一年不发新版了？

为什么React一年不发新版了？

作者的结论 React之所以已经一年没有发布稳定release，是因为发展方向已经从「面向开发者」转型为「面向上层框架」。 在此期间的更新都是面向上层框架，所以开发者很难感知到React的变化。 但这并不能说明React停止迭代了，也不能据此认为前端发展的停滞。 如果一定要定量观察React最近一年的发展，距离React v19里程碑，已经大体过半了：

React的发展时期

  • 13年开源，到17年之前的功能迭代期
  • 持续到18年的重构期（重构React Fiber架构）
  • 18～22年基于Fiber架构的新功能迭代期
  • 22年至今的重构期

「功能迭代期」与「重构期」的区别在于：

  • 前者主要是在稳定的架构上迭代新特性
  • 后者一般重构底层架构的同时，重构老特性

「剧烈的代码量波动」通常发生在「重构期」。比如，在最近的重构期内，PR #25774[2]删除了3w行代码。 个人想法 通过React的发展时期可以知道，React最近的“稳定”的版本其实只有16版本，因为从17版本开始就开始尝试渐进增强式的版本升级，即提供一部分新特性供特定的模式去使用，也是在这个时期开始存在各种.new和.old文件，虽然其中大体的逻辑类似，但还是不乏一些关键性的逻辑在两者之间并不一致，也就是说你想全方位深度的理解React源码，就需要看两份文件。 假如有一天真的遇到某个面试官问：ensureRootIsScheduled 这个逻辑在16版本和后续版本中有什么区别？ …

什么是页面膨胀？它是如何伤害你的业务

https://www.speedcurve.com/blog/page-bloat-web-performance/

Breakpoints and console.log is the Past, Time Travel is the Future

https://wallabyjs.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly

SvelteJS：我的生态系统比你的大 - HackMD

https://hackmd.io/@roguegpu/r1RKQMdt3

文章主要讨论了 Svelte 和 React 之间的差异，以及为何使用 Svelte 可能是更好的选择。作者指出，尽管 Svelte 的生态系统相比 React 较小，但这并不意味着它的功能有所欠缺。事实上，Svelte 的一些特性，如内置的状态管理 API 和转换 API，使得开发者无需寻找额外的库就能解决问题。此外，Svelte 还允许直接在框架中进行样式设置，而无需引入其他库。作者还展示了如何在 Svelte 中使用 ag-grid 和 chart.js 等库，并指出与 React 相比，Svelte 可以更直接地使用这些库，而无需通过封装器。最后，作者总结道，虽然使用 React 可能需要学习更多的封装器，但使用 Svelte 则可以更直接地学习和使用底层库。

Persson Dennis - 为何选择服务器组件 - 网络简史

https://www.perssondennis.com/articles/why-server-components-a-brief-history-of-web

根据 Stack Overflow 2023 年的调查，Next.js 现在是开发人员最想要的 web 框架中的第三名，也是最受欢迎的第六名。尽管他们的旧版 Pages Router 非常出色，但他们在框架的第 13 版中引入了新的 App Router。随着这个变化，他们还迁移到使用 Server Components，这可以被视为下一级别的服务器渲染。本文将从网络的起源开始，通过各种类型的服务器渲染及其所有优点，到最新的 Next.js Server Components 的网络开发状态，来帮助你理解为什么 Next.js 和 Server Components 不仅仅是传统的客户端 React 应用程序。文章中还详细讨论了服务器渲染与 SPA 的转变，以及客户端组件与服务器组件的对比等内容。总的来说，Next.js 现在允许为每个组件决定是否应该在服务器上预渲染，或者是否需要在客户端上渲染。

前端简洁架构

【第3005期】前端简洁架构

本文介绍了如何将代码按照功能进行分离，使用接口和适配器来与外部服务交互，并将关注点分离以提高可测试性和可扩展性。

关于 TypeScript 的 5 个真相

https://oida.dev/5-truths-about-typescript/

这篇文章是作者关于 TypeScript 的见解和经验分享。作者首先指出，TypeScript 并不能替代 JavaScript，它只是 JavaScript 的超集，继承了 JavaScript 的所有历史、怪癖和陷阱，但可以帮助避免错误，提供动态类型编程语言的支持。其次，TypeScript 会为项目增加复杂性，具有很多配置选项，需要开发者熟悉和掌握。然后，作者强调 TypeScript 并不是类型安全的，尤其在处理用户输入、文件访问、网络数据获取等 I/O 操作时，需要依赖开发者的类型注释或断言。此外，TypeScript 有许多版本和使用方式，每个团队都会找到适合自己的方式和工具。最后，尽管存在上述问题，但作者认为学习和使用 TypeScript 是值得的，因为它能使开发者的工作更有效率，也使代码更易于理解和维护。

Scroll driven animations in CSS are a joy to play around with!

https://utilitybend.com/blog/scroll-driven-animations-in-css-are-a-joy-to-play-around-with

本文介绍了围绕Chrome新推出的滚动动画实现的几种有趣的效果，可以作为一个灵感参考。

技术周边

这里是当月发现的有趣、有用的技术“边界上”的工具、资源…

Hacker News

https://hn.lindylearn.io/ image.png

DragGAN：一个 AI PS 工具

https://github.com/XingangPan/DragGAN

利用github issues集成评论功能

https://richard-docs.netlify.app/blogs/b-027

艺码

https://yima.me/ 免费生成AI艺术二维码 image.png

apivault.dev

https://apivault.dev/categories/Development 这个网站收集了大量的免费API ，相当于 API 的搜索引擎 image.png

Component party

https://component-party.dev/

这个项目有很多个用来实现同样一个组件功能/语法的前端框架打开方式的demo，有点意思。

image.png

如何破解滑动验证码？

https://mp.weixin.qq.com/s/iK_JkVRrh5vIRBjnQbDOyw

交互设计的隐形细节

https://rauno.me/craft/interaction-design

doppio.sh

https://doppio.sh/

完全托管的HTML转PDF或PNG微服务-面向开发人员的API

image.png

免费字体

https://www.freefaces.gallery/ image.png

图片质量分辨率提升工具

https://github.com/Tohrusky/Final2x

Discord

https://discord.com/ image.png

no css club

https://nocss.club/

To do what the Web was initally intended for (that is, make information accessible via the Internet), all you need is to serve HTML documents. If you need “style” that just means you’re trying to cover up your lack of interesting information.

Speaker Deck

https://speakerdeck.com/

很多技术类PPT的灵感来源

image.png

思考&杂谈

一些技术圈内(相关的)的话题、看法、思考

一个8年程序员的职场工作总结与人生感悟

一个8年程序员的职场工作总结与人生感悟 几年前的文章了，今年才看到…

《编程需要知识的广度》

https://typeclasses.substack.com/p/programming-requires-breadth-of-knowledge 跟大家想的不一样，编程并不需要掌握深刻的思想，而是需要某种程度上记住文档，以便用某些固定词汇，清晰表达我们的想法。

软件工程：解决问题和批判性思维

https://addyosmani.com/blog/softeng-problem-solving/

这篇文章强调了软件工程不仅仅是编码，更重要的是解决问题和批判性思考。软件工程被误解为只涉及编码，但实际上，它涉及到解决问题和批判性思考的方面，编码只是冰山一角，是分析严谨、抽象推理和创造性问题解决过程的具体输出。软件工程的核心不仅仅在于编码，更在于进行编码之前的过程。在软件工程中，每一个软件都是为了解决特定的问题或一系列问题而创建的，工程师首先需要理解他们需要解决的问题，然后概念化可能的解决方案。批判性思考是软件工程的基础，它涉及到对问题的客观分析和评估以形成判断，在设计阶段、实施阶段和测试阶段都需要应用批判性思考。总的来说，软件工程是解决问题和批判性思考的复杂结合，编码只是其表现形式。随着软件越来越深入地融入我们社会的结构中，软件工程师的角色也在扩大，他们不仅需要擅长编码，还必须是熟练的问题解决者和批判性思考者。

ChatGPT 正在杀死编程里的乐趣

https://www.piglei.com/articles/chatgpt-and-how-we-programming/

“创造使人快乐”——这个特点可能数万年前就刻在了人类基因里。编程就是一种创造性工作。人们通过编写代码，一步一个脚印实现自己想要的东西，这个过程让人心情愉悦。这种愉悦和“建造一所房子”、“制作一件工具”所产生的愉悦类似，都是在人类创造事物时自然产生。 而藏在编程这件事里的乐趣，大致可分为两类，它们分别来自于编程中的两大环节，一个是“规划与设计”，另一个是“解决小谜题”。

入行 14 年，我还是觉得编程很难

https://www.piglei.com/articles/programming-is-still-hard-after-14-years/

作者讲到的几个观点

  1. 写代码很简单，但写好代码很难

除了可读性以外，评价代码好坏还有许多其他维度：

  • 贴合编程语言：是否使用了当前编程语言的推荐写法？语言特性和语法糖，使用程度是否恰到好处？
  • 易于修改：代码设计是否考虑了未来的需求变更，当变化发生时，代码是否容易随之修改？
  • API 设计合理：API 设计是否合理，易于使用？好的 API 在简单场景下使用方便，在高级场景下又可以随需求扩展。
  • 性能够用：代码性能是否满足当前业务需求，同时为未来保留了一定提升空间？
  • 避免过度设计：代码是否存在过度设计、过早优化的毛病？

… 2. 避开代码完美主义陷阱

在代码质量上精益求精是好事，但也要注意别掉进完美主义的陷阱。因为编程不是艺术创作，不鼓励人们无限度地追求极致。作家大可花上数年打磨一本传世之作，但程序员在代码上钻牛角尖就很有问题。 世间没有完美的代码。大多数时候，你的代码只要能满足当前需求，又为未来扩展留了一些空间就够了。有那么几次，我在简历上看到候选人给自己打着“代码强迫症”标签。隔着屏幕，我虽能感受到 TA 对代码质量的那份重视，但在我心底，其实更期望 TA 早已将完美主义陷阱远远甩在了后头。 3. 求知若渴是好事，但也要注意方法

要关注学习性价比、要挑选合适的学习资料，也许每个人的内心，都想成为一个博学的人，无所不知，无所不晓。但可供分配的时间的精力总是有限，我们不能，也不需要在所有领域都成为专家。 4. 程序员最大的敌人是什么？

——复杂度是最大的敌人 就像《代码大全2》中所说：软件开发的核心问题是管理复杂度。失控的复杂度就是程序员最大的敌人。 来看看那些导致项目复杂度不断增长的要素：

  • 不断增加的新功能： 更多的功能等于更多的代码，更多的代码通常意味着更高的复杂度
  • 对高可用的需求： 为了实现高可用，消息队列等额外的技术组件和代码被引入
  • 对高性能的需求： 为了提升性能，缓存和相关模块代码被引入，部分模块被拆分后，换成高性能语言重写
  • 一再被推迟的重构：因项目排期过于紧张，迫在眉睫的重构被一再推迟，技术债越积越多
  • 忽视自动化测试： 没人写单元测试，也没人关心测试
  • …

如何做出伟大的工作

https://tw93.fun/2023-07-20/great.html

好的代码就像是写给下一个维护它的开发者的情书

https://addyosmani.com/blog/good-code/

有效代码评审

https://addyosmani.com/blog/code-reviews/

易读性

https://legible-typography.com/en/

如何以及为什么排版影响阅读的容易性-一个免费的七章书从排版专家涵盖字母间距，对齐，布局，渲染，美学，等等。一个关于排版变量的优秀资源，非常值得一读，以加快所有事情的易读性，可读性和可用性。