findxc
findxc
## 简介 虽然 WebP 格式的图片已经出来很久很久了，但是最近才仔细研究了下，恩，后知后觉 =.= 浏览器兼容性如下，还是挺不错的了。  很多网站都已经用上了，比如下面这些： * https://www.youtube.com * https://www.nationalgeographic.com * https://www.taobao.com * https://www.jd.com 简单来说，WebP 格式的图片体积小并且足够清晰。 可以去这里实际感受一下：[WebP - 图片格式的发展趋势 - 又拍云](https://www.upyun.com/webp) 。 ## 怎么用 那在实际开发过程中，我们怎么把这种格式图片使用起来呢？ 如果你不需要兼容 IE...
## HTTP/1.1 为什么要限制同一时刻 TCP 连接数量 在 Chrome 中 HTTP/1.1 对于同一个 [origin](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Origin) ，同一时刻最多只能有 6 个 TCP 连接。 比如你页面同时找某个源请求 10 个不同资源，那么会有 4 个请求需要排队，如下图所示，末尾的 4 个请求 Waterfall 中有一段灰色的，就表示在排队。   我们可以把请求按 Connection ID...
## 为什么不能只有同步 因为 JS 是单线程的，如果只有同步，那比如发一个请求，就会一直等待请求结束，这期间界面无法响应用户其它交互，这显然是不可接受的。 采用异步的方式，我们发完请求后会去处理其它工作，等请求结果回来后再继续处理它。 那问题来了，这个异步语法设计成什么样会比较好呢？（什么是好：写起来方便，可读性、可维护性高） ```js // 比如我在这里请求登录 requestLogin() // 然后在请求成功后，代码的执行又回到这里来，这个语法怎么设计比较好？ if(response.ok) { console.log('登录成功') } ``` ## 回调函数的方式 最初就是以回调函数的方式来写异步代码。现在在一些第三方 API 文档上也能看到，比如微信小程序提供的 [wx.login](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) ： ```js wx.login({ success(res) { if...
进程？线程？
## 物理核心数和逻辑核心数 每个电脑都会有一个 CPU ，全称 Central Processing Unit ，中文翻译为中央处理器。 现在的 CPU 一般是多核的。比如你的电脑是双核，这个双核是指硬件/物理层面 CPU 包含两个核心。  终端输入 `sysctl hw.physicalcpu` 来查看物理核心数，也是显示的 2 。 终端输入 `sysctl hw.logicalcpu` 来查看逻辑核心数，会发现显示的是 4 。因为英特尔的超线程技术，使得从软件层面来看，变成 4 个核心了。 在活动监视器中，双击底部的...
## 准备工作 需要额外买一个无线USB网卡。这样才能同时连接内网和外网WIFI。（我买的是这款[usb无线网卡](https://detail.tmall.com/item.htm?id=591251554421&ut_sk=1.V72O6P3wqSUDAARCP2IKZUAA_21380790_1562560504460.DingTalk.1&sourceType=item&price=29.8&origin_price=69&suid=489E6F77-B58B-438C-AEC4-4B9B44A60005&un=cb42d0d5161995582040bd82ddc2e1ea&share_crt_v=1&cpp=1&shareurl=true&spm=a313p.22.12e.1047142760258&short_name=h.e6yr2uY&app=chrome)，需要安装一个软件，下载地址找淘宝客服要） 请连接好内网和外网WIFI后再进行后续操作。  ## 手动设置的方式 命令就一条，在终端执行`sudo route add -net 172.16.0.0 172.16.104.1`即可。不过重启了之后就失效了。所以下面用 Automator 的方式去写一个脚本，然后配置为开机的时候启动一次。 解释下，`sudo route add -net 172.16.0.0 172.16.104.1`的含义是访问所有`172.16`开头的 ip 地址时都会通过`172.16.104.1`进行连接。这里`172.16.104.1`是内网的 Gateway 值。执行`netstat -nr | less` 查看路由配置会有两个 `default`的配置，一个是内网的一个是外网的。...
先剧透，都是用 `translate` 属性来进行移动来实现的。 你想无缝滚动和无缝轮播其实都是内容区域的移动对吧。 再剧透，都会把原先的内容 copy 一份接在后面来实现无缝，因为如果你只是单纯移动，那移动到尾部了就会有空白了。 ## translateY(-100%)  `translateY(-100%)` 的效果如上图所示，如果只是这样来滚动会有空白出现，不是无缝的。 ## 无缝滚动 通过在 `A` 下面跟一个同样的 `A'`，这样往上滚动时就不会有空白啦。 通过 `animation` 来实现动画即可。如果想实现鼠标移上去时停止移动的效果，加上 `animation-play-state: paused;` 即可。 具体代码可以参见 [seamless-scroll - CodeSandbox](https://codesandbox.io/s/seamless-scroll-6uyqg) 。 ...
[跨域资源共享](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)，也就是 CORS，全称是 Cross-Origin Resource Sharing 。配置跨域资源共享其实就是配置一些请求头来实现的。 ## 本地测试环境搭建 弄了一个有前端代码和后端代码的仓库来在本地进行各种测试，见 https://github.com/findxc/frontend-and-backend-playground 。 backend 路径下有两个文件，一个是没考虑 cookie 的跨域相关设置，一个是有考虑 cookie 的跨域相关设置。 通过 `npm run start-no-cookie` 或者 `npm run start-need-cookie` 来启动不同的前后端服务。 需要注意现在启动的前后端服务都在 localhost 这个域名下，只是端口号不一样，所以暂时 cookie...
这应该是近期 docker 相关的最后一篇了，这一切都是因为要优化下一个项目的镜像构建速度，用这个踩坑记录作为终章也挺合适的 hhh ### 本地构建镜像时，打包一直莫名失败 是的，从一开始就不顺利，本地测试时，镜像构建一直卡在打包那里，等着等着就失败了，又看不到啥有效日志。 最后的最后，想起来，会不会是内存不足导致的打包失败。 经过大佬指点默默把 docker 的内存设置从默认的 2G 改为 4G ，再次构建，就成功了。  ### 私有 npm 仓库时， yarn 装包一直失败 对于 yarn v1 安装私有仓库包，需要这样去装包： `RUN yarn || yarn...
本文主要是 [Best practices for writing Dockerfiles | Docker Documentation](https://docs.docker.com/develop/develop-images/dockerfile_best-practices) 的总结。 其它参考资料： * [10 best practices to containerize Node.js web applications with Docker](https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/) * [BestPractices.md | docker-node](https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md) ### 容器的创建和删除应尽量简单 比如创建容器时需要的配置参数尽量少。 扩展阅读：[The...
本文是根据 [About storage drivers | Docker Documentation](https://docs.docker.com/storage/storagedriver/#the-copy-on-write-cow-strategy) 整理的。 layer 指层， image 指镜像， container 指容器。 ## 镜像是由层组成的 在拉取镜像时，可以看到会按层去拉取：  如果想查看某个镜像有哪些层，可以使用 `docker inspect xxx` 命令。 `docker inspect node:14.16.1-alpine3.13` 的部分内容如下。 镜像有哪些层： 镜像的一些配置参数，注意这里环境变量、 CMD...