2020年11月_星野睡不醒

原创 WebAssembly体验之编码base64（AssemblyScript使用教程）

前言WebAssembly 不用多说懂的都懂，将运算函数通过 c++ 等编译为二进制的 .wasm 文件后，再通过 JavaScript 的 WebAssembly Api 调用即可进行光速计算。下面快速上手体验一把，不使用 c++ 等编译 .wasm 文件。WebAssembly 中文网：WebAssembly-CNWebAssembly 英文官网：WebAssembly-EN使用AssemblyScriptAssemblyScript 是 WebAssembly 社区的一个 JavaScr

2020-11-29 06:11:21 2610 3

原创 SpringMVC驱动Vue项目使用framemark语法打包错误解决（使用ftl变量）

问题使用 SpringMVC 的 .ftl 驱动 Vue 项目时，我们一般常用两种传递方式：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-

2020-11-25 01:36:51 636

原创 css格式规范stylelint在vscode使用教程（ctrl+s自动智能修复）

前言和 eslint 类似，stylelint 是 css 界的规范大师，标准配置内置了 170 余个配置项，对于有强迫症的人来说不得不用！每次去校验修复都要敲命令 fix 是非常不人性化的，我们追求的就是在编码期间就可以实时进行修复。相较于 eslint 在 vscode 有 eslint 插件可以进行自动修复，stylelint 也有相应的 stylelint 插件：官方网站：stylelint.io插件项目：stylelint / vscode-stylelint安装安装依赖在一个项目

2020-11-22 02:34:11 10282

原创 css在节点与伪类同时使用background-color/image多一毫米背景解决（解决多的一丝边框）

问题由于 css2 和 css3 对 background-color 及 background-image 的范围定义不同，当同时使用在伪类上时，会造成视觉上多一毫米（一丝）边框。↑ 可以看到当在节点本身和伪类上同时使用了 background-color 或 background-image 后，会造成如上结果。经测试，在 Safari 上没有此问题，在 2K 显示屏上并不明显，需要放大很多倍才能注意到。但在 1300 分辨率的中屏上多出来的一丝边框十分显眼。解决改用 animation 解

2020-11-21 17:48:29 609

原创 TerserPlugin针对性剔除banner文件头注释信息方法

问题TerserPlugin 默认已经开启了 js 压缩和注释抽取，但是针对文件头 banner 注释的抽取默认是 some 模式，也就是不提取 ! 开头的 banner 注释。什么是 ! 开头的 banner 注释，即说明该文件功能和作者信息的注释：/*! * rollup-utils-template v1.0.0 * (c) 2020-2021 author * Released under the MIT License. */如果不抽取，将会有多个 banner 在打包后的最小

2020-11-19 03:28:45 1566

原创网页fontmin最小化字体解决方案（覆盖全面+文件小+极致体验）

前言人性的网页浏览体验离不开炫酷的字体。有时我们只需要显示一两个字、或者只有一行字，那还需要加载几 M 大小的整个字体文件吗？解决我们可以使用 fontmin 进行字体抽取。安装 yarn add -D fontmin提取准备好我们的字体 .ttf 完整文件，建立转换模板如下：const Fontmin = require("fontmin");// 自定义const filePath = "./zhanku.ttf";const fontName = "zhanku";con

2020-11-16 02:47:22 6213

原创 Vue2/Vue3中快捷使用data中的变量反映到css变量（scss也适用）

前言很多情况我们需要主题搭配，亦或是统一便捷的管理，css 变量是必不可少的。在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。Vue2 用法在以前的 Vue2 中，我们通常使用计算属性反映 data 中的变量到 css 中：<template> <div :style="cssVars"> <p class="text">测试文本</p> </div></template>&lt

2020-11-10 01:08:23 14509 3

原创 vscode不安装字体使用本地/网络字体文件更改字体方法（没有管理员权限）

前言没有管理员权限是不能在本地安装字体的，如果想要在 vscode 中使用自定义字体该怎么办呢？解决vscode 就是 ts 写的一个应用，我们只需要像 web 一样处理它就可以了。帮助 > 打开开发者工具（ console 控制台）查看 <head> 标签，发现有一个 vscode 自带的固定 .css 存在：找到并打开这个 .css 文件，在尾部添加全局字体：@font-face { /* 你要添加的字体名，自定义 */ font-family: "

2020-11-10 00:41:34 1841

原创使用transform:scale(1)巧妙模拟position:relative的定位性质

结论当父级没有明确指明 position 时，其子级的 position: absolute 将相对于第一个具有 position: relative 的父级元素定位。此时给予该没有指明 position 的元素以 position: relative 定位限制，他和 transform:scale(1) 是效果一致的。HTML <div class="relative"> <div class="parent"> <div

2020-11-01 05:51:53 3251

幻日のヨハネ