6个月前
需求背景：希望做一个限定行数的富文本容器，当超过指定行数时，要在末行的尾部追加「展开」展开所有文本，以及展开后追加 「收起」来恢复折叠状态，以下展示几个用例：
当不超过指定行数时不做处理：
结合以往经验，类似的需求一般是在服务端来做处理，通过字数截断文本，将缩略文本和全部文本放在两个字段里，前端分别渲染就可以了，但是这个需求是要求限定行数，而服务端无法方便的得知用户本地的渲染效果，所以无法...
1年9个月前
最近有小伙伴花了大几千买了某视频网课的课程，快到期了还没看过，问我能不能下载到本地
先去 github 逛了一圈，发现有个叫做 CocoCut 的浏览器插件，可以下载视频，对于加密视频，只要能播放就能下载
试用后发现存在几个问题：
无法自动化，对于加密视频需要每次打开网页后点击插件弹出面板上一个叫做「force download」的按钮，跳转到其官网后打开 「Recording m...
1年11个月前
我们知道移动端页面的滚动响应对于用户体验来说至关重要，但是触发页面滚动的 touch 事件监听器往往会导致严重的滚动性能问题。Chrome 已经通过允许将 touch 事件监听器设置为 passive(给 addEventListener() 传递 {passive: true} 参数) 并传递 pointer events API 来解决了这个问题。这些新特性对于推动不阻塞页面滚动的新模式具有重...
2年2个月前
在新的 app 开发中或许我们可以不再需要 scroll 事件了。接下来我将演示当 position:sticky 的元素改变状态时如何使用 IntersectionObserver 来触发事件，但是不使用滚动监听事件。下面是例子:
例子 | 源码
sticky-change 事件的介绍
这是一个 CSS position:sticky 缺失的事件，目前并不存在
目前浏览器并...
2年9个月前
3 年前花了 360 元买的 1 核 2G 企鹅云要到期了，上面跑着我的 gitlab, 看了下续费一年的价格达到了惊人的 1135.44 元，为了防止被割韭菜，打算把该服务直接迁到目前用了 7 年多的当前博客部署的某动物园云，配置同样也是 1 核 2G 内存。
看官方安装介绍，1 核 4G 已经是能运行的最低配置，那我原来的机器是怎么运行的呢？查看原来安装版本发现是 gitlab-ce_9....
2年11个月前
执行 adb devices 之后输出：
* daemon not running; starting now at tcp:5037* daemon started successfullyList of devices attached
再次执行 adb devices 之后，还是输出：
* daemon not running; starting now at tcp:50...
3年前
web 开发发展到现在，前端和后端几乎已经完全分离了，不仅部署的环境分离，很多时候域名也是分离的。今天主要讨论一个不同域名下前后端交互所带来的问题。
我们先来看看 cookie 的写入规则：
当浏览器接收到请求返回时，会尝试解析 response header 中的 Set-Cookie 字段，它的构成一般是这样的：
Set-Cookie: a=1; domain=xwenliang...
3年5个月前
翻看很多第三方库的代码，会发现有一些库的 package.json 中有个 module 字段：
{
"name": "vue",
"version": "2.5.17",
"main": "dist/vue.runtime.common.js",
...
4年2个月前
最近在折腾使用 cocos creator 开发运营类小游戏，这确实是一款很棒的游戏开发软件，集成了整套的开发调试工具与跨平台编译支持，目前支持编译到绝大多数平台，甚至最近几年比较火的各种小游戏平台，一些经典游戏如《保卫萝卜》、《开心消消乐》等都是用此工具开发 (微信官方欢乐斗地主小游戏是用 cocos2d-js 开发) ，还是比较靠谱的。
由于我们的需求场景主要在微信平台，所以重点使用了其编译至...
4年6个月前
大概在今年 6·18 的前几天，我们发现分享至好友和朋友圈的营销活动链接被频繁封禁：
经过大量被封禁链接的规律分析发现，目前微信封禁的是初次访问的 url 中的 path 部分，改变 path 即可临时解封。（如果页面有二次跳转，那么微信封禁的会是跳转前的 url 地址）
但改变 path 成本很高，需要服务端有对应的内容与之响应，通常的手段要么是 nginx 配置虚拟路径，要么是前...
4年6个月前
我们的构建工具中有下载和上传的功能，分别是在创建项目和发布代码到测试环境的时候；最开始为了偷懒都是先 下载/打包 成临时压缩包，然后 解压/上传 这个临时压缩包
后来觉得先写个文件到磁盘，再 解压/上传 这个文件有点傻，因为 解压/上传 完毕还要再删掉它，并且即使捕获了程序异常退出、上传失败、网络不通等等异常还是会因为一些原因删不掉，比如突然断电、程序异常崩溃等
倒是有个猥琐的手段，写到一...
4年7个月前
什么是BFCache
back-forward cache, 为浏览器前进/后退时准备的缓存
官方解释提到了 nsIDOMWindow ，那什么是 nsIDOMWindow 呢？
它是 Gecko 内核标准下的一个 interface, 它主要描述了一个承载了 Document Object Model(DOM)的容器，也就是我们常用的 window 根对象。
与之很像的还有一个叫做 ns...
5年前
最近半年都在做一个团队内部的构建工具(以下简称CLI)，目的是统一管理构建环境的版本，构建环境出了问题或者需要升级的时候统一解决。
既然是想统一版本，那肯定希望每个人安装到本地的CLI所依赖的node_modules版本都是一致的，我们用的node版本是v8.12.0(npm@6.4.1)，正好会自动生成package-lock.json(从npm@&#x...
5年1个月前
webp 最早由 Google 收购的 On2 Technologies 于2010年9月底提出，2014年初发布的 Chrome@32 和稍早发布的 Android Browser@4.2 完全支持了 webp 的所有特性，包括有损压缩、无损压缩、动态图等，然而直到现在 Apple 生态还是...
5年1个月前
最近在做一个活动时候，需要将 H5 页面嵌入别人家的小程序中，正常微信环境中我们会通过在分享链接拼接参数的方式，来获取微信用户的分享关系，然而在小程序中分享的地址是小程序自己的 path, 其他用户点击的时候会直接进入小程序的这个 path, 所以 H5 就不能直接获取到用户的分享关系了。
那么怎么实现呢？思路是挺简单的：
H5 将需要拼接在分享链接上的参数，通过 wx.miniProg...
5年4个月前
最近做了个图表的东西，图表上有拖拽的交互，在拖拽的时候不小心就会拖动到页面，为了避免这个交互带来的影响，很自然的我们想到了阻止页面滚动常用的伎俩：
document.body.addEventListener('touchmove', e => {
e.preventDefault();
}, false);
打开页面发现，好像并没有生效，并且报了这么个错误： ...
5年5个月前
webpack4 对 css 的默认处理是同步引用的 [s]css 合并成一个文件，其他异步引用的分别单独打成独立文件但是在 [s]css 文件中使用 @import 引用的公共模块并不会被抽离出来合并，这导致引用了大量的重复代码，可以看看 sass-loader 其中一个 issue 对此问题的讨论
我们希望同步引用的 [s]css 文件最终打包成两个 css, 一个是通用的 common....
5年5个月前
问题复现
先访问 https://a.com, 该网页 JS 会请求 https://api.a.com 接口
再访问 http://a.com, 该网页 JS 会请求 http://api.a.com, 但是查看网络请求发现，http://api.a.com 被强制 307 到了 https://api.a.com
经过排查发现，这是命中了浏览器的 HSTS 策略，即：
一切能通过...
6年前
从 babel-preset-env 之前官方 github 的 release 列表中可以看到，距离可追溯的第一个 2.0 的 alpha 版本 v2.0.0-alpha.4 (2017-04-07) 已经过去了 382 天，在经历了几十个 alpha 版本和几个 beta 版本后版本号变成了 7.0.0-beta.3, 与之对应的 babel-core 也接连发布了多个 7.0.0 的 alp...
6年前
今天在折腾 proxy 代理的时候，遇到了这么个需求：只匹配不包含 /js/ 的路径，然后理所当然的认为 proxy 的路径应该是支持正则匹配的，不匹配某个特定组合的字符需要用到零宽度负预测先行断言(?!exp)：^(?!.*\/js\/).*$
然而并没有起任何作用，似乎并没有匹配到任何路径。查遍了官方文档也没有找到可以打印代理日志的方法，只能去 webpack-dev-server 的代码...
加载更多