某科学的前端工程化
本文根据演讲 PPT 口胡输出而成,如有雷同纯属巧合。
开篇,我们先来引入一个问题:什么是前端工程化。
对于我来说,前端工程化大致分为下面的几个内容:
- 代码规范化:eslint
- 流程规范化:git flow / Code Review
- 测试规范化:写不写,怎么写
- 组件与模块:项目与模块治理
- 基础设施:CI / CD
- ……
本文根据演讲 PPT 口胡输出而成,如有雷同纯属巧合。
开篇,我们先来引入一个问题:什么是前端工程化。
对于我来说,前端工程化大致分为下面的几个内容:
Notification API 只能在 HTTPS 中使用:Using the Notifications API
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
但是在开发某游戏网站脚本的时候,虽然它用的是 HTTP,但是仍然想用 Notificition 做一下提醒功能,当然,可以降级成过去 800 年的闪 Title 策略:
let shaking = false
setInterval(() => {
if (shaking) document.title = `[Notification] ${word}!!`
else document.title = word
shaking = !shaking
}, 200)
但是实测效果还是不够显眼,最终在和群友的交流之后,发现了 <chrome://flags/> 。
Insecure origins treated as secure
中填写需要开启 Notification API 的域名,重启浏览器,就可以在 HTTP 中使用 Notification API 了。
在前端开发,或者说 Web 开发中,我们会经常遇到,在某个浏览器遇到了问题,但是别的浏览器没有,过去,我们考虑的可能是 IE6 的兼容性,而在 Chrome 一骑绝尘的今天,Chrome 而其他浏览器没有的问题反而成为了更大的问题。
在此之前遇到过几个 Chrome Bug,我会以两个 Chrome Bug 为例说说实际是怎么解决的:
之前有一个奋斗了 N 小时才搞定的问题,在 Nestjs 的单元测试中反复测试会报类似于:
Starting Nest throws following error: Nest can't resolve dependencies of the EventResolver (EventService, ?). Please make sure that the argument at index [1] is available in the EventModule context.
Nest throws an error about a circular dependency that doesn't exist. Here is the error thrown:
Nest cannot create the module instance. Often, this is because of a circular dependency between modules. Use forwardRef() to avoid it. (Read more https://docs.nestjs.com/fundamentals/circular-dependency.) Scope [RootModule -> XXXModule]
在开发中,我很经常的将很多功能设置成可配置的,这里不仅仅说的是应急的开关,而是包括了一些文本在内的信息。这篇文章也就是说说为什么我要这么做,以及这么做到底有什么好处。
最简单,大家也最常用的是在后台配置一些开关,这些开关不用发布,只需要轻轻一点就能切换某些功能的状态,这也是大家通常会做的「基于配置」的开发的处理,毕竟发版的时间实在太漫长了,因此大部分后端都有有意识的将一些开关放在后台而不是开发写的配置文件中。
media 中有一个属性 prefers-color-scheme
,用 matchMedia()
来检测 (prefers-color-scheme: dark)
是否存在就可以了。
截止2019年11月15日,目前经过测试可以直接 Debug DarkMode 的浏览器(以最新版为准):
其中 Firefox 可以通过安装插件实现 Dark Mode Debug(兼容性不是很好)。
大概来介绍一下 Django Allauth 改造的期间遇到的一些问题和改造方法,在此之前我只想说——Django Allauth 是屑。
入职之初我就接到了一些第三方登录的任务,然而 Django Allauth 将内部封装的太好,暴露的 API 不足,更新又慢,issue 和 PR 很少有人处理,当你需要扩展时,很多情况下你只能用一些 hack 的手段去解决问题,非常蛋疼,所以当时就决定慢慢的切到自己的一套 Auth 体系中。
From:「GDG DevFest 2019」
这是由演讲 PPT 汇集而成的内容,可能与演讲内容有所差异,并非演讲稿,望悉知。
首先得提出一个问题,到底什么是知识迁移,在 wiki 上有这样一段解释。
在一个地方所学的技能、知识与态度对另一个学习的影响,它可以加快学习的速度。
——艾尔德
最近我在 Element 里看到了一个 issue:el-image preview bug。之所以导致了这个 Bug,我觉得某种意义上来说就是因为 image 组件的 viewer
(蒙版)模块开发时,没有充分理解 z-index
到底是怎么起作用的。
在此之前,我们先来看一下下面这个例子: