Latest

Flutter入门指南

Flutter入门指南

Flutter 是一个由 Google 开发的开源移动应用开发框架。它允许开发者使用一套代码同时构建 iOS 和 Android 应用,并且提供了丰富的 UI 组件和高效的开发工具,使得开发者能够快速构建出高性能的跨平台应用。 一、Flutter 的实现原理 Flutter 的核心在于其自带的高性能渲染引擎 Skia。不同于其他框架依赖于原生的 UI 组件,Flutter 直接通过 Skia 渲染引擎将所有组件绘制到屏幕上。这种方式保证了跨平台应用在 iOS 和 Android 上的表现完全一致。 1.1 结构概览 Flutter 的架构分为三层: 1. Framework(框架层): 这部分主要由 Dart 编写,提供了 Flutter 的各种 UI 组件(Widget)、手势检测、渲染层以及动画等。

By Lewis
Certbot Let's Encrypt 证书自动续期

Certbot Let's Encrypt 证书自动续期

安装 Certbot yum install epel-release -y yum install certbot -y certbot certonly //生成证书 certbot renew //续期 certbot certificates //查看证书 域名验证插件 https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au 下载 $ git clone https://github.com/ywdblog/certbot-letencrypt-wildcardcertificates-alydns-au $ cd certbot-letencrypt-wildcardcertificates-alydns-au $ chmod 0777 au.sh 配置 DNS API 密钥: 这个 API 密钥什么意思呢?由于需要通过 API 操作阿里云 DNS,

By Lewis
HarmonyOS NEXT

HarmonyOS NEXT

方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于ArkTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”) * 声明式开发范式: ArkTS (复杂度较大、团队合作度较高的程序) * 类Web开发范式: javascript (界面较为简单的程序应用和卡片) 工具准备 安装最新版DevEco Studio 目录结构 Stage模型应用程序包结构 . ├── AppScope │ ├── app.json5 // 用于声明Module基本信息、支持的设备类型、所含的组件信息、运行所需申请的权限等。 │ └── resources // 用于存放应用需要用到的资源文件。 │ └── base ├── build-profile.json5 ├── module_xxx │ ├── BuildProfile.ets // 工程级或Module级的构建配置文件,包括应用签名、产品配置等。 │ ├── build │ │ └── default │ │

By Lewis
浏览器指纹(Browser Fingerprinting)

浏览器指纹(Browser Fingerprinting)

浏览器指纹是一种识别和跟踪用户的技术,通过收集用户浏览器和设备的各种特征来创建一个独特的标识符。以下是实现浏览器指纹的一些常见方法: 1. 用户代理字符串(User Agent String) 用户代理字符串包含浏览器名称、版本、操作系统类型和版本等信息。虽然这一信息比较容易伪造,但结合其他特征可以增加指纹的唯一性。 2. 浏览器插件和扩展(Browser Plugins and Extensions) 不同用户安装的插件和扩展通常不同。通过检测浏览器中安装的插件列表,可以增加指纹的唯一性。 3. 屏幕分辨率和颜色深度(Screen Resolution and Color Depth) 屏幕分辨率和颜色深度是与用户设备硬件相关的参数,这些参数在不同设备上通常不同。 4. HTTP 标头(HTTP Headers)

By Lewis
react 使用 render prop component 请求数据

react 使用 render prop component 请求数据

在 React 中,高阶组件的替代方式是 render prop 组件。也可以使用 render prop 组件来进行声明式的数据获取。 class Fetcher extends React.Component { constructor(props) { super(props); this.state = { data: null, isLoading: false, error: null, }; } componentDidMount() { this.setState({ isLoading: true }); axios.get(this.props.url) .then(result => this.setState({ data: result.data, isLoading: false })) .catch(error

By Lewis
View Transitions 实现过渡动画

View Transitions 实现过渡动画

介绍 View Transitions API 提供了一种机制,可在不同 DOM 状态之间轻松创建动画转换,同时只需一步即可更新 DOM 内容。 视图转换过程 1.调用 document.startViewTransition() 时,API 会截取当前页面的屏幕截图。 2.接下来,将调用传递给 startViewTransition() 的回调,在本例中为displayNewImage,这会导致 DOM 发生变化。回调成功运行后,ViewTransition.updateCallbackDone 承诺就会实现,从而可以对 DOM 更新做出响应。 3.应用程序接口将页面的新状态捕捉为实时表示。 4.应用程序接口会构建一个具有以下结构的伪元素树: ::view-transition └─ ::view-transition-group(root) └─ ::view-transition-image-pair(root) ├─ ::view-transition-old(root) └─ ::view-transition-new(r

By Lewis
Dart 枚举

Dart 枚举

简单枚举 enum Color { red, green, blue } 增强枚举 增强枚举(Enhanced Enums)是Dart语言在2.15版本中引入的一项新特性。这个特性扩展了枚举(Enum)的能力,使其不仅能表示一组命名常量,而且还能包含方法、属性和构造函数。 额外要求: * 实例变量必须是最终变量,包括由混合变量添加的变量。 * 所有生成构造函数都必须是常量。 * 工厂构造函数只能返回一个固定的已知枚举实例。 * 由于 Enum 是自动扩展的,因此不能扩展其他类。 * 不能重载索引、哈希代码和相等运算符 ==。 * 不能在枚举中声明名为 values 的成员,因为它会与自动生成的静态值获取器冲突。 * 必须在声明的开头声明枚举的所有实例,而且必须至少声明一个实例。 在增强枚举中,你可以: * 为每个枚举值定义关联的属性和方法。 * 创建构造函数来初始化这些属性。 * 使用工厂构造函数来控制枚举实例的创建。 * 实现接口,并应用混入(Mixins) 示例1:带属性的枚举 要使用增强枚举Season

By Lewis
Ubuntu 磁盘动态分区调整

Ubuntu 磁盘动态分区调整

当我们调整虚拟机的虚拟硬盘大小或将磁盘映像恢复到更大的磁盘时,Ubuntu检测到的分区的可用空间不会增加,因为分区表没有改变。过去,我们可以借助 .ext4 轻松调整 ext4 根分区的大小resize2fs。然而,当 Ubuntu 使用 LVM 分区作为默认根分区时,事情会变得复杂。 LVM 介绍 逻辑卷管理器(LVM)类似于Windows下的动态磁盘,它可以将不同硬盘上的几个GPT/MBR分区作为一个存储池(LVM称之为Volume Groups,VG),并从这个池中分配空间,然后Linux将将每个空间(LVM 称为逻辑卷,LV)识别为可用分区。 PV、VG、LV 介绍 * PV(Phsical Volume,物理卷),PV是VG的组成部分,由分区构成,多块盘的时候,可以把一块盘格式化成一个主分区,然后用这个分区做成一个PV,只有一块盘的时候,可以这块盘的某一个分区做成一个PV,实际上一个PV就一个分区。 * VG(Volume

By Lewis
Flutter 应用程序架构

Flutter 应用程序架构

Riverpod 应用架构参考 使用数据层、域、应用程序和表示层的 Flutter 应用程序架构 此架构由四个不同的层组成,每个层都包含我们的应用所需的组件: * presentation: widgets, states, and controllers * application: services * domain: models * data: repositories, data sources, and DTOs (数据传输对象) 按层划分结构 ‣ lib ‣ src ‣ presentation ‣ feature1 ‣ feature2 ‣ feature3 <-- ‣ application ‣ feature1 ‣ feature2 ‣ feature3 <-- only create this when needed ‣ domain ‣ feature1 ‣ feature2 ‣ featur

By Lewis
在 AWS EC2 上使用 IP ROOT 用户登录 SSH

在 AWS EC2 上使用 IP ROOT 用户登录 SSH

aws ec2 默认是使用 ec2-user 账号登陆的,对很多文件夹是没有权限的。如何使用 root 账号执行命令就是一个问题了。解决办法如下: 1.根据官网提供的方法登录连接到EC2服务器 主机:是服务器的 Public DNS 端口:22 2.创建root的密码,输入如下命令: sudo passwd root 然后会提示你输入new password。输入一个你要设置的root的密码,需要你再输入一遍进行验证。 3.切换到root身份,输入如下命令: su root 4.使用root身份编辑亚马逊云主机的ssh登录方式,找到 PasswordAuthentication no,把no改成yes。输入: vi /etc/ssh/sshd_config PermitRootLogin这行改为PermitRootLogin yes PasswordAuthentication no改为PasswordAuthentication yes

By Lewis
npm-check-updates

工具

npm-check-updates

npm-check-updates会将package.json依赖项升级到最新版本,而忽略指定的版本。 * 维护现有的语义版本控制策略,即“express”:“4.0.0”到“express”:“5.0.0”。 * 仅修改package.json文件。运行npm install以更新已安装的软件包和package-lock.json。 Installatio npm install -g npm-check-updates Usage 在当前目录中显示任何新的项目依赖项: $ ncu Checking package.json [====================] 5/5 100% express 4.12.x → 4.13.x multer ^0.1.8 → ^1.0.1 react-bootstrap ^0.22.

By Lewis
「译」JavaScript 整洁代码 - 最佳实践

Javascript

「译」JavaScript 整洁代码 - 最佳实践

介绍 如果您关心代码本身以及代码的编写方式,而不必担心它是否起作用,那么您可以说您正在练习并关心干净的代码。专业的开发人员将为将来的自己和“其他人”编写代码,而不仅仅是为机器编写代码。您编写的任何代码都永远不会被编写一次,而是会坐下来等待未来的家伙,使他痛苦不堪。希望那个未来的家伙不会是你。 基于此,干净的代码可以定义为以不言自明,易于人类理解,易于更改或扩展的方式编写的代码。 问自己,当第一印象是“ WTF”问题之一时,您继续进行了几次别人的工作? “这是什么鬼?” “你在这里做了什么?” “这是你的目的吗?” 这是表达上述观点的热门图片。 罗伯特·C·马丁(鲍勃叔叔)的一句话,应该使您思考自己的做法。 即使是糟糕的代码也能发挥作用。但是如果代码不干净,就会使开发者陷入困惑。 在本文中,重点将放在JavaScript上,但是这些原理可以应用于其他编程语言。 现在开始阅读整洁代码的最佳实践 1. 强类型检查 使用 === 代替 == // If not handled properly, it can dramati

By Lewis
「译」更好的 JavaScript 条件式和匹配条件的提示与技巧

Javascript

「译」更好的 JavaScript 条件式和匹配条件的提示与技巧

介绍 如果像我一样喜欢看干净的代码,则将尝试使用尽可能少的条件语句来编写代码。通常,面向对象的编程使我们能够避免条件,而将其替换为多态性和继承。我相信我们应该尽可能地遵循这些原则。 就像我在另一篇文章 JavaScript Clean Code Best Practices 中提到的那样,您并不仅仅是为机器编写代码,而是为“未来的自己”和“其他人”编写代码。 另一方面,由于各种原因,我们可能最终在代码中使用条件。也许我们的修复期限很紧,或者不使用条件语句将对我们的代码库造成太大的更改,等等。本文旨在帮助您解决这些情况并帮助您组织条件语句。 技巧 以下是有关如何构造if...else语句以及如何减少编写以实现更多目标的技巧。享受吧! 1. 重要的事情先做,琐碎的但很重要 不要使用否定条件(它们可能会造成困惑),而请使用条件简写来表示 boolean 变量。我不能特别强调这一点,尤其是关于否定条件的部分。这是一种不自然的做事方式。 Bad const isEmailNotVerified = (email) => { // impleme

By Lewis