DOCSEARCHbyAlgolia
Submit Docs

yhy-docs

website·Indexed 29 days ago

https://yhy-docs.vercel.app/

A collection of development resources including curated VSCode and Chrome extensions, CSS guides based on 《CSS揭秘》, Typora and PicGo integration tutorials, and frontend API compatibility references.

Tokens
3.3K
Snippets
14
Records
22
Agent score
75%

What's inside yhy-docs

  1. Check CSS browser compatibility and automate prefixes

    To ensure CSS features work across different browsers, use compatibility checkers and automated prefixing tools:

    Compatibility Checkers:

    Automated Prefixing Tools:

  2. Install VSCode extensions for Markdown authoring

    Enhance the Markdown writing and previewing experience in VSCode with these tools.
    Plugin NamePlugin IDDescription
    Markdown All in OneMarkdown All in OneComprehensive toolset for writing Markdown
    Markdown Preview EnhancedMarkdown Preview EnhancedAdvanced Markdown preview capabilities

  3. Install VSCode extensions for uni-app development

    Use these extensions to improve the development experience for uni-app, including syntax highlighting for conditional compilation and code snippets for components and cloud functions.
    Plugin NamePlugin IDDescription
    uni-ui-snippetsuni-ui-snippetsCode snippets for uni-ui component library
    uni-highlightuni-highlightSyntax highlighting for conditional compilation comments
    uni-helperuni-helperGeneral uni-app code snippets
    uni-create-viewuni-create-viewCode snippets for creating uni-app pages
    uni-cloud-snippetsuni-cloud-snippetsCode snippets for uni-app cloud functions
    uni-app-snippetsuni-app-snippetsGeneral uni-app code snippets
    uni-app-schemasuni-app-schemasValidation for androidPrivacy.json, pages.json, and manifest.json

  4. Install VSCode extensions for Flutter and Dart development

    These extensions provide essential language support, debugging, data class generation, and widget snippets for Flutter and Dart projects.
    Plugin NamePlugin IDDescription
    DartDartDart language support and debugger
    FlutterFlutterFlutter support and debugger
    Awesome Flutter SnippetsAwesome Flutter SnippetsCollection of common Flutter classes and methods
    Flutter Widget SnippetsFlutter Widget SnippetsCollection of useful widget snippets
    Dart Data Class GeneratorDart Data Class GeneratorQuickly create Dart data classes without boilerplate
    Json to Dart ModelJson to Dart ModelConvert JSON to Dart model classes
    Flutter ColorFlutter ColorVisualizes colors within the code
    Flutter GetX GeneratorFlutter GetX Generator - 猫哥Code generation tool for GetX projects

  5. Integrate PicGo with Typora for image uploads

    To enable automatic image uploads to a cloud host in Typora using PicGo, follow these configuration steps in Typora's Preferences:

    1. Navigate to the Image section.
    2. Set the Upload Service to PicGo App.
    3. Specify the Installation Path where the PicGo application is installed on your system.

  6. Access official W3C CSS specifications

    For authoritative technical details on CSS standards, refer to the W3C documentation for the following modules:

    • Syntax, Cascading & Inheritance
    • Colors, Values, and Units
    • Selectors
    • Backgrounds, Borders, and Text Effects
    • Fonts and Typography
    • Transforms, Compositing, Filters, and Masking
    • Layout: Flexbox and Grid

  7. Configure PicGo to use Alibaba Cloud OSS

    To use Alibaba Cloud as an image host in PicGo, you must provide the following credentials and settings:

    1. AccessKey ID (KeyId): Create a user in the Alibaba Cloud console under Access Control, enable OpenAPI call access, and copy the AccessKey ID.
    2. AccessKey Secret (KeySecret): Copy the AccessKey Secret generated during user creation.
    3. Bucket Name: The name of the storage bucket created in Alibaba Cloud.
    4. Region: The storage region assigned to the bucket (can be verified in the Bucket Overview page).

  8. Recommended Chrome extensions for web development and debugging

    Use these tools to analyze and debug web applications:

    • Vue.js devtools: Essential for debugging Vue.js applications.
    • Lighthouse: An open-source tool for auditing website performance and quality.
    • Wappalyzer: Identifies the technology stack used by a website.
    • Datalayer Checker: Used for Google Analytics (GA) analysis.
    • 掘金 (Juejin): Aggregates technical content across frontend, backend, mobile, and design channels in a new tab.

  9. Recommended VSCode extensions for WeChat Mini Program development

    Specialized tools for WXML syntax, API hints, and project scaffolding for WeChat Mini Programs.

    WeChat Mini Program Extensions

    • 小程序开发助手 (overtrue.miniapp-helper): Intelligent completion and development aid.
    • wxml (cnyballk) (cnyballk.wxml-vscode): Formatting and highlighting for WXML.
    • wxapp-helper (Sean) (seancheung.wxapp-helper): Generates pages, components, and template configs.
    • wechat-snippet (ChandZhang) (ChandZhang.wechat-snippet): Code snippets from official WeChat docs.
    • vscode wxml (codefee) (coderfee.vscode-wxml): WXML syntax support and snippets.
    • vscode weapp api (codefee) (coderfee.vscode-weapp-api): API hints and snippets for WeChat Mini Programs.

  11. Recommended VSCode extensions for editor enhancement

    These extensions improve the core editing experience through automation and better visibility of errors and documentation.

    Editor Enhancements

    • Code Runner (formulahendry.code-runner): Run code snippets or files for multiple languages.
    • Auto Close Tag (formulahendry.auto-close-tag): Automatically adds closing tags.
    • Auto Import (steoates.autoimport): Automatically finds and provides import code actions and completions.
    • Auto Rename Tag (formulahendry.auto-rename-tag): Automatically renames closing tags when the opening tag is modified.
    • Beautiful css/sass/scss/less (michelemelluso.code-beautifier): Beautifies CSS, Sass, and Less code.
    • Document This (oouo-diogo-perdigao.docthis): Generates detailed JSDoc comments for TypeScript and JavaScript.
    • Easy Less (mrcrowl.easy-less): Compiles LESS to CSS automatically on save.
    • EditorConfig for VS Code (EditorConfig.EditorConfig): Provides EditorConfig support.
    • Error Lens (usernamehw.errorlens): Enhances the highlighting of errors, warnings, and language diagnostics.

  12. Identify CSS browser vendor prefixes

    Use the following vendor prefixes to target specific browser engines for experimental or non-standard CSS properties:

    • -webkit-: Chrome, Safari, iOS Safari, Android, BlackBerry, Opera Mobile
    • -moz-: Firefox
    • -ms-: Internet Explorer (IE)
    • -o-: Opera