学海无涯苦作舟的博客

总之，Yarn作为一款高效、稳定、可靠的前端包管理工具，为我们的项目开发带来了极大的便利。它可以自动锁定项目的依赖版本，确保每次安装的都是相同的依赖包，从而避免了因依赖版本不一致而导致的问题。此外，Yarn还提供了缓存机制，可以复用已经下载过的依赖包，进一步提高了安装效率。Yarn，作为其中的佼佼者，以其高效、稳定、可靠的特点，赢得了众多开发者的青睐。Yarn的使用非常直观和便捷，它提供了丰富的命令和选项，让我们可以轻松地管理项目的依赖包。首先，Yarn采用了并行安装的方式，大大提高了依赖包的安装速度。

需要注意的是，如果一个元素具有多个类名，并且这些类名在CSS中都有对应的样式规则，那么这些规则会同时应用到该元素上。通过类名，我们可以对页面中的多个元素进行分组，并为这些元素应用相同的样式，从而实现样式的复用和统一。通过合理使用类名，我们可以实现样式的复用、提高代码的可维护性，并创造出更加美观和富有创意的网页界面。：通过为多个元素分配相同的类名，我们可以轻松地为这些元素应用相同的样式规则，从而实现样式的复用。在CSS中，我们可以通过点号（.）加上类名来选择具有特定类名的元素，并为其应用样式规则。

在JavaScript中，每个函数都有一个与之关联的词法环境，这个环境包含了函数被创建时所在作用域的所有变量和函数。在JavaScript中，闭包是一个强大且深奥的概念，它允许函数在其定义环境之外的地方被调用时，仍能访问并操作其词法作用域内的变量。在JavaScript中，创建闭包的最常见方式是在一个函数内部定义另一个函数，并通过某种方式（如返回值或事件监听器）将内部函数暴露给外部环境。这样，即使外部函数执行完毕，其内部函数（闭包）仍然能够访问外部函数的变量。函数内部定义的，它形成了一个闭包，可以访问。

在JavaScript中，每个函数都有一个与之关联的词法环境，这个环境包含了函数被创建时所在作用域的所有变量和函数。在JavaScript中，闭包是一个强大且深奥的概念，它允许函数在其定义环境之外的地方被调用时，仍能访问并操作其词法作用域内的变量。在JavaScript中，创建闭包的最常见方式是在一个函数内部定义另一个函数，并通过某种方式（如返回值或事件监听器）将内部函数暴露给外部环境。这样，即使外部函数执行完毕，其内部函数（闭包）仍然能够访问外部函数的变量。函数内部定义的，它形成了一个闭包，可以访问。

综上所述，函数作用域和闭包是JavaScript编程中的基石，它们为我们提供了强大的工具和灵活性来构建复杂而优雅的程序逻辑。闭包（Closure）是JavaScript中一个非常重要的概念，它指的是一个函数可以记住并访问其词法作用域，即使该函数在其词法作用域之外执行。闭包的形成通常涉及到内部函数（嵌套在另一个函数中的函数），并且内部函数引用了外部函数的变量。在全局作用域中声明的变量和函数，可以在代码的任何位置被访问。在函数内部声明的变量和函数，只在函数内部可见，即它们的作用域被限制在函数内部。

本文将通过一个具体的零售业务案例，分析数据挖掘的应用过程，展示如何从数据中发现价值，并将其转化为实际的业务增长。为了提升销售额和客户满意度，我们决定利用数据挖掘技术来分析顾客的购物行为、偏好和忠诚度，以便制定个性化的营销策略。因此，我们将继续收集新的数据、调整分析模型，并探索更多的数据挖掘技术和应用场景。在数据预处理阶段，我们进行了数据清洗、格式转换和缺失值填充等操作，以确保数据的准确性和一致性。同时，我们还通过数据可视化工具，初步探索了数据的分布特征和关联关系，为后续的数据挖掘工作奠定了基础。

SBOM （软件物料清单）通过列出您的代码所依赖的软件包和供应商来帮助您了解您的软件供应链。SBOM 正迅速获得发展势头，作为在现实世界供应链受到重大攻击后帮助提高安全性的一种方式。SBOM 的主要支持者之一是微软，该公司早在 2021 年 10 月就发布了针对他们这一代的方法。今年早些时候，该公司开源了其用于在 Windows、macOS 和 Linux 上生成 SBOM 的工具。在本文中，您将学习如何开始使用该项目来索引代码的依赖项。它生成与 SPDX 兼容的文档，列出项目中的文件、包和关系。

JSON Web Tokens (JWT) 标准描述了一种用于可验证数据传输的紧凑方法。每个令牌都包含一个签名，允许发布方检查消息的完整性。在本文中，您将了解 JWT 结构包含的内容以及如何生成自己的令牌。JWT 是一种保护 API 和验证用户会话的流行方法，因为它们简单且独立。

grep 是 Linux 上功能强大的文本搜索实用程序，但在 Windows 上不可用。虽然有第三方端口和解决方案，但 PowerShell 提供了内置的等价物grep ，可以在您的脚本中完成相同的工作。

需要快速启动 Web 服务器来测试 PHP 应用程序？PHP 解释器有一个内置的！您可以使用它来快速检查您的工作，而无需运行 Apache、NGINX 或容器化解决方案。PHP 的集成服务器相对较少受到关注，但对于开发目的来说非常强大。在本指南中，我们将展示如何使用它来替代其他微服务器，例如 Python 的SimpleHTTPServer或http-server npm 包，它们都不能执行 PHP 脚本。...

React18使用围绕并发渲染和悬念构建的新功能发展了流行的JavaScript组件框架。它承诺为进行切换的应用程序提供更好的性能、更多功能和改进的开发人员体验。在本文中，我们将向您展示如何将现有代码库升级到React18。请记住，本指南只是对最广泛适用的更改的概述。对于已经遵循React最佳实践的小型项目，迁移应该是相当轻松的；大量复杂的组件可能会引发一些问题，我们将在下面详细介绍。...

Caddy是一种流行的现代 Web 服务器，专为高性能和内存安全而设计。它是用 Go 编写的，运行时没有依赖关系，内置支持使用 Markdown 进行静态站点渲染，并提供自动 HTTPS。Caddy 专注于提供简单的服务器管理体验，默认情况下为您提供有用的功能。它比 Apache 和 NGINX 等竞争对手的系统更容易配置和维护。在本文中，我们将展示如何使用带有官方 Caddy 映像的 Docker 以最少的设置运行您自己的服务器。选择图像标签Caddy 图像有几种不同的风格。在撰写本文时，最新版本.

推送通知在现代网络上很常见。即使您的网站实际上并未打开，它们也能让您及时向用户传达信息。用户的浏览器处理传入的推送事件并使用系统 UI 界面（如 Windows 操作中心和 Android 锁屏）显示通知。在您的网站或 PWA中实施 Web Push需要结合两个不同的浏览器 API。负责订阅和接收通知的代码使用service workers的Push API组件。此代码在后台持续运行，并在需要处理新通知时由浏览器调用。当接收到一个事件时，服务工作者应该使用通知 API来实际显示通知。这会通过操作系统级.

WebAssembly 是一种在 Web 上运行代码的新方法。它背后有大型科技公司，它有望彻底改变我们编写 Web 应用程序的方式，但也有其自身的怪癖和局限性。WASM 框架是像 React 这样的 JavaScript 库的可行竞争对手吗？什么是 WebAssembly？WebAssembly 或 WASM 是所有 Web 浏览器都可以理解和运行的第二种通用​​编程语言。但是，您不会自己在 WebAssembly 中编写脚本——它是一种低级汇编语言，旨在非常接近已编译的机器代码，并且非常接近本机性能.

JAM 堆栈，通常风格化为 Jamstack 或 JAMStack，是指使用J avaScript、A PI 和M arkup开发以客户端为中心的网站和应用程序。建立在 Jamstack 上的系统将在客户端运行其所有逻辑，消除服务器端组件。该术语由Netlify创造，描述了一种提供更高性能、更好的安全性和改进的开发人员体验的 Web 开发方法。Jamstack 网站不会在每次页面加载时产生服务器往返，而是在浏览器中自给自足。静态站点是否使用 Jamstack？仅使用 HTML、CSS 和 JavaS.

看到Called setState() on an Unmounted Component在您的控制台是面对新人反应最常见的问题之一。当您使用类组件时，您可以轻松地创建遇到此错误的情况。更新已从 DOM 中删除的组件的状态通常表明您的应用程序存在内存泄漏。这会浪费用户的硬件资源，如果不加以控制，将导致性能逐渐下降。这就是发生错误的原因以及您可以采取的措施来解决它。一个简单的组件这是一个基本的 React 组件，它通过网络获取一些数据：import React from "react"; class.

Flutter 是一个 Google 开发平台，可让您使用一个代码库编写跨平台移动应用程序。应用程序是用 Dart 开发的，Dart 是一种类型化和面向对象的语言，可以编译为本机代码或 JavaScript。这意味着您可以使用单个 Flutter 项目针对 Android、iOS、桌面操作系统和 Web。Flutter 附带了一个类似于 React 的框架，用于声明性地定义接口。它还附带内置 Material Design 和类似 iOS 的组件，可让您快速分层新界面。通过与 IDE、实时调试工具和测试.

今天想先谈一下目前的工作型态, 由于所在的软件公司是大集团底下新成立的子公司, 而我又所属在南部的办公室, 距离集团总部, 有着远在天边, 近在眼前的距离( 糟糕…桌上的分机又响起来了@@" ), 南部办公室的主轴是云端运算部门, 所以我算是搭配Cloud Team的PM, 负责的是AI语音助理等相关的云端服务, 但我上面PMO (项目办公室)的大头在北部, 该怎么让他知道(放心) 我在分隔两地的办公室里, 如何做好规划与协调工作呢? 这时候, 我多年的经验告诉我, 辛苦一点每周做一份Weekly Repo

概览Web Vitals 是由Google 分析大量使用者资料后，用来量化网站使用者体验的指标，藉由测量Web Vitals 分数让开发者能更有方向的优化网站体验，尤其是Core Web Vitals。Core Web VitalsCore Web Vitals 是由Google 定期选出，在三种不同面相中最具代表性的使用者体验指标，而目前的Core Web Vitals 分别是：Largest Contentful Paint (LCP) – 载入速度First Input Delay (FID

前端可不是功能需求都完成了就完事，Load 超慢、动画卡卡的、点击按钮过了一秒才有反应等等都会让使用者默默在心中给网站体验扣分，尤其是第一次浏览时更可能直接关掉。概览一般来说想要进行网页优化最简单有效的方式是从Lighthouse 开始，Lighthouse 会以网页效能指标为目前的页面打分数，同时给出优化的建议方向，开发者可以透过提升分数逐步优化网页的效能。而Performance 面板则为更深入的效能测量工具，通常会在针对特定功能进行优化或是像制作网页游戏，每一个Function 的效能都必须斟酌

概览网页使用体验和网路有着非常大的关系，而Network 面板就是协助开发者分析网路问题的工具。本篇文章将会说明如何以Network 面板来观察各种资讯，以及关于请求的的重要观念解析。Network Log Detail在Network log 列表中点击任意一列Request 会从右侧展开该Request 的详细资讯面板，且根据Request 的内容会有不同的分页。HeadersGeneral包含了Request的基本资讯如URL、Request method、Status code、Remo

概览无论是在开发简单的网站，检查一个Request 是否成功发送并收到预期的Response，还是从Network log 的时间线来分析网站效能问题，每次打开Network log 列表时，总会有一个明确的目标，此时用肉眼从所有Network log 中寻找特定的几条就非常没有效率，尤其网页较为复杂又有一堆广告、追踪码参杂时，完全是大海捞针。本篇文章将会说明如何利用Network 面板的Filter、Search 功能快速的从Network log 海中萃取出想要分析的目标。过滤（Filter）F

Network 面板详细记录着每个请求、回应的结果，除了用来检查单次的请求是否完成，更好用的是对所有请求的搜寻、过滤、分析，以及客制化的介面。概览Network 面板主要由上方的工具列和下方的Network log 组成，预设会开启中间的Overview，将各个请求的时间关系以视觉化的方式呈现。在面板Overview中可以看到DOMContentLoaded和load事件触发的时间线，分别以蓝色和橘（红）色标示，下方的资讯列则会显示请求的总数、实际网路传输量、所有资源的大小以及总花费时间。一般来说

使用JavaScript Debugger 的精髓除了断点、逐步执行外，还有各种列表显示JavaScript 目前的执行状态，以及一些关于Debugger 的设定。阅读本篇文章时建议搭配Demo页面Sources - JavaScript Debugging，效果更佳。状态列表Watch执行程式码的过程中，若需要不断查看某个变数的值，可以在Watch 列表中新增一条Expression。加入后每次暂停或逐步执行都会重新执行Watch中的Expression，另外也可以手动按下右方的Refresh

此篇文章将说明如何透过Sources 面板建立断点来暂停JavaScript 的执行，除了手动标记行号以外，还有非常多种方式，适用不同的情境。注意重整页面不会影响以建立的断点，这也是断点的一大核心机制概览最常见的断点建立方式就是标记特定一行程式码，但面对各种不同Debug 情境，尤其是程式码非常多时，可能无法一下就找到精确的档案或位置，此时直接标记的方式就显得没有效率。本篇文章中笔者将会介绍Sources 面板的右侧子面板中关于各种断点的建立方式以及使用时机，断点主要有分为：标记– 执行到程式码特

概览今天的主角是Sources 面板的Workspace 功能，主要提供当前页面中各个Context 的资源浏览和修改，上方可以看到五个页签，分别是：PageFilesystemOverridesContent scriptsSnippets本篇文章将会走个页签的功能，推荐开启Demo网站Sources - Workspace实际操作一遍来理解应用流程情境，阅读本篇文章前建议先了解Source map的观念，可以参考Sources - Source Map & File Editing

终于来到了重头戏Sources 面板，前面的文章提到了许多提高Debug 效率的小撇步，但如果遇到了更加复杂的情境，透过Console、Elements 面板都无法解决，此时就是Sources 面板的出场时机。阅读本篇文章时建议搭配Demo页面Sources - Source Map & File Editing，效果更佳。概览打开Sources 面板后可以看到主要分成左中右三个面板，左侧面板主要和当前页面的资源相关，在面板中会看到已载入的资源如HTML、CSS、JS 等等档案以资料夹的型式呈

Run JavaScript今天的文章是Console 系列的最后一篇，笔者会讲解在Console 中有关JavaScript 执行的功能，还有一些在Console 输入JavaScript 的小眉角，来提升输入的效率。换行、缩排刚开始在Console 内输入多行程式码的时候觉得非常不方便，要不是需要一直手动缩排，不然就是还没打完不小心就执行喷错了，不过在了解Console 的换行和缩排原理后，输入效率简直提升一个档次。一般来说输入JavaScript时按下Enter会直接执行，按下Shift+En

除了可以在JavaScript 执行的Console API 外，Console 还提供了一些Debug 专用的Function，每一个都身怀绝技。阅读本篇文章时建议搭配Demo页面Console - Utilities，效果更佳。Console Utility Functions还记得笔者第一次看到这些Function时特别兴奋，直接写在自己的程式码中，想当然是跳出了各种Uncaught ReferenceError: xxx is not defined。$_会储存的执行结果，在Consol

Debug JavsScript的时候最简单直觉的方式就是console.log，不过除了log以外，Console API其实还有非常多好用的Method，来看看Console家族中有哪些厉害的成员吧。Console API大部分的时候console.log都能解决问题，不过用对Method可以省去更多时间。console.assert它的作用和console.log差不多，最大的差别是当第一个参数是falsy时才会作用。[false, null, undefined, 0, -0, 0n, N

完全掌握Console 面板，从认识Console message 开始。概览Console 面板做为网页开发者的Debug 神器，在许多网站开启DevTools 时甚至都能看到Debug 专用的log，不过在讲解Console 面板的功能之前，得先讲讲Console message。建议阅读本文时可以搭配Demo页面Console - Message一起使用，效果更佳。Console Message LevelConsole message 有分成四种Level：VerboseInfoWa