标签: 前端相关

客栈小K | 6天前 | 前端相关浏览器

Introducing Vector Networks

[Evan Wallace](https://madebyevan.com/) [Twitter](https://twitter.com/evanwallace) [GitHub](https://github.com/evanw) This is an archived copy of a blog post that I wrote for the Figma company blog. The original blog post can be found [here](https://www.figma.com/blog/introducing-vector-networks/). Introducing Vector Networks = February 9, 2016 Before I co

 60 |  0 |  0 前端相关浏览器

Qbian | 3周前 | 前端相关后端相关

软件研发三大思维之三:工程思维

Da Vinci:flying machine 【想成为一个优秀的软件企业,要培养自己的团队具有良好的产品思维、项目思维和工程思维。本文就产品思维、项目思维和工程思维进行讨论,帮助读者更好地理解项目管理、产品管理和工程管理之间的区别和联系。】 工程思维 产品思维偏于感性,喜欢从人性、社会性角度去思考问题,从“人机交互”角度去思考,从用户、用户行为、应用场景、业务流程等角度去思考问题。 而工程思维属于理性思维,喜欢从方法、技术角度去思考问题,从“数据交互”角度去思考 ,从数据流、业务规则、业务逻辑、异常条件、异常数据等角度去思考问题,如: 用户不登录能看到哪些数据? 系统登录时需要用户输入什么数据? 对用户名和口令建立哪些验证规则(字母大小写是否敏感、口令长度、含哪几类字符等); 口令或用户名输错了给予什么提示? 口令输错多少次,账户被锁定? 用户可能会输入哪些特殊字符? 黑客有没有可能暴力破解口令...

 121 |  1 |  0 前端相关后端相关

客栈小K | 6周前 | 前端相关

盘点12个 yyds 的低代码开源项目

大家好,我是 CUGGZ。 低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,它能够在多数业务场景下实现大幅度的提效降本,为专业开发者提供了一种全新的高生产力开发范式。下面就来分享几个低代码开源项目,更深入地了解什么是低代码。 1\. Appsmith ------------ Appsmith 是一款开源低代码框架,主要用于构建管理面板、内部工具和仪表板等,允许拖放 UI 组件来构建页面,通过连接到任何 API、数据库或 GraphQL 源,并使用 JavaScript 语言编写逻辑,可以在短时间内创建内部应用程序。 Github(⭐️ 20.2k): [github.com/appsmithorg…](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fappsmithorg%2Fappsmith "https://github.com/appsmithor...

 495 |  2 |  0 前端相关

客栈小K | 7周前 | CSS前端相关

纯CSS实现四种方式文本反差色效果

如封面图所示,文字随着界面的交互变化会修改文字的颜色形成反差色,让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果,这样的效果肯定见过不少,在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。 动画效果一 文字蓝色背景颜色从左往右延伸至整个元素,文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化,且两段文字有着不同的颜色。 实现过程 如图所示两个颜色的背景是两个元素,一个绿色盒子,一个蓝色盒子,其中绿色盒子使用定位的层级 z-index 高于蓝色盒子;通过改变蓝色盒子的宽度覆盖绿色盒子;盒子里面的文字内容宽度固定,否则两段文本不能刚好重叠。 核心代码如下: js <div id="left-side" class="side" <h2 class="title" 前端开发 <span class="fancy" 南城FE</span

 147 |  0 |  0 CSS前端相关

客栈小K | 8周前 | 前端相关

pnpm 是凭什么对 npm 和 yarn 降维打击的

大家最近是不是经常听到 pnpm,我也一样。今天研究了一下它的机制,确实厉害,对 yarn 和 npm 可以说是降维打击。 那具体好在哪里呢? 我们一起来看一下。 我们按照包管理工具的发展历史,从 npm2 开始讲起: npm2 ---- 用 node 版本管理工具把 node 版本降到 4,那 npm 版本就是 2.x 了。 然后找个目录,执行下 npm init -y,快速创建个 package.json。 然后执行 npm install express,那么 express 包和它的依赖都会被下载下来: 展开 express,它也有 node\_modules: ![](https://static.developers.pub/a8d19b1960084cdc8a5cbf7fcc81d2...

 232 |  2 |  0 前端相关

客栈小K | 8周前 | 前端相关

2022年国内外前端发展态势

本文翻译者系奇舞团前端工程师 原文标题:State of Frontend 2022 原文作者:Aleksandra Dąbrowska 原文地址:[tsh.io/state-of-fr…](https://link.juejin.cn/?target=https%3A%2F%2Ftsh.io%2Fstate-of-frontend%2F "https://tsh.io/state-of-frontend/") 前端是否厌倦了新趋势,并寻求稳定? 一、简介 过去两年挺不容易的,在全球范围内引发了许多变化。自从我们的生活逐渐"搬到了线上",IT行业也顺势参与了数字转型。前端开发也在从技术探索再到落地实践等各个方面发生了很多变化。因此,我们尽可能的将前端2020年和2022年的数据并排呈现,以便更好地进行比较。 最著名的前端开发笑话“ 新的一天,新的框架 ”似乎已经过时了。当然,新的框架和库确实出现了,但在某些领域,朝着潮流创新的竞赛慢慢让位于成熟和稳定。 1.1 本文数据来源 3703份有效填写的调查问卷 1...

 430 |  0 |  0 前端相关

客栈小K | 8周前 | 前端相关JavaScript

聊一聊 Vite 的预构建和二次预构建

前言 之前在使用 Vite 的时候,经常会遇到这种情况:项目启动以后,不管是首屏还是页面懒加载,如果发现有未进行 预构建 的第三方依赖,那么 Vite 就会重新 预构建 ,然后触发页面的 reload 。重复的页面 load 操作,给开发人员带来了很不友好的体验。 最新发布的 3.0 版本对此问题做了部分优化,即首屏期间,即使有未进行 预构建 的第三方依赖,也不会发生页面 reload 。 那 3.0 版本是怎么做到的呢?今天我们就通过本文,和大家一起聊一聊 3.0 版本针对 二次预构建 做了什么优化。 本文的目录结构如下: [初探 Vite 预构建](about:blank 1 " 1") [二次预构建](about:blank 2 " 2") [Vite 3.0 对预构建的优化](about:blank 3 " 3") [vite-plugin-package-config vite-plugin-optimize-persist](about:blank 4 " 4") ...

 252 |  0 |  0 前端相关JavaScript

客栈小K | 8周前 | 前端相关

组件库建设——实现一个跨框架的「组件库文档」

要搞一个跨框架的组件库文档怎么下手?最近笔者在建设公司内部的组件库,其中就需要为vue2、vue3、react技术栈的中台系统提供基础组件以接入。于是,一个跨框架组件库文档的需求就来了... 背景介绍 -------- 需求背景概述: 内部需要做一个云产品以统一各种中后台系统(类似阿里云)。有一定的样式、布局规范,还有一些基于ui框架扩展的统一的基础组件。so,笔者需要做的就是做一个 组件库 ,分别实现 element-ui 、 element-plus 、 ant-design 组件的二次封装,并 提供组件库文档 给到使用方接入。 本文主旨: 围绕 组件库文档 进行展开。组件库文档并不是自研,笔者采用的是 vitepress 来快速搭建静态组件文档站点,所以 本文的一些技术攻坚也只针对于 vitepress 场景 ~ 实现在 vitepress 中使用 vue2 + element-ui 组件、 react+antd 组件。 react 还是没做哈哈哈,不过实现思路跟 vue2 是一样的。 实现文档内各...

 292 |  0 |  0 前端相关

客栈小K | 2个月前 | Java前端相关Vue

思考vue3和react18的区别

前言 个人认为框架的初衷是带给开发者更好的开发体验,更快的性能,更简单的操作。 vue3 和 react18 都是最新的框架版本,两者虽然底层原理和思想不同,但是更多的是相同之处,比如都是声明式的,一般多用于 spa ,都用 hooks 来逻辑复用等等 用vite初始化vue3和react18项目 ----------------------------- pnpm create vite 然后删除无用的代码之后,再改造成同样功能的HelloWorld组件,这个组件做如下事情: 定义数据 count ,点击按钮可以是 count+1 ,页面也会响应式改变; 还有一个监听数据改变,在控制台打印改变的数据; 有一个数组 ['apple', 'orange', 'pear'] ,用于列表渲染到页面。 ![image-20220727144746261....

 283 |  1 |  0 Java前端相关

客栈小K | 2个月前 | 前端相关

Git不要只会pull和push,试试这5条提高效率的命令

前言 -- 使用 Git 作为代码版本管理,早已是现在开发工程师必备的技能。可大多数工程师还是只会最基本的保存、拉取、推送,遇到一些commit管理的问题就束手无策,或者用一些不优雅的方式解决。 本文分享我在开发工作中实践过的实用命令。这些都能够大大提高工作效率,还能解决不少疑难场景。下面会介绍命令,列出应用场景,手摸手教学使用,让同学们看完即学会。 stash ----- [官方文档](https://git-scm.com/docs/git-stash) [git 教程](https://www.bookstack.cn/read/git-tutorial/docs-commands-git-stash.md) 描述 官方解释:当您想记录工作目录和索引的当前状态,但又想返回一个干净的工作目录时,请使用git stash。该命令将保存本地修改,并恢...

 384 |  1 |  2 前端相关

客栈小K | 2个月前 | 前端相关Vue

Vue 2.7 正式发布,代号为 Naruto

大家好,我是CUGGZ。 今天,Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。 尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。 向后移植的功能 ------- [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) SFC [ <script setup ](https://vuejs.org/api/sfc-script-setup.html) SFC [CSS v-bind](https://vuejs.org/api/sfc-css-features.html v-bind-in-css) 此外,还支持以下 API: defineComponent() :具有改进的类型推断(与 Vue.extend 相比); h...

 505 |  1 |  0 前端相关Vue

HZFEStudio | 2个月前 | 算法前端相关

算法:找到数组中重复的数字

题目描述 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0 n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 示例: js 输入:[2, 3, 1, 0, 2, 5, 3] 输出:2 或 3 解法一: 哈希表 [在线链接](https://codesandbox.io/s/hzfe-suan-fa-shu-zu-zhong-chong-fu-shu-zi-ha-xi-biao-forked-p8df3?file=/index.html) 从题目中分析,只需要找到任意一个重复的数字,那么可以利用哈希表,用数字的值作为 key 去存储,如果遇到已经存在的 key,则直接返回,这样就找到了重复的数字。 算法步骤 1. 声明哈希表用来保存遍历的值。 2. 开始遍历数组。 3. 获取当前值,判断值是否已经存在,若存在,则返回结果并结束循环;若不存在,则继续下一步。 4. 储存当前值进哈希表。 5. 处理数组下一位

 409 |  4 |  4 算法前端相关

HZFEStudio | 2个月前 | 前端相关JavaScript

编码:实现 apply/call/bind

apply 1\. 语法 js func.apply(thisArg, [argsArray]); 参数 thisArg 在 func 函数运行时使用的 this 值。 argsArray 一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined,则表示不需要传入任何参数。 返回值 使用指定的 this 值和参数调用函数的结果。 2\. 流程图 3\. 编写代码 js Function.prototype.apply = function (thisArg, argsArray) { if (typeof this ! "function") { throw new TypeError(

 272 |  2 |  0 前端相关JavaScript

HZFEStudio | 2个月前 | CSS前端相关

样式:水平垂直居中方案

以下方案均基于如下布局和基础样式: html <div id="parent" <div id="children" HZFE</div </div css parent { background: red; height: 600px; } children { background: blue; } flex 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: flex; justify-content: center; align-items: center; } grid 适用场景:子元素宽高不固定、子元素宽高固定 css parent { display: grid; justify-content: center; align-items: center; } 相对定位 1\. transform 适用场景:子元素宽高不固定、子元素宽高固定 css children { di

 280 |  0 |  0 CSS前端相关

HZFEStudio | 2个月前 | 前端相关TypeScript

基础:什么是 TypeScript 泛型

相关问题 TypeScript 泛型的作用是什么 回答关键点 工具 使用时指定类型 TypeScript 泛型是一种工具。它能让开发者不在定义时指定类型,而在使用时指定类型。 知识点深入 1\. 泛型类 类型参数在类名后面的尖括号中指定。泛型类可以具有泛型字段或方法。 js class HZFEMember<T, U { private id!: T; private name!: U; setMember(id: T, name: U): void { this.id = id; this.name = name; } show(): void { console.log( ID: ${this.id}, Name: ${this.name} ); } } const member1 = new HZFEMember<number, string (); member1.setMember(1, "QingZhen"); member1.show(); // ID: 1,

 199 |  0 |  0 前端相关TypeScript