CSS Animation Methods

There are 2 popular ways to use CSS animations

“animation-name” Method: (The animation will happen as soon as you load)

Use -webkit-animation-name: Something;

Sample code:

-webkit-animation-name: moveright;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;

@-webkit-keyframes moveright
0% {
right: 200px;
100% {
left: 200px;

**Usually, if you don’t describe an end state for your webkit animation it will go back to its original state, to avoid this use animation fill mode:


“transition” method: (Use this method if you want to initiate the animation after an action)

From the W3schools example:

transition:width 2s;
-webkit-transition:width 2s; /* Safari */


In this case, the transition will ONLY happen during the hover, the “webkit-transition” method WILL NOT allow you to activate it onload, in this case it is better to use the ‘webkit-animation-name’ way.

More About CSS3 Transitions:


Of course, you can also use jQuery for the animation but it is very taxing to use the DOM, the CSS way is A LOT faster because it will leverage the GPU.

Git 101 – An intro to Git

What is Git?

According to Wikipedia “Git is a free distributed revision control, or software source code management project with an emphasis on being fast”. The main principal behind git is fast and parallel development. What does this all mean? First off, Git is not a concept, or a best practice it’s actually a piece of software(like a text editor) used for development and it manages your source code.

Git is associated with “revision control”, the idea is that it’s a good idea to keep a historical snapshot of your coding projects. This is a good idea so that you can have multiple backups of your code in case something goes awry.

Git is completely used in the command line, so it’s a good idea that a user be somewhat fluent to the basics of the command line(Mac terminal). I wrote a seperate blog post about the basics of mac terminal in case you need some review.

Git “Lingo/Jargon”

Repo: A repo is short for “repository”, which is the project folder where your code lies

commit: A commit is a snapshot of your project at that specific instance

forking: Forking is the term used when you clone and use a project from github

branch: A branch is essentially a copy of the repo, you can thing of it as a safe sandbox that you can mess around and play with that has no serious consequences. A branch is typically used when fixing bugs or working on a new feature.

Getting started with Git

1. The first step is to create a “repo”
2. First create a project folder and navigate into that folder using cd inside the terminal. Use the “git init” command to initiate git
3. Once you’re in the repo you need to tell Git what to track, use the “git add .” command to track all changes (the period is used to track all). *In case you want to only track a specific file you can just point to the file name. For example git add index.html
4. Now it’s time to take a snapshot, to do this you use the “git commit” command. You can add a message by using the extension “-m your message here”
5.  FInally you can use git push to push your changes

Appendix: Good stuff to know

git branch name_of_branch – This command creates a new branch for you
git branches- This tells you how many branches you have (the ‘*’ symbol will tell you which one you’re currently in)
git checkout master – This will take you back to the master branch
git checkout branch_name – Allows you to switch between multiple branches
merge name_of_branch – This allows you to merge the branch to the master.
git branch -d branch_name – This will delete the branch

git clone https://www.github.com/sample project – this will clone the source files to the current directory

git log – shows useful commit history information(who commited, messages, time,etc)

Quick Recap to push a repo:
git init
git add file.filetype
git commit -m “initial commit message”
git remote add origin https://github.com/user/repo_name.git
git push – u origin master