前端相关
文章平均质量分 73
王乐平
这个作者很懒,什么都没留下…
展开
-
多窗口量子纠缠技术实现
最近看到下面这个,多窗口下实现量子纠缠的特效感觉很惊艳和有创意。除 Three.js 的特效果部分,技术实现上还是很简单的。这里面核心两个技术点:比较常用的有两种方式:通过设置 localStorage/sessionStorage 的 setItem 可以在其他同源窗口下触发 StorageEvent 事件,实现广播效果:演示:兼容性:通过创建同名频道进行通讯。演示:兼容性:通过获取浏览器窗口在屏幕的位置+内外宽高,就可以获取到绝对的位置。3. 实现下面我基于 BroadcastChannel原创 2023-12-07 15:57:21 · 1202 阅读 · 0 评论 -
大量 SVG 图标在 React 中的极速集成与应用
这边建议 WOFF 字体优先,WOFF 是为 Web 设计的字体格式,WOFF 内置了字体的压缩,会有比 TTF/OTF 更小的文件体积,浏览器兼容性在 98% 左右。在一些业务场景中,可能需要使用一些业务上自定义的图标,而这些业务图标消费起来需要很多重复的流程和样板代码,用多了很繁琐。期待效果,尽量减少 SVG 样板代码的编写,减少特殊样式的注入,减少 import 及 减少网络请求。如何使用 svg 的全部优势,无论纯色还是彩色的都可正常使用,且减少样板代码及缩短链路呢?原创 2023-12-04 12:26:34 · 1377 阅读 · 0 评论 -
前端开发环境与真实环境的接口联通的那些最佳实践
CORS 的问题本质是浏览器的限制,Same-site 导致的登陆 Cookies 无法携带也是浏览器的限制,那直接把浏览器的限制给去掉不就可以迎刃而解了。加上现在的构建或脚手架工具,如 Vite、Webpack5、Umi 等在开发环境下采用 ES Module 构建,线上采用单文件构建,导致传统的,访问业务域名,然后将资源代理到本地的方式出现问题,所以更合适的方式应该是如何在前端的本地环境下,可以流畅的访问业务域名下的接口。这两个问题,通常业务侧是不能给解决的,所以需要前端自行处理这两个问题。原创 2023-12-02 22:09:33 · 1019 阅读 · 0 评论 -
使用 Electron 来替代本地调试线上代理的场景
Chrome 94 版本不再放行,无法再携带 Cookies,也就是 Electron v14 之后的版本无法通过。新版本(v27),通过复写。原创 2023-11-13 11:24:59 · 771 阅读 · 0 评论 -
Rust Wasm 图片转 ASCII 艺术
可以把一些有意思的图片转成 ASCII 艺术图,嵌到代码中,或者 log 中。整体原理比较简单,这里用 Rust Wasm 实现一下。原创 2022-08-17 18:12:04 · 3050 阅读 · 0 评论 -
小米 12S Utra 莱卡水印生成在线工具
最近看到小米12SUtra的发布,看了下详情页面,发现演示的照片都好看的,包含了品牌、设备、镜头、位置等信息,如下图所示作为一个摄影爱好者,也希望把自己的照片也输出这些信息。但目前此类水印好像只在小米12SUtra的编辑器里有,没有其他途径。于是就写了这个小工具。.........原创 2022-07-17 15:56:04 · 21399 阅读 · 1 评论 -
国内高速前端 Unpkg CDN 替代方案
1. 背景目前国内有很多 NPM 的 CDN,可以高速支持相关包文件的访问下载,如:BootCDN: www.bootcdn.cn七牛云: www.staticfile.org360: cdn.baomitu.com字节跳动: cdn.bytedance.com但这些 CDN 并不全,很多 NPM 上的包 在这些 CDN 上是找不到的。原因是,它们都是从 CDNJS 上同步的数据,CDNJS 并不会把所有的 NPM 包进行同步,所以当你需要的一些 NPM 包没有在 CDNJS 上面,你就用不原创 2022-03-19 16:20:06 · 3839 阅读 · 0 评论 -
XState Viz 可视化和调试状态机
1. 前言状态机的一大好处就是可以可视化状态,降低业务的理解成本和相互间的沟通成本。目前 XState 官方提供的可视化工具已经做的很不错了,但用起来偏重,国内访问也比较慢。这边我再原基础上进行了优化,并增加了部分新功能,开发了 Viz-Lite 版。2. Viz-LiteViz-Lite 可视化工具地址主要有如下功能:直接在右侧区域进行编写或粘贴 XState 状态机代码,右侧进行可视化。可以在左侧可视化区域通过点击进行状态机执行。可以在右侧事件面板中查看事件历史,且可以手动进行自定义原创 2022-03-17 21:37:44 · 1153 阅读 · 0 评论 -
实现图片本地化 ServiceWorker + IndexedDB
1. 背景在一些安全场景,或者一些本地化的场景(如本地化的 Markdown 记事本),如果有图片上传并需要查看的场景,在不上传到服务器的情况下,实现这个效果,通常是把图片 Base64 化,但编码后的字符串会非常长,体验较差。这里不妨尝试使用 ServiceWorker + IndexedDB 来解决这个问题。2. API 优势IndexedDB 几乎什么都可以存储,二进制类的文件更不在话下,且存储空间在大多数浏览器中,是和系统空间持平的。ServiceWorker 可以做页面的网络代理层,所.原创 2022-03-16 18:59:01 · 3057 阅读 · 0 评论 -
解决写文档对于图片边框的强迫症
1. 写文档的困扰在写文档进行配图时,很多时候图片是白色背景的,会导致文章中的图片区域附近有大量空白的感觉,强迫症患者很难受。目前语雀做的是很好的,可以给图片加边框或者阴影,而一些文档博客平台(CSDN、掘金、SegmentFault、知乎等)都是没这块功能的。对比一下:平常有这困扰的时候,通常打开 Photoshop 解决一下,但每次都得多走好几步。尝试找了下有没有在线工具,找是找到了,但要么操作繁琐,要么把你的图片先传到服务器,体验和安全都不好。于是就写了下面这个在线小工具。2. 工具原创 2022-03-09 16:21:37 · 429 阅读 · 0 评论 -
create-react-app 使用代理做 mock
1. 背景很多情况下,为了测试需要一些接口的 mock 场景,基于 create-react-app 生产的项目好处在于它内置了这块代理的能力,给用户提供了很大的方便。2. 代理方式create-react-app 默认提供了两种方式,关联到 webpack-dev-server 中:简单方式:在 package.json 中添加 proxy 字段,指定你的 mock server 地址就可以。高级方式:在 src 下创建 setupProxy.js 文件,使用 http-proxy-middl原创 2022-03-04 21:16:22 · 1109 阅读 · 0 评论 -
常用注入 Script 方法
js 代码注入原创 2022-01-31 17:58:10 · 2351 阅读 · 0 评论 -
前端 Mock 工具
名称地址安装Mock.jshttps://github.com/nuysoft/Mocknpm install mockjsmockmhttps://github.com/wll8/mockmnpm install mockmJSON Serverhttps://github.com/typicode/json-servernpm install json-serverMSW(Mock Service Worker)https://github.com/...原创 2022-01-02 23:12:06 · 937 阅读 · 0 评论 -
主动型页面性能利器:Page Status
1. 背景当页面出现性能问题,如加载慢、页面卡顿等现象时,大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因,通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看(如图 1 所示),这无疑增加了客观看问题的成本。图 1当然,目前也是有一些不错的工具来评测分析页面,但这些工具都存在一些问题。下面主要说一下 PageSpeed Insights、Lighthouse 。1.1. PageSpeed Insights(Lighthouse)PageSpe原创 2021-09-11 12:16:48 · 491 阅读 · 0 评论 -
调试利器:浏览器 Logger
1. 前言在一些业务系统中,由于集成的平台产物或工具较多,而这些产物的 log 不收敛,很多时候打开控制台就是满屏的 log,自己的 log 需要在满屏的 log 中查找,或者在 log 上加一些前缀用 Filter 去过滤,严重影响效率。别人的 log 是动不了了,那自己的 log 是否可以收敛起来,自动加前缀,自动按日志级别显隐,功能全一点,原创 2021-08-12 19:39:52 · 562 阅读 · 0 评论 -
在线生成文本图片 CFC函数计算版
百度云函数计算 CFC 运行环境。使用sharp图处理(文档)。使用图片参数:width height r g b a文本参数:text fColor fSize fTop fLeft{HTTP触发器地址}?width=1000&height=300&fSize=120&fColor=%23d9333f&text=奥利给&r=253&g=239&b=242&a=0.9&fTop=80&..原创 2021-08-07 18:59:21 · 242 阅读 · 0 评论 -
「VSCode插件」提效工具 - 快捷面板
前言做为一个开发人员,在日常的开发过程中,经常会在 Terminal 中输入各种命令,如:npm i、npm start、git init、rm -rf、node_modules 等命令,看似方便,实则高频率的输入很烦人。那有什么方法可以把这些高频的命令给复用起来呢?来避免每次都要重复敲键盘的烦恼。实现由于我用的是 VSCode 编辑器,而 VSCode 是支持写插件的,所以就可以写一个 VSCode 插件,做一个快捷面板的功能,把一些高频用到的命令直接放到快捷面板上,就可以避免上面遇到的问题了。原创 2021-05-12 22:06:29 · 357 阅读 · 0 评论 -
「浏览器插件」网址小尾巴终结者
前言在我们日常的开发调试中,会在 URL 上添加一些特殊的小尾巴 用来显示调试界面或者开启一些特殊功能,当你接触了越来越多的系统后,你需要使用的小尾巴就变得越来越多,记忆和使用成本非常大,以及含有小尾巴的网址 在跳来跳去的过程中小尾巴可能丢失等问题,迫切需要解决。面临的问题这里主要面临两个问题:1. 小尾巴太多导致的记忆问题当一个平台切入了各种解决方案,每种解决方案都有自己的小尾巴时;或者你需要在多个平台间游走。这个时间会出现巨量的小尾巴,通常你需要用时,很难记清楚,因为小尾巴为了防原创 2021-01-10 18:24:59 · 2374 阅读 · 0 评论 -
Github Action 快速构建 Electron 应用
前言在开发 Electron 应用时,比较耗时的部分应该是构建打包的过程,像用 electron-builder 这种打包工具来说,它会根据你要打包的系统来下载应用的系统镜像打包工具,由于这些镜像的源文件托管在 Github 上,且 nodejs 上做网络加速很困难,所以这个过程十分消耗时间。当我们换一台电脑,还要经历相同的打包环境的准备时间。前段时间 Github 推出工作流功能,也就是 Github Actions,正好可以满足我们这种由于网络过慢导致准备环境成本高的问题。Github Ac原创 2020-12-31 17:45:36 · 1127 阅读 · 0 评论 -
「浏览器插件」非常好用的JSON-View
Chrome 商店地址查看/格式化 二合一。功能• 自动识别 JSON 内容,并在页面右下角创建切换按钮。• 支持展开/折叠节点。• 支持全部展开、全部折叠、展开一二三层节点操作。• 支持复制节点信息(Array/Object 节点复制内容自动格式化)。• 复制文本节点值 不会添加引号。• 自动识别超链接,可点击。• 支持在当前页面,原始内容和格式化内容随意切换。• 对于复制的JSON文本,可点击插件打开新的编辑解页面,缩短使用链路。自动识别JSON内容,右下角出现切换按钮为了保.原创 2020-10-23 11:11:20 · 1033 阅读 · 0 评论 -
各种浏览器缓存浅析
前言目前浏览器的缓存类型众多,HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等,这些缓存是如何产生的?命中优先级是怎么样?又该如何去使用它们?Disk Cache、Memory CacheDisk Cache、Memory Cache 属于强缓存,将缓存的响应写到内存或硬盘中,也属于 HTTP 缓存的产物...原创 2019-11-03 19:23:16 · 734 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Notification
# 前言在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 Dialog,或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足,在网页最小化的情况下,无法查看任何通知,导致用户无法及时获取通知信息。给力的 W3C 推出了 Notifications API,专注于 WEB 的通知。原创 2019-05-09 22:00:47 · 1338 阅读 · 0 评论 -
一步一步实战HTML音乐播放器
在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器,大家可以参考一下,接下来正式开始。音乐播放器效果播放器分析这里将播放器分两块来做:视图层(html + css)逻辑层 ( js )视图层分析视图中包含:播放器容器 播放器名称音乐专辑图音乐信息 歌曲名 歌手专辑名控制区 上一曲播放下一曲播放进度条播放时间 当前时间歌曲总时间音频控件 页面背景原创 2017-01-26 16:07:33 · 22452 阅读 · 14 评论 -
「工具」IndexDB 版备忘录
前言工作日常需要做一些备忘录,记录一些要做的事。在 Mac 上有使用系统的备忘录,但功能偏弱且文本格式调整不方便。再就是使用浏览器找专门的备忘录网站,功能是满足了,但是链路长,没有桌面软件直接。所以最后干脆自己写一个吧。思路开发上自然是 Web 应用快,且成本低不需要下载安装,而且现在 PWA 的 Web 应用支持安装为应用,所以搞起来。使用技术:ReactMarkedIndex...原创 2019-07-26 23:24:22 · 360 阅读 · 0 评论 -
基于HTML5陀螺仪实现ofo首页眼睛移动效果
最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果。ofo眼睛效果效果分析从效果中不难看出,是使用陀螺仪事件实现的。这里先来看一下HTML5中陀螺仪事件的一些概念。陀螺仪事件为deviceorientation,这里主要获取事件中的alpha,beta,gamma。aplha行动装置水平放置时,绕 Z 轴旋转的角度,数值为 0 度到原创 2017-07-18 09:40:22 · 5576 阅读 · 3 评论 -
PWA(Progressive Web App)入门系列:(四)Promise
前言这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。Promise出现的背景在JavaScript当中,处理异步操作时,我们需要知道操作是否已经完成,当执行完成的时候会返回一个回调函数,表示操作已经完成。所以在处理异原创 2018-01-02 00:54:23 · 1930 阅读 · 0 评论 -
CSS动画实战:创建一个太极Loading图
这里主要是使用CSS的animation和伪类来构建,分析设定关键帧的执行顺序和时间断。效果动画分析首先通过效果对动画执行进行一下分析:边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执行。针对上面的1效果是需要思考一下的,其他都比较容易实现。5效果只需设置属性animation-direction: alternate即可,整体动原创 2017-08-01 14:50:09 · 4911 阅读 · 2 评论 -
ZRender实现粒子网格动画实战
注:本博文代码基于ZRender 3.4.3版本开发,对应版本库地址:ZRender 库。效果实现分析通过上面显示的效果图,可以看出,这种效果就是在Canvas中生成多个可移动的点,然后根据点之间的距离来确定是否连线,思路比较简单。实现问题:保持Canvas 100%显示resize时,自动调节Canvas尺寸和内部变量生成圆点实现圆点的移动,及边界处理实现原点的直线连接Canvas设原创 2017-04-24 15:57:13 · 10371 阅读 · 1 评论 -
HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图。下面,用HTML5的Cavas来实现雷达图。效果一、创建Canvasvar mW = 400;var mH = 400;var mCtx = null;var canvas = document.createElement('canvas');document.body.append原创 2017-03-05 13:52:46 · 15736 阅读 · 6 评论 -
Gulp在前端的常用操作实例
以前在做代码优化的时候,一般都用一些网上的在线工具来完成,写LESS的时候,一般用Koala来编译,感觉用起来也挺不错的。但是现在构建工具的出现,让以前做的那些繁琐操作变的更方便一些了,我在这里也用构建工具来完成一下我以前一些前端的工作。这里我选用了Gulp来使用。实例概要代码压缩CSS自动加前缀LESS编译地址版本追加文件合并文件修改自动刷新页面Gulp一些入门知识这里还是说一下Gu原创 2017-02-17 19:16:19 · 4190 阅读 · 0 评论 -
理解关键的渲染路径
本文转载自:《Understanding the Critical Rendering Path》,原文地址:https: //bitsofco.de/understanding-the-critical-rendering-path/当浏览器从服务器接收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路径”(Criti转载 2017-02-08 19:15:12 · 2396 阅读 · 0 评论 -
Canvas制作动态进度加载水球
前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下。样式预览实现思路关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果。然后,通过绘制圆形路径,进行clip(),实现球型效果。sin()函数相关这里说一下sin()函数的相关基础,对于绘制水波的影响。看一下图,回顾一下中学sin()函数的基础。从原创 2016-12-09 13:35:15 · 12302 阅读 · 12 评论 -
CSS使用网络字体(@font-face)详析
前言以前在给网页文字设置一些好看的字体时,限于用户系统是否安装此字体,而只能使用三种方法解决,要么用通用字体,要么用图片替换文本,要么用Flash。而这几种方法却存在严重的缺陷。 现在好了,@font-face终于解决了这种使用网络字体的问题。浏览器兼容性问题其实,@font-face并不是CSS3才出来的属性,早在1998年它就在CSS2中使用了,但是在CSS2.1中又被除去了,CSS3又把它加原创 2016-11-23 18:47:24 · 7456 阅读 · 1 评论 -
Glob Patterns匹配模式使用
前段时间在用workbox时,在做precache时,匹配模式基于的是Glob Pattern模式,于是就看了下相关文档。下面翻译一下node-glob的使用,原文:https://github.com/isaacs/node-glob#glob-primerGlob像在shell里面,用*等匹配模式来匹配文件。Glob基于Javascript实现,使用minimatch库进行匹配。...翻译 2018-12-29 23:45:08 · 3939 阅读 · 0 评论 -
「浏览器插件」无广告国内视频平台直接播放插件
前段时间发现一些比较不错的解析国内视频平台的一些 API 接口,很早之前基于这些接口做过一个 Android 端的播放软件,但为了更方便使用吧,于是做了一个Chrome 的浏览器插件,解析接口也是在线更新的,所以用起来会比较方便。不知什么原因,扩展在 Chrome 商店中被下架了(当然国内也无法访问商店),所以这里提供了文件下载,可直接安装。下载地址:下载国内基于 Chrome 内核的浏览...原创 2019-02-23 15:44:06 · 2330 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:安装 Web 应用
前言在传统的 Web 应用中,通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问,或者把网页地址创建到桌面上通过点击,然后在浏览器里打开。传统模式下,图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和控制。而目前可以通过 PWA 标准中的特性来完成上面这些功能,使得访问 Web 应用的路径更短、曝光性更大,下面说一下这一块。原创 2019-07-03 18:24:03 · 2875 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:消息通讯
前言serviceWorker 的能力决定它要处理的事情,网站页面的部分逻辑处理会转移到 serviceWorker 层进行处理,这里就要页面层和 serviceWorker 层进行交互来实现消息通讯。下面就说一下两个环境下的消息通讯。窗口向 serviceWorker 通讯原创 2019-06-17 01:37:18 · 518 阅读 · 0 评论 -
超方便的 IndexDB 库
前言做为 Web 浏览器层的本地存储,IndexDB 做为一个很好的选择,几乎可以存储任意类型的数据,且是异步的。但是正常使用方式下需要在监听各种事件来处理结果,不是很方便,下面就对这一层进行了包装,使用方便。IndexDBWrapper 库IndexDBWrapper 库是参考 workbox 相关 DB 操作开发的,下面具体说明下使用。包地址:https://www.npmjs.co...原创 2019-06-20 21:41:11 · 5303 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Push
# 前言很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率。网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢?原创 2019-05-29 15:56:12 · 1836 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Fetch & Request & Headers & Response & Body
前言在 WEB 中,对于网络请求一直使用的是 XMLHttpRequest API 来处理,XMLHttpRequest 也很强大,传统的 Ajax 也是基于此 API 的。那么为什么 W3C 标准中又加入了类似功能的 Fetch API 呢?他有何优势。Fetch什么是 FetchFetch API 是 W3C 正式规范中加入的新的用于网络请求相关的功能 API,核心就是对于 HTT...原创 2019-04-27 10:38:16 · 895 阅读 · 0 评论