张坤的博客

介绍 Web 1.0 阶段，大致指的是从 1991 年到 2004 年期间，用户是单纯的内容消费者，浏览内容由网站提供，典型例子就是新闻门户网站。用户的参与的方式主要是信息的接受者，信息是单向的。 Web 2.0 阶段，在 2004 年左右开始，用户是内容的生产者，网站只是一个向用户提供服务的平台，典型的 Web 2.0 平台有维基百科、抖音、微信等等。主要特色是互动，用户不再仅是信息的接受者，用户的阅读或观看、讨论、购买等行为，形成大数据资源库。资源库的所有者和使用者仍然是中心化的平台或媒体。用户即可以获取信息，也可以与媒体、平台进行互动，与其他用户间进行互动，进而形成信息的双向流通。 Web3 指的是基于区块链的去中心化在线生态系统，2021 年 Web3 的想法开始流行。到 2021 年底，特别兴趣激增，这主要是由于加密货币爱好者的兴趣以及知名技术专家和公司的投资。特色是去中心化，用户的行为生成的一系列数据构成的资源库，并不是由某一个中心化的平台或媒体所掌握，而是大众共同拥有所有权和使用权。简而言之，Web 1.0 是只读，Web 2.0 是通过 Web 服务读取/ ...

mix-blend-mode一般实现是文字搜索高亮，需要动态给文字内容套一层标签，然后才能改变匹配文字的颜色。现在，通过 mix-blend-mode 混合模式，我们可以在不嵌套任何标签的情况下，让任意的文字颜色变色。 mix-blend-mode CSS 属性设置元素的内容与元素的背景或元素的直系父元素的内容如何混合。它的取值数据类型为 <blend-mode>，描述当元素重叠时，颜色应当如何呈现。 当层重叠时，采用前景和背景的颜色值，执行其混合模式计算并返回最终的颜色值。 123456789101112131415161718192021222324252627282930<blend-mode> = normal | 最终颜色都是顶层颜色，无论底层颜色是什么。 multiply | 最终颜色是顶层和底层颜色相乘叠加的结果。 screen | 最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转得到结果。 overlay | 如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果； ...

原文链接：https://mp.weixin.qq.com/s/27SH8RFoWInD9zM3Dt1h1Q 2022 开发者调查报告 StackOverflow 发布的 2022 开发者调查报告中，在专业开发者群体受欢迎排行榜中，PostgreSQL（46.48%）首次超越 MySQL（45.68%）拔得头筹。专业开发者与初学者的不同之处在于，他们更倾向于选择 Redis、PostgreSQL、Microsoft SQL Server 和 Elasticsearch。 初学者群体当中，MySQL 也并不乐观，紧随其后的 MongoDB 位居第二，占比近1/3。“这很合理，因为它支持大量的语言和应用开发平台。” 值得一提的是，正在使用 MySQL 的开发者同样也在考虑、希望或想要使用别的数据库工作，下图展示了调查结果。 有 11185 名 MySQL 开发者想使用 PostgreSQL 工作，以及 9520 名 MySQL 开发者想使用 MongoDB 工作。 不止 StackOverflow 的报告，根据最新的 10 月 DB-Engines 流行趋势上看，也可以看见 M ...

原文链接：https://chai2010.cn/post/2022/sqlite3-wasm/ 原文作者：chai2010（凹语言 作者，KusionStack 作者） 文章目录 1. WASM 是什么 2. SQLite 官方支持 WebAssembly 3. 在浏览器体验 SQLite 4. 项目的具体目标 SQLite 官方的 wasm 项目终于来了！这表示 WebAssembly 在 SQLite 社区完全进入工业级应用阶段！ 1. WASM 是什么WebAssembly，又名 WASM，是一种标准，它定义了一种低级编程语言，适合 (A) 作为与许多其他语言交叉编译的目标，以及 (B) 通过浏览器中的虚拟机运行。它在设计时考虑了通过 JavaScript 编写脚本，它提供了一种将 C 代码（以及其他代码）编译为 WASM 并通过 JavaScript 编写脚本的方法，尽管 JavaScript 和 C 之间还存在巨大的编程模型差异，但它为不同语言和 JS 的交互带来了标准桥梁。 根据 Ending 定律：“所有可以用WebAssembly实现的终将会用WebAssemb ...

介绍CSS filter 属性用于将模糊或颜色偏移等图形效果应用于元素。CSS 标准里包含了一些已实现预定义效果的函数（blur、brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、opacity、saturate、sepia）。也可以通过一个 URL 链接到 SVG 的 filter 滤镜元素的方式来引用一个 SVG 滤镜。 效果点击分享按钮，弹出常见的社交分享按钮，然后相互间粘滞，同时分享按钮还会抖动动画。 HTML 如下： 1234567<input type="checkbox" id="share"><div class="target"> <label class="share" for="share">分享</label> <span class="icon-share-weibo"><img src="w ...

介绍Web Animations API 可以把 CSS3 实现的 animation 动画由 JS 代码实现。它通过组合两个模型来实现：时序模型（CSS transitions）和动画模型（CSS animations）。 Element.animate(keyframes, options) 用于在元素上创建和播放动画，返回创建的 Animation 对象实例。 keyframes 可以为任何css 动画属性 属性名称使用驼峰命名法指定，例如 background-color 变成 backgroundColor，background-position-x 变成 backgroundPositionX。也可以使用简写属性，例如 margin。 两个特殊的 css 属性： float, 必须写成 cssFloat ，因为 float 是 JavaScript 的关键字。 offset, 必须写成 cssOffset ，因为 offset 已经用来表示关键帧的偏移量。 还可以指定以下特殊属性： offset 关键帧的偏移量，介于 0.0 和 1.0 之间的数字或为 null。这相当于 ...

PiniaVuex 用于管理和多个组件共享状态（数据源）。现在，Vue 的官方状态管理库已更改为 Pinia，它由 Vue 核心团队维护。Pinia 具有与 Vuex 5 几乎完全相同或增强的 API，在 Vuex 5 RFC 中进行了描述。可以简单地将 Pinia 视为具有不同名称的 Vuex 5（Pinia 也适用于 Vue 2.x）。Vue 官方推荐使用 Pinia： 更强的团队协作约定。 与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试。 模块热更新 (HMR)。 服务端渲染支持。 即使在 JavaScript 中也具有类型，为 JS 用户提供适当的 TypeScript 支持或自动完成功能。 与 TypeScript 一起使用时具有可靠的类型推断支持。 pinia-plugin-persistedstatepinia-plugin-persistedstate 插件可以使 Pinia 存储的持久性变得更简单和可配置： 类似于 vuex-persistedstate 的 API。 单个 Store 的配置。 自定义存储方式和自定义序列化数据。 注 ...

介绍效果如下： HTML相册最后要补一个第一张图片的 img 元素，可以无缝循环。 123456789101112<div id="homeCarousel"> <div id="homeCarouselWrap"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a1c406fa6844c33aa2097917494e643~tplv-k3u1fbpfcp-watermark.image?"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7898bd97e2449b5b72b76c114e84dfc~tplv-k3u1fbpfcp-watermark.image?"> <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u ...

使用 Vue 构建自定义元素Web Components 是一组 web 原生 API 的统称，允许开发者创建可复用的自定义元素 (custom elements)。 自定义元素的主要好处是，它们可以在使用任何框架，甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈，或是当你希望将最终的应用与它使用的组件实现细节解耦时，它们会是理想的选择。 Vue 和 Web Components 是互补的技术，Vue 为使用和创建自定义元素提供了出色的支持。你可以将自定义元素集成到现有的 Vue 应用中，或使用 Vue 来构建和分发自定义元素。 Vue 在 Custom Elements Everywhere 测试中取得了 100% 的分数。在 Vue 应用中使用自定义元素基本上与使用原生 HTML 元素的效果相同，但需要进行一些额外的配置才能工作： 跳过组件解析默认情况下，Vue 会将任何非原生的 HTML 标签优先当作 Vue 组件处理，而将“渲染一个自定义元素”作为后备选项。这会在开发时导致 Vue 抛出一个“解析组件失败”的警告。 要让 Vue 知晓特定元素应该被 ...

介绍Vercel 是由 Guillermo Rauch 创立的云服务公司，前身为 Zeit，有 Next.js、Node.js 的 websocket 框架 socket.io 和 MongoDB 客户端 mongoose 等知名开源项目为大众所知。Next.js 为了实现后端渲染，重度使用了 JS 生态中的打包构建工具 webpack。 昨天，Vercel 的团队宣布推出了 Next.js 13，该版本的一些亮点更新内容包括： Directory (beta)：更简单、更快、更少的客户端 JS。 Layouts React Server Components Streaming Turbopack (alpha)： 速度提高 700 倍的基于 Rust 的 Webpack 替代品。 新的 next/image (stable)： native browser 延迟加载速度更快。 新的 @next/font (beta)： 具有零布局偏移的自动自托管字体。 改进 next/link： Simplified API with automatic <a>。 更新： 1n ...