大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景裁剪图片，一个超级常用的功能！我个人非常喜欢Windows的「画图」工具。这款工具我小学二年级时非常喜欢玩。长大后，也对它爱不释手。因为「画图」占用内存非常小，可以放大8倍，方便像素级别调整细节，裁剪、移动都非常方便！但是工作后一直在用Mac，裁剪图片没那么方便了。Mac自带的预览工具似乎有裁剪能力，但是自己总是用不惯，还是喜欢Windows「画图」的交互。最近，每次更新51CTO文章，总是需要配个图。51CTO配图推荐是需要比例的。如果我们能提前按照比例要
大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景裁剪图片，一个超级常用的功能！我个人非常喜欢Windows的「画图」工具。这款工具我小学二年级时非常喜欢玩。长大后，也对它爱不释手。因为「画图」占用内存非常小，可以放大8倍，方便像素级别调整细节，裁剪、移动都非常方便！但是工作后一直在用Mac，裁剪图片没那么方便了。Mac自带的预览工具似乎有裁剪能力，但是自己总是用不惯，还是喜欢Windows「画图」的交互。最近，每次更新51CTO文章，总是需要配个图。51CTO配图推荐是需要比例的。如果我们能提前按照比例要
大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我常常需要处理二进制数据，每次面对一堆二进制数据，需要自己逐个字节转换为二进制、十六进制，去阅读和理解，去排查问题。举个例子：有一个场景是我的《我做了个《联机桌游合集:UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》，我使用websocket传输二进制数据，我使用protocolbuffer作为序列化协议。所有变量的值都用二进制表示，变量名也被用数字表示，体积很小。（另一种常见的序列化协议是JSON，
大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我常常需要处理二进制数据，每次面对一堆二进制数据，需要自己逐个字节转换为二进制、十六进制，去阅读和理解，去排查问题。举个例子：有一个场景是我的《我做了个《联机桌游合集:UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》，我使用websocket传输二进制数据，我使用protocolbuffer作为序列化协议。所有变量的值都用二进制表示，变量名也被用数字表示，体积很小。（另一种常见的序列化协议是JSON，
大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我们需要解析URL参数工作中，常常要根据URL排查问题，其中最重要的一步就是解析它的参数，取到关键词，然后才能去前端日志系统搜索。面试字节跳动和阿里巴巴时，都遇到了这样的面试题：（不许查阅任何API，使用没代码提示的记事本）请手写函数，可以解析URL中的参数。解决思路针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。但是这是存在问题的：我们把URL参数都暴露给
大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。背景我们需要解析URL参数工作中，常常要根据URL排查问题，其中最重要的一步就是解析它的参数，取到关键词，然后才能去前端日志系统搜索。面试字节跳动和阿里巴巴时，都遇到了这样的面试题：（不许查阅任何API，使用没代码提示的记事本）请手写函数，可以解析URL中的参数。解决思路针对上文第一个场景，我们更常见的做法是，搜索「URL解析」，然后找到网上免费的工具，输入URL，能把参数都告诉我，还能帮我decode参数，非常方便。但是这是存在问题的：我们把URL参数都暴露给
前言提到元素拖拽，通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：这是浏览器默认的拖拽效果，点住拖拽任意图片或文字都会产生。笔者因为之前有个小项目需要经常参考稿定设计，一直有留意其元素拖拽的效果(如下图)，所以接下来我将以这种效果为蓝本，使用原生JS实现一个富有动感的自定义拖拽效果，话不多说直接开摸。实现原理首先说下思路，我们需要知道鼠标的三个事件，分别是mousedown，mousemove，mouseup，当点击按下的时候，克隆一个绝对定位的元素
