跳到主要内容位置

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

张旭乾

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

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

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

张旭乾

阿里云

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

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

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

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

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

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

张旭乾

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

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

2021 年学前端还有前途吗?

张旭乾

‌有好多同学问我‌‌‌‌现在学前端还有没有前途?‌‌那么‌‌我就借着现在前端的发展趋势‌‌,和前端到底是个什么样的一个概念,来给‌‌大家分析一下,学前端到底有没有前途。

img

Photo by Tara Winstead from Pexels

什么是前端?

先定义一下,到底什么是前端。从广义的角度上讲,‌‌只要是我们人眼‌‌能看得见的、能够进行人机交互的‌‌界面‌‌,都属于前端的范畴,例如:APP‌‌、网站、小程序‌‌等等‌‌,甚至是智能硬件上面的‌‌显示屏‌‌(例如电视‌‌)。从这个角度上来讲,‌‌只要‌‌有人机交互的需求,‌‌那么前端‌‌开发永远都会有用武之地,我想你应该也清楚,人机交互在科技这么发达的现代社会里,不太可能消失,或者短时间里不太可能消失。

在了解这个概念后这些之后,‌‌你现在认为学前端到底有没有前途呢?‌‌

学前端到底有没有前途?

如何快速学会一门编程语言

张旭乾

面对越来越激烈的内卷,程序员需要掌握的技能越来越多,并且对于快速掌握一门编程语言的能力也日趋重要,因为现在的开发基本都是多端、各种语言都会使用,能快速的转换,才能在编程界里立足。

那么,如何才能快速学会一门编程语言?

注意

方法仅限于有其它编程语言基础。

  1. 过一下基础语法结构:变量、数据类型、运算符、循环、分支、数组、函数、类/结构、常用数据结构等。(1 - 2 天)
  2. 学习特有的语法:异常处理、泛型、注解、多线程、生命周期、指针、模块化、依赖管理等。(7 - 14 天)
  3. 熟悉常用 API:字符串操作、集合操作、文件和流操作、网络操作、代码测试等。(7 - 14天)
  4. 根据开发方向,入门一种框架:命令行类、Web 类、桌面类、APP 类、绘图类、机器学习类等。(7 - 14 天)

之后就是:持续的学习、实践、深入。(长期)

CSS :is() 伪类选择器使用指南

张旭乾

在使用 CSS 编写页面样式的时候,你是不是写过类似的代码:

li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}

为了给一篇文章中,不同位置的超链接设置不同的颜色,需要在多个选择器中,重复的选择 a  元素,如果是其它名字比较长的元素或者 class,那么写起来会特别麻烦,稍加不注意就会写错。

面试没通过,又一次,我好菜呀...

张旭乾

面试

是不是每次面试没通过都会有这样的感觉?作为一名程序员,每次面试的时候都觉得准备不充分,面试资料多的看不完,实战经验也不够,即使自认为准备的很充分了,最后还是栽了,到底是因为自己菜,还是自己菜,还是自己菜呢?要回答这个问题,我们得先知道面试到底在面什么。

面试在面什么?

我们好多小伙伴总觉得面试就跟高考一样,有着严格的评分标准和分数线,谁的分高谁就能进去,但事实上,面试是通过交谈来互相了解对方的一种形式,更多的时候是考验的一个人的沟通能力,如果你能让面试官感觉聊的很投机,那么会有相当大的概率通过面试。 对于技术方面,不同的公司有不同的侧重点,大厂看重原理和算法,其它公司看中技术的熟悉程度,也就是项目经验。技术方面的问题是最棘手的,你可能认为面试通过的人,技术一定很牛,这个我以身边进谷歌、Facebook、亚马逊等国外大厂的朋友的经验证明,这是绝对错误的。技术关是最没有技术含量的考验。通常,公司并不知道一个面试者的技术水平,所以才会通过笔试和前几轮的面试进行考察,考察的问题基本都是类似的、可以举一反三的、是能专门进行准备的。简而言之,就是谁下功夫准备面试了,谁通过的概率就大很多,例如一个刷了 leetcode 500 道题 3 遍的,一定比刷了 300 道题 1 遍的通过率高。

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 属性,就可以避免这个问题。