前端：文化历史

work/front-end-engineer/文化/历史发展.md

@@ -0,0 +1,48 @@
+---
+title: 历史发展
+description: 前端开发历史发展
+keywords:
+  - 前端开发
+  - 历史发展
+tags:
+  - HTML5
+sidebar_position: 2
+author: 7Wate
+date: 2023-10-16
+---
+
+前端开发已经经历了长达几十年的发展历程，从最初的静态网页到现在的复杂的 Web 交互应用，前端开发的技术和工具都发生了巨大的变化。下面是前端开发的一些主要发展阶段：
+
+## 1990年代：静态网页时代
+
+在 1990 年，Tim Berners-Lee 发明了万维网，也就标志着网页的诞生。在这个阶段，网页主要由纯文本构成，使用 HTML（HyperText Markup Language）进行标记。这些网页被称为静态网页，因为它们的内容在服务器端生成，用户端不能交互和修改。
+
+## 1995年：JavaScript 的诞生
+
+1995 年，JavaScript 语言在 Netscape 浏览器上首次亮相，由 Brendan Eich 发明。最初，JavaScript 被用作一种客户端的脚本语言，用于实现网页上的简单交互效果，如表单验证等。
+
+## 1996年： CSS 的诞生
+
+1996 年，W3C（万维网联盟）发布了 CSS（Cascading Style Sheets）的第一版规范，标志着样式表的诞生。CSS 的出现使得开发者可以更加方便地控制网页的样式和布局。
+
+## 2000年代初：动态网页和 AJAX
+
+2000 年代初，随着 JavaScript 和服务端技术的发展，网页开始从静态向动态转变。AJAX（Asynchronous JavaScript and XML）技术的出现，使得网页可以在不刷新页面的情况下与服务器进行交互，极大地提高了用户体验。
+
+## 2006年：jQuery 的出现
+
+2006年，jQuery 库发布，提供了一种简洁易用的 API 来操作 HTML 文档、处理事件、创建动画以及进行 AJAX 交互。jQuery 的出现极大地简化了前端开发，使得开发者可以用更少的代码完成更多的功能。
+
+## 2008年：Chrome 浏览器和 V8 引擎
+
+2008 年，Google 发布了 Chrome 浏览器和 V8 JavaScript 引擎。V8 引擎的出现极大地提升了 JavaScript 的运行速度，使得 JavaScript 能够用于更复杂的应用。
+
+## 2010年代：前端框架和工具的崛起
+
+2010 年代，前端开发进入了一个新的时代。一方面，出现了大量的前端框架和库，如 Angular、React 和 Vue.js，使得开发者可以更容易地构建复杂的前端应用。另一方面，前端开发工具和生态系统也得到了极大的发展，如 Node.js、webpack、Babel、ESLint 等。
+
+## 2015年至今：现代前端开发
+
+2015 年，ECMAScript 6（也称为 ES2015）的发布，为 JavaScript 带来了许多新的语言特性，如类、模块、箭头函数、Promises、生成器等。同时，随着 Web Components 和 Progressive Web Apps（PWA）的出现，前端开发正在朝着更加模块化、组件化和原生应用化的方向发展。
+
+在过去的几十年里，前端开发经历了从静态网页到复杂 Web 应用的巨大转变。尽管前端开发的技术和工具不断变化，但其核心目标一直未变，那就是创建出色的用户体验。

work/front-end-engineer/文化/现代化开发工具链.md

@@ -0,0 +1,96 @@
+---
+title: 现代化开发工具链
+description: 前端现代化开发工具链
+keywords:
+  - 前端开发
+  - 工具
+tags:
+  - HTML5
+sidebar_position: 3
+author: 7Wate
+date: 2023-10-16
+---
+
+在前端开发过程中，开发者需要利用一系列的工具和技术来提高工作效率、确保代码质量和进行项目管理。这些工具和技术构成了前端的开发工具链。以下是一些现代前端开发中常用的工具和技术:
+
+## 版本控制：Git + GitFlow、Pull Request
+
+[Git](https://git-scm.com/) 是一个开源的分布式版本控制系统，用于跟踪和记录项目文件的更改历史。[GitHub](https://github.com/) 是一个基于 Git 的代码托管平台, 提供了代码审查、项目管理、版本控制等功能。使用 GitFlow 可以实现更规范的分支管理，Pull Request 允许代码审查，是团队协作的重要方式。
+
+## 包管理器：npm、yarn 和 pnpm
+
+包管理器用于自动处理项目的依赖关系。[npm](https://www.npmjs.com/)(Node Package Manager) 是 Node.js 的默认包管理器，[yarn](https://yarnpkg.com/) 由 Facebook 开发，提供更快速度。[pnpm](https://pnpm.io/) 结合了两者优点，也越来越受欢迎。
+
+## 代码编辑器：VS Code
+
+[VS Code](https://code.visualstudio.com/)（Visual Studio Code）是 Microsoft 开发的一个开源代码编辑器。VS Code 提供了语法高亮、智能代码补全、代码重构等功能，并支持大量的插件，如 ESLint、Prettier 等。
+
+## 模块打包器：Webpack 和 Vite
+
+[Webpack](https://webpack.js.org/) 是一个模块打包器，支持代码分割、懒加载等。[Vite](https://vitejs.dev/) 通过原生 ES module 实现极速开发服务器启动，能够显著提升开发效率。
+
+## 代码转译器：Babel
+
+[Babel](https://babeljs.io/) 是一个 JavaScript 编译器，可以将最新版的 JavaScript 代码转译成旧版的代码，以便在老版本的浏览器中运行。Babel 支持 ES6、React JSX 语法、TypeScript 等。
+
+## 代码检查器：ESLint 和 Prettier
+
+[ESLint](https://eslint.org/) 是一个开源的 JavaScript 代码检查工具，可以检查代码中的错误和不符合规范的编码风格。[Prettier](https://prettier.io/) 是一个代码格式化工具，可以自动格式化代码，确保代码的一致性。
+
+## 测试框架：Jest 和 Mocha
+
+[Jest](https://jestjs.io/) 是 Facebook 开发的一个 JavaScript 测试框架，支持模拟测试、快照测试等。[Mocha](https://mochajs.org/) 是另一种流行的 JavaScript 测试框架，可以搭配 [Chai](https://www.chaijs.com/)（断言库）和 [Sinon](https://sinonjs.org/)（测试替身库）等工具使用。
+
+## 前端框架：React、Vue 和 Angular
+
+[React](https://reactjs.org/)、[Vue](https://vuejs.org/) 和 [Angular](https://angular.io/) 是目前最流行的前端框架，它们提供了组件化、声明式编程等高级特性，用于构建复杂的单页应用（SPA）。
+
+## CSS 预处理器：Sass、CSS Modules
+
+[Sass](https://sass-lang.com/) 是一种强大的 CSS 预处理器，允许使用变量、嵌套规则、混合等功能，以写出更干净、更易于维护的 CSS 代码。[CSS Modules](https://github.com/css-modules/css-modules) 是一种 CSS 模块化方案，可以实现 CSS 的局部作用域，避免样式冲突。
+
+## 结构化数据：GraphQL 和 REST API
+
+[GraphQL](https://graphql.org/) 是 Facebook 推出的一种数据查询和操作语言，可以让客户端精确地获取需要的数据，提高数据传输效率。REST API 是网络应用程序中最常用的 API 架构风格，它利用 HTTP 协议提供 CRUD（创建、读取、更新、删除）操作。
+
+## 状态管理：Redux、Vuex 和 MobX
+
+[Redux](https://redux.js.org/)（用于 React）和 [Vuex](https://vuex.vuejs.org/)（用于 Vue）都是前端状态管理工具，用于管理和维护组件间共享的状态。[MobX](https://mobx.js.org/README.html) 是另一种流行的状态管理库，它使用响应式编程概念，让状态管理更加直观。
+
+## 静态类型检查器：TypeScript
+
+[TypeScript](https://www.typescriptlang.org/) 是 JavaScript 的一个超集，它添加了静态类型检查和其他特性，可以提高代码的可维护性和可靠性。
+
+## 服务器端渲染（SSR）和静态站点生成（SSG）：Next.js 和 Nuxt.js
+
+[Next.js](https://nextjs.org/)（用于 React）和 [Nuxt.js](https://nuxtjs.org/)（用于 Vue）是用于构建服务器端渲染（SSR）和静态站点生成（SSG）的框架，可以提高首屏加载速度，优化 SEO。
+
+以上就是现代化前端开发工具链的概述，这些工具和技术可以提高开发效率，保证代码质量，使得前端开发更具生产力。
+
+## 端到端测试：Cypress 和 Puppeteer
+
+[Cypress](https://www.cypress.io/) 和 [Puppeteer](https://pptr.dev/) 是用于进行端到端测试的工具，允许开发者模拟用户的行为，检查页面的响应，确保应用在真实使用场景中的表现。
+
+## 开发环境：Docker
+
+[Docker](https://www.docker.com/) 是一种开源的容器平台，可以用于打包和运行应用，确保应用在不同环境中的一致性。使用 Docker 可以避免“在我机器上可以运行”的问题。
+
+## 持续集成/持续部署（CI/CD）：GitHub Actions 和 Jenkins
+
+[GitHub Actions](https://github.com/features/actions) 和 [Jenkins](https://www.jenkins.io/) 是用于持续集成和持续部署的工具，可以自动化构建、测试和部署的过程，提高开发效率和代码质量。
+
+## 性能优化：Lighthouse 和 Webpack Bundle Analyzer
+
+[Lighthouse](https://developers.google.com/web/tools/lighthouse) 是一种开源工具，可以对网页进行性能、可访问性、最佳实践、SEO 等方面的评估。[Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) 是一个插件，可以帮助开发者理解 webpack 打包的输出文件，找出优化的机会。
+
+## API Mocking：Mirage JS 和 json-server
+
+[json-server](https://github.com/typicode/json-server) 和 [Mirage JS](https://miragejs.com/) 可以用于生成模拟的 RESTful API，帮助前端开发者在后端 API 还没准备好的情况下进行开发和测试。
+
+## 设计工具和 UI 组件库：Sketch、Figma、Ant Design 和 Material-UI
+
+[Sketch](https://www.sketch.com/) 和 [Figma](https://www.figma.com/) 是用于设计 UI 的工具，可以创建和分享设计原型。[Ant Design](https://ant.design/) 和 [Material-UI](https://material-ui.com/) 是 UI 组件库，提供了一系列预定义的 UI 组件，可以快速构建美观的界面。
+
+## 调试工具:DevTools、VS Code 调试
+
+[Chrome DevTools](https://developer.chrome.com/docs/devtools/)和VS Code的调试功能用于前端代码调试。