First I run the ng new command:
ng new --minimal --style=css --routing project-name
I use the minimal option as I like to start with the bare minimum and then add back in what I need. I then open this in my IDE of choice. I currently use IntelliJ IDEA.
The first thing I do is open the CLI config angular.json and make a few changes.
First I make sure that the schematics are configured to create inline template and styles.
| { | |
| "adapterName": "mccs", | |
| "label": "MCCS", | |
| "description": null, | |
| "infoUrl": null, | |
| "supportUrl": null, | |
| "maintainer": null, | |
| "version": "0.1.0", | |
| "tags": [], | |
| "name": "mccs", |
Front-matter parser https://github.com/jonschlinkert/gray-matter
Image resizing, in the browser, with high-speed and high-quality: https://github.com/nodeca/pica
human friendly i18n for JS http://nodeca.github.io/babelfish/
| { | |
| "adapterName": "dropbox", | |
| "label": "Dropbox", | |
| "description": null, | |
| "infoUrl": null, | |
| "supportUrl": null, | |
| "maintainer": null, | |
| "version": "0.0.0", | |
| "tags": [], | |
| "name": "dropbox", |
| { | |
| "adapterName": "local-files", | |
| "label": "Local Files", | |
| "description": null, | |
| "infoUrl": null, | |
| "supportUrl": null, | |
| "maintainer": null, | |
| "version": "0.0.0", | |
| "tags": [], | |
| "name": "local-files", |
| { | |
| "adapterName": "youtube", | |
| "label": "YouTube", | |
| "description": null, | |
| "infoUrl": null, | |
| "supportUrl": null, | |
| "maintainer": null, | |
| "version": "0.0.0", | |
| "tags": [], | |
| "name": "youtube", |
| Possible approaches to rendering web components on the server... | |
| Server side DOM library (JSDOM alternative) that supports custom elements: | |
| https://www.npmjs.com/package/happy-dom | |
| https://medium.com/@treshugart/%C3%A5server-side-rendering-web-components-e5df705f3f48 | |
| Approach is based on this zip: | |
| https://gist.github.com/justinfagnani/936791248120749ff1f8188f1f4064d9 | |
| Share a template between client side code and server side code: |
| // Util function converts rows to objects | |
| // const labelRows = ([labels, ...data]) => { | |
| // return data.reduce((result, item) => { | |
| // result.push(labels.reduce((object, key, i) => { | |
| // object[key] = item[i]; | |
| // return object; | |
| // }, {})); | |
| // return result; | |
| // }, []); |
| focus_follows_mouse no | |
| exec setxkbmap gb | |
| exec --no-startup-id compton --config ~/.config/compton.conf -b | |
| new_window normal | |
| hide_edge_borders vertical | |
| for_window [class="Firefox"] border pixel 0 | |
| for_window [class="jetbrains-*"] border pixel 0 | |
| for_window [class="Google-chrome"] border pixel 0 | |
| @Effect() | |
| online$ = merge( | |
| fromEvent(window, 'online').pipe(mapTo(true)), | |
| fromEvent(window, 'offline').pipe(mapTo(false)) | |
| ).pipe( | |
| startWith(navigator.onLine), | |
| map(isOnline => isOnline ? new AppIsOnline() : new AppIsOffline()) | |
| ); |