- 博客(41)
- 收藏
- 关注
RSS订阅原创 JDBI UnableToCreateStatementException
JDBI UnableToCreateStatementException
2023-02-22 16:18:27
222
原创 写给家人的计算机和编程简介
作为一个码农，有时候会遇到非专业的亲戚朋友的问题：到底计算机是怎么运转的？程序员编程到底在做什么？诸如此类的科普问题，往往也不是一两句话能说明白的。今天花了点时间总结了一下，尽量深入浅出地解释这个问题。计算机的组成是怎样的呢？简单的说就是拼积木，由特别简单特别小的几种乐高积木块拼成小零件，再拼成物品人物，再拼成房屋街景，聚少成多聚沙成塔。 1. 二进制是表示数字的一种方法，只有0和1两个数字，可以和我们常用的十进制相互转换。比如二进制的110意思是十进制的6 2. 数字电路：电路可以...
2021-11-11 09:27:47
219
原创 Chrome 90的flexbox调试工具
时间过得真快，Chrome 的版本已经升级到90了。这次的开发者工具更新中增加了flexbox调试工具，试了一下，挺有意思的。首先在Elemets 视图下，如果一个元素的display: flex的话，元素后面会显示一个 “flex” 的按钮，点一下网页上相应的位置就会出现一个虚线框表示出这个flexbox的位置。如图然后在边栏上styles标签下对应的flex定义处会出现一个按钮点开有惊喜…...
2021-04-25 10:25:54
381
原创 前端工具Storybook简介
Storybook （https://storybook.js.org/） 是一个很不错的开源工具，用于帮助前端组件开发，可以支持React, Vue和Angular等框架。正如它的名字所预示的一样，使用它可以写出组件库的活的用户故事（user story）。它的网站首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。想象一下过去我们如果希望单独测试一个组件的行为和表现该怎么做？我
2021-02-28 22:51:41
5019
原创 端到端测试框架Cypress简介
初识CypressCypress （https://www.cypress.io/）是一款功能强大的端到端的Web 测试框架。相比于其他类似最大的特点就是有个可视化的UI界面，调试起来相当直观方便。使用的时候要按业务需要写一些测试用例就可以用带界面或者纯命令行模式来跑了。安装Cypress依赖于node js 环境，估计做web 开发的人都是有的。Cypress本身可以用npm安装在目标项目下：npm install cypress --save-dev或者用yarn 也行yar
2021-02-28 17:30:51
1423
原创 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
1289
原创 PIXI 精灵表和精灵动画
本文介绍了精灵表（spirte sheet）和精灵动画的原理，利用TexturePacker来制作精灵表的方法还有如何在PIXI JS引擎中加载和使用。
2020-03-26 10:39:52
1709
原创 如何用Promise.all模拟allSettled
用过Promise 的同学都知道Promise.all的作用是把一系列的异步（Promise）对象一起执行，等待所有都成功才成功，但如果某个失败了就会立刻失败，不会等待其他未完成的任务。不过我们有时候会想要不同的行为，就是执行一系列的异步任务，我们希望不论里面的任务成功失败，等到所有任务都结束后再结束。于是有了新的API “allSettled”。不过现在这个API还是draft状态，只有最新...
2020-02-27 22:55:42
983
原创 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
5945
原创 使用LoopBack快速开发简单的数据库CRUD
使用LoopBack快速开发支持CRUD的web应用简介缘起LoopBack简介开发环境准备Node JSExpressLoopBackMySQL开发记录项目设计开发步骤生成APP读取数据库schema 生成model生成repository生成controller编译运行添加友善的前端简介缘起最近想试着写一个简单的支持数据库CRUD的web应用。后端用node js，express显然是个...
2019-10-07 10:39:39
962
翻译 Chrome 78 开发者工具更新
原文地址： https://developers.google.com/web/updates/2019/09/devtools审计(Audit)面板支持多客户现在可以在审计面板中组合其他开发工具特性了，比如Request Blocking 和 local overrides。调试支付事件应用（Application)面板中的后台服务（Background Services）部分开始支持支...
2019-10-04 17:11:17
614
翻译 Cypress 最佳实践
原文： https://docs.cypress.io/guides/references/best-practices.html组织测试，登录，控制状态错误：共用页面对象，使用你的UI登录，不截屏最佳实践：测试spec之间相互独立，用编程的方式登录，控制你的应用的状态选择元素错误：使用脆弱的选择器，无法适应改动最佳实践：使用“data-”属性来为你的选择器提供支持，避免CSS或JS改...
2019-08-23 14:53:12
1764
原创 用随机数发生器来验证一个有趣的概率问题
起有一道流传颇广的有趣的概率题，说的是某直播节目现场，嘉宾面对三扇门，其中一扇门后有大奖，另两个是空的，主持人让嘉宾选一个。选了之后，主持人在剩下的俩个门中打开一扇，后面是空的(他知道哪个是空的)，然后问嘉宾要不要换选择？那么换好还是不换好呢？凭直觉的话，虽然打开了一扇空门，但你面对剩下的两扇门仍然不知道哪个有奖品，所以概率一样，在此情况下人们往往会坚持自己的最初选择，即不换。但实际上选择换的话...
2019-08-11 16:11:10
466
翻译 Chrome 77 开发者工具更新
拷贝元素样式在DOM树上右键点击某节点来拷贝CSS到剪贴板。布局变动可视化注意：此功能可能使你的屏幕频繁闪动有时候当你在喜欢的网站上读新闻的时候，你会因为图片和广告等内容的加载完毕使得内容不断变动而失去当前阅读的位置。这种情况称为布局变动（Layout shifts）。这是因为网页开始没有为图片，广告等内容预留地方。解决方案就是使用"占位符"开发者工具现在可以帮助你检测到布局变动:打...
2019-07-28 16:53:27
390
翻译 Chrome 75 开发者工具更新
当自动补全CSS的时候使用有意义的预设值有些CSS属性的值是函数，比如filter： filter: blur(1px) 添加了1像素的模糊。当自动补全filter这样的属性是，开发者工具现在会自动填充一个有意义的值，这样你可以预览有什么可能的值。使用命令菜单来清理网站数据按下"Control+Shift+P"或者"Command+Shift+P"（Mac）打开命令菜单，然后可以运行”Cle...
2019-07-28 16:21:41
179
翻译 Chrome 76开发者工具更新
CSS根据值自动补全当我们给一个DOM 节点添加样式声明的时候，有时候属性的值比名字更好记。比如说当我们想让元素加粗， "bold"值也许比属性名"font-weight"更好记。现在样式窗格的自动补全功能支持根据CSS值来补全。如果你只能想起来某些值的关键字但想不起来属性名了，试试输入值，自动补全功能将帮助你找到。网络设置的新界面过去的网络面板有个问题：当调试窗口太窄时有些开关就看不到了。...
2019-07-28 15:48:26
239
翻译 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
422
原创 React与游戏引擎设计原理的相互印证
前几年做网页游戏，近来改做基于React的单页应用。虽然这是完全不同的两种软件产品，但感觉React和游戏引擎本身的设计颇有相似之处：架构层级中的定位无论是游戏引擎，还是React，都是作为核心基础库被应用于软件中。而且，它们的用处都是用于帮助构建图形用户界面(GUI)的工具，即视图层的基础工具组件。更具体来讲就是用于渲染。组件化为方便开发者的工作，React和游戏引擎都会提供自定义组件的...
2019-03-27 20:56:07
342
翻译 Chrome 73开发者工具更新
英文原文地址：https://developers.google.com/web/updates/2019/01/devtools日志点（logpoint）使用日志点功能可以避免你在代码中调用cosole.log()来调试代码。添加日志点的步骤：右键点击你想要加日志的行号选择“添加日志点”（Add logpoint…）将弹出断点编辑器在断点编辑器中输入你想记录的表达式按回车或在断点...
2019-02-18 10:15:10
486
翻译 Chrome 72 开发者工具更新
性能指标的可视化在记录页面加载信息之后，开发者工具在“Timings”中显示诸如“DOM content loaded”或“First MeaningfulPaint”等指标。高亮文本节点当鼠标悬停育一个DOM树种的文本节点上面时，开发者工具将为你高亮显示文本。拷贝JS路径假如你在写自动测试，其中包括点击某个节点的操作，所以你想快速得到那个DOM节点的引用。普通的方式是去元素面板右键点击...
2019-01-01 22:27:33
552
1
翻译 Chrome 71开发工具更新
鼠标指向Live表达式将高亮标出DOM节点当Live 表达式的结果指向一个DOM节点时，鼠标指向（hover）此表达式将自动高亮DOM节点。将DOM节点存为全局变量要想将DOM节点存为全局变量，可以在控制台运行一个结果为此节点的表达式，右键点击结果，弹出菜单里选择“存为全局变量” （store as global variable）。或者右键点击DOM数中的节点并在弹出菜单里选择“存为全局变...
2019-01-01 21:34:59
175
翻译 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
1429
原创 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
1090
原创 为什么我们会做前后端分离？
过去asp, jsp, php以及ROR等技术是混合编程，把逻辑和网页渲染混合在一起，这样的话项目大了代码很容易写的越来越混乱，对于开发的效率质量以及维护都有不少的挑战。（注: 这里所说的“渲染”是指生成html，css等显示代码，不是浏览器核心渲染）前后端分离后，前端从一个辅助的地位变成一个独立的项目，适合大规模复杂业务逻辑的开发逻辑上和后端解耦合，有明确的接口，逻辑变得清晰，基本上来讲，...
2018-09-11 09:45:23
156
原创 随笔：关于系统稳定性的思考
刚刚遛弯时胡思乱想得到的： 有的系统越复杂越不稳定，有的系统越复杂越稳定。为什么会这样呢，我想，因为系统设计的方式不同。如果系统稳定的要素以串联的方式连接在一起，或者说是程序中的“与”逻辑，每一个都是数学中的必要条件，要素越多，风险越大。 例如： 摞在一起的积木抽出一个就会倒， 串联的灯泡坏一个就都不亮。另一个例子是人活着需要空气，需要食物，需要水，需要适合的温度… 所以生命是非常脆弱的，破...
2018-09-10 15:01:26
786
1
翻译 Chrome 68 开发者工具新功能
Eager Evaluation: 当你在控制台写表达式的时候，控制台将显示预览结果。（需要在控制台设置中打开这个功能）Argument hints: 当你在控制台写函数调用时，控制台将显示那个函数的参数列表。（带问号的表示可选参数）Function autocompletion: 当你在控制台写函数调用时，控制台将自动显示函数返回值对象可用的属性及函数。（此项功能依赖于Eager Eval...
2018-08-27 09:47:41
358
原创 小试Go Webassembly
Go语言新版本1.11要支持Webassembly啦，作为同时关注这两项技术的我来说这确实是个好消息。但目前golang还未正式发布1.11版本，最新的是rc1版。等不及了，先下载下来试一下。过程记录环境准备因为我机器上已经有了老版本go环境，又不想搞多版本兼容，我就直接下载了一个go 1.11beta3的docker镜像，不过有点儿大800+Mb 一个现代浏览器是必须的，我平常...
2018-08-23 22:35:31
4794
原创 未来交通的猜想
未来汽车交通的猜想除了目前比较明显的电动化和自动驾驶技术，我想也许将来未来汽车交通也许有如下变化：无人驾驶专用快速路，与普通汽车和行人分开，避免事故，提高速度，类似传送带或者管道输送智能汽车网络，由专用的汽车AI网络而不是汽车车载AI来根据所有人的出行计划统一协调规划安排出行路线以达到最优。公路自动为汽车充电，通过埋在地下的线圈无线充电，汽车行驶过程中即可充电，再也不必为续航里程发愁...
2018-07-13 09:18:29
971
原创 Chrome 67 Devtools 部分新功能
可以在Network面板中搜索关键字了，用法是标准的Ctrl/Command + FNetwork request支持Copy as fetchAudit panel 增强，可以选择desktop而不模拟mobile了，也可以选择不限制CPU和网速No throttling。Audit 之后可以查看性能记录了，点击View Trace按钮即可跳到Performance面板查看记录Dark...
2018-07-03 09:43:16
327
原创 我的Go语言学习小抄
字符串转换字符串转字符数组cs := []rune(str)字符转字符串s := string(cs[1])字符数组转字符串s:= string(cs)String builder (需要1.10版本)var sb strings.Buildersb.WriteString(str)sb.WriteRune(cs[1])fmt.Printl...
2018-04-18 16:29:37
180
原创 Chrome 65 DevTools 新功能
参考： https://developers.google.com/web/updates/2018/01/devtools Chrome更新很勤快，65又出了几天了。本地覆盖过去如果我们的服务器在本地（本机，localhost）的话，chrome可以支持在devtools里面映射到本地文件夹然后直接修改代码，就像是个IDE。但是如果是远程服务器就不行了。现在有了这个本地覆盖的功能，...
2018-03-15 10:57:12
981
原创 HTML5小游戏动手做（一）：简单的连连看
从本篇起，我将在此展示制作一些HTML5小游戏的过程和经验。本文描述的是一个经典又简单的小游戏，连连看。1. 计划1.1 目标快速建立一个连连看游戏原形。能玩就行。1.2 游戏特性介绍游戏展示一个m * n大小的表格表格每个格子里面有一个图标/符号每个图标都是成对出现玩家需要找到每对匹配的图标/符号如果玩家选中的两个图标/符号匹配并且其连线转折次数小...
2018-03-11 08:07:00
22917
8
原创 Java 与 JS 的特性融合
最近看到Java 8，9， 10以及Java Script ES 6的新特性的时候，发现一个比较有意思的事情，就是这两个名字相近实际基因完全不同的编程语言在发展方向上似乎在互相靠近。1. 历史背景1.1 名字的由来Java 1991年 太阳微系统公司(Sun)James Gosling等人研发了名称为 Oak 的语言，目标是小型嵌入式设备。1994年更名为Java（爪哇）。爪哇生产...
2018-03-06 15:23:38
224
原创 Java String 为什么设计成final的
很久以前的面试中就遇到过这个问题：Java String 为什么设计成final的？当时毫无思路，现在倒是有些想法了，记在这里，如有不当之处请斧正。 我想，Java String 设计成final的，就是说不准继承，原因如下：内存管理字符串对象在Java内存中是被放到常量池中的，作为常量可以被多个String 对象共同持有，如果改写这一行为，将使这一设计失效，造成混乱。安全为什么...
2018-02-14 12:32:58
465
原创 HTML5声音引擎Howler.js简介
Howler.js是一个不错的HTML5声音引擎。功能强大，性能不错，用起来也很方便。1. 官网https://howlerjs.com/ 其代码托管在GitHub上。2. 兼容性Howler默认使用Web Audio，但在IE上可以自动转为HTML 5 Audio。这点很是贴心。3. 声音激活移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，t
2018-01-28 08:15:44
19775
4
原创 Chrome 64 DevTools 新功能
参考： https://developers.google.com/web/updates/2017/11/devtools-release-notes#overrides性能监视器过去我们可以使用performance工具来分析网页性能，但不能实时监控。 现在有实时的性能监视器啦，在这个面板里面你可以看到网页的：CPU 使用率JavaScript 堆大小DOM 节点，Jav
2018-01-25 10:57:07
536
原创 Chrome Developer Tools 使用技巧随手记
1. 介绍工欲善其事，必先利其器。对于前端开发，Chrome Developer Tools 就是前端调试的一大利器。在这里记录一些我在使用中的的经验技巧。废话少说，下面我们开始…2. 正文2.1 让网页和开发者工具的背景变暗对于程序猿这个职业，每天都要长时间盯着电脑屏幕。天长日久，眼睛的疲劳在所难免，尤其是默认的白色背景，尤其显得刺眼。因此很多人把电脑默认颜色调成苹果绿，编辑器的颜色调成黑色背景以
2017-12-26 09:28:28
4445
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人