DOCSEARCHbyAlgolia
Submit Docs

Shawkry's Technical Documentation

website·Indexed 31 days ago

https://shawkry.top

A collection of technical notes and guides covering web development (React, GraphQL, Node.js), software design patterns, coding styles, and practical attempts in SEO, VLAN setup with N2N, and NAS implementation using Nextcloud.

Tokens
18.4K
Snippets
82
Records
131
Agent score
52%

What's inside Shawkry Docs

  1. Overview of building a custom React component library based on Ant Design

    This guide outlines the process of creating a personalized business component library (referred to as 'elephant-design') by leveraging Ant Design. The workflow consists of three primary phases: extracting business components (using a 'Poke' component as an example), publishing the resulting components to npm, and implementing component documentation using Storybook.

  2. Understand GraphQL operation types

    GraphQL uses operation types to describe the intent of a request and whether it should have side effects on the server. There are three primary types:

    • query: Used for read-only operations (similar to REST GET). This is the default type if none is specified.
    • mutation: Used for operations that modify data, such as creating, updating, or deleting (similar to REST POST/PUT/DELETE).
    • subscription: Used for real-time updates via a WebSocket-like connection to notify the client of server-side data changes.

    Note: While the operation type can be omitted (defaulting to query), it is recommended to explicitly include it to allow for operation naming and variable definitions.

    query {
  projects {
    uuid
    name
  }
}

  3. Understand the Singleton Design Pattern

    The Singleton pattern ensures that a class has only one instance and provides a global point of access to it.

    Key Benefits:

    • Resource Efficiency: Reduces memory overhead by ensuring only one instance exists.
    • Global Access: Provides a consistent access point for sharing instances across different components.
    • Instance Control: Prevents data inconsistency issues that arise from having multiple instances.

    Common Use Cases:

    • When a class should be used directly without requiring the user to instantiate it.
    • When a global limit on instances is required (e.g., a single global message popup or a shopping cart).

  4. Understand the Adapter Design Pattern benefits and use cases

    The Adapter Pattern creates an intermediary layer that allows two incompatible interfaces to work together without modifying the existing source code.

    Key Benefits:

    • Decoupling and Compatibility: Enables seamless collaboration between new and old systems without modifying original code, reducing maintenance costs.
    • Enhanced Reusability: Allows the reuse of existing classes instead of re-implementing functionality, reducing code duplication.
    • Adherence to Open-Closed Principle: Extends system flexibility by adding adapter classes rather than modifying existing code.

    Common Use Cases:

    • Legacy Integration: When a new system uses a new interface standard but the old system still uses an old interface, avoiding large-scale refactoring.
    • Third-Party Library Integration: When a third-party API's data format or calling convention does not match the project's requirements.
    • Data Format Conversion: Converting between different data formats (e.g., JSON to XML) during frontend and backend interaction to ensure smooth communication.

  5. Moon Design React Component Library

    Moon Design is a React component library focused on modern design and user experience. It is currently under development.
    # Source code available at: https://github.com/Shawkry/moon-design

  6. Apply SOLID design principles for better software architecture

    The SOLID principles provide a foundation for creating maintainable and scalable software:

    • S – Single Responsibility Principle: A program or class should do one thing only. If a function is too complex, split it into independent parts.
    • O – OpenClosed Principle: Software entities should be open for extension but closed for modification. Add new functionality by extending code rather than modifying existing logic.
    • L – Liskov Substitution Principle: Subtypes must be substitutable for their base types; a subclass should be able to appear anywhere its parent class is used.
    • I – Interface Segregation Principle: Keep interfaces lean and independent. This is similar to the Single Responsibility Principle but focuses specifically on the interface definition.
    • D – Dependency Inversion Principle: Depend on abstractions (interfaces) rather than concrete implementations. The consumer should only care about the interface, not the specific class implementation.

  7. Rail-Transit Big Data Analysis Platform

    Rail-Transit is a big data analysis platform for rail transit, developed using Vue. It received a second prize in the National Undergraduate Service Outsourcing Innovation and Entrepreneurship Competition.
    # Source code available at: https://github.com/Shawkry/rail-transit

  8. Understand GraphQL core concepts and its difference from REST

    GraphQL is a query language for APIs and a server-side runtime that uses a type system (defined by your data) to execute queries. Unlike REST, GraphQL is not bound to any specific database or storage engine and relies on existing code and data. Its primary advantage over REST is flexibility: it allows a client to retrieve data from multiple sources through a single API call, reducing the need for multiple network requests.

  9. Understand the Strategy Design Pattern

    The Strategy Pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. This allows the algorithm to vary independently from the clients that use it.

    Key advantages include:

    1. Open-Closed Principle: New strategies can be added without modifying the existing context, making the system easier to extend.
    2. Algorithm Reuse: Strategy objects can be shared across different contexts to avoid duplication.
    3. Code Elegance: It eliminates the need for large blocks of if-else or switch-case statements.

  10. TODO Application with Data Analytics

    A TODO application featuring data statistical analysis, developed for mobile devices using Vue.
    # Source code available at: https://github.com/Shawkry/TODO

  11. Compare GraphQL and REST for complex data fetching

    When fetching complex tree-structured data (e.g., a user profile with posts and followers), REST typically requires multiple round-trips to different endpoints or the creation of a 'super API' that violates the interface segregation principle and is hard to maintain. GraphQL solves this by allowing the client to define the exact shape of the required data in a single request, eliminating over-fetching and reducing network overhead. This enables faster iterations as frontend developers can update the data requirements by simply modifying the query without needing backend changes to the API endpoint.
    # GraphQL approach: Single request for nested data
# POST: /graphQL

query {
  User(uuid: "xxx") {
    name
    avatar
    posts {
      title
      content
      comments
    }
    follows {
      name
      avatar
    }
  }
}

  12. Implement Web Accessibility (a11y) core principles

    Web accessibility ensures that all users, including those with disabilities or limited technical devices, can equally access and use web content. Follow the four core principles of the Web Content Accessibility Guidelines (WCAG):

    1. Perceivable: Ensure users can perceive all information presented.
    2. Operable: Ensure the interface is operable (no interactions that a user cannot perform).
    3. Understandable: Ensure users can understand the information and operation of the interface.
    4. Robust: Ensure content can be reliably accessed via various user agents, including assistive technologies.