跳到主要内容位置

前端32

查看所有标签(分类)

使用 HTML 原生 kbd 标签显示快捷键样式

峰华

在编写技术文档的时候,我们经常会给用户展示一些常用的快捷键,那么在 HTML 中,我们可以使用原生的 <kbd> 标签来表示一个按键,它也是 HTML 语义化的标签之一,相比于使用 <div> 等通用的、无意义的标签,使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd

<kbd> 是一个行内元素,跟 span 类似,每个按键都放到一个单独的 <kbd> 标签即可,例如下方示例:

如何在 Vite 2.0 项目中导入环境变量

峰华

环境变量是在开发中,用于设置可配置的信息。例如在前端开发中,我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量,这篇文章我们来看一下如何在 Vite 2.0 创建的项目中,创建和导入环境变量。

Vite 2.0 创建的项目中,默认有下面 4 个默认的环境变量:

配置 Vite 2.0 项目启动后自动打开浏览器

峰华

使用 Vite 2.0 创建的项目,默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器:

npm run dev

命令行中会提示访问 http://localhost:3000 这个链接,但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开,或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目,在启动之后自动打开浏览器呢?

CSS 如何隐藏滚动条,但不影响内容滚动

峰华

使用 CSS 隐藏滚动条,如果直接使用 overflow: hidden 会导致内容不能滚动,要想使用 css 隐藏滚动条,但不影响内容滚动,这里有两种方法:

  • 使用 padding 把滚动条移出浏览器视口。
  • 使用 ::webkit-scrollbar 伪元素选择器(简单,但兼容性不好)。

下面分别来看一下这两种方法。

前端组件化开发的 7 条经验总结

峰华

自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史

在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』这个概念,更不用提组件化了。当时,网页只是作为可以在浏览器中浏览的富文本文件,开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言,网页中的代码没有办法复用,即使是类似的页面,都需要复制粘贴大量的重复代码:

Vite 配置代理 Proxy,避免跨域和重复编写url的问题

峰华

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如 https://example.com/api/some_end_pointhttps://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。 ​

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。

Nginx 教程:如何在 Ubuntu 20.04 下安装并配置 Nginx

峰华

我们前端工程师在开发完前端项目,并把它打包成静态的网站之后,需要上传到服务器上,才能让互联网上感兴趣的用户来访问。我们之前在阿里云购买了一台远程服务器,它现在还不能用来让用户访问网站,因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的,那就需要在服务器里面安装一个服务器程序,来处理 HTTP 请求,并把我们的静态网站发送到用户的浏览器上。 常见的服务器程序有:

  • Nginx。
  • Apache。
  • Tomcat。
  • IIS。等等

如何购买阿里云服务器搭建个人网站

峰华

阿里云

在做完网站之后,我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑,在它上面安装服务器程序后,可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有:

  • 阿里云。
  • 腾讯云。
  • 华为云等。

它们的服务基本上都差不多,这里就以阿里云为例来看一下,如何购买一台适合自己的服务器。 选择服务器最重要的是 CPU、内存和带宽,需要根据网站的用户量、所占的空间(例如图片、数据的大小)来选择对应的配置。

  • 如果性能太差,就无法应对大量用户的访问,比如说 1000 人同时访问。
  • 如果带宽比较小,对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的,那么可以选择一个比较基础的配置,这样也比较便宜。

如何配置 Babel 来体验最新 JavaScript 特性

峰华

因为各个浏览器厂商对 JavaScript 规范的实现并不统一,这让开发者在日常开发中经常遇到兼容性的挑战,一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用,这样还需要针对各个浏览器编写不同的代码,才能让代码能够兼容。

后来,一些工具出现了,它们可以让我们编写有最新特性的 JavaScript 代码,然后把代码转换为各个浏览器都支持的版本,这种工具叫作转译器(Transpiler)。Babel 就是其中一个且比较著名,几乎每个前端框架中都使用到了,它可以把包含新特性的代码转换为 ES2015 版本,或者其它指定的版本来实现最大兼容性。

Web性能优化:使用图片懒加载推迟屏幕外图片的加载

峰华

在使用 chrome 的 lighthouse 对网站进行测速之后,发现有一条优化提示:推迟屏幕外的图片加载。之前有看到过要实现这样的效果需要使用 lazy loading,图片懒加载,但是需要使用 js 的方式来实现,由于本人十分懒惰,不想用太复杂的代码,于是在网上搜索了一番,发现 <img>  标签原生支持懒加载。

为什么要懒加载

浏览器在加载图片的时候本身是 async 异步的,不会阻塞浏览器的加载进程,但是屏幕外的图片加载仍然会消耗带宽,这样在带宽有限的情况下,会影响重要组件的加载,例如 CSS、JavaScript 等,进而拖慢页面的加载。

实现前端网页 WebRTC 视频通话以及换脸特效

峰华

因为疫情的原因,线上视频会议软件异军突起,成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来,那我就想了想能不能在视频会议的时候换张脸活跃下气氛?在 Github 上一番搜寻之后发现还真有办法,有一个开源的 Python 人工智能换脸的库,那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能,外加换脸操作。先看一下效果吧:

Web 性能优化:使用 CSS font-display 控制字体加载和替换

峰华

在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts 加载时,使用该字体的地方会显示空白,直到字体下载完成之后才会显示,这时通过改变 CSS 中的 font-display 属性,就可以避免这个问题。

JavaScript 游戏开发 - 物理碰撞引擎实现

峰华

年前我看到合成大西瓜小游戏火了,想到之前从来没有研究过游戏方面的开发,这次就想趁着这个机会看看 JavaScript 游戏开发,从原生角度上如何实现游戏里的物理特性,例如运动、碰撞。虽然之前研究过物理相关的动画库,但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎,实现小球的碰撞效果。

为什么不用现成的游戏库呢?因为我觉得在了解底层的实现原理之后,才能更有效的理解框架上的概念和使用方法,在解决 BUG 的时候能够更有效率,同时对自己的编码技能也是一种提升。在对 JavaScript 物理引擎的研究过程中,发现写代码是次要的,最主要的是理解相关的物理、数学公式和概念,虽然我是理科生,但是数学和物理从来不是我的强项,我不是把知识还给老师了,而是压根就没掌握过 ^o^。过年期间花了有小半个月的时间在学习物理知识,现在仍然对某些概念和推导过程没有太大的自信,不过最后还算是做出了一个简单的、比较满意的结果,见下图。

从 0 仿微信 8.0 动态表情实现过程

峰华

微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神,我就想看看能不能实现一个类似的特效。折腾许久之后,做出来的效果如下:

整理了5个JavaScript怪异行为及其原因

峰华

如果你用 JavaScript 写过项目或者参加过面试,那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一,也没有严格的标准,再加上它的语法灵活多样,有些看起来就不正确的代码却能正常执行,一些看起来符合逻辑的代码,运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG,更重要的是,很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题,以及它们出现的原因和解决方法。

鸿蒙 OS:使用 JavaScript 开发 Todo App UI 界面

峰华

距离鸿蒙 OS 2.0 发布已经过去一些日子了,看到鸿蒙系统强大的设备共享能力,我觉得未来它一定能够成为主流的操作系统。在利用了分布式系统的优势之后,多个设备间可以共享应用程序界面和数据,并且对于开发者,也可以使用一套代码编写应用,就可以在多种设备终端上运行。

一开始我并没有太关注鸿蒙系统,以为它只能使用 Java 开发应用,跟前端好像没啥关系,但是看了开发文档后,发现 UI 部分既支持纯 JavaScript 开发,也支持纯 Java 开发,还可以 Java 跟 JavaScript 混合开发。鸿蒙应用的开发跟 Android 的开发很像,只是把概念重新定义了一下。它分为 FA(Feature Ability)和 PA(Particle Ability)两种应用模式,FA 是带有用户界面的,PA 则是运行在后台的服务程序,可以想象成安卓里的 Activity 和 Service,不过也略有不同。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java,则跟 Android 一样,使用 xml 定义布局或者 Java 代码定义布局,每个页面都是一个 PageAbility,使用 Java 编写业务代码,不同的页面之间传递数据依然使用 intent。而这里如果使用 JavaScript UI 框架的话,那么写法跟 Vue 应用基本一模一样,同样支持 data、props、computed、watch 和 functions(methods),也能创建自定义的组件,这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师,不得不说华为在已有概念上做的整合,还是相当厉害的。

职业规划:程序员的 T 字形发展攻略

峰华

你是不是在面对市面上众多的技术的时候,不知道选择哪个才能对自己的职业和未来发展有所帮助?有这样的想法是正常的,因为随着科学的发展,现在的编程技术已经到了百花齐放的地步了。

  • 从编程语言上,你可以选择 Java、JavaScript、Go、PHP,还有基于它们的框架等等。
  • 从客户端上,可以选择移动端,web 端,还有后端等等。
  • 从行业领域上,还可以选择数据科学、金融工程或商业智能分析等等。

那么这么多的技术和领域,我们到底应该选哪一个才比较好呢?

前端工程师到底要学到什么程序才能去找工作?成功面试的必备要素与回答技巧

峰华

好多人都想知道,前端工程师到底要需要掌握什么技能、到什么程度,才能去找工作?最简单的答案:

把 html、css、 js 基础学扎实,再掌握 vue 或 react 前端框架之一就可以了。

真的是这样吗?技术上看似乎没问题,但是找工作不只要从技术上下手,还要从个人目标和公司的招人标准综合进行考量。那么接下来,我们从这几个方面来分析一下,前端工程师找工作的必要条件,然后给大家分享一套有逻辑、有结构的面试回答技巧。

噢!原来这就是 TypeScript

峰华

我第一次使用 TypeScript 是 16 年在读研的时候,学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言,没想到还能这么通用。后来在写作业的时候,发现 TypeScript 也并不是特别难,只不过是给 JavaScript 加上了类型信息,让代码不那么容易出错,并且支持高级的面向对象编程范式,让 JavaScript 变得跟 Java/c# 差不多。接下来,这篇文章就给你揭开 TypeScript 的面纱,对它来一个宏观上的认识,然后介绍一下如何编写并运行 TypeScript 程序,如何定义类型,另外假设你有 JavaScript 基础。

给前端工程师看的后端科普

峰华

前端工程师了解后端的功能和作用之后,能更好的和后端工程师进行沟通,减少沟通成本,另外也有助于向全栈工程师方向发展。在开始之前,先回顾一下应用的构成:

前后端通信之 HTTP 协议简介

峰华

前后端数据的交换一般是基于 HTTP 协议。HTTP 协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端。在 HTTP 中,数据称为资源,可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。

5个技巧助你成为 CSS 大神

峰华

作为一名前端工程师,经常在写完 HTML 以后,才觉得真正的噩梦要开始了,啊,写 CSS 的时候,面对满屏乱飞的组件,真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握,最愁给页面编写样式,其实都是因为还没有形成一个对 CSS 宏观的了解,只要有了正确的学习方法、设计思维,再通过不断的积累,就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下,让你在以后编写 CSS 的时候不再发愁。

CSS Flexbox 布局最容易理解完全教程

峰华

在 CSS flexbox 布局出现以前,如果要控制 HTML 元素的布局,要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐,稍一不注意,就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了:要么手动计算高度然后算出中心点,要么用 line-heightheight 的结合,要么用十之八九不生效的 vertical-align 属性等等等等。自从 flex-box 出现以后,一切似乎就豁然开朗了,水平垂直各种花式对齐,空间分配由你做主。当然,要用好它,用对它也不是一件容易的事,今天就给你说说 flex-box 布局,看完之后你也能熟练的运用它!(博客中的示例都是真实的 HTML 代码,可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例,在小屏幕下会有横向滚动条)

CSS 选择器优先级特异性权重详解

峰华

在写 CSS 的时候你一定遇到过有些样式明明写对了,也选择了正确的 html 元素去应用这些样式,可是就是不生效,这是为什么呢?因为在选择同一个 HTML 元素的时候,不同的选择器有不同的优先级,优先级低的选择器的样式会被优先级高的覆盖。

React State 和 Event教程 - 制作渐变背景生成器

峰华

Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state,状态管理,还有事件处理。这个小工具提供了两个颜色选择器,分别可以选择渐变的两个颜色,渐变的角度是 75 度,线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。

React Props 教程 - 制作一个按钮

峰华

你在写 HTML 页面的时候肯定知道,html 标签的属性都是固定的,比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的,不方便扩展和复用。而用 React 创建组件的话,可以给它定义一些更符合语义和逻辑的属性,比如颜色、尺寸等。

什么是 React?你为什么应该学React?

峰华

Hello! 今天来带你走进 React 的大门!我第一次听说 React 是我在美国读研的时候,室友选了 web programming 这节课,然后遇到了关于 react 的好多问题,就是总也配置不好。我看他那个时候 React 的配置特别麻烦,要引入一堆依赖,像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业,问了我一个问题,大概是有一个组件显示不出来,结果看了半天我也不知道是怎么回事啊,因为我也没学过。后来他自己研究出来了,是因为这个组件在使用的时候没有大写。

使用 Docusaurus 搭建个人博客教程(二)

峰华

如果你看了上期视频的话,那么你应该学会了怎么在本地搭建一个 docusaurus 博客,但是你不能只在本地来看这个博客吧,得让全世界来欣赏你的杰作,所以说咱们得把这个博客部署到服务器上。部署有两种方式:

  • 部署到国外,是免费的。
  • 部署在国内,需要自己购买一个域名,还有服务器,大概有个 300 来块钱就差不多了。

使用 Docusaurus 搭建个人博客教程(一)

峰华

我以前总也找不到一个满意的博客系统,wordpress 这个程序又大,然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台,后来发现了一些静态的网站生成器,像 hexo 这种,但是发现上面的主题又不好看,又懒得自己去写。后来就有一阵子我就直接把博客就发布在了其他的第三方的博客平台上。现在发现了这个 docusaurus, 它的主题跟我之前看到的一个大佬 Dan Abramov,它的 overreacted.io 博客,风格是一模一样的,因为他是 react 的作者之一,估计这个他们这个样式都是互相借鉴,它这个主题可以切换暗黑和白天模式,比较好看。安装和部署也特别简单,我的博客也是用它这个搭建的。

程序员如何提升英语水平

峰华

本篇文章适合所有想提升英语尤其是阅读能力的人,因为我自己程序员,所以我来拿自己的亲身经历来帮助大家发现自己提高英语技能的方法。

一点历史

先说在中学时,虽然一开始我对英语很有兴趣,而且也考过几次高分,但是到了后来就慢慢的不喜欢学习了,高考的时候英语正好卡在 90 分的及格线上,然后高考分数只够上了一个专科,开始了程序员之路。

动机

其实我学英语的动机并不是因为技术文档都是英文的,那时候还只知道阅读别人翻译好的中文文档,有错误和疏漏有时候都不知道。当时工作的时候,我突然决定读一个专升本,于是报考了北大的网络教育学院,然后顺利入学了。第二学期,我们都需要考学士学位英语俗称英语三级,才能拿到学位证,满分 100 分拿到 60 分及格才过关,这个到毕业前每学期都可以考一次。我第一参加考试时是裸考,以为比四级会简单些,谁知多年不用的英语水平早就下降了,结果只考了 56 分。我就看着这差 4 分的成绩到干瞪眼!为嘛老天爷对我这么不公平,差这么一点点(可能比 59 好点吧)。然后就突然激发起了我的斗志,我要努力学英语!

11个前端工程师必备的网站

峰华

好多小伙伴有疑问,就是说有哪些值得去关注的前端网站,我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站,把咱们的这个知识给误导了。这里呢我准备了几个我经常关注的一些网站,一部分是国外的,然后有一部分是国内的,因为国内的好多的都是质量参差不齐,但国外的话普遍的质量比较高(事实如此)。不过呢,咱们国内的也有一些比较好的平台,我在这里给咱们一共准备了 11 个可以关注的网站。

2021年最新前端工程师学习路线

峰华

[文章更新于 2021年07月01日]

距离首次发表这篇文章,已经过去一年半左右的时间了,但是前端总体的学习路径和发展趋势没有太大的变化,有一点需要注意的是,有关智慧园区的项目有增多的趋势,对于 Web 3D 建模类的技术可能会趋向热门,例如 WebGL 和 Three.js 等,设计师也可能需要接触 Blender 这个 3D 建模工具。

这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线,我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始,然后一路升级到高级工程师该掌握的技能,层层相扣,让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。

caution

注意:这篇文章中有推广链接,对你的阅读体验并没有影响,不过如果你通过链接购买了商品,那么会帮助 UP 主恰饭,以支持 UP 创作更多优质的内容。谢谢支持🍙!

俗话说知己知彼百战不殆,要成为一名前端大神,首先知道它是做什么的。单纯从工作角度看,无非就是写写前端样式,连接下后台 api,解析解析数据,然后显示给用户,核心逻辑是这样没错,只是这中间掺杂着无数个边边角角的问题,比如框架选择、性能优化、兼容性调整、工程化等等。不过呢,这些并不需要一次性掌握,随着一次一次完成工作任务,解决 bug,这些自然而然就学会了~

在正式开始之前,咱们先把心态放平,就像玩游戏,游戏满级也不是一天两天的事,满级之后也才是一个新的开始。。。无尽的追求完美~。时间上,掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间(看自己的意志力和上进心),之后就是在工作实践中不断的提升自己,时刻关注业界新闻,保持在科技的最前沿。工作是一个长期的事情,咱们静下心来慢慢学。