├── .gitignore ├── .nvmrc ├── README.md ├── challenges ├── 101 │ ├── 01.md │ ├── 02.md │ ├── 03.md │ ├── autocorrect.gif │ ├── github-https.png │ ├── vercel-done.png │ └── vercel.png ├── 102 │ ├── 01.md │ ├── 02.md │ ├── 03.md │ ├── 04.md │ ├── 05.md │ └── 06.md └── 103 │ ├── 01.md │ ├── 02.md │ ├── 03.md │ ├── 04.md │ ├── 05.md │ ├── github-badges-2.png │ ├── linkedin-certification-add.png │ ├── linkedin-certification.gif │ ├── print-pdf.png │ └── qr-code.png ├── setup ├── README.md ├── davids-terminal-setup.png └── iterm-change-colors.png └── slides ├── .babelrc ├── .gitignore ├── README.md ├── automation-with-github.jpg ├── custom.d.ts ├── github-bootcamp.png ├── index.html ├── index.tsx ├── package-lock.json ├── package.json ├── slides.md ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GitHub Bootcamp — Curriculum for Beginners 2 | 3 | > A series of **git challenges** with a variety of difficulties for busy developers working in a team. 4 | 5 | I work with `git` as a [developer since 2010](https://github.com/flexbox?tab=overview&from=2010-08-01&to=2010-08-31). This bootcamp encapsulates all the problems I encounter in my daily job and all the things I wish I knew **before** starting my career as a front-end developer. 6 | 7 | My project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'. 8 | 9 | - Hearty thanks to [Linus Torvalds](https://github.com/torvalds), for his contribution to the open-source ecosystem. 10 | - Thanks to [Binpodo](https://thenounproject.com/term/certificate/2189430/) for the assets. 11 | 12 | --- 13 | 14 | ## Getting Started 15 | 16 | **Students**, to follow this workshop, you need to [complete the onboarding form](https://airtable.com/shrLdN7E7kMMiVeFK). 17 | 18 | ![David Leuliette teaching git](./slides/automation-with-github.jpg) 19 | 20 | - Download the [markdown-cheat-sheet](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf) 21 | - Download the [git-cheat-sheet](https://education.github.com/git-cheat-sheet-education.pdf) 22 | 23 | ## Curriculum 24 | 25 | 1. Introduction to version control 26 | 27 | - [lecture](https://davidl.fr/courses) 28 | - [challenges](./challenges/101/01.md) 29 | 30 | 2. Automation with GitHub cli and git Hooks 31 | 32 | - [lecture](https://davidl.fr/courses) 33 | - [challenges](./challenges/102/01.md) 34 | 35 | 3. Multiplayer collaboration 36 | 37 | - [lecture](https://davidl.fr/courses) 38 | - [challenges](./challenges/103/01.md) 39 | 40 | ## Meet the team 41 | 42 | I am a freelance developer, and I share a lot of [content about the react ecosystem](https://twitter.com/intent/follow?screen_name=flexbox_). 43 | 44 | ## Pedagogy 45 | 46 | I have chosen two pedagogical tenets while building this curriculum: ensuring that it is hands-on **project-based** and that it **includes frequent quizzes**. In addition, this curriculum has a common theme —create a website— to give it cohesion. 47 | 48 | > If you encounter an issue, [feel free to contribute](https://github.com/flexbox/github-bootcamp/issues/new), I welcome your constructive feedback! 49 | 50 | ## Each lesson includes 51 | 52 | - pre-lecture warmup quiz 53 | - written lesson 54 | - step-by-step guides on how to build the project 55 | - a challenge 56 | - supplemental reading 57 | 58 | ## Was this helpful? 59 | 60 | ☕️ [Leaving a tip helps me a lot!](https://www.buymeacoffee.com/flexbox) 61 | -------------------------------------------------------------------------------- /challenges/101/01.md: -------------------------------------------------------------------------------- 1 | # Git basic commands 2 | 3 | ## What you will learn 4 | 5 | - Create slides with markdown 6 | - The git basic commands 7 | 8 | ## 📡 Installation 9 | 10 | - You should have sucessfully [completed the setup](../../setup/README.md) 11 | - Your GitHub account should be associated with a ssh key, [if not do it now](https://github.com/flexbox/davidl/blob/master/source/dev/git.html.slim) 12 | 13 | ## 👾 Before we start the exercise 14 | 15 | - [add a star on the repo `github-bootcamp`](https://github.com/flexbox/github-bootcamp) to keep track for later on [github.com/stars](https://github.com/stars) 16 | - check the [`oh-my-zsh` Cheatsheet](https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet) 17 | 18 | ## 👨‍🚀 Exercise 1.1 19 | 20 | - [ ] Configure user settings with 21 | 22 | ```console 23 | git config --global user.name "Your full name" 24 | git config --global user.email "youremail@provider.com" 25 | ``` 26 | 27 | - [ ] Check your identity 28 | 29 | ```console 30 | git config -l 31 | ``` 32 | 33 | ## 👨‍🚀 Exercise 1.2 34 | 35 | We are goint to create slides for your next talk with [`spectacle`](https://github.com/FormidableLabs/spectacle). 36 | 37 | - [ ] Create a new folder somewhere (_Example: `./workspace/github-bootcamp/`_). 38 | - [ ] Create a new markdown based presentation 39 | 40 | ```console 41 | npx create-spectacle 42 | ``` 43 | 44 | ```console 45 | ? What type of deck do you want to create? › 46 | One Page 47 | ❯ Markdown // select this one 48 | React using Vite 49 | React using webpack 50 | ``` 51 | 52 | ```console 53 | cd 'name-of-your-presentation' 54 | npm install raw-loader 55 | npm start 56 | ``` 57 | 58 | You can see the presentation at [http://localhost:3000](http://localhost:3000) 59 | 60 | - [ ] replace the content of `slides.md` with: 61 | 62 | ```mdx 63 | 64 | 65 | # GitHub Bootcamp 66 | 67 | --- 68 | 69 | ## This is my slide 70 | 71 | --- 72 | 73 | ## Happy Hacking 74 | 75 | ``` 76 | 77 | Congratulations! now you can save your work. 78 | 79 | ```console 80 | gss 81 | gaa 82 | gcmsg ':new: initial commit' 83 | ``` 84 | 85 | ## 📡 How to explore aliases? 86 | 87 | Aliases are a great way to be super productive. But maybe you are wondering what's under the hood? If you are lost you can explore what's behind with 88 | 89 | ```console 90 | alias gss 91 | ``` 92 | 93 | ## 👨‍🚀 Exercise 1.3 94 | 95 | All the new slides should be based on the `oh-my-zsh` cheatsheet. And feel free to commit your changes during the process. 96 | 97 | ✅ `gss` 98 | ⌛ `git status -s` <--- using this is fine but we should learn the fast and shorcut way 99 | 100 | - [ ] Create a slide "How to initialise a new repository" 101 | - [ ] Commit your work 102 | - [ ] Create a slide "How to review changes" 103 | - [ ] Commit your work 104 | - [ ] Create a slide "How to commit changes" 105 | - [ ] Commit your work 106 | 107 | ## 👽 Bonus 108 | 109 | - [ ] create a `git today` alias to check what you have accomplished today 110 | 111 | This is an example of my configuration 112 | 113 | ```console 114 | alias.today=log --since=midnight --author='Your full name' --oneline 115 | ``` 116 | 117 | ## 🏅 Elaboration and Feedback 118 | 119 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20101&prefill_Exercice=01). 120 | -------------------------------------------------------------------------------- /challenges/101/02.md: -------------------------------------------------------------------------------- 1 | # Branching 2 | 3 | ## What you will learn 4 | 5 | - The git branches commands 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - check the [`oh-my-zsh` Cheatsheet](https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet) 10 | - commit your changes at each exercices 11 | 12 | ## 👨‍🚀 Exercise 2 13 | 14 | We are going to create a new section on your talk about git branching. 15 | This is a new feature and you should consider working on a new branch. 16 | 17 | - [ ] Create a new branch `feature/branching` 18 | - [ ] Create a slide "Create a new branch" 19 | - [ ] Commit your work 20 | - [ ] Create a slide "Work on a branch" 21 | - [ ] Commit your work 22 | - [ ] Create a slide "Merge branch on `main`" 23 | - [ ] Commit your work 24 | - [ ] Create a slide "Delete a branch" 25 | - [ ] Merge your branch with main 26 | 27 | ## 👽 Bonus 28 | 29 | - [ ] Update your `.zshrc` to add a plugin [**Git prune plugin**](https://github.com/diazod/git-prune) 30 | 31 | Usage 32 | 33 | ```console 34 | gprune 35 | ``` 36 | 37 | ## 🏅 Elaboration and Feedback 38 | 39 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20101&prefill_Exercice=02). 40 | -------------------------------------------------------------------------------- /challenges/101/03.md: -------------------------------------------------------------------------------- 1 | # Remote on GitHub 2 | 3 | ## What you will learn 4 | 5 | - Save your work Working with GitHub 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - check [`gh` cli documentation](https://github.com/cli/cli) 10 | - [makeareadme.com](https://www.makeareadme.com/) 11 | 12 | ## 👨‍🚀 Exercise 3.1 13 | 14 | - [ ] Create a new **public repository** with [repo.new](https://repo.new) 15 | 16 | ```console 17 | git remote add origin https://github.com/USERNAME/REPO.git 18 | git branch -M main 19 | git push -u origin main 20 | ``` 21 | 22 | ## 👨‍🚀 Exercise 3.2 23 | 24 | By default github propose your to create a remote with `https`. 25 | 26 | ![change default https for ssh](./github-https.png) 27 | 28 | This is anoying because it will ask your credentials everytime 😦. And there is [some operations you can't do](https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/). 29 | 30 | We can fix it using `ssh` instead of `https` by changing the `remote` url. 31 | 32 | ```console 33 | git remote set-url origin git@github.com:USERNAME/REPO.git 34 | ``` 35 | 36 | - [ ] Change the origin of the remote —if you used `https` 37 | - [ ] Push you repo to github 38 | 39 | ## 👨‍🚀 Exercise 3.3 40 | 41 | - [ ] Try to use only the cli `gh repo view --web` is nice 42 | - [ ] Create a [new project on vercel](https://vercel.com/new) and release on production 43 | 44 | Your configuration should look like this (except the `slides` folder) 45 | 46 | ![vercel dashboard](./vercel.png) 47 | 48 | If everything works fine you should have this screen 49 | 50 | ![vercel project added](./vercel-done.png) 51 | 52 | ## 👨‍🚀 Exercise 3.4 53 | 54 | - [ ] Write a nice README, you can [have a nice template on makeareadme](https://www.makeareadme.com/) 55 | - [ ] Commit your work 56 | - [ ] Using only the cli create a new branch and open a pull request 57 | 58 | ## 👨‍🚀 Exercise 3.5 59 | 60 | - [ ] Create a slide "Pushing changes to remote" 61 | - [ ] Commit your work 62 | - [ ] Create a slide "Pulling changes from remote" 63 | 64 | ## 👽 Bonus 65 | 66 | - [ ] Update your `.gitconfig` to automatically correct your typo errors `help.autocorrect=1` 67 | 68 | ## 🏅 Elaboration and Feedback 69 | 70 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20101&prefill_Exercice=03). 71 | -------------------------------------------------------------------------------- /challenges/101/autocorrect.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/101/autocorrect.gif -------------------------------------------------------------------------------- /challenges/101/github-https.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/101/github-https.png -------------------------------------------------------------------------------- /challenges/101/vercel-done.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/101/vercel-done.png -------------------------------------------------------------------------------- /challenges/101/vercel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/101/vercel.png -------------------------------------------------------------------------------- /challenges/102/01.md: -------------------------------------------------------------------------------- 1 | # Markdown all the things 2 | 3 | ## What you will learn 4 | 5 | - Writing markdown 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - Become a master with [the GitHub Markdown](https://guides.github.com/features/mastering-markdown/) 10 | 11 | ## 👨‍🚀 Exercise 1.1 12 | 13 | - [ ] Create a new branch `feature/swag` 14 | - [ ] Change a text color 15 | - [ ] Commit your work 16 | - [ ] Go on main branch with `gcm` 17 | - [ ] Merge your branch `feature/swag` 18 | 19 | ## 👨‍🚀 Exercise 1.2 20 | 21 | - [ ] Create a new branch `feature/markdown` 22 | - [ ] Create a slide `Text` with some content 23 | - [ ] Commit your work 24 | - [ ] Create a slide `Lists` with some content 25 | - [ ] Commit your work 26 | - [ ] Create a slide `Images` with an image 27 | - [ ] Commit your work 28 | - [ ] Create a slide `Headers & Quotes` with some content 29 | - [ ] Commit your work 30 | - [ ] Create a slide `Code` with some code 31 | - [ ] Commit your work 32 | - [ ] Create a slide `Extras` with some content 33 | 34 | ## 🏅 Elaboration and Feedback 35 | 36 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=01). 37 | -------------------------------------------------------------------------------- /challenges/102/02.md: -------------------------------------------------------------------------------- 1 | # Good commit messages 2 | 3 | ## What you will learn 4 | 5 | - Write half-automated abd scalable commit messages 6 | 7 | ## 👨‍🚀 Exercise 2 8 | 9 | We are going to half-automate our git messages with [`git-cz`](https://github.com/commitizen/cz-cli) 10 | 11 | - [ ] Make sure your repo is [commitizen friendly](https://github.com/commitizen/cz-cli#making-your-repo-commitizen-friendly) 12 | - [ ] Add this to your `package.json`: 13 | 14 | ```json 15 | // package.json 16 | { 17 | "dependencies": { 18 | 19 | }, 20 | "config": { 21 | "commitizen": { 22 | "path": "git-cz" 23 | } 24 | }, 25 | } 26 | ``` 27 | 28 | - [ ] Use `git cz` to commit your work 29 | 30 | It's nice! We have a way to add concistency in our commits… but from percpective the process a bit too long. We can configure the question to create a faster process. 31 | 32 | - [ ] Create a `changelog.config.js` file and paste this 33 | 34 | ```javascript 35 | module.exports = { 36 | list: ["test", "feat", "fix", "chore", "docs", "refactor"], 37 | maxMessageLength: 64, 38 | minMessageLength: 3, 39 | questions: ["type", "subject", "breaking", "issues"], 40 | }; 41 | ``` 42 | 43 | - [ ] Check the differences and use `git cz` to commit your work 44 | 45 | There are [tons of adapters](https://github.com/commitizen/cz-cli#adapters) to align your commit strategy with your build process. Feel free to explore which one looks the best for you. 46 | 47 | ## 👽 Bonus 48 | 49 | We Automatically [create a `CHANGELOG.md`](https://github.com/expo/expo-cli/blob/master/CHANGELOG.md) 50 | 51 | - [ ] Add `auto-changelog` to automatically generate changelogs with tags 52 | - [ ] Add a new script `npm changelog` 53 | 54 | ```json 55 | // package.json 56 | 57 | "scripts": { 58 | ... 59 | "changelog": "auto-changelog -p && git add CHANGELOG.md", 60 | } 61 | ``` 62 | 63 | Now we need a way to handle the `git tags` 64 | 65 | - [ ] `take bin` to create a new folder 66 | - [ ] `touch release` and copy this 67 | 68 | ```sh 69 | #!/bin/sh 70 | 71 | echo "Starting the release: what's your version? Example: 1.0.0" 72 | 73 | read next_version 74 | echo '' 75 | echo '===============================' 76 | echo "🔭 Creating tag $next_version " 77 | echo '===============================' 78 | echo '' 79 | git tag -a $next_version -m "chore: 🤖 release $next_version" 80 | ``` 81 | 82 | - [ ] Now you can generate a changelog with `npm changelog` 83 | 84 | ## 🏅 Elaboration and Feedback 85 | 86 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=02). 87 | -------------------------------------------------------------------------------- /challenges/102/03.md: -------------------------------------------------------------------------------- 1 | # Fix, Track and Automate issues 2 | 3 | ## What you will learn 4 | 5 | - Collecting informations __BEFORE__ starting your coding flow 6 | - Automatically track when your work is done 7 | 8 | ## 👾 Before we start the exercise 9 | 10 | - Have a look at [github-issue-templates](https://github.com/stevemao/github-issue-templates) 11 | - Check the [documentation on templates](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository) 12 | 13 | ## 👨‍🚀 Exercise 3.1 14 | 15 | - [ ] Create a new branch `feature/template` 16 | - [ ] Create a new folder with `take .github` 17 | - [ ] Create an awesome `issue_template.md` and `pull_request.md` template 18 | - [ ] Create a new issue "Add a slide about issue automation" 19 | - [ ] Create a slide "How to automate issue closing" 20 | - [ ] Make a commit with `gcmsg 'feat: automation FTW closes #1'` 21 | 22 | We have multiple [keywords to link a pull request with an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue). 23 | 24 | ## 👽 Bonus 25 | 26 | - [ ] Add a [Form Issue Template](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#creating-issue-forms) 27 | 28 | ## 🏅 Elaboration and Feedback 29 | 30 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=03). 31 | -------------------------------------------------------------------------------- /challenges/102/04.md: -------------------------------------------------------------------------------- 1 | # Automation 2 | 3 | ## What you will learn 4 | 5 | - Add a git hook 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - Read this article [hacking your webcam with a git hook](https://github.com/flexbox/davidl/blob/master/source/blog/articles/2016-05-04-gitshot.html.md) 10 | 11 | ## 👨‍🚀 Exercise 4 12 | 13 | - [ ] Create a hook to take pitures on each commit 14 | 15 | ## 👽 Bonus 16 | 17 | - [ ] add a Git Hook to [run npm install if `package.json` is Modified](https://davidwalsh.name/git-hook-npm-install-package-json-modified) 18 | 19 | ## 🏅 Elaboration and Feedback 20 | 21 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=04). 22 | -------------------------------------------------------------------------------- /challenges/102/05.md: -------------------------------------------------------------------------------- 1 | # Git advanced commands 2 | 3 | ## What you will learn 4 | 5 | - Get a single commit to another branch 6 | - Using git fragments 7 | - Undo _almost_ everything 8 | 9 | ## 👾 Before we start the exercise 10 | 11 | - Check the [`oh-my-zsh` Cheatsheet](https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet) 12 | 13 | ## 👨‍🚀 Exercise 5.1 14 | 15 | - [ ] From `main` create a branch `gcb feature/cherry-pick` 16 | - [ ] Create a slide "How to apply commit" 17 | - [ ] Commmit your work 18 | - [ ] Go to your main branch with `gcm` 19 | - [ ] Use `git cherry-pick YOURSHA1` to get your commit without merging it to `main` 20 | 21 | ## 👨‍🚀 Exercise 5.2 22 | 23 | - [ ] Create a branch with `gcb feature/stash` 24 | - [ ] Create a slide "How to use git fragments" 25 | - [ ] Move your diff between 2 branches using `git stash` and `git stash pop` 26 | - [ ] Commmit your work 27 | 28 | ## 👨‍🚀 Exercise 5.3 —Undo a “public” change 29 | 30 | __Scenario__: You just ran `git push`, sending your changes to GitHub, now you realize there’s a problem with one of those commits. You’d like to undo that commit. 31 | 32 | - [ ] Create a new slide "this one will be reverted" 33 | - [ ] Identify the last sha1 with `glol` 34 | - [ ] Use `git revert ` to commit your changes 35 | 36 | ## 👨‍🚀 Exercise 5.4 —Fix the last commit message 37 | 38 | __Scenario__: You just typo’d the last commit message, you did `git commit -m "Fxies bug #42"` but before `git push` you realized that really should say `“Fixes bug #42”`. 39 | 40 | - [ ] Create a new slide "How to fix the last commit message" 41 | - [ ] Undo with `git commit --amend` or `git commit --amend -m "Fixes bug #42"` 42 | 43 | ## 👨‍🚀 Exercise 5.5 —Undo “local” changes 44 | 45 | __Scenario__: The cat walked across the keyboard and somehow saved the changes, then crashed the editor. You haven’t committed those changes, though. You want to undo everything in that file—just go back to the way it looked in the last commit. 46 | 47 | - [ ] Try to reproduce the scenario 48 | - [ ] Cancel your changes with `git checkout -- ` 49 | 50 | ## 👨‍🚀 Exercise 5.6 —Reset “local” changes 51 | 52 | __Scenario__: You’ve made some commits locally (not yet pushed), but everything is terrible, you want to undo the last three commits—like they never happened. 53 | 54 | - [ ] Try to reproduce the scenario 55 | - [ ] Undo with: `git reset ` or `git reset --hard ` 56 | 57 | ## 👨‍🚀 Exercise 5.7 —Mass undo/redo 58 | 59 | __Scenario__: You started this feature in one direction, but mid-way through, you realized another solution was better. You’ve got a dozen or so commits, but you only want some of them. You’d like the others to just disappear. 60 | 61 | - [ ] Create a branch `gcb feature/clean-mess` 62 | - [ ] Create new slide "How to rebase" 63 | - [ ] Commit your work 64 | - [ ] Change the theme 65 | - [ ] Commit your work 66 | - [ ] Update your slide 67 | 68 | ```markdown 69 | __What’s happening__: `-i` puts rebase in “interactive mode”. It starts off like the rebase discussed above, but before replaying any commits, it pauses and allows you to gently modify each commit as it’s replayed. 70 | ``` 71 | - [ ] Commit your work 72 | - [ ] Use `git rebase -i ` and remove the "Changing theme commit" and `fixup` the last commit 73 | 74 | ## 👽 Bonus —Redo after undo “local” 75 | 76 | __Scenario__: You made some commits, did a `git reset --hard` to “undo” those changes (see above), and then realized: you want those changes back! 77 | 78 | - [ ] Try to reproduce the scenario 79 | - [ ] Undo with: `git reflog` and `git reset` or `git checkout` 80 | 81 | You can recover _almost_ anything—anything you’ve committed—via the reflog. 82 | 83 | There is plenty of ways to undo things, feel free to have a look at [the complete list](https://github.com/blog/2019-how-to-undo-almost-anything-with-git). 84 | 85 | ## 🏅 Elaboration and Feedback 86 | 87 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=05). 88 | -------------------------------------------------------------------------------- /challenges/102/06.md: -------------------------------------------------------------------------------- 1 | # Advanced branching 2 | 3 | ## What you will learn 4 | 5 | - Working together on the same branch 6 | 7 | ## 👨‍🚀 Exercise 2.1 8 | 9 | - [ ] Change your push config 10 | 11 | ```console 12 | git config --global push.default current 13 | ``` 14 | 15 | ## 👨‍🚀 Exercise 2.2 16 | 17 | - [ ] Clone the repo of your right neighbor 18 | - [ ] Ask him to invite you as a collaborator on Settings / Manage acess 19 | - [ ] Ask him to create a new branch `feature/guest-posting` 20 | - [ ] Ask him to create a slide "Working together on the same branch" 21 | - [ ] Work directly on his branch with `git checkout --track origin/feature/guest-posting` 22 | - [ ] Update the slide "Working together on the same branch" with some content 23 | - [ ] Commit your work and push (You can do multiple commits) 24 | - [ ] Ask him merge your work on his repo 25 | 26 | ## 👨‍🚀 Exercise 2.3 27 | 28 | Now we are going to try to deal with conflicts. 29 | 30 | - dev2 create a branch `feature/deal-with-conflicts` 31 | - dev1 should work only on `main` 32 | - dev1 create a slide "How to deal with conflicts" 33 | - dev1 commit 34 | - dev2 create a slide "How to deal with conflicts" 35 | - dev2 commit 36 | 37 | --- 38 | 39 | - dev1 push to `main` 40 | - dev2 checkout to main with `gcm` 41 | - dev2 pull last changes `gup` 42 | - dev2 `gc feature/deal-with-conflicts` 43 | 44 | If you followed everything dev2 should have a conflict when using: 45 | 46 | ```console 47 | git rebase main 48 | ``` 49 | 50 | ![](https://user-images.githubusercontent.com/56160171/132004977-527c4602-05eb-4e9d-872a-23ec9647ec70.png) 51 | 52 | - [ ] Fix the conflict 53 | - [ ] dev2 save the work with `gaa` 54 | - [ ] continue to rebase the next commit with 55 | 56 | ```console 57 | git rebase --continue 58 | ``` 59 | 60 | 🛰 If you are lost you can cancel your `rebase` 61 | 62 | ```console 63 | git rebase --abort 64 | ``` 65 | 66 | ## 🏅 Elaboration and Feedback 67 | 68 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20102&prefill_Exercice=06). 69 | -------------------------------------------------------------------------------- /challenges/103/01.md: -------------------------------------------------------------------------------- 1 | # Create your first GitHub action 2 | 3 | ## What you will learn 4 | 5 | - Automate, customize, and execute your software development workflows right in your GitHub repository 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - GitHub Actions is a CI/CD (Continuous Integration/Continuous Deployment) solution provided by GitHub. 10 | - You may ask yourself "What is a GitHub action?" [everything is on the `github-actions` documentation](https://help.github.com/en/articles/workflow-syntax-for-github-actions) 11 | 12 | ## 👨‍🚀 Exercise 1.1 13 | 14 | Workflows are custom automated processes that you can set up in your repository to build, test, package, release, or deploy any code project on GitHub. 15 | 16 | To create a new workflow: 17 | 18 | - [ ] Go to your GitHub repository. 19 | - [ ] Click on the Actions tab. 20 | - [ ] Click on set up a workflow yourself if you want to create a custom workflow, or you can choose a template. 21 | 22 | ## 👨‍🚀 Exercise 1.2 23 | 24 | - [ ] Create a new file `.github/workflows/hello.yml` 25 | 26 | ```yml 27 | name: CI 28 | 29 | on: [push, pull_request] 30 | 31 | jobs: 32 | build: 33 | runs-on: ubuntu-latest 34 | 35 | steps: 36 | - uses: actions/checkout@v4 37 | 38 | - name: Run a one-line script 39 | run: echo Hello, world! 40 | ``` 41 | 42 | ## 👨‍🚀 Exercise 1.3 43 | 44 | - [ ] Commit to your repository to launch the action 45 | 46 | ## 👨‍🚀 Exercise 1.4 47 | 48 | You can trigger a GitHub Actions workflow on a specific branch by specifying the branch name in the on section of your workflow file. 49 | 50 | - [ ] Create another file `.github/workflows/hello-branch.yml` 51 | 52 | ```yml 53 | name: CI 54 | 55 | on: 56 | push: 57 | branches: 58 | - main # This workflow will only run when changes are pushed to the 'main' branch 59 | pull_request: 60 | branches: 61 | - main # This workflow will also run when pull requests are opened to the 'main' branch 62 | 63 | jobs: 64 | build: 65 | runs-on: ubuntu-latest 66 | 67 | steps: 68 | - uses: actions/checkout@v4 69 | 70 | - name: Run a one-line script 71 | run: echo Hello, world! 72 | ``` 73 | 74 | ## 🏅 Elaboration and Feedback 75 | 76 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20103&prefill_Exercice=01). 77 | -------------------------------------------------------------------------------- /challenges/103/02.md: -------------------------------------------------------------------------------- 1 | # GitHub actions events 2 | 3 | ## What you will learn 4 | 5 | - Trigger GitHub action events 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - Here is the list of [GitHub actions events](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows) 10 | 11 | ## 👨‍🚀 Exercise 2.1 12 | 13 | - [ ] Create a **Push Event** 14 | 15 | ```yml 16 | name: CI on Push 17 | on: 18 | push: 19 | branches: 20 | - main 21 | 22 | jobs: 23 | build: 24 | runs-on: ubuntu-latest 25 | steps: 26 | - name: Checkout code 27 | uses: actions/checkout@v4 28 | - name: Run a one-line script 29 | run: echo Hello, Push Event! 30 | ``` 31 | 32 | - [ ] Commit to your repository to launch the action 33 | 34 | ## 👨‍🚀 Exercise 2.2 35 | 36 | - [ ] Create a **Pull Request Event** 37 | 38 | ```yml 39 | name: CI on Pull Request 40 | on: 41 | pull_request: 42 | branches: 43 | - main 44 | 45 | jobs: 46 | test: 47 | runs-on: ubuntu-latest 48 | steps: 49 | - name: Checkout code 50 | uses: actions/checkout@v4 51 | - name: Run a one-line script 52 | run: echo Hello, Pull Request Event! 53 | ``` 54 | 55 | - [ ] Commit to your repository to launch the action 56 | 57 | ## 👨‍🚀 Exercise 2.3 58 | 59 | - [ ] Create a **Schedule Event** 60 | 61 | ```yml 62 | name: Nightly build 63 | on: 64 | schedule: 65 | - cron: '0 0 * * *' 66 | 67 | jobs: 68 | build: 69 | runs-on: ubuntu-latest 70 | steps: 71 | - name: Checkout code 72 | uses: actions/checkout@v4 73 | - name: Run a one-line script 74 | run: echo Hello, Scheduled Event! 75 | ``` 76 | 77 | In this example, the workflow runs every day at midnight (UTC). 78 | 79 | - [ ] Update the hour to launch the action 80 | 81 | ## 👨‍🚀 Exercise 2.4 82 | 83 | - [ ] Create a **Release Event** 84 | 85 | ```yml 86 | name: Build on Release 87 | on: 88 | release: 89 | types: [created] 90 | 91 | jobs: 92 | build: 93 | runs-on: ubuntu-latest 94 | steps: 95 | - name: Checkout code 96 | uses: actions/checkout@v4 97 | - name: Run a one-line script 98 | run: echo Hello, Release Event! 99 | ``` 100 | 101 | In this example, the workflow runs whenever a new release is created in the repository. 102 | 103 | - [ ] Create a GitHub release to launch the action 104 | 105 | ## 👨‍🚀 Exercise 2.5 106 | 107 | - [ ] Create a **Manual Event** 108 | 109 | This event allows you to trigger a workflow manually from the GitHub UI. 110 | 111 | ```yml 112 | name: Manual workflow 113 | on: 114 | workflow_dispatch: 115 | 116 | jobs: 117 | build: 118 | runs-on: ubuntu-latest 119 | steps: 120 | - name: Checkout code 121 | uses: actions/checkout@v4 122 | - name: Run a one-line script 123 | run: echo Hello, Manual Event! 124 | ``` 125 | 126 | - [ ] Manual dispatch the action 127 | 128 | ## 👽 Bonus 129 | 130 | That's a lot of events! To quickly identify if everything is working as expected, you can create a **workflow status badge**. 131 | 132 | - [ ] Update your `README.md` with the following snippet with your GitHub username, repository name, and workflow filename. 133 | 134 | ```markdown 135 | ![nightly-build](https://github.com///actions/workflows/.yml/badge.svg) 136 | ``` 137 | 138 | Here is a preview of the badges: 139 | 140 | ![github-badges](./github-badges-2.png) 141 | 142 | ## 🏅 Elaboration and Feedback 143 | 144 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20103&prefill_Exercice=02). 145 | -------------------------------------------------------------------------------- /challenges/103/03.md: -------------------------------------------------------------------------------- 1 | # Community GitHub Actions 2 | 3 | ## What you will learn 4 | 5 | - Use the marketplace to find a GitHub action 6 | - Handle secrets in GitHub actions 7 | 8 | ## 👾 Before we start the exercise 9 | 10 | - Have a look the [GitHub marketplace](https://github.com/marketplace?type=actions) 11 | 12 | ## 👨‍🚀 Exercise 3 13 | 14 | - [ ] create a new file `.github/workflows/linter.yml` 15 | 16 | ```yml 17 | name: Linter 18 | 19 | on: push 20 | 21 | jobs: 22 | build: 23 | name: Lint 24 | runs-on: ubuntu-latest 25 | 26 | permissions: 27 | contents: read 28 | packages: read 29 | # To report GitHub Actions status checks 30 | statuses: write 31 | 32 | steps: 33 | - name: Checkout code 34 | uses: actions/checkout@v4 35 | with: 36 | # super-linter needs the full git history to get the 37 | # list of files that changed across commits 38 | fetch-depth: 0 39 | 40 | - name: Super-linter 41 | uses: super-linter/super-linter@v6.3.1 # x-release-please-version 42 | env: 43 | # To report GitHub Actions status checks 44 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 45 | ``` 46 | 47 | - [ ] Commit to a new branch 48 | - [ ] Open up a pull request and observe the action working 49 | 50 | There is a lot you can automate with GitHub actions. 51 | 52 | As a react native devloper, I use `actions/setup-node`, `expo/expo-github-action`, `mshick/add-pr-comment` to write a comment on each pull-request with a QR code to download the new version of my `iOS` and `Android` app on my phone for testing purposes. 53 | 54 | ![qrcode example](qr-code.png) 55 | 56 | The sky is the limit! 57 | 58 | ## 👽 Bonus 59 | 60 | - [ ] Create an awesome [github profile with github actions](https://github.com/marketplace?category=&type=actions&verification=&query=profile+readme) 61 | 62 | _Examples:_ 63 | 64 | - Update your [profile last youtube video](https://github.com/flexbox/flexbox) 65 | - Get [picture from instagram](https://github.com/katydecorah/instagram-rss-action) 66 | - Automatically update [what you're currently reading](https://github.com/marketplace/actions/goodreads-profile-workflow) 67 | - Your top [spotify tracks](https://github.com/izayl/spotify-box) 68 | 69 | ## 🏅 Elaboration and Feedback 70 | 71 | After the exercice, to **remember what you've just learned**, then [fill out the elaboration and feedback form](https://airtable.com/shrBuZqOJL5UeLLF1?prefill_Name=GitHub%20103&prefill_Exercice=03). 72 | -------------------------------------------------------------------------------- /challenges/103/04.md: -------------------------------------------------------------------------------- 1 | # Certification 2 | 3 | ## What you will learn 4 | 5 | - Create your certificate 6 | 7 | ## 👨‍🚀 Exercise 4 8 | 9 | - [ ] Add a new slide certificate with your name on it 10 | 11 | ```markdown 12 | --- 13 | 14 | ## Your Full Name here 15 | 16 | ![](https://raw.githubusercontent.com/flexbox/github-bootcamp/main/slides/github-bootcamp.png) 17 | 18 | --- 19 | 20 | ``` 21 | 22 | - [ ] Open google chrome and print the page as a `.pdf` with `cmd` + `p` 23 | 24 | ![github bootcamp certificate](./print-pdf.png) 25 | 26 | - [ ] Commit all your files 27 | - [ ] Go on LinkedIn Profile > Certification 28 | 29 | ![How to add a certification to your profile](./linkedin-certification.gif) 30 | 31 | - [ ] Add your certificate with these informations 32 | 33 | ``` 34 | Name: 35 | Git and GitHub Bootcamp 36 | 37 | Issuing organisation: 38 | weshipit.today 39 | 40 | Credential URL: 41 | The url of your .pdf on GitHub 42 | ``` 43 | 44 | ![LinkedIn Certification](./linkedin-certification-add.png) 45 | 46 | 👏 Congratulations! 47 | 48 | I hope you enjoyed the bootcamp and please can you take 3 min [to fill this feedback from?](https://davidl.fr/feedback-workshop) -------------------------------------------------------------------------------- /challenges/103/05.md: -------------------------------------------------------------------------------- 1 | # Collect all GitHub badges 2 | 3 | ## What you will learn 4 | 5 | - Display achivements on your profile. 6 | 7 | ## 👾 Before we start the exercise 8 | 9 | - Check my profile with [all the badges I collected](https://github.com/flexbox?tab=achievements). 10 | 11 | ## 👨‍🚀 Exercise 5 12 | 13 | - [ ] [Complete GitHub achievement](https://github.com/drknzz/GitHub-Achievements) to improve your profile. 14 | 15 | ## 👽 Bonus 16 | 17 | - [ ] Apply to become a [GitHub campus expert](https://education.github.com/experts). -------------------------------------------------------------------------------- /challenges/103/github-badges-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/103/github-badges-2.png -------------------------------------------------------------------------------- /challenges/103/linkedin-certification-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/103/linkedin-certification-add.png -------------------------------------------------------------------------------- /challenges/103/linkedin-certification.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/103/linkedin-certification.gif -------------------------------------------------------------------------------- /challenges/103/print-pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/103/print-pdf.png -------------------------------------------------------------------------------- /challenges/103/qr-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/challenges/103/qr-code.png -------------------------------------------------------------------------------- /setup/README.md: -------------------------------------------------------------------------------- 1 | # Bootcamp Setup 2 | 3 | ## System Requirements 4 | 5 |
macOS 6 |

7 | 8 | ```console 9 | brew install git 10 | ``` 11 | 12 |

13 |
14 | 15 |
Linux 16 |

17 | 18 | ```console 19 | apt-get install git 20 | ``` 21 | 22 |

23 |
24 | 25 |
windows 26 |

27 | 28 | [Download](http://git-scm.com/download/win) 29 | 30 |

31 |
32 | 33 | Use the following command at your terminal to check your git version. 34 | 35 | ```console 36 | git --version 37 | ``` 38 | 39 | If you have a recent version installed, it should do. 40 | 41 | ## Tools of Titans 42 | 43 | To work faster and become a comand line power user we are going to use 3 tools: the software `iterm2`, the configuration terminal framework `oh-my-zsh` and the command line interface tool `gh`. 44 | 45 | ![david leuliette terminal setup](./davids-terminal-setup.png) 46 | 47 | _Note: this is my setup with `refined` theme and `Snazzy` colors_ 48 | 49 | ### iterm2 - [iterm2.com](https://iterm2.com/) 50 | 51 | > iTerm2 brings the terminal into the modern age with features you never knew you always wanted. 52 | 53 | `iTerm2` is a replacement for `Terminal`. It works on Macs only. 54 | 55 | - [ ] install iterm2 56 | 57 | ```console 58 | brew install --cask iterm2 59 | ``` 60 | 61 | - [ ] change the color scheme, open the settings and go to `Profiles` > `Colors` > `Color Presets` 62 | 63 | ![iterm2 custom colors](./iterm-change-colors.png) 64 | 65 | You can select a color scheme from the list or [import a custom one](https://iterm2colorschemes.com/). 66 | 67 | ### `oh-my-zsh` 68 | 69 | > Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. 70 | 71 | It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout... 72 | 73 | ![oh-my-zsh](https://ohmyz.sh/img/themes/mh.jpg) 74 | 75 |
macOS 76 |

77 | 78 | Install it with: 79 | 80 | ```console 81 | sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 82 | ``` 83 | 84 |

85 |
86 | 87 |
Linux and windows 88 |

89 | 90 | [Installing ZSH wiki](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH) 91 | 92 |

93 |
94 | 95 | #### [Changing theme](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes) 96 | 97 | ```console 98 | omz theme list 99 | omz theme set THEME_NAME 100 | ``` 101 | 102 | #### [Install plugins](https://github.com/ohmyzsh/ohmyzsh/wiki/Plugins) 103 | 104 | ZSH allows you to extend built-in functionality by adding plugins. 105 | 106 | To enable a plugin, you need to list it in your `.zshrc` file and then enable it. 107 | 108 | ```console 109 | omz plugin list 110 | omz plugin enable PLUGIN_NAME 111 | omz plugin disable PLUGIN_NAME 112 | ``` 113 | 114 | Here is an example of a `.zshrc` file with some useful plugins I use: 115 | 116 | ```console 117 | # Useful oh-my-zsh plugins 118 | plugins=(git gitfast common-aliases zsh-syntax-highlighting history-substring-search zsh-autosuggestions zsh-z) 119 | ``` 120 | 121 | ### `gh` - [cli.github.com](https://cli.github.com/) 122 | 123 | `gh` is GitHub on the command line. It brings pull requests, issues, and other GitHub concepts to the terminal next to where you are already working with git and your code. 124 | 125 | ```console 126 | brew install gh 127 | ``` 128 | 129 | _Note: for gitlab users, there is a [similar tool called `glab`](https://gitlab.com/gitlab-org/cli)_. 130 | -------------------------------------------------------------------------------- /setup/davids-terminal-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/setup/davids-terminal-setup.png -------------------------------------------------------------------------------- /setup/iterm-change-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/setup/iterm-change-colors.png -------------------------------------------------------------------------------- /slides/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-typescript", 4 | ["@babel/preset-env", { "modules": false }], 5 | ["@babel/preset-react", { "runtime": "automatic" }] 6 | ], 7 | "plugins": [ 8 | "@babel/plugin-proposal-object-rest-spread", 9 | "@babel/plugin-proposal-class-properties" 10 | ], 11 | "env": { 12 | "cjs": { 13 | "presets": ["@babel/preset-env", "@babel/preset-react"] 14 | }, 15 | "test": { 16 | "presets": ["@babel/preset-env", "@babel/preset-react"] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /slides/.gitignore: -------------------------------------------------------------------------------- 1 | # Deps 2 | node_modules 3 | 4 | # Logs 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | pnpm-debug.log* 9 | lerna-debug.log* 10 | 11 | # Editor/FS configs 12 | .vscode 13 | .idea 14 | .DS_Store 15 | 16 | # Build artifacts 17 | dist -------------------------------------------------------------------------------- /slides/README.md: -------------------------------------------------------------------------------- 1 | # spectacle 2 | 3 | Made with ❤️ and [Spectacle](https://github.com/FormidableLabs/spectacle/). 4 | 5 | ## Running your presentation 6 | 7 | - `npm install` 8 | - Run `yarn start` (or `npm start` or `pnpm start`) to start the presentation. 9 | - Edit `index.tsx` to add your presentation content. 10 | 11 | ## Building you presentation 12 | 13 | To build your presentation for a production deploy, run `npm build`. 14 | 15 | The build artifacts will be placed in the `dist` directory. If you'd like to change this location, edit `output.path` in `webpack.config.js`. -------------------------------------------------------------------------------- /slides/automation-with-github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/slides/automation-with-github.jpg -------------------------------------------------------------------------------- /slides/custom.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md' { 2 | const content: string; 3 | export default content; 4 | } -------------------------------------------------------------------------------- /slides/github-bootcamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flexbox/github-bootcamp/ac7870f7467bdf138cdb843daa7bbdd30d586856/slides/github-bootcamp.png -------------------------------------------------------------------------------- /slides/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | spectacle-slides 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /slides/index.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client'; 2 | import { Deck, DefaultTemplate, MarkdownSlideSet } from 'spectacle'; 3 | import mdContent from './slides.md'; 4 | 5 | const theme = { 6 | colors: { 7 | primary: '#475569', 8 | secondary: '#1e293b', 9 | tertiary: '#e2e8f0', 10 | quaternary: '#2563eb', 11 | quinary: '#000' 12 | }, 13 | }; 14 | 15 | const Presentation = () => ( 16 | } theme={theme}> 17 | {mdContent} 18 | 19 | ); 20 | 21 | createRoot(document.getElementById('app')!).render(); -------------------------------------------------------------------------------- /slides/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spectacle-slides", 3 | "private": true, 4 | "scripts": { 5 | "start": "webpack-dev-server --hot --config ./webpack.config.js", 6 | "clean": "rimraf dist", 7 | "build": "webpack --config ./webpack.config.js --mode production" 8 | }, 9 | "dependencies": { 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "spectacle": "^10.1.7" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.17.2", 16 | "@babel/plugin-proposal-class-properties": "^7.12.1", 17 | "@babel/plugin-proposal-object-rest-spread": "^7.12.1", 18 | "@babel/preset-env": "^7.12.7", 19 | "@babel/preset-react": "^7.16.7", 20 | "@babel/preset-typescript": "^7.16.0", 21 | "@types/react": "^18.0.12", 22 | "@types/react-dom": "^18.0.5", 23 | "babel-loader": "^8.0.6", 24 | "css-loader": "^5.1.3", 25 | "file-loader": "^6.2.0", 26 | "html-webpack-plugin": "^5.3.1", 27 | "raw-loader": "^4.0.2", 28 | "rimraf": "^3.0.0", 29 | "style-loader": "^3.3.1", 30 | "typescript": "^5.3.3", 31 | "webpack": "^5.68.0", 32 | "webpack-cli": "^4.5.0", 33 | "webpack-dev-server": "^4.7.4" 34 | } 35 | } -------------------------------------------------------------------------------- /slides/slides.md: -------------------------------------------------------------------------------- 1 | --- { "layout" : "center" } 2 | 3 | # GitHub Bootcamp 4 | 5 | --- 6 | 7 | ## Create a new repository 8 | 9 | ```console 10 | mkdir awesome_app 11 | cd awesome_app 12 | git init 13 | ``` 14 | 15 | --- 16 | 17 | ### Review changes 18 | 19 | List commit history 20 | 21 | ```console 22 | git log 23 | 24 | glo 25 | glol 26 | glgg 27 | ``` 28 | 29 | --- 30 | 31 | ### Review changes 32 | 33 | Check the status of your files 34 | 35 | ```console 36 | git status 37 | 38 | gss 39 | ``` 40 | 41 | See unstaged changes made 42 | 43 | ```console 44 | git diff 45 | 46 | gd 47 | ``` 48 | 49 | --- 50 | 51 | ### Commit changes 52 | 53 | 1. Check the status of your files 54 | 55 | ```console 56 | git status 57 | gss 58 | ``` 59 | 60 | 2. Stage all modified or deleted files, 61 | 62 | ```console 63 | git add --all 64 | gaa 65 | ``` 66 | 67 | 3. commit 68 | 69 | ```console 70 | git commit --message 'feat: add history button closes #123' 71 | gcmsg 'feat: add history button closes #123' 72 | ``` 73 | 74 | --- 75 | 76 | ### Pushing to remote 77 | 78 | Push changes 79 | 80 | ```console 81 | git push origin main 82 | 83 | gp 84 | ``` 85 | 86 | --- 87 | 88 | ## David Leuliette 89 | 90 | ![](https://raw.githubusercontent.com/flexbox/github-bootcamp/main/slides/github-bootcamp.png) 91 | 92 | --- { "layout" : "center" } 93 | 94 | ## Happy Hacking 95 | 96 | [github-bootcamp / challenges / 101](https://github.com/flexbox/github-bootcamp/blob/main/challenges/101/01.md) 97 | -------------------------------------------------------------------------------- /slides/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "lib": [ 5 | "DOM", 6 | "ES2019" 7 | ], 8 | "jsx": "react-jsx", 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "allowJs": true, 12 | "allowUmdGlobalAccess": true, 13 | "allowSyntheticDefaultImports": true, 14 | "esModuleInterop": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "strict": true, 17 | "skipLibCheck": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /slides/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | context: __dirname, 7 | entry: './index.tsx', 8 | output: { 9 | path: path.join(__dirname, '/public'), 10 | filename: 'app.bundle.js' 11 | }, 12 | devServer: { 13 | port: 3000 14 | }, 15 | module: { 16 | rules: [ 17 | { test: /\.[tj]sx?$/, use: ['babel-loader'] }, 18 | { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, 19 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 20 | { test: /\.md$/, use: [require.resolve('raw-loader')] } 21 | ] 22 | }, 23 | plugins: [ 24 | new HtmlWebpackPlugin({ template: './index.html' }), 25 | ] 26 | }; 27 | --------------------------------------------------------------------------------