Week 12: More code contributions + JS on the server
Today:
- warmup: contributing to an open source project (corpora)
- electron, node.js, npm
- check-in’s on final project
Example projects
Darius Kazemi’s Corpora
Resources
Install Git
- Download and install git.
- Open your shell (see shell workflow video). Configure your git username using the following commands
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
You can find more details at GitHub help as well as this video walkthrough.
You may be prompted to create a Personal Access Token.
Fork Repo
Fork my own copy of Corpora. This allows you to experiment with making a pull request that flows through our class before heading “upstream” to Corpora itself. Instructions for how to fork are on the GitHub guide.
Clone the Repo
- Now you’ll want to clone your fork of the repo. Open to your shell, navigate to a directory where you’d like to store the files locally, and type:
git clone https://github.com/yourgithubname/corpora.git
This video has more details about cloning a repo.
cd(change directory) into the repo.
cd corpora
Write your contribution
Now you can open the “corpora” project in any text editor, add a new file, edit files, etc.
Set nano as your editor for the command line
This only needs to be done once.
git config --global core.editor "nano"
Commit your changes
Now it’s time to “add” and “commit” the work you’ve done. This video tutorial has some more details about git add and git commit.
git add to stage your changes.
You can choose the files you want to add or just use . to add all of your changes.
For a specific file:
git add path/to/files/file.json
For a specific directory:
git add path/to/files/
For all files:
git add .
git commit to commit your changes.
For small / trivial fixes, you can use the -m argument to add a message.
git commit -m "message about this commit"
It’s good practice, however, to use git commit only and launch a text editor for writing a more detailed message.
git commit
You could accidentally open up Vim, a powerful but not-beginner-friendly text editor, if you haven’t set your editor in the command line. Type your message here and then to get out of this, press escape, then type :wq (colon and the letters w and then q) and hit enter.
If you’ve set nano as your editor, you can save and quit with the commands we’ve covered previously in week 5. (Ctrol-O saves, Ctrl-X quits).
Here are details for how to associate text editors with git. For Visual Studio Code the command is:
git config --global core.editor "code --wait"
Push your code to GitHub.
Now that you’ve finished your work, you can push the code to your fork of Corpora. One way to do this is:
git push origin master
While the above is adequate I sometimes prefer to push it to a new branch on GitHub with a name related to my changes.
git push origin master:name-of-my-branch
This takes the local master branch and pushes it to name-of-my-branch on GitHub.
Make a pull request
- Open your fork on GitHub in your browser.
- You should see a new button “Compare and Pull Request” referencing your branch name.
- Select “Compare and Pull Request”
- Write comments about your changes.
- Select “Create Pull Request”
Homework
Open Source Data Assignment
Based on the work you’ve done in in class today, submit your own contribution to Corpora.
Attention, if you choose number 1 below, please submit this to Lee’s fork! Then we can later merge with the main.
Pick one of the below (just one! not all!)
- Contribute to Corpora (see instructions below).
- Create your own open source dataset in a new repository on GitHub.
- Make a contribution to another Open Source repository focused on data.
Electron
What is Electron?
Electron is a free and open-source software framework developed and maintained by GitHub.It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime. Electron is the main GUI framework behind several open-source projects including Atom, GitHub Desktop, Light Table, Visual Studio Code, Evernote, and WordPress Desktop.
Also: Discord, Slack, Whatsapp, Beaker Browser, Skype, Signal, Visual Studio Code, Etcher, Ramme (instagram on the desktop), and many others.
How does it work?
In short: it packages a website as an application, a full browser itself along with HTML, CSS, Javascript and Node.js for a specific app.
Advantages:
- “write once, work everywhere”
- use a language you already know
- lots of learning / building resources and a community of people working with it
Disadvantages:
- Not native-specific design
- “Bloated” (packages an entire Chrome-based web browser, which may be redundant)
- Security
Electron-Fiddle makes working with Electron easier.
Download Electron-Fiddle
Electron-Fiddle speeds up the build process even faster, with little usable snippets. Its essential components are Node.js, Chromium (Open source implementation of Google Chrome), and Electron.
Electron Applications
- Main process (main.js)
- HTML page (index.html)
- Preload script
- Renderer process (renderer.js)
You can save fiddle projects as a github gist (a single page of code) or output a binary executable application file.
Basics of Electron
Every Electron app starts with a main process, usually main.js
To display a GUI user interface the main process creates renderer processes – usually windows, which Electron calls BrowserWindow.
The default fiddle creates a new BrowserWindow and loads an HTML file, index.html
The index.html requires (pulls in) our renderer.js file using a <script></script> tag.
The renderer.js file contains node.js code. You can also require (pull in) additional NPM packages here and Fiddle will automatically install them.
Alternative browsers
Text browsers: I have installed these on anti-soft
- w3m
- links
- lynx
Graphical browsers
Beyond Chrome, Firefox and Safari, there are many other browsers, including: