Giter VIP home page Giter VIP logo

ohshitgit's Introduction

The official home of Oh Shit, Git!?!

https://ohshitgit.com/ (and the swear-free version at Dangit, Git!?! https://dangitgit.com/

Contributing guidelines

Thanks for coming! Note that I will only accept PRs for language translations (e.g. translating the site into a new language) or fixes to typos.

If you have ideas for new content or thoughts on how to improve existing content, please open an Issue first so that we can discuss it.

This site is my copyrighted content and my decisions whether or not to make any suggested changes are final.

I have a very busy full-time job and I'm currently homeschooling my two kids due to COVID, so please be patient if I take a bit to respond. I usually will wait a bit until there are several PRs & Issues pending, then I'll tackle them all once.

Adding a new language translation

Firstly, THANK YOU for donating your time to help share Oh Shit, Git with folks in your language! It has been wonderful to see so many folks contributing to translations, I appreciate it!

Hopefully this process will be super simple for you, and please do let me know if anything can be improved - the best way is to tweet at me @ksylor or @ohshitgit, or create a PR and I'll get tagged in automatically.

Development

The site is built using the Eleventy (11ty) static site generator, and is deployed to Netlify.

Local development

The following commands will all need to be run in a terminal/command line prompt.

  1. Fork the project repo to your computer. If you are unfamiliar with fork-based PRs, Github has some great docs on working with forks.

  2. Before you start work, create a new branch for your changes using: git checkout -b add-language-zz Please choose a descriptive branch name such as add-language-fr or similar. Netlify will use this branch later to create a test environment for your changes!

  3. Make sure you have the dependencies installed by running npm install or npx install.

  4. Turn on the development server to preview your changes via eleventy --serve (if you have Eleventy installed globally) or npx @11ty/eleventy --serve (if you only installed it locally)

  5. Copy/paste the Local Access url from the Eleventy console output into your browser. You will get an error, but that's okay! In order to generate the swear-filled and non-swear-filled content, there isn't a single access point, and we use redirects on the server to show the correct content from the language sub-directories to folks.

  6. Navigate to [localhost url from step 5]/en/swears/index.html to see the english version of ohshitgit.com, or [localhost url from step 5]/en/noswears/index.html to see the english version of dangitgit.com (without swears!).

  7. Now you can go ahead and work on the site locally, any file changes should refresh the site automatically. For more details, visit the Eleventy docs.

Adding a new language

There are a few general rules for translation:

  • Don't translate or change the urls ohshitgit.com or dangitgit.com.
  • Don't translate or change metadata - e.g. contentType: swears is checked in code and needs to be in english.
  • Don't translate or change file names.
  • Do translate content faithfully and to the best of your ability! Use all the swears you want for the swear-filled content. Remove swears for the noswear content.
  • Have fun! If I've used english idioms that don't translate well, replace them with funnier ones from your language!

IMPORTANT: Please use the correct two-letter ISO-639-1 language code. If your content is targeted to a specific country as well, use the format of pt-BR using the ISO-3166 country code.

Start by creating the translated content

  1. Find the /en/ folder in the directory and make a copy of it (and all of it's children) renamed with the correct two-letter ISO-639-1 language code of your language. In this folder you will find copies of the english-language files for the site, broken down into sub-groups of files with /swears/ and /noswears/.

  2. Each directory contains an index.html file which defines some 11ty "front matter" metadata for the language & site version - make sure that this file references the correct language code under the locale metadata item. The other metadata should not be updated.

  3. In the /partials/ directory you will find a few short nunjucks (.njk) files for global site elements. Please translate the content of these files, but keep the markup & any inline code intact.

  4. In the /tips/ directory you will find markdown .md files that contain each git tip - the example commands, and some funny explanatory text.

  5. Each tip file has metadata at the top - please leave the tags and order the same. Translate the tip's title which will be displayed to users (keep the format "Oh Shit, ..." or "Dangit, ..." to begin every title). Also translate the id which is used to generate an anchor tag to link directly to that tip.

  6. Then, translate the contents of each tip file. Make sure that you keep the markdown formatting in place so that the syntax highlighting on the client can correctly format the output. Code examples should use the same git commands, but you can translate the comments denoted by #.

IMPORTANT DON'T FORGET! Update some plumbing code to get your language displayed on the site correctly

  1. in the _data folder, open up site.js and add your new language to the list of languages on the site. For example, to add German to the site, use the local word for the language (e.g. not the english word German, but the German word Deutsch), the standard language code, and then a translation of the phrase "View in other languages" which will be used as an aria-label for the language picker when that language is selected.
"languages": [
    {
        "label": "deutsch",
        "code": "de",
        "arialabel": "In anderen Sprachen anzeigen"
    },
    ...
],
  1. Next, add your information to the list of collaborators in site.js. Add your name and a link to your GitHub profile, then the language code for the language you added.
"collaborators": [
    {
        "name": "Moritz Stückler",
        "link": "https://github.com/pReya",
        "lang": "de"
    },
    ...
],
  1. If all went well, you should now be able to go to [localhost]/[your language code]/swears/index.html and [localhost]/[your language code]/noswears/index.html, and you should see your language code link in the upper right of the english page!

  2. Add 4 new redirect rules to the _redirects file that will tell Netlify the proper file to load for each language code in the URL, and then redirect any other paths to the main url. Yours should go underneath the other redirects and in this same format:

# swedish swears
https://ohshitgit.com/sv        https://ohshitgit.com/sv/swears/index.html 200!
https://ohshitgit.com/          https://ohshitgit.com/sv    302  Language=sv

# swedish no swears
https://dangitgit.com/sv        https://dangitgit.com/sv/noswears/index.html 200!
https://dangitgit.com/          https://dangitgit.com/sv    302  Language=sv
  1. Make sure to git commit your changes along the way so you don't lose your work :D

Preview your changes in Netlify

Once you're happy with the state of your branch, we can preview the changes live in a new branch environment on Netlify!

  1. Run git push -u to push the new branch up to Github, then follow the instructions here for submitting a pull request using your forked repository.

  2. Once you've reviewed the changes and clicked the "Create Pull Request" button in the github UI, Netlify will automatically run checks on the new code. If all is well, you'll see a green checkmark and line for "Deploy preview", click on the "details" link, and it will take you to the preview site. Please don't share this URL widely, but feel free to get another pair of eyes to help edit/proofread.

  3. Test that your new language appears in the language picker on the english site, and review your content one last time.

  4. Then, I'll take over from here and review the PR as per usual and either request changes or approve the PR. Once it's approved I'll merge it in and Netlify will automatically deploy the changes!

Questions? Problems?

Feel free to message me on twitter or create a Draft PR with questions! Thanks again for your help!

<3 Katie

ohshitgit's People

Contributors

alliejones avatar aryansarkar13 avatar carolinwagner avatar catalinafox avatar cybear avatar dadyarri avatar davialexandre avatar dmitrygorbenko avatar eladleev avatar fedemcmac avatar francofantini avatar goodbyeplanet avatar imurray avatar jaeder42 avatar jan-vandenberg avatar kitt-tientanopajai avatar ksylor avatar last-genius avatar lucaslarson avatar lwojcik avatar martijntenheuvel avatar michaeljabotha avatar michelc avatar preya avatar rahuldahal-zz avatar ryanking13 avatar sheralam avatar tpaksu avatar vorot93 avatar znarro avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ohshitgit's Issues

Extract file from some commit

I want a previous version file from a given commit ID:

git show <comment-id>:<filename> > <newname> 

# example
git show 7926ba:README.md > READYOU.md

Why must language be so repulsive? It makes your great work bad :-(

Hello

It is a real pity and a shame that this great tutorial uses such repulsive terms.
They're neither cool nor useful - but they're messing up the great work.

Your work would have been worth far more than 6 watcher - but maybe it's just for personal use anyway.

Kind regards,
Thomas

ohshitgit VS Code Extension

I put together a VS Code extension that uses the hosted content from this repo. As often, when you f-up with git, you're already in an IDE anyway.

The code base for this extension doesn't really belong in this repo, but happy to share code/open source with permission to use the content. It currently supports:

  • VS Code themes
  • Multi-Languages

This is it in action:
https://user-images.githubusercontent.com/1678318/105904707-64693f00-6019-11eb-9d2a-e99ca9f435fa.mp4

Also added some handy Command Palette lookups for the various sections:

image

Please DO NOT tell people to run `git reset HEAD~ --hard` on their master because they might have yet untracked files

The instruction block from the website is screenshoted below.

I just ran into such situation right now. While the approach itself is good, this can completely delete newly created files and there would be almost no options to restore them.
I think you should consider deleting this block from the site in favor of always doing git reset HEAD~ --soft because it's more safe. I think plenty of people have lost their changes thanks to you. Don't advise people to do so, this is harmful advise. Or you should at least mention this in red and CAPS ON.
image
Should be always superseded with (because it's more safe):
image

Add meta description to the site

it's an easy SEO win, and I'd love for more people to know about this site, cause it rocks.

I'm happy to raise the PR if that would be helpful.

Keep up the great work!!!

for reference, here's the current SEO score on the lighthouse audit:
current seo audit

(PS - I would love to submit a PR to increase the tap targets as well if that would be helpful)

Addition: Merge multiple related commits into one

Sometimes we tend to make multiple commits related to the same thing and it's better to have one final commit that contains all the changes related to that commit. We can squash multiple commits into one using the concept of rebasing and squashing the commits we want to be merged into one.

git rebase -i HEAD~2 <-- 2 being the number of commits that you want to rebase.
[ pick older-commit ] <-- You need to have one commit that is going to serve as the commit that all the squash commits are going to go into.

[ squash newest-commit ] <-- All the commits with the message squash will be merge into the commit that has been marked as pick

Example:

git rebase -i HEAD~2 
    [ pick     older-commit  ] 
    [ squash   newest-commit ]
git push --force

Is the website still maintained?

There are a lot of issues which have no answers and a lot of PRs. Is the repo / website still maintained? Is there a successor?

Update command for new syntax that replaces checkout

Since git 2.23, there have been two other commands added in replacement of git checkout.

git restore can be used to revert the changes of a file at a given commit.

git switch to switch to a branch after creating it if necessary.

These two new commands can be very helpful to understand better what is actually being done, and git restore is probably easier to remember than git checkout <hash> -- <file>.

New cyrrilic font sucks...

IMHO, new font rendering too bad on russian language in italic and mono versions.
My opinion about font pairings:

  • Montserrat (titles)
  • Roboto (main)
  • Jetbrains Mono (code)

Screenshot_20200420_202222

Dark Mode

I think Dark mode will be a very good addition to this site, So I added it as It was mentioned in contributing guidelines to open an issue for discussion I am opening this issue.

Current Dark mode Implementation Screenshot

chrome_eHj0xnhSz6

Any feedback Regarding color choice will be appreciated.

The code is too bright

The code is too light to be read properly. Furthermore, it is completely white when I highlight it.
Screenshot at 2023-05-02 12-40-11
Screenshot at 2023-05-02 12-40-04

Adding new language translation [Ar]

Hi
This repository is really hooked me,
and I'd like to add a new translation for Arabic language,
If this could happen please assign this task for me and I'll start.
Thanks

Addition: git commit --fixup [sha] / git rebase -i --autosquash [sha]

One of my favorite git tricks, this allows you to amend an old commit when you realize there's small changes needed, like fixing a typo or a small bug.

Note that this should only be done on a branch, or for commits which you haven't yet pushed, as this is re-writing history. Thus, if you've already pushed the commit you're editing, you'll need to force-push them the second time.

Steps are:

  • Make the changes
  • Stage the changes
  • Find the sha of the commit you want to add the staged changes to (referred to as [sha])
  • git commit --fixup [sha] – this creates a 'fixup' commit.
  • Optional: if you have other unstaged changes, you'll need to stash or commit them before the next step.
  • git rebase -i --autosquash ^[sha] – the upwards-caret indicates you want to rebase up to the commit before the original commit you're fixing up.

Note that if you're fixing up multiple commits simultaneously, the final 'autosquash' rebase will need to be of the oldest commit being fixed up.

Also note that this can potentially cause merge conflicts if the changes aren't small and conflict with other intervening changes. So use sparingly.

Good article here: https://thoughtbot.com/blog/autosquashing-git-commits

Add `git rm -r --cached` stuff

Hello, I've used that command a lot for various situations, when git behaves really strange. Maybe it would be worth it adding?

What about more ohshits?

Where do i contact or suggest more oshits?
How about explaining the ever confusing terms of checkout and checkin used by the git community
pulls hair

Adding a screen reader accessible description to ASCII emoji and hiding the ASCII chars from screen reader

Currently, there's only one ASCII emoji in the repo (¯_(ツ)_/¯ in the dude-wheres-my-diff file), but it would be nice to have in accessible form users who use screen readers, as it is recommended to do for ASCII art and emojis.

I'm opening the discussion about as an issue, as is stated in the CONTRIBUTING.md file about content changes.

One way to do this could be, for example (this is something that I found on the internet, haven't tested it fully, but will if I can submit a PR to this issue):

File under <span aria-hidden="true">&macr;\\\_(ツ)\_/&macr;</span><span class="sr-only">shrug</span>

and then add the sr-only class to site.css:

.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap; /* added line */
      border: 0;
}

(Example CSS code from a11y guidelines

Mention git merge --abort and git rebase --abort

In my experience, the most common "getting stuck" situation for novice git users is getting stuck doing a rebase or a merge with conflicts.

In these situations, doing git merge --abort or git rebase --abort will put you right back where you were before executing the merge or rebase, and is the simplest way to recover from accidental bad merges or rebases.

I think the page should probably mention these commands because they very simple and work in the most common situations.

Addition: merge commits in feature branches, soft reset to base

Proposing an addition along the lines of...

Oh shit! I ran git pull in the wrong branch and now my PR has a merge commit, and it disappears on rebase, but also I ammended the merge commit with more changes and those disappear as well!

Presumably with the proposed solution of (unless someone has a better way):

# remove all the commits from your branch, without removing the changes
git reset master
# manually pick the changes that do belong in your PR (any commits added to master since the last branch rebase will appear undone after the reset)
git add -Ap
# recreate the commit(s) without any merges; push
git commit ...; git push -f ...
# clean up the rest of the changes
git reset --hard

Proceed to $ingest heavily.

( Possibly prefixed by git reflog; git reset --hard $MERGE_COMMIT when trying to fix this after finishing a rebase. )

Oh shit I want to roll back a bunch of commits without deleting them

Let's be fair: nobody uses revert for fun, and reset is a landmine if used incorrectly. You don't need them anyway, since we have:

git checkout *hash* .

Which resets all files to the status of that commit. Combine with git clean -df to remove any file or directory that wasn't being tracked at the time. Run a new git commit and boom, back to work. Nothing (of value) was lost.

Addition suggestion - cleaning up a repo after forgetting to add files to your .gitignore

This is the process for cleaning up a repo after you've accidentally added files you meant to ignore - like __pycache__ or .idea files from your IDE. (I can't be the only one who does this regularly, right?)

Maybe worth discussing is whether there's a better way to do this that doesn't require running rm -r. You don't lose data or files or anything with the --cached flag, but it's still nerve-wracking the first time you have to do it.

# make sure everything is committed
git commit -a
# update your .gitignore 
# check git status to find the files/directories you need to add
vi .gitignore
# remove everything from source control
# do NOT forget the --cached flag
# you can do --dry-run first to test things out
git rm -r --cached .
# re-add everything to git, then commit
git add .
git commit -m ".gitignore fix"
# push if you also messed up remote
git push origin BRANCH

I put up a draft PR on my fork if that's helpful.

Addition: Toggle back to the part of the tree you just came from

This is a toggle, so it won't allow you to page back through an arbitrary number of locations on the tree, but it is suuuuuper useful for when you've to flip to someplace really quick and then back to where you came from.

your-branch  $ git checkout their-branch
their-branch $ git log -p # or whatever y'all're on this branch to do
their-branch $ git checkout -
your-branch  $ git checkout - 

And it works with SHAs, too!

your-branch $ git checkout s0mesha
s0mesha[…]  $ git checkout -
your-branch $ git checkout -
s0mesha[…]  $

The -x flag of git clean

https://ohshitgit.com/#fuck-this-noise

In the tutorial to reset the whole repository, the command git clean -df can use the -x flag too, to remove untracked files that might have been messing things up for the reader (although they can totally come back after some time).

It might also be a good idea to mention that the .git directory might contain custom ignores, hooks among other wacky magiks that will be lost on reset, although I reasonably suspect that the average reader of this site wouldn't have touched it.

Thoughts?

Suggestion: Accidental commit to master

For the example about accidentally committing to master instead of a branch, instead of using HEAD~, I think the example should use origin/master. This will remove the need for the note that explains how to remove multiple commits to master, though I suppose it's still worth noting that origin/master might be different if your master branch is named main or something.

Addition: `git commit --allow-empty -m "kick the build"`

First: Huge fan, Thank you thank you. Have visited site 1,000+ times and has been hugely helpful in workflow. OhShitGit has saved me hours/days/weeks of time at this point ! And I get lots of questions/compliments on the stickers :-).

git commit --amend --no-edit
and
git reset HEAD~ --soft
git stash
truly are superpowers.

One new command I have learned recently is

git commit --allow-empty
git commit --allow-empty -m "kick the build"

Would like to suggest this addition as has become another command that I am using frequently and I feel that not many people know of this functionality.

If we want to include / add this to the repo, I can take on the translations as well, and will tap my friends and network and work with the community here to ensure the translations are grammatically correct.

Thank you again !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.