Keefe's Cafe

材料准备与下载

  1. 安装 Android Studio(如安装最新版,则无需安装 JDK):https://developer.android.com/studio
  2. 安装 Charles:https://www.charlesproxy.com/download/latest-release/

配置 Charles

  1. 勾选 Proxy => macOS Proxy
  2. Proxy => SSL Proxy Setting截屏2023-09-22 17.33.41.png
  3. 安装证书:Help => SSL Proxying => Install Charles Root Certificate
  4. 信任证书,打开钥匙串,搜索 Charles,点击信任,选择始终信任截屏2023-09-22 17.36.02.png
  5. 下载证书备用:Help => SSL Proxying => Save Charles Root Certificate

配置 Android Studio

  1. 新建项目 New Project => Empty Activity => SDK 选择 API 28 (“Pie”; Android 9.0)=> Finis
  2. 下载必要的 Emulator 与 Device 资源
    • Tools => SDK Manager => SDK Tools,勾选 Android SDK Build-Tools 34、Android Emulator、Android SDK Platform-Tools,点击 Apply 进行下载
    • Tools => Device Manager => Create Device => Choose a device definition (recommend Pixel 6) => Select a system image (recommend ARM Images Pie Android 9.0) => Finish

启动 Android Emulator 并获取 root 权限

  1. 在 Terminal 中查看有哪些可选 avd(Android Virtual Device):emulator -list-avds
  2. 在 Terminal 中切换到 emulator 可执行文件目录下(cd ~/Library/Android/sdk/emulator),并执行启动可写 emulator 的命令:./emulator -avd [avd name] -writable-system
  3. 获取 root 权限,在命令行中以此输入两行命令:
    1. adb root
    2. adb remount
  4. 虚拟器开启后,将安卓的安装文件拖入虚拟手机屏幕进行安装

Android Emulator 安装 charles CA 证书

在第一部配置 Charles 中我们保存了一份 Mac 端的根证书,在 Terminal 中使用命令 openssl x509 -subject_hash_old -in [证书文件名.pem],查看输出的一个8位字符,之后将证书名重新命名为 [8位字符].0。
使用 adb push [证书文件名] /system/etc/security/cacerts/ 命令将证书上传到安卓虚拟机证书目录下。
此时,charles 证书安装完成,在安卓虚拟机的 wifi 设置中指定 charles 的 ip 和端口,即可进行抓包和代理。

原文:The End of Front-End Development

AI 带来的失业焦虑

当前网络上充斥着“前端已死“的论调,而作者 Josh 是极度不同意这个观点的,而且十分厌恶在网络上散播这种焦虑的现象。

其实自从 HTML、CSS 出现以来,就不断有制作网站的工具出现:像 2000 年的 WordPress,2010 年代的 Webflow 以及当前 2020 年代的低代码/无代码平台。当然随着这样的发展,有一部分网站开发者的确被时代抛弃,比如一个个体经营户要创建一个店铺网站,只需要每个月花点钱去建站平台上搭一个页面即可,而不需要专门雇一个网站开发者来维护。

GPT-4 是否能替代开发者?

当下的情况是,GPT-4 能够将一个网站设计草稿变为一个具有功能的网站,通过轻点按钮。作者认为这是令人震惊的,在原型设计上有很强的潜力。但是需要注意的是,网站开发者已经数十年没有写过如此简单的页面了(现在的网站页面早已和这些页面完全不同)。

反过来看下 GPT-4 所使用的模型 LLM(Large Language Model)。事实上, LLMs 只是一个文本预测模型——你给出提示词,模型会返回一些最相关的关键词/句子,实际上这个准确率大概只有 80%。LLMs 是无法对给出的答案进行验证或证明的,这只是一个概率游戏。只要是有概率存在,那么这个模型就会有不同程度的不准确性。映射到 LLMs 模型生成代码的层面,睡hui为代码的健壮性、安全性来”打标“呢?

对于一个 50 行的 HTML 代码来说,实际上的生产环境 web 应用有着巨大的不同。一个简单的博客 app 可能就会有 65k 行的代码,包含 900 多个文件。如果模型能够生成如此巨量的代码,那么测试和 debug 就会前所未有的困难!

阅读全文 »

文档地址:https://kaisery.github.io/trpl-zh-cn/

Rust 是一种 预编译静态类型ahead-of-time compiled)语言,这意味着你可以编译程序,将编译好的程序直接运行而不需要任何环境配置。

Hello World!

main 函数是一个特殊的函数,它总是最先运行的代码。这里有一些重要细节:

  • 缩进风格使用 4 个空格;字符串以双引号包裹,语句以分号结尾;注释使用双斜杠。
  • Rust 宏和 Rust 函数不一样,调用宏时需要在调用方法后面加叹号 !
  • Rust 语言编译和运行隔离。首先执行 rustc mian.rs 进行编译,然后运行编译后的 main 文件
阅读全文 »

实现了一种发布订阅者模式的插件机制。通过 Tapable 我们可以注册时间,从而在不同时机去触发注册的事件进行执行。Tapable 怎么使用呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 初始化 hook,此处的字符串数组比较重要
const hook = new SyncHook(['arg1', 'arg2', 'arg3']);

// 为 hook 注册事件,同步 hook 只有 tap 方法,
// 接受两个参数,一个是字符串的标识,第二个是注册的函数,在调用时执行
hook.tap('flag1', (arg1, arg2, arg3) => {
console.log('flag1:', arg1, arg2, arg3)
})
hook.tap('flag2', (arg1, arg2, arg3) => {
console.log('flag2:',arg1, arg2, arg3)
})

// 调用事件并传递执行参数
hook.call('19Qingfeng', 'wang', 'haoyu')

// 打印结果
// flag1: 19Qingfeng wang haoyu
// flag2: 19Qingfeng wang haoyu
阅读全文 »

前端框架最主要解决的就是当数据状态改变时去更新 DOM,Angular 使用的是 change detection。change detection 一般可分为两部分,更新应用数据模型 model,Angular 根据更新后的 model 重新渲染 DOM。
大概的一个过程:

  1. 开发者代码更新组件的数据模型 model(例如请求接口返回数据更新)
  2. angular 检测变化
  3. 脏检机制对整个应用从根到叶检测对应的数据模型是否变化
  4. 如果有数据更新,则更新 DOM
阅读全文 »

脏检如何实现?

Angular 的变化检测机制是建立在 Javascript 的可覆写机制。Angular 在启动阶段会对浏览器的一些底层 API 进行补丁,比如在 addEventListener 方法中添加一些功能:

1
2
3
4
5
6
7
8
9
10
11
12
function addEventListener(eventName, callback) {
// call the real addEventListener
callRealAddEventListener(eventName, function() {
// first call the original callback
callback(...);
// and then run Angular-specific functionality
var changed = angular.runChangeDetection();
if (changed) {
angular.reRenderUIPart();
}
});
}

这个为底层浏览器 API 打补丁的过程是由 zone.js 工具库提供的。补丁和脏检机制一班发生在以下几种异步情况:

  • 所有浏览器事件(鼠标事件、键盘事件…)
  • setTimeout() 和 setInterval()
  • Ajax HTTP 请求

为了了解 zone 的概念,我们需要先了解浏览器任务和时间循环的机制。

阅读全文 »

概览

依赖注入是一种设计模式,它的主要作用是让类与其依赖相互独立。它能够解决的现实问题是,当一个类 classA 需要依赖另一些类 classB、classC 时,不再需要 classA 中去实例化 classB、classC,即一个类不需要知道它所依赖的其他服务的具体实现,而是直接去使用其依赖。另外还能够便于编写单测、减少冗余代码、使应用便于扩展。

注入的依赖可以是任何类或值。
Angular 框架中有三种依赖注入的类型:

  • Constructor Injection:injector 将依赖(服务)在类构建时注入其中
  • Setter Injection:injector 将依赖注入到 setter 属性方法中
  • Interface Injection: 依赖本身自带 injector,可以将依赖注入任何传入其中的使用者。接受该依赖的使用者必须通过 interface 暴露一个 setter 方法。
阅读全文 »

在网页开发的过程中,影响用户体验的因素有很多,大部分归咎于资源加载速度慢、初始页面渲染时加载非必须的文件(甚至会出现没有样式的文档)等等。为了避免这些问题的产生,我们需要理解浏览器渲染一个特定的网页的整个周期和流程。

首先,我们需要搞清楚什么是 DOM。当一个浏览器向服务端请求一个 HTML 文档,服务器会将这个 HTML 文档以二进制形式的数据(一个带着 Content-Type = 'text/html; charset=UTF-8' 的text 文件)进行响应。这其中, text/html 是一种 MIME 类型(MIME 能够告诉浏览器这是一个 HTML 文档,并且字符编码是 UTF-8)。有了这个信息,浏览器就能将二进制文件转换成一个可理解的文本文件,如下图所示

6000000001597-2-tps-1000-259

阅读全文 »

标签页的休眠目前越来越多地被应用在了各大浏览器中,这个特性设计主要通过 Unload 标签页使其进入休眠模式,来达到节约电脑资源、内存的目的。与关闭标签页的效果不同,休眠的标签页是将标签页保持在浏览器中,但是状态为未加载的状态,点击标签页即可重新加载页面内容。这个过程可能会有白屏的情况出现,这是浏览器在重绘页面内容。

主流的浏览器中,Google Chrome 浏览器支持 Tab Freezing,Microsoft Edge 浏览器支持 Tab Sleeping,Opera 浏览器支持 Tab Snoozing,Firefox 浏览自支持 Automatic Tab Unloading。另外,大部分基于 Chrome 内核的浏览器支持了实验特性 Tab Groups,也支持了标签页以组维度休眠的特性功能。

阅读全文 »

RxJS 是异步和事件驱动编程的一个库,主要使用 Observable sequence(可观察序列)。RxJS 提供一个核心类 Observable,和一些卫星类(Observer, Schedulers, Subjects)、操作符(Operators)。

RxJS 是适用于“事件”的 Lodash 工具库。

阅读全文 »
0%