all the guff20210721 ☕ 5 min read

What goes into a finished app or JS app

  1. EditorConfig

    EditorConfig

    Coding standards are pretty important. They give confidence of quality and prevent some hard to detect errors.

    Code modifiers use a variety of editors and a variety of environments, each with their own default editor configs.

    EditorConfig provides a standard that's supported by most code editors (VS, JetBrains...), and those that don't usually have plugins available.

    EditorConfig a standard for editors to define things like:

    • charset (utf-8, utf-16...)
    • end of line definition (lf, cr/lf, whatever)
    • end of file definition (empty line at end or not)

    That means whatever editor a code modifier might use, they'll have a fixed standard for what text files looks like. You can specify text standards based on file type.

    It's just a file called .editorconfig in the root of your project that looks something like:

    # EditorConfig is awesome: https://EditorConfig.org
    # top-most EditorConfig file
    root = true
    # Unix-style newlines with a newline ending every file
    [*]
    end_of_line = lf
    insert_final_newline = true
    # Matches multiple files with brace expansion notation
    # Set default charset
    [*.{js,py}]
    charset = utf-8
    # 4 space indentation
    [*.py]
    indent_style = space
    indent_size = 4
    # Tab indentation (no size specified)
    [Makefile]
    indent_style = tab
    # Indentation override for all JS under lib directory
    [lib/**.js]
    indent_style = space
    indent_size = 2
    # Matches the exact files either package.json or .travis.yml
    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2
  2. snyk

    snyk

    Find and fix code vulnerabilities. JS projects have lots of dependencies. And those dependencies have dependencies. Any one of those may have vulnerablities.

    Snyk maintains a database of known vulnerabilities. You run your project past Snyk and it produces a report of your vulnerabilities.

  3. ESLint

    ESLint

  4. storybook

  5. Tidy package.json

    Fill in all the fields and make sure they're accurate.

  6. tidy readme.MD

  7. .gitignore

  8. Check for JavaScript errors.

  9. Check for broken links.

  10. Run it through a VPN.

  11. Run it on a variety of browsers.

  12. Check for accessibility.

    Run it through Google Lighthouse.

    • Fix aria-* properties.
    • think about viewport attributes
    • think about loading times