前端学习路线图

前端学习路线图: Internet: HTTP DNS HTML Basic Semantic HTML Forms and Validations Accessibility SEO CSS Basic Layout Responsive Design JavaScript Baisc DOM Fetch API / Ajax Package Manager npm pnpm yarn Framework Angular Vue.js React Svelte Solid JS Qwik Writing CSS Tailwind Radix UI Shadcn UI CSS Architecture BEM CSS Preprocessors SASS PostCSS Build Module Bundlers parcel Rollup Webpack esbuild Vite Task Runners npm scripts Linters and Formatters Prettier ESLint Test Vitest Jest Playwirte Cypress Authentication Strategies JWT OAuth SSO Basic Auth Session Auth Web Security Basics CORS HTTPS CSP OWASP Security Risks Web Components HTML Templates Custom Elements Shadow DOM Type Checkers TypeScript Server Side Rendering(SSR) Svelte Svelte Kit Vue.js Nuxt.js Angular Universal React Next.js Remix GraphQL Apollo Relay Modern Static Site Generators Vuepress Jekyll Hugo Nuxt.js Astro Eleventy Next.js Remix Progressive Web App Mobel Applications React Native Flutter Ionic NativeScript Desktop Applications Bonus Content

2023-10-12 · 1 min · 160 words · chensoul

React入门:初始化应用的两种方法

在 React 中,您可以使用多种方法来初始化一个应用程序。以下是几种常见的方法: 使用 Create React App(CRA)。Create React App 是一个官方提供的脚手架工具,用于快速创建 React 应用程序的基本结构和配置。 使用 Vite。Vite 是一个快速、简单且现代化的前端构建工具。 create-react-app create-react-app 是一个用于快速创建 React 应用程序的命令行工具。它提供了一个简单的方式来设置和配置一个全新的 React 项目,包括构建、开发服务器和其他常见的配置。 ...

2023-09-22 · 6 min · 2546 words · chensoul

[译]为恐龙解释现代CSS

奇怪的是,CSS 被认为是作为 Web 开发人员最容易学习和最难学习的语言之一。开始使用它当然很容易 - 您可以定义样式属性和值以应用于特定元素,然后……这几乎就是您开始所需的一切!但是,对于大型项目,以有意义的方式组织 CSS 会变得纠结和复杂。更改任何一行 CSS 以设置一个页面上元素的样式通常会导致其他页面上的元素发生意外更改。 ...

2023-06-21 · 19 min · 9217 words · chensoul

[译]为恐龙解释现代HTML

在三种主要的前端技术( HTML,CSS 和 JavaScript )中,HTML 仍然是最一致的。如果您唯一关心的是创建内容,那么 1990 年代的 HTML 文档看起来与 2018 年创建的文档非常相似: 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My test page</title> </head> <body> <h1>Hello there!</h1> </body> </html> 你有带有标签和内容的元素,带有属性的标签——除了第一行的简化文档类型外,没有太大变化!然而,多年来,Web 开发已经发生了巨大的转变,从创建静态网站(专注于内容)到创建动态 Web 应用程序(专注于交互)——这是 Web 最初设计的目的。创建仍然语义和可访问的自定义用户界面,使用属性和工具提高性能,组织代码以进行重用和可维护性 - 现在有一组全新的问题在起作用。 ...

2023-06-20 · 29 min · 14517 words · chensoul

[译]为恐龙解释现代JavaScript

图片来自Ryan North的Dinosaur Comics。 如果你从一开始就没有去过那里,那么学习现代 JavaScript 是很困难的。生态系统的发展和变化如此之快,以至于很难理解不同工具试图解决的问题。我从 1998 年开始编程,但直到 2014 年才开始认真学习 JavaScript。当时我记得遇到 Browserify 并盯着它的标语: ...

2023-06-19 · 14 min · 6884 words · chensoul