前言可能大家看到【工作效率】，第一时间会想到是编码技巧、开发环境、效率软件、vscode 插件或者开发环境、CI/CD。不不不！以上那些确实可以提高业务的生产效率，应该说是每个程序员的必备本领，属于技术能力范畴，也叫硬实力。（这块有时间另开一篇分享）不少程序员，特别是初中级的常有个误区，就是只要技术牛逼就行...

使用 Vite + React + Typescript 打造一个前端单页应用模板最近前端大火的 Vite 2.0 版本终于出来了，在这里分享一下如何使用 vite 构建一个前端单页应用该文章主要面向对 Vite 感兴趣，或者做前端项目架构的同学源码地址，欢迎 star 跟踪最新变更：fe-project-base通过这篇文章，你能了解到以下几点：vscode 编辑器配置...

最近尝试用React hooks相关api写一个登陆表单，目的就是加深一下对hooks的理解。本文不会讲解具体api的使用，只是针对要实现的功能，一步一步深入。所以阅读前要对 hooks有基本的认识。最终的样子有点像用hooks写一个简单的类似redux的状态管理模式。

最近在项目开发过程中，有个一个多级多选的公共组件开发需求，特在这里记录下开发过程中所做的一些优化以及分享一下我是如何从零开发并设计一个组件的思路，希望给阅读这篇文章的读者带来一点收获。

这几天换设备，就跟搬新家似的，难免又要布置一番，加上疫情爆发，凸显了在家办公的重要性，故借此机会做个分享与记录。 系列篇幅较长，我会分次更新。 本文环境基于 Mac 系统，分享我的外设和常用的软件、配置，包括: 外设（笔记本、显示器、鼠标键盘、电脑椅） 效率软件 常用快捷键 前端必备环境、工具 chrome 插件 vs...

[链接]

在 2015 年，公司前端大佬猫哥基于 FIS3 深度定制开发了一套前端工程体系 mz-fis,该框架经历3年来的网站改版升级需求，都很好的完成了需求任务。 但随着项目越来越大，以及前端技术快速迭代。老项目的痛点越发明显。

| ip | hostname | 用途 || 172.16.180.251 | k8s-master | master 节点 || 172.16.180.252 | k8s-node1 | node 节点1 || 172.16.180.253 | k8s-node2 | node 节点2 |

为什么使用redux 使用react构建大型应用，势必会面临状态管理的问题，redux是常用的一种状态管理库，我们会因为各种原因而需要使用它。 不同的组件可能会使用相同的数据，使用redux能更好的复用数据和保持数据的同步 react中子组件访问父组件的数据只能通过props层层传递，使用redux可以轻松的访问到想要的数据 全局的st...

之前看到一个指尖冒险游戏，觉得挺有意思，就想学习一下怎么实现，毕竟当产经提出类似的需求时，问我等开发可不可以实现的时候，不至于回答不知道。本文的主要思路，参考的是凹凸实验室的这篇文章：H5游戏开发：指尖大冒险，通过这篇文章和代码，学习游戏搭建的整体思路和关键技术点。通过CreateJS的中文教程，学习Creat...

gitlab-ci 全称是 gitlab continuous integration，也就是基于 gitlab 的持续集成工具。中心思想是当每一次push到gitlab的时候，都会触发一次脚本执行，然后脚本的内容包括了测试，编译，部署等一系列自定义的内容。高版本的 GitLab 自带了 GitLab CI,所以不需要另外安装。

如今前端工程越来越复杂，打造一个好用的工作流也显得越来越重要。本文讲分成二个部分，通过简单例子，来介绍上图中那条鱼和狐狸 ：） part1 : docker 本文的项目代码part2 : gitlab-ci 点我跳转 ok， 那么现在就开始第一部分 一、什么是 Docker ？ Docker是一个基于轻量级虚拟化技术的容器引擎开源项目，可以轻松的为任...

在去年的七月六号的时候，发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章，文章主要是介绍 vuex 的基本使用方法，发现对大部分的入门同学有很大的帮助，时至今日还有很多同学不断的点赞与收藏，浏览量最高达到 20.4K 。鉴于前端技术发展更新快速，特此在这里重新整理一篇 vue2.0 版本的 vuex 基本使用方法，希望能...

在不同的路由页面，我们需要动态的修改文档标题，可以将每个页面的标题配置在路由元信息 meta 里面带上，然后在 router.afterEach 钩子函数中修改：

在最近项目中需要实现一个精灵动画，素材方只提供了一个短视频素材，所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求。在这篇文章中，主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 sprite 图片与如何使用 canvas 绘制精灵动画

前段时间对公司的社区h5网站，进行改版（整站重写）。老版本的网站是在一套古老的php框架下开发的，包含很多模板文件，大部分页面都是后端模板渲染，前端开发时要与后端沟通模板逻辑的编写，前后端耦合严重，非常不利于开发。为了实现前后端分离，减轻服务端的渲染压力，我们决定使用目前流行Vue框架，进行前端页面组件...

当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候我以为创建组件只需要调用createClass这个api就可以了；但学习了ES6的语法后，又知...

ansible是一个非常棒的运维工具，可以远程批量执行命令、上传文件等自动化运维操作，由于要搞配置管理，初始化等批量操作，而自己对ansible相对熟悉,因此选择了ansible playbook。不过在调用playbook api的过程中，发现原始api并不能满足我的需求，网络上多数文档还是1.0版本，因此下载了2.0源码查看，重写了部分类。因...

生成证书 1. 使用openssl生成密钥privkey.pem： openssl genrsa -out privkey.pem 1024/2038 2. 使用密钥生成证书server.pem： openssl req -new -x509 -key privkey.pem -out server.pem -days 365 证书信息可以随便填或者留空，只有Common Name要根据你的域名填写。 以我的个人网站为例Common Name (e.g. server FQDN ...

1.什么是单点登录 {代码...} 2.实现单点登录 {代码...}

Logstash:是一个应用程序,它可以对日志的传输、过滤、管理和搜索提供支持。我们一般用它来统一对应用程序日志进行收集管理，提供Web接口用于查询和统计

HTTP/2 is the future of the Web, and it is here! 使用 HTTP/1.1 和 HTTP/2 在相同环境各加载 300 多张小图片，性能相差一倍。 你可以点击这里的 DEMO 体验一下，HTTP/2 的加载快感。 历史 超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目...

构建一个自定义 angular2 输入组件 今天我们来学习如何正确的构建和一个具有和 <input type="text"> 同样作用，但同时也具有自己的逻辑的输入组件。 在读这篇文章之前，希望你已经把官方的文档和案例都看过至少一遍了，具体的一些概念和细节不会在文章中讲解。 我们先来看一下我们这篇文章里面所介绍的组件的表现...

video.js是一个优秀的视频播放器库，不过官网的示例中，是作为全局变量videojs引入的。如果我们的项目使用ES6风格的模块，用webpack来做打包的话，就需要做一些额外的工作。本文介绍我在使用的时候遇到的一些“坑”。

近日整理文档时发现多年前的这个文档还是蛮实用的，然后在网络搜索了一下并没有相关的译文，所以决定把它翻译过来，如有不当的地方请多包涵和指正。原文地址：[链接]

在ui自动化测试过程中，目前存在最大的缺陷就是如果产品的ui或者结构改了那么这个项目进行的自动化测试脚本可能要面临全面维护。这也是目前ui自动化面临的很让人崩溃的事情。因此现在很多互联网产品项目发现ui自动化在测试中的价值越来越小，因为互联网产品的迭代太快，自动化测试组往往刚刚完善了自动化脚本，项目也跑...

网页从远古时代的『webpage』尤其是一种静态页面的存在方式，发展到当下拥有着复杂的功能与交互逻辑的面向「客户端」更愿意被称之为『webapp』的形态的整个过程中，网页的开发不再是简单的界面拼凑来显示静态的内容，而是要通过维护和管理页面上的各种状态，例如服务端返回的数据、本地临时存储的数据、视图界面该被隐藏...

一个好的程序员应该有能力掌控你写的代码，能够以最简单的方法使你的代码正确并且可读。作为一名优秀的程序员，你会编写尽量短小的函数，使代码更好的被复用；你会编写测试代码，使自己有足够的信心相信代码会按原本的意图正确运行。没有人喜欢解bug，所以一名优秀的程序员也要会避免一些错误，这些要靠经验获得，也可以...

事务是恢复和并发控制的基本单位，保证 ACID：原子性、一致性、隔离性、持久性。 对于全是异步的 Nodejs 而言， 并不适合做事务操作： 代码书写上： try ... catch ... 是写给人看的，但是属于同步方法，局限性很大。 callback 简直是噩梦。 Promise.then(...).catch(...) 相对而言好一点。 ES7 的 async ... await ... ...

WebP是Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽，减少页面载入时间，节省用户的流量。