DEV Community: anshul137

DPS909 Blog: Release 0.4

anshul137 — Thu, 08 Dec 2022 11:45:50 +0000

Hey everyone, thanks for reading my Blog post.

This week I have worked on the issue which i have described in my previous post Planning.

General Overview

Worked on the ChatGPT for Google, which is the browser extension to display ChatGPT response alongside Google Search results, supports Chrome/Edge/Firefox.
And
Basic-memory-game.
I have really liked their idea and want to contribute into their project which i have learned in DPS909.
I have searched through their issue and their repository
and find out they are not using any Linter in their code.
I have learned about the Linter in one of my labs which motivated me to add that into their work.

I have added ESlint into their code and created the npm script to run it from the command line.

Links

Issue-56.
PR.

Issue-106
PR

Issue-108
PR

Conclusion

As of this blog post, I haven't received any reviews on my pull requests from the maintainers.
When starting off this assignment, my goal was to add features which i have learned in DPS909 in open source Projects.
For my PRs, I was able to experiment with a variety of tools some of which I've used before, and some are new for me.
I think all the skills which i have learned in this course will be useful when I work on any future projects.I was also able to experiment with different styles for light and dark modes during this course. Overall, I think this was a great end to a wonderful course and I hope to continue contributing to the open source community.
If I can go back to the first day of the open-source course, I will tell myself that focus more on how to utilize git. I think an open-source project is not possible to be done without knowledge about git and GitHub. Throughout this course, git was the hardest part for me because I was worried if I break the branch. So, I was very careful when I was practicing the git bash commands. However, now, I feel a bit more confident because I practiced more through the labs and assignments of this course. But still, I need to practice some more to be fully confident.

Thanks

DPS909 Blog: Release 0.4-Progress

anshul137 — Tue, 06 Dec 2022 11:06:11 +0000

Hey everyone, thanks for reading my Blog post.

This week I have worked on the issue which i have described in my previous post Planning.
I was successfully able to add the ESlint in the project.

General Overview

Added the ESlint
Added the .gitignore in the project
Fix all the issues generated by ESlint
Created npm script to run the ESlint from commnad line
To run ESlint on all the files use cmd npm run esLint

Linter

Linters help us spot "silly" mistakes that all programmers make, or help us avoid certain code patterns that often lead to bugs. We want to make it easy for ourselves and new developers joining our project to not introduce bugs or bad code.

Links

Issue-106
PR

DPS909 Blog: Release 0.4-Planning

anshul137 — Tue, 06 Dec 2022 08:54:51 +0000

Hey everyone, thanks for reading my Blog post.

Overview

In release0.4 we are asked to add a feature to an open source project.

Planning

For Release 0.4 I have decided to use all the skills which I have learned in this course.
And try to add new feature with those skills in an open sources project.
I have decided to add the Linter to the open source project which I worked on during Release 0.2 which is Basic-memory-game.

I have created the new issue with the description about the new feature and my plan to implement it.
Issue-106.

Adding the linter

And i will Create a simple "one-step" solution for running your formatter and the linter on the entire project from the command line. This could be an npm script.

Thanks

Release 0.3:Internal Project Contribution

anshul137 — Sun, 20 Nov 2022 22:56:27 +0000

Hey everyone, thanks for reading my Blog post. This post is regarding my contribution to Internal Project of Seneca
my-photohub.

Overview

My Photohub is a web app that makes it easy to share your photos on the web. My Photohub takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new GitHub Repository owned by you! Your photo web page is made available to the world via GitHub Pages. Best of all, everything is free and you are in control of the end product.

Issue

Issue is to add the Prettier into this project.

Link to issue Issue 23

Description

Added the Prettier into this project

In .vscode folder
In extensions.json file added Prettier as the recommendation
In settings.json added configration.
Run Prettier via command line npm run format.
Check all the files are formatted via command line npm run format:check
Added .prettierignore
Added .prettierrc.json
Update the CONTRIBUTING.md on how to use Prettier via command line

How to install Prettier

Prettier is an opinionated code formatter with support for:

JavaScript (including experimental features)
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
Ember/Handlebars
JSON
GraphQL
Markdown, including GFM and MDX
YAML

First, install Prettie locally:
npm install --save-dev --save-exact prettier

Create an empty config file to let editors and other tools know you are using Prettier:
echo {}> .prettierrc.json

Create a .prettierignore file to let the Prettier CLI and editors know which files to not format.

Run this command in terminal to format all the documents.
npx prettier --write .

Pull Request

Link to PR

Release 0.3: Internal Code Reviews

anshul137 — Sat, 19 Nov 2022 03:50:18 +0000

Code Review

Code Review, also known as Peer Code Review, is the act of consciously and systematically convening with one’s fellow programmers to check each other’s code for mistakes and has been repeatedly shown to accelerate and streamline the process of software development like few other practices can.

We were asked to work on two code reviews for this assignment.

First Review

First review

In this review i believe theOptimal font sizes for desktop for the button should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). If you can afford to go a bit larger, then even 21px can be pleasant to read.

There are no exact rules for font sizing, but there are some generally good practices to think about when designing.

Second Review

Second review

I have requested to update the README.md.

DPS909 Blog :LAB 10 About Software releases

anshul137 — Fri, 18 Nov 2022 22:51:30 +0000

Overview

This lab focus on this topic

General concepts and terminology of software releases
Git tags
Package managers
User testing

Release tool

To release my app I have used npm.

To release your software, you can follow these steps.

Create a `package.json` file if you don't have in the root directory.

Use this cmd to create the new package.json file npm init.

A package.json file:

Lists the packages your project depends on
Specifies versions of a package that your project can use using semantic versioning rules
Makes your build reproducible, and therefore easier to share with other developers
Make sure to add the name, version and author in your package.json file.

ADD a README.md file to a package

In a text editor, in your package root directory, create a file called README.md.
In the README.md file, add useful information about your package.
Save the README.md file.

Publish your release

Make sure you have created the account npm and verified it.
Use the cmd npm login on your terminal. Login with your username and password.
Use the command npm publish --access public if you want to create and publish scoped public packages.

After releasing my static site to install it locally on your device you can use this cmd npm i agandhi29_static_site_geneator

agandhi29_static_site_geneator

This is the first time when i have release my tool to the npm. It was really great to publish my work in open source so that now everyone can use my static site generator if they want to.

User testing

I have asked my class mate to install the package and run it on their device and all of them were able to run it locally and are fully satisfied with my instructions.

DPS909 Blog :LAB 9 Add Continuous Integration

anshul137 — Fri, 18 Nov 2022 17:56:15 +0000

Overview

To use the CI/CD and automation on GitHub

So, what exactly is GitHub Actions?

GitHub Actions is a native CI/CD tool that runs alongside your code in GitHub. In fact, you may have noticed a tab that says “Actions” in a GitHub repository at some point.
GitHub Actions gives developers the ability to
automate their workflows across issues, pull
requests, and more—plus native CI/CD
functionality.

All GitHub Actions automations are handled via workflows, which are
YAML files placed under the .github/workflows directory in a repository
that define automated processes.

Most common use cases for GitHub Actions

Build, test, and deploy within the GitHub flow
Automate repetitive tasks
Manage users easily at scale
Easily add preferred tools and services to your project
Quickly review & test code on GitHub

Link to my repo

ag-ssg

How to setup github action

Github Actions

After setting up the github Action into my account my YMl file look like this

I have also create the Prettier action in my Repo YML file look like this.

Thanks

DPS909 Blog :Release 0.3 External Project Contribution

anshul137 — Thu, 17 Nov 2022 20:37:11 +0000

Hey everyone, thanks for reading my Blog post. This post is regarding my contribution to External Project Qurl.gq.

Overview

Qurl.gq is an open-source URL Shortener written in Node.js 🔗

Screenshots

In Release 0.3 we were asked to keep working on larger projects to add more features or fix bugs.

First External Pull Request

For my contribution in an external project I have chosen Qurl.gq.
The reason I chose this project is because

I really liked their idea about shortening the URl link.
This project is build using Node.js

My contribution

I want to use my skill which I have learned in my course DPS909 Topics-in-open-source and contribute more into Qurl.gq

So I have decided to include the linter into their project.
I have created the new issue Suggesting them to add the ESLint into their current project.It will help them to avoid certain code patterns that often lead to bugs.
And I have Create a simple "one-step" solution for running your linter on the entire project from the command line.
Furhtermore, I have added Pre-commit and Pre-push This is a pretty important step. This will ensure that before any developer commits any code, the changes made by him are validated with ESLint, and the code is properly formatted.

Developers tend to commit mistakes while coding. For example, you might forget to close a bracket or you might end up creating a variable that already exists. But, mistakes like this might end up breaking your app or site. We might push this buggy code to a cloud repository or it might take a considerable amount of time to resolve the issues caused due to such mistakes. If your code is being reviewed, it would consume your reviewer's time to find such sloppy mistakes or they might miss it completely.

I have added EsLint-Pre-Commit-Hook
The pre-commit hook gets triggered at every time you run git commit before Git asks the developer for a commit message or generates a commit object.

ESLint Git pre-commit hook

I have used this EsLint-Pre-Commit-Hook

To add into your current repo

npm i eslint-pre-commit-hook -D

yarn add eslint-pre-commit-hook -D

Link to issue

issue-33

Additional note

I have Fixed all the error which was shown by the ESlint and make it error-free code.
From now on developers need to fix all the ESlint Errors otherwise they will not be able to commit their work on Git.
This will help to make code maintenance easy.

Outcome

npm run lint

When I commit my code to git using git commit, the pre- commit test is happening before commiting the file to git. If the test fails it will abort the git cmd with error messages.

Link to Pull request

PR.

Thanks

DPS909 Blog :LAB 8 Automated Testing

anshul137 — Fri, 11 Nov 2022 20:01:00 +0000

Overview

One very important part of software development is test automation since it creates an automatic process for one or multiple types of tests to run without the need for manual intervention.
Testing helps a large community of developers (or even a single developer) keep a piece of software evolving in the right direction. Without tests, it's easy to break existing code, introduce unexpected bugs, or ignore important edge cases.
On my application ag-ssg I have used tools for automating my tests when working on a JavaScript/TypeScript codebase is JEST.

Jest is one of Facebook's open-source projects that is both under very active development and is also being used to ship code to everybody on Facebook.com.

Learned from this lab

general concepts and terminology of software testing
unit testing and integration testing

Set Up a Testing Framework

To get Started with JEST.

npm install --save-dev jest

Let's get started by writing a test for a hypothetical function that adds two numbers. First, create a sum.js file:

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Then, create a file named sum.test.js. This will contain our actual test:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Add the following section to your package.json:

{
  "scripts": {
    "test": "jest"
  }
}

Finally, run yarn test or npm test and Jest will print this message if your code has passed all the implemented test

This is the first time when i have used the JEST to test my code. I have learned alot that how we cannot use the import statement when we are creating the .test.js file it will give us the syntax error we manually need to configure JEST so that it can work with the importstatement in the code.

Why to use Jest

List feature of jest

Simple and fast, ideal for prototyping.
It allows the generation of code coverage reports simply by adding the argument —-coverage to the command line.
Error reporting during test execution is rich and valuable.
Documentation and the community around the tool are really good.

Thanks

DPS909 Blog :LAB 7 Intro to Static Analysis

anshul137 — Wed, 02 Nov 2022 01:04:58 +0000

Overview

In this week we are focused on managing project complexity through the use of Static Analysis tooling. Static analysis tools operate on our source code (static) vs. running program (dynamic). They help us maintain the quality of our source code by fixing formatting issues, spotting suspicious coding constructs, or alerting us to common errors.

Link to my project ag-ssg

Learned from this lab

An automatic source code formatter
how to use source code linter
Command-line or project build scripts to run your static analysis tooling
Editor/IDE integration of your static analysis tooling

Source Code Formatter

Automatic source code formatters (also known as beautifiers or "pretty printers") take source code as input and produce properly formatted output. Their goal is to establish a common format for all source code in the project.

For my project I have used prettier as the formatter.
Prettier is an opinionated code formatter with support for:
JavaScript (including experimental features)

JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
Ember/Handlebars -JSON
GraphQL
Markdown, including GFM and MDX
YAML It removes all original styling* and ensures that all outputted code conforms to a consistent style.

Install

First, install Prettier locally:

npm install --save-dev --save-exact prettier

Then, create an empty config file to let editors and other tools know you are using Prettier

echo {}> .prettierrc.json

Now, format all files with Prettier:

npx prettier --write .

I have created the npm script to run the code formatter

npm run format

When I run this formatter on my code it has fixed all the indentation and format issues which i have on my code.

Linter

For my project I have used ESLint to find and fix problem in my .js files. SLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
Install and configure ESLint using this command:

npm init @eslint/config

After that, you can run ESLint on any file or directory like this:

npx eslint yourfile.js

I have created the npm script to run the code formatter

npm run esLint

When I run the ESLint it created all the error list which are currently on my project and helped me to fix them.

Overall, these tools are great and i believe every programmer should use them so that their code look formatted when they work on any project.
Moreover, Linter help use to find all the silly mistakes we cannot catch.

Thanks

DPS909 Blog :LAB 6 Intro to Docusaurus.

anshul137 — Sun, 30 Oct 2022 03:58:06 +0000

Overview

For this lab we are going to extend our SSG projects by exploring the features of a popular SSG, Docusaurus.

Docusaurus

Docusaurus is a React-based static site generator built and maintained by Facebook. It helps projects document their technology for users and developers, without having to put a lot of effort into creating a full website.

Learned from this lab

Setting up and learning the Docusaurus project for a documentation site
Evaluating existing open source projects for inspiration and ideas when building your own solutions prototyping a new feature in your SSG

Docusaurus Repo and link

After studying through the material and online resource i have created this.
Github Repo:
docusaurus-sample-repo

Deployed link:
docusaurus-sample

Issues created and fixed during this lab

issues-13
issues-14

Feature from Docusaurus

I really like the theme feature where user can switch from dark mode or light mode according to their choice.
I have use the Darkmode.Js to achieve this functionality in my code.
After finishing my code i have created this
PR

Outcome after implementing my feature

Dark Mode

Light Mode

Now all the linked pages and newly created features will have this feature.

Thanks

DPS909 Blog :Final Blog

anshul137 — Thu, 27 Oct 2022 10:17:41 +0000

Hey everyone, thanks for reading my Blog post. This post is regarding my final recap of HACKTOBERFEST.

Overview

In Release 0.2 we were asked to participate in the HACKTOBERFEST so that we could contribute to real open source projects. Furthermore, the main goal of this release is to help you gain experience and confidence in contributing to open source projects through direct involvement in a number of real projects.

Link to my Blogs

October Recap

This is my first time contributing to HACKTOBERFEST.
During the month of October I have learned a lot about the open source community and various projects which I did not know and which are built on open source frame work.
During my release 0.2 i got to chance to walk through various frameworks which are used by different projects and i am not aware of.

For my PR 1. I have learned about how prettier action worked with husky and created the Prettier action file which will indent the code on each push and pull to the repository.

For my Pr 2
Fixed spelling error on website. The website is still in his development phase. html.org.in is an open-source HTML learning website which contains all the information about latest Html5 features and how to use them.

For my Pr 3
I have got the chance to work on Qurl.gq which is an open-source URL Shortener written in Node.js. In this website I have to create the script and add a script in package.json to format every file (*.js, *.ejs, *.css).

For my Pr 4
I have contributed in Bhagavad Gita Website Code for the Bhagavad Gita website, a website built for Gita readers by Gita readers.
And worked on their issue where their language button was not converting the text into different languages.

Conclusion

Working in the open source community I have tackled many challenges and by solving them learned new ways how to deal with the problems and fix them.
I believe taking this course really helped me to learn how to work on real projects.

Thanks

DEV Community: anshul137

DPS909 Blog: Release 0.4

General Overview

Links

Conclusion

DPS909 Blog: Release 0.4-Progress

General Overview

Linter

Links

DPS909 Blog: Release 0.4-Planning

Overview

Planning

Adding the linter

Release 0.3:Internal Project Contribution

Overview

Issue

Description

How to install Prettier

Pull Request

Release 0.3: Internal Code Reviews

Code Review

First Review

Second Review

DPS909 Blog :LAB 10 About Software releases

Overview

Release tool

Create a package.json file if you don't have in the root directory.

ADD a README.md file to a package

Publish your release

User testing

DPS909 Blog :LAB 9 Add Continuous Integration

Overview

So, what exactly is GitHub Actions?

Most common use cases for GitHub Actions

Link to my repo

How to setup github action

DPS909 Blog :Release 0.3 External Project Contribution

Overview

Screenshots

First External Pull Request

My contribution

ESLint Git pre-commit hook

Link to issue

Additional note

Outcome

Link to Pull request

DPS909 Blog :LAB 8 Automated Testing

Overview

Learned from this lab

Set Up a Testing Framework

Why to use Jest

DPS909 Blog :LAB 7 Intro to Static Analysis

Overview

Learned from this lab

Source Code Formatter

Install

Linter

DPS909 Blog :LAB 6 Intro to Docusaurus.

Overview

Docusaurus

Learned from this lab

Docusaurus Repo and link

Issues created and fixed during this lab

Feature from Docusaurus

Outcome after implementing my feature

Dark Mode

Light Mode

DPS909 Blog :Final Blog

Overview

Link to my Blogs

October Recap

Conclusion

Create a `package.json` file if you don't have in the root directory.