11 时间1812

尚未进行身份认证

这个家伙很懒,什么都没有留下...

等级
TA的排名 10w+

React hooks render行为实验

今天放假有点空,对React的渲染(render)和hooks的行为作了几个简单的小实验,记录如下。1. 实验准备1.1 环境Node 12.14List itemYarn 1.21.1Chrome 80.0.3987.1491.2 测试项目1.2.1 项目初始化通过 yarn create react-app test生成项目脚手架。react: 16.13.0...

2020-04-06 10:38:16

PIXI 精灵表和精灵动画

本文介绍了精灵表(spirte sheet)和精灵动画的原理,利用TexturePacker来制作精灵表的方法还有如何在PIXI JS引擎中加载和使用。

2020-03-26 10:39:52

如何用Promise.all模拟allSettled

用过Promise 的同学都知道Promise.all的作用是把一系列的异步(Promise)对象一起执行,等待所有都成功才成功,但如果某个失败了就会立刻失败,不会等待其他未完成的任务。不过我们有时候会想要不同的行为,就是执行一系列的异步任务,我们希望不论里面的任务成功失败,等到所有任务都结束后再结束。于是有了新的API “allSettled”。不过现在这个API还是draft状态,只有最新...

2020-02-27 22:55:42

HTML5小游戏动手做(二):使用PIXI引擎制作坦克大战游戏

这里写自定义目录标题1. 简介1.1 PIXI 简介1.2 坦克大战游戏简介2. 实现细节2.1 技术选型2.2 环境搭建2.3 创建舞台2.4 游戏状态机2.5 消息总线2.6 加载页面2.7 开始页面2.8 我们的坦克1. 简介1.1 PIXI 简介PIXI JS是一款轻量级的HTML5的2D引擎,我看现在它的官网上并没有说自己是“游戏”引擎而是说“The HTML5 Creation ...

2020-01-27 11:39:33

使用LoopBack快速开发简单的数据库CRUD

使用LoopBack快速开发支持CRUD的web应用简介缘起LoopBack简介开发环境准备Node JSExpressLoopBackMySQL开发记录项目设计开发步骤生成APP读取数据库schema 生成model生成repository生成controller编译运行添加友善的前端简介缘起最近想试着写一个简单的支持数据库CRUD的web应用。后端用node js,express显然是个...

2019-10-03 17:13:24

Chrome 78 开发者工具更新

原文地址: https://developers.google.com/web/updates/2019/09/devtools审计(Audit)面板支持多客户现在可以在审计面板中组合其他开发工具特性了,比如Request Blocking 和 local overrides。调试支付事件应用(Application)面板中的后台服务(Background Services)部分开始支持支...

2019-10-04 16:53:57

Cypress 最佳实践

原文: https://docs.cypress.io/guides/references/best-practices.html组织测试,登录,控制状态错误:共用页面对象,使用你的UI登录,不截屏最佳实践:测试spec之间相互独立,用编程的方式登录,控制你的应用的状态选择元素错误:使用脆弱的选择器,无法适应改动最佳实践:使用“data-”属性来为你的选择器提供支持,避免CSS或JS改...

2019-08-23 14:53:12

用随机数发生器来验证一个有趣的概率问题

起有一道流传颇广的有趣的概率题,说的是某直播节目现场,嘉宾面对三扇门,其中一扇门后有大奖,另两个是空的,主持人让嘉宾选一个。选了之后,主持人在剩下的俩个门中打开一扇,后面是空的(他知道哪个是空的),然后问嘉宾要不要换选择?那么换好还是不换好呢?凭直觉的话,虽然打开了一扇空门,但你面对剩下的两扇门仍然不知道哪个有奖品,所以概率一样,在此情况下人们往往会坚持自己的最初选择,即不换。但实际上选择换的话...

2019-08-11 16:11:10

Chrome 77 开发者工具更新

拷贝元素样式在DOM树上右键点击某节点来拷贝CSS到剪贴板。布局变动可视化注意:此功能可能使你的屏幕频繁闪动有时候当你在喜欢的网站上读新闻的时候,你会因为图片和广告等内容的加载完毕使得内容不断变动而失去当前阅读的位置。这种情况称为布局变动(Layout shifts)。这是因为网页开始没有为图片,广告等内容预留地方。解决方案就是使用"占位符"开发者工具现在可以帮助你检测到布局变动:打...

2019-07-28 16:53:27

Chrome 75 开发者工具更新

当自动补全CSS的时候使用有意义的预设值有些CSS属性的值是函数,比如filter: filter: blur(1px) 添加了1像素的模糊。当自动补全filter这样的属性是,开发者工具现在会自动填充一个有意义的值,这样你可以预览有什么可能的值。使用命令菜单来清理网站数据按下"Control+Shift+P"或者"Command+Shift+P"(Mac)打开命令菜单,然后可以运行”Cle...

2019-07-28 16:21:41

Chrome 76开发者工具更新

CSS根据值自动补全当我们给一个DOM 节点添加样式声明的时候,有时候属性的值比名字更好记。比如说当我们想让元素加粗, "bold"值也许比属性名"font-weight"更好记。现在样式窗格的自动补全功能支持根据CSS值来补全。如果你只能想起来某些值的关键字但想不起来属性名了,试试输入值,自动补全功能将帮助你找到。网络设置的新界面过去的网络面板有个问题:当调试窗口太窄时有些开关就看不到了。...

2019-07-28 15:48:26

Chrome 74 开发者工具更新

原文链接: https://developers.google.com/web/updates/2019/03/devtools高亮显示所有被CSS属性影响的节点鼠标滑过一个CSS属性(比如padding 或margin)的时候,高亮显示本条设置影响到的节点审查(Audits)面板中的Lighthouse v4…WebSocket二进制消息查看器要查看二进制的WebSocket消息的内...

2019-04-10 09:32:43

React与游戏引擎设计原理的相互印证

前几年做网页游戏,近来改做基于React的单页应用。虽然这是完全不同的两种软件产品,但感觉React和游戏引擎本身的设计颇有相似之处:架构层级中的定位无论是游戏引擎,还是React,都是作为核心基础库被应用于软件中。而且,它们的用处都是用于帮助构建图形用户界面(GUI)的工具,即视图层的基础工具组件。更具体来讲就是用于渲染。组件化为方便开发者的工作,React和游戏引擎都会提供自定义组件的...

2019-03-27 20:56:07

Chrome 73开发者工具更新

英文原文地址:https://developers.google.com/web/updates/2019/01/devtools日志点(logpoint)使用日志点功能可以避免你在代码中调用cosole.log()来调试代码。添加日志点的步骤:右键点击你想要加日志的行号选择“添加日志点”(Add logpoint…)将弹出断点编辑器在断点编辑器中输入你想记录的表达式按回车或在断点...

2019-02-18 10:15:10

Chrome 72 开发者工具更新

性能指标的可视化在记录页面加载信息之后,开发者工具在“Timings”中显示诸如“DOM content loaded”或“First MeaningfulPaint”等指标。高亮文本节点当鼠标悬停育一个DOM树种的文本节点上面时,开发者工具将为你高亮显示文本。拷贝JS路径假如你在写自动测试,其中包括点击某个节点的操作,所以你想快速得到那个DOM节点的引用。普通的方式是去元素面板右键点击...

2019-01-01 22:27:33

Chrome 71开发工具更新

鼠标指向Live表达式将高亮标出DOM节点当Live 表达式的结果指向一个DOM节点时,鼠标指向(hover)此表达式将自动高亮DOM节点。将DOM节点存为全局变量要想将DOM节点存为全局变量,可以在控制台运行一个结果为此节点的表达式,右键点击结果,弹出菜单里选择“存为全局变量” (store as global variable)。或者右键点击DOM数中的节点并在弹出菜单里选择“存为全局变...

2019-01-01 21:34:59

Chrome 70开发者工具更新

原文请参见: https://developers.google.com/web/updates/2018/08/devtools控制台动态表达式在控制台上方可以放一个动态表达式,用于实时监控它的值 1. 点击 “Create Live Expression”按钮(图标是一个眼睛),打开动态表达式界面 2. 输入你想要监控的表达式 3. 点击其他地方即可保存在Eager Ev...

2018-09-12 09:56:09

HTML5 游戏中 使用audio时遇到的那些坑

1. 前言过去两年我曾经在HTML5网页游戏声音播放上花费了大量时间来找坑,填坑。在这里我把过去的经验记录于此。2. IE112.1 不支持Web AudioIE 是我用过的唯一不支持 Web Audio 的浏览器。解决方案就是用HTML5 audio。什么?你的IE连HTML5 audio 也不支持?呃,那个解决的方案更简单,直接跟产品经理哭诉:不能支持IE6哇…2.2

2018-09-11 09:46:43

为什么我们会做前后端分离?

过去asp, jsp, php以及ROR等技术是混合编程,把逻辑和网页渲染混合在一起,这样的话项目大了代码很容易写的越来越混乱,对于开发的效率质量以及维护都有不少的挑战。(注: 这里所说的“渲染”是指生成html,css等显示代码,不是浏览器核心渲染)前后端分离后,前端从一个辅助的地位变成一个独立的项目,适合大规模复杂业务逻辑的开发逻辑上和后端解耦合,有明确的接口,逻辑变得清晰,基本上来讲,...

2018-09-11 09:45:23

随笔:关于系统稳定性的思考

刚刚遛弯时胡思乱想得到的: 有的系统越复杂越不稳定,有的系统越复杂越稳定。为什么会这样呢,我想,因为系统设计的方式不同。如果系统稳定的要素以串联的方式连接在一起,或者说是程序中的“与”逻辑,每一个都是数学中的必要条件,要素越多,风险越大。 例如: 摞在一起的积木抽出一个就会倒, 串联的灯泡坏一个就都不亮。另一个例子是人活着需要空气,需要食物,需要水,需要适合的温度… 所以生命是非常脆弱的,破...

2018-09-10 15:01:26

查看更多

勋章 我的勋章
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。