Projects built in April, 2018

Angular 5

Build a Todo App with Angular 5 and Ngrx 5. Ngrx 5 is an open source state management library powered by RxJS.
So far, I used ngrx/store to define a store that stores todo, course and instructor entities. Ngrx entity generates entity state that is an object with mandatory ids and entities properties. As their names implied, ids hold an array of object ids and entities is a mapping of id to object. If you want the entity state to have custom attributes, they are initialized in getInitialState function of Adapter class.

Adapter.getInitialState({
loading: false
});

Ngrx effect, on the other hand, observes some actions, causes side effects and returns the result actions to reducer function. Reducer function accepts the result action, processes the payload and updates the store with new state. Ngrx effect class is a good candidate to make HTTP requests to backend, extract response data, construct payload and provide resultant action.

Furthermore, todo and learnings are designed as lazy loaded modules to reduce initial load time and they only get loaded when navigating to route of the module.

codebuddies contributions (As of April 15, 2018)

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

  1. initial setup for sign in with github
  2. Bug fix: no announcement notification for hangouts scheduled under the CB default group
  3. Bug fix: long URLs in hangout descriptions would break popup container
  4. Bug fix: If hangout topic/description contained the ampersand character (&), the text was truncated before the first occurrence of &.

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

Reading this week – April 2, 2018

1) Change detection explained
https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

2) Getting started at Angular Universal
https://davidea.st/articles/the-beginners-guide-to-angular-universal

3) Architecture in Angular Project
https://medium.com/@cyrilletuzi/architecture-in-angular-projects-242606567e40

4) Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

Projects built in March, 2018

2017 End Of Review

Achievements:

  1. Become a contributor of CodeBuddies.org (github repo: Here) and made 10+ PRs in less than 3 months
  2. Contributions to websites of HKOSCon 2017 and PyCon 2017
  3. Volunteer of HKOSCon 2017 and PyConHK 2017
  4. Completed 8 Frontend Masters Courses on JavaScript, ES6, AngularJS, Angular and PWA
  5. Learnt Angular, TypeScript and FlexBox in my free time
  6. Upgraded company internal application to use AWS Cognito for authentication and AWS API Gateway to secure endpoints

What to do in 2018:

  1. Learn advanced topics of Angular (Ngrx, Universal App, PWA/Service Worker, AOT)
  2. Learn React and CSS Grid
  3. Continue to contribute in CodeBuddies project
  4. Run Go study group in CodeBuddies.org
  5. Build my first WebVR application (Angular + Aframe.js or ReactVR)