自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

pingan8787

欢迎关注微信公众号【前端自习课】, 每日清晨,享受一篇前端优秀文章。

  • 博客(1540)
  • 收藏
  • 关注

转载 【低代码】1583什么是比较好的低代码产品

本文基于笔者对「好的」低代码的理解,以及对业界当前开源的各类不错低代码产品的一个简单分析,期待可以给大伙一些输入,可能有些观点不够成熟,欢迎交流与讨论。可能大家谈到低代码想到更多的是低代码搭建页面的平台,内部不少也是此种,其实对于偏逻辑编排、服务 BaaS 能力的偏可视化方式其实也算低代码,旨在「通过少写代码,用更便捷的方式来实现原本需写代码的工作」。说到低代码,喜欢的人特别喜欢,不喜欢的人很不喜...

2023-02-02 08:00:03 8

转载 【JS】1582- 被遗忘的 JavaScript 关键字「with」

本文译者为360奇舞团前端资深开发工程师原文标题:JavaScript's Forgotten Keyword (with)原文作者:Randall原文地址:https://dev.to/mistval/javascript-s-forgotten-keyword-with-48id做 JavaScript 开发 可真是令人兴奋。你总是能发现一些神秘又另类的东西。惊喜与惊吓并存。在本文中,我会介绍...

2023-02-01 08:01:00 4

转载 【总结】1581- 如何使用 JS 实现网络测速?

一、背景知识在我们的日常生活中离不开网络,而网络的快慢直接决定了用户的产品使用体验。最近我们的 WMS 系统在仓库使用过程中出现了网络卡顿导致的异常情况,因此需要提供一个网络检测功能,当仓库再遇到类似问题时可以先通过测量网速来排查是否网络出现了异常。名词解释:ping:给目标 IP 地址发送一个 ICMP 报文,再要求对方返回一个大小相同的数据包来确定两台网络机器是否能正常通信以及有多少时延。我们...

2023-01-31 08:00:21 16

转载 【总结】1580- 写给前端的 Docker 入门终极指南,别再说不会用 Docker 了!

富Web时代,应用变得越来越强大,与此同时也越来越复杂。集群部署、隔离环境、灰度发布以及动态扩容缺一不可,而容器化则成为中间的必要桥梁。本节我们就来探索一下Docker的神秘世界,从零到一掌握Docker的基本原理与实践操作。别再守着前端那一亩三分地,是时候该开疆扩土了。一、讲个故事为了更好的理解Docker是什么,我们先来讲个故事:我需要盖一个房子,于是我搬石头、砍木头、画图纸、...

2023-01-30 08:00:24 11

转载 【总结】1578- 聊聊前端无障碍实践

许多人认为残障人群不使用互联网。事实上,情况完全相反。很多残障人群和健全人一样经常使用网站,在网上购物和进行社交活动。甚至对网络的依赖更大。健全人和残障人士的区别,仅仅在于我们感知、接触世界的方式不一样。 信息无障碍 普遍共识国内对信息无障碍的普遍共识是指通过信息化手段弥补身体机能、所处环境等存在的差异,使任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)都能平等、方便、安全地获取、交互、使...

2023-01-28 08:00:52 29

转载 【总结】1577- Web3.0前端工程师需要具备哪些技术?

英文 | https://levelup.gitconnected.com/what-technologies-do-web3-0-front-end-engineers-need-to-have-25748238a75f翻译 | web前端开发(web_qdkf)最近,Web3.0的声音越来越大,越来越疯狂,对于我们的前端,我们需要具备哪些技术?首先,说说Web3.0是怎么衍生出来的?1.互联网...

2023-01-27 10:19:01 22

转载 【Web技术】1576- 你的图片加载,一点都不酷炫!不信 You Look Look

对于图片加载,咱们可以更酷炫一点!比如这样!GIF 2022-7-18 16-14-31-min.gif这样!GIF 2022-7-19 22-47-26-min.gif这样!GIF 2022-7-19 22-54-52.gif这样!GIF 2022-7-19 11-10-53.gif还有这样的!GIF 2022-7-19 19-58-15.gif前言现代网站中的图片使用量是很大的,在一些门户网站...

2023-01-26 10:32:44 23

转载 【微前端】1575- 了解微前端,深入前端架构的前世今生

????前言在我们的日常开发中,经常会遇到这么一些业务需求,比如说:在一个项目中要放入两个完全不同类型的场景。基于这样的背景下,单页面应用显然已经不能在繁杂的业务中脱颖而出。因此,前端的流行趋势里也就有了微前端架构。这篇文章更像是一篇笔记,记录了我学习微前端的伊始。那在这里,可能会谈到为什么我会从之前的应用文到突然学起了这些架构内容呢?原因在于,周一在入厂后接触到了一系列超级先进的技术。微前端可能是我第...

2023-01-25 09:57:15 16

转载 【总结】1574- 一文详聊前端异常原理

作者介绍:@邹鹏,58 同城资深前端工程师,负责 58 本地增长业务,58 北斗监控平台核心成员,致力于前端工程化,前端监控领域。导读随着近年来前端监控体系建设日益完善,前端工程师对异常更加关注。业界关于 JS 异常介绍大多只谈了异常的捕获方法,对产生的原因和处理办法谈的较少。本文将详细的阐述异常原理,把笔者近 2 年在前端监控领域中与异常打交道的经验分享给大家。异常定义异常,Exception,...

2023-01-24 10:22:34 20

转载 【Vue】1573- 一份不错的 Vue 前端代码风格指南

作者 | 卡喵妹https://juejin.cn/post/6987349513836953607一、命名规范市面上常用的命名规范:camelCase(小驼峰式命名法 —— 首字母小写)PascalCase(大驼峰式命名法 —— 首字母大写)kebab-case(短横线连接式)Snake(下划线连接式)1.1 项目文件命名1.1.1 项目名全部采用小写方式, 以短横线分隔。例:my-projec...

2023-01-23 10:19:26 27

转载 【总结】1572- 如何规范地发布一个现代化的 NPM 包?

今天给大家分享一篇 JS 库打包的参考指南,如果你也在维护一些 JS 库,可以参考一下~本指南旨在提供一些大多数库都应该遵循的一目了然的建议。以及一些额外的信息,用来帮助你了解这些建议被提出的原因,或帮助你判断是否不需要遵循某些建议。这个指南仅适用于 「库(libraries)」,不适用于应用(app)。要强调的是,这只是一些「建议」,并不是所有库都必须要遵循的。每个库都是独特的,它们可能有充足的...

2023-01-22 10:29:19 13

转载 【总结】1571- 抛弃 moment.js ,基于 date-fns 封装日期相关utils

转自:jjjona0215链接:https://juejin.cn/post/7151050708094189582前言本文将简要介绍前端常用日期处理库:官方停止维护的moment.js,无缝代替moment.js的day.js,逐渐流行的date-fns,最后基于date-fns封装常用日期处理的utils。2022年了,如果项目中有用moment.js的可以用day.js代替减少体积做优化,新...

2023-01-21 10:27:39 26

转载 【低代码】1570- 9个顶级无代码开发工具

编辑整理 | web前端开发如果你正在尝试创建应用程序,但不具备所需的编程专业知识,该怎么办?请你不用担心,今天我将跟你分享9个可以实现无码编程的开发工具,从此,你就会爱上编程开发这项技能。什么是无码编程?无码编程有个很重要的特点就是,它不是使用编辑器来进行编程,而是使用 GUI(图形用户界面)工具的编程风格和方法。无代码编程工具不需要你拥有专业技能和专业知识即可实现,这个方法更加直接,同时也降低...

2023-01-20 09:31:51 16

转载 【总结】1569- 使用 Next.js 搭建 Monorepo 组件库文档

阅读本文你将:使用 pnpm 搭建一个 Monorepo 组件库使用 Next.js 开发一个组件库文档changesets 来管理包的 version 和生成 changelog使用 vercel 部署在线文档代码仓库:https://github.com/maqi1520/nextjs-components-docs前言组件化开发是前端的基石,正因为组件化,前端得以百花齐放,百家争鸣。我们每天...

2023-01-19 08:10:02 33

转载 【总结】1568- 前端录屏 + 定位源码,帮你快速定位线上 bug

前言如何快速定位线上bug,是多数开发者都会遇到的难题web-see[1]前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 从0到1搭建前端监控平台,面试必备的亮点项目(已开源)[2] 没有看过的小伙伴,建议先了解下最终效果在监控后台,通过报错信息列表,可以查看具体报错的源码,以及报错时的录屏回放效果演示:录屏记录了用户的...

2023-01-18 08:01:13 34

转载 【Vue】1567- 如何为 Vue3 组件标注 TS 类型,看这个就够了!

1开篇原文作者说是2022年也就是今年,Vue3和TS 是最热门的前端技术,其实去年就已经很火了。2文章开始的地方今天就给大家分享一下如何在 Vue3 组件中结合Composition-Api使用 TS 类型。如果有不会或者不熟的小伙伴,一起学起来吧!3为props标注类型使用 <script setup>当使用<script setup>时,defineProps()宏函...

2023-01-17 07:44:11 28

转载 【总结】1566- 前端文件下载的正确打开方式

前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1. a 标签通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:<ahref="http://www.baidu.com"download="baidu.html">下载</a>复制代码就上面的这个...

2023-01-16 08:12:53 15

转载 【总结】1565- CSS & SVG 绘制写作网格线的3种方式

-最近有同事问我这样一个问题:需要绘制一个自适应文本的写作网格线,设计稿是这样的写作网格其实就是一行行虚线,要求如下虚线的纵向间隔要跟随行高自适应,确保文本在每一栏虚线上虚线后面的背景是动态的,可以是纯色,可以是渐变,也可以是图片绘制这样的虚线,看似容易,其实暗藏玄机,下面一起看看有哪些实现方式吧一、纯色背景下的虚线首先来看这种简单情况,大可以通过两层渐变覆盖的方式实现。假设文本行高是2,先绘制水...

2023-01-15 08:00:57 27

转载 【Vue】1564- 8 个很棒的 Vue 开发技巧

英文 | https://levelup.gitconnected.com/8-awesome-vue-development-tips-661b7631aa471.路由参数解耦通常在组件中使用路由参数,大多数人会做以下事情。export default { methods: { getParamsId() { return this.$route....

2023-01-14 08:01:03 20

转载 【总结】1563- Node CLI 工具原理解析

本文将主要介绍CLI相关周边知识,通过本文读者可以了解到CLI的基本工作原理,注册全局指令的几种方式、Node CLI的基本工作原理。前言“CLI(Command-Line Interface) 命令行界面搞开发的同学,或多或少的都会接触到许多的命令行工具。有生产力工具,也有有意思的小玩意、自动化任务处理等等。命令行工具的安装方式就很多了。win上大部分是通过软件安装包安装,安装同时会通过环境变量...

2023-01-13 08:11:11 18

转载 【抓包】1562- 前端开发必备的抓包技能

1看点工作中最常用的抓包工具是charles,也赞叹charles工具的NB之处,whistle 虽然没用过,但是看完这篇文章连同抓包原理一块学会了。2前言时隔 3 年,重新接触了移动端 h5 页面开发,涉及到 h5 页面与原生 app 的交互,h5 页面需要与原生打通登录态,以及调用原生app 的接口,比如调用原生相机进行二维码扫描。跟微信小程序开发不同,本地开发时微信有提供微信开发者工具,可以...

2023-01-12 08:00:58 26

转载 【适配】1561- 一些常见的移动端适配方案,你了解吗?

前言移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计。目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案。媒体查询 @mediaCSS3 中的媒体查询属性 @media 分别为不同屏幕尺寸的移动设备编写不同尺寸的 css 属性,示例如下所示:/*<375px*/@mediascreenand(max-width:...

2023-01-11 08:15:53 22

转载 【总结】1560- 用 lerna 这样管理项目也太爽了吧!

Hi,大家好。我是yxchan????‍????。不知道大家团队内的npm包代码是「分开管理」还是「合并管理」的呢?关于代码库管理,一般是两种常见方案:multirepo: 把项目按模块拆分为 多 个仓库;monorepo: 把所有项目放在 单 个仓库中;multirepo优点:每个同学都拥有自己的仓库,可以用自己擅长的「语言」、「工具」、「workflow」等,效率“高”;缺点:代码质量得不到保证,如果项目...

2023-01-10 07:28:05 16

转载 【总结】1559- 平时的工作如何体现一个人的技术深度?

看到一个讨论帖,原文如下:平时的工作如何体现一个人的技术深度?平时工作中很多时候需求细而碎的,如何在工作中积累技术深度?又如何体现一个人的技术深度?思考:做需求与做需求的差异在回答问题之前,我想先抛开「技术深度」这个词,讲讲做需求这件事,说说我对做需求的理解。每一个程序员都是从刚毕业做需求开始,为什么有的人逐渐成为大牛,主导大型技术项目或走向团队管理岗位,而有的人一直还在做需求。我觉得这里面的差异...

2023-01-09 08:00:11 20

转载 【总结】1558- MDN 里暂时还查不到的 Navigation API

大厂技术坚持周更精选好文本文为来自飞书 aPaaS Growth 研发 团队成员的文章,已授权 ELab 发布。aPaaS Growth 团队专注在用户可感知的、宏观的 aPaaS 应用的搭建流程,及租户、应用治理等产品路径,致力于打造 aPaaS 平台流畅的 “应用交付” 流程和体验,完善应用构建相关的生态,加强应用搭建的便捷性和可靠性,提升应用的整体性能,从而助力 aPaaS 的用户增...

2023-01-08 08:00:19 9

转载 【面试】1557- 2022年我的面试万字总结(代码篇)

前言最近我也是奔波于各种面试。我自己总结整理了很多方向的前端面试题。借着国庆这个假期,也把这些题目总结分享给大家,也祝正在面试的朋友们能够拿到满意的offer。一、手写代码题1. 手写Object.create思路:将传入的对象作为原型functioncreate(obj){functionF(){}F.prototype=objreturnnewF()}复制...

2023-01-07 08:00:35 8

转载 【JS】1556- JavaScript 代码优化之道

我们先引入一句话:代码主要是为了写给人看的,而不是写给机器看的,只是顺便也能用机器执行而已。代码和语言文字一样是为了表达思想、记载信息,所以写得清楚能更有效地表达。本文多数总结自《重构:改善既有代码的设计(第2版)》我们直接进入正题,上代码!提炼函数what将一段代码提炼到一个独立的函数中,并以这段代码的作用命名。where如果需要花时间浏览一段代码才能弄清楚它到底要干什么,那么这时候就应该将其提...

2023-01-06 08:00:40 6

转载 【Web技术】1555- Web Component 探索之旅

Web Component 是什么?简介Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们。--Web Components | MDN[1]关于它的其它介绍:组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架。而 Web Component 相比第三方框架,原生组件简单直接,符合直觉,...

2023-01-05 08:00:47 22

转载 【总结】1554- 60个Vue常见问题汇总及解决方案

来源 |https://www.fly63.com/Q1:安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟...

2023-01-04 08:00:50 30

转载 【总结】1553- 一次搞懂数据大屏适配方案 (vw vh、rem、scale)

前言当接到可视化大屏需求时,你是否会有以下疑问????如何做一款定制化的数据大屏?开发可视化数据大屏如何做自适应?vm vh、rem、scale 到底哪种比较好?时间不够,有没有偷懒的方法? 最近在公司开发了一个可视化大屏,开发定制化大屏,大家可能都一个感受,开发大屏主要是两方面的工作:大屏之关键-前期的自适应适配根据 ui 稿绘制图表,调细节而解决了适配问题后,后面就只是一个慢工出细活,耗时间的...

2023-01-03 08:00:29 27

转载 【TS】1552- 浅谈TS运行时类型检查

What-什么是运行时类型检查? 编译时类型检查(静态类型检查):在编译阶段对变量类型进行静态检查,编译后的代码不保留任何类型标注信息,对实际代码运行没有影响运行时类型检查(动态类型检查):在代码实际运行过程中对数据类型进行检查,一般会用在约束函数参数、返回值这类内外部之间传递数据 Why-为什么需要运行时类型检查? TypeScript 对于前端项目可维护性提升很大,也能帮我们保障内部编码时的...

2023-01-02 08:24:08 40

转载 【Vue】1551- 使用Vite插件自动化实现骨架屏

作者:橙红年代原文:https://juejin.cn/post/7152406737100734495骨架屏在SPA应用中有两个显著提升用户体验的作用避免页面初始化加载时的空白,体验介于SSR和完全等待页面初始化完成之间避免部分路由组件需要加载数据完成之后才渲染的空白骨架屏会给用户一种内容已经返回的错觉,只要稍加等待就能看见完整内容了,因此骨架屏的定位就是真实内容准备好之前的替身。之前研究过一种...

2023-01-01 07:47:10 25

转载 2023 新年到,烦恼消

2023-01-01 07:47:10 109

转载 【总结】1550- 我是如何带领团队从零到一建立前端规范的?

前言不以规矩,不能成方圆。本人有幸经历了团队从缺乏标准到逐渐规范的一个过程,在此当做记录供大家参考。本文从为什么需要规范以及建立规范的重要性出发,逐步引申出如何去建立适合自己团队的规范,详细讨论了前端具体涉及到的规范都有哪些,部分小节有具体的配置步骤和操作链接。文中涉及到的所有配置均放在github上的 Demo[1] 中,觉得不错的点个赞 ❤️❤️❤️。下面我们开始吧????。为什么需要规范规范能给我...

2022-12-31 07:31:41 14

转载 【总结】1549- CSS 如何根据背景色自动切换黑白文字?

在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:image-20221226102604970通常这种情况,大家可能会通过 js 去计算背景色的深浅度(灰度),算法是公开的,如果已知颜色的RGB值,那么可以通过以下方式得到颜色灰度luma=(red*0.2126...

2022-12-30 07:30:50 44

转载 【Vue】1548- 我相信这是 Vue3 复用代码的正确姿势!

在vue2中代码复用一般是 mixins[1] 混入来实现但使用 mixins 进行代码复用会有一些问题vue3虽然对 mixins 进行了保留但不再推荐使用。mixins 问题不清晰的数据来源:当使用了多个 mixin 时,实例上的数据属性来自哪个 mixin 变得不清晰,这使追溯实现和理解组件行为变得困难。命名空间冲突:多个来自不同作者的 mixin 可能会注册相同的属性名,造成命名冲突。隐式...

2022-12-29 07:20:07 20

转载 【总结】1547- 从 0 搭建 Vite 3 + Vue 3 前端工程化项目

前言Vue 3 正式版已经发布有一段时间了,随着 Vite 脚手架注定成为下一代前端工具链,许多用户都想基于 Vite 来构建 Vue 项目,如果想基于 Vite 构建 Vue 3 项目,社区模板完全满足您的需求,如果想构建 Vite 3 + Vue 3 + JavaScript 项目,那社区模板不太能满足您的需求,因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScrip...

2022-12-28 07:31:37 46

转载 【Nodejs】1546- 有用的内置 Node.js APIs

前言在构建你的第一个Node.js应用程序时,了解node开箱即用的实用工具和API是很有帮助的,可以帮助解决常见的用例和开发需求。有用的Node.js APIs「Process」:检索有关环境变量、参数、CPU使用情况和报告的信息。「OS」:检索Node正在运行的操作系统和系统相关信息。比如CPU、操作系统版本、主目录等等。「Util」:有用和常见方法的集合。用于帮助解码文本、类型检查和对比对象...

2022-12-27 07:33:13 27

转载 【微前端】1545- 总结几种常见的微前端架构技术选型

背景随着SPA大规模的应用,紧接着就带来一个新问题:一个规模化应用需要拆分。一方面功能快速增加导致打包时间成比例上升,而紧急发布时要求是越短越好,这是矛盾的。另一方面当一个代码库集成了所有功能时,日常协作绝对是非常困难的。而且最近十多年,前端技术的发展是非常快的,每隔两年就是一个时代,导致同志们必须升级项目甚至于换一个框架。但如果大家想在一个规模化应用中一个版本做好这件事,基本上是不可能的。最早的...

2022-12-26 07:22:48 37

转载 【资讯】1574- Ant Design 5.0 正式发布!

一、前言Ant Design链接:https://github.com/ant-design/ant-designhttps://ant.design/components/overview-cn/今天Ant Design发布了V5版本,让我们来看看更新了哪些内容。新增组件新增组件变体设计变化新增导出对象 theme,用于获取主题相关属性ConfigProvider 新增 theme 属性,用于更...

2022-12-25 07:35:54 44

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除