logo头像

叩首问路,码梦为生

好文章推荐系列——前端

前端项目自动化部署——超详细教程(Jenkins、Github Actions)

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。

第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。
第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。

阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识,只要按照本教程的指引,就能够实现自动化部署项目。不过教程中所有的操作均在 windows 下运行,其他操作系统上可能会有一些区别。

从 VSCode 看大型 IDE 技术架构

主要回答了以下几个问题:

  • 大型复杂 GUI 软件(如 IDE 类)如何组织功能模块代码
  • 如何使用 Electron 技术将 Web 软件桌面化
  • 如何在打造插件化开放生态的同时保证软件整体质量与性能
  • 如何打造一款好用的、流行的工具软件

你所需要知道的代码整洁之道

每次 review 过往写的代码,总有一种不忍直视的感觉。想提高编码能力,故阅读了一些相关书籍及博文,并有所感悟,今将一些读书笔记及个人心得感悟梳理出来。抛转引玉,希望这砖能抛得起来。

宋代禅宗大师青原行思提出参禅的三重境界:

参禅之初,看山是山,看水是水;禅有悟时,看山不是山,看水不是水;禅中彻悟,看山仍是山,看水仍是水。

同理,编程同样存在境界:编程的一重境界是照葫芦画瓢,二重境界是可以灵活运用,三重境界则是心中无模式。唯有多实践,多感悟,方能突破一重又一重的境界。
最后,愿大家终将能写出自己不再讨厌的代码。

前端极致性能优化手册大全

非常详尽地从以下几个方面介绍了前端如何进行性能优化:

  • webpack
  • 图片
  • 缓存
  • 浏览器渲染
  • 服务器

Fast load times

这其实是一系列文章的集合,总结了一些前端性能优化相关的文章,包括:

  • Set performance budgets
  • Optimize your images
  • Lazy-load images and video
  • Optimize your JavaScript
  • Optimize your resource delivery
  • Optimize your CSS
  • Optimize your third-party resources
  • Optimize WebFonts
  • Optimize for network quality
  • Measure performance in the field
  • Build a performance culture

哪些技术会决定前端开发者的未来发展?

2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。作者在该文章里阐述了他认为的一些前端开发者需要关注的技术,仅供参考吧。

中文技术文档的写作规范

出自阮一峰,介绍了写中文技术文档(主要是 Markdown)时的规范,包括:标题、文本、段落、数值、标点符号、文档体系等方面

前端如何在项目中做出亮点

作者对前端在项目中如何做出亮点给出了自己的答案,作为程序员,我们很容易成为“搬砖仔”、“切图仔”、“页面仔”,但是其实如果我们再往前一步,就可以站得更高,走的更远

if 我是前端团队 Leader,怎么制定前端协作规范?

记录了作者在制定前端协作规范时的一些思考,万字长文全是干货。

现代 Web 开发的现状与未来(JSDC 2019 演讲全文)

本文是 “JS黑客,GUI大法师,WebApp工匠,虚拟世界建筑师,奇幻科幻PC游戏动漫宅”——Dexter.Yy 受邀在台北的 JSDC 2019 活动中做的一次分享,从内容上来说已经可以算的上他的 2019 跨年演讲,内容非常多且详尽,可以开阔视野,展望未来。下图是作者自我介绍的:

/images/hexo_post_535.jpg

从零做一个前端开源项目

该文已录制成免费的视频教程,想看视频的点击:https://www.imooc.com/learn/1003

目录:

  • 什么是开源?
  • 为何做开源?
  • 做什么?
  • 注册账号
  • 搭建开发环境
  • 提交代码
  • 创建官网
  • 如何宣传?
  • 持续迭代
  • 总结

从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

该文梳理了一个较为完整的前端向知识体系,内容超多

玉伯《从前端技术到体验科技(附演讲视频)》

我想,玉伯大神应该不用过多介绍了吧,从之前的 seajs 到现在的 ant design,而玉伯大神也从一名前端工程师“进化”为一名架构师,这篇文章是玉伯大神在 SEE Conf 大会上的演讲记录,同时文章末尾还有演讲视频链接,不喜欢看文字的朋友可以直接看演讲视频。

哔哩哔哩(B站)的前端之路

作者总结了 B站 的前端进阶之路,前端的轮子很多,作者介绍了 B站 是如何选型的以及遇到了哪些坑。

深入剖析 WebKit

这篇文章和他的题目一样,真的很“深入”,因为你可以看到滚轮滑动的速度。。不过图文并茂的表现形式并不会让你产生“看不下去”的感觉,来张目录感受一下是不是干货:

/images/hexo_post_286.png

前端文章- 收藏集 - 掘金

掘金上面关于前端的文章集合,闲暇时间看一下,可能会有意想不到的收获

前端工程——基础篇

fis 作者张玉龙对于前端工程的理解,从组件化到资源管理都阐述了自己的观点,这是一篇 2015 年的文章,但是文中的某些观念到现在看来仍然是字字珠玑,相信看完之后的你可以对前端有更深层次的理解。

大公司里怎样开发和部署前端代码?

又是张玉龙的文章,通过一个实际的场景一步步的告诉你大公司的前端代码是如何开发和部署上线的。

Web 前端知识体系精简

从前端三剑客:HTML、CSS、Javascript 的角度分析了前端的知识体系,涉及到的领域比较广泛,很适合前端新人开拓视野和寻找学习方向,同时总结的也很全面,是一篇不错的入门教材。

移动时代的前端加密

这篇文章篇幅很长,对于前端来说,很多人感觉“加密”是莫须有的一种东西,其实这是一种误解,“加密”并不意味着绝对安全,这篇文章将从这个角度向你阐述前端加密的正确姿势。

前端疲劳

有这么多不同的前端技术栈,不同的前端框架,不同的前端工具和库像水一样包裹着我,我不去学就不会,学了又学不完。在前端的海洋里越陷越深的我究竟该如何自救呢?这篇文章可能有你要的答案

精读前后端渲染之争

前后端渲染一直以来都是一个带有争议的话题,而该文章的作者对国外一篇关于前后端渲染的文章进行了精读,介绍了前后端渲染各自的优缺点,以及我们在实际项目中如何取舍。

技术雷达之「微前端」- 将微服务理念扩展到前端开发

看标题就知道,这是一篇基本上看不懂的文章,不过图文并茂的形式让这篇文章生动了很多,内容很充实,覆盖面很广

理解 Web 路由

关于路由,其实是一个很抽象的概念,而这篇文章对经常提到的前端路由和后端路由的实现和区别进行了很详细很清晰的讲解,同时对动态路由和严格路由也进行了介绍。

一站到底—前端基础之网络

这篇文章算是近几年来我读过的信息量最大、知识点最全的文章了,作者从访问一个网址说起,为读者建立了一个健全的网络知识体系,该文章解答了以下问题:

必会:

  • http 报文都有哪些内容?
  • HTTP 协议头含有哪些重要的部分,HTTP 状态码?
  • HTTP 状态码状态码都有哪些?
  • 什么是强缓存?什么是弱缓存?
  • 浏览器的现缓存机制是什么?如何设置 HTTP 缓存?
  • 你知道有哪些 HTTP 方法?POST 和 PUT 有什么区别?
  • 如何对数据进行压缩(ZLIB),Gzip? 压缩的范围是什么,请求头会压缩吗?
  • 跨域,为什么 JS 会对跨域做出限制?如何允许跨域?

基础:

  • 影响网速的原因有哪些?网络丢包的主要原因是什么?
  • 网络体系结构的五层参考模型都是什么?它们之间的关系是什么?
  • 我们常听到报文、段(分组)、数据报、帧、和数据包,它们有什么关系?
  • Ajax 能发送 http 请求,它和 http 有什么样的关系?
  • HTTP1.0 到 HTTP1.1 解决了什么问题?
  • http2 有什么特性?
  • http1.1 为什么会有队首阻塞?
  • SSL 与 TLS 关系?HTTPS 协议如何实现?

补课与拓展:(慢慢更新)

  • 常用的传输层协议有哪些?TCP 和 UDP 分别有什么特点?
  • 解释一下 TCP 的三次握手和四次挥手?
  • 为什么说 TCP 可能是网络通信的瓶颈?如何解决 TCP 队首阻塞?
  • 谷歌新出 QUIC 为什么要基于 UDP?
  • QUIC 有哪些新特性,解决了什么问题?

WEB 服务器探究

作者介绍了 web 服务器的基本概念,和常见的服务端演替路线。图文并茂的方式很容易理解,干货满满。

网站性能优化实战——从12.67s到1.06s的故事

作者将自己的在线简历进行了性能优化,首屏时间从 12.67s 降低到了 1.06s,这个过程中作者踩了很多坑,翻阅了很多书籍,最终总结出了这篇文章。文章涉及到的知识点比较全面,对性能优化进行了系统的介绍。

现代 Web 开发基础与工程实践

前端大牛@王下邀月熊的著作,对 Web 开发基础与工程实践的相关博客、示例代码与开源项目、整理成的系列书籍等内容进行了总结,信息量异常庞大,包含以下篇章:

  • 导论篇: Web 开发简史与运行机制,数据流驱动的界面,模块化与组件化,工具化与工程化,前后端分离与 GraphQL,大前端与 WebAssembly。
  • 基础篇: 对于 HTML、CSS、DOM 等 Web 开发中涉及的基础知识与理念的总结介绍。
  • 工程实践篇: 构建工具,测试,安全,WebAssembly。
  • 架构优化篇: 组件化,状态管理,性能优化,PWA。
  • React 篇:近年来前端领域百花齐放,各种技术方案争妍斗艳,各领风骚。本书立足于其中的佼佼者 React,深入浅出的介绍 React、Webpack 、 ES6、Redux 、 MobX 等常见前端开发工具与开发库的用法,帮助初学者能够迅速成为一名合格前端工程师。而本书也不仅局限于工具使用的层面,探寻各种技术方案背后蕴含的设计思想与架构模式,从前端工程化的角度讨论前端开发者在进阶过程中需要掌握的工程实践、模块化与组件化、质量保障、性能优化等知识要点。最终帮助开发者在前端开发中能够因地制宜的指定合理方案,以尽可能快的速度实现可信赖的产品。
  • Vue 篇:本部分目前正逐步启动,笔者的初衷是希望能够保证本书章节与 React 与前端工程化实践尽可能一致,从而更方便地去介绍不同技术栈下相通的设计理念;目前本书的目录只是拷贝自 React 与前端工程化实践,未来笔者会逐步完善。

雅虎前端优化35条规则翻译

本文是大名鼎鼎的雅虎前端优化规则(Yslow)的翻译。作者对其中的一些例子进行了精简。

前端知识体系目录

从基础到进阶,从 HTML、CSS、JS 到 HTTP,简单的总结了前端领域需要了解的知识点,同时推荐了一些书籍,对于那些想要入坑前端的童鞋来说是一份不错的指引文档。

微前端的那些事儿

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行独立开发独立部署

这篇文章是 phodal 对于微前端的解读,包括其实现方式以及方案对比,而微服务与前端的结合会有多大的优势,值得期待。

2018 前端常见题汇总

汇总了前端一些问题,作者不定时更新,建议收藏

  1. HTML 相关
  2. CSS 相关
  3. JAVASCRIPT 相关
  4. DOM 相关
  5. HTTP 相关
  6. VUE 相关
  7. 算法相关
  8. 网络安全相关
  9. webpack 相关
  10. 其他

InfoQ 趋势报告之 JavaScript 和 Web 开发

文章简单介绍了 Javascript 生态系统的现状和发展历程,文中提到了很多名词和框架,是一篇很不错的“扫盲”文章。

2019 - Web开发技术指南和趋势

这是一个 2019 年你成为前端,后端或全栈开发者的进阶指南:

  1. 你不需要学习所有的技术成为一个 web 开发者
  2. 这个指南只是通过简单分类列出了技术选项
  3. 我将从我的经验和参考中给出建议
  4. 首选我们会介绍通用的知识, 最后介绍 2019 年的 Web 的一些趋势

要想知道更多细节, 请看 Youtube 视频: Web Development in 2019

前端模块化详解(完整版)

这篇文章内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范,并且介绍下开发中最流行的 CommonJS, AMD, ES6、CMD 规范。作者试图站在小白的角度,用通俗易懂的笔调介绍这些枯燥无味的概念,希望屏幕前的你阅读后,对模块化编程有个全新的认识和理解!

2018 前端性能优化清单

英文原文:https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/,文章较长,需要比较长的时间才能读完,涉及到的地方非常全面,五星推荐。

列一份前端知识架构图

计算机之子“Winter”列的一份前端知识框架图

茴字的四种写法—移动适配方案的进化

这是一篇一站式的文章,可以系统的了解前端适配的演进。

现代前端开发路线图:从零开始,一步步成为前端工程师

很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到类似的问题,全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图,并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。

而这篇文章的目的就是依次解释路线图的每一个步骤,对于前端初学者来说具有指引作用。

支付宝打赏 微信打赏

听说赞过就能年薪百万