前言国庆节马上要到了，今天就教你如何从0到1使用canvas生成国庆风微信头像。本文包含以下内容：vue3项目搭建，需求分析canvas合成图片原理github自动化部署开发过程遇到的问题及解决方案文末附源码及在线体验地址~搭建项目，分析需求项目的话就直接使用脚手架生成一个 Vue3 + TS项目 {代码...} 为了方便，使用了Element...

周末逛github的时候，发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码，比起在github仓库中查看更加方便

TypeORM 是一个ORM框架，它可以运行在 NodeJS、Browser、Cordova、PhoneGap、Ionic、React Native、Expo 和 Electron 平台上，可以与 TypeScript 和 JavaScript一起使用。 它的目标是始终支持最新的 JavaScript 特性并提供额外的特性以帮助你开发任何使用数据库的（不管是只有几张表的小型应用还是拥有多数据库的大型企...

前言用过express与koa的同学，对中间件这个概念应该非常熟悉了，中间件可以拿到Request、Response对象和next函数.一般来讲中间件有以下作用：执行任何代码对请求与响应拦截并改造结束request-response周期通过next()调用下一个中间件如果当前中间件没有结束当前request-response周期，必须调用next()函数，否则请求会处...

模块指的是使用@Module装饰器修饰的类，每个应用程序至少有一个模块，即根模块。根模块是Nest用于构建应用程序的起点，理论上Nest程序可能只有根模块，但在大多数情况下是存在多个模块的，每个模块各自封装一组相关的功能。

上篇文章的最后我们使用Docker部署了一个纯前端项目，但还有一个很重要的问题就是容器中产生的数据（比如log文件），容器一旦被删除，容器内的所有数据也就没有了，为了避免这个问题我们可以将数据存储到容器之外（比如宿主机），这样即使删除容器也不会丢失数据。一旦容器故障，我们可以重新创建一个容器，将数据挂载到...

Docker是一个开源的应用容器引擎，它是基于Go语言并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的linux机器上，也可以实现虚拟化。通过容器可以实现方便快速并且与平台解耦的自动化部署方式，无论你部署时的环境如何，容器中的应用程序都会运...

上篇文章我们了解了package.json，一般与它同时出现的还有一个package-lock.json，这两者又有什么关系呢？下面一起来了解吧。

随着前端的不断发展，package.json可谓是在前端项目中无处不在，它不仅在项目根目录会有，而且在 node_modules 中也存在。那么这个文件到底是干嘛的，又有什么作用？很多人对它的认识是不是只停留在dependencies、devDependencies项目依赖列表，或者是script项目的各种脚本指令等，实际上它能做的事情远不止这些。

上周突然发现自己的自己站点的图片全都403了，之前还是好好的，图片咋就全都访问不了呢？由于我每次发文章都是先发了掘金，然后再从掘金拷贝到我自己的站点，这样我就不用在自己的站点去上传图片了，非常方便。

Providers是Nest中的一个基本概念，许多Nest中定义的类都可以被视为一个Provider，比如：service、repository、factory、helper等，它们都可以通过constructor注入依赖关系，这就意味着类与类之间可以创建各种依赖关系，并且维护各个类之间依赖关系的工作将委托给Nest运行时系统。

前言之前看到过一个有趣的CSS效果，今天我们也来实现一遍，将动图GIF通过clip-path绘制成一个个跳动的字母。效果如下：GIF随便找的，嗯？这不是重点，重点是下面的实现过程，别被GIF吸引了。如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～绘制字母这是该效...

前言控制器主要是用来处理客户端传入的请求并向客户端返回响应。它一般是用来做路由导航的，内部路由机制控制哪个控制器接收哪些请求。路由为了创建基本控制器，我们需要使用@Controller装饰器，装饰器将类与所需元数据关联起来，并使Nest能够创建路由映射。我们使用nest-cli快速创建一个REST API风格的完整CURD代码。 {...

上篇文章我们学习了如何使用nest-cli来快速生成一个NestJS后端项目，当我们打开编辑器查看代码时，会发现整个代码风格有点类似JAVA的spring框架，并且你会发现一些service类在controller控制器的constructor中注入后，可以不需要手动new就可以直接使用该类对应的实例方法。

Nest 是一个渐进的 Node.js 框架，它可以在 TypeScript 和 JavaScript (ES6、ES7、ES8)之上构建高效、可伸缩的企业级服务器端应用程序。

上篇文章最后提到了我们可以通过performance的一些属性对性能做统计，我们会发现performance对象下有非常多的属性，远不止上篇文章提到的DOMContentLoaded与Load这两个事件。

CSS Paint API是Houdini项目的一部分。它允许我们使用自己的功能扩展CSS，所以我们可以不再需要等待新功能的发布，完全可以自己实现想要的新功能，可以说CSS Paint API就是CSS的未来。Houdini是一组底层API，它暴露一部分CSS引擎给开发者介入浏览器渲染与布局的能力，从而能够扩展CSS。

最近在做一些性能优化相关的工作，相信大家在工作过程中也会遇到一些性能优化相关的场景，这对于前端开发者来讲是一项加分技能。为了我们的用户在使用我们的产品时能够有一个非常好的体验，我们需要对页面进行诊断优化。在行业中，我们的页面P90在两秒内算是达标，超过这个时间那么你就可能会流失部分用户。

本篇文章将介绍一些webpack的进阶用法，演示内容继承自上一篇文章的内容，所以没看过上一篇文章的建议先学习上一篇内容再阅读此篇内容，会更有利于此篇的学习～

作为前端开发者，相信大家或多或少都接触过webpack，现如今webpack已经渗透在了前端的各个方面，所以我们有必要来了解并学习webpack，webpack 是一种用于构建 JavaScript 应用程序的静态模块打包器，它能够以一种相对一致且开放的处理方式，加载应用中的所有资源文件（图片、CSS、视频、字体文件等），并将其合并打包成...

我们平时在写代码的过程中，好像很少需要自己手动进行垃圾回收，那么V8是如何来减少内存占用，从而避免内存溢出而导致程序崩溃的情况的。为了更高效地回收垃圾，V8引入了两个垃圾回收器，它们分别针对不同场景进行工作。如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取...

一般来讲，电脑是不能直接运行我们的javascript代码的，它需要一个翻译程序将人类能够理解的编程语言 JavaScript，翻译成机器能够理解的机器语言。目前市面上有很多种 JavaScript 引擎，诸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌开发的开源项目 V8 是当下使用最广泛的 JavaScript 虚拟机，全球有超过 25 亿台...

相信小伙伴们都接触过npm/yarn，这两种包管理工具想必是大家工作中用的最多的包管理工具，npm作为node官方的包管理工具，它是随着node的诞生一起出现在大家的视野中，而yarn的出现则是为了解决npm带来的诸多问题，虽然yarn提高了依赖包的安装速度与使用体验，但它依旧没有解决npm的依赖重复安装等致命问题。pnpm的出现完...

我们知道，Javascript发展到现在出现了众多模块化规范，比如AMD、CMD、 Common JS、ESModule等，这些模块化规范能够让我们的JS实现作用域隔离。但CSS却并没有这么幸运，发展到现在却一直没有模块化规范，由于CSS是 根据选择器去全局匹配元素的，所以如果你在页面的两个不同的地方定义了一个相同的类名，先定义的样式就会...

最近写H5的项目比较多，该项目从年龄上看着还算比较年轻😂，整个架构应该是直接使用vue-cli基于vue2生成的，那底层打包工具自然也就是webpack，我们知道webpack有个通病，那就是随着项目的不断增大每次构建的时间也会随之越来越长。比如我们这个项目的单次冷启动就达到了惊人的1分20秒左右，每次跑完电脑风扇转的飞起，简...

AST抽象语法树想必大家都有听过这个概念，但是不是只停留在听过这个层面呢。其实它对于编程来讲是一个非常重要的概念，当然也包括前端，在很多地方都能看见AST抽象语法树的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。简单来说但凡需要编译的地方你基本都能发现AST的存在。

双线程架构在这之前，我们先来思考一个问题，小程序在架构上为什么会选择双线程？为什么是双线程？加载及渲染性能小程序的设计之初就是要求快速，这里的快指的是加载以及渲染。目前主流的渲染方式有以下3种：Web技术渲染Native技术渲染Hybrid技术渲染（同时使用了webview和原生来渲染）从小程序的定位来讲，它就不可能用...

对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面从加载到渲染完成的整个过程，就知道应该从哪方面下手了。

最近总是梦见一些小时候的故事，印象最深刻的就是夏天坐在屋顶上，看着满天的繁星，一颗，两颗，三颗...不由自主地开始了数星星的过程。不经意间，一颗流星划过夜间，虽然只是转瞬即逝，但它似乎比夜空中的其它繁星更吸引着我。听老人说，看见流星的时候许愿，愿望是可以实现的，此时早已把数星星抛之脑后，开始期待着下...

前言相信大家在工作中都遇到过这样一些奇怪的问题：1.为什么我写的z-index没有生效？2.为什么z-index大的元素却没有盖住z-index小的元素？3.如何让父元素盖住子元素呢？以上这些问题都跟CSS层叠上下文有关，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇怪现象背后的原理！如果这篇文章有帮助到你...