web开发笔记

限定行数的富文本末尾实现展开收起

1年前

需求背景：希望做一个限定行数的富文本容器，当超过指定行数时，要在末行的尾部追加「展开」展开所有文本，以及展开后追加「收起」来恢复折叠状态，以下展示几个用例：当不超过指定行数时不做处理：结合以往经验，类似的需求一般是在服务端来做处理，通过字数截断文本，将缩略文本和全部文本放在两个字段里，前端分别渲染就可以了，但是这个需求是要求限定行数，而服务端无法方便的得知用户本地的渲染效果，所以无法...

Javascript 5458 0 2cssjs

升级用了快十年的阿里云 ECS

1年3个月前

因为一直装不上 node@14, 又急于使用 optional chaining, 终于在去年年底忍无可忍做了系统升级，整个过程都记录了下来，主要包括以下内容：开机启动项配置变更 mongodb 跨大版本升级及数据恢复 certbot 变更 gitlab 遇到 gem 包升级问题 mysql 安装老版本及数据恢复 php 安装老版本(为了兼容老代码) p...

Nodejs 1406 1 0upgradeecslinuxmongodbmysqlphpphpmyadmin

最近想给我的鱼缸搞个直播，但是发现少个手机支架，所以打开京东搜了个差不多的就下单了。到货后突发奇想，这东西阿里巴巴上是不是更便宜些，于是打开 APP 搜了下相似的产品，价格竟然不到京东的十分之一...震惊之余再打开拼多多看了下，价格也差不多只有京东的五分之一...然后再打开淘宝看看，找到一家跟我在京东买的店铺同名的店，价格也是一样的，并且没有发现与之更便宜的了... 最后我回到京东 APP,...

心路历程 3151 5 3购物

通用在线加密视频解密方案

2年3个月前

最近有小伙伴花了大几千买了某视频网课的课程，快到期了还没看过，问我能不能下载到本地先去 github 逛了一圈，发现有个叫做 CocoCut 的浏览器插件，可以下载视频，对于加密视频，只要能播放就能下载试用后发现存在几个问题：无法自动化，对于加密视频需要每次打开网页后点击插件弹出面板上一个叫做「force download」的按钮，跳转到其官网后打开「Recording m...

Javascript 4048 2 9hlsm3u8video

让页面的滚动更流畅

2年6个月前

我们知道移动端页面的滚动响应对于用户体验来说至关重要，但是触发页面滚动的 touch 事件监听器往往会导致严重的滚动性能问题。Chrome 已经通过允许将 touch 事件监听器设置为 passive(给 addEventListener() 传递 {passive: true} 参数) 并传递 pointer events API 来解决了这个问题。这些新特性对于推动不阻塞页面滚动的新模式具有重...

Javascript 1668 0 205passive-event-listeners 翻译

各种改版

2年7个月前

最近亲眼目睹了自己常上的两个网站大改版，分别是：https://developer.mozilla.org/https://developers.google.com/web 第一个是常用的文档参考工具，真的有点不太适应新的风格，很多网友和我持有一样的看法：MDN’s new UI is ugly第二个是查询资料的时候经常用到，找到了很多 API 的设计理念和来源，很受启发，正打算将整个系列翻...

心路历程 2506 1 0改版

监听 CSS position:sticky 的事件

2年9个月前

在新的 app 开发中或许我们可以不再需要 scroll 事件了。接下来我将演示当 position:sticky 的元素改变状态时如何使用 IntersectionObserver 来触发事件，但是不使用滚动监听事件。下面是例子: 例子 | 源码 sticky-change 事件的介绍这是一个 CSS position:sticky 缺失的事件，目前并不存在目前浏览器并...

Javascript 3781 3 0sticky翻译

1 核 2G 服务器安装 gitlab-ce

3年3个月前

3 年前花了 360 元买的 1 核 2G 企鹅云要到期了，上面跑着我的 gitlab, 看了下续费一年的价格达到了惊人的 1135.44 元，为了防止被割韭菜，打算把该服务直接迁到目前用了 7 年多的当前博客部署的某动物园云，配置同样也是 1 核 2G 内存。看官方安装介绍，1 核 4G 已经是能运行的最低配置，那我原来的机器是怎么运行的呢？查看原来安装版本发现是 gitlab-ce_9....

Javascript 2322 0 0gitlab

adb 不能连接

3年5个月前

执行 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...

Javascript 1433 0 0adb android

跨域 cookie 二三事

3年7个月前

web 开发发展到现在，前端和后端几乎已经完全分离了，不仅部署的环境分离，很多时候域名也是分离的。今天主要讨论一个不同域名下前后端交互所带来的问题。我们先来看看 cookie 的写入规则：当浏览器接收到请求返回时，会尝试解析 response header 中的 Set-Cookie 字段，它的构成一般是这样的： Set-Cookie: a=1; domain=xwenliang...

Javascript 3252 2 0samesite third party cookie cors

MongoDB 自带的 _id 会不会重复

3年11个月前

前些天吃晚饭的时候跟曹老师聊起来数据库的东西，顺带吐槽了下他们 MongoDB 用的很山寨，表里的每条数据还得单独存个时间戳字段，因为我们知道 MongoDB 自带的 _id 中是可以解析出秒级时间戳的。曹老师当场不同意我的看法，认为他们这么做是有一定道理的，因为默认的 _id 是没法用的会重复，所以他们使用雪花算法自定义了 _id, 所以才又单独存了个时间戳字段。且不说自定义 _id 的时候...

Nodejs 3034 2 7mongodb_id

ESM(ES6 Module) 的前世今生

3年12个月前

翻看很多第三方库的代码，会发现有一些库的 package.json 中有个 module 字段： { "name": "vue", "version": "2.5.17", "main": "dist/vue.runtime.common.js", ...

Javascript 4233 2 0npm package esm module

微信小程序与微信小游戏

4年8个月前

最近在折腾使用 cocos creator 开发运营类小游戏，这确实是一款很棒的游戏开发软件，集成了整套的开发调试工具与跨平台编译支持，目前支持编译到绝大多数平台，甚至最近几年比较火的各种小游戏平台，一些经典游戏如《保卫萝卜》、《开心消消乐》等都是用此工具开发 (微信官方欢乐斗地主小游戏是用 cocos2d-js 开发) ，还是比较靠谱的。由于我们的需求场景主要在微信平台，所以重点使用了其编译至...

Javascript 2685 0 0微信小程序小游戏

微信封禁链接小结

5年前

大概在今年 6·18 的前几天，我们发现分享至好友和朋友圈的营销活动链接被频繁封禁：经过大量被封禁链接的规律分析发现，目前微信封禁的是初次访问的 url 中的 path 部分，改变 path 即可临时解封。（如果页面有二次跳转，那么微信封禁的会是跳转前的 url 地址）但改变 path 成本很高，需要服务端有对应的内容与之响应，通常的手段要么是 nginx 配置虚拟路径，要么是前...

Javascript 7947 8 0微信封禁链接

Nodejs 中的流式下载解压与流式压缩上传

5年前

我们的构建工具中有下载和上传的功能，分别是在创建项目和发布代码到测试环境的时候；最开始为了偷懒都是先下载/打包成临时压缩包，然后解压/上传这个临时压缩包后来觉得先写个文件到磁盘，再解压/上传这个文件有点傻，因为解压/上传完毕还要再删掉它，并且即使捕获了程序异常退出、上传失败、网络不通等等异常还是会因为一些原因删不掉，比如突然断电、程序异常崩溃等倒是有个猥琐的手段，写到一...

Javascript 5748 1 0streamuploaddownload

BFCache 与 SPA单页面应用前进后退导致白屏

5年1个月前

什么是BFCache back-forward cache, 为浏览器前进/后退时准备的缓存官方解释提到了 nsIDOMWindow ，那什么是 nsIDOMWindow 呢？它是 Gecko 内核标准下的一个 interface, 它主要描述了一个承载了 Document Object Model(DOM)的容器，也就是我们常用的 window 根对象。与之很像的还有一个叫做 ns...

Javascript 5092 4 0BFCacheSPA白屏

buffer 上传中遇到的问题

5年2个月前

最近在做的这个构建工具中，有个打包上传的功能，共分为两步：使用 archiver 将文件打包成 zip 格式文件包将 zip 包上传至指定地址第一步最开始的时候做成了先本地生成一个临时文件，然后使用 request 模块上传: // 简单代码，未做任何异常捕获和处理 const archiver = require('archiver'); const req...

Nodejs 4352 3 0bufferstreamupload

package-lock 和 npm-shrinkwrap

5年6个月前

最近半年都在做一个团队内部的构建工具(以下简称CLI)，目的是统一管理构建环境的版本，构建环境出了问题或者需要升级的时候统一解决。既然是想统一版本，那肯定希望每个人安装到本地的CLI所依赖的node_modules版本都是一致的，我们用的node版本是v8.12.0(npm@6.4.1)，正好会自动生成package-lock.json(从npm@&#...

Javascript 3250 1 0package-locknpm-shrinkwrapnodejs

开发无感知的webp升级方案

5年7个月前

webp 最早由 Google 收购的 On2 Technologies 于2010年9月底提出，2014年初发布的 Chrome@32 和稍早发布的 Android Browser@4.2 完全支持了 webp 的所有特性，包括有损压缩、无损压缩、动态图等，然而直到现在 Apple 生态还是完...

Javascript 4086 4 0webp

微信小程序web-view组件的坑