Top Open Source Tools for Web Developers

Dinesh Vishwakarma

[br][br]Web apps load like regular Web pages or websites. Their functionalities include working offline, push notifications, and device hardware access that was traditionally available only to native mobile apps. Web development plays an important role in the Internet ecosystem.[br][br]Let us kick off this discussion on the best open source tools for Web developers with a closer look at Git.[br][br][strong]Git[/strong][br][br]Most developers use the Git repository for version control. The Git server helps to manage multiple repositories (when many people work in the same repository but on different tasks), to keep track of changes in the code.[br][br]Now, let’s understand Git’s workflow, branching strategy and commands. When working in a team, there are some very important things that everyone should know about Git. These include the following.[br][br][strong]The workflow of Git[/strong][br][br]Git uses the same centralised pattern as a subversion (SVN) workflow but the developer is empowered by its ease of use, compared to SVN. All developers have their own local copy of the entire project while each one works independently, oblivious of all other changes to the project. Developers can add commits to their own local branch and completely ignore the main development/master branch until convenient; i.e., when a bug is fixed or a feature is complete.[br][br]In Figure 1, the third stage is the developer’s local branch. The Git Terminal is recommended for use although Git GUI is available. The latter might be easier but the developer community finds the terminal more convenient. In Git Terminal, the command line serves to inform the user and give proper error messages; and when the command fails, it also points out the proper solution.[br][br][strong]Commands in Git[/strong][br][br]To create a working directory, use the following command:[br][br]ssh user@host git init --bare /path/to/repo.git[br][br]To clone the central repository, use the command shown below:[br][br]git clone https://user@host/path/to/repo.git OR git clone ssh://user@host/path/to/repo.git[br][br]The following command is used to create a local branch and checkout:[br][br]git checkout –b [your branch="" name=""][br][br][strong]How to make a change and commit:[/strong] Once a repository is cloned in the local machine, then the developer can make changes using the standard Git commit process — to edit, stage and commit. If the developer is not familiar with staging, then the other way to prepare a commit without having to include more changes in the working directory is as follows:[br][br]git status # View the state of the repo git add [some-file with="" give="" proper="" path=""] # Stage a file git commit –m “Give Proper message” # this is the local commit in your local branch git push origin [your local="" branch="" name=""][br][br][strong]Pushing a new commit in the central repository:[/strong]Once the local repository has new changes committed, these should be pushed to share with other developers in the project, by using the following command:[br][br]git pull origin development branch[br][br][strong]Git merge development:[/strong] If you encounter a merge issue, open your merge tool, solve all conflicting merge issues and then repeat the following command:[br][br]git status git add [files with="" proper="" path=""] git commit –m “give proper message” git push origin [your local="" branch=""] git checkout development git merge [local branch="" name=""] git commit –m “give proper message” git push origin development[br][br][strong]Best practices for Git[/strong][br][br]Let’s look at some of the best practices of Git, based on experience.[br][br]Use a proper branching strategy and pull request:It is a good practice to take a pull from the main repository before pushing code changes into it. This can save many hours that would otherwise be wasted on conflict resolution. This consists of just two basic steps.[br][br][ul][li]First, for every new feature, start a new branch based on that feature. Do not touch the master branch as you continue development.[br][/li][/ul][ul][li]Once the development branch is stable, create a pull request. If you’re working with others, this allows them to review your changes. When all issues are settled, merge the code into the repository.[br][/li][/ul]Do backup: Backing up saves lives! Repeat those words over and over again! It is important to take backups of Git also. It is critical to perform this exercise frequently. Git Clone is also a kind of backup.[br][br][ul][li]Use meaningful commit messages: When code is committed, a proper commit message must be sent. That is one of the easiest, most useful things you can do as a developer of that code so that people can easily understand what changes you have made in the code without having to read or debug it. Even when you check the history, you will understand the changes in the code because of good commit messages. Hence, commit messages play a very important role.[br][/li][/ul][ul][li]Always review code before committing: It’s common for basic Git introductory tutorials to suggest always committing code with the Git commit -m without accurately explaining what the command does. By using the commit command as in other legacy VCS (version control system), one of the most useful features of Git is ignored. Git has introduced a new feature to the VCS called the ‘staging area’. It sounds complicated, but it is actually a very simple tool. As per this command, the index is a place to indicate what exactly to include in the next commit. Before using the commit command, first use the Git status command so that you know all the changes in your code. Try to avoid merging commits whenever possible. Merge conflicts could happen in rare cases when two developers write code on the same line.[br][/li][/ul][ul][li]Don’t commit half-done work: Please do not commit half-baked code. Once your work is complete, first commit your code in your local branch and then push it to your development/master branch. But that doesn’t mean you have to complete the entire functionality of a large feature before committing. You can split the implementation of your large feature into logical parts and remember to commit early and often. Commit each small logical part, one at a time, in your local branch, and once the entire functionality is achieved, commit and push the code to the development/master branch. Do not commit just to have something in your local repository before leaving the office at the end of the day. If you’re tempted to commit just because you need a clean work slate, use Git’s ‘Stash’ feature instead.[br][/li][/ul][strong]Bootstrap[/strong][br][br]Bootstrap is one of the most popular open source HTML, CSS and JS front-end frameworks. Its latest available version is 4.2.1. In Bootstrap, a 12-grid responsive layout is available, apart from 13 jQuery plugins, SCSS (which is common for UI-like carousals), pop-ups, modals, and other customised Bootstrap classes. Bootstrap is easy to learn and is used for creating responsive websites.[br][br][strong]How to install and use Bootstrap[/strong][br][br]There are two methods to install Bootstrap in your project.[br][br]Bootstrap package installation using npm requires you to use the following code to install the latest version of Bootstrap:[br][br]npm install bootstrap // …or to use the following code to install a specific version of Bootstrap: npm install bootstrap –v 4.2.1[br][br]The CDN method: When you are using only CSS and JS, you can use this method.[br][br][ul][li]For CSS, add the CDN link in your head section, as follows:[br][/li][/ul][link rel="”stylesheet”" ef="”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”" integrity="”sha384-MCw98/" sfnge8fjt3gxweongs="" 7zt27nxfoaoapmym81iuxopkfojwj8erdknlpmo”="" crossorigin="”anonymous”"][br][br]For JS, Proper.js and jQuery, use the following code:[br][br][script src="”https://code.jquery.com/jquery-3.3.1.slim.min.js”integrity=”sha384-" i="" x+965dzo0rt7abk41jstqiaqvgrvzpbzo5sm="" xkp4yfrvh+8abtte1pi6jizo”crossorigin="”anonymous”"] [/script] [script src="”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”integrity=”sha384-ZMP7rVo3mIykV+2" +9j3uj46jbk0wlauadn689acwoqbbjisnjak="" l8wvcwpipm49”crossorigin="”anonymous”"] [/script] [script src="”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”integrity=”sha384-Chfqqxu" zucnjsk3+mxmpniye6zbwh2imqe241ryiqjxymiz6ow="" jmzq5stweulty”crossorigin="”anonymous”"] [/script][br][br]If you don’t have much knowledge about HTML, CSS, JavaScript or jQuery, there’s no need to worry because the Bootstrap framework is easy to learn and use.[br][br][br][strong]So[/strong][strong]urce[/strong][br][br] [br][br][/local][/your][/files][/your][/some-file][/your]