How to build webcomponentjs v0 polyfill and include in angular

1) git clone https://github.com/webcomponents/webcomponentsjs repository
2) check out v0 branch
3) install gulp globally

  1. npm install -g gulp

4) build webcomponentjs manually

  1.  npm install
  2.  gulp build

5) Find the generate js files in dist/ folder
6) Copy webcomponents.min.js to assets folder of angular project
7) import webcomponents.min.js to polyfill.ts

  1. import "./assets/webcomponents.min";

Create custom element in angular 6

1) Create Angular Project

ng new <project name> --prefix custom --style=scss --skip-tests

2) Use schematics to add angular element support

ng add @angular/elements

3) Use angular-cli to generate new component and specify encapsulation is ViewEncapsulation.Native

4) Include custom elements in entryComponents array of module

  1. @NgModule({
  2.   imports: [CommonModule, HttpClientModule, FormsModule, NgbModule],
  3.   declarations: [
  4.     InputTimeFormComponent,
  5.     InputThemeComponent,
  6.     ...
  7.   ],
  8.   entryComponents: [InputTimeFormComponent, InputThemeComponent],
  9.   exports: [InputTimeFormComponent, InputThemeComponent]
  10. })
  11. export class TimeZoneModule {}

5) Assume the custom element uses Bootstrap 4 for styling. Then, import Bootstrap Sass in scss file of the component.

$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap/scss/bootstrap";

6) AppModule does not bootstrap or declare AppComponent. It also defines ngDoBoostrap function to register custom elements in custom element registry. createCustomElement creates custom element class based on Angular Component and define function of customElements registers the new custom element class.

  1. @NgModule({
  2.   imports: [
  3.     BrowserModule,
  4.     FormsModule,
  5.     HttpClientModule,
  6.     NgbModule.forRoot(),
  7.     TimeZoneModule
  8.   ]
  9. })
  10. export class AppModule {
  11.   constructor(private injector: Injector) {}
  12.  
  13.   ngDoBootstrap() {
  14.     console.log("AppModule ngDoBootstrap");
  15.     const timeConverterElement = createCustomElement(InputTimeFormComponent, {
  16.       injector: this.injector
  17.     });
  18.     const timeThemeElement = createCustomElement(InputThemeComponent, {
  19.       injector: this.injector
  20.     });
  21.     customElements.define("time-converter", timeConverterElement);
  22.     customElements.define("time-theme", timeThemeElement);
  23.   }
  24. }

7) After AppModule is bootstrapped in main.ts, optionally assigns value to attribute of custom element

  1. platformBrowserDynamic()
  2.   .bootstrapModule(AppModule)
  3.   .then(() => {
  4.     const themeChooser = document.getElementsByTagName("time-theme")[0];
  5.     themeChooser.setAttribute("theme", "goldenrod");
  6.   })
  7.   .catch(err => console.log(err));

8) Build a nodeJS script to concatenate runtime.js, polyfill.js, script.js, main.js into time-converter.js. The time-converter.js can be used in other JS Frameworks and static website.

  1.  
  2. const fs = require("fs-extra");
  3. const concat = require("concat");
  4. (async function build() {
  5.   const files = [
  6.     "./dist/ng-time-converter/runtime.js",
  7.     "./dist/ng-time-converter/polyfills.js",
  8.     "./dist/ng-time-converter/scripts.js",
  9.     "./dist/ng-time-converter/main.js"
  10.   ];
  11.   await fs.ensureDir("elements");
  12.   await fs.emptyDir("elements");
  13.   await concat(files, "elements/time-converter.js");
  14.   await fs.copyFile(
  15.     "./dist/ng-time-converter/styles.css",
  16.     "elements/styles.css"
  17.   );
  18.   await fs.copy("./dist/ng-time-converter/assets/", "elements/assets/");
  19.   await fs.copyFile("./src/demo.html", "elements/index.html");
  20.   await fs.copyFile("CNAME", "elements/CNAME");
  21. })();

Articles I want to read

Tensorflow

https://towardsdatascience.com/how-to-build-a-gesture-controlled-web-based-game-using-tensorflow-object-detection-api-587fb7e0f907

Ngrx

https://medium.com/@bo.vandersteene/advanced-pagination-with-ngrx-store-and-angular-5-f26ca4761cef
https://medium.com/@vlado.tesanovic/handling-keyboard-shortcuts-in-angular-with-redux-ngrx-c88907f17ca8

Angular
https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c
https://medium.com/frontend-coach/self-or-optional-host-the-visual-guide-to-angular-di-decorators-73fbbb5c8658
https://medium.com/@davidibl/advanced-reusable-custom-angular-validator-9ca5febef583
https://malcoded.com/posts/web-assembly-angular?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

JS
https://blog.logrocket.com/using-trampolines-to-manage-large-recursive-loops-in-javascript-d8c9db095ae3

React Native
https://medium.freecodecamp.org/after-building-my-first-react-native-app-im-now-convinced-it-s-the-future-d3c5e74f8fa8

Import bootstrap-sass in vuejs

1) yarn add bootstrap bootstrap-sass node-sass sass-loader

yarn add boostrap bootstrap-sass node-sass sass-loader

2) Set $icon-font-path to find font files and import variable.scss and _bootstrap.scss

  1. $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
  2. @import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
  3. @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

3) In main.js, require(‘./assets/sass/main.scss’);
4) type yarn serve to launch application in development mode. Index page should open at url http://localhost:8080.

yarn serve

https://github.com/vuejs-templates/webpack/issues/166

// add any variables you want to override here
// ———
// BOOTSTRAP
// ———
$icon-font-path: ‘~bootstrap-sass/assets/fonts/bootstrap/’;
@import ‘~bootstrap-sass/assets/stylesheets/bootstrap’;

Projects built in May, 2018

Vue

CSS Grid

Angular

codebuddies contributions (As of May 3, 2018)

Make 5 Pull Requests to https://github.com/codebuddiesdotorg/codebuddies repo

  1. Opt out of auto-tweeted learnings – You can now opt out of auto-tweeting your learnings when you share a learning
  2. Github signin link added to the home page
  3. Bug fix: owner of completed hangout can create a hangout from the same page (broken button)
  4. Bug fix: hide google calendar button in completed hangout
  5. Remove duplicated code in the Meteor.LoginWithSlack function

codebuddies 1.0 release.
https://github.com/codebuddies/codebuddies/releases/tag/1.1