-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
51 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,54 @@ | ||
### Tool/Technology 1 | ||
### Angular | ||
|
||
List the aspects you learned, and the resources you used to learn them, and a brief summary of each resource. | ||
Angular components are split into three parts, `*.component.ts`, `*.component.html` and `*.component.css` | ||
|
||
### Tool/Technology 2 | ||
#### `*.component.ts` | ||
|
||
... | ||
``` | ||
@Component({ | ||
selector: 'app-auth', | ||
templateUrl: './auth.component.html', | ||
styleUrls: ['./auth.component.css'] | ||
}) | ||
``` | ||
This segment is found at the top of the `*.component.ts` files. | ||
1. `selector` indicates the keyword that will be used in `*.component.html` files to identify this component. For example, `<app-auth> </app-auth>` | ||
2. `templateUrl` indicates the filepath to the `*.component.html` file. | ||
3. `styleUrls` indicates the filepath(s) to the `*.component.css` file(s). | ||
|
||
#### `*.component.html` | ||
This is the template file. Template files use mostly HTML syntax, with a bit of angular specific syntax included. This includes the structural directives such as *ngIf, *ngFor, etc. The [documentation](https://v17.angular.io/guide/architecture-components) is quite sufficient for understanding the angular syntax. | ||
|
||
#### `*.component.css` | ||
This is a stylesheet, using normal css. There is a `::ng-deep` selector available, which promotes a component style to global style. | ||
|
||
### Arcsecond | ||
|
||
Arcsecond is a string parsing library for javascript. An example arcsecond parser is as follows: | ||
``` | ||
export const TutorModerationTodoParser = coroutine(function* () { | ||
yield str(TODO_HEADER); | ||
yield whitespace; | ||
const tutorResponses = yield many1(ModerationSectionParser); | ||
const result: TutorModerationTodoParseResult = { | ||
disputesToResolve: tutorResponses | ||
}; | ||
return result; | ||
}); | ||
``` | ||
|
||
1. `str(TODO_HEADER)` matches the starting of the string with `TODO_HEADER`. | ||
1. `whitespace` matches the next part of the string with one or more whitespaces. | ||
1. `many1(ModerationSectionParser)` applies the `ModerationSectionParser` one or more times. | ||
|
||
### GraphQL | ||
|
||
GraphQL is a architecture for building APIs like REST. Unlike REST where the server defines the structure of the response, in GraphQL, the client and request the exact data they need. | ||
|
||
### Node 14.x support on macos | ||
|
||
Apple laptops changed to using ARM64 architecture back in 2020. This meant that Node versions released before then were not directly supported by the ARM64 architecture. This caused issues with the github actions. There is a workaround for this by running `arch -x86_64` and manually installing node instead of using the setup-node Github action, but the simpler solution was to upgrade the test to use Node version 16.x. | ||
|
||
... |