Unsplashis my favorite image site, not only for it’s huge amount of free images but also for it’s great user-experience. It has already been quite a while sinceUnsplashstarted usingBlurHashto deliveryprogressive Image Loadingexperience.BlurHash added to photo objectsThe ConceptProgressive Image LoadingProgressive Image Loadingmakes better user experience. But what is Progressive Image Loading?Instead of waiting for the final image to be rendered, use a low-quality image as placeholder (LQIP) first, swith to the original one when it’s loaded.What is going on?Render an element (divfor example) w ...继续阅读 (64)

大家好，我卡颂。React当前的稳定版本是18.2，发布时间是22年6月，在此之后就没有新的稳定版本发布。直到今年2月15日，官方博客才透露下一个稳定版本的计划。没错，他就是React19。为什么时隔1年多才公布下个稳定版本的计划？为什么下个版本直接跳到了19？18我都还没升呢，19就来了，是不是要学很多东西？这篇文章会为你详细解答这些疑问。免费领取卡颂原创React教程（原价359）、加入人类高质量前端群从React16聊起近年来React最为人津津乐道的版本应该是16.8，这个版本引入了Hooks，为React（乃至整个前端框架领域）注入了新的活力。再之后的v17没有新特性引入。既然没有新特性引入，为什么要发布一个大版本（从16到17）呢？这是因为从同步更新升级到并发更新的React，中间存在breaking change。这么大体量的框架，在升级时需要保证过程尽可能平顺。这除了是一种专业、负责的体现，更重要的，版本割裂会造成大量用户损失（参考当年ng1升级到anuglar2时）。当升级到18后，React团队发现 —— 真正升级到18，并大量使用并发特性（比如useTransition）的开发者并不多。更常见的场景是 —— 知名开源库集成并发特性，开发者再直接用这些库。所以，React团队转变策略，将迭代重心从赋能开发者转变为赋能开源库。那么，什么样的库受众最多呢？显然是框架 ...继续阅读 (53)

jQuery 最近发布了测试版，这个版本除了带来了错误修复和性能提升之外，其中最值得注意的就是 jQuery 4.0 放弃了对 IE 10 及更低版本的支持，这不仅降低了文件大小，并且更好地适应现代 Web 标准，此外此次更新还包含：清除多余代码、淘汰已废弃的 API、移除未发布的内部参数，以及简化过于复杂的“魔法”行为。jQuery 项目进展并不快，上一个主要版本 jQuery 3.0 是在 2016 年 6 月发布，而 4.0 曾计划于 2022 年发布，结果跳票了几次，所以差不多8年时间了。放弃对 IE 10 及更低版本的支持jQuery 4.0 最显著的升级就是放弃了对 IE 10 及更低版本的支持，并且预计在下一个版本 jQuery 5.0 发布的时候将彻底放弃对 IE 11 即所有 IE 浏览器的支持。这次更新移除了专门为旧版本 IE 设计的代码，使代码库更加高效，文件大小就减少了 867 字节，并且是gzip 压缩之后的大小，对其他过时浏览器的支持也同时删除了，如 Edge Legacy（不基于 Chromium 引擎）、iOS 11 之前的老版本、Firefox 65 之前的老版本等。如果你的用户还在使用这些浏览器，那么建议你继续使用 jQuery 3.x 版本。移除已废弃的 API下面这些函数要么是内部使用的，要么现在所有支持的浏览器中都有原生相同功能的函数，jQ ...继续阅读 (80)

闲谈兄弟们，这不情人节快要到了，我该送女朋友什么🎁呢？哦，对了，差点忘了，我好像没有女朋友。不过这不影响我们要过这个节日，我们可以学习技术。举个简单的🌰： 比如说，今天我们学习了如何画一颗炫酷的💗，以后找到了女朋友忘准备礼物了，是不是可以用这个救救场，🐶。开干首先，我们需要画一个💗的形状出来，例如下面这样这个简单，我们通过豆包搜一波公式即可。公式如下：思路：利用上面的公式，我们只需要根据许许多多的t去求得x,y的坐标，然后将这些点画出来即可。使用Canvas时用到的一些函数解释,这里moveTo和lineTo还是有点上头的：// 获取到一个绘图环境对象，这个对象提供了丰富的API来执行各种图形绘制和图像处理操作ctx = canvas.getContext('2d'); /** 该方法用于在当前路径上从当前点画一条直线到指定的 (x, y) 坐标。 当调用 lineTo 后，路径会自动延伸到新指定的点，并且如果之前已经调用了 beginPath() 或 moveTo()，则这条线段会连接到前一个点。 要看到实际的线条显示在画布上，需要调用 stroke() 方法。 */ ctx.lineTo(x, y); /** 此方法用于移动当前路径的起始点到指定的 (x, y) 坐标位置，但不会画出任何可见的线条。 它主要用于开始一个新的子路径或者在现有路径之间创建空隙。当你想要从一个地方不 ...继续阅读 (50)

最近在处理 Linux 中国的静态站点，在技术选项上，为了方便修改，选择了 Hexo 来建设。数据从 Discuz 转换到 Markdown 已经处理好了，但在构建过程中遇到了一些问题，会报如下错误linux [main]hexo g INFO Validating config INFO Start processing INFO Files loaded in 2.37 min <--- Last few GCs ---> [4685:0x118008000] 188193 ms: Scavenge (reduce) 3974.1 (4131.6) -> 3974.1 (4131.6) MB, 1.96 / 0.00 ms (average mu = 0.143, current mu = 0.117) allocation failure; [4685:0x118008000] 188198 ms: Scavenge (reduce) 3977.5 (4135.0) -> 3977.5 (4135.0) MB, 1.88 / 0.00 ms (average mu = 0.143, current mu = 0.117) allocation failure; [4685:0x118008000] 188202 ms: Scavenge (reduc ...继续阅读 (81)

编程语言「只是」达成目标的工具，这是我一直推崇的说法，因为我认为达成目标更重要的在于个人思考，编程语言不过是个「工具」，选哪个并没有那么重要。现在我越来越认为这个「工具」的选择还是很重要的，因为编程语言之于目标实现的可能性和效率都制约了目标的最终达成。以个人数据科学的工作背景，结合我的编程语言学习路径，尝试回答一下我们需要多少种编程语言这个问题。我的编程语言学习路径大致如下：小学时代：Logo初高中时代：Basic，HTML，CSS本科时代：C，C++研究生时代：Matlab，R，Python，SQL工作时代：Markdown，Java，JavaScript，TypeScript，Rust语言分类在我的编程语言学习路径中，各个编程语言之间还是存在很大差异的，以最早接触的 Logo 为例，其除了教学目的之外似乎就真的没有什么大用途了。这些编程语言可以大致划分为如下三种类型：通用编程语言（General-purpose Programming Language，GPL）：Basic，C，C++，Python，JavaScript，TypeScript，Java，Rust领域特定语言（Domain-Specific Language，DSL）：Logo，CSS，Matlab，R，SQL标记语言（Markup Language）：HTML，Markdown领域特定语言和标记语言就不用多说了 ...继续阅读 (56)

在上一讲中，我们探讨了关键渲染路径的一些理论基础，包括渲染阻塞和解析阻塞资源是如何使网页的首次渲染延迟的。现在，既然你对这些理论有了一定的了解，接下来我们将教你一些技巧，用以优化关键渲染路径。在网页加载过程中，会引用 HTML 里的多种资源，这些资源通过 CSS 定义了网页的外观和布局，通过 JavaScript 实现了网页的交互功能。本节课将介绍一些重要的概念，让你了解这些资源是如何影响网页加载时间的。渲染阻塞正如我们在上一个部分讨论的那样，CSS 被认为是一种渲染阻塞资源。这是因为在CSS 对象模型（CSSOM）构建完成之前，它会阻止浏览器显示任何内容。浏览器这样做是为了避免所谓的“未添加样式的内容闪现”（FOUC），这种现象从用户体验角度来看，是我们不愿意看到的。在这个视频中，我们可以短暂地观察到 FOUC 现象，此时页面上没有任何样式。之后，一旦页面的 CSS 文件从网络上完全加载完毕，所有的样式就会被应用上，这样无样式的页面版本就会立刻被有样式的版本取代。通常情况下，我们不太会遇到 FOUC 现象，但理解其背后的原理非常重要，这有助于我们明白为什么浏览器在 CSS 文件下载并应用到页面之前，会暂停页面的渲染过程。虽然渲染过程的暂停并非总是不受欢迎的，但通过优化 CSS 文件，我们应当尽量缩短这一过程的时间。解析器阻塞阻塞解析器的资源能够暂停 HTML 文档的解析过程，比如 ...继续阅读 (101)

【摘要】由于Memory存储的是单纯的二进制字节，所以原则上我们可以用来它作为媒介，在wasm模块和数组程序之间传递任何类型的数据。在JavaScript API中，Memory通过WebAssembly.Memory类型表示，我们一般将它内部的缓冲区映射相应类型的数组进行处理。WebAssembly也提供了相应的指令来提供针对Memory的读、写、扩容等操作阅读全文 ...继续阅读 (75)

本文翻译自9 Steps for JWT Authentication in Node.js Application，作者：Shefali， 略有删改。身份验证是Web开发的重要组成部分。JSON Web令牌（JWT）由于其简单性，安全性和可扩展性，已成为在Web应用程序中实现身份验证的流行方法。在这篇文章中，我将指导你在Node.js应用程序中使用MongoDB进行数据存储来实现JWT身份验证。在开始之前，我假设你已经安装了Node.js、MongoDB和VS Code，并且你知道如何创建MongoDB数据库和基本的RESTful API。什么是JWT认证？JWT身份验证依赖于JSON Web令牌来确认Web应用中用户的身份。JSON Web令牌是使用密钥对进行数字签名的编码JSON对象。简而言之，JWT身份验证就像为网站提供一个密码。一旦你登录成功，你就得到了这个密码。JSON Web Token由三部分组成，由点（.）分隔：HeaderPayloadSignature以下是JWT的基本结构：xxxx.yyyy.zzzzHeader：这部分包含有关令牌的信息，如其类型和如何保护。Payload：这部分包含关于用户的声明，如用户名或角色。Signature：确保令牌的完整性，并验证它没有被更改，这可以确保代码安全，不会被篡改。当你登录成功时，你会得到这个代码。每次你想访问某个数据 ...继续阅读 (92)

本文翻译自18 JavaScript Tips : You Should Know for Clean and Efficient Code，作者：Shefali， 略有删改。在这篇文章中，我将分享18个JavaScript技巧，以及一些你应该知道的示例代码，以编写简洁高效的代码。让我们开始吧！🚀箭头函数可以使用箭头函数来简化函数声明。function add(a, b) { return a + b; } // Arrow function const add = (a, b) => a + b;Array.from()Array.from()方法可用于将任何可迭代对象转换为数组。const str = "Hello!"; const arr = Array.from(str); console.log(arr); //Output: ['H', 'e', 'l', 'l', 'o', '!']使用console.table显示数据如果您希望在控制台中组织数据或以表格格式显示数据，则可以使用console.table()。const person = { name: 'John', age: 25, profession: 'Programmer' } console.table(person);输出效果：使用const和let对于不会被重新分配 ...继续阅读 (94)

【摘要】利用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。阅读全文 ...继续阅读 (65)

[social4i size="small" align="align-left"][This article was first published onr.iresmi.net, and kindly contributed toR-bloggers]. (You can report issue about the content on this pagehere)Want to share your content on R-bloggers?click hereif you have a blog, orhereif you don't.Impala (Aepyceros melampus) female browsing Weeping Boer-Bean (Schotia brachypetala) leaves – CC-BY-SA by Bernard DUPONTwebrallows R to run in the browser. Let’s play!Add webr to your quarto environment, in the terminal:quarto add coatless/quarto-webrThen, in the YAML header, add:engine: knitr filters: - "webr" webr: ...继续阅读 (57)

本文翻译自How to implement Theme Switcher in JavaScript，作者：Pavel Keyzik， 略有删改。在本文中，您将学习如何在JavaScript中构建主题切换器。这应该是一件很容易的事情，但你也可以从我的代码中学到一些东西。我们需要处理哪些场景？我们应该解决的最基本的场景之一是将主题从亮到暗，反之亦然。我们需要解决的第二件事是，有些人更喜欢使用与系统中相同的设置。这对那些整天在黑暗和光明主题之间切换的人很有用。第三件事是保存用户首选项，否则刷新页面后所有设置将再次设置为默认值。创建主题存储我们创建初始函数createThemeStore()，它将包含几乎所有内容。我们在这里用这种方式实现，但这可能不是最佳方法。function createThemeStore(options) { // Initial mode const initialMode = options.defaultMode || 'system' // Initial state const state = { mode: initialMode, systemTheme: getSystemTheme(), theme: getThemeByMode(initialMode), } }在这里，我们创建一个只有3个变量的状 ...继续阅读 (88)

【摘要】在《WebAssembly入门笔记[2]》中，我们介绍了如何利用Memory在作为宿主的JavaScript应用和wasm模块之间传递数据，但是Memory面向单纯二进制字节的读写在使用起来还是不太方便，此时我们会更多地用到另一个重要的对象Table。Table利用用来存储一组指定类型的对象，说得准确一点是对象的引用，所以可以读取出来直接消费。阅读全文 ...继续阅读 (56)

不知不觉即将迎来2024龙年春节了。龙的形象在中国传统文化中有着广泛的应用，比如在传统文化中，龙代表着权力、威严、吉祥和神灵的象征，同时也是生命力和繁荣的象征。今天的文章将用原生JavaScript和Canvas API实现一个烟花的效果，效果如下所示，在放烟花的过程中将「龙年大吉」的文字逐渐显示出来。接下来开始具体的代码实现过程，针对重点实现代码进行解析，详情完整代码请看源码实现。烟花效果通常由多个元素组成，包括烟花、粒子、画布等。以下是对代码中关键部分的详细解析：Fireworks 类Fireworks类定义了烟花的行为，包括创建、绘制和更新烟花。其中的canvasLoop方法用于循环绘制画布，drawFireworks方法用于绘制烟花的效果，updateFireworks方法用于更新烟花的位置和状态。// Fireworks 类 var Fireworks = function () { // ... 省略部分代码 ... self.canvasLoop = function () { // 循环绘制画布 window.requestAnimationFrame(self.canvasLoop, self.canvas); self.ctx.globalCompositeOperation = 'destination-out'; se ...继续阅读 (83)

【摘要】利用灵活的“导入”和“导出”机制，WebAssembly与承载的JavaScript应用之间可以很便利地“互通有无”。《与JavaScript的交互》着重演示了如何利用函数的导入和导出实现功能的共享，接下来我们主要关注数据的传递或者共享。宗地来说，WebAssembly与宿主程序之间的数据传递主要有如下三种手段，本篇文章主要关注Memory。阅读全文 ...继续阅读 (84)

【摘要】前一阵子利用Balazor开发了一个NuGet站点，对WebAssembly进行了初步的了解，觉得挺有意思。在接下来的一系列文章中，我们将通过实例演示的方式介绍WebAssembly的一些基本概念和编程模式。阅读全文 ...继续阅读 (67)

本文翻译自Node.js Power Tools: 13 Libraries Every Developer Should Know，作者：Pinjari Rehan， 略有删改。Node.js被视为许多Web开发人员的理想运行时环境。它是世界上最流行的编程语言之一，Node.js提供了通过JavaScript库重用代码的能力，但是在项目中选择合适的库可能很困难。有用的库可以缩短开发时间，并为您的Web应用程序提供几个优点，例如更快的加载时间和减少应用程序包的大小。在选择库时，要考虑应用程序的复杂性、支持库的社区、更新的频率以及文档的质量。Node.js库通过Node.js包管理器npm进行维护，npm可以帮助安装各种开源库。下文选择了13个不错的Node.js库，它们使Web开发变得更简单，希望对你有帮助。什么是Node.js？Node.js是一个开源的服务器端运行时环境，用于JavaScript编程。它的异步特性和跨平台互操作性使其成为流行的Web开发基础。Node.js使用事件驱动和非阻塞I/O，使其在处理大量数据的实时分布式系统中非常高效。什么是Node.js库？库，有时称为模块，是预先编写的代码，封装了经常使用的操作。你可以利用库来加速编码过程，并鼓励代码重用，这将有助于你保持你的工作“DRY”（不要重复自己）。框架通常作为整个程序的骨架，与框架相反，库是完成的功能，可以 ...继续阅读 (110)

今天介绍JavaScript中双位非运算~~，~~操作符是一个强大且经常被忽视的特性。它提供了一种快速、简洁的方式来处理数字和执行类型转换，通常可以被用于数学计算和类型转换。我们先了解一下~~的基本概念和它的一些应用场景。~~操作符简介在 JavaScript 中，~~是双位非（bitwise NOT）操作符的双重使用。位非操作符 (~) 将其操作数的所有位进行反转（即，1 变成 0，0 变成 1）。当你连续使用两次（如~~），它会再次反转这些位，从而实际上返回原始值。在给定表达式~foo的情况下，其最终的效果是-(foo + 1)。因此双位非操作~~foo将导致-(-(foo + 1) + 1)。这只适用于整数，给定所有可能的操作数，与~~等价的真实的表达式可能是下面这样的，但真实的内部计算肯定不是这样：typeof foo === 'number' && !isNaN(foo) && foo !== Infinity ? foo > 0 ? Math.floor(foo) : Math.ceil(foo) : 0;下面是一些双位非运算的例子：~~null; // => 0 ~~undefined; // => 0 ~~0; // => 0 ~~{}; // => 0 ~~[]; // => 0 ~~(1/0); ...继续阅读 (113)

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 --key-drop，效果如下：非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么一个类似的卡片交互效果：该效果的几个核心点：卡片的 3D 旋转跟随鼠标移动效果如何让卡片在 Hover 状态，有不同的光泽变化如何让卡片在 Hover 状态，有 Blink，Blink 的星星闪烁效果当然，要做到卡片的 3D 旋转跟随鼠标移动效果需要一定程度的借助 JavaScript，因此，最终的效果是 CSS 配合 JavaScript 以及一些动态效果的 Gif 共同实现。好，下面就让我们一步一步一起来实现这个效果。卡片的 3D 旋转跟随效果OK，接下来，如何实现 3D 卡片效果呢？这个效果之前在让交互更加生动！有意思的鼠标跟随 3D 旋转动效实现过一次，我们复习一下。这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合我们的目标是实现这样一个动画效果：这里，我们其实有两个核心元素：鼠标活动区域旋转物体本身鼠标在鼠标活动区域内的移动，会影响旋转物体本身的 3D 旋转，而旋转的方向其实可以被分解为 X 轴方向与 Y 轴方向。我们来看一下，假设我们的 HTML 结构如下：得到这样一个图形：这里，body的范围就是整个鼠标可活动区域，也是我们添加鼠标的m ...继续阅读 (99)

本文截取自《前端开发实战派》加作者好友进源码实战群大家好，我是杨成功。Express 是老牌的 Node.js 框架，以简单和轻量著称，几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架，如 Egg.js、Nest.js 等都与 Express 息息相关。Express 框架使用标准 Node.js 语法，主要由以下 3 个核心部分组成：路由。中间件。错误处理。认识基本结构Express 的基本结构很简单，只需要三行代码，应用就可以运行起来。const express = require('express') const app = express() app.listen(9000, () => console.log('启动成功'))假设上述代码写在 index.js 中，我们启动该应用使用命令node ./index.js，控制台会输出“启动成功”。为了方便，我们也可以在 package.json 中创建快捷命令，如下：// package.json { "scripts": { "start": "node ./index.js" } }那么现在启动应用就可以用npm run start命令。不过这种方式在本地运行项目时会有一个弊端，就是修改文件后不会立即生效，需要重新启动。为了提高效率，一般会使用一个名为 PM2 的模块启动 N ...继续阅读 (119)

[social4i size="small" align="align-left"][This article was first published on%>% dreams, and kindly contributed toR-bloggers]. (You can report issue about the content on this pagehere)Want to share your content on R-bloggers?click hereif you have a blog, orhereif you don't.Leonetto Cappiello, BenedictineR is known for its versatility and extensive collection of packages. As of the publishing of this post, there are over 23 thousand packages onR-universe. But what if I told you that you could do some pretty amazing things without loading any packages at all?There’s a lot oflovefor base R, and ...继续阅读 (44)

什么是 Vue DevToolsVue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。Vue DevTools：Unleash Vue Developer Experience. Enhance your Vue development journey with an amazing experience!典型的功能特征包括：Pages：显示当前的路由以及一些有用的信息，并提供在页面之间导航的快速方法。开发者还可以使用文本框查看每条路由的匹配情况。Components：显示组件信息，包括节点树、状态等。并提供一些交互功能，例如：编辑状态、滚动到组件等。Assets：显示项目目录中的文件，开发者可以通过一些有用操作查看所选文件信息。Timeline：允许浏览状态或事件的先前版本。Pinia： 与 pinia 集成的功能，允许查看 store 列表及其详细信息，并编辑状态Gragh：显示模块之间的关系。比如以下展示了不同功能的截图：在 Vue 项目中使用 Vue DevTools 有多种方法，比如：Vite Plugin独立 APPChrome 扩展程序Vue DevTools 的典型优质特征可以概括为以下几点：优质开发者经验：通过令人惊叹的体验增强开发者 Vue 开发之旅！广泛的应用程序：支持 Vite 插件、 ...继续阅读 (87)

在数据驱动视图的框架下，你最头疼的事情是什么？没错，就是获取dom。大部分业务逻辑都可以在数据层面进行处理，但有些情况就不得不去获取真实的dom，比如获取元素的宽高dom.offsetHeight或者调用某些dom方法等dom.scrollTop = 100通常在框架里，比如说vue中，会如何获取真实dom呢？我想大家可能都用过这样一个方法nextTick，用于在数据更新后获取dom，如下this.show = true this.$nextTick(() => ( document.getElementById('xx').scrollTop = 100 ))用过的都知道，这个方式非常不靠谱，经常会出现诸如类似这样的错误Cannot read property 'scrollTo' of undefined碰到这种情况，很多同学可能会用定时器，如果500不行，那就换1000，只要延时够长，总能获取到真实dom的。this.show = true settimeout(() => ( document.getElementById('xx').scrollTop = 0 ),500)或许这些框架底层有其他解决方式，不过我并不精通这些，那么，从原生角度，有什么比较好的方式去解决这些问题呢？换句话说，如何确保元素渲染时机呢？一、如何监听元素渲染？元素监听最官方的方式是Mutat ...继续阅读 (142)

热议话题 🔥OpenAI 推出 GPT Store：已超 300 万个应用1 月 11 日凌晨，OpenAI 推出了两款新的产品和服务：GPT Store 和 ChatGPT Team。GPT Store（GPTs）相当于大模型领域的苹果 App Store，是 OpenAI 在去年首届开发者大会上发布的重磅产品，用户无需任何代码，全程支持可视化点击操作。GPT Store 允许用户列出他们为其他人构建的个性化聊天机器人，以供下载。OpenAI 公司表示，到目前为止，其社区成员已经构建了 300 万个 GPT，并已批准了其中一系列 GPT 在 GPT Store 中供下载。GPT 构建者的收入计划将很快启动，将根据所构建的工具的用户参与度，来向美国的 GPT 构建者支付费用。OpenAI 之后将提供有关付款标准的详细信息。ChatGPT Team 则是 OpenAI 面对企业类客户的新产品，适用于用户数量少于 150 人的企业，每个用户每月支付 25 美元，按年支付；或是每个用户每月支付 30 美元，按月支付。它包括一个共享工作区，允许团队构建自己的 GPT。GPT Store 和 ChatGPT Team 的推出意味着 OpenAI 的商业化扩张之路再进一步。随着平台的搭建，后续 GPT 的收益政策将进一步完善，GPT 的生态版图进一步完善。科技资讯 🌍2023 JavaScri ...继续阅读 (82)

Handle element in an Arrayconst hobbies = ["sports", "cooking", "reading"]; console.log(hobbies[0]); # Get single element hobbies.push("surfing"); # Add new element to the end hobbies.unshift("movies"); # Add new element to th start hobbies.pop(); # remove the last element hobbies.shift(); # remove the first elementFind elementconst index = hobbies.findIndex((item) => { return item === "reading" }); console.log(index);A shorter code:const index = hobbies.findIndex((item) => item === "reading"); console.log(index); // Result 2Filter ...继续阅读 (33)

前言经过一个多月的重构，我成功打造了一款功能强大的多端趣味画板。这个画板集成了多种创意画笔，可以让用户体验到全新的绘画效果。无论是在移动端还是PC端，都能享受到较好的交互体验和效果展示。并且此项目拥有许多网上流行的画板功能，包括但不限于前进后退、复制删除、上传下载、多画板和多图层等等。详细功能我就不一一罗列了，期待你的探索。Link:https://songlh.top/paint-board/Github:https://github.com/LHRUN/paint-board在完成重构后，我计划撰写一系列文章，一方面是为了记录技术细节，这是我一直以来的习惯。另一方面则是为了推广一下，期望得到你的使用和反馈，当然如果能点个 Star 就是对我最大的支持。此篇文章是画板探秘系列的第一篇，我将会详细介绍关于撤销与反撤销的方案，示例皆以 Fabric.js 语法做示例，但思路是想通的。方案一：画板级缓存第一个方案是画板级缓存，这个是最简单的。在这种方案下，无需关心具体修改了哪些元素，也无需对整个画布数据进行差异化处理。简单来说，每当需要改变效果时（比如新增、删除、修改元素），只需将当前的画板数据 push 到历史操作栈上，然后撤销与反撤销重新加载相应的数据即可。这种方案的优势在于简单直接，无需考虑细节，历史操作栈记录了每一步的变更。然而，需要注意的是，由于是整个画布数据的无差别缓存，内 ...继续阅读 (126)

大家好，我卡颂。最近尤大的一个推文引起了不小热议，大概经过是：有人在推上夸React文档写的好，把可能的坑点都列出来尤看到后批评道：框架应该自己处理这些坑点，而不是把他们暴露给用户尤大在推上的发言一直比较耿直，这次又涉及到React这个老对手，关注度自然不低。再加上国内前端自媒体的一波引导发酵，比如知乎下这个话题相关的问题中的措辞是怒喷，懂得都懂。在这样氛围与二手信源的影响下，会给人一种大佬都亲手下场撕了的感觉，自然会引来React、Vue各自拥趸的一番激烈讨论。年年都是一样的套路，毫无新意......免费领取卡颂原创React教程（原价359）、加入人类高质量前端群面对这样的争吵，我们应该做什么呢？首先，回到源头本身，尤大diss的有道理么？有。React的心智负担重么？确实重。比如useEffec这个API，你能想象文档中一个章节居然有6篇文章是教你如何正确使用useEffec的么？造成这一现象的原因有很多，比如：Hooks的实现原理使得必须显式声明依赖显式声明依赖无法覆盖useEffect所有场景，为此专门提出一个叫Effect Event的概念，以及一个对应的新hook——useEffectEventuseEffect承载了太多功能，比如未来Offscreen的显隐回调（类似Vue中的Keep-Alive）也是通过useEffect实现当我们继续往前回溯，Hooks必须显式 ...继续阅读 (62)

osascriptosascript是macOS上的一个命令行工具，用于执行AppleScript脚本或者JavaScript脚本。它的名称来源于”Open Scripting Architecture”（OSA），这是macOS中的脚本系统。执行AppleScript脚本：osascript-e'tell application "Finder" to display dialog "Hello, World!"'这个命令告诉Finder应用程序弹出一个对话框，显示”Hello, World!”。osascript对于与macOS交互、控制应用程序等场景非常有用，可以通过命令行方便地执行脚本。在你的情况下，使用osascript来激活应用程序并将其切换到前台。例子例如，将Xcode切换到前台的命令是：osascript-e'tell application "Xcode" to activate'请确保应用程序名称与实际应用程序的名称匹配，大小写敏感。将Safari切换到前台命令是：osascript-e'tell application "Safari" to activate'请确保你输入的应用程序名称与实际应用程序的名称匹配，大小写敏感。这个命令会使用AppleScript告诉应用程序激活（activate）。请注意，有些应用程序可能需要一些时间来响应激活的命令，特别是在启 ...继续阅读 (116)

研究人员发现了向毫无防备的受害者投递 AsyncRAT 的攻击行动。在至少 11 个月的时间里，攻击者致力于通过嵌入网络钓鱼页面的 JavaScript 脚本来投递 AsyncRAT 木马。切换了 100 余个域名与三百多个样本文件后，攻击者的攻击模式始终如一。这些受害者都经过精心挑选，有一些与美国关键基础设施有关。新的攻击基础设施跟踪表明，该攻击行动仍然活跃。 ...继续阅读 (38)