基于Webpack/TypeScript/Koa的环境配置

TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。

你不知道的CSS(三)

在前面两篇文章《你不知道的CSS(一)》和《你不知道的CSS(二)》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助,本文作为《你不知道的CSS》系列的第三篇文章,将继续在CSS技巧方面进行探讨,不同于前两篇的是,本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于:hover, :active, :focus之类的,因为这些在平常的项目中太常用了(然而我目前依然见过还有用js去添加.hover类来变化背景色的同学😴)。而伪元素如:before, :after相信大家也用的烂熟了。 当然对于比较常见的伪类(元素)不在本文的讨论范围类,本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了,抛开过去,拥抱变化吧~

你不知道的CSS(一)

CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一,CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目,抛开该项目的实用性不说,项目中的众多的DEMO就已经证明了CSS的强大。
当然,这篇文章不是为了介绍这个项目,而是整理了一些实用的CSS技巧,来解决我们在实际项目开发中遇到的的问题。文章也会长期更新,总结更多的技巧。每个技巧将结合demo或者图示来说明(如果demo无法打开,请自备梯子,原因你懂得🙀)。也许你此刻正在发愁的一个bug可以在这里找到答案😆。

从网易与淘宝的font-size思考前端设计稿与工作流

偶然间发现这篇文章,可以说,这是我见到的对移动rem单位做的最详细,最细心的一篇总结性文章,果断转载至本博客,以便有需要的同志们研究。

本文结合作者(流云诸葛)对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值。