Fizzy Zhang

Notice

当前为 hexo baozi 主题示例站点，FizzyZ 个人站点请访问 xxx

前端实现新版本发布提示

系统在发布后，会有希望用户刷新的业务场景。本文仅为 前端发布，纯前端实现提示的场景提供一种思路/方案。如果后端发布也要触发提醒刷新，那一般只能通过接口交互方案来触发前端提示。

查看全文
react 项目搭建

概述

示例项目地址：https://github.com/zzyxka/fizzy-react

  1. 创建项目：包管理、镜像源
  2. webpack 打包配置：基础打包配置文件、使用 plugin 处理 html
  3. 在项目中使用 CSS：CSS Module, postCSS, 分离打包CSS
  4. 在项目中使用 React 和 TS - Babel
  5. 规范编码 Lint - ESLint, StyleLint
  6. 使用 Prettier 格式化项目
  7. 客户端路由 ReactRouter（Lazy Loading 方案）
  8. 开发生产分离：devServer、HMR；treeShaking、css 压缩；多线程打包、外部 CDN 等等
  9. 扩展
    1. UI 库：ant-design
    2. 状态管理 redux
    3. 其他流行方案：CSS IN JS 的 styled-component、Tailwind CSS 等不赘述
查看全文
判断用户环境/是否为 Chrome 浏览器

背景

toB 业务系统只打算兼容 Chrome，其他浏览器层出不穷的兼容问题不打算考虑。新版 Edge 和 Chrome 特性基本一致，所以不考虑细分判断 Edge 。

方案

使用下述判断基本满足条件（PC 和 移动端的 Chrome/Edge 访问）。

1
isChrome = /Chrome/.test(navigator.userAgent) || /CriOS/.test(navigator.userAgent);

示例页面：https://zzyxka.github.io/pages/browser-ua/index.html

CriOS 主要是为了判断 IOS 移动端 Chrome，原计划是通过 window.chrome 来判断，但经过测试发现，IOS 下的 Chrome，既没有 window.chrome 对象，又没有 包含 Chrome 的 userAgent。

查看全文
基于 Electron 的团队任务提醒工具

日常工作线上化后，很多时候需要自动化给团队的同学推送消息。基本上会采用企微机器人的方式，但公司企微机器人服务因为撑不住，故不给非业务诉求使用了，只能退而求其次，想到使用 node-mail 来发邮件，但腾讯企业邮箱又有发信限制，其他没有发信限制的邮箱又不够安全合规。最终有了用 Electron 做一个桌面工具给团队同学安装使用的想法，后台(软件最小化)获取 websocket 消息推送，借助 Electron 能力，弹出 mac 消息提示。

举例一个实际的场景：系统发版申请，现有一个 web 页面，用来填写发版申请单，填写完成后推送提醒给发版执行人

核心处理：

  1. websocket 服务：使用 Node 提供 websocket 服务，web 系统/ node 服务 完成消息交互测试
  2. Eleectron 应用搭建：
    1. 使用 Electron 加载 web 系统，登录后传入 用户ID 连接 socket
    2. 使用 Electron 中 Node 线程获取 sokcket 消息并弹出提醒
查看全文
Electron 笔记

过去在工作中因需要，匆忙给政企部门封装过一个 Electron 客户端应用，整个过程非常“敏捷“，印象中有很多版本方面的差异和兼容问题，但没有总结，这里对着官网整个基础 mac 应用，学习整理下各方面功能实现及 API 调用。

官网：https://www.electronjs.org/

本文完成 DEMO : https://github.com/zzyxka/electron-demo-app

注：本文以 mac 平台为准，其他平台可能需要增加“补丁”类模板代码。

概述

查看全文
github打不开的解决办法

问题

常常因为网络环境，遇到 github.com、github.io、raw.githubusercontent.com 等网址打不开，比如：博客用 raw.githubusercontent.com 图床，出现图片裂开等情况。

解决方案

通过多种方式（亲测只有 github520 方案稳定些），改 hosts，让其能够成功解析出 IP 地址，从而访问 github.com 等网址。

github520

https://gitee.com/klmahuaw/GitHub520

刷新 DNS 缓存

查看全文