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

Ng Newsletter

Authentication in angular with ngrx
http://mherman.org/blog/2018/04/17/authentication-in-angular-with-ngrx

Hidden feature in Angular Material CDK
https://medium.com/@simonb90/hidden-features-of-angular-material-cdk-ee07066d73d1

Angular Reactive Forms
https://www.codeproject.com/Articles/1239744/Angular-Reactive-Forms-with-Dynamic-FormArray-and?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_249

Apply Webpack bundle analyser to find bundle size in Angular App
https://alligator.io/angular/bundle-size/

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.