DEV Community: Ashique Billa Molla

Basic Popular Use Cases of Git

Ashique Billa Molla — Sun, 19 Jun 2022 18:40:59 +0000

So, all the people out there who are writing fabulous codes that has to be backed up somewhere. The changes you are making in your code on the way of developing some applications, you must keep track on that. And also while you are in a team, everyone's collaboration has to be summed up nicely. And for that we have a great Version Control System (VCS), Git.

In this post I have stated some basics and popular applications of git which will help you while you are using git repositories (repos) like GitHub or Azure DevOps (ADO) repos.

I have answered the following questions designing some cases:
How to create a git repository in the local as well as in the remote repos?
How to push your code?
How to pull your code?

Case I- Create a Remote Repository and Clone It to Your Local:

Step1. Create a repo in the ADO Repository section or in the GitHub by providing a title to your project.

Step2. A project is created generally with a 'main' branch. But it is always better and standard way to create a new branch and work on that new branch. So create a new branch, by clicking on the dropdown where you see 'main'. I have created the new branch and named it as 'first-branch'.

Step3. Copy the link of the remote repo to your clipboard.

Now It's time to bring the repo into your local.
Step4. Create a folder in your local at a desired directory.

Step5. Open your terminal (like command prompt in windows) by selecting all the keywords from your current directory header field and typing cmd. It will directly open the cmd in the current directory. Or just open your terminal and type cd your_current_folder_directory. In my case the folder is Demo_Folder.

Step6. Type git clone <url>, the URL you copied. -> You will see a local copy of that remote repository has been created. Now you can build project in your folder.

After creating a project(adding files in the "cloned" repo) you obviously want it to push in the remote repo. Follow the steps:
Step7.At first open your terminal with the "cloned" folders as the current directory.

Step8. To know you are on the appropriate branch run the command git branch. It will show us that we are on main branch as the main branch will be highlighted. But we have to switch the branch.

Step9. To know all the created branches run git branch -a.

Step10. Now to switch to the 'first-branch' run git checkout first-branch.

Step11. Again run the git branch command to asure that you are on the 'first-branch'.

Step12. To know what are the files there just run git status. In my case I have created two files -> index.html and styles.css

Step13. Now run git add --all to "stage" all the files in your repository.

Step14. git commit -m "<message>" will commit your code. And within a string you can write your message to indicate the changes and updates you have made.

Step15. Now finally run git push which will push your codes/ files to the remote repository. Congratulations, you successfully pushed your code. Your git repo will be something like this 👇

Now, every time you update your code just follow the steps from step no. 7 mentioned above to push them.

Merging the branch:
After your work is complete and you have to merge the manually created branch with the 'main-branch'. Follow the steps below:
Step16. At first you have to create pull request. By clicking on the option Pull request.

Step17. Then click on the 'New pull request' button.

Step18. Compare two branches and after observing the changes click on 'Create pull request' button. Describe your pull request and Create pull request. While you are on a team, basically one reviewer reviews the pull request and approves. Then the approver merges the pull request by clicking on 'Merge pull request'. button.

Step19. Confirming the merge you have successfully merged the branches and you can delete the custom branch you created.

Case II- Local Project is Already Created:

Step1. At first create your repo in the cloud(GitHub).

Now you have to initiate a git repo in that local folder where the project is already present:

Step2. Open your terminal with the current folder as the current directory. In my case it's 'new-project'

Step3. Then run git init

Step4. then run git add --all

Step5. Run git commit -m "<your_commit_message> just like step 14 in the previous case.

Step6. Run git branch -M main to push the code into main branch. At this time if you check your current branch by using git branch you will see Main is your branch now.

Step7. git remote add origin <url> command will add your remote repo into the local.

Step8. finally push by using git push -u origin main.

Case III- Syncing Up Local with Remote Repo:

You might face one case when the project is set up in your local but it is not up-to-date. To sync up your local repo with the remote repo just run:

Step1. git pull

Then the further pushes can be done by following the previously mentioned steps in the case I from 7 to 15.

Although I have only talked about GitHub repositories but the configurations and user flows are almost the same for ADO Repos. You just have to play around with them. If you observe any further issue while you are pushing your code, comment it here or DM me on twitter or just google it.

Thank you for reading it. Hope it has helped you. Follow me on twitter, I post about web development. See you on the next article!!

15 Beautiful Color Gradients using CSS

Ashique Billa Molla — Sun, 12 Jun 2022 07:42:34 +0000

👋, I am here with another list. In this post I have enlisted 15 aesthetic color gradients using CSS (examples of colour gradients in CSS) which you can implement in your next projects.

I have used linear-gradient method of CSS and only the gradient direction 'to bottom left'. There are many others gradient directions like 'to right', 'to top' etc. to read about the linear-gradient method you can refer to this freecodecamp article.

Let's jump into the list:



background-image: linear-gradient(to bottom right, #FF512F, #DD2476);



background-image: linear-gradient(to bottom right, #FF61D2, #FE9090);



background-image: linear-gradient(to bottom right, #72FFB6, #10D164);



background-image: linear-gradient(to bottom right, #FD8451, #FFBD6F);



background-image: linear-gradient(to bottom right, #305170, #6DFC6B);



background-image: linear-gradient(to bottom right, #00C0FF, #4218B8);



background-image: linear-gradient(to bottom right, #009245, #FCEE21);



background-image: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);



background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);



background-image: linear-gradient(to bottom right, #FDABDD, #374A5A);



background-image: linear-gradient(to bottom right, #38A2D7, #561139);



background-image: linear-gradient(to bottom right, #121C84, #8278DA);



background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);



background-image: linear-gradient(to bottom right, #FFDB01, #0E197D);



background-image: linear-gradient(to bottom right, #FF3E9D, #0E1F40);

Congratulations!! You have successfully read this long list. I have also tweeted this one, you can bookmark it there for your future reference.

I have gathered this colourful ideas from Pinterest.
I Hope, you have found it useful. Share the article, comment which one you are going to use and comment your feedbacks as well.

Also, I write about web development on twitter, follow me there for understanding web development technologies easily.

Thank you!! See you soon...

Midnight Fun- Meme on JavaScript splice( ) 😆

Ashique Billa Molla — Tue, 07 Jun 2022 18:28:06 +0000

splice() method is used on javascript array to remove element.
The syntax is:
splice(start_index, delete_count(optional),item(optional))

One use case I found on twitter 😂

The reply I got🤣:

Comment what does it mean and comment your reaction on it!!

Also the splice () method can be used to add, remove, update array elements. To understand it read my tweet 👇
JavaScript splice() method

Thanks...

10 Cool Rest APIs for Your Next Projects

Ashique Billa Molla — Sun, 05 Jun 2022 06:41:56 +0000

Finally, I have clicked the blue 'Write your first post now' button on the dev.to/dashboard page. Yes, Beautiful folks, here I am with my first blog post ever. In this article I have jotted down some REST APIs which will help you to consume needful data for your next websites. For the first 8 in the below list you do not even need to sign up!!🤘 Let's get started:

JSON Place holder:
JSON placeholder API is a very good API for beginners. This API comes with 6 common resources (comments, albums, photos, todos and users). You can also use their Mockend service to create your own API. However it is a paid version.
Lorem Picsum:
To give your website an outstanding look, you have to embed photos and this Lorem Picsum API is photo factory. This is an wonderful API with the collection of pictures. By using various routes and query params (as stated in the documentation) you can fetch pictures of several size and categories.
PokeAPI:
This is a RESTful API with all the Pokémon data in one place.
The Star Wars API:
The Star Wars API aka SWAPI have consolidated all the first 7 star wars movie data for us.
The Rick and Morty API:
This one is a very interesting API with all the Rick & Morty sitcom character data. You can also apply filter, search and pagination functionality while consuming this API. Here is a very good project for beginners to learn react using this API.
Fake Store API:
This is a free e-commerce API. You can consume it while you are making an e-commerce or shopping website without running any server-side code.
REST Countries:
Using this API you can get information about countries. This RESTful API's new version has added couple of new features along with search functionality. Refer the official documentation to get started.
OPEN Library API:
A bunch of APIs is provided by the Open Library. Calling this API in your project you can exhibit books by authors, subject etc.
Weather API:
You must have thought once to build an weather app. Weather API is the resource you need for that. This API needs API key to authorize.
NASA API:
This website has listed super cool APIs provided by NASA with NASA data, including imagery. You do not need to authenticate in order to explore the NASA data. However, if you will be intensively using the APIs to, say, support a mobile application, then you should sign up for a NASA developer key.

That was all spectacular REST APIs for the time being. Hopefully, you have found this list helpful. I would love to know which one you have used or you are going to use, comment below👇. If you enjoyed this article share it with your friends. Also feel free to reach out to me if you have any feedback or facing any issue while fetching the APIs. Follow me on twitter ashique for learning web development easily. Thanks and see you in the next one, Happy coding!! 😁