前端

如何实现类似 lodash 的 get 与 merge 函数

lodash 基本上成为了写 javascript 工具库的标配,它广泛应用在各种服务端以及前端应用中,但是它的包体积略大了一些。对于服务端来说,包的体积并不是十分的重要,或者换句话说,不像前端那样对包的体积特别敏感,一分一毫都会影响页面打开的性能,从而影响用户体验。

正因为前端包体积对于用户体验的重要性,因此有各种各样减小包体积的方法。针对 lodash 来说,你完全不必要引入 lodash 的所有工具函数,你只需要按需引入或者直接使用单函数包。关于按需引入你可以参考以下文章

Lessons on tree-shaking Lodash with Webpack and Babel

在针对我的个人站点中的 lodash 进行优化时,如果没记错的话,lodash 从以前 gzip 后的 80KB 变为了 20KB,相对来说还是比较大。而当我全局搜索了 lodash 的引用之后,发现 90% 的场景都是在使用 _.get

另外,随着 ES6+ 的发展,以及浏览器与 Node 对它的支持,很多 lodash 的函数都很容易自己来实现或者说已被实现,如 _.assign_.trim_.startsWith 等等已被 ES6+ 实现,而 _.uniq 又很容易通过 new Set() 来解决。有人就在 github 上总结了 you-dont-need/You-Dont-Need-Lodash-Underscore,其中囊括了很多工具函数很简易的实现。

从数据库到前端,使用 enum 代替 constant number

在我经历过的几个以node为主的后端项目中,都有一个文件 constant.js。顾名思义,里边保存着各种常量,而大多是字符串与数字的对应关系。

但是在实际工作中,根据数字来调试相当费劲,先不说后端代码中 where (status === 1) 这种可避免的神奇操作。(PS: 虽然我在吐槽它,但是有时我也会犯,给后来不熟悉业务者一脸懵逼…)。在数据库中查询也会遇到一些问题。

jwt 实践邮件验证与登录

去年我写了一篇介绍 jwt文章

文章指出如果没有特别的用户注销及单用户多设备登录的需求,可以使用 jwt,而 jwt 的最大的特征就是无状态,且不加密。

除了用户登录方面外,还可以使用 jwt 验证邮箱验证码,其实也可以验证手机验证码,但是鉴于我囊中羞涩,只能验证邮箱了。

另外,我已在我的试验田进行了实践,不过目前前端代码写的比较简陋,甚至没有失败的回馈提示。至于为什么前端写的简陋,完全是因为前端的代码量相比后端来讲实在过于庞大…

另外,如果你熟悉 graphql,也可以在本项目的 graphql-playground 中查看效果。

使用纯 CSS 实现仿 Material Design 的 input 过渡效果

以前一段时间,基于对 nextgraphql 的调研,再加上本人的兴趣,我做了一个站点,也作为我以后各种技术折腾,实践以及兴趣交汇的试验田。

最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码,就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册,而在登录注册时,为了多写一些 CSS,我决定实现一个 Material Design 的表单过渡效果。

实现效果见 诗词弦歌 - 登录

开始之前,你先看看是否认识以下几个选择器。如果不,那么通过本文你可以学习到以下几个选择器,以及他们的试用场景

  • :not(:empty)
  • input:not([value=""])
  • input:valid
  • input:not(:placeholder-shown)



浏览器中的二进制以及相关转换

浏览器中的二进制以及相关转换

最近工作中遇到了很多有关二进制的处理,如PDF的生成,多个PDF的打包,音频的拼接。为了数据的一致性,以及减少与后端通信的复杂度,工作量都在浏览器端。

浏览器,或者前端更多处理的是 View 层,即 UI = f(state),状态至界面的转化。但是也有很多关于二进制的处理,如

  • 下载 Excel
  • 文档生成 PDF
  • 对多个文件打包下载



如何使用 docker 高效部署前端应用

docker 变得越来越流行,它可以轻便灵活地隔离环境,进行扩容,方便运维管理。对开发者也更方便开发,测试与部署。

最重要的是, 当你面对一个陌生的项目,你可以照着 Dockerfile,甚至不看文档(文档也不一定全,全也不一定对)就可以很快让它在本地跑起来。

You-Dont-Know-JS 疑难汇总

最近我看了 You-Dont-Know-JS 的两个小册,在看书的过程中,为了方便以后索引与更深入的了解,也为了避免遗忘,我对每一册的较为复杂的点做了总结,编辑如下。

[翻译] Grid 布局完全指南

原文链接见 山月的博客

英文链接

简介

CSS 栅格布局 (亦称 “Grid”),是一个基于栅格的二维布局系统,旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始,我们使用 tables,后来是 floats,positioning 和 inline-block,这些本质上是一些 hacks 而且许多重要功能尚未解决(例如垂直居中)。Flexbox 可以做到这些,但是它主要用来一些简单的一维布局,并不适合复杂的二维布局(当然 Flexbox 与 Grid 可以一并使用)。Grid 是第一个为了解决布局问题的 CSS 模块,只要我们做过网页,就会遇到这些问题。

使用 Grid 进行常见布局

grid 布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前,grid 仅仅只有 Edge使用前缀能够支持,为了更好地体验,可以使用 Chrome 浏览器,在 chrome://flags 开启 #enable-experimental-web-platform-features 选项。

使用 Grid 进行常见布局示例

Grid Layout [class^=grid] { background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, #fdfdfd 4.16666667%, #fdfdfd 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, #fdfdfd 12.5%, #fdfdfd 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, #fdfdfd 20.83333333%, #fdfdfd 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, #fdfdfd 29.16666667%, #fdfdfd 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, #fdfdfd 37.5%, #fdfdfd 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, #fdfdfd 45.83333333%, #fdfdfd 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, #fdfdfd 54.16666667%, #fdfdfd 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, #fdfdfd 62.5%, #fdfdfd 66.