How to edit existing files on Bitbucket using Git

git-article-estefanirangel

OVERVIEW

Do you want to use a version control system to work within teams or for your own control?

You might have two main options: Github and Bitbucket. I prefer Bitbucket because of their interface.

Anyway, if your team already have an ongoing project within an existing repository, this tutorial will help you to upload changes from your local machine.

1. First of all install Git

Download Git at this page.

For this tutorial we are going to use command line.

https://git-scm.com/

2. Cloning

Clone the existing file from the repository online to your local machine. You cannot have a folder with the same name.

To clone, make sure you know the address to your Bitbucket repository. It is located at this top part of the screen, at the overview page of the online repository.

Copy it, and then open Git Bash and type git clone. Right click at the window, you will find an option to paste.

bitbucket-estefanirangel

3. Replacing files and adding

Once you clone, you will see that there is a new folder with the cloned files. Access this folder and replace the files with the ones that you have edited and want to replace at the online repository.

You can run git status to see what happened.

Make sure you when to the correct directory where you folder is. You may need to use cd name-of-the-folder.

Now, we are going to add. When you add, all changes are going to the staging. Which means that they are half way from being actually updated.

Type git add .

4. Commit

We need to commit these added files, so people can know which kind of changes you’ve made.

Type git commit –am “commit you want to make”

5. Push

Check your status right now typing git status.

Now we are finally going to push the added files.

Type git push

You will be requested to answer your password at Bitbucket.

Check now your online repository to make sure everything is fine.

Estefani Rangel

About the author

Estefani Rangel is a web developer graduated at the New Media and Web Development program at BCIT in Vancouver. Her passion is Front-End development.

She is always excited with sunny days, and it is quite impossible to keep her indoors if you don’t offer her a code editor to play with.

Easy Scrolling animations

Scrolling animations engage users to pay close atention to items that you want to emphasize. Besides, it also creates a professional look than will distinguish your websites from static ones.

At the demo page, it is possible to notice how the plugin is simple and cases a good effect.

For creating this effects, you will have to download two files from the creators of the waypoint plugin. They’re not heavy. Compressed, they weight about 10KB.

  • jquery.waypoints.min.js
  • waypoint.js

Besides these files, also include a CSS file with the animate.css library created by Daniel Eden. You can find stunning and various animations to choose from his website. Edit this file later to just include the animations you are going to use.

  • animate.css

Embed these files via enqueue (wordpress) or just including as the first line after the body tag.

After embeding, include the following code after the body tag, within a script tag:

var $box1 = $(‘.box-1′); /* replace .box-1 with your custom  css class that you’ll animate*/
$box1.waypoint(function(direction) { /*associate your class with the waypoint plugin*/
if (direction==’down’) { /*parameter for the waypoint plugin, activated when scrolling down*/
$box1.addClass(‘swing’); /*where swing is one animate.css class, that you can replace anytime, just picking from the animate.css website. This line is turning on the animate class.
}
else {
$box1.removeClass(‘swing’);
}
},
{offset:’70%’}); /** distance from top of the screen */

After that, just add a class called “animated” at the element that you are animating in your markup (HTML) file.

I hope this article was useful. Any doubts, be not afraid to ask.

 

Estefani Rangel

About the author

Estefani Rangel is a web developer graduated at the New Media and Web Development program at BCIT in Vancouver. Her passion is Front-End development.

She is always excited with sunny days, and it is quite impossible to keep her indoors if you don’t offer her a code editor to play with.