Techletter #69 | April 20, 2024
Why do you need to have a clear requirement before building a feature?
Building a feature without the proper requirement & business context is a waste of time and resources.
Building is the easy part because engineers are trained for it. What to build and why to build is much more important. At least, I have experienced this in my last 2 years of experience in the field of software engineering. I have built several features that have been discarded, I have also built features that people use every single day.
Building simple initial prototypes is fine because you need to give them to the users, observe how users use them, then make changes based on the user’s requirements.
Building a product without involving users is a road to disaster.
What does package-lock.json contain? Why is it important?
package-lock.json is an automatically generated file that records the exact version of every installed dependency, including sub-dependencies and their versions, when a package is installed using npm install.
It is designed to ensure consistent installation across different environments. (Production, development, etc).
I used to make the mistake of not committing package-lock.json to the repo. But, recently I got to know about its importance. So, make sure you push the package-lock.json file to the repo to ensure proper package installation.
What is the difference between .js and .jsx extensions in React?
The .jsx extension is used for files that contain JSX syntax, while the .js extension is used for files that contain only JavaScript code. However, a component can be written in both .js and .jsx extensions. But, if you are use vite then you need to make some workaround to make this work.
In large code bases, keeping jsx and pure js code separate can be easier to maintain. But, in my experience, I have used .js files that include both logic as well as jsx within the same file.
How to create absolute imports in react-vite?
Creating absolute imports will save a lot of time in understanding and debugging the code. It makes developer life easier for importing components within different files.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
src: "/src",
components: "/src/common_components/button_components"
},
},
});
Through the above vite config, you can directly import the components from the components
Instead of full path: /src/common_components/button_components/NavButton
You can directly NavButton like this:
components/NavButton
Why documentation is important?
According to me, documentation plays a huge role in product development.
But usually, in a startup, it’s very difficult to maintain documentation as components change frequently because of business requirements. But once the product is mature, it’s important to document not only technical things but also its business context/
As new people get hired, the documentation will play a significant role in understanding the product and the contribution directly depends on how well you understand the product.
Reading is faster than listening or watching. And you can always read at your own speed.