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.
- The project planning is mostly based on Fullstack Project Planning.
-
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).
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
-
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 importsrather thannamed importsin 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-jsxcan 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)
- Use consistent coding style.
-
(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
- Google search tricks
-
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)
- (Draft) case-studies
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).