UIButton 状态新解

2020-10-14
阅读 6 分钟
2.4k
作为 iOS 开发者,一提到控件,就不得不提到 UIButton,它做为 iOS 系统最常用的响应用户点击操作的控件,为我们提供了相当丰富的功能以及可定制性。而我们的日常工作的 80% ~ 90% 做是在与 UI 打交道,处理控件在用户的不同操作下的不同状态,最简单的,比如用户没有登录时,按钮置灰不可点击,用户点击时出现一个反色...

搭建一个属于自己的在线 IDE

2020-10-12
阅读 13 分钟
5k
这几个月在公司内做一个跨前端项目之间共享组件/区块的工程,主要思路就是在 Bit 的基础上进行开发。Bit 主要目的是实现不同项目 共享 与 同步 组件/区块,大致思路如下:在 A 项目中通过执行 Bit 提供的命令行工具将需要共享的组件/区块的源码推送到远端仓库,然后在 B 项目中就可以同样通过 Bit 提供的命令行工具拉取...

RBAC 权限模型在 EggJS 中的实践

2020-09-24
阅读 5 分钟
3k
一提到后台系统,权限管理体系是其中一个必不可少的组成部分。后台往往涉及到大量的数据(包含许多隐私数据),这些数据通常需要不同职责的人员进行分别管理也就是我们所谓的各司其职。一个良好的权限设计能够起到保证业务数据处理的流畅性,降低操作风险,保障数据安全的作用。在近期负责的中后台应用中正好有权限设计...

字体构造与文字垂直居中方案探索

2020-09-09
阅读 8 分钟
6.1k
垂直居中基本上是入门 CSS 必须要掌握的问题了,我们肯定在各种教程中都看到过“CSS 垂直居中的 N 种方法”,通常来说,这些方法已经可以满足各种使用场景了,然而当我们碰到了需要使用某些特殊字体进行混排、或者使文字对齐图标的情况时,也许会发现,无论使用哪种垂直居中的方法,总是感觉文字向上或向下偏移了几像素,...

云音乐 React Native 体系建设与发展

2020-09-02
阅读 7 分钟
11.5k
17 年 3 月份,为了解决商城性能和用户体验问题,云音乐技术团队组建了一只 4 人 ReactNative 开发小分队:我负责 RN 前端开发,安卓和 iOS 两位开发负责在云音乐 App 里面嵌入 RN Native SDK,还有一位 Java 开发来负责部署平台工作。

用「增量」思想提升代码检查和打包构建的效率

2020-08-26
阅读 7 分钟
3.9k
在这里「增量」这个概念的对立面是「全量」。在 Linux 系统中当需要备份数据或者跨服务器同步文件时,会用到一个叫 rsync 的工具,它的速度会比 scp/cp 命令更快,因为它会先判断已经存在的数据和新数据的差异,只传输不同的部分,即「增量」同步。

面向复杂场景的表单解决方案

2020-08-20
阅读 9 分钟
8.3k
云音乐 B 端业务场景非常多,B 端业务相对于 C 端业务产品生命周期更长而且更注重场景的的梳理。很多时候开发 B 端业务都是拷贝之前的代码,这样增加了很多重复而且枯燥的工作量。

React Fiber 源码解析

2020-08-11
阅读 16 分钟
10.9k
在 React v16.13 版本中,正式推出了实验性的 Concurrent Mode,尤其是提供一种新的机制 Suspense,非常自然地解决了一直以来存在的异步副作用问题。结合前面 v16.8 推出的 Hooks,v16.0 底层架构 Fiber,React 给开发者体验上带来了极大提升以及一定程度上更佳的用户体验。所以,对 React 17,你会有什么期待?

Web 端 APNG 播放实现原理

2020-08-06
阅读 10 分钟
11.7k
如果动画仅单独展示可以使用 <img> 直接展示 APNG 动画,但是会存在兼容性 Bug,例如:部分浏览器不支持 APNG 播放,Android 部分机型重复播放失效。

React Native 实现自定义下拉刷新组件

2020-07-21
阅读 7 分钟
7.7k
Web 应用如果要更新列表数据,一般会选择点击左上角刷新按钮,或使用快捷键 Ctrl+F5,进行页面资源和数据的全量更新。如果页面提供了刷新按钮或是翻页按钮,也可以点击只做数据更新。

实现一个简单的基于 WebAssembly 的图片处理应用

2020-07-01
阅读 9 分钟
10.3k
本文希望通过 Rust 敲一敲 WebAssembly 的大门。作为一篇入门文章,期望能够帮你了解 WebAssembly 以及构建一个简单的 WebAssembly 应用。在不考虑IE的情况,目前大部分主流的浏览器已经支持 WebAssembly,尤其在移动端,主流的UC、X5内核、Safari等都已支持。读完本文,希望能够帮助你将 WebAssembly 应用在生产环境中。

构建基于 iOS 模拟器的前端调试方案

2020-06-24
阅读 5 分钟
8k
我们在开发 iOS App 内的前端页面时,有一个很大的痛点,页面无法使用 Safari Inspector 等工具调试。遇到了问题,我们只能想办法加 vConsole,或者注入 Weinre,或者盲改,实在不行就找客户端同学手动打包调试,总之排查问题的路途非常艰难。

互动直播中的前端技术 -- 即时通讯

2020-06-08
阅读 7 分钟
2.4k
在疫情期间,上班族开启了远程办公,体验了各种远程办公软件。老师做起了主播,学生们感受到了被钉钉支配的恐惧,歌手们开启了在线演唱会,许多综艺节目也变成了在线直播。在这全民互动直播的时期,我们来聊聊互动直播中的即时通讯技术在前端中的使用。

React Hooks 最佳实践

2020-05-22
阅读 19 分钟
3.4k
在过去的几个月里,React Hooks 在我们的项目中得到了充分利用。在实际使用过程中,我发现 React Hooks 除了带来简洁的代码外,也存在对其使用不当的情况。

Node.js 应用日志切割原理与踩坑实践

2020-05-09
阅读 6 分钟
4.8k
2019 年初的时候,我们业务组上线了一个新的 Node.js 应用,主要提供C端的 API 服务。 随着应用流量的逐渐增加,线上监控平台会偶发性报警,提示磁盘 disk_io 平均等待时间超出 1000ms,随后观察发现磁盘 IO 每秒写字节量突然飙高,但很快又下降。

Node CLI 工具的插件方案探索

2020-04-28
阅读 7 分钟
2.2k
CLI 工具作为开发者们亲密无间的好伙伴,996 风雨无阻地陪伴着我们进行日常的开发工作。身为前端开发,你一定也亲自开发过一套属于你自己的 CLI 小工具!如果没有,本文也不会教~ 在接下来的五分钟里,我们来聊聊 Node CLI 工具的进阶设计,探索一下在 CLI 端需求复杂化的场景下,如何利用插件机制来为这类小工具带来更...

从零搭建中后台框架的核心流程

2020-04-17
阅读 16 分钟
4.1k
随着 React 生态的快速发展,社区基于 React 的状态管理方案层出不穷,这意味着很多方案开发者依然要做很多选择,没有约定的团队,沟通成本和跨团队协作成本,以及长期的维护是非常高的,这时候统一一套开发模式就显得尤为重要。

Web 视频播放的那些事儿

2020-04-08
阅读 12 分钟
3.9k
对于视频的在线播放,按视频内容的实时性可以分为点播(VOD)和直播(Live Streaming)。现如今在 Web 环境下需要进行视频播放时,通常可以使用 video 标签,通过它将视频播放的各个环节都托管给浏览器。

从全局播放到单例模式

2020-03-24
阅读 7 分钟
1.6k
图片来源:[链接]本文作者:郑正和 本文以音频能力中的全局播放为切入点,探讨单例模式在前端业务中的应用。文中代码均为 React 组件内代码。 全局播放 在文章一开始,我们先解释一下全局播放的含义: 媒体在应用中时时都在播放(跨路由、跨 tab、后台播放) 用户对媒体有全局控制能力 对大多数具备音频能力的应用而言,...

Three.js 动效方案

2020-03-17
阅读 11 分钟
6.8k
Three.js(下面简称 Three) 作为一个 3D 库,不仅减少了我们学习 OpenGL 和 WebGL 的成本,还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知,Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D 世界」。

支持动态路由的 React Server Side Rendering 实现

2020-02-28
阅读 9 分钟
2.1k
Server Side Rendering(SSR):服务端渲染,简而言之就是后台语言通过模版引擎生成 HTML 。实现方式依赖于后台语言,例如 Python Flask 的 Jinja、Django 框架、Java 的 VM、Node.js 的 Jade 等。

前端 DSL 实践指南(上)—— 内部 DSL

2020-02-20
阅读 13 分钟
5.8k
前言 近几年,前端社区中 DSL 这个词开始频繁出镜,这和环境的变化有很大关系: React、Vue、Angular 等现代框架的表现层设计往往和 DSL 有较强的关联,透过这些优秀作品我们可以得到一些实践指引。 前端相关语言的转编译工具链趋于成熟,如 babel,postcss 等工具可以帮助开发者以扩展插件的方式低成本地参与到语言构建...

捕获 React 异常

2020-01-14
阅读 8 分钟
5.5k
韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑,本来是一件喜大普奔的好事,结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃,紧急排查后发现真凶就是下面这段代码。

用 Web 实现一个简易的音频编辑器

2020-01-09
阅读 11 分钟
4.8k
市面上,音频编辑软件非常多,比如 cubase、sonar 等等。虽然它们功能强大,但是在 Web 上的应用却显得心有余而力不足。因为 Web 应用的大多数资源都是存放在网络服务器中的,用 cubase 这些软件,首先要把音频文件下载下来,修改完之后再上传到服务器,最后还要作更新操作,操作效率极其低下。如果能让音频直接在 Web ...

函数式编程进阶:杰克船长的黑珍珠号

2019-12-30
阅读 10 分钟
3k
函数式编程(Functional Programming)这一理念不论是在前端领域还是后端领域,都逐渐热门起来,现在不大量使用函数式编程技术的大型应用程序已经很罕见了,比如前端流行的 React(核心思路数据即视图),Vue3.0 的 Composition API ,Redux ,Lodash 等等前端框架和库,无不充斥着函数式的思维,实际上函数式编程绝不是...

「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽

2019-12-25
阅读 14 分钟
12.3k
在线体验地址:hksite.cn/prjs/christmashat 源码地址:[链接] 写在开头 叮叮当,叮叮当,吊儿个郎当,一年一度的圣诞节到咯,我不由的回想起了前两年票圈被圣诞帽支配的恐惧。打开票圈全是各种@官方求帽子的: 票圈头像也瞬间被圣诞帽攻陷: 在那段时间,你没一顶圣诞帽还真不好意思发票圈 各种戴帽子的软件也如雨后春...

从 Fetch 到 Streams —— 以流的角度处理网络请求

2019-12-23
阅读 30 分钟
18.6k
自第一个实现的浏览器开始计算,Fetch API 已经快要五岁了。这五年 Chrome 和 Firefox 刷了不少版本号,IE 也不知死了多少年,而它的继任者更是上演了一出名为《Edge: Become Chromium》的好剧。再加上 ES6+ 的普及,我们早已习惯了基于 Promise 和 async/await 的异步编程,所以估计不少同学也转而使用 Fetch API 作异...

开发高质量服务端 API

2019-12-17
阅读 11 分钟
1.9k
不管 Node.js 在实际产品中的使用情况如何,相信现在使用 Node.js 作为服务端来开发的项目是数以百万计的,其中绝大多数的开发人员都是前端工程师,因为 Node.js 是他们的天然语言工具。将来,越来越多的前端工程师会加入到 Node.js 的开发中来。

高质量前端快照方案:来自页面的「自拍」

2019-12-13
阅读 14 分钟
8.6k
快照环节通常处于页面交互流程的末端,汇总了用户最终的参与结果,直接影响到用户对于活动的完整体验。因此,生成高质量的页面快照,对于活动的传播和品牌的转化具有十分重要的意义。

云原生基础及调研

2019-12-09
阅读 4 分钟
2.2k
本文仅用于简单普及,达到的目的是给没接触过或者很少接触过这方面的人一点感觉,阅读起来会比较轻松,作者深知短篇幅文章是不可能真正教会什么的,所以也不会出现 RTFM 的内容。