
## TL;DR
I am by far no JavaScript expert, but for my personal website, I am from now on using [Next.js](https://nextjs.org/) and [tailwindcss](https://tailwindcss.com/) running on [netlify](https://www.netlify.com/). With that [Tech Stack](https://www.mongodb.com/basics/technology-stack) in place, I get a [score](https://www.digitalimpulse.com/heartbeat/google-lighthouse-scores-how-important-are-they-really/) of 100% in each category from Google Lighthouse!

![Lighthouse Report](/images/posts/230114/lighthouse100.webp)

## Hexo + GitHub Pages
Long time ago I started out by creating my very first website with [Hexo](https://hexo.io/) running on [GitHub Pages](https://pages.github.com/). This was an awesome setup, blazing fast, reliable, cheap and easy to deploy - I can totally recommend it!

## Gatsby.js + Netlify
But then all of a sudden one day three years ago, I felt bored and not challenged in using it and so I decided to create a new website this time with [Gatsby.js](https://www.gatsbyjs.com/). Developing within the ecosystem of Gatsby.js was a whole new experience for me and took my knowledge to a next level. It offer super cool plugins, extension and libraries one can use and fool around endlessly. Also the site I built with it, looked pretty cool, especially having react-particles as background in place in dark-mode looked super cool. But the time I had to invest in building and maintaining it was enormous as I am not a JavaScript Pro in any way. Since I started investing all my precious learning time in iOS Development, it bothered me more and more that I had to invest so much time to keep running my site.
Then just lately I had to announce resignation while trying to upgrade from Gatsby4 to Gatsby5. I spent days in analyzing errors, fixing them step by step - with no real success at the end of each day. One who knows the pain best is [Wes Bos](https://twitter.com/wesbos/status/1613009277899210752) - and he is an absolute JavaScript Pro. So I gave up on Gatsby.js and searched for a new tech stack.

## Next.js + Netlify
The world of Web technologies is always on the move, fast paced growing and ever changing. There is no perfect framework and decision making which one to choose at the end for your purpose is challenging. Next.js is a framework build on top of React that helps us build a truly blazing fast and outstanding user experience much easier. Compared to GatsbyJS 4 which I was using before, it seems to me to be the much better fit for my personal website. Light to develop with, less 3rd party dependencies needed and other fancy stuff which I don't actually need. Feels good to be up and running again after not being able (due my failed trial of upgrading to Gatsby 5) to publish any blog post for the past 2 month.


Learn, smile, help and be happy, cheers 🙂

<hr/>
### References
- [Pros and Cons of NextJS](https://pagepro.co/blog/pros-and-cons-of-nextjs/)
- [Introduction to Next.js](https://dev.to/iamdevmarcos/introduction-to-nextjs-5f9b)
- [freeCodeCamp(Learn Tailwind CSS)](https://www.freecodecamp.org/news/learn-tailwind-css/)

New site made with Next.js


# TL;DR

By providing a type and a scope in the header of a commit message, it is often a lot more obvious where changes are applied and
can be found before even digging into the files that are part of the commit.

# We like you too when...

*We like you too when you write clear, specific and short commit messages in our project.* This sentence follows me ever since I am
using [Git](https://simonberner.dev/git). And you know what? They are absolutely right! Having good commit messages which perfectly
describe the commit history, are essential for a projects traceability, finding/fixing bugs and code documentation.
This is the fourth part of my Git series and this time we will have a deeper look at the **optional scope** we can add right after
the **type** in the header of the commit message.

I already briefly mentioned in my first post [How We Will Use Git In The Future](https://simonberner.dev/hwwugitf), the optional field
scope can be used to gain a readers attention even better to tell them in which area in the code something has changed. As you by now probably
can imagine, defining and using a scope depends of course on its used context.
As I can't come up a this point with a general list, I have nevertheless tried to come up with some examples based on the types cheat sheet
from my [last post](https://simonberner.dev/cctcs).

# Examples of using scopes


| Header Type with a (Scope)       | Header Subject                                                    |
|:---------------------------------|:------------------------------------------------------------------|
| feat(*header*)                   | add a new feature to the header of a website                      |
| add(*iOS14*)                     | add iOS14 capability to appium capability config                  |
| blog(*ReactJS*)                  | add a new blog post about ReactJS                                 |
| cut(*feedback*)                  | remove ratings feature                                            |
| fix(*footer*)                    | fix a styling bug in the footer                                   |
| bump(*cypress*)                  | increase cypress from v1.0.0 to v2.0.0                            |
| build(*npm*)                     | add lodash as dependency                                          |
| make/ops(*artifactory*)          | change url to artifactory                                         |
| ci(*jenkins*)                    | add a unit test stage                                             |
| doc(*readme*)                    | update the readme file with a new TODO section                    |
| test(*search*)                   | add a new test for the search feature                             |
| chore(*assets*)                  | remove unused static assets                                       |
| refactor(!)                      | change oauth2 implementation                                      |
| style(*font*)                    | change main font to Newsreader Extra-light 200                    |
| optimize/perf(*images*)          | use webp instead of jpg/png                                       |
| revert(*aboutus*)                | revert the adding of personal emails                              |
| rename(*View*)                   | rename the viewer                                                 |

# Wrapping up

I hope you get some inspiration form the above examples for another day in your commit life. And remember, you don't have to
use a scope, you can if you like to add more context for a viewer.




Cheers, take care and smile once in a while 🙂


Commit Message with Scope



Types as prefix in [conventional commits](https://simonberner.dev/hwwugitf), are used to set the overall context of the applied changes in a commit message.
With a type, a viewer should be able to quickly understand what the intention of the commit is. So e.g. is it a new feature
or some documentation that is added with a particular commit. It often happens to me, that I am unsure which type in particular
I finally shall use in my commit messages. The conventional commits formatting, is heavily inspired by the
[Angular commit message guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
I have collected a few types so far and put together a small cheat sheet in the table below with some common examples.
All you have to do is, to find a proper description for your specific commits. For doing so, ask yourself the following question:
**What will my commit do once it is applied?**

| Syntax        | Description                                                       | Example                      |
|:--------------|:------------------------------------------------------------------|:-----------------------------|
| feat          | addition of some new features                                     | add a new navbar             |
| add           | changes to add new capability or functions                        | add google track id          |
| blog          | new blog post                                                     | add a new blog post          |
| cut           | removing the capability or functions                              | remove tags                  |
| fix           | a bug fix                                                         | fix layout issue             |
| bump          | increasing the versions or dependency versions                    | update cypress-axe           |
| build         | changes to build system or external dependencies                  | switch from npm to yarn      |
| make/ops      | change to the build process, tooling, infra, deploy, recovery     | add sonarqube config         |
| ci            | changes to CI configuration files and scripts                     | add new ci stage             |
| doc           | changes to the documentation                                      | update README                |
| test          | adding missing tests or correcting existing tests                 | add a first test             |
| chore         | changes for housekeeping/cleanup                                  | remove unused files          |
| refactor      | a code change/cleanup that neither fixes a bug nor adds a feature | cleanup abstact class Cat    |
| style         | changes to the code that do not affect the meaning                | brush up main page           |
| optimize/perf | a code change that improves performance                           | reduce image sizes           |
| revert        | reverting an accidental commit                                    | revert dependency update     |

<br/>
I hope you can use some things from this cheat 🗒️ in your daily commit life.

Cheers, take care and smile once in a while 🙂
 
## Resources
➕ [become the best git user](https://medium.com/@github.gkarthiks/conventional-commit-messages-in-git-47b04129fffa)



Conventional Commits - Types Cheat Sheet


# TL;DR
WebP is an image format for the web, developed by Google and initially release in 2010. All the [major browsers natively support](https://caniuse.com/?search=webp)
WebP.

# I have never heard of
I have never heard of the modern image fromat [WebP](https://developers.google.com/speed/webp) before. Just recently
when I was developing my new personal website, I stumble over this modern image format from Google. But what is it and why should
we care and use it anyway instead of the good oldies JPEGs and PNGs?

# Why should we care?
WebP provides an image format which has excellent compression. WebP mages are much smaller in size than other older image formats
and this at a comparable quality. But why did I stumbled over it? Well as I was buidling this new website here, I used
[Google Lighthouse](https://developers.google.com/web/tools/lighthouse) to check whether my site audits well for performance, accessibility,
progressive web apps, SEO and more. At first the performance score I got, was at around 30 - which is really poor. One action I then took then, was
to convert all the used images from JPEGs/PNGs into the WebP format. This massively increased my performance score to now up to 99%! But
I guess that's not only the image format which fosters this high score, there is also some other magic tricks like the used tech stack and the hosting service
behind this.

These here are my current scores I get from measurements with Google Lighthouse! Honestly, I am super proud of them 😅

![lighthouse report](assets/posts/210201/lighthouse-report.webp)

I really like the WebP compression technique for adding much smaller images to the web. Especially when it comes to mobile devices
where images can consume a lot of bandwidth and battery life, small compressed images are a must.

# How to use
How am I going to use wepb to convert existing jpg/png images? Well, there are a lot of different ways how you can use
webp. I will briefly mention two of them in here.

## CLI tool
A pretty stright foward way is using the encoder _cwebp_ on the command line to convert images:

````
cwebp -q 80 flower.png -o flower.webp
````
Or use the decoder _dwebp_ to do the vice versa:
````
dwebp flower.webp -o flower.png
````

Check the [full documentation](https://developers.google.com/speed/webp/docs/using) for a detailed guide on all the detailed
compression settings.

## Imagemin WebP Plugin
The [Imagemin WebP plugin](https://github.com/imagemin/imagemin-webp) can be used to convert your existing images on the fly
right in your code when building the site.

## Verify WebP usage
As I already mentioned, you can use [Lighthouse](https://developers.google.com/web/tools/lighthouse) to verify that all images
on your site are being served using WebP. Run the Lighthouse Performance Audit (*Lighthouse > Categories > Performance*) and look
for the results of the Serve images in the audit. Lighthouse will list any images that are not being served in WebP.

![Lighthouse](assets/posts/210201/google-lighthouse.webp)

# Animated WebP, what?
Sure you can also do that! If you can see the animated [Nyan Cat](https://en.wikipedia.org/wiki/Nyan_Cat) below in your browser, then your browser supports animated WebP!
[Here some advantages and disavantages of using animated webp.](https://developers.google.com/speed/webp/faq#why_should_i_use_animated_webp)
![Lighthouse](assets/posts/210201/animated-webp-supported.webp)

# Closing
WebP is an excellent replacement for JPEG, PNG, and GIF images. With that being said, WebP offers both lossless and lossy compression.
My key takeaway is, that using .webp instead of .png or .jpg, allows my website to load much faster than before. The overall user experience
gains tremendously and the user won't be reminded of the bad old days of dial-up anymore. Especially browsing via mobile networks,
is now much more of a joy. Well then, its up to you to also give it a try, go forward and put WepP to your webs content!


Cheers, take care and smile once in a while 🙂

# Resources/References
➕ [WebP Wiki](https://en.wikipedia.org/wiki/WebP)  
➕ [Using WebP Images](https://css-tricks.com/using-webp-images/) (by [Jeremy Wagner](https://twitter.com/malchata))  
➕ [Use WebP images](https://web.dev/serve-images-webp/) (by [Katie Hempenius](https://twitter.com/katiehempenius))  
➕ [WebP in its 10th year](https://www.youtube.com/watch?v=-wrXKvnPfZg)  
➕ [FAQ about WebP](https://developers.google.com/speed/webp/faq)

I Have Never Heard of WebP


I have come a long way the past years with the version control system [Git](https://git-scm.com/). At first, I was pretty scared of even
touching Git on the cli. Not long ago, I even asked my team mates to run Git commands on my machine to fix things for me. 😞
Time has past since then and a lot has changed in my life. I got brave to take much more "risks" of constantly learning new things
on the go and keep asking myself: What can possibly go wrong when you don't know stuff yet?

Today I am a huge fanboy of it. On this page, I collect all the nice little things I've crossed so far in the **w**ild **w**ide **w**orld about Git.
If you have some other cool stuff which I could add, please ping me, thanks.

> _Not only the selection and usage of a tool makes you invincible, no, mastering by explaining it to others is what makes you a real superhero._

Even Senior Devs are struggling using Git!  

So grab one of my [courses](https://simonberner.rocks/courses/) and get enlightened! 😅

#### gentle intros and a bit more
* [WTF is Git?](https://codeburst.io/so-wtf-is-git-fa7daa0e0271)
* [Oh Shit Git!?!](https://ohshitgit.com/)
* [GitHowTo](https://githowto.com/)
* [Git is simpler](http://nfarina.com/post/9868516270/git-is-simpler)
* [Git the simple guide - no deep shit!](https://rogerdudler.github.io/git-guide/)
* [The thing about Git](https://tomayko.com/blog/2008/the-thing-about-git)
* [Thinking like a Git](http://think-like-a-git.net/)
* [Git refcard](https://dzone.com/refcardz/getting-started-git?chapter=1)
* [A Git manual for beginners](https://medium.com/@ahmedmahmoud.eltaher/git-manual-for-beginners-7932a6523d2f)
* [Create a .gitignore file for your project](https://www.gitignore.io)
* [10 Git commands you should know](https://towardsdatascience.com/10-git-commands-you-should-know-df54bea1595c)
* [Quick reference, GitHub Cheat Sheet, Visual Cheat Sheet](https://devdocs.io/git/)
* [Git Reference](https://git-scm.com/docs)
* [Why Git is better than X](http://web.archive.org/web/20090210020404id_/http://whygitisbetterthanx.com/#the-staging-area)
* [What Is GitHub?](https://www.howtogeek.com/180167/htg-explains-what-is-github-and-what-do-geeks-use-it-for/)
* [Visual Git reference](https://marklodato.github.io/visual-git-guide/index-en.html#basic-usage)
* [Learn Git branching](https://learngitbranching.js.org/)
* [A Grip On Git](https://agripongit.vincenttunru.com)
* [How to create your first GitHub project](https://medium.com/free-code-camp/a-beginners-guide-to-git-how-to-create-your-first-github-project-c3ff53f56861)
* [Git/GitHub tutorial](https://medium.com/@nickcapurso/a-tutorial-on-git-and-github-from-installation-to-pull-requests-7f158faf2695)
* [What do I need to know about Git](https://medium.com/swlh/what-do-i-need-to-know-about-git-5017bde0b572)
* [Advance your test automation skill with source control](https://techbeacon.com/app-dev-testing/how-advance-your-test-automation-skills-source-control)
* [Git-it, learn Git and GitHub](https://github.com/jlord/git-it-electron)
* [all things git - the podcast about Git](https://www.allthingsgit.com/)
* [Getting started with Git](https://riptutorial.com/git/topic/218/getting-started-with-git)

#### setting up a repository
* [init, clone, config](https://www.atlassian.com/git/tutorials/setting-up-a-repository)
* [clone](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-clone)

#### how to setup git
* [Installing Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
* [Setup Git](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)

#### git config
* [Configure Git to use a proxy](https://gist.github.com/evantoli/f8c23a37eb3558ab8765)
* [3 ways to setup author information](https://advancedweb.hu/2017/07/25/git-author/)
* [Basic Git configuration](https://lobotuerto.com/blog/basic-git-configuration/)
* [Manage line ending LF and CRLF with Git](http://blog.coultard.com/2018/10/lf-would-be-replaced-by-crlf.html)

#### git commit
* [git commit -am"message"](https://teamtreehouse.com/community/git-commit-a-m-new-message-commits-all-changes-so-what-happens-when-i-just-type-git-commit-m-new-message)
* [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)
* Specific to GitHub: [Commit together with co-authors](https://github.blog/2018-01-29-commit-together-with-co-authors/)
* [How can I change the author name / email of a commit?](https://www.git-tower.com/learn/git/faq/change-author-name-email)
* [What is a commit?](https://dzone.com/articles/learning-git-what-is-a-commit?edition=544295&utm_source=Daily%20Digest&utm_medium=email&utm_campaign=Daily%20Digest%202019-12-01)

#### git fetch
* [What does fetch really do?](https://stackoverflow.com/questions/44473483/what-does-git-fetch-exactly-do)
* [fetch vs pull](https://www.git-tower.com/learn/git/faq/difference-between-git-fetch-git-pull)

#### git fast forward
* [What?](https://stackoverflow.com/questions/29673869/what-is-git-fast-forwarding#29673993) If Master has not diverged, instead of creating a new commit, git will just point master to the latest commit of the feature branch. This is a “fast forward.” There won't be any "merge commit" in fast-forwarding merge.
* [Fast forward merge or rebase ?](https://blog.developer.atlassian.com/pull-request-merge-strategies-the-great-debate/) A fast forward merge is a merge where the HEAD of the target branch (e.g. master) can just be forwarded to the latest commit of the pulled (e.g. feature/xyz) branch. If there are commits in between, because the target and the pulled (PR) have diverged, there is no fast forward merge possible and a merge commit will be created! A merge commit contains two parent commit, the latest of the target branch (e.g. master) and the latest of the be pulled (e.g. feature/xyz) branch. A merge commit incorporates the changes from these two parent commits into the target (e.g. master) branch.
* [What does fast-forward mean?](https://www.quora.com/What-does-fast-forward-mean-in-Git
)
* [Fast forward and branch mgmt](https://confluence.atlassian.com/bitbucket/git-fast-forwards-and-branch-management-329977726.html)
* [Fast forward git merge](https://ariya.io/2013/09/fast-forward-git-merge)

#### git merge
* [Git Merge](https://www.atlassian.com/git/tutorials/using-branches/git-merge)

#### git rebase
* [Rewind and reapply](https://jeffkreeftmeijer.com/git-rebase/)

#### git merge vs git rebase
* [An introduction](https://medium.freecodecamp.org/an-introduction-to-git-merge-and-rebase-what-they-are-and-how-to-use-them-131b863785f)
* [The diamond shape](https://stackoverflow.com/questions/16666089/whats-the-difference-between-git-merge-and-git-rebase)
* [Rebase interactive to cleanup is awesome in the coding lifecycle](https://www.atlassian.com/git/articles/git-team-workflows-merge-or-rebase)

#### git push
* [An alternative to push -f](https://medium.com/fishbrain/an-alternative-to-force-pushing-in-git-85c6f55991c8)

#### git reset and revert
* [Remove untracked files from the working tree](https://linuxize.com/post/how-to-remove-untracked-files-in-git-/) with [git clean](https://git-scm.com/docs/git-clean)
* [Atlassian Tutorial](https://www.atlassian.com/git/tutorials/undoing-changes/git-reset)
* [Reset vs Reset](https://www.git-tower.com/help/mac/commit-history/undo-commits)

#### git cherry-pick
* [Official doc](https://git-scm.com/docs/git-cherry-pick)
* [Cherry-pick 101](https://dzone.com/articles/cherry-picking-with-git)

#### git configuration
* [Manage line-endings on your machine!](https://help.github.com/en/articles/dealing-with-line-endings)
* [Set code as default git editor](https://blog.soltysiak.it/en/2017/01/set-visual-studio-code-as-default-git-editor-and-diff-tool/)
* [gitattributes](https://www.gitattributes.io)

#### git flows/branching models
* [Gitflow Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow)
* [Gitflow vs Trunked Based Development](https://codeburst.io/trunk-based-development-vs-git-flow-a0212a6cae64)
* [From Git Flow to TBD](https://team-coder.com/from-git-flow-to-trunk-based-development/)
* [Code Reviews in TBD](https://team-coder.com/code-reviews-in-trunk-based-development/)
* [Lean Git Flow](https://github.com/KevinSheedy/lean-git-flow)
* [5 types of Git workflow](https://buddy.works/blog/5-types-of-git-workflows)
* [4 branching workflows for Git](https://medium.com/@patrickporto/4-branching-workflows-for-git-30d0aaee7bf)
* [Basic Git branching?](https://dzone.com/articles/basic-git-branching?edition=585294&utm_source=Daily%20Digest&utm_medium=email&utm_campaign=Daily%20Digest%202020-03-05)

#### git rerere
* [What is it?](https://stackoverflow.com/questions/49500943/what-is-git-rerere-and-how-does-it-work)
* [Fix conflicts only once](https://medium.com/@porteneuve/fix-conflicts-only-once-with-git-rerere-7d116b2cec67)
* [Automatically fixes merge conflicts](https://levelup.gitconnected.com/the-git-rerere-command-automate-solutions-to-fix-merge-conflicts-d501a9ab9007)

#### git log and diff
* [Lets learn git log and diff](https://dev.to/maurobringolf/lets-learn-git-logs-and-diffs)

#### .gitignore
* [generate gitignore](https://github.com/generate/generate-gitignore)
* [A collection of .gitignore templates](https://github.com/pe-st/gitignore)
* [gitignore.io](https://www.gitignore.io/)
* [gitignore generator for visual studio code](https://marketplace.visualstudio.com/items?itemName=piotrpalarz.vscode-gitignore-generator)

#### .gitattributes
* [.gitattributes Best Practices](https://rehansaeed.com/gitattributes-best-practices/)

#### commit message
* [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)
* [Writing Good Commit Messages](https://www.toolsqa.com/git/writing-good-commit-messages/)
* [How To Write Proper Git Commit Messages](https://medium.com/@steveamaza/how-to-write-a-proper-git-commit-message-e028865e5791)

#### git hooks
* [Git Hooks](https://githooks.com/)
* [Git Hooks for Automation](https://medium.com/better-practices/git-hooks-for-automation-135c62bca7d7)

#### Git cleanup
* [git garbage collection](https://www.atlassian.com/git/tutorials/git-gc)
* [git prune](https://www.atlassian.com/git/tutorials/git-prune)

#### rewriting history
* [Different ways of rewriting history](https://thoughtbot.com/blog/git-interactive-rebase-squash-amend-rewriting-history)
* [Changing the author of past commits](https://www.git-tower.com/learn/git/faq/change-author-name-email)

#### cheat sheets
* [Git visual cheat sheet](https://ndpsoftware.com/git-cheatsheet.html)
* [cheat-sheets.org](http://www.cheat-sheets.org/saved-copy/git-cheat-sheet.pdf)
* [Git tower](https://www.git-tower.com/blog/git-cheat-sheet/)
* [GitHub training kit](https://github.github.com/training-kit/)

#### Git repository manager
Here are just a few repository managers which you can choose from. All of them emphasise the collaborative work for a team.
* [GitHub](https://github.com/)
	* [What is GitHub?](https://kinsta.com/knowledgebase/what-is-github/)
* [GitLab](https://about.gitlab.com/product/source-code-management/)
* [Bitbucket](https://bitbucket.org/)
* [GitBucket](https://gitbucket.github.io/)
* [Gogs](https://gogs.io/)
* [Gittea](https://gitea.io/)

#### Git clients
* [Best Git GUI Clients](https://www.hostinger.com/tutorials/best-git-gui-clients/)

#### Git tools
* [tig - text-mode interface for git](https://linux.die.net/man/1/tig)


#### Documentation done with Git
* [GitBook](https://www.gitbook.com)

#### tricks
* If you use GitHub as remote repository manager and you do pair programming, add this to the commit message and then you and your pair will get the git commit credit:  
`Co-authored-by: your name <yourgitemailaddress>`
`Co-authored-by: your co-author <theirgitemailaddress>`
* [A visual log for Git command line](http://baylus.com/vlog.html)

#### talks, workshops and courses
* [30min talk by David Baumgold](https://bit.ly/2iBw6jG)  
* [1h workshop by David Baumgold](https://bit.ly/2tLTjXM)
* [1h talk by Lorna Jane Mitchel](https://bit.ly/1XbrgLW)
* [Some courses to master Git and GitHub](https://medium.com/javarevisited/7-best-courses-to-master-git-and-github-for-programmers-d671859a68b2)

#### doc & books
* [Official doc & GitPro Book](https://git-scm.com/)
* [The hidden feature: git rerere](https://git-scm.com/book/en/v2/Git-Tools-Rerere)
* [Git reset demystified](https://git-scm.com/book/en/v2/Git-Tools-Reset-Demystified#_git_reset)

#### other nifty stuff
* [Lord of the files: GitHub](https://www.wired.com/2012/02/github-2/)
* [MyOctoCat](https://myoctocat.com/)
* [GitHub Cards](https://github.com/lepture/github-cards)
* [What to install](https://github.com/jlord/git-it-electron#what-to-install)
* [Learn git branching](https://learngitbranching.js.org)
* [Git GUI Clients](https://git-scm.com/downloads/guis)
* [Git Guide](http://rogerdudler.github.io/git-guide/)
* [Reimplement Git from scratch](https://wyag.thb.lt)
* [A Git clone written in Rust](https://github.com/mastertinner/wit)
* [Gource - the ultimate version control visualisation tool](https://gource.io/)
* [GitHub Browser Code Tree Navigation](https://www.octotree.io)
* [GitHub's mascot in variations](https://octodex.github.com/)
* [GitUp](https://gitup.co)
* [Windows: Git with cmder](https://www.rahulpnath.com/blog/setting-up-git-credential-manager-for-windows-with-cmder/)
* [Windows: Setting up Git with cmder](https://www.awmoore.com/2015/01/14/setting-up-git-and-cmder/)
* [GitPitch - Modern slide decks](https://gitpitch.com/)
* [gitMemory](https://www.gitmemory.com) can provide actual and interactive information in viewing a project's repository and it's memory. You can see the number of open issues and closed issues in an interesting display, as well as the programming language used in a project, along with contributors who join them.
* [When You "Git" in trouble](https://hackernoon.com/when-you-git-in-trouble-a-version-control-story-97e6421b5c0e)
* [GitHub Universe](https://githubuniverse.com/)
* [~(tilde) vs ^(caret) vs @(at sign)](https://stackoverflow.com/questions/26785118/head-vs-head-vs-head-also-known-as-tilde-vs-caret-vs-at-sign/26785200)
* [Skip WorkTree](https://dzone.com/articles/gittip-skip-worktree?edition=560291&utm_source=Daily%20Digest&utm_medium=email&utm_campaign=Daily%20Digest%202020-01-04)
* [Top 20 Git Commands](https://dzone.com/articles/top-20-git-commands-with-examples?edition=572291&utm_source=Daily%20Digest&utm_medium=email&utm_campaign=Daily%20Digest%202020-02-06)
* [Lesser known Git commands](https://hackernoon.com/lesser-known-git-commands-151a1918a60)
* [Git History](https://www.browserstack.com/blog/open-source-spotlight-git-history-with-rodrigo-pombo/?goal=0_02cca1920b-0570205c23-289476501&mc_cid=0570205c23&mc_eid=3ed43e9ad0)
	* [Git History on GitHub](https://github.com/pomber/git-history)

#### cool blog posts
* [A gentle intro to Git](http://thethinkingtester.blogspot.com/2019/05/a-gentle-introduction-to-git.html?m=1)
* [Six tips for Git success](http://thethinkingtester.blogspot.com/2019/05/six-tips-for-git-success.html)
* [Git aliases](https://compiledexperience.com/blog/posts/git-alias-2019)
* [A simple Git workflow for GitHub beginners and everyone else](https://towardsdatascience.com/a-simple-git-workflow-for-github-beginners-and-everyone-else-87e39b50ee08)
* [Start Using Git on the Command Line Like a Pro in Five Minutes](https://medium.com/better-programming/start-using-git-on-the-command-line-like-a-pro-in-5-minutes-36a6e0007e9f)
* [How to Git on a Team](https://medium.com/@johnemaddox/how-to-git-on-a-team-9e03539466c)
* [Several Git posts from Srebalaji](https://gitbetter.substack.com/)
* [Rookie Git Mistakes To Avoid](https://towardsdatascience.com/rookie-git-mistakes-to-avoid-45919c0058f8)

#### GitHub specific things
* [Preserving open source software for future generations](https://archiveprogram.github.com/)
* [Replacing Master with Main](https://medium.com/better-programming/github-replacing-master-with-main-is-a-huge-win-for-inclusion-in-tech-bf517478275b)

I also have a GitHub account where you can follow my moves. Of course I will follow you back if you want to share something 🙃

My Journey Into Git


## TL;DR
In my Git courses and workshops, I teach how to write a good commit message. For me a great commit message has to be clean, precise, specific to solve one thing at a time and traceable. But there is actually more precision we can add to a commit message as I recently have found out. The future in using Git is called Conventional Commits and fosters an even more human and machine readable way of writing good messages for our commits.

## It does not need much to improve
I like Git very much, you might know that by now. And I am getting excited like a tomb raider when I discover something new about it. So here is my latest discovery.

A commit in Git is an object which points to a so-called snapshot object whereas the snapshot object then references the actual files we want to save in our local repository. In other words: the commit command is used to save changes to our local repository after staging them. However, when you create a commit, Git will ask us to add a message to the commit and that is what is called the commit message. A commit message lets us identify the changes we have added to the local repository with that commit. Now you can imagine that the better such a message is formulated, the better you and others can understand why this commit is/was needed (and which bugs may have been introduced ). By forcing us to write precise commit messages, we more and more realize that the less we put into one single commit, the better others can review (reviewability) our PRs. And not only that, but by improving our writing style we can also improve the readability and traceability of our changes we put into a repository.

## Conventional Commits or How We Will Use Git in The Future
Since I started out with using Git and digging deeper into it by creating an [online course for TAU](), giving workshops all over the place and gaining real world experiences with it at my customers, I started to care about writing good commit messages. Because besides all the nice things we gain with it from above, we also will get a shiny commit history on our main production branch (and of course on other branches, depending on the branching strategy we choose).

Recently as I was out there, I stumbled across [Conventional Commits](https://www.conventionalcommits.org/) - a simple guide on how to add a human and machine readable format to commit messages.
But how does now a good commit message look like according to this guide? Here is how the structure looks like:

{/* https://www.gatsbyjs.com/docs/working-with-images-in-markdown/ */}
![Conventional Commits](assets/posts/201221/conventionalcommit.webp)

#### Header
The header with the _type_ is mandatory and has to be a one liner. The _scope_ in the header on the other
hand is optional as it is project specific ([here an example from the Angular spec](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#scope))
For example an exclamation mark (!) might be used to draw a reviewer's and later on a readers attention.
Then using a [gitmoji](https://gitmoji.dev/) right after the colon (:) makes it even easier to spot what
changes a commit introduces. Even if someone is unfamiliar with the message itself, one can quickly understand
the general idea behind a commit. But be aware that not all of the remote repository managers out there do support
gitmojis (e.g. GitHub does support them!). The _subject_ contains a detailed description of the change.
In order to write a great subject, one should:
- use the imperative form (e.g. correct and not corrects or correcting)
- not capitalize the first letter
- not putting a dot (.) to its end.

#### Body
The body is optional. If used, it should contain the detailed motivation of the change.

#### Footer
The footer is also optional. If used it can for example contain the reference to the (GitHub, JIRA) issue which is meant to be solved. Further it can also contain a breaking changes block like in [this example here](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.j8e4paqkfz0q).

### An example
But how would I apply the new things learned from above? Here a first example of commit message I came up with:

![Conventional Commits](assets/posts/201221/commitmessageexample.webp)

## Now it is on us
Now it is on us to go back to our projects at work (and of course also our private ones) and experiment, practice and improve the thing we do by applying conventional commit messages. 😄


## Extensions

Here are some IDE extensions which support us in writing conventional commit messages.

Visual Studio Code Extension:
[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)

IntelliJ Plugins:
[Conventional Commit](https://plugins.jetbrains.com/plugin/13389-conventional-commit)
[Commitlint Conventional Commit
](https://plugins.jetbrains.com/plugin/14046-commitlint-conventional-commit)

Of course there are [tons of more tools available](https://www.conventionalcommits.org/en/v1.0.0/#tooling-for-conventional-commits)

## Resources
- [Conventional commits - The Future of Git](https://dev.to/colewalker/conventional-commits-the-future-of-git-32gg)
- [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#)
- [Commit Message Examples#1](https://www.conventionalcommits.org/en/v1.0.0/#examples)
- [Commit Message Examples#2](https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13#examples)
- [Commit Message Examples#3](https://github.com/qoomon/git-conventional-commits)
- [Semantic release](https://github.com/semantic-release/semantic-release)
- [Semantic Versioning](https://semver.org/)


## Why should I do this again?
Conventional commit messages makes it easy for your teammates and 3rd parties to tag along and contribute to a common code base. Further it makes it easy for tools to process commits.


The future is here and from 2021 onwards on I will use [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) 
 
 
I hope you have learned something new as I did.

Enjoy, stay safe and be happy 🙂


How We Will Use Git In The Future


> This is by far my biggest contribution to the Software Test Automation Community so far!

The long waiting is finally over! 🎉 I am thrilled, overwhelmed and super happy to  announce, that my very first online-course just got released! 🥳 It is freely available on the awesome learning platform [Test Automation University](https://testautomationu.applitools.com/)! 👩🏽‍🎓

The course is called [Source Control for Test Automation with Git](https://testautomationu.applitools.com/instructors/simon_berner.html) and brings 2hours and 56minutes of raw #Git learning power to wherever you are! And of course it does not only apply for Test Automation, no, its concepts apply for the whole Software Development Lifecycle 😉

[![TAU Course](assets/posts/200710/tau-course.webp)](https://testautomationu.applitools.com/git-tutorial/)

At the TAU 50K Party, I had the opportunity to chat with the one and only [Angie Jones](https://twitter.com/techgirl1908) about it. What a delightful moment that was - I tell you. And you know what is best? [Our chat got actually recorded!](https://www.youtube.com/watch?v=TQcxNMUuEPU) 🙃

Thank you so much for your kind words Angie!


## A long journey
It took more than a year from the very first mental leap to the moment where I now can hold the finished product in my hands. A tremendous amount of hours went into learning, creating the slide deck, recording, getting feedback from Angie, doing some corrections and re-recordings. There were also moments where I just wanted to stop with it and throw everything away. It was such an exhausting work and sometimes even frustrating to do the countless re-recordings due to dissatisfaction on my side with my own english pronunciation. But now I am super happy with the outcome! All the people out there who have created online courses, lecture videos and so on, have all my due respect.
Despite the fact that it was a hell lot of work, it was also a huge personal development step into the future. I proved myself that it is possible with a lot of passion, stamina and joy to create something which I never would have imagined before. Creating this course and having the opportunity to share it with other people in the industry, is probably one of the most satisfying things I have ever done so far. This makes me such a lucky and happy human being 😁

I shut my mouth now so that you can go and have a look at my course! It is absolutely FREE! If you have any feedback to share, you are more then welcome to get in touch with me. It is by far not a perfect course, I know, but a first step into another very exciting direction of teaching for me.


## Does it stop here?
A huge challenge ends here - or does it now start with all the feedback and additional questions I will get? Next up I will be giving some online trainings on Git and out of that I will see what happens next 🙃

Thank you so much Angie for challenging me on this and for giving me this incredible, outstanding learning opportunity and experience to publish my very first online-course on the Test Automation University platform of [applitools](https://applitools.com/). It is a honor to be among these rockstars there!

<div className="center">
<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6687353371877351424" height="581" width="504" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>
</div>
<p/>

Enjoy, life, love, laugh, learn, stay safe and happy 🕺🏽

Released! My First Online Course on TAU!


Have you ever heard of [GitHub Pages](https://pages.github.com/)? Yes, no? Well, GitHub Pages let you host your static website files on their servers for free. All you have to do is to create a git repo, push your files and point your domain to it. But how do you do that? Sounds all quite easy, but there are a few steps to follow in order to make you happy at the end.

### TLDR
![GitHub Pages](assets/posts/180401/githubpages.webp)

#### The First Musketeer - Domain Registrar
* Buy your personal domain at one of the [domain registrars](https://en.wikipedia.org/wiki/Domain_name_registrar) out there

#### The Second Musketeer - Cloudflare
* Create a free account at [cloudflare](https://www.cloudflare.com/)
* Add your domain to it
* Go back to the registrar and add the cloudflare nameservers to your domain
* Set two A records in the DNS settings to the GitHub Pages servers (192.30.252.153 / 192.30.252.154)
* Create a CNAME record with the name _www_ in the DNS settings which points to your GitHub Pages repo (eg. yourreponame.github.io)
* To use SSL for your site, go to the Crypto menu and set the SSL to _Full_

#### The third Musketeer - GitHub Pages
* Create a [GitHub Pages](https://pages.github.com/) repo and add your domain name as custom domain (Settings ---> GitHub Pages -> Custom domain)
* Push your website code (files) to you repo


### Full step by step documentation
If you need a step be step guide for setting up things, [here is a good one](https://medium.freecodecamp.org/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465) and [here](https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/).