盲调试解决 Zebra 打印机吞纸问题的经历
本来我以为，前端的工作内容只需要跟浏览器打交道，最多再做一做客户端和后端；万万没想到，如标题所示，我居然需要解决打印机的问题。奇怪的需求我们有一个画面单的平台，关于这个平台，我之前已经写过几篇文章，这里就不多提了。一天，面单的产品突然把我拉到了一个群里，因为我们的业务 PM（BPM）接到了一个紧急需求：在我们开始跟某个卖家合作时，他们提出：我们在打印面单的时候，必须支持通过一个叫 Zebra 的打印机来打印，否则就不跟我们合作。由于那是一个大卖家，因此这似乎是一个无法拒绝的需求。虽然我们完全没听说过这种打印机，还是硬着头皮上了。经过调查发现，Zebra 打印机与一般的打印机不太一样，它无法通过系统的打印框来打印，甚至不是走的 COM 或 USB 接口，而是监听了一个 TCP 端口来与电脑通讯。发送给打印机..
更多
Slate 介绍分析与实践
Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年。介绍Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年，作者是 Ian Storm Taylor。它吸收了 Quill，Prosemirror，Draft.js 的优点，核心数据模型十分精简，具有高度的可扩展性，最新版本为 v0.60.1。特点插件作为一等公民，能够完全修改编辑器行为数据层和渲染层分离，更新数据触发渲染文档数据类似于 DOM 树，可嵌套具有原子化操作 API，理论上支持协同编辑使用 React 作为渲染层不可变数据结构 Immer架构图源码分析Slate 使用 monorepo 方式管理仓库，packages 目录中有 4 个源码包。slateslate ..
更多
认识 Range 和 Selection 对象
浏览器的 Range 和 Selection 对象前置知识DOM 文档对象模型中总共有 12 种节点类型，常见的有以下几种常量值类型ELEMENT_NODE1元素节点TEXT_NODE3文本节点COMMENT_NODE8注释节点DOCUMENT_NODE9Document 节点DOCUMENT_FRAGMENT_NODE11DocumentFragment 节点https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeTypeRangeRange 对象表示一个范围，有起始点和终止点，是用于管理选择范围的通用对象。每个点都是一个相对于父节点的偏移量（offset），如果父节点是元素节点，则偏移量是子节点的编号。如果父节点是文本节点，则是文本..
更多什么是 peerDependencies
package.json 里面的 peerDependencies 是什么意思前言众所周知 dependencies 是项目的依赖包，devDependencies 项目开发阶段的依赖包，这些依赖包会在 npm install 过程中自动安装。假设项目本身依赖 package A, 但是另一个 package B 同时依赖 package A，为了避免冲突，这时候就需要将 package A 设置为 package B 的peerDependencies。示例假设项目 A 依赖 package B12345{ "dependencies": { "b": "^1.0.0" }}package B 有一个 peerDependencies package c12345{ "peerDepende..
更多我终于知道了补码的意义
本文供初学者学习，供大佬批判。补码背景很久很久以前，当我参加 NOIP（信息学奥林匹克竞赛）的时候，老师是这么讲补码的：int 型数据的最高位是符号位，符号位为 0 就代表这是正数，为 1 就是负数。但是，+0 和 -0 理应是同一个数，但在二进制中却表示成了两个不同的数（以 8 位为例，二进制表示）： 00000000 和 10000000。所以，我们引入了补码，补码就是，对负数而言，符号位不变，其他位取反，然后再加 1。于是， -0 的补码就是 10000000 -> 11111111 -> 00000000 与 +0 一致了。补码的意义其实当时我就该意识到，仅仅为了 0 这一个数便创建了“补码”这个概念，未免太浪费了。我最近看了 CS: APP 这本书，才进一步理解了补码。补码，就是为有..
更多
React 的 7 种代码异味[译]
教你如何更好地写 React。前言原文链接：7 code smells in your React components作者信息：Anton Gunnarsson翻译许可： Agree 正文自从使用 React 后，我见过越来越多可值得优化的点，比如：大量的 propsprops 的不兼容性props 复制为 state返回 JSX 的函数state 的多个状态useState 过多复杂的 useEffect在本文中，我想分享几个技巧，这些技巧将改善你的 React 代码。大量的 props如果需要把大量的 props 传递到一个组件中，那么很有可能 该组件可再进一步拆分。 问题来了，“大量” 具体是多少呢？答案是 看情况。假设你正在开发 一个包含 20 个或更多 props 的组件时，你想再添加一些..
更多
为什么 Linux 需要 Swapping
为什么这么设计（Why’s THE Design）是一系列关于计算机领域中程序设计决策的文章，我们在这个系列的每一篇文章中都会提出一个具体的问题并从不同的角度讨论这种设计的优缺点、对具体实现造成的影响。如果你有想要了解的问题，可以在文章下面留言。对 Linux 稍有了解的人都知道，Linux 会将物理的随机读取内存（Random Access Memory、RAM）按页分割成 4KB 大小的内存块，而今天要介绍的 Swapping 机制就与内存息息相关，它是操作系统将物理内存页中的内容拷贝到硬盘上交换空间（Swap Space）以释放内存的过程，物理内存和硬盘上的交换分区组成了操作系统上可用的虚拟内存，而这些交换空间都是系统管理员预先配置好的1。图 1 - Linux Swapping正是因为 Linux..
更多
学习观察者模式
观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的对象。什么是观察者模式观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的对象。有值得关注的状态的对象通常被称为目标，由于它要将自身的状态改变通知给其他对象，我们也将其称为发布者 （publisher），所有希望关注发布者状态变化的其他对象被称为订阅者（subscribers）。当发布者发布了事件，它要遍历订阅者并调用其对象的特定通知方法。举例说明观察者模式类似于明星与粉丝的关系，粉丝关注明星，当明星发布消息的时候，粉丝会对这个消息做出反应。观察者模式适用场景当一个对象状态的改变需要改变其他对象，可使用观察者模式。当一些对象必须观察其他对象时，可使用观察者模式..
更多
DEFCON 28 Final 杂记
距离 DEFCON 28 Final 已经过去了两个多月了，本来结束就写写，但是因为一些后来事耽搁了，现在补一下这次参赛的一些经历。[TOC]Preface前言：本篇文章不代表任何组织社团的观点，全文仅代表个人看法以及意见。如有冒犯请联系我进行必要的修改。由于今年疫情的原因，今年的 DEFCON Final 在线上举办，我有幸与 Tea Deliverers 一起参与了 DEFCON 28 CTF Final ，最终在比赛中取得了第四的成绩。本文我会主要从参赛经历见闻以及一些对于 Web 题的分析入手来写这篇文章，由于 Web 题过分简单，也没什么特别好分析的，所以没什么技术营养，可以权当小说看看，博君一笑。并且为了避免一些不必要的麻烦，全文涉及到姓名 ID 处我都尽量以某师傅进行称呼。The First..
更多性能压测工具 wrk 使用
wrk 是一款针对 Http 协议的基准测试工具，它能够在单机多核 CPU 的条件下，使用系统自带的高性能 I/O 机制，如 epoll，kqueue 等，通过多线程和事件模式，对目标机器产生大量的负载。 名词解释 QPS: QPS（Query per second 每秒处理完的请求数） 什么是wrk 看下他GitHub上的介绍：https://github.com/wg/wrk wrk is a modern HTTP benchmarking tool capable of generating significant load when run on a single multi-core CPU. It combines a multithreaded design with scal..
更多