前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！由于之前的国际化的项目中总是要统计老项目中待翻译的内容，然后再交由业务进行翻译，如果总是人为统计不仅相当耗费精力和时间，而且还不能保证是否有遗漏，因此想通过编写一个i18n-helper插件来实现这个功能。然而，大家的需求总是出奇的相似（因为已经有很多类似的插件存在了），因此没必要重复造轮子了，但是如何开发 vscode 插件的过程可以记录下来，分享给大家！希望本文对你有所帮助！！！跑通官方插件示例好了，话不多说，我们先按着官方文档跑一下它的插件用例吧！生成插件目录安装脚手架npm install -g yo generator-code初始化插件目录终端运行yo code，按照提示生成目录即可。调试插件由于官方文档缺少一些细节，很容易导致小白调试插件失败，再常见的有如下情况。找不到 Hello World 命令进入对应项目目录后，按照官方文档的指示可通过如下两种方式进行调试：按快捷键 F5点击编辑器左下方的Run Extension接着按下Ctrl + Shift + P，并输入Hello World命令，发现无法找到对应的命令：这个原因主要是因为 vscode 版本不一致造成的：package.json文件中指定的vscode版本号当前实际的vscode版本号：解决方案自然就是保持版本的一致性升级vsco ...继续阅读 (63)

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如在现代 CSS 解决方案：CSS 数学函数一文中，我们详细介绍了calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。clamp()：用于将属性值限制在一个范围内，支持三个参数：最小值、推荐值和最大值。在现代 CSS 解决方案：CSS 原生支持的三角函数一文中，给大家介绍了从 Chrome 111 开始也逐渐开始原生支持的三角函数：sin()cos()tan()而本文，我们将介绍另外一个非常有意思的数学函数 - round()。何为 round()？简单来说，round() CSS 函数的作用就是根据选定的舍入策略返回舍入数。举个例子，在 JavaScript 中，我们可以使用Math.round()返回一个数字四舍五入后最接近的整数。譬如：x = Math.round(20.49); //20 x = Math.round(20.5); //21 x = Math.round(-20.5); //-20 x = Math.round(-20.51); //-21现在，CSS 借助 round() 函数也有了相同的能力：line-height: round(2.2 ...继续阅读 (78)

大家好，我卡颂。从17年诞生至今，社区对TailwindCSS的接受程度不断提升：一些使用过他的程序员大呼真香，而另一些程序员一听到他宣扬的原子化CSS理念就表示不能接受。同样是程序员，为什么分歧这么大？这篇文章会分析问题形成的原因，给出建议，并预测TailwindCSS未来的走势。欢迎围观朋友圈、加入人类高质量前端交流群，带飞原子化CSS vs 语义化CSS这篇文章不是TailwindCSS的科普文，但为了文章的完整性，有必要先介绍下TailwindCSS的核心理念 ——原子化CSS。元素样式是由一条条CSS规则构成的。对于如何组织CSS规则，可以分为两个流派：语义化CSS（Semantic CSS）原子化CSS（Atomic/Utility-First CSS）先说语义化CSS，他很好理解，以下面这个class举例：.chat-notification { display: flex; max-width: 24rem; margin: 0 auto; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, ...继续阅读 (56)

前言在B/S架构中，服务端导出是一种高效的方式。它将导出的逻辑放在服务端，前端仅需发起请求即可。通过在服务端完成导出后，前端再下载文件完成整个导出过程。服务端导出具有许多优点，如数据安全、适用于大规模数据场景以及不受前端性能影响等。本文将使用前端框架React和服务端框架Spring Boot搭建一个演示的Demo，展示如何在服务端导出Excel和PDF文件。当然，对于前端框架，如Vue、Angular等也可以采用类似的原理来实现相同的功能。在服务端导出过程中，需要依赖额外的组件来处理Excel和PDF文件。对于Excel相关操作，可以选择POI库，而对于PDF文件，可以选择IText库。为了方便起见，本方案选择了GcExcel，它原生支持Excel、PDF、HTML和图片等多种格式的导出功能。这样一来，在实现导出功能的同时，也提供了更多的灵活性和互操作性。实践本文将演示如何创建一个简单的表单，其中包括姓名和电子邮箱字段，这些字段将作为导出数据。同时，前端将提供一个下拉选择器和一个导出按钮，通过下拉选择器选择导出的格式，然后点击导出按钮发送请求。等待服务端处理完成后，前端将下载导出的文件。在服务端，我们需要实现相应的API来处理提交数据的请求和导出请求。我们可以定义一个对象，在内存中保存提交的数据。然后利用GcExcel库构建Excel对象，并将数据导出为不同的格式。前端 Reac ...继续阅读 (64)

抖音的小圆球加载效果相信大家都见识过，也对其中的实现原理应该有一定的好奇心吧，下面就让我带大家来探索一下小圆球加载效果的实现原理吧。要实现两个小圆球，我们可以思考两种方案的实现，第一种就是css方案，画两个小圆球，然后使用css动画来实现，而第二种则是使用canvas方案。我们首先来尝试第一种方案，首先肯定是要画出两个小圆球，这不就是相当于画两个圆嘛，所以使用宽高加圆角属性即可实现。html代码如下:首先是一个旋转的容器元素，接着就是左右两个小圆球，我的思路也很简单，既然两个小球是互相旋转的，那也就是说我给它们的父元素旋转不就达到了两个小球互相旋转的效果吗？接下来我们来看样式代码:.small-ball { width: 11px; height: 11px; border-radius: 50%; } .small-ball.small-left-ball { background-color: #e94359; } .small-ball.small-right-ball { background-color: #74f0ed; } .rotate-ball { width: 22px; animation: rotate 5s ease-in infinite forwards; transition: 2s; ...继续阅读 (71)

本文翻译自Randomness in CSS using trigonometry，作者：Kacper 略有删改在过去，我已经介绍了CSS中使用模运算的伪随机性的主题，我使用素数创建了一个自动计数器，可以用来为每个对象生成不同的值。因此，我们可以独立地计算每个元素的伪随机值。尽管这个解决方案很强大，但它几乎没有缺点：模函数不是连续的它过于复杂：需要3个变量和@property定义每个我们想要生成的随机值需要使用尚未广泛支持的@property幸运的是，我们可以做得更好！在本文中提出一个更好的解决方案，使用三角函数。更好的方法自从我上次探索这个主题以来，CSS中出现了一些令人惊叹的新特性。其中最令人兴奋的是三角函数。他们解开了许多以前不可能完成的任务。它们也是CSS中第一个原生支持的有界连续函数，使它们成为创建伪随机生成器的工具。随机性vs伪随机性显然，这里提出的解决方案仅生成伪随机值。使用预定常数计算所有值。正如我在上一篇文章中所描述的，我们可以添加一个额外的--seed变量，并从系统外部更改它（例如在加载时在JavaScript中设置它），以提供较少确定性的结果，但CSS不提供任何非确定性的方法。也就是说，该解决方案应该足以获得用于动画、位置等的足够的伪随机值。正弦函数的特征正弦函数和余弦函数有趣的原因有很多，它们可以在涉及圆和旋转的各种操作中非常有用。在我们的例子中，我们可以将 ...继续阅读 (64)

悬停效果一直是向网站添加交互元素的最简单方法之一，我们看到它们经常用于突出显示文本链接或按钮。悬停效果尤其强大的一个领域是当它们应用于图像时，无论是作为小型卡片布局的一部分还是大型相册的一部分，都可以产生很棒的效果。今天，我们将向您展示设计师将悬停效果集成到图像中的一些创意方法。他们将演示我们如何以创新的方式为我们自己的项目增添趣味。Photo Effects on Hoverby Alvaro MontoroFast and Powerful Image Effectsby kw7oeImage Hover with Slide Out Titleby LittleSnippetsShow Your Cards Image Effectsby Bruno RodriguesShifting Reality Image Hover Effectsby Dimitra VasilopoulouSplit Image Hover Effectsby Dimitra VasilopoulouPure Class Image Effect with Pure CSSby Mahesh AmbureKey(frames) to the Wildby Vail JoyThe Bigger Picture Image Hover Galleryby ShawSplit Image Reveal ...继续阅读 (94)

有时候，前端网页需要知道，用户使用的是手机浏览器还是桌面浏览器。本文根据StackOverflow，整理了 JavaScript 侦测手机浏览器的五种方法。一、navigator.userAgent最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。JS 通过navigator.userAgent属性拿到这个字符串，只要里面包含mobi、android、iphone等关键字，就可以认定是移动设备。if(/Mobi|Android|iPhone/i.test(navigator.userAgent)){// 当前设备是移动设备}// 另一种写法if(navigator.userAgent.match(/Mobi/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/iPhone/i)){// 当前设备是移动设备}这种方法的优点是简单方便，缺点是不可靠，因为用户可以修改这个字符串，让手机浏览器伪装成桌面浏览器。Chromium 系的浏览器，还有一个navigator.userAgentData属性，也是类似的作用。不同之处是它将 user agent 字符串解析为一个对象，该对象的mobile属性，返回一个布尔值，表示用户是否使用移动设备。const isMobile=nav ...继续阅读 (95)

Ext Direct 是 Ext JS 框架中的一个功能模块，用于简化前端 JavaScript 应用程序与后端服务器之间的通信和数据交换。 Ext Direct 提供了一种直接的、透明的方式来调用服务器上的方法和处理服务器响应，而无需编写大量的手动 AJAX 请求和处理代码。 通过使用 Ext Direct，可以将服务端的方法变为可直接调用的 JavaScript 函数，并使用与本地 JavaScript 函数相同的方式进行调用。 到这里可以了解 Ext Direct 这个专有名词的意思了， 就是 ...继续阅读 (129)

大家好，我卡颂。在JS中有一类特殊的函数 —— 标签函数，用于自定义模版字符串的处理逻辑。不同于一般函数形如fn(argA, argB)的执行方式，标签函数可以直接跟在模版字符串前面，比如：tagFn`hello ${name}`本文来聊聊标签函数都有哪些有意思的应用。欢迎围观朋友圈、加入人类高质量前端交流群，带飞内置的标签函数JS中只有一个内置标签函数 ——String.raw，用于获取模字符串的原始字符串形式，即：处理替换(例如替换${name}为变量实际的值)不处理转义序列(例如\n)对于如下代码：const name = 'Ka Song'; const s1 = `Hello \n ${name}` const s2 = String.raw`Hello \n ${name}`用console.log分别打印s1、s2的结果如下：之所以s1有换行符，而s2没有，是因为默认情况，模版字符串会处理转义字符（比如这里的\n），而String.raw不会处理。要实现一个简易的String.raw也很简单，比如下面的myRaw，其中：strings参数是保存原始字符串的数组values参数是保存所有替换变量的数组function myRaw(strings, ...values) { let result = ''; for (let i = 0; i < str ...继续阅读 (76)

如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯CSS实现这个折叠效果。按图片的效果进行代码还原很多方式都可以实现，以下是本次实现的主要几点：纯CSS实现，不依赖JavaScript使用单张图片，不需要在PS中切割成多单图片可以通过样式属性中设置CSS变量来配置页面实现过程界面布局HTML的实现相对简单，img标签主要实现内容大小的控制，将图标内部的内容分割为3个部分，其中左侧span.a占50%，右侧span.bc占50%，span.bc中的span.b和span.c各占比一半。图片的地址从HTML中可传入，这样需要更换图片的时候就不需要更新CSS中的代码了。你可能会好奇图片为什么被隐藏了，核心的逻辑就是对不同的分割块中设置不同的background-position，每一块都是用的同一个图片地址，但是真正显示的区域不一样，拼在一起刚好是一张完整的图片。当hover时对span.b和span.c设置不同的动画效果，接下来看核心的代码实现。上面有提到img标签主要实现内容大小的控制，所有img标签的目的是撑开内容的大小，但是本身是不展示在页面中的，所以img标签有一个特殊的样式控制opacity: 0，隐藏其透明度。这样我们就可以灵活的操作span分割出来的背景了。img { ...继续阅读 (64)

1. IntroductionSweetAlert2is a beautiful, responsive, customizable, accessible replacement for javascript’s popup boxes, and there is also a version for Angular, you can find the detail usage inofficial website. But, the use cases in the official doc are just for use on one page, which means you need to add the same HTML codes on every page you want to use, what if you are using the common layout? The common layout means there is a main layout includingHeader,Center Body, andFooter, just like this article which I introduced.In the common layout structure, you don’t need to add the ...继续阅读 (86)

JavaScript 中的闭包是相当重要的概念，并且与作用域相关知识的指向密切相关，在大厂的前端面试过程中经常会被提及。作用域基本介绍JavaScript 的作用域通俗来讲，就是指变量能够被访问到的范围，在 JavaScript 中作用域也分为好几种，ES5 之前只有全局作用域和函数作用域两种。ES6 出现之后，又新增了块级作用域，下面我们就来看下这三种作用域的概念，为闭包的学习打好基础。全局作用域在编程语言中，不论 Java 也好，JavaScript 也罢，变量一般都会分为全局变量和局部变量两种。那么变量定义在函数外部，代码最前面的一般情况下都是全局变量。在 JavaScript 中，全局变量是挂载在 window 对象下的变量，所以在网页中的任何位置你都可以使用并且访问到这个全局变量。下面通过看一段代码来说明一下什么是全局的作用域。var globalName = 'global'; function getName() { console.log(globalName) // global var name = 'inner' console.log(name) // inner } getName(); console.log(name); // console.log(globalName); //global function setName() ...继续阅读 (84)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！H5 移动端开发的必不可少的一个环节就是移动端网页的适配，因为UI通常只会提供大小固定的设计稿，而各种不同移动设备具有不同的页面分辨率和大小，所以适配的目的就是让一份设计稿在不同移动设备上表现出一致性。虽然现如今各种插件都可以帮助我们快速配置完成，例如lib-flexible、postcss-pxtorem、postcss-px-to-viewport等等，但不少小伙伴在被问及相关原理时却很难说清楚，那么本篇文章我们就一起来探究一下其中原理吧！！！文中有不当之处，欢迎在评论区指正！！！CSS 中的尺寸单位在了解具体的适配方案之前，我们先把CSS中适配会涉及到的相关尺寸单位进行一个了解吧，总结起来就是一句话：CSS 中的尺寸单位都是相对长度单位，只是相对的目标不同。px 像素单位px全称为pixel（像素），它是相对于屏幕显示器分辨率（桌面设定的分辨率，不是显示器的物理分辨率）而言的，在相同/不同的设备上1px表示多个设备像素。当一个像素点越大时, 呈现的图像就会越模糊；当一个像素点越小时, 像素点就会越密集, 呈现的图像就会越清晰。![image.png]()em 相对单位好多人都认为em就是相对于父元素 font-size，实际上在不同的CSS属性当中使用em其相对的目标也是不同，如下：用于font-siz ...继续阅读 (68)

写 JS 代码的同学们不知道有没有注意过，后台接口通过 JSON 处理汉字字符、emoji 时，返回的是像\u00ff这样转义处理的字符，而不是它们的明文原文。这是为什么呢？123phpechojson_encode('再会，谢谢所有的🐟');// -"\u518d\u4f1a\uff0c\u8c22\u8c22\u6240\u6709\u7684\ud83d\udc1f"1234importjsonprint(json.dumps('再会，谢谢所有的🐟'))# -> "\u518d\u4f1a\uff0c\u8c22\u8c22\u6240\u6709\u7684\ud83d\udc1f"以及，这个问题和今天要说的 MD5 转换编码的踩坑又有什么关系呢？踩坑最近在小程序项目中，对于一些请求数据的防篡改处理，与后台约定了在表单内增加一个校验字段，为原始数据进行 MD5 换算后的结果。最初调试走通后没发现什么问题，就发布上线了。之后陆续有部分用户反馈，偶尔发现部分页面无法正常显示，与后台同学定位发现这些用户请求时无法通过防篡改校验，导致被拦截策略误伤。只好对这些情况作了一些白名单的临时处理，待有时间时再彻底定位处理。后来逐渐发现，出现 MD5 处理结果异常的用户，往往名字里有 emoji 或者生僻汉字出现，莫非问题和这些字符的编码方式有关——通 ...继续阅读 (27)

随着ChatGPT、Claude、Bard等人工智能 AI 的蓬勃发展，我们不仅可以借助它们轻松地实现写作、办公等工作。而对于开发者来说，它们其实也是绝佳的结对编程助手！！但如果你写代码时，每次还“土法”复制粘贴跟网页ChatGPT对话，效率就有点低了。为此，Github 官方推出强大的 Github Copolit 智能编程辅助插件，直接集成到VSCode等编辑器或 IDE，提供智能代码建议与补全，能帮你写代码、找 Bug 等。可惜它有一个致命缺点——太贵了！今天异次元给你介绍的「Codeium」则是一款完全免费的 Github Copolit 替代品……「前往查看原文....」异次元还有这些值得一看：全套 JetBrains 官方中文版开发编程 IDE 工具 - PyCharm/WebStorm/IntelliJ IDEA 等近 7 百本免费中文编程教程电子书汇总 - 程序员开发入门学习资源大搜集Sublime Text 2 - 性感无比的代码编辑器！程序员必备神器！跨平台支持Win/Mac/LinuxHe3 超级开发工具箱 - 内置 200 多种实用免费小工具合集 (办公/编程必备利器)异次元正版数字商城 | 异次元首页 | 微信公众号 | iPcFun | 关注微博 | 软件精选 ...继续阅读 (71)

大家好，我卡颂。要说React有什么其他框架没有的、独一无二的特性，那一定是并发更新。围绕并发更新，存在两个很有意思的现象：很多开发者听说过他很少开发者直接使用过他这两个现象看似矛盾，其实很好解释 ——React18之后的新特性，主要是面向上层框架的（主要是Next.js）。换句话说，这些新特性（比如并发更新）主要是供框架集成，而不是开发者直接使用。比如，并发更新的两个核心API——useTransition和useDeferredValue，都是针对视图切换的场景。而在前端交互中，最主要的视图切换场景就是路由切换，所以包含路由功能的前端框架就会集成这两个API。而现在，一个试验性浏览器API——View Transitions API将原生实现视图切换功能。他到底有什么用？如果其他框架使用它，是不是能获得React同样的并发更新能力？欢迎围观朋友圈、加入人类高质量前端交流群，带飞什么是视图切换？不管是View Transitions API，还是React的useTransition，都是为了提高视图切换场景下的用户体验。什么是视图切换？以view-transitions Demo举例。这是个简单的相册Demo，点击左边图片缩略图，右边会显示大图：整个过程简单来说包括3个步骤：点击缩略图请求大图数据大图请求成功后，显示大图从步骤1到3的过程就是个典型的视图切换。整个过程有很多可以 ...继续阅读 (68)

This is post 2 of 2 in the series“How to Implement JWT”In this series, I will show you how to implement JWT in .Net Core API and communicate with Angular.How to Implement JWT in Core API and Angular – Part 1How to Implement JWT in Core API and Angular — Part 21. IntroductionWe have introduced how to generate theJWTon the server side inpreviousarticle, so we will continue to introduce how to handle theJWTin client-side with Angular in this article.For demonstration, we need to create a simple login page to call the login API, and create another simple page for checking t ...继续阅读 (97)

对于markdown相信大家都不陌生，日常写文档或日常记录都用到的比较多，书写的是markdown的格式，实时预览的是转换后的html样式。本次实现的需求是在uniapp中转换markdown文本展示在不同的平台，主要平台是浏览器使用和微信小程序使用。对于这两个平台目前没有一个比较通用的解决方案，本次实现也是针对不同的平台单独实现，以下就是具体的实现过程。浏览器实现浏览器实现主要基于marked，由于文本中会存在对代码的转换，所以还需要增加highlight.js处理代码高亮的情况。另外为了保障HTML的安全性，增加了DOMPurify库过滤HTML，DOMPurify可过滤不可信HTML和保护应用程序免受恶意用户输入来帮助防止跨站脚本攻击（XSS攻击）。核心依赖包安装如下：npm install marked --save npm install dompurify --save npm install highlight.js --save核心依赖包引用如下：import { marked } from 'marked'; import DOMPurify from 'dompurify'; import hljs from "highlight.js/lib/common"; // 代码主体样式文件 import 'highlight.js/styles/github.css ...继续阅读 (69)

Free Programming Books在我看来，这是一个几乎汇集了所有免费的编程课程和书籍的网站。我最喜欢这里的一点是它区分了许多不同的语言，这可以帮助我们轻松选择适合自己的书。除了阅读文档之外，它还为，例如popcast、视频、代码演练……Free Programming BooksWeb Developer Road Map2021 年成为 Web 开发人员的路线图，包括前端、后端和DevOps。Web Developer Road MapCoding Interview University该仓库为开发人员提供了通往美国大型互联网公司的完整面试、学习指南，其中列出的题目和项目将为你在任何软件公司的技术面试前做好准备。Coding Interview UniversityJavaScript Questions该网站汇总了 Javascript 编程语言从基础到高级的问题。我最喜欢它的一点是它对每个问题都有非常详细的答案和说明。它也被翻译成了许多不同的语言。JavaScript QuestionsClean Code Javascript它综合了作者在使用 Javascript编程语言工作期间的编码经验。它帮助我们学习如何编写易于理解、易于重用的代码，并提高代码的效率Clean Code JavascriptTech Interview HandbookThe Tech ...继续阅读 (61)

本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果：上面的动画效果，非常有意思，核心有两点：小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果小球在碰撞边界的瞬间，颜色发生随机的变化嗯？很有意思的效果。看上去，我们好像使用 CSS 实现了碰撞检测。然而，实际情况真的是这样吗？让我们一起一探究竟！实现 X 轴方向的运动这里其实我们并没有实现碰撞检测，因为小球和小球之间接触时，并没有发生碰撞效果。我们只实现了，小球与边界之间的碰撞反应。不过这里，也并非碰撞检测，我们只需要设置好单个方向的运动动画，并且设置animation-direction: alternate;即可！下面，我们一起来实现单个方向上的运动动画：div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; border-radius: 50%; background: #0cf; animation: horizontal 3s infinite linear alternate; } @keyframes horizontal { from { left: 0; } to { ...继续阅读 (70)

欢迎关注我的公众号：前端侦探在原生 APP 中，我们经常会看到那种丝滑又舒适的页面切换动画，比如这样的Android 里一般称之为共享元素（shareElement）动画，也就是动画前后有一个（或多个）相同的元素，起到前后过渡的效果，可以很清楚的看到元素的变化过程，而并不是简单的消失和出现。现在，web 中（chrome 111+）也迎来了这样一个特性，叫做视图转换动画View Transitions，又称“转场动画”，也能很轻松的实现这类效果，一起了解一下吧一、快速认识 View Transitions先从一个简单的例子来认识一下。比如，下面有一个网格列表12345678910简单修饰后如下然后我们实现一个简单交互，点击每个元素，元素就会被删除list.addEventListener('click', function(ev){ if (ev.target.className === 'item') { ev.target.remove() } })可以得到这样的效果功能正常，就是有点太过生硬了现在轮到View Transitions出场了！我们只需要在改变状态的地方添加document.startViewTransition，如下list.addEventListener('click', function(ev){ if (ev.target.clas ...继续阅读 (77)

WebGPU 是一种全新的现代API，用于在 Web 应用程序中访问 GPU 的功能。在 WebGPU 之前，有 一种WebGL技术，它提供了 WebGPU 功能的子集。 而WebGPU启用了新一类丰富的网络内容，开发人员可以用它构建了令人惊叹的应用。其历史可以追溯到2007 年发布的 OpenGL ES 2.0 API，而该 API 又基于更旧的 OpenGL API。 WebGPU 将这些现代 API 的进步带到了 Web 平台。 它专注于以跨平台的方式启用 GPU 功能，同时提供一个在网络上感觉自然的 API，并且比它所构建的一些本机 API 更简洁。GPU 通常与渲染快速、详细的图形联系在一起，WebGPU 也不例外。 它具有支持当今桌面和移动 GPU 上许多最流行的渲染技术所需的功能，并为未来随着硬件功能的不断发展添加新功能提供了途径。除了渲染之外，WebGPU 还可以释放 GPU 执行通用、高度并行工作负载的潜力。 这些计算着色器可以独立使用，无需任何渲染组件，也可以作为渲染管道的紧密集成部分。一、初始化WebGPU如果你只想使用 WebGPU 进行计算，那么则无需在屏幕上显示任何内容就可以体验WebGPU。 但是，如果你想要再屏幕上渲染内容，就像我们将在 Codelab 中所做的那样，你需要准备一个画布。1.1 从canvas开始首先，我们创建一个新的 HTML 文档 ...继续阅读 (68)

前言Hello各位，本葡萄又来啦，今天遇到的场景是这样的：在日常业务流程中，经常需要某一流程环节中相关责任人员进行审批签字，早期许多公司为了省事就直接会把这位负责人的签名以键盘打字（楷体）的形式打印出来，但是这样的坏处就是会导致所有的负责人的签名都是一样的，没有美感，为了解决这个问题，一些公司就开始使用手写签名（用鼠标或者是电子笔写出来的签名）代替电子签名，今天本葡萄就为大家简单的介绍下手写签名到底是怎么实现的。话不多说，先上效果图：看完效果图之后，下面为大家介绍实现的详细过程。使用Html+JavsScript实现手写签名的添加1.实现Html界面doctype htmlSpreadJS in TypeScript引入在线Excel资源System.import('./src/app');添加清空和确认功能清空确认首先引入需要的在线Excel资源包，然后添加增加清空和确认手写签名两个按钮。2.手写签名的JavsScript实现方法（1）添加手写签名：let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)) let customeAddSign = { "text":"添加手写签名", commandName:"customeAddSign", execute:() =\ ...继续阅读 (60)

近期在开发AI对话产品的时候为了提升用户体验增强了对话输入框的相关能力，产品初期阶段对话框只是一个单行输入框，导致在文本内容很多的时候体验很不好，所以进行体验升级，类似还原了微信输入框的功能（只是其中的一点点哈🤏）。初期认为这应该改动不大，就是把input换成textarea吧。但是实际开发过程发现并没有这么简单，本文仅作为开发过程的记录，因为是基于uniapp开发，相关实现代码都是基于uniapp。简单分析我们大概需要实现以下几个功能点：默认单行输入可多行输入，但有最大行数限制超过限制行术后内容在内部滚动支持回车发送内容支持常见组合键在输入框内换行输入多行输入时高度自适应 & 页面整体自适应单行输入默认单行输入比较简单直接使用input输入框即可，使用textarea的时候目前的实现方式是通过设置行内样式的高度控制，如我们的行内高度是36px，那么就设置其高度为36px。为什么要通过这种方式设置呢？因为要考虑后续多行输入超出最大行数的限制，需要通过高度来控制textarea的最大高度。多行输入多行输入核心要注意的就是控制元素的高度，因为不能随着用户的输入一直增加高度，我们需要设置一个最大的行数限制，超出限制后就不再增加高度，内容可以继续输入，可以在输入框内上下滚动查看内容。这里需要借助于uniapp内置在textarea的@linechange事件，输入框行数变化时调用并回传高度 ...继续阅读 (68)

1. IntroductionThe web form is necessary for a website. And there are 2 types of forms in AngularReactive forms: Provide direct, explicit access to the underlying form’s object model. Compared to template-driven forms, they are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, or you’re already using reactive patterns for building your application, use reactive forms.Template-driven forms: Rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to a ...继续阅读 (91)

近期给AI产品增加了推广返佣的能力，涉及到推广就会有分享裂变，个人的专属分享链接及海报。本次文章主要记录前端合成海报并下载到本地的流程，因为产品运行的平台主要是在小程序和PC浏览器，所以主要也是实现这两个平台的图片下载，接下来开始正文。浏览器端实现在实现下载之前首先要将海报内容合并成一张图片。这里用到了html2canvas这个库，这个相信很多人都有用到过。html2canvas可以将网页中的HTML元素转换为Canvas图像，从而实现将网页内容截图的功能。它提供了一种简单的方法来捕捉整个网页或特定的HTML元素，并生成对应的图像数据。以下是一个简单的示例代码，第一个参数传入需要合并图像的DOM根元素，第二个参数传入相应的参数配置，在回调中即可获取到对应的canvas对象：html2canvas(this.$refs.poster.$el, { useCORS: true, allowTaint: true, scale: this.getDPR(), }).then(canvas => {})接下来就是将canvas对象转换成图片并下载到本地，通过canvas.toDataURL可以将canvas对象转换为base64的图片地址，再创建一个a标签模拟点击即可触发图片下载到本地。const dataURL = canvas.toDataURL('image/ ...继续阅读 (77)

本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为锚点定位。Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯 CSS 实现的功能。Anchor Position 当前仍属于实验室功能，新版本 Chrome 开启该功能：浏览器 URL 输入框输入： chrome://flags/找到 Experimental Web Platform features 选项，开启该功能何为 Anchor Positioning？那么，什么是 Anchor Positioning 呢？Anchor Positioning 由规范CSS Anchor Positioning提出定义。规范是这么描述的：CSS absolute positioning allows authors to place elements anywhere on the page, without regard to the layout of other elements besides their containing block. This flexibility can be very useful, but also very limiting—often you want t ...继续阅读 (65)

0x01 什么是JavaScript原型(prototype)JavaScript 中的每个对象都链接到某种类型的另一个对象，称为原型(prototype)。默认情况下，JavaScript 会自动将新对象分配给其内置原型之一。说的通俗一点：原型就是将不同的变量类型转换成了一个默认包含众多内置方法的对象。您可以在下面看到这些全 ...继续阅读 (49)

前言浏览器渲染原理作为前端必须要了解的知识点之一，在面试中经常会被问到。在一些前端书籍或者培训课程里也会经常被提及，比如 MDN 文档中就有渲染原理的相关描述。作为一名工作多年的前端，我对于渲染原理自然也是了解的，但是对于它的理解只停留在理论知识层面。所以我决定自己动手实现一个玩具版的渲染引擎。渲染引擎是浏览器的一部分，它负责将网页内容（HTML、CSS、JavaScript 等）转化为用户可阅读、观看、听到的形式。但是要独自实现一个完整的渲染引擎工作量实在太大了，而且也很困难。于是我决定退一步，打算实现一个玩具版的渲染引擎。刚好 Github 上有一个开源的用 Rust 写的玩具版渲染引擎robinson，于是决定模仿其源码自己用 JavaScript 实现一遍，并且也在 Github 上开源了从零开始实现一个玩具版浏览器渲染引擎。这个玩具版的渲染引擎一共分为五个阶段：分别是：解析 HTML，生成 DOM 树解析 CSS，生成 CSS 规则集合生成 Style 树生成布局树绘制每个阶段的代码我在仓库上都用一个分支来表示。由于直接看整个渲染引擎的代码可能会比较困难，所以我建议大家从第一个分支开始进行学习，从易到难，这样学习效果更好。现在我们先看一下如何编写一个 HTML 解析器。HTML 解析器HTML 解析器的作用就是将一连串的 HTML 文本解析为 DOM 树。比如将这样的 H ...继续阅读 (77)