DX setup - Improving Developer Experience

[kalpeshsingh]

Thank you for building and curating jobs, events, articles, and other useful things around the frontend.
I loved the layout, design, and of course domain name.

I have audited the project and found that there is a room for improving DX in the project where I can contribute. Please vote for which one should be part of the DX setup, I'm happy to tackle all of them.

---

📬 Formatted commit messages

As the project will grow, we need to take care of the format of the commit. This will help us to filter and find a specific commit easily and also enforce developer to write better commit messages. I have Commitizen in my mind.

📄 Dependencies import orders

Sometimes it is not easy to scan module imports. We can separate them based on a pre-defined list. This will help developers to quickly scan the imports and make imports more readable. I can send PR for one file fix along with a pre-defined list.

Example from BlogDetails.vue

/** 3rd Parties **/
import VueMarkdown from "vue-markdown";

/** Components **/
import Comment from "@/components/Comment/Comment";
import AddComment from "@/components/Comment/AddComment";

/** Services **/
import commentService from "@/services/comment.service";
import blogService from "@/services/blog.service";

/** Utilities and Constants **/
import eventBus from "@/utilities/eventBus";
import { ToastType, messages } from "@/constants/constants";

🧪 Test files organization

If we follow the generally recommended practice of keeping test files along with code we are testing then we can take home a few benefits.

• We can have shorter relative paths
• Colocation eliminates mimicking same folder structure
• We are confident to find test cases easily as it resides in the test folder next to our file we are testing

🛎 Discourage direct push to the main branch

There is nothing problematic if we push code directly to main if the developer is confident or it is trivial fix such as a typo or specific CSS change. Though, we should inform others that code is pushed to the main branch. We can use pre-commit to send a notification to messaging apps (Slack, Chime) using cURL.

📁 Code formatting

Again, when multiple people contribute then it gets out of hand when we don't enforce formatting. We can use tools like Prettier to make formatting consistent in a codebase without manual effort.

⚓️ Git hooks

Seems like we don't lint code when we push code. We can introduce Husky to lint, format, and send a notification when we push code. This way developers don't need to put conscious efforts in fixing formatting and linting.

Excited to hear your thoughts!

[souvikbasu]

Thanks for the exhaustive list of DX setup @kalpeshsingh.
I can sort these in the order of importance:

• Formatted commit messages: needed
• Code formatting: needed
• Git hooks: needed
• Dependencies import orders: needed
• Test files organization: good to have. Currently we don't have tests written but we can organize the test code this way
• Discourage direct push to the main branch: direct push is disabled on master. Currently on PR are accepted. If not then we need to fix this

Will be great if you can pick these all and in the above order :)