柯森（Cosen）
## 引言 其实很早就想写一篇关于 `css` 的文章了。（拖延症，一直没写。。。） `css` 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。 今天带大家看几个用`css`（部分会用到`canvas`和`js`）实现的好玩儿的效果（不好好琢磨下，还真写不出来） > 本篇文章有参考一些`css大佬`的杰作，具体参考链接在文末有提及 ## 超能陆战队-大白 超能陆战队中的大白，相信你一定不陌生吧。影片中的大白又萌又可爱，十分惹人喜欢。 下面让我们打造属于自己的大白吧！ ### 效果  ### 思路 大白主要是由大大小小的圆和椭圆组成，主要会用到`border-radius`属性。 `整体bigwhite`由`头部head`（包含 eye、eye2 和 mouth）、`躯干torso`（heart）、`躯干连接处belly`（cover）、`左臂left-arm`（包含 l-bigfinger、l-smallfinger）、`右臂right-arm`（包含 r-bigfinger、r-smallfinger）、`左腿left-leg`和`右腿right-leg`组成。 相对还是比较简单的，具体实现如下: ### 代码实现 ####...
## 引言 继上篇文章「`Koa2+MongoDB+JWT实战--Restful API最佳实践`」后，收到许多小伙伴的反馈，表示自己对于`mongoose`不怎么了解，上手感觉有些难度，看官方文档又基本都是英文（宝宝心里苦，但宝宝不说）。 为了让各位小伙伴快速上手，加深对于 mongoose 的了解，我特地结合之前的项目整理了一下关于 mongoose 的一些基础知识，这些对于实战都是很有用的。相信看了这篇文章，一定会对你快速上手，了解使用 mongoose 有不小的帮助。 mongoose 涉及到的概念和模块还是很多的，大体有下面这些：  本篇文章并不会逐个去展开详细讲解，主要是讲述在实战中比较重要的几个模块：`模式（schemas）`、`模式类型（SchemaTypes）`、`连接（Connections）`、`模型（Models）`和`联表（Populate）`。 ## 模式（schemas） ### 定义你的 schema `Mongoose`的一切都始于一个`Schema`。每个 schema 映射到 MongoDB 的集合(`collection`)和定义该集合(collection)中的文档的形式。 ```js const mongoose = require("mongoose");...
## 引言 `Web API` 已经在最近几年变成重要的话题，一个干净的 API 设计对于后端系统是非常重要的。 通常我们为 Web API 使用 `RESTful` 设计，`REST` 概念分离了 `API 结构`和`逻辑资源`，通过 Http 方法`GET`, `DELETE`, `POST` 和 `PUT`等 来操作资源。 本篇文章是结合我最近的一个项目，基于`koa+mongodb+jwt`来给大家讲述一下 RESTful API 的最佳实践。 ## RESTful API...
## 引言 作为 `node` 自带的包管理器工具，在 `nodejs` 社区和 `web 前端工程化`领域发展日益庞大的背景下，`npm`已经成为每位前端开发同学必备的工具。 每天，无数的开发人员使用`npm`来构建项目，`npm init`、`npm install`等方式几乎成为了构建项目的首选方式，但是大多数同学对于 npm 的使用却只停留在了`npm install`这里。（相信删除 `node_modules` 文件夹，重新执行 `npm install` 这种事情你应该做过吧） 本篇文章主要是结合我以往的经验，带大家更深层次的了解一下 `npm`。 ## npm 中的依赖包 ### 依赖包类型 npm 目前支持一下几种类型的依赖包管理 -...
## 引言 随着 Web 技术和移动设备的飞速发展，各种 APP 层出不穷，极速的业务扩展提高了团队对开发效率的要求，这个时候使用 IOS/Andriod 开发一个 APP 似乎成本有点过高了，而 H5 的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式：`Hybrid APP`。 Hybrid 技术已经成为一种最主流最常见的方案。一套好的 Hybrid 架构解决方案能让 App 既能拥有极致的体验和性能，同时也能拥有 Web 技术 灵活的开发模式、跨平台能力以及热更新机制。本文主要是结合我最近开发的一个 Hybrid 项目（`https://github.com/Jack-cool/hybrid_jd`），带大家全面了解一下 Hybrid。  ## 现有混合方案 深入了解...
## 引言 在日常的开发工作中，我们通常使用 git 来管理代码，当我们对代码进行某项改动后，都可以通过 git commit 来对代码进行提交。 git 规定提交时必须要写提交信息，作为改动说明，保存在 commit 历史中，方便回溯。规范的 log 不仅有助于他人 review, 还可以有效的输出 CHANGELOG，甚至对于项目的研发质量都有很大的提升。 但是在日常工作中，大多数同学对于 log 信息都是简单写写，没有很好的重视，这对于项目的管理和维护来说，无疑是不友好的。本篇文章主要是结合我自己的使用经验来和大家分享一下 git commit 的一些规范，让你的 log 不仅“好看”还“实用”。 ## 为什么要规范 git commit 一直在说要规范...
## 引言 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。 其实，这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色的视觉体验，现在已经有数不胜数的网站应用了这项技术。 我是在最近的项目中用到了这块，觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。 ## 什么是视差滚动？ 视差效果， 最初是一个天文术语。当我们看着繁星点点的天空时，较远的恒星运动较慢，而较近的恒星运动较快。当我们坐在车里看着窗外时，我们会有相同的感觉。远处的山脉似乎没有动，附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。 看完上面这段，相信你对视差滚动的概念已经有了一个初步的了解。下面让我们先来看一下如何用 css 来实现视差滚动。 ## css 实现 css 中主要有两种实现方式:分别是通过`background-attachment: fixed`和`transform: translate3d`来实现，下面让我们看一下具体的实现方式: ### background-attachment: fixed 平时业务开发中可能不太会用到`background-attachment`，让我们先来认识一下它。 `background-attachment` CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。 它一共有三个属性:...
## 引言 浏览器缓存，一个经久不衰的话题。 先来看一下百度百科对它的定义: > 浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 本篇文章会从缓存位置、缓存过程分析、缓存类型、缓存机制、缓存策略以及用户行为对浏览器缓存的影响几方面带你一步步深入了解浏览器缓存。  ## 缓存位置 从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。 - Service Worker - Memory Cache - Disk Cache - Push Cache ### Service Worker Service Worker...
## 引言 webpack5 预计会在 2020 年年初发布，之前从 alpha 版本就有关注，本次重点更新在长期缓存，tree shakking 和 es6 打包这块。具体变更可以参考https://github.com/webpack/changelog-v5/blob/master/README.md。 webpack 是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ 本篇文章不会去探讨 webpack5 中所要更新的内容，我相信大多数前端同学对于 webpack 只是会简单的配置，而且现在像 vue-cli、umi 等对于 webpack 都有很好的封装，但其实这样对于我们自己是不太好的。尤其是想针对业务场景去做一些个性化的定制时。只有对 webpack 中的细节足够了解，我们才能游刃有余，本文将从 webpack 现有的大版本 webpack4，带你一步步打造极致的前端开发环境。 ## 安装...
这里先给一个结论：计算属性`computed`的本质是 `computed Watcher`，其具有缓存。 一张图了解下`computed`的实现：  - 首先是在组件实例化时会执行`initComputed`方法。对应源码`src/core/instance/state.js`的 169 行。 ```js const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, computed: Object) { // $flow-disable-line const watchers = vm._computedWatchers...