跳到主要内容

速读《设计原本》

· 阅读需 19 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2023-05-27 18:35:00

在日常工作中,经常被糟糕的项目进度控制和需求变更等因素搞得人身心俱疲,为了缓解这类问题,产品设计、程序设计、项目管理等多个环节都需要参考一些优秀的案例,而《设计原本》就针对设计过程进行了较为深入的探讨,在阅读过后发现其中一些概念是日常在用的,但没有意识到的,也有我们大多数人一直追求的理想状态被作者认为是不合理的,值得一读。

交互状态设计:探索 ECharts 与 ZRender 的设计模式

· 阅读需 22 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2023-01-09 23:37:00

通常,对于 Web 页面的交互处理中,尤其是 DOM 元素样式的变化用 CSS 处理是非常简单的,但如果是普通对象呢?问题似乎变得复杂起来了,这篇文章通过探索 ECharts 与 ZRender 在交互状态设计相关方面的源码实现,讨论一下在复杂场景中处理交互状态的设计方案,如何将命令式编码的复杂性通过声明式编码来降低,该怎样应对复杂场景下的状态叠加问题。

Web 3D 开发实践:计算物体在 2D 平面上的像素尺寸

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-12-20 00:09:00

这次是基于中秋节活动时开发 3D 月球组件的经验来开发 3D 地球组件,相比于上一次,这一次很多技术难点都有了现成的解决方案,可以说开发成本降低了三分之二之多,而这些额外的开发成本则花费在隐藏在需求细节中的技术难点。这篇文章主要用来记录开发过程中遇到的一个比较有意义的技术难点,即 3D 空间中的物体投影到 2D 平面中时如何换算像素尺寸,在探索解决该难点的过程中,对 3D 与 2D 空间之间的关系有了一个更深刻的认识。

探索 Docusaurus 的路由实现

· 阅读需 13 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-11-15 00:47:00

大概早在一年前就了解到 Meta(Facebook) 发布的一款专门用来构建文档站点的 Docusaurus 工具库,那时候 Docusaurus 就已在社区中受欢迎起来,随着这一年多来看到很多开源项目的文档站点都基于 Docusaurus 构建,便下定决定要找机会尝试一下。于是,前不久在团队内对基建做改进时,对于文档这一块的迭代了解了很多热门的社区方案,一直举棋不定,在某天闲下来时就准备基于 Docusaurus 做一个尝试,最终发现效果还不错,而且迁移起来也几乎没有什么成本。

基于对 Docusaurus 这次尝试留下的好印象,便顺带深入了解了一下,发现还支持博客站点,而且功能很丰富,最吸引人的便是可以借助插件构建本地的离线全站搜索功能。说干就干,找了个周末就把自己的博客站点完全迁移到基于 Docusaurus 构建的站点了。当然,迁移过程是挺顺利的,而且也并没有想象中的麻烦,只是以前的博客页面都是自己写的,而现在基于 Docusaurus 的博客页面是开箱即用的主题,尤其是归档页面并不太符合期望,准备自己重新实现归档页面。经过查看文档,发现 Docusaurus 确实提供了重写归档页面的机制。不过,在重写之前,我心里突然发出一个疑问:我只能在已有的路由下(/archive)重写页面吗?博客的数据解析后是如何存储并传递给页面组件的呢?为了一探究竟,我便带着这些问题对 Docusaurus 的路由机制做了简单的探索,总算是了解了 Docusaurus 是如何以巧妙的方式做到这些事情的。

Web 3D 开发实践:3D 月球组件

· 阅读需 43 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-09-17 17:23:01

恰逢中秋节,有机会参与到一项中秋运营活动的项目中,负责为业务方提供一个移动端场景投放的 3D 月球组件。由于一直接触的是 2D 可视化开发,对于 3D 开发(WebGL)的技术未有深入了解和实践经验,基于对现有社区主流技术的简单了解和团队成员的技术背景,遂选定基于 Three.js 进行开发以降低风险。

这篇文章是基于 3D 月球组件的开发实践,记录 3D 开发实践中了解的一些 Web 3D 技术知识和一些典型问题场景的解决方案。

精选资源:Web 前端工程化

· 阅读需 3 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2024-03-12 19:33:00

精选资源

这是一个系列,收集不同领域相关的精选(高价值)内容,包括深入分析文章、视频、工具等。

探索一项新兴技术出现的背景、动机,尤其是其背后的设计哲学,更甚的是在不断的版本演进过程中遇到了什么问题,产生了什么思考,以及是如何决策并得到最优解。

Web 前端发展至今,已成为一个非常复杂的领域,纷繁复杂的工程化技术、工具为构建前端产品提供了有力的支持,通过深入探索工程化技术的发展路径、不同工具的设计理念与差异,了解 Web 前端发展趋势。

利用脚本执行 `tsc` 忽略类型检查错误

· 阅读需 4 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-08-13 02:46:00

在发布 npm 包时添加对 TypeScript 类型定义文件的支持会让用户的使用体验增色不少,TypeScript 官方提供了 tsc --emitDeclarationOnly 命令用来生成类型定义文件(.d.ts)。但是,该命令会同时执行类型检查,遇到错误时会报错中断命令行进程,这就使其无法直接集成在 CI 环节在发布 npm 包时自动执行生成类型定义文件的操作。当然,一个解决办法就是解决掉代码中所有的类型检查错误即可,既然讨论到这个问题,必然不会花费额外精力去解决一些历史遗留问题。

前端工程化:对于构建工具链的简单思考

· 阅读需 20 分钟
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2022-08-06 00:21:00

前端工程化是在做与业务开发完全不同的事情,旨在解决软件工程领域与开发者密切相关的问题,通常会将其与基建开发、DevOps 放在一起讨论。前端开发是复杂的,其结合了 HTML/CSS/JavaScript 3 种语言,甚至还有很多其超集,没有开箱即用的工具链,不像 Java Web 开发、Android 开发等等有官方或者商业领域非常成熟的工具可以利用,一切都源于开源社区的从 0 开始构建。正因如此,前端工程化领域百花齐放,开放与创新展现的淋漓尽致,这也是前端开发者了解学习软件工程的机会。