- 博客(109)
- 资源 (7)
- 收藏
- 关注
RSS订阅
原创 前端推荐阅读-入门到精通
推荐阅读目录：文章目录原文链接前端技术1 综合2 基础2.1 HTML && HTML52.2 CSS && CSS32.3 JavaScript && ES6+3 性能优化4 安全5 工程化 && 自动化6 协议7 浏览器8 架构9 全栈程序设计计算机基础原文链接极简丰盛人生前端技术1 综合《现代前端技术解析》《Web前端开发最佳实践》《Web前端工程师修炼之道》《编写高质量代码-Web前端开发修炼之道》《响应式We
2021-02-04 18:55:05
187
翻译 【翻译】比较4个NodeJS Serverless App的框架
【原作者】Gedalyah Reback【原文链接】Comparing Frameworks for Node.js Serverless Apps【推荐阅读】12 Best Nodejs Frameworks for App Development in 2022Express.js- Express for EveryoneKoa.js- Next Generation Node.js FrameworkMeteor.js- One Application, One LanguageSoc
2022-05-10 11:19:34
418
翻译 【翻译】Graphlib API 指南
github - raphlib文章目录安装npm Install介绍API 指南图像概念展现节点和边线Multigraphs复合图默认标签Graph APIgraph.isDirected()graph.isMultigraph()graph.isCompound()graph.graph()graph.setGraph(label)graph.nodeCount()graph.edgeCount()graph.setDefaultNodeLabel(val)graph.setDefaultEdgeLa
2022-03-27 19:03:36
471
翻译 【翻译】Dagre-D3 文档整理和翻译
地址:github Dagre-D3目录文章目录dagre-d3设计优先级安装npmBowerBrowser Scripts源代码构建如何使用Darge聚焦渲染例子配置布局生成的图像第三部分例子推荐阅读dagre-d3Dagre是一个JavaScript库, 可以更轻易得在客户端布局连接图。此库是dagre的前端子库, 底层使用D3进行渲染。如果要查看更多详细信息(包含样例和配置在内), 请查看wiki页面。设计优先级完全的客户端计算布局。如果客户端布局对你来说并非所需, 可以查看grap
2022-03-22 22:59:17
3022
原创 electron-14版后remote废除
文章目录前言安装与配置前言Electron最近的版本变迁比较频繁，在升级到14.0.0版本后，废除了很多旧有的API。而其中最主要的就是remote模块从旧有的模块里抽出，变成了一个需要新安装的模块@electronic/remote。新模块的使用方式和旧模块有很多的不同，特意记录下来分享。github-链接安装与配置第一步：npm install --save @electron/remote第二步：在主程序文件里引入：require('@electron/remote/main'
2021-09-07 01:25:13
2679
1
原创 NodeJS-如何生成SSL证书，https链接和http自动跳转到https
文章目录1. 安装TLS/SSL 证书1. 生成私钥2. 生成证书签名请求3. 移除密钥的密码4. 生成自签名证书2. 使用`https`链接3. `http`自动跳转到`https`1. 安装TLS/SSL 证书1. 生成私钥openssl genrsa -des3 -out site.key 2048这个命令会生成一个私钥。该私钥使用三重DES加密，以PEM格式保存，可以使用ASCII码解密。2. 生成证书签名请求openssl req -new -key site.key -out
2021-09-02 01:20:43
1274
原创 前端-浏览器的缓存详解
前端-浏览器的缓存详解 目录文章目录前言浏览器的缓存`Cache-control`字段的内容到期(缓存的有效期)重新验证其他`Last-modified`字段的内容`Etag`前言面试常见细节，建议读完后并记住。浏览器的缓存http属于七层里的应用层200,301, 304的区别200:状态码 200 OK 表明请求已经成功. 默认情况下状态码为200的响应可以被缓存。PUT 和 DELETE 的请求成功通常并不是响应200 OK的状态码，而是以下：201:Created表示一
2021-05-10 19:16:20
494
原创 前端-requestIdleCallback和requestAnimationFrame
前端-requestIdleCallback和requestAnimationFrame 目录文章目录前言推荐阅读`requestAnimationFrame, requestIdleCallback``requestAnimationFrame``cancelAnimationFrame``requestIdleCallback`requestIdleCallback和requestAnimationFrame有什么区别？requestIdleCallback里面可以执行DOM修改操作吗？前言建
2021-05-10 19:15:36
606
原创 css-赛博朋克风动画组件
css-赛博朋克风动画组件 目录文章目录前言结果展示代码前言Tutorials收费课程中的一种实现。实现思路：先绘制盒子制作动画，通过颜色位置变化来实现流转-webkit-box-reflect: below 2px linear-gradient(transparent,#0005);实现倒影所用功能：border-sizingjustify-contentdisplayoverflowtransition-webkit-box-reflectbox-sh
2021-04-23 09:26:24
687
1
原创 css-方形组件圆形阴影和动画
css-方形组件圆形阴影和动画 目录文章目录前言效果代码前言CSS特效思路：1个div包裹4个，最外层作为阴影来源，内部4个作为补齐补板。主要用到以下：border-radiusbox-shadow@keyframe, animationz-indextransitionposition, top, left效果代码<!DOCTYPE html><html lang="en"><head> <meta chars
2021-04-23 09:05:33
243
原创 js-拖拉表格实现内容计算-在线excel
js-拖拉表格实现内容计算 目录文章目录前言实现结果代码实现`index.html``main.js`前言制作网页版ExcelH5新增功能：可拖拉-draggable, 可编辑-contenteditable实现结果代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Table</titl
2021-04-18 18:31:13
272
原创 webpack-AST剖析
webpack-AST 目录文章目录前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码，导出全部方法`Builder`实现一个箭头函数`exportific`前端工具使用`NPM`发包前言抽象语法树(AST)，是一个非常重要的知识JavaScript的语言精髓可以制作Vue, Rea
2021-04-15 14:57:35
713
原创 webpack-模块热替换剖析
webpack-模块热替换剖析 目录文章目录前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码`HMR`原理步骤前言主要讲解热更新的原理推荐阅读《webpack实战 入门、进阶与调优》前提早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升效率：工具检测到代码改动，自动重新构建，然后触发网页刷新，称为：live reload第二次提升：webpack不刷新的前提下得到改动，甚至不需要重新发起请
2021-04-15 00:50:17
180
原创 js-基于AudioContext在canvas上显示声音波形
js-基于AudioContext在canvas上显示声音波形 目录文章目录前言效果展示代码展示`index.html``Aud.js`前言从ES7后开始启用AudioContex常用API是：createScriptProcessor, onaudioprocess, getChannelData注意：onaudioprocess已经废弃，开始改用AnalyserNode，MDN-AnalyserNode效果展示代码展示index.html<!DOCTYPE html>
2021-04-08 01:06:04
1107
原创 js-通过audioContext实现3D音效
js-通过audioContext实现3D音效 目录文章目录前言效果展示代码展示前言AudioContext的setPosition实现3D音效效果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D Audio</title> <style> body, div
2021-04-07 01:31:45
527
1
原创 js-获取flv流文件二进制数据并分析
js-获取flv流文件二进制数据并分析 目录文章目录前言效果展示代码实现`index.html`前言对flv流文件，进行16进制转换，并用js解析效果展示代码实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Video</title> <style>
2021-04-06 15:10:51
790
原创 js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据
js-php-audioAPI利用AJAX处理后端传来的mp3流文件数据 目录文章目录前言推荐阅读常见`API`代码实现`audio.html``streamFile.php`总结前言尝试利用浏览器中的audio API推荐阅读MDN常见APIAudioContextdecodeAudioData代码实现audio.html<!DOCTYPE html><html lang="en"><head> <meta char
2021-04-06 03:06:31
835
原创 JS-indexedDB和应用
JS-indexedDB和应用 目录文章目录前言推荐阅读本地存储`indexedDB``open``createObjectStore``add``get`遍历数据更新数据-`put``delete`使用索引 - `createIndex`应用场景前言前端数据库，webSQL的替代品推荐腾讯的离线日志reflow- Tent-reflow推荐阅读MDN - IndexedDBlocalForage：一个简单的 Polyfill，提供了简单的客户端数据存储的值语法。它在后台使用 Inde
2021-04-05 16:08:49
522
原创 图形学-RayTracingonOneWeek
RayTracingonOneWeek 目录文章目录前言推荐0. 概述1. `CodeBlocks`环境搭建`C++`程序2. 目标1. 输出图像注意2. `The vec3 class`头文件`operator`重写针对位置的使单位向量与输入向量的方向相同更改头文件去使用全部代码`vec3.h``vec3.cpp`3. 光线，简单相机和背景`ray.h`4. 添加球体5. 曲面法线和多个对象6. 抗锯齿`camera.h``main.cpp`7. 漫反射材质`main.cpp``main.cpp``dr
2021-04-04 19:57:24
742
原创 js-前端video播放器
js-前端video播放器 目录文章目录前言推荐阅读传统播放模式视频切片 - `Accept-Ranges`服务器端请求特定的范围单一范围多重范围条件式范围请求范围请求的响应流媒体`Blob`Blob vs ArrayBuffer`Ajax``HLS`HLS 自适应比特流`m3u8`讲解文件列表`DASH`西瓜视频播放器`DASH`例子中的`MPD`文件`FLV`头文件`flv.js`工作原理播放器截图`canvas`播放视频前言Video, Blob URLHTTP RangeHLS, DA
2021-04-02 18:44:25
1142
原创 JS-前端二进制
JS-前端二进制 目录文章目录前言推荐阅读整体介绍图片预览1. `FileReader API`常见优化`Base64`编解码`Base64`的函数`btoa``atob`下载图片`fetch API``Object URL`缺点`Blob API``Blob`的构造函数**从字符串创建 Blob****从类型化数组和字符串创建 Blob**`Blob`方法`ArrayBuffer`和`TypedArray``ArrayBuffer``Unit8Array``ArrayBuffer`和`TypedArra
2021-04-02 14:50:36
185
原创 H5-MediaSourceExtension
H5-MediaSourceExtension 目录文章目录前言推荐阅读介绍诞生原因`MSE`标准缺点注意`DASH`协议优势常见特点缺点与对比接口`MediaSource`注意解决办法`Media Source Extension`转码开始测试的视频需要的工具引入方法检测片段基于`Fetch API`前言推荐阅读MDN-MSE APIH5直播系列二 MSE(Media Source Extensions)-MSE-简书官方文档翻译介绍媒体源扩展 API（MSE） 提供了实现无插件且
2021-04-01 20:30:25
338
原创 js-防抖和节流
js-防抖和节流 目录文章目录前言推荐阅读代码展示防抖多版本节流多版本前言防抖：短时时间内大量触发，但只执行一次原理：设置定时器，在指定的x时间后执行事件处理。期间每次触发事件都会重置定时器。目的：n秒内多次点击视为1次应用：地图点击节流：隔一段时间执行一次，期间多次触发不反应原理：设置定时器，在x时间后执行事件处理，当事件执行完后清除定时器。目的：n秒内只能点击1次应用：文本框输入提交推荐阅读手写实现防抖与节流-codeeJS防抖和节流-Lee代码展示防
2021-03-31 17:32:53
103
原创 canvas-腾讯小游戏推广-沙雕塔
canvas-腾讯小游戏推广-沙雕塔 目录：文章目录@[toc]前言游戏界面怪物等级和位置生成算法测试代码测试结果前言腾讯每次推广的游戏都是挂羊头卖狗肉针对一个垃圾小游戏的逆向算法猜测游戏界面怪物等级和位置生成算法// 初始英雄等级生成器const Hero = function(limitLevel, minLevel){ return Math.floor(Math.random()*limitLevel + minLevel);}// 怪物等级分区和生成器con
2021-03-30 13:58:12
122
原创 js-指定红包顺序和金额的算法
js-指定红包顺序和金额的算法 目录文章目录前言效果展示空包问题红包算法测试样例前言朋友拜托而写单个包最小金额为0.01如果除指定金额外，其余都为0.01，最后尾包存在为0的几率本算法通过了1000000次测试，出错率为百万分之3效果展示空包问题红包算法/* param: float, int, int, float param1:红包金额总额 param2:红包数目 param3:指定特殊红包 param4:指定特殊红包金额 */l
2021-03-30 02:11:28
148
原创 LeafletJS-初创简地图和冒泡提醒
LeafletJS-初创简地图和冒泡提醒 目录文章目录前言推荐阅读结果展示代码例子`index.html`前言Leaflet学习笔记推荐阅读[WebGIS教程 LeafletJS 初次使用LeafletJS](http://webgis.cn/leaflet-quickstart.html#_1)Leafle结果展示代码例子index.html<!DOCTYPE html><html lang="en"><head> <
2021-03-29 19:26:14
368
原创 Gis-ArcGis简单加载地图信息
Gis-ArcGis简单加载地图信息 目录文章目录前言推荐阅读结果展示代码`idnex.html``index2.html`前言GIS初识，使用ArcGis提供的接口，ArcGIS API for JavaScript使用方法：引入css, js设置显示js方法实现推荐阅读ArcGiS API for Js结果展示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wi9DghYt-1617016269608)(image-2021032919
2021-03-29 19:11:29
740
原创 canvas-圆形流水动画
canvas-圆形流水动画 目录文章目录前言效果展示代码展示`index.html``main.js`前言特效展示效果展示代码展示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
2021-03-26 15:41:53
483
原创 canvas-随机粒子特效
canvas-随机粒子特效 目录文章目录前言结果展示代码`html``main.js`前言canvas实现前端的特效美术结果展示代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
2021-03-26 00:30:54
2196
3
原创 css-Sass
css-Sass 目录文章目录前言推荐阅读环境安装例子编译为`css`变量声明作用域`!global`注意嵌套规则和属性属性`@import`导入文件不想编译为`css` - Partials**注意**`@mixin`和`@include`向混入传递变量浏览器前缀使用混入`@extend`和继承函数前言CSS预处理器，扩展语言，减少CSS重复代码层叠样式表语言扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性生成良好格式化的 CSS 代码，易于组织和维护文件后缀为
2021-03-25 18:32:21
199
原创 设计模式-23种设计模式
设计模式-23种设计模式 目录文章目录前言设计模式简单介绍创建型1. 工厂模式2. 抽象工厂模式3. 单例模式4. 建造者模式建造者模式（Builder Pattern）建造者模式详解设计模式：Builder模式5. 原型模式结构型1. 适配器模式2. 桥接模式3. 过滤器模式4. 组合模式5. 装饰器6. 外观模式7. 享元模式8. 代理模式行为型1. 责任链模式2. 命令模式3. 解释器模式4. 迭代器模式5. 终结者模式6. 备忘录模式7. 观察者模式8. 状态模式9. 空对象模式10. 策略模式1
2021-03-24 23:01:13
4631
2
转载 js-Event Loop核心剖析
js-Event Loop核心剖析 目录文章目录前言推荐阅读学习Event Loop的原因堆，栈、队列堆（Heap）栈（Stack）队列（Queue）Event Loop`MacroTask`（宏任务）`MicroTask`（微任务）浏览器中的Event LoopJS调用栈同步任务和异步任务事件循环的进程模型执行进入microtask检查点时，用户代理会执行以下步骤例子第一次执行：第二次执行：第三次执行：第四次执行：例2**关于73以下版本和73版本的区别****在老版本中****引用贺老师知乎上的一个例
2021-03-24 02:48:39
295
原创 js-Event Loop
js-Event Loop 目录文章目录前言推荐阅读什么是`Event Loop`多任务执行办法`JS`的单线程问题`Event Loop`总结前言Event Loop是很重要的概念推荐阅读阮一峰-什么是Event Loop什么是Event LoopEvent Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。本文参考C. Aaron Cois的《Understanding The
2021-03-24 01:45:01
89
原创 `webRTC`-点对点文件共享服务器
webRTC-点对点文件共享服务器 目录文章目录前言推荐阅读展示步骤使用文件`API`拾取文件`index.html`点对点连接和数据管道获取对文件的引用文件分块文件分块可读编码解码文件读取和发送文件读取的流程在接收端组合文件块文件自动下载向用户展示进度接受端总结完整的信令服务器前言拥有点对点的数据传输能力并且与文件API相结合利用WebRTC的Data Channel以及文件API来构造一个简易的文件共享应用主要在两个用户(peer)间共享数据的应用该应用的基本要求是实时性，两个用户必须
2021-03-24 01:20:30
383
原创 webRTC-简易视频通讯服务器
webRTC-简易视频通讯服务器 目录文章目录前言推荐阅读涵盖内容展示效果连接创建页面`index.html`获取一个连接登录开始对等连接发起通话检测通信挂断电话过程`webRTC`全部代码总结完整的信令服务器前言本文基于webSocket建立了一个网络视频通讯推荐阅读《Learning WebRTC》涵盖内容从客户端获取到服务器的连接识别各个连接端的用户两个远程用户发起通话结束通话展示效果连接包含两个页面：输入用户名，呼叫其他用户创建页面index.htm
2021-03-24 01:03:32
188
原创 webRTC-NodeJS创建信令服务器
webRTC-NodeJS创建信令服务器 目录文章目录前言推荐阅读构建信令服务器流程注意`WebSockets``server.js`识别用户完整的信令服务器前言本文取自《Learning WebRTC》创建完整的WebRTC应用，需要抛开客户端的开发，转而为服务端的开发推荐阅读《Learning WebRTC》构建信令服务器将不在同一个电脑中的两个用户连接起来服务器的目的是通过网络传输代替原先的信令机制对多个用户做出回应：允许一方用户呼叫另一方从而在双方间建立WebRT
2021-03-24 00:47:55
472
原创 webRTC- LearningWebRTC-读书笔记
LearningWebRTC 目录文章目录前言前提推荐阅读总结1. 开启WebRTC之旅在WebRTC平台传输音频和视频WebRTC的应用2. 获取用户媒体配置静态服务器媒体流页面注意媒体流的方法- getUserMedia APIAPI处理方法限制视频捕捉推荐阅读应用实例多设备处理创建一个拍照修改媒体流3. 创建简单的WebRTC应用本章内容理解`UDP`传输协议和实时传输WebRTC APIRTCPeerConnection对象信号传递和交涉会话描述协议-SDP清晰的路线到用户`STUN``TURN`
2021-03-24 00:19:54
252
原创 js-Blob浅析
js-Blob浅析 目录文章目录前言推荐阅读文件作为`Blob``index.html` - `input`上传文件`js`下载`Blob`构造`Blob``Blob URL``index.html``blobFiles.js`读取`Blob` - `FileReader`使用`FileReader`读取文本文件前言Blob：可以存储到数据库postMessage发送到其他窗口和workerXMLHttpRequest的send方法createObjectURL()获取特殊的blob://
2021-03-21 01:53:44
495
原创 js-websocket聊天服务器
js-websocket 目录文章目录前言推荐阅读例子展示代码实现`index.html``websocketServer.js`前言启用websocket：访问about:config，将network.websocket.override-security-block设置为true推荐阅读《JS权威指南》例子展示const socket = new WebSocket("ws://ws.example.com:123/resource");socket.onopen = fu
2021-03-19 17:33:24
199
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人