聊聊《重学前端》

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了,而且在微信群和知乎上都有相关讨论。讨论中各种声音都有,可算是热闹了。今天我也凑个热闹,来聊聊我对这个课程的看法。

先来看个大纲

整个系列包含三个部分,即构建Web应用程序或页面要用的最基本的三部分:HTMLCSSJavaScript

HTML部分

  1. HTML语义:只用divspan是不是就够了?

  2. HTML语义:一篇wiki文章究竟会用到哪些语义元素?

  3. 文档元信息:你知道head里一共能写哪几种标签吗?

  4. 链接:除了a标签,还有标签叫链接?

  5. 嵌入型元素:怎么link一个CSS要用href,而引入JS要用src呢?

  6. HTML标签:标签总结

  7. HTML语言:dtd到底是什么?

  8. ARIA:可访问性不止是给盲人用户的特性

初看了一下提纲中的八个部分。细思了一下,原本自以为相对了解HTML的我,有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。

HTML语义化

早期的前端开发者都会比较在意和注重这方面。随着时代的迁移,其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到div这样的标签元素。但事实上,像divspan这样的标签元素是没有任何语义化的,他们仅仅是只被运用于布局上。而且在任何浏览器中,都无法使用键盘让其获得焦点,另外也可访问性API也无法进行任何通信。事实上,构建一个具有语义化的页面或应用程序,我们除了使用具有语义化的HTML标签之外,还需要在结构做一些考量,比如说,headerfootermainasideemstrong标签,应该放在什么位置,应该在什么地方使用它们。

在我的认知里,一个具有语义化的页面是要经得起HTML标记验证服务的验证。另外还有一种更土的方式,那就是当你的Web页面在CSS裸奔的时候,结构清晰,而且不会影响用户对网站的浏览。更为高层次的呢?

写出来的HTML结构要让机器可以读懂,也要能让人可以读懂!

有关于HTML语义化相关的讨论也较多,其中 @E0 大大在知乎上的回答就很详细。有关于其他的讨论和文章,要是感兴趣的话,可以阅读下面的几篇文章:

  • The practical value of semantic HTML

  • Semantics in HTML 5

  • semantic html

  • Semantic HTML

  • Accessibility Through Semantic HTML

  • Let’s Talk about Semantics

<head>能放些什么标签

<head>标签是所有文档元素的容器,它包含了文档的全部信息。常见的信息主要包括:<meta><title><base><style><link><script><noscript>等标签。而其中<meta>的信息量是最大的。比如:

<meta charset="UTF-8"> <meta http-equiv="refresh" content="5;url=" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="150 words" /> <meta name="keywords" content="your tags" /> <meta name="robots" content="index,follow" /> <meta name="author" content="author name" /> <meta name="google" content="index,follow" /> <meta name="googlebot" content="index,follow" /> <meta name="verify" content="index,follow" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><meta name="apple-mobile-web-app-title" content="标题"> <meta content="telephone=no" name="format-detection" /><meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="320"><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><meta name="msapplication-tap-highlight" content="no">

有关于meta标签更详细的介绍可以阅读:

  • Meta 标签与搜索引擎优化

  • meta 标签大全

  • HTML Meta标签知多少

  • HTML Tags for SEO: to use or not to use?

  • Complete list of html meta tags/

链接:除了a标签,还有标签叫链接?

这个话题我比较期待。在HTML中除了<a>标签,还有什么标签叫链接?在我的印象中,<area>标签有点类似于<a>标签,可以做链接跳转。但是不是这个答案,我将期待着。

怎么link一个CSS要用href,而引入JS要用src呢?

这个问题真没有细想过。前段时间刚好在哪翻到过这方面的讨论,可以找不到答案了。不过在stackoverflow网站上也有一个类似的问题。看了一个点赞较高的答案:

简单点说,使用src表达的是该无事的内容可以被替换,比如imgscriptiframe元素;href表达的是超链接,与引用文档或外部资源建立关系,比如alink等元素。

其他

另外几条,相对而言接触的比较多。特别是ARIA相关的方面。有关于ARIA相关的东西,在24 Accessibility网站有很多话题。另外在Web内容无障碍指南 2.0是ARIA方面最新的规范指南。

CSS部分

  1. 媒体、分页、视口:除了属性和选择器,你还要知道这些带@的规则

  2. 选择器:为什么只有子元素选择器,没有父元素选择器

  3. 布局正常流:其实从毕升开始,你们就在用正常流

  4. 布局弹性盒:垂直居中为什么这么难?

  5. 文本:baseline到底是啥东西?

  6. 颜色与形状:CSS是如何绘制颜色与形状的?

  7. 动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?

  8. CSS属性:CSS总结

对于CSS部分而言,自己相对接触的比较多一点,如果要把CSS方面的东西讲全,那足可以讲好久,甚至花一本书的章节来介绍,都不一定难阐述的完。简单的列了一个大纲,差不多有26章节的内容可聊。自己也在根据这个大纲完善内容。相比之下,我在完善的内容是怎么使用CSS,而@winter大大在聊的是为什么?比如其中:

  • 选择器:为什么只有子元素选择器,没有父元素选择器

  • 布局弹性盒:垂直居中为什么这么难?

  • 文本:baseline到底是啥东西?

  • 颜色与形状:CSS是如何绘制颜色与形状的?

  • 动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?

上述几个问题?好几个都不知道是为什么?正好跟着大大的思路学习一下,大神是如何深入理解这些。这将为我以后深入学习CSS将会有很大的帮助。对于贝塞尔曲线和颜色,向大家推荐一篇文章,介绍的非常详细:

  • Bezier Curves from the Ground Up

  • Color: From Hexcodes to Eyeballs

JavaScript

  1. 类型:关于类型,有哪些你忽视的细节

  2. 对象:JavaScript是面向对象还是基于对象

  3. 对象:JavaScript中,我们真的需要模拟类吗

  4. 函数:this有什么用?应该怎么用?

  5. 函数:JavaScript里的闭包到底要怎么用?适合用在哪里?

  6. 事件循环与微任务:Promise里的代码为什么比setTimeout先执行

  7. 语句:try里面放returnfinally还会执行吗

  8. 语句:为什么1.toString会报错

  9. 运算符与表达式:新加入的**运算符,好像有哪里不一样

  10. 语句,程序与表达式:在script标签里写export为什么会抛错

  11. 分号自动补全:到底要不要写分号呢

对于JavaScript部分,一直是我的弱项,今年立个flag,希望能跟着把这方面的知识增强一些。

浏览器实现原与API

很早温大就跟我说,要好好把浏览器的原理方面的知识理解透,这将有益学习和理解一些深层次的东西。但一直以来没有进展。这次专栏中提到了:

  • 浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(上)

  • 浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(中)

  • 浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(下)

  • DOM:如何用JS操作文档

  • CSSOM:如何获取一个元素的准确位置

  • 事件:捕获模型和冒泡模型到底是怎么来的

  • 其它一些API:API总集合

有关于浏览器原理相关的文章,在互联网上也相当的多,其中有几篇文章我觉得还是不错的,值得推荐给大家:

  • 浏览器的渲染原理简介

  • 图解浏览器的工作原理

  • 浏览器的工作原理:新式网络浏览器幕后揭秘

要Google开发者网站上,2018年@Mariko Kosaka也推出了四篇文章,深入的介绍了浏览器的工作原理:

  • Inside look at modern web browser (part 1)【译文】

  • Inside look at modern web browser (part 2)【译文】

  • Inside look at modern web browser (part 3)【译文】

  • Inside look at modern web browser (part 4)

对于DOM和CSSOM,在18年还是花了不少时间在学习,其中还是有不少的收获,但我想听完这个课之后,再回过头来对比之前学习的笔记,我想也会有较大的收获吧。

前端综合应用

  1. 性能:前端性能到底对业务数据有多大的影响

  2. 工具链:什么样的工具链才能提升团队效率

  3. 持续集成:几十个前端一起工作,怎么保证基本质量

  4. 搭建系统:大量的低价值需求如何应付

  5. 架构与基础库: 如何设计基础库

这是专栏的第四部分,我也很感兴趣。期待专栏也早点出来,估计很多同学都对这一部分很感兴趣的吧。有关于性能方面的,我也推荐几篇文章:

  • Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

  • 前端性能优化の备忘录(2018版)

  • 前端性能优化の备忘录(2017版)

最后说一点

不少同学在说:

购买,这个课程是在交智商税

就此问题,@winter也针对性的做了阐述。感兴趣的可以点击这里。我只想说,智者见知,仁者见仁

也有不少同学在说:

这个专栏的内容太简单了。

对而我言,虽然”很基础“,但我还有很多都不知道,特别是其中的为什么?就拿我擅长的CSS来说吧,大纲中的八个,我就有一大半不知道为什么?这就是与大神的差距。

另外,我记得前段时间在Hacker News上提出这样的一个问题”Stop Learning Frameworks“。平时也有同学问我,应该不应该去学习JS框架。其实就我个人而言,我更强调先把基础学好,如果工作是要用到框架,可以边学边用,但对于基础还是要扎实一点。

不扯了,如果大家觉得这个课程不错,可以入手:

640?wx_fmt=png


展开阅读全文

没有更多推荐了,返回首页