Neo Developer

Appearance

Web 前端：Typescript ​

HTML 和 CSS ​

这两个非常基础，资料非常多

最基础的入门可以去看 RUNOOB

菜鸟教程 - 学的不仅是技术，更是梦想！
「菜鸟教程」提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。..
https://www.runoob.com/

标准文档建议去看 MDN

MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
https://developer.mozilla.org/zh-CN/

CSS 进阶推荐：

iCSS: 不止于 CSS

语言：typescript

建议先从 ECMAScript 开始

JavaScript vs ECMAScript ​

JavaScript教程
https://www.liaoxuefeng.com/wiki/1022910821149312
ES6 入门教程
《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
https://es6.ruanyifeng.com/

TypeScript ​

TypeScript 入门教程
与官方手册不同，本书着重于从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript，希望能给大家一些帮助和启示。
https://ts.xcatliu.com/
TypeScript 官网
官网手册适合查阅，建议先去看入门文章再来看官网手册
https://www.typescriptlang.org/

Nodejs 和 npm, yarn, pnpm ​

Node入门 » 一本全面的Node.js教程
本书最适合与我有相似技术背景的读者： 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验；对JavaScript处于初学阶段，并且完全是一个Node.js的新手。
https://www.nodebeginner.org/index-zh-cn.html
【译】一文看懂npm、yarn、pnpm之间的区别 - 掘金
本文作者对比了当前主流的包管理工具npm、yarn、pnpm之间的区别，并提出了合适的使用建议。
https://juejin.cn/post/6844903616109641736

深入了解这些包管理器

前端包管理器 - npm
本篇主要讲述npm的发展历史（历史渊源和各个版本的改动），组织node_modules方式的变动以及package.json的详细介绍（并发布一个自己的npm包）；除此之外，还会介绍node官方提出的现代包管理器愿景，并介绍corepack工具（包管理器的管理器）。
https://chlorinec.top/posts/npm/
前端包管理器 - yarn 与 PnP
yarn是一个Facebook出品的老牌包管理器，相对于npm要新一点，但相对于pnpm又要旧一点，也已经经过了多个大版本迭代。
https://chlorinec.top/posts/yarn-berry/
前端包管理器 - pnpm
pnpm（performant npm）是一个主打快速和省空间的包管理器。它使用改进的非扁平node_modules目录和硬链接和符号链接优化依赖管理过程，个人体验下来比起yarn-v2的PnP机制会遇到的兼容性问题更少，是我现阶段最喜欢的包管理器。
https://chlorinec.top/posts/pnpm/

选择框架 vue 或者 react ​

前端工程化：基于 Vue.js 3.0 的设计与实践
本书以 Vue.js 的 3.0 版本为核心技术栈，围绕 “前端工程化” 和 TypeScript 的知识点展开讲解
https://vue3.chengpeiquan.com/

Vue.js - The Progressive JavaScript Framework

React.js

工具链：Vite ​

Vite

测试框架：Vitest ​

Vitest

项目文档：VitePress ​

VitePress | Vite & Vue Powered Static Site Generator

自动部署：vercel ​

裸机手动部署一定要先学会。前端用 nginx

这些平台了解一个就行了

  • Vercel
  • Netlify
  • github page
  • cloudflare page

Vercel

Netlify

代码规范 ​

前端规范之JS代码规范（ESLint + Prettier）
代码规范是软件开发领域经久不衰的话题，几乎所有工程师在开发过程中都会遇到或思考过这一问题。而随着前端应用的大型化和复杂化，越来越多的前端团队也开始重视代码规范。
https://www.cnblogs.com/Yellow-ice/p/15127392.html
推荐几个大厂的前端代码规范
代码千万行，安全第一行；前端不规范，同事两行泪。
https://juejin.cn/post/6893891476913291278
Airbnb JavaScript 风格指南
https://lin-123.github.io/javascript/
Google 开源项目风格指南——中文版
https://zh-google-styleguide.readthedocs.io/en/stable/google-javascript-styleguide/javascript_style_rules.html
Prettier · Opinionated Code Formatter
https://prettier.io/

精彩的文章推荐 ​

[译]前端性能优化指标-累积布局偏移(CLS)
Cumulative Layout Shift (CLS)，翻译过来就是累积布局偏移。它是一个以用户为中心、用来衡量可视区域元素稳定性的重要标准，可以帮助我们定量计算出用户遇到意料之外的布局偏移的频率，CLS小可以确保我们的页面有一个良好的用户体验。
https://juejin.cn/post/6876621637614059533

「Life of a Pixel」 是一篇非常经典的演讲，出自由 Chromium 团队的 Steve Kobes。 最初是作为 Chromium 团队新成员的内部培训资料，旨在帮助新人从宏观上理解 Chromium 的渲染架构。

有很多中文的总结版，内容都差不多

Chromium 渲染流水线——字节码到像素的一生
本文将深入介绍 Chromium 内核组成结构，并以渲染流水线为主线，从接收字节码开始，按渲染流程来一步一步分析这个字节码究竟是如何转变成屏幕上的像素点的。
https://juejin.cn/post/7154953254399393806