From 5d97e8c4ef58184bd49931a72adfc21f25994798 Mon Sep 17 00:00:00 2001 From: Shaswat Rungta Date: Sat, 19 Apr 2025 05:37:38 +0530 Subject: [PATCH 1/2] Add outline --- _data/series.yml | 9 +++- _posts/start/2025-04-19-ui-set-up-lint.md | 64 +++++++++++++++++++++++ 2 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 _posts/start/2025-04-19-ui-set-up-lint.md diff --git a/_data/series.yml b/_data/series.yml index f68fcb9..99e83d9 100644 --- a/_data/series.yml +++ b/_data/series.yml @@ -1,4 +1,3 @@ - - name: Distributed Systems description: Setting up different parts of a distributed system from scratch to unbox how things happen in the background. status: ONGOING @@ -12,7 +11,13 @@ - name: Web explorations description: Experiments in different types of web technologies. id: WEB - + +- name: Starting right + description: Things to consider when starting a new project. + id: STARTRIGHT + status: ONGOING + sortInReverse: true + - name: Understanding Redis description: Trying to set up a production Redis cluster using docker. We will start with "What is Redis" and try to end up configuring a multi node cluster. The intent will also be to setup monitoring and automation wherever applicable. status: ONGOING diff --git a/_posts/start/2025-04-19-ui-set-up-lint.md b/_posts/start/2025-04-19-ui-set-up-lint.md new file mode 100644 index 0000000..4b6467a --- /dev/null +++ b/_posts/start/2025-04-19-ui-set-up-lint.md @@ -0,0 +1,64 @@ +--- +layout: post +unique_id: STARTRIGHTUI1 + +title: UI - Set up Lint +tldr: Write code as if written by one person. +permalink: /blog/start-right/ui-set-up-lint +author: srungta +tags: + - UI + - StartRight + +series: + id: STARTRIGHT + index: 1 +--- + +#### Start Right - UI - Set up lint + +### Introduction + +Linting is essentially enforcing common code styles. + +It is a crucial step in UI development that ensures your code adheres to a consistent style and avoids common errors. By catching issues early in the development process, linting helps maintain high-quality code and reduces the likelihood of bugs. + +#### Benefits of Linting: + +- **Improved Code Consistency**: Enforces a uniform coding style across the team, making the codebase easier to read and maintain. + ☝️ Bonus advantage for new devs to onboard. +- **Error Prevention**: Detects potential issues such as syntax errors, unused variables, or deprecated APIs before they cause runtime problems. +- **Enhanced Collaboration**: Simplifies code reviews by reducing subjective discussions about style and formatting. Discussions about space versus tabs is a waste of time. Decide early and stick to it. +- **Time Savings**: Automates the process of identifying and fixing common coding mistakes, allowing developers to focus on building features. +- **Scalability**: Ensures that as the team grows, the codebase remains clean and manageable. **👈 Cannot stress this enough!** + +### Choosing a Linter + + - Overview of popular linters (e.g., ESLint, Stylelint). + - Criteria for selecting the right linter for your project. + +### Setting Up the Linter + + - Installing the linter. + - Configuring the linter for your project. + - Adding linting scripts to your build process. + +### Customizing Rules + + - Understanding default rules. + - Modifying rules to fit your team's coding standards. + +### Integrating with IDEs + + - Setting up linting in popular IDEs (e.g., VS Code, WebStorm). + - Benefits of real-time linting feedback. + +### Automating Linting + + - Running lint checks in CI/CD pipelines. + - Enforcing linting rules in pull requests. + +### Conclusion + + - Recap of the importance of linting. + - Encouragement to adopt linting as a best practice. From b57b0e8a5e0f2468b7c08556e85c1e24213c6294 Mon Sep 17 00:00:00 2001 From: Shaswat Rungta Date: Sat, 19 Apr 2025 05:38:18 +0530 Subject: [PATCH 2/2] Add some basic data --- _posts/start/2025-04-19-ui-set-up-lint.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/_posts/start/2025-04-19-ui-set-up-lint.md b/_posts/start/2025-04-19-ui-set-up-lint.md index 4b6467a..34cbdbc 100644 --- a/_posts/start/2025-04-19-ui-set-up-lint.md +++ b/_posts/start/2025-04-19-ui-set-up-lint.md @@ -34,8 +34,22 @@ It is a crucial step in UI development that ensures your code adheres to a consi ### Choosing a Linter - - Overview of popular linters (e.g., ESLint, Stylelint). - - Criteria for selecting the right linter for your project. +When selecting a linter for your project, consider the following: + +- **Popular Linters**: + + - **ESLint**: Ideal for JavaScript and TypeScript projects. Highly customizable and widely adopted. + - **Stylelint**: Focused on CSS and preprocessor languages like SCSS and Less. + - **Prettier**: A code formatter that works well alongside linters for enforcing consistent code style. + +- **Selection Criteria**: + - **Language Support**: Ensure the linter supports the languages and frameworks used in your project. + - **Community and Plugins**: Look for a linter with an active community and a rich ecosystem of plugins. + - **Ease of Configuration**: Choose a linter that is easy to set up and customize to match your team's coding standards. + - **Performance**: Opt for a linter that runs efficiently, especially for large codebases. + - **Integration**: Verify compatibility with your IDE, build tools, and CI/CD pipelines. + +By carefully evaluating these factors, you can select a linter that best fits your project's needs and ensures a smooth development workflow. ### Setting Up the Linter