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
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.