Saturday Talk

Briefly about HTML & CSS

Tag

<tag>...</tag>

<tag/>

 <div>...</div>

 <span>...</span>

 <h?>...</h?>

 <a>...</a>

 <img/>

 <input/>

<link/>

Element

display: block

display: inline

Visibility

position, overflow, float, z-index

transition, animation

Cascade

  1. Browser style
  2. Author style
  3. User style
  4. Author style + !important.
  5. User style + !important.

Git

Why it's important?

  • To divide work of the team
  • Storing all stages of the app
  • Release & Backup

How to start

$ git clone <your_repo_uri>

Create repo

Get new repo

Generate ssh-key

$ cd ~/.ssh
$ ls
  id_rsa    id_rsa.pub

Check:

$ ssh-keygen

Generate:

$ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAklOUpkD...

Show pub key:

Set ssh-key

Set config

$ git config --global --list
  user.name=Anton Bely
  user.email=anton.bely@iii.com

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

Global config:

remote and ...

$ git remote
  origin
$ git remote -v
  origin  git@bitbucket.org:randiii/conv-ui-patrons.git (fetch)
  origin  git@bitbucket.org:randiii/conv-ui-patrons.git (push)
$ git remote get-url origin
  git@bitbucket.org:randiii/conv-ui-patrons.git

Remote list:

Workflow

Real world workflow

Branches

$ git branch
  feature/DIS-5708-checkouts
  feature/DIS-7149-update-navigation
* master

Show all branches:

$ git branch feature-branch
$ git branch
  feature-branch
  feature/DIS-5708-checkouts
  feature/DIS-7149-update-navigation
* master
$ git checkout feature-branch
Switched to branch 'feature-branch'

Create & checkout:

$ git checkout -b awesome-feature
Switched to a new branch 'awesome-feature'

A little bit shorter:

Branches

$ git checkout feature
$ git merge master
$ git merge master feature
$ git checkout feature
$ git rebase master
$ git checkout feature
$ git rebase -i master
pick 33d5b7a Message for commit #1
pick 9480b3d Message for commit #2
pick 5c67e61 Message for commit #3
pick 33d5b7a Message for commit #1
fixup 9480b3d Message for commit #2
pick 5c67e61 Message for commit #3
$ git push
$ git push --force

After merge:

After rebase:

* Be very careful with --force flag

$ git checkout feature
$ git rebase -i HEAD~3

Merge

Rebase

Git Advanced

$ git checkout <hash_of_commit_b>
$ git checkout HEAD~2 some_file.txt

A revert is an operation that takes a specified commit and creates a new commit which inverses the specified commit.

$ git revert <commit>
$ git checkout hotfix
$ git reset HEAD~2
$ git commit --amend
$ git commit --amend -m "an updated commit message"
$ git commit --amend --no-edit
$ git checkout staging
$ git cherry-pick <commit_hash>

Useful links

Saturday Talk: HTML, CSS, Git

By Anton Bely

Made with Slides.com

Saturday Talk: HTML, CSS, Git

  • 49,184

More from Anton Bely