Frontend development best practices (React.js).md

Re: selfies project written in CRA and PWA

• Planning of a project

  • The project planning is mostly based on Fullstack Project Planning.

    For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.

• React Project Structure

  • The project structure is mostly based on React Project Structure Best Practices for Scalable Application.

    A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).

• Important methodologies

  • Want to make your React site more performant? Here's a quick checklist
  • Use create-next-app for medium-to-large scale projects, while use create-react-app for small projects and if there are some integrations or libraries that just don't work very well right now with Next.
    Re:
    https://github.com/addyosmani/launch/issues/8#issuecomment-653686670
    https://web.dev/react/#next.js
  • Using absolute (alias) imports in Javascript and VSCode.
  • Use path imports rather than named imports in order to reduce the bundle size.
    We can rely on Tree Shaking but just in case.
    Re:
    https://gist.github.com/anton-karlovskiy/44d143bb7be5e03bf1db53d54f4874fa#gistcomment-3645029
    Usage
    When and how to use tree-shaking?
    minimize bundle => use named or path imports? #20436
    Tree shaking does not work on dependencies of dependencies #6943
    Tree Shaking? #2748
  • Optimize images using tools like squoosh.app and svgomg and generally take the approaches from Optimize images.
    Re (opportunities often recommended by Lighthouse):
    Use WebP images
    Serve images in next-gen formats
    Properly size images
  • Set up Webpack Bundle Analyzer or source-map-explorer and monitor the bundle size of the project.
    Re (Why not use this free service?): bundle-analyzer
  • Use CSS modules to avoid overriding CSS class names, especially in CRA as styled-jsx can be used in Next.js by default.
  • Follow various opportunity recommendations reported by Lighthouse (JavaScript, CSS, Image and Core Web Vitals like LCP & CLS etc).
    Re:
    Fast load times
    Web Vitals
  • (Potential) Regularly monitor the performance by using SpeedCurve and setting up performance budgets.
    Re:
    Use Lighthouse for performance budgets
    The Cost Of JavaScript In 2018
  • Browser Compatibility
    • Screenshot Testing On Real Browsers & Devices via BrowserStack
    • Manifest and Favicon compatible across multiple browser platforms
      Re: Favicon Generator. For real.
  • Tags for social media marketing compatible across multiple social media platforms
    Re: Meta Tags (good at generating), http://debug.iframely.com/ (good at testing), Open Graph Meta Tags: Everything You Need to Know & The Essential Meta Tags for Social Media (background knowlege).

• Coding practices

  • Use consistent coding style.
    Re: Airbnb JavaScript Style Guide
    • Readability
    • Modularity
    • Efficiency
    • Length
  • Use healthy third party packages using tools like bundlephobia, GitHub stars and NPM downloads.
  • Creating and keeping reusable & granular components, utilities and approaches via GitHub gist or Bit, etc.
    Benefits (my own thoughts):
    • productivity
    • upgrading and updating with ease (e.g. adopting better third-party packages)
    • codebase management

      Not all libraries can be easily broken down into parts and selectively imported. In these scenarios, consider if the library could be removed entirely. Building a custom solution or leveraging a lighter alternative should always be options worth considering. However, it is important to weigh the complexity and effort required for either of these efforts before removing a library entirely from an application.

    • collaboration
  • (Potential) Styling
    Re: prefers-color-scheme: Hello darkness, my old friend
  • SVG
    Re: SVGR in Next.js and Adding SVGs in create-react-app
  • Follow the standard design patterns.
    Basic ones:
    • Robust principle
    • Single Responsibility principle
    • Single Source of Truth
    • KISS
  • Comment on the critical points.
    Comment types:
    • TODO: (e.g. keep tracking, enhancement)
    • MEMO: (e.g. logging)
    • RE: (e.g. productivity by later referencing)

• (Potential) Testing
  Re:
  https://testingjavascript.com/
  https://academind.com/learn/javascript/javascript-testing-introduction/
  https://www.youtube.com/watch?v=r9HdJ8P6GQI
  https://www.youtube.com/watch?v=4Fl5GH4eYZ8

• (Draft) Project management (Jira, GitHub issue tracker)

  • Set up Linting and repository management rules at GitHub rather than recommending devs in a team.
  • Feature request
  • Bug tracking
  • Progressive enhancement
  • Communication

• Investigating approach

  • Google search tricks
    Re: HOW TO USE GOOGLE SEARCH LIKE A PRO
  • (Draft) case-studies
    • Movie Browser project
    • cors-anywhere
    • OAuth 2.0 for Client-side Web Applications

• Keeping your eyes on the community activities

  • (Draft) case-studies
    • following industry pros at GitHub (e.g. react-use)
    • following industry pros at Instgram
    • following industry pros at Twitter
    • watching Slack channels (e.g. 11 Useful Custom React Hooks for Your Next Web App)

I should have my own Linting set up to cover my JS code standard (originated from AirBnb JS style guide but has some deviations).

I can improve the draft with the content from https://github.com/thedaviddias/Front-End-Checklist.

(Potential) Set up performance budgets.

I could use this package https://github.com/siddharthkp/bundlesize to threshold the bundlesize.

Use consistent coding style.

AirBnb JS code standard vs. Google's one https://github.com/google/eslint-config-google

For eslintrc example: https://gist.github.com/nkbt/9efd4facb391edbf8048

(Draft) Memorable packages to be used in frontend development in React.

Primary

• https://github.com/immerjs/immer
• https://github.com/tannerlinsley/react-query
• https://github.com/vercel/swr
• https://github.com/apollographql/apollo-client
• https://github.com/streamich/react-use
• https://github.com/davidkpiano/xstate
• https://github.com/vercel/next.js/tree/canary/examples

Secondary

• https://github.com/projectstorm/react-diagrams

(Draft) Memorable resources to be referenced in web development.

• https://kentcdodds.com/
• https://css-tricks.com/
• https://dev.to/
• https://web.dev/
• https://medium.com/

(Draft) Generic

• https://stackoverflow.com/
• https://github.com/

State management between React Context API, Redux, React Query vs. SWR, Apollo Client.
Re: https://dev.to/g_abud/why-i-quit-redux-1knl

Must utilize Design Systems and Storybook.

Must adopt finite state machines and statecharts.
At least follow https://kentcdodds.com/blog/stop-using-isloading-booleans in state management.

Examples:
https://github.com/anton-karlovskiy/geo-location-example-with-finite-states
https://github.com/anton-karlovskiy/handle-http-errors-with-react

VS Code extensions

Primary

• ESLint
• Git lens
• Import Cost
• Code Spell Checker

Secondary

• TODO Highlight
• Bookmarks
• Bracket pair colorizer
• Auto Rename Tag
• Path Intelligence

I should google at Instagram & dev.to and update it.

ESLinting and Prettier

https://github.com/google/eslint-config-google
https://google.github.io/styleguide/jsguide.html
https://twitter.com/benmvp/status/1356398301600354306

My Linting rules are based on Google JavaScript Style Guide rather than AirBnb's.

Examples:
https://github.com/anton-karlovskiy/joyn-alloc-fdg-ui
https://github.com/anton-karlovskiy/joyn-ai

I should write down component building approaches.

• https://reactjs.org/docs/composition-vs-inheritance.html

I should add the PRPL pattern approach.

Must set up Lighthouse CI using GitHub actions. https://web.dev/lighthouse-ci/

The general development approach (regardless of frontend or backend) must be based on Optimize for Deletion: Speed Up Development Without Adding Risk for striking a healthy balance of moving fast, delivering quickly, and not creating maintenance nightmares for ourselves.
To put it in one word, it's the combination of Single Source of Truth, KISS, Robust, and Single Responsibility design principles.

If JavaScript libraries are proving costly, replace them with smaller alternatives. Lots of great options in webpack-libs-optimizations & You-Dont-Need-Momentjs.

Re:
https://twitter.com/addyosmani/status/1037587112730611714
https://twitter.com/addyosmani/status/1228265124072321024
https://twitter.com/addyosmani/status/899670174411902976
https://twitter.com/addyosmani/status/1304676118822174721

Make local storage usage as small as possible for performance, user experience, and small persisted data (Re: Storage for the web & Storage for the web).

Never use // eslint-disable-next-line react-hooks/exhaustive-deps.

React in TypeScript:
https://github.com/typescript-cheatsheets/react
https://react-typescript-cheatsheet.netlify.app/

When to use target=”_blank”
Using Artificial Intelligence to Generate Alt Text on Images

Alt text:
Some Things About alt Text
Using Artificial Intelligence to Generate Alt Text on Images

Should use content-visibility. Re: content-visibility: the new CSS property that boosts your rendering performance

Should follow best practices in setting up fonts for browser compatibility, performance, and maintainability (Re: Using @font-face, Multiple font-weights, one @font-face query, Typography for Developers).

Should use tailwindcss in combination with https://github.com/ben-rogerson/twin.macro.
Can use https://github.com/rogden/tailwind-config-viewer.

Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage.
This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused.

https://twitter.com/_developit/status/1382838799420514317

Error handling: https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

Kent's stacks: https://twitter.com/kentcdodds/status/1404433042236612612