Simon Logo
WritingMonthlyProjects
Simon Logo

Thanks for reading!

CC BY-NC-SA 4.0© 2019-2026 Simon Wong.

Contact

GitHubGithubXTwitterZhihu知乎WeChat微信公众号RSSRSS

Legal

隐私策略服务条款
CC BY-NC-SA 4.0© 2019-2026 Simon Wong.

On this page

On this page

ReactNPMCSSMath

#15 前端与 AI 月刊

Oct 31, 2024

好文章

用函数式编程释放JavaScript的潜力

这是一篇不错的函数式编程入门指导,通过函数式编程可以编写更加模块化、确定性和可测试性的代码。

手写基础 SVG 的实用技巧

当然手写 <path /> 还是有点困难的,还是推荐使用Illustrator 等软件绘制,这个文章主要聚焦于rect、line、circle、ellipse、polyline、polygon 等规则图形,以及 defs、pattern、fill 属性处理重复图形。

npm audit 检查并修复漏洞

npm audit 是一个安全命令,提示你的依赖哪些存在漏洞,还会建议你如何修复它。

React

5 步了解 React 文件夹结构 [2024]

这是一份 React 工程文件结构的实践,值的学习参考。

- src/
--- (pages or app)/
--- feature/
----- user/
------- profile/
------- avatar/
----- post/
------- post-item/
------- post-list/
------- services/
--------- post/
----------- index.js
----------- service.js
----------- test.js
--- components/
----- list/ 【list 和 input 是两种选择,list 更加冗余,但是在ide中更好找】
------- index.js
------- list.js
------- list.test.js
------- list.style.css
----- input/ 【input 更加简洁】
------- index.ts
------- component.ts
------- test.ts
------- style.css
------- hooks.ts
------- story.ts
------- type.ts
------- utils.ts
------- constants.ts
----- button/
----- checkbox/
----- radio-button/
----- dropdown/
--- hooks/
--- context/
--- services/
----- format/
------- date-time/
--------- index.js
--------- service.js
--------- test.js

与之类似的,还有一个工程 https://github.com/alan2207/bulletproof-react 也可以参考。

实现拖动选择

拖动选择(比如拖动多选文件)在系统中是"原生"的功能,但是在 web 中实现起来比较复杂,这个指南教你一步一步的实现它。

State of React 2024 问卷调查

State of React 2024 问卷调查开始了,参与了解一波。

AI与其他

  • Cursor101 是一个提供免费的 Cursor 入门教程和实用技巧的网站
  • Cursor 提示词
  • bolt stackblitz 出的一站式的 AI 生成 web 应用,然后运行,修改,部署。
  • 技术雷达第31期
Previous

前端月刊

Next

前端与 AI 月刊

You Might Also Like

  • 前端与 AI 月刊Oct 31, 2024
  • 前端月刊Nov 30, 2025
  • 前端月刊Jul 31, 2025