blog.jpg

不知不觉,博客已经写了100篇文章了?。从17年底开博到现在,一点一点的积累,每天坚持。其实我写作水平不太高,不像阮大池大他们那样,洋洋洒洒几千字,但是翻开他们大牛的博客,看看早期的文章,也是和我差不多,之所以能达到现在,也是不断的积累。

早在18年初,我就定下来起码每周两篇文章的目标,现在看看归档,大部分都达到了,只有2018年11月好像没有完成,至于原因是因为项目着急上线,每天加班到晚上12点,再加上又添了果果,实在精力有限了?。

但是,博客还是没有多少评论,这多少还是有点郁闷,不过当时写博客也不是为了能有多少读者来读,只是想着在工作上或者项目上遇到的问题,做一个记录,万一后来有人遇见了,也可以帮助别人,至于评论看淡就好?。

2019年,继续保持就好,希望自己能变的更厉害?。

regex.jpg

正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。

- 阅读剩余部分 -

Workbox

随着 Web 的快速发展,用户对站点的体验期望值越来越高,前端工程师有时候为了几十毫秒的速度优化而费劲心思,消耗大量时间。想要让自己的产品在无数产品中脱颖而出,就必须提升产品的性能和体验。在时间成本高昂的今天,响应速度的提升是开发者不得不面对的话题。

前端工程师有很多性能优化的手段,包括 CDN、CSS Sprite、文件的合并压缩、异步加载、资源缓存等等。其实我们绝大部分情况是在干一件事情,那就是尽量降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时。当然减少用户可感知的延时也不仅仅是在网络请求成本层面,还有浏览器渲染效率,代码质量等等。

我们这里要讲到的是一个叫做 Service Worker 的东东。

- 阅读剩余部分 -

任何一栋建筑都需要稳固的基础、四面墙体和一个屋顶。这些要素都是必不可少的。基础支撑着墙体,墙体支撑着屋顶,而屋顶保证你安全并且免受风吹雨淋之苦。如果一名建筑师不能提供上述要素,那么他必定是不称职的。作为前端架构师,我们在构建新网站时也承担着相似的责任。我们必须驾驭必要的工具和流程,而这两者正是成功构建网站的要素。

前端架构是一系列工具和流程的集合,旨在提升前端代码的质量,并实现高效,可持续的工作流。

- 阅读剩余部分 -

最近在读《前端架构设计》,整书只有148页,薄薄的一本,但是看起来还是很有份量的。这本书展示了一名成熟的前端架构师对前端开发全面而深刻的理解。作者结合自己在Red Hat公司的项目实战经历,探讨了前端架构原则和前端架构的核心内容,包括工作流程、测试流程和文档记录,以及作为前端架构师所要承担的具体开发工作,包括HTML、JavaScript和CSS等。从豆瓣等评论来说,褒贬不一,但是个人感觉读一读还是很有必要的,取其精华去其糟粕即可。

- 阅读剩余部分 -

项目中用到了弹窗居中,有些弹出正常,有些弹出就模糊。这就比较奇怪了,一样的样式,为啥会出不同的结果呢?

css水平居中是有很多办法的,项目里面用的是这样的居中方式:

position: absolute;
left: 50%;
transform: translateX(-50%);

然后一点一点的去掉样式,定位到是transform导致的!用搜索引擎查了下,果然不止我一个人有问题,看来有解决方案了。

原来出现模糊的原因是因为元素的高度、宽度中有奇数, 使用类似translate(-50%,-50%)之后,相当于宽度、高度除以2的效果,会出现 0.5px。像素就是最小的单位了,要么1,2,3,要么就是0,没有小数。

好在这个项目里面的弹出层宽度是可以设置宽度的,看了下这个模糊的弹出,设置的宽度是865px,好吧,那就改改宽度解决问题!但是,如果是不定高度垂直居中呢?这就比较棘手了,不能用这个方案了,所以transform对于居中不是一个好的解决方案,在实际项目中应该尽量避免此方案!

所以,如果考虑兼容就老老实实的用table + table-cell方式去居中,不考虑兼容的话使用flex方式去居中!