jlord/git-it-electron

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

Git-it (Desktop App)

Git-it is a desktop (Mac, Windows and Linux) app that teaches you how to use Git and GitHub on the command line.

🚩The app includes translations in these languages: Spanish (ES), Spanish (CO), French, Portugese (BR), Ukrainian, Traditional Chinese, Japanese, and Korean. 🚩

Previously it ran in terminal (the command line application) with a guide online but now the guide is the app and it runs on your desktop on its own ✨ This will be the only maintained version going forward ➡️.

---

Hello future Forkers, Branchers and Pull Requesters!

This application contains challenges for learning Git and GitHub—by using real Git and GitHub, not emulators. You'll be learning the awesome (and not so scary) command line and GitHub which means when you finish all of the challenges you'll have real repositories on your GitHub account and green squares on your contribution chart.

What to Install

You will need this app, Git-it as well as a text editor. You'll also of course need Git and the first challenge in Git-it helps you get that set up. But if you want to get a head start, go for it! You'll continue to use Git and your text editor throughout your bright social coding future.

As a part of the challenges you'll also create a (free) account on GitHub. If you've already got one, high-five!

Git

We recommend installing GitHub Desktop (free) because it installs Git in the most consistent way across supported operating systems (Windows and Mac). We won't use the app itself in the challenges (but it is really useful once you get going in Git!), just the Git that it install for you.

Note—If you're using Windows, you should use the Git Shell app as your terminal—it is installed with GitHub Desktop. In Mac and Linux you can use the app Terminal, which is already on your computer.

Text Editor

I'm quite partial (I'm on the team!) but Atom is a great text editor (also free) and it is built on Electron.js, just like Git-it. Visit the website and download the version for your operating system. Sublime, Microsoft VS Code and Adobe Brackets are other options.

Git-it

You can view the releases section of this repository to find the download for your operating system. Click to download your version. Once it has downloaded to your default Downloads directory, unzip the folder and run the Git-it executable. The executables for Mac, Windows and Linux:

• Mac Right (control) click the Git-it icon, select Open and then Open again. You can drag the icon into your Applications directory if you want, but it's not required. If needed, more detailed installation instructions can be found in this issue.
• Windows Double-click the executable.
• Linux Double-click the executable. If the app isn't running, see this issue.

Get Started!

Open Git-it and click the button to begin the first challenge. Have your terminal and text editor open, too. Follow along with the instructions in each challenge and use the terminal or editor as instructed.

When you've completed the steps in a challenge click 'Verify'. Depending on the challenge you may need to also select the folder you did your work in for Git-it to verify.

Questions? Open an issue on this repository.

Want to contribute or build locally? See the contributing documentation

---

Tips For Getting Started

Code snippets often times look like $ some code-stuff --here. The dollar sign identifies the line as one a user would enter into the command line, but you don't actually include it when you type it into terminal. In this case, you'd actually just type some code-stuff --here.

Variables are indicated by <VARIABLENAME> in code snippets. When you actually use the line of code, replace <VARIABLENAME>, with your variable. For instance to make a new folder in terminal the format is, mkdir <FOLDERNAME>, so if you wanted to make a folder named 'octocat', you'd type: mkdir octocat.

Command line, terminal and bash all basically mean the same thing: the MS-DOS, Doogie Howser looking screen full of words and numbers. It's awesomely powerful and allows you to control your computer with text commands.

You can do a lot of things from your terminal like delete, rename, copy or create files and folders; run scripts and send things back and forth between servers (like the ones storing things on GitHub.com) and your computer (also a server!).

git-it-electron's Issues

Specify user{Data, Cache} directories

Currently You have not specified userData and userCache directories in the browser (main) process. Which means that default Electron Default App dirs are used.
Example: https://github.com/steelbrain/Brauser/blob/master/Browser/Main.js#L17

GitHub Enterprise ready

Hi there,

we're github enterprise users and would love to use git-it with our github enterprise server. Would it be possible to add such a setting ?

Cheers !
Eric

Reduce the Size of Portable Git

In Windows we need to use Portable Git but this adds about 80mb. Checkout the assets directory in the repo. Yikes 😱

Are there parts we can pull out to reduce the size? We're just spawning the Git CLI.

Note We've pulled it from the OS X and Linux release versions so they can be lighter 💨

Rename Branches Challenge

Cause it's too long! 🌳

Remote Repositories Illustration

Cross linking from git-it issue since it applies here too:
🔗 https://github.com/jlord/git-it/issues/200

Update Text for GitHub UI Changes

I recently merged this PR on Git-it jlord/git-it@3dd0cfe so the same text will be out of date here as well (and in the Traditional Chinese version).

Ship with Git English Language Pack?

For Git-it to work no matter what language people use with Git on their computer, Git-it needs to switch the lang to English when it runs. I think this works sometimes, but it doesn't if the user does't have the language pack on their system.

I really don't know what I'm talking about with this, anyone have any ideas?

What can we add to the app so that this always works:

process.env.LANG = 'en_US.UTF-8'

[Ported PR] Update Text

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#197

Select directory window appears under the git-it-electron window

1. Click Select directory

   

2. The select directory window appears correctly (on the top).

3. Click Cancel

4. Click again Select directory

The select directory window appears under the git-it-electron window–while I expected to be on the top.

Not sure if this is reproducible on the other platforms. I'm running Ubuntu 15.04. 💫

Window installer

Hi,

Is there a windows installer available for this application?

[Ported PR] Update Text re: UI

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#210

[Ported PR] Fix Dictionary

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#215

Remembering state

Load completed state and selected directories/files. They should be saved to data.json

Build UI for Completed Status

Git-it the Electron app will need to design a way to show what challenges a user has completed.

Completed statuses shown in Git-it the terminal app

Additionally:

• A button to clear completed statuses

Build Status missing

• It's not redirected to proper build status link, it redirects to https://travis-ci.org/maxogden/electron-packager 😄

Update all the ZHTW files

• Standardize Footer
• Enable English to go to ZHTW and vice versa

[Ported PR] Update Wording

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#197

Save Directory

Since the user will be using the same directory for most of the challenges, we should save that so they don't have to re-select it every time.

Fix language about right side bar

🔗 jlord/git-it#210

A Generic Electron Workshop App

While building this, think about how a generic version could be made so that others could create guides.

Flatten node_modules

During the Tokyo Patchwork, we ran into an issue on one attendee's machine where they couldn't extract the zip file because of the Windows MAX_PATH issue.

The longest path in the zip file is 214 characters long. Since MAX_PATH on Windows is 260, this means extracting Git-it in a target directory which has a path longer than 46 characters will fail.

When we extracted the Git-it zip directly under the C:\, the extraction worked and the app runs.

Would it be possible to use something like npm-flatten to flatten the node_modules directories before building the Windows zip?

cc @shiftkey @jlord

[Ported PR] Update Clone Image

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#212

Create Resources Page

It should be links to other guides and information. It's been vacant since Git-it first shipped 😭

Use a Desktop App Nativizer & Audit for Accessibility

A standard set of CSS to remove the webbiness default from pages.

Launch error on OS X 10.11.3

I get this error upon launch:

Uncaught Exception:
Error: Cannot find module 'electron'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Applications/Git-it.app/Contents/Resources/app/main.js:4:11)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Object.<anonymous> (/Applications/Git-it.app/Contents/Resources/atom.asar/browser/lib/init.js:108:10)

Build Verify UI Component

Previously the user ran git-it verify in terminal and was told, in terminal, whether they passed or failed the challenge. Now we'll do that via a button on a website. This needs design and wiring up (the clicking parts). The actual verifying code we can pull from the old Git-it.

a verified challenge in Git-it the terminal app

Log Errors in Console for Easier Debugging for Users

When someone doesn't pass a check in a challenge there is a short message why. Sometimes this is enough to let the user know what they should fix in order to pass the challenge (there are some tips on the bottom related to errors too).

But sometimes it's still hard to know exactly why they are not passing the challenge and when they open the issue I usually go and see what git command that challenge is running and then ask them to run it and paste the output. We can eliminate all of that by logging errors into the console so that we just ask the user to open up dev tools and tell us what they see ✨

We can also add in the guide that they can open up the DevTools for more details on why they didn't pass.

Initially I'm thinking about a helper method for this so that we can have a nice legible error report. Maybe ascii art, too! Ah!

Refactor Challenge Complete/Incomplete

Standardize all the verifies to collect an array of sub-verifies and then when it is full trigger complete or incomplete and group what shows at what time together. Or something like that.

Provide a screenshot in the README

Just like the title says.

Open External Links Externally...

Make sure to have all links that aren't Git-it (that link to other, real websites) open a new browser window a la:

require('shell').openExternal('http://github.com/jlord/git-it-electron')

Emoji on Windows and Linux

So this is a bummer:

Windows is also not supporting the arrows: ⤷ but it is supporting ☞ ►

Linux is replacing emoji with ☺︎

So, we need a plan, should we keep emoji or replace it?

cc @muan

Add Ability to Clear Completed Status for All or Each Challenge

So that you can clear them if you want/need and repeat.

Visual bug: when file path is too long it breaks off

"select directory" btn and the file path end up on 2 lines and it looks very weird.

Link to English Guide from Traditional Chinese Guide

Right now it just goes from English -> Traditional Chinese.

House Keeping

These are smaller bits that need to be considered at some point:

list can be edited/added to

• File organization #45
• Ship with fonts so that it isn't fetching from Google 76c960c
• Supporting pages should use template with header/footer df0b85f

Other Things To Do

Not critical, but would be ✨

• Remember directories #47
• TESTS (Ok, pretty critical)
• Refactor HTML & scripts for verify buttons. #55
• Separate concerns correctly between helper.js and challenge-completed.js
• Have the 'Get Started' button change to a 'Finish Where I Left Off' button depending on if they've completed a challenge or not.

Add Challenge Title to Hover on Dots on Main Page

So that you can see what challenge each dot represents.

[Ported Issue] Windows Capitalization Bug

This issue is being ported from jlord/git-it since it would still apply here, too.

There is a weird bug when going back and forth between Windows and Mac computers that makes a capitalized filename become 'modified' in Git when you haven't actually done anything to it.

I'm not sure exactly how to solve for this. There was a point when I had everything turned .toLowercase() and I believe that ran into a problem, though I don't remember what...

It's likely the culprit of:
🔗 https://github.com/jlord/git-it/issues/218
🔗 https://github.com/jlord/git-it/issues/195

Confirm when user tries to remove all completed statuses

There is a new button on the main page that will let you clear the completed status of each and every challenge. It would be bad/sad if they clicked that when they didn't mean to, so we should probably confirm first 👍

Abstract the electron module to be used with other workshops

I would like to use the electron wrapper with other Node School modules like ExpressWorks. Is it possible to abstract/extract the electron-related code into a stand alone module/package? Create some interface?

[Ported PR] Log Unexpected Status Codes

A few PRs have come into the Git-it verify scripts since I ported it over here. I'll need to make those updates here so I'm creating issues for them.

jlord/git-it#225

[Ported Issue] Support Cloud9

This issue is being ported from jlord/git-it since it would still apply here, too.

Git-it doesn't completely work when people are using Cloud9 as an IDE. Cloud9 is not recommended or currently supported (clearly) but if someone out there wanted to make a Pull Request, that would be great!

🔗 https://github.com/jlord/git-it/issues/219

UX: verifying----- feedfback

Let user know that we're still working.

In the challenge "GitHubbin", there are 3 checks, but the second checks uses GitHub API, and for some reasons it hanged (probably internet issues), and it wasn't clear that something "wasn't working", it seemed like the user passed the check(the first one) but the challenge wasn't marked as completed.

More ideal if:

• Spinner?
• Let people know exactly how many checks there are when we start checking, and fill in the result one by one.

Is undefinedhtml used?

https://github.com/jlord/git-it-electron/blob/7e4d04136e9c17999d0fa19c96cc615d0359dbee/challenges/undefinedhtml

At least it looks strange. 😄

App Icons 👾

• design them
• apply them

Create 'back' and 'forwards' navigation

Probably as a part of the system menu, but potentially within the page, too.

Beautify

• How completed challenges should look
• How uncompleted challenges look
• How errors look
• App icons
• Less website feel
• How buttons look

What Next Page

When you complete Git-it there should be a 'What Next' type of page that points you directly to easy projects to do on GitHub. Ideas:

• Fork this repo to create a personal website (like jlord/hello)
• Experiment in a pull request playground (like muan/hello-world)

Language Content Updates

I'm keeping a running list here of text I'm updating in the English version that will need to be updated in the Traditional Chinese and Japanese versions as well.

I'm going to do a lot of text updates between now and getting Get-it out of beta so nothing should be updated just yet. I'll update this thread when the list is complete ✨

• 👀 especially on changes to the GitHub UI 💻
• afa435d

Can't spawn git on windows by default with cmd.exe

by default cmd.exe doesn't have git.exe in its PATH. it's really complicated to set the path on windows, so instead if we're on windows we should have people install Git for Windows and then use this instead:

exec('"' + p.join('C:', 'Program Files', 'Git', 'bin', 'git.exe') + '"', cb)

One caveat is it relies on them having a C: drive

All the code that does spawning will have to be updated to do if (os.platform === 'win32') {} to set the git cmd to the above value.

There might be a way override path when spawning on windows but I don't know how