DOCSEARCHbyAlgolia
Submit Docs

Zuo11 Frontend Development Knowledge Base

website·Indexed 31 days ago

http://f.zuo11.com/

A comprehensive structured guide for frontend engineers covering skills from junior to senior levels. Includes documentation on FE basics (HTML, CSS, JavaScript, TypeScript, Vue, React, Svelte), frontend engineering (CI/CD, Node.js, build tools, ESLint, Prettier), performance optimization (SEO, low-code), and UX/UI design. Also features sections on AI technology exploration, algorithms, and developer core competencies.

Tokens
9.4K
Snippets
57
Records
79
Agent score
50%

What's inside Zuo11 Frontend Guide

  1. Overview of Front-end Engineering concepts

    Front-end engineering refers to the standardization of front-end development processes to improve development efficiency and ensure better product delivery. Key areas of focus in a front-end engineering workflow include:

    • Technology selection (Technical stack)
    • Unified coding standards and specifications
    • Testing
    • Deployment
    • Monitoring
    • Performance optimization
    • Refactoring

  2. Overview of VitePress

    VitePress is a Static Site Generator (SSG) designed for building fast, content-focused websites such as development documentation and blogs. It converts Markdown source content into static HTML pages by applying a theme.

  3. Understand CI/CD and DevOps concepts

    CI (Continuous Integration) involves automatically building, packaging, validating code format, and running unit tests (using tools like Webpack, Rollup, and ESLint) after feature iterations. CD (Continuous Deployment) is the process where code is automatically deployed to servers after passing the CI stage. DevOps is a combination of Development and Operations that uses automation of software delivery and architectural changes to make building, testing, and releasing software faster and more reliable.

  4. Understand HTTP/3 and QUIC protocol basics

    HTTP/3 is built upon QUIC, a secure stream protocol based on UDP. QUIC handles the connection and session processes, incorporating TLS encryption for negotiation between the client and server. A typical basic interaction involves the client sending a 'ping' and receiving a 'pong' before terminating the connection.

  5. Use Svelte to build cross-framework component SDKs

    Svelte is an ideal choice for developing SDKs or UI components (such as feature guide components) that must be compatible across multiple frameworks like Vue 2, Vue 3, React, and Angular. Unlike traditional frameworks, Svelte compiles your code into small, framework-independent vanilla JavaScript, eliminating the need for a heavy runtime and allowing the components to be integrated into any environment without framework conflicts.

  6. Define product core values based on Apple's philosophy

    According to Steve Jobs, a product's identity should extend beyond mere utility (e.g., 'marking boxes' or completing tasks). A strong product core value focuses on a belief system—such as the belief that passionate and 'crazy' individuals can change the world for the better—which helps customers understand what the company stands for and its place in the world.

  7. Implement responsive images using the <picture> element

    Use the <picture> element to provide multiple image sources based on media queries. This allows the browser to choose the most appropriate image for the user's screen size. To ensure compatibility with older browsers and crawlers that do not support <picture> or srcset, always include a fallback image using the src attribute within a nested <img> tag.
    <picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

  9. Integrate ECharts in Vue 2 with resize support

    The vue-chart project demonstrates how to integrate ECharts within a Vue 2 application, specifically implementing logic to redraw charts after a window resize event.
    # Reference implementation
git clone https://github.com/dev-zuo/vue-chart

  10. Install and initialize Stylelint for CSS and SCSS

    Stylelint is a powerful CSS linter that helps avoid style errors and enforce conventions. It supports standard CSS as well as SCSS, Sass, Less, and styles embedded in HTML or Vue files.
    npm init stylelint

    // Default .stylelintrc.json generated by the init command { "extends": ["stylelint-config-standard"] }

  11. Test and optimize product pricing using a three-tier strategy

    To find the optimal price point for a product, implement a three-tier pricing model with varying feature sets. Use the popularity of the middle tier as a signal to adjust pricing: if the middle option is the most popular, incrementally increase its price until the lowest tier becomes the most popular. Then, repeat the process to shift popularity back to the middle tier to identify the ideal price equilibrium.

  12. Integrate Valine comment system in VitePress

    Integrate Valine comments by registering a LeanCloud account to obtain an App ID and App Key. To avoid ReferenceError: window is not defined during build, the Valine.min.js file should be placed in the public/js/ directory and loaded via a remote import script. The comments are injected into every page using the #doc-after slot in a custom layout wrapper.
    <!-- .vitepress/theme/MyLayout.vue -->
<script setup>
import DefaultTheme from 'vitepress/theme'
import ValineComment from './ValineComment.vue';
const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #doc-after>
      <ValineComment />
    </template>
  </Layout>
</template>
    // .vitepress/theme/index.ts
import Theme from "vitepress/theme";
import MyLayout from './MyLayout.vue'

export default {
  ...Theme,
  Layout: MyLayout,
};