使用echarts 构建3D立体柱状图

让数据大屏都动起来，折线型图增加了流动的光点。

基于echarts的带流动光效的折线图

本文主要记录使用echarts，Next.js实现3D数据大屏的过程，页面主要组件包括3d立体柱状图、动态流光折线图、3D地球（飞线、柱状图），无限滚动列表等。

3D数据大屏实现过程,使用echarts、Next.js

在日常开发中经常会遇见需要实现列表自动垂直向上循环滚动，让数据能在屏幕上 “动起来”。

React 大屏组件：滚动列表

在使用 Next.js 时遇到的一些常见问题及解决方案，用于记录。

Next.js 使用过程中常见问题记录

使用JS实现多个音频的拼接与合并

JS实现音频的合并或拼接实

PDF链接要渲染在页面上，pc端浏览器是可以直接显示PDF的，但是移动端浏览器、微信浏览器等不支持直接预览，打开以后会触发下载机制，通过尝试，最终选择了使用pdf.js。

使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端

在系统登录页中，点击chrome中的默认保存会自动填充账号密码，但是当前出于对安全的考虑，项目中要禁止浏览器的自动填充密码功能。

在React项目中，阻止浏览器浏览器禁止自动填充/自动补全/密码提示

记录项目UI组件库升级过程及所遇到的问题和解决思路。

antd4.x升级antd5.x

热搜榜网页版已更新，目前支持PC端 和 移动端访问，打工人上班时间摸鱼神器，一榜在手，遍知天下事，包含各大平台热搜榜单（微博、知乎、今日头条、百度、抖音...），项目持续优化中...

摸鱼神器--热搜榜

解决Vercel上生产模式下Vue/React项目的CORS跨域问题

配置vercel代理

vue3实现元素监听滚动事件，在使用的时候，通过监听到达底部的变量改变，可以做想做的事情，比如加载更多，或跳转页面等。本文中实现的场景为，导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

vue3中监听scroll事件，实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

vue\js实现一键复制

主要记录一些日常开发中可以使用到的一些免费api接口，目前包括 ip地址查询、天气查询

记录一些免费的 API接口

以往反编译小程序源码都是要从移动端获取，现在pc端（mac和win）都支持了小程序，从pc端获取显然是更方便的，由于本人使用的的macbook，本篇文章将会讨论如何从mac端获取小程序源码。

使用Mac电脑反编译微信小程序 （无需移动端模拟器）

可以使用GitHub Pages 来展示一些开源项目、主持博客甚或分享您的简历。 Next.js 是一个用于构建服务器渲染 React 应用的框架，搭配使用Next.js使用GitHub Pages可以定制化展示自己的网站。

利用GitHub Page-从零配置实现 自动化构建并部署Next.js项目（一）

Front-matter选项详解Front-matter 一般来说都是卸载md文档的最上方的，使用--- 分隔开，用来标识关于文章的一些信息，比如作者，日期等。

front-matter使用详解

使用模版字符串和 CSS 语法，生成一个样式化组件（StyledComponent），被包裹的自定义组件。

使用styled-components定义组件样式

架构一个Vite + typescript + vue3生态链项目

配置vite + Vue3.0 + ts

new Date()方法，safari浏览器接受的时间格式

safrai兼容Date

Next.js 是一个 React 开发框架。这意味着 Next.js 基于 React 并提供了部署 React 应用程序所需的所有核心功能。一些常用的功能是服务器端渲染 (SSR)、预渲染、静态站点生成 (SSG)、webpack 支持、页面路由等。

Next.js学习手册

使用SVG中的Symbol元素制作Icon图标变得越来越流行，这种技术被称为SVG Sprite。这里所说的Sprite技术，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。

Next.js使用svgo-loader svg-sprite-loader处理项目中的Icon

在日常开发中，经常会遇到一台电脑需要配置多个git账户的场景，例如工作项目在gitlab、日常练习项目在github等等。这就需要我们配置一个共存的开发环境。本文主要介绍如何在mac上如何同时管理多个git账号 （gitlab、gitee、github）及遇到问题的记录。

mac同时配置gitLab、gitee、github共存的开发环境

本文主要介绍了两种安装方式，官网下载 / brew安装，两种方案均有详细介绍，可以按需采用。

mac安装node.js并且实现node多版本自由切换

本文主要介绍了Nprogress的基本用法和配置，以及在Vue、React等场景下的使用方法。

浏览器进度条-Nprogress

为了获取实时数据，前端需要和后端保持通信，HTTP 协议只能是客户端向服务器发出请求，服务器返回查询结果。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。一般通过以下几种方式实现即时通讯。

Websocket心跳检测、重连机制

根据埋点统计出页面元素的点击，页面按钮的点击转化，有助于在后续中作进一步视觉调优.

常见的数据埋点方式介绍

数据埋点在现在的项目开发中都是不较比常见的，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。

vue项目进行前端埋点，记录页面停留时间

vue自定义音频audio样式及操作面板

vue-cli4+ts建立vue项目

在利用element-ui Table编写项目时,会存在表格展示的数据存在分页的情况,基本每个页面都要配置，很影响开发效率，也不利于后期维护，所以统一封装一下，便于开发使用。

基于element封装table、分页

由于项目需求需要将一维数组转化为树形结构的数组,实现评论数据的展示,所以封装了一个方法去解决

js数组转化为树形结构

User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

node & JavaScript 通过UserAgent获取用户设备信息

公司项目做国际化，使用vue-i18n实现，运营或产品会给到很多对应的Excel版的多语言包，而前端使用时则需要转换成语言包zh.js/en.js等。一个一个文件手动处理显然是不现实的，只要写在excel里，然后用node.js导出我们需要的语言包就可以了，可以大大节省我们的开发时间，减少出错率。

国际化语言包：excel-to-js

实现call、apply以及bind函数

函数节流、防抖

在react项目中需要通过监听页面滚动高度，控制页面样式动态展示

react监听页面滚动事件：window.addEventListener的scroll无效

基于vue的图片剪裁工具vue-croppe

在项目过程中，我们常常需要获取IP的所在地。而这一功能一般都是通过一些数据网站的对外接口来实现，这些接口一般情况下都是付费使用的。在这篇文章中我将记录，基于node.js的阿里云免费IP地址查询接口的使用。