Issue Tracking

Last day, we were talking about version control systems and in particular git as a tool for project development.
Another important tool for project development is an issue tracker.
Typically, you would post patches you make to some kind of bug/issue tracking tool for review before they are checked-in.
Some popular Bug/Issue tracking tools are: JIRA , Bugzilla , Trac, MantisBT .
Here is a list of other issue trackers that exist: https://en.wikipedia.org/wiki/Comparison_of_issue_tracking_systems
GitHub comes with its own lightweight issue tracker for each project and has its own wiki. If you spot a bug or see an issue you would like to solve you just click on the issue link and write up a description of it. People can follow up on your description and if it is eventually solved then close the issue.
For each project GitHub also has a Wiki which can be used to describe things like how to compile the project etc.

GitHub

GitHub is a web-based hosting service for git repositories.
It was launched in 2008 and according to Wikipedia has around 83 million users and as of today hosts more than 200 million repositories.
It was originally written in Ruby (using Ruby on Rails) and Erlang. Information about its infrastructure can be gleaned by following the Github Blog Engineering Category.
GitHub hosts two kinds of repositories public (viewable by anyone) and private. Here is a link to Details on GitHub plans.

Getting started with GitHub

To use github you should at a minimum configure in git your username and email:

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

Here is what an example git repository might looked like:
Notice there is the HTTPS and url. This can be use to git clone this repository.
If you want to start your own repository, when you log in to GitHub on your profile page, you'll see at the top a bar like:
You can select the plus icon, click create new repository, and follow the directions.

GitHub Work Flows

GitHub itself has pretty good tutorials on how to Create a GitHub Repository and Fork a GitHub Repository.
The basic workflow for working with an existing git repository on GitHub is to go to that repositories page, and
- Click the Fork link.
- Get a local copy of the fork, work on it, either within GitHub's online editors or on your local machine, commit changes. If not already, get those changes push'd back to your local copy.
- Initiate a pull request back to the original repository.
- The owner of the original repository then decides if they want to accept or not the pull request.

GitHub Work Details -- Getting a copy

In details what happens is that clicking fork gives you a copy in your user account space of that repository. For example, the original repository might have been:

https://github.com/ORIGINAL_USERNAME/PROJECT.git

your fork will be

https://github.com/YOUR_USERNAME/PROJECT.git

To get a copy on your laptop of your fork, you just clone that address:

git clone https://github.com/YOUR_USERNAME/PROJECT.git

To make sure you can stay in sync with the original repository we need to add an upstream source for our clone:

git remote add upstream https://github.com/ORIGINAL_USERNAME/PROJECT.git

For git push and other commands that affect the code on GitHub to work, since about 2020, you need to configure a GitHub token. Under you account settings, scroll down to developer settings, then go to personal access tokens to generate a token. The token is then used in the urls connected with the project we showed before in the format:

https://GITHUB_ACCESS_TOKEN@github.com/YOUR_USERNAME/PROJECT.git

I.e., this is what you should set your remote.origin.url equal to.

GitHub Work Details -- Working locally, Synchronization, Pull Requests

After making a local clone we can make changes, commit them, and use
```
git push origin master
```
to send them back to GitHub in our workspace on GitHub.
Periodically, we should synchronize with the upstream source:
```
git fetch upstream
```
then check out our local branch
```
git checkout master
```
and finally merge changes (we might need to resolve conflicts like described earlier)
```
git merge upstream/master
```
To make a request of the original project to get your code incorporated in it involves make a pull request. This is pretty straightforward and can be done in a GUI. Here are GitHub's Pull Request Instructions
Similarly, for the project maintainer to merge in a pull request can also be done via GUI. Here are GitHub's Merge a Pull Request Instructions.

Quiz

Which of the following statements is true?

PHP Traits are similar to Java Threads.
composer is a software tool to do issue tracking for PHP libraries.
To get changes from one git repository into another we might use the command git pull.

Javascript

We now want to consider adding dynamic behaviors to our websites as they are interacted with on the client-side. To do this, we will use the Javascript language.

This language was originally developed at Netscape (ancestor of Mozilla and Firefox) and first appeared in Netscape 2 (December 1995).
The term Javascript is trademarked by Oracle.
It has been standardized as ECMA-262 and ISO-16262.
The standardized version is sometimes called ECMAscript (most recent stable is Ecmascript 2021 (often hear of Ecmascript 6 (Ecmascript 2015) because it introduced many new features)); the Microsoft version of Javascript is sometimes called JScript.
Javascript can be used on both the client and on the server.
We will use it mainly on the client except for a little bit at the end of the semester.
Only the name is similar to Java. Unlike Java:
- It is a loosely rather than strongly type language.
- The object model is simpler
- It is interpreted

Uses of Javascript

To do some of the processing of web pages on the client-side rather than make the server do it. For instance, one might want to dynamically change the look of a page beyond what can be done is CSS without refreshing the whole page. This could be used to implement sliders, item filter, etc.
To perform actions when certain events occur on the client-side. For instance, when a web-page is submitted it could be used to validate the page.
To do simple networking in the background transparently to the user.
It can be often used as a smaller alternative to an old school, non-deprecated, Java applet or to Flash (a compiled variant of Javascript called Actionscript).

General Overview

Many details on Javascript can be found at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
-- code -- //for HTML5 don't use type="text/javascript"
</script>

Indirectly:

<script type="text/javascript" src="myscript.js" />

Lexicon

Identifiers (i.e., names) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers.
Javascript has reserved words: async, await, break, case, catch, class, const, continue, default, delete, do, else, finally, for, function, if, in, instanceof, let, new, return, switch, this, throw, try, typeof, use, var, void, while, with.
Javascript has additional keywords which are reserved for future use, as well as predefined words such as alert, open, java, and self.
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```

Example Javascript and HTML document

<html>
<head><title>test</title>
<meta name="description" value="this example illustrates how Javascripts are 
    executed both when the document is loaded and on the occurrence of events" />
<script type="text/javascript" >
   function sayHello()
   {
      alert("hi there");
   } 
</script>
</head><body><form><input type="button" value="test" onclick="return sayHello();" 
/><!-- responds to events --></form>
<script type="text/javascript" >
for( i = 0; i<100; i++) { 
    document.writeln("<p>hi"+i+"</p>");
} // run when document loads
</script></body>
</html>

Primitives

Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrapper for a value of the corresponding primitive type.
Javascript will do type coercion between objects of type String and Number.
A number literal can be either a integer or a float. You can use hex for integers. If it is a float it can use scientific notation:
7, 0xff, 0XFF, 7.2, .73, -.23, 7E2, 7e2, 7.2e-2, etc.
A string literal can be delimited either by a single or double quote.
"Hi there", 'hi there', '"', "\n", '\'\\', etc.
There are two Boolean literals: true or false.
The only Null literal is null which can be coerced to false as a Boolean and 0 as an Number.
The only literal of type Undefined is undefined. It can be coerced to false as a Boolean and NaN as a Number.

Variables and Constants

The Javascript interpreter determines the type of a variable as needed by the circumstance.
Variables can be declared either by assigning it a value or by explicitly declaring it.
In strict mode (which we will talk about later), variable must be declared before assignment.

Javascript supports two syntaxes for declaring variables each with slightly different scope:

//Declaring variables with function scope
var my_variable; // don't need to assign a var when declaring it
var pi=3.14; // but can
var a=1,b; //can declare more than one variable in one go

// declaring variables with block scope
let my_other_var; //let first appeared in Ecmascript 2015
let foo = 2;
let c=4,d;

{
   let e =10;
   var f = 7; 
   console.log(e + " " + f); //prints 10 7
}
console.log(e); // ReferenceError
console.log(f); // 7

Neither of these ways should be confused with being a property of an object, which we'll talk about in a minute.
Globally scoped var declarations (declarations not within a function) are properties of Javascript's window object; let declarations are not.
Ecmascript 2015 also introduced the const keyword for declaring constants:
```
const PI = 3.14;
```

Numeric Operators and Objects

Numeric operators in Javascript are similar to Java or C: +, -, *, /, %, ++, --, etc.
The Math object has many useful built-in methods and properties for Number objects.
For example, Math.sin(x), Math.PI, Math.random, Math.abs, etc.
The Number object has a useful collection of Number properties. Number.MIN_VALUE, Number.MAX_VALUE, Number.NaN, etc. It also has the toString method.
For example, x=10; y= x.toString(); z=x.toString(2); //binary representation

Strings and Type Conversion

The + sign is used to concatenate strings.

first = "hello"
second = first + "bye" // "hellobye"
alt_second = `${first} bye` //"hello bye" back ticks in JS can be used
    //if you want variable interpolated strings

The String object also has useful methods such as: charAt, indexOf, substring, toLowerCase, toUpperCase, etc. A String object also always has a length property
When the value of one type is used in a situation where another type is required, Javascript tries to implicitly coerce the type into the required one. For example,
```
"August" + 1977 // "August1977"
1977 + "August" // "1977August"
7*"3" =21
```

One can also explicitly, do type conversion.

var str_value = String(value); // Might want to use toString
var some_number = Number(some_string); // Might want to use parseInt or parseFloat

Issue Tracking, Github, Javascript

Outline