DOCSEARCHbyAlgolia
Submit Docs

ExploreOO Blog

website·Indexed 30 days ago

https://exploreoo.github.io

A technical blog covering frontend development, including JavaScript (ES6, Proxy, WebWorker), React (useEffect vs useLayoutEffect), Vue, CSS (Snap Scrolling), and Web APIs. The site also provides guides on network security, WebSocket, JSON, Git workflows, and PWA (Progressive Web App) implementation.

Tokens
37.4K
Snippets
141
Records
233
Agent score
74%

What's inside ExploreOO

  1. Overview of VuePress Markdown processing

    VuePress generates pages from Markdown files. It uses markdown-it to parse content, which allows for syntax extensions via markdown-it plugins. Additionally, VuePress provides its own set of Markdown extensions, and the VuePress Theme Hope further extends this syntax to provide richer writing functions.

  2. Use MutationObserver to monitor DOM changes

    The MutationObserver API is used to monitor changes to the DOM, specifically modifications to element attributes and the addition, removal, or modification of child nodes. It is an effective way to implement features like persistent watermarks that resist removal.

  3. Understand Vue 3 performance optimizations over Vue 2

    Vue 3 introduces several performance improvements over Vue 2:

    • Template Compiler: Uses Static Hoisting and Patch Flags to optimize the virtual DOM patch process, reducing runtime overhead.
    • Diff Algorithm: While Vue 2 used depth-first traversal, Vue 3 marks static nodes during compilation to avoid re-creating them during every render (Static Hoisting) and uses block-level optimization to isolate dynamic content.
    • Tree-shaking: Vue 3 is built on an ES Module architecture, allowing developers to import only the necessary functions and reduce the final bundle size, unlike the monolithic packaging of Vue 2.

  4. Implement a custom Vue SSR architecture

    To implement Server-Side Rendering (SSR) in a Vue application without using a framework like Nuxt, you need a dual-build system: one for the client and one for the server. The server generates the initial HTML and state, which is then 'hydrated' on the client side. This improves First Contentful Paint (FCP) and SEO.

  5. Understand Build-time vs Runtime environment variables

    Environment variables are handled differently depending on when they are injected:

    • Build-time: Variables are statically injected into the bundle during the build process (e.g., import.meta.env.VITE_...). Once the static files are generated, changing the .env file will not affect the deployed application without a rebuild.
    • Runtime: Variables are read when the application starts or the page loads (e.g., server-side process.env or frontend via window.__APP_CONFIG__). This allows configuration changes after deployment without rebuilding the code.

    Security Warning: Any variable exposed to the frontend (browser) is public. Never put secrets, private keys, or sensitive tokens in frontend environment variables.

  6. Compare Vue and React design philosophies

    Vue is a progressive framework emphasizing ease of use and rapid development, utilizing Single File Components (SFC), macros, and directives. React is a UI library emphasizing flexibility and functional programming, making it suitable for complex business requirements where a decoupled architecture is preferred.

  7. Understand the advantages of using JSON for data exchange

    JSON (JavaScript Object Notation) is a lightweight data exchange format widely used in API design, configuration files, and frontend-backend communication due to the following advantages:

    • Conciseness and Readability: The format is simple and easy for humans to read, view, edit, and debug using standard text editors or browser plugins.
    • Ease of Parsing: JSON is supported by all major programming languages (including JavaScript, Java, Python, and C#), ensuring high cross-platform compatibility and extensibility.
    • Structured Data: As a structured format, JSON allows for easy extension, updating, maintenance, and reuse of data.
    • Cross-Domain Support: JSON supports cross-domain requests, enabling secure data transmission between different domains.

  8. Use ResizeObserver to detect element size changes

    While the resize event on window monitors the browser window, ResizeObserver is used to specifically monitor changes to the dimensions (width and height) of individual elements, triggering a callback whenever the size is modified.

  9. Understand Progressive Web App (PWA) core capabilities

    A Progressive Web App (PWA) is a front-end technical architecture that combines the advantages of standard web pages and native applications. Its core capabilities include:

    • Offline Access: Allows the application to remain functional even without an internet connection.
    • Installability: Enables users to add the app to their mobile home screen, allowing it to run like a native application.
    • Performance Optimization: Improves loading speeds by caching resources on demand.
    • Automatic Updates: Utilizes Service Workers to implement silent or prompt-based resource updates.

  10. Generate documentation sites using VuePress and Markdown

    VuePress generates static pages from Markdown files, making it suitable for creating documentation or blog sites. To create pages, write Markdown files and organize them into a file structure; VuePress will then convert these files into corresponding pages based on that structure.