基于 rem 的前端布局方案

2020-04-29 · 635 chars · 4 min read

本文很简单,分享一下我们目前使用的 rem 布局方案,大体的思路和之前社区里的其他方案基本一致,但是在实际使用中发现不少问题,逐渐演变成了今天的模样。

目前这套方案大体上是比较稳定的,可能日后随着设备的更新、迭代、升级,vw 等新方案会越来越普及,布局也就不会像现在这么麻烦了。

HTTP 缓存策略

2019-09-25 · 1,348 chars · 7 min read

本文是一篇总结,梳理 HTTP 的缓存策略。

背景是期望直接使用该策略,优化客户端 Native 的网络访问,所以总结了相关内容分享给服务端和客户端开发。

1. 缓存判断基本流程

1.1. 第一次请求

第一次请求,没有缓存,单纯的客户端请求,服务端响应,如图:

Egg 和 Webpack 项目搭建实践

2019-03-30 · 726 chars · 4 min read

最近的项目技术栈使用 Egg + React,因为本身有 Egg,所以不希望在单独启动类似 webpack-dev-server 的工具来运行前端,而是在开发模式下,前端直接基于 Egg 运行起来。想法是好的,可是实现起来颇费了一番周折。最终的效果在  Egg-Webpack-Starter,有同样需求的朋友可以看看。下面详细讲讲配置和使用方法:

我们主要的目的是使用 Egg + Webpack 搭建一套前后端统一的开发环境,主要包括:

  • 后端 Node.js 使用 Egg 框架
  • 前端使用基于 webpack 的工作流,与具体框架无关(使用 react 做演示)
  • 开发过程中无需分别启动前端与后端应用(基于 egg-webpack)

npm 根据 scope 区分用户及仓库地址

2018-12-31 · 526 chars · 3 min read

简介

npm 很早就支持了 scope 功能,当前很多流行的库采用这种形式发布,如 babel:

{
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0"
  }
}

scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。

Manjaro 手动降级 AUR 应用

2018-12-31 · 775 chars · 4 min read

平时工作用的笔记本装的 Manjaro 系统,然后公司有一些必须的办公软件并不支持 Linux,所以极其依赖 Virtualbox。就在昨天,看到 yay 提示有软件可升级,随手升了下,悲剧的升级 virtualbox-ext-oracle 时报错,之后发现虚拟机启动不了了:

Packages (1) virtualbox-ext-oracle-6.0.0-1

Total Installed Size:  13.76 MiB
Net Upgrade Size:       3.36 MiB

:: Proceed with installation? [Y/n]
(1/1) checking keys in keyring                                                   [##############################################] 100%
(1/1) checking package integrity                                                 [##############################################] 100%
(1/1) loading package files                                                      [##############################################] 100%
(1/1) checking for file conflicts                                                [##############################################] 100%
(1/1) checking available disk space                                              [##############################################] 100%
:: Processing package changes...
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
(1/1) upgrading virtualbox-ext-oracle                                            [##############################################] 100%
0%...
Progress state: NS_ERROR_FAILURE
VBoxManage: error: Failed to install "/usr/share/virtualbox/extensions/Oracle_VM_VirtualBox_Extension_Pack-6.0.0.vbox-extpack"
VBoxManage: error: Failed to load the main module ('/usr/lib/virtualbox/ExtensionPacks/Oracle_VM_VirtualBox_Extension_Pack/linux.amd64/VBoxPuelMain.so'): VERR_FILE_NOT_FOUND - /usr/lib/virtualbox/ExtensionPacks/Oracle_VM_VirtualBox_Extension_Pack/linux.amd64/VBoxPuelMain.so: undefined symbol: _ZNK16RTCRestArrayBase9baseCloneEv
VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component ExtPackManagerWrap, interface IExtPackManager
VBoxManage: error: Context: "RTEXITCODE handleExtPack(HandlerArg*)" at line 1211 of file VBoxManageMisc.cpp
error: command failed to execute correctly
:: Running post-transaction hooks...
(1/1) Arming ConditionNeedsUpdate...

在 Linux 和 Windows 上调试 iOS Webview

2018-09-05 · 582 chars · 3 min read

前端 H5 开发,在 macOS 上使用 Safari 调试 Webview 页面相对容易。但是在 Linux 和 Windows 上就比较麻烦了,今天在这里介绍两种方案,方便使用 Linux 和 Windows 的开发者。

由于我手头上只有一台 archlinux,所以主要演示 Linux 下的操作,Windows 只会更简单。

npm hook scripts 不执行的问题

2018-05-29 · 783 chars · 4 min read

最近在做一个 node 工具,需要在 npm install 之后做一些事情,然而又不希望在每个包里加 scripts(可以想象成 eslint 和 eslint plugins,我不想在每个 plugin 里写 scripts,而是希望 eslint 在 plugins install 的时候“发现”他们,然后执行一些必要操作)。开始想各种方法,然后在 npm 文档 里看到了一个之前完全没印象的功能:"hook scripts" 。