ChenSoul

前端学习路线图

2023-10-12 chensoul

前端学习路线图:

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

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

2023-09-22 chensoul

在 React 中，您可以使用多种方法来初始化一个应用程序。以下是几种常见的方法：

使用 Create React App（CRA）。Create React App 是一个官方提供的脚手架工具，用于快速创建 React 应用程序的基本结构和配置。
使用 Vite。Vite 是一个快速、简单且现代化的前端构建工具。

create-react-app

create-react-app 是一个用于快速创建 React 应用程序的命令行工具。它提供了一个简单的方式来设置和配置一个全新的 React 项目，包括构建、开发服务器和其他常见的配置。

[译]为恐龙解释现代CSS

2023-06-21 chensoul

Dinosaur comic panel 1

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