My Mom Is My Superhero

My Mom Is My Superhero

As of writing this article, my mom is not in good condition. She suffered a lot from cancer but that is not what this article is all about.  I want to present her as what she really is before cancer somewhat taken over her body. I don’t want people to see her as a sickly fragile person. I want people to know how faithful, kind, brave and happy my nanay is embarassed I will write about how this woman inspired me to be a lot better and how she was able to touch a lot of lives.

Don’t get me wrong, this is not a goodbye. We believe that God will heal her in his perfect timing.

A Happy Girl

There is this aura about her that somehow made every situations a lot lighter and fun. She is known for her humor and charisma among her friends. There is really no boring moments when you are with her. She is a happy-going person. My Nanay unknowingly made me realize that life should be fun and we should really not focus on negative vibes.  I am sure that all her friends treasure those moments they had with my Nanay. Don’t get me wrong, this is not a goodbye. I know one day we will get to experience again this kind of happiness when we are with her.

A Brave Warrior

For 5 years she fought cancer and still fighting it with courage. Many sessions of chemotherapy, oral-pills, procedures, and operations but her fighting spirit remains firm. No single word of hopelessness and despair has been uttered by her lips even in most painful and dire situations.   Never we heard of words like “Di ko na kaya.”, “Hirap na ako.”, “Ayaw ko na”. 

I really don’t know what bravery is until my mom showed it to me.

My mom is a warrior of God. When she’s weak and scared she call to the Lord to help her and give her strength. God always answers her fervent prayers. She is this brave because she knows she is not fighting alone. We are with her along with our Creator when she is facing a battle. 

I know one day will come, that the battle will be won by my Nanay. 

A Kind Samaritan

As a son, I am very proud of my Nanay. She never speaks of her good deeds to others but I will proudly tell it to you right now (I hope she won’t get mad when she read this.) 

My Nanay is very generous. Even we are facing financial problems due to her medications she will never forget to help others through simple means. She always gives food to poor people in our community.  She always donates small amounts of money to good deeds. She bought supplies during Christmas and New Year and give them to the poor. She always helps her friends with their problems be it financial or spiritual. Her heart is full of joy doing those things. It’s her mission, it’s her calling. Never did she mention any of these on her Facebook profile and never did she allow others to know who give them the help.  When there is no help to give, she will always offer prayers for those in need.

She is always there for others. She is always ready to listen to their problems and always sympathize with them. She was able to always put her feet in others’ shoes. She literally loves everyone that’s why everyone loves her too.

I will never forget the time we just came home from the hospital after she survived a procedure that almost got her killed. Do you know what’s the first thing in her mind? She needs to help. She requested me to buy 2 sacks of rice and distribute them to the poor. This woman never fails to amaze me with her kindness and generosity.

My mom really made me realize that being rich is really not the ultimate goal in life. She made me realize that service and charity are what we should aspire to. 

A Faithful Servant

My mother is a devotee of Divine Mercy and a firm believer of the Mama Mary. She is a member of Friends of Divine Mercy and she spearheads Fatima missions on our barangay. My mom was able to cultivate the faith in our barangay to be stronger than before. Many join her with her mission of inspiring and converting others through faithful prayers to Divine Mercy and Mama Mary.

This is my Nanay’s mission – to be a FAITHFUL SERVANT to God through consistent praying, serving the community, helping the poor, visiting the sick and the prisoners, spreading the miracles of God through her, and just being a kind human being.

My Nanay never doubted God even in her most dire situations. She trusted God with her whole heart that if our Lord Jesus Christ was able to heal the leper and raise a dead then he will surely be able to heal her.

She always offered her pain and suffering to the conversion of sins and salvation of souls. I will never forget the day she told me that she is willing to take more sufferings because she knows that it will not be in vain. And that hits me really hard. This woman has achieved such faith that she was really willing to do everything to impress our God.

I know God has seen everything. She has seen through her heart and that God used her to become an instrument to inspire others and that sinners who heard from her will be converted.

My Nanay is my one and only superhero here on Earth. She may not be as physically strong as Superman but she will be able to move mountains with her faith. She may not be as fast as Flash but her prayers reaches heaven faster than Flash’s movement speed. She may not be as agile as Spiderman but she is always agile to help others. She may not be Wonder Woman, but she is as beautiful as her.

Proud son here.

When Accepting Help Might Lead You To Stressed, Controlled and Manipulated Life

When Accepting Help Might Lead You To Stressed, Controlled and Manipulated Life

We are just people and there are times that we struggle so much in life and needed other to lift us up. It is not wrong to ask for help if you really need it. But sometimes, accepting help from others might lead you to a stressed, controlled, and manipulated life especially if the person who helped you thought he / she had helped you too much that they think you owe them your life.

Some people, when they helped you and you thought that is genuine help from a genuine friend, will expect A LOT FROM YOU. Of course, you need to give back to that person, but somehow this kind of people wanted more. They want you to live the way they wanted. They wanted you to think that everything you have right now is because of them. They will chain you and will give you up when you weren’t able to do the things they deemed are right. These people will ridicule you and will always imply that you are a very ungrateful person when in fact you will pay them or you have already paid them for their help.

Some of you might find it very hard to separate from these people not because you are benefitting so much, but because you might have started a business with them and that you are the one who is facing your clients. You might have had an agreement with them that might ruin you when you try to avoid them. These are very hard situations indeed.

Try to avoid help especially when starting a business or working for your self-development when you know you can do it on your own. You might end up in a relationship that will shackle you from obtaining the goal you had in the very first place. Be self-reliant and know you can do things your way.

Content Projection, ContentChildren, and QueryList

Content Projection, ContentChildren, and QueryList

As I started my first open-source project called Ignite, I had many opportunities applying Angular concepts that I seldom use when doing my freelance jobs. When you have a deadline, you tend not to adhere very well to the paradigm that components should be reused as much as possible. As such, my components template span several hundred lines. My rule of thumb is that when a piece of functionality will not be reused anywhere do not bother to create a separate component for it. But when you are doing freelance and opensource project, you must always be open to the idea that everything should be reusable as much as possible.

Yesterday, I was able to add support for Admin LTE tabs (a bootstrap tabs) to the Ignite Frontend which is written in Angular. Bootstrap’s Tabs can be used in the following manner:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

The question is how I can create a Tabs Component in such a way that it will be easily reused inside any Angular Project.

The answer:

Content Projection, Content Children and Query List.

It is very tempting to write a TabsComponent that will be used like this:

<app-tabs [items]="navItems"></app-tabs>

It seems easy, but this is not really the best way. Why? because you’ll end up creating a Frankenstein component that will not be easily customizable and reused. What do I mean?

Supposed you have three different tabs, and each tab has its own unique templates or designs? What you can do is to supply every property as @Input and you might even supply references to templates! That is a very bad idea, and will surely not scale.

So how we gonna solve it then?

The Plan…

So the plan is to use Content Projection like so:

 <app-tabs>
   <app-tab-link active="true">Activity</app-tab-link>
   <app-tab-link>General Info</app-tab-link>
   <app-tab-link>Security</app-tab-link>
   <app-tab-pane active="true">
      <h1>Activity</h1>
   </app-tab-pane>
   <app-tab-pane>
      <h1>General Info</h1>
   </app-tab-pane>
   <app-tab-pane>
      <h1>Security</h1>
   </app-tab-pane>
</app-tabs>

Isn’t it more syntactically beautiful?

Notice how you can apply different design / template for each <app-tab-pane>. Another benefit is that you do not need to have id, data-toggle and href attributes all over the place.

How does Content Projection Works?

If you are just starting with Angular you might want to read the article I wrote about it – here.

Creating The TabsComponent

Here’s how our TabsComponent would look like:

@Component({
  selector: 'app-tabs',
  template: `
    <div class="card">
      <div class="card-header p-2">
        <ul class="nav nav-pills">
          <ng-content select="app-tab-link"></ng-content>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content">
          <ng-content select="app-tab-pane"></ng-content>
        </div>
      </div>
    </div>
  
  `,
})
export class TabsComponent {
  /...
}

Notice the two ng-content tags. What does it do is that it provides a slot into our component to allow us to “insert” a component that has a selector equals to the value of the select attribute.

<app-tabs>
  <app-tab-link></app-tab-link>
  <app-tab-pane></app-tab-pane>
</app-tabs>

<app-tab-link> and <app-tab-pane> will be inserted accordingly based on where their selectors are placed inside the TabsComponent’s <ng-content>.

We will apply the same concept to insert contents inside <app-tab-link> and <app-tab-pane> so we can provide unique templates / contents for each component.

Creating TabLinkComponent and TabPaneComponent

We would be implementing the same strategy as like how we create TabsComponent like so:

TabLinkComponent

@Component({
  selector: 'app-tab-link',
  template: `
    <li class="nav-item">
      <a href="" class="nav-link" [class.active]="active">
        <ng-content></ng-content>
      </a>
    </li>
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabLinkComponent {
  @Input() active: boolean = false;
}

TabPaneComponent

@Component({
  selector: 'app-tab-pane',
  template: `
    <div class="tab-pane" [class.active]="active" [attr.hidden]="hidden">
      <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabPaneComponent {
  @Input() active: boolean = false;

  get hidden(): boolean | null {
    return this.active ? null : this.active;
  }
}

Notice that on our TabLinkComponent we have an active property that will be toggled whenever the link is clicked. This is the same as the TabPaneComponent. The only difference is that we will apply a hidden attribute to it’s <div> element so that we have easy control over how the TabPaneComponents are being shown.

Querying Projected Contents and Controlling Their Visibility

The only problem left now is that how we will control the active state of TabLinkComponents and the visibility state of TabPaneComponent. There should be only 1 active TabLinkComponent and 1 visible TabPaneComponent at a time.

@ContentChildren(forwardRef(() => TabLinkComponent), {descendants: true}) links: QueryList<TabLinkComponent>;
@ContentChildren(forwardRef(() => TabPaneComponent), {descendants: true}) panes: QueryList<TabPaneComponent>;

Using the code above, we can now loop all over our Projected Contents from TabsComponent. Then we need to listen for events that the Projected Events might be needing. Like so:

  ngAfterViewInit(): void {
    this.links.forEach((link, index) => {
      link.clicked.pipe(
        takeUntil(this.destroy$)
      ).subscribe(() => {
        this.updateUi(index);
      });
    });
  }

Notice that we do this inside ngAfterViewInit lifecycle callback. The reason is that projected content might not be available inside ngOnInit. Notice also that each link has a clicked that we will be subscribing whenever the link emitted an event. Then whenever the clicked observable emits a value we update the UI like so:

  updateUi(selectedIndex): void {
    const callback = (element, index, selectedIndex) => {
      if (index === selectedIndex) {
        element.active = true;
      } else {
        element.active = false;
      }
    };

    this.links.forEach((link, index) => callback(link, index, selectedIndex));
    this.panes.forEach((pane, index) => callback(pane, index, selectedIndex));
  }

As you can see, we are assured that there will only be 1 active TabLinkComponent and 1 visible TabPaneComponent at a time.

This is how our components look after we have completed the implementation:

TabsComponent

@Component({
  selector: 'app-tabs',
  template: `
    <div class="card">
      <div class="card-header p-2">
        <ul class="nav nav-pills">
          <ng-content select="app-tab-link"></ng-content>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content">
          <ng-content select="app-tab-pane"></ng-content>
        </div>
      </div>
    </div>
  
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit, AfterViewInit, OnDestroy {
  @ContentChildren(forwardRef(() => TabLinkComponent), {descendants: true}) links: QueryList<TabLinkComponent>;
  @ContentChildren(forwardRef(() => TabPaneComponent), {descendants: true}) panes: QueryList<TabPaneComponent>;
  protected destroy$ = new Subject<void>();
  
  constructor() { }

  ngOnInit(): void {
    
  }

  ngAfterViewInit(): void {
    this.links.forEach((link, index) => {
      link.clicked.pipe(
        takeUntil(this.destroy$)
      ).subscribe(() => {
        this.updateUi(index);
      });
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  updateUi(selectedIndex): void {
    const callback = (element, index, selectedIndex) => {
      if (index === selectedIndex) {
        element.active = true;
      } else {
        element.active = false;
      }
    };

    this.links.forEach((link, index) => callback(link, index, selectedIndex));
    this.panes.forEach((pane, index) => callback(pane, index, selectedIndex));
  }
}

TabLinkComponent

@Component({
  selector: 'app-tab-link',
  template: `
    <li class="nav-item">
      <a (click)="linkedClicked(); $event.preventDefault()" href="" class="nav-link" [class.active]="active">
        <ng-content></ng-content>
      </a>
    </li>
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabLinkComponent {
  @Input() active: boolean = false;
  @Output() clicked: EventEmitter<any>  = new EventEmitter<any>();

  linkedClicked(): void {
    this.clicked.emit();
  }
}

TabPaneComponent

@Component({
  selector: 'app-tab-pane',
  template: `
    <div class="tab-pane" [class.active]="active" [attr.hidden]="hidden">
      <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabPaneComponent {
  @Input() active: boolean = false;

  get hidden(): boolean | null {
    return this.active ? null : this.active;
  }
}

Conclusion

Hopefully, you learned something of value reading my article. Now, you can use Content Projection to facilitate code reuse inside your angular applications. But be wary not to abuse it and apply it whenever you want. You might not be needing it if you have a simple component where passing props would suffice.

Thanks! ☺️

Kickstart Your Startup Applications with IGNITE

Kickstart Your Startup Applications with IGNITE

As a freelance developer, when we are starting an application we have some sort of “template” or “boilerplate” to kickstart our projects faster. This might include an admin site, an auth server, a front end, etc. Some of us might even start from scratch and spend many hours just bootstrapping our applications. This happens to me very often that I decided to create an open-source project that will help my fellow freelancers to kickstart their applications without thinking the basic functionalities that an application will be needing.


The plan is to create code boilerplates that will bootstrap any applications that will be needing Admin / Backoffice systems, an authentication service, and a decent SPA frontend. The project will consist of small microservices e.g auth service, user service, product service, payment service, etc that can be interconnected with each other but are loosely coupled.

I already started the Admin Frontend via Angular and Admin LTE (2 open-source projects) and you can check it here:
https://github.com/koalaphils/ignite-frontend. I will be updating it from time to time but it will always be nice if some Filipino developers can help with the project 🙂

My fellow Filipino Freelancers, let’s start a project that will benefit us all in the long run. I don’t know, but I seldom see open-source Filipino developers and it would be an honor to work with you all. If you are interested just send a PR or email me at [email protected]

What I’ve Done So Far

Github Code Navigation Made Easy!

Github Code Navigation Made Easy!

Did you know GitHub’s unlimited private repositories are now free? Yeah, you read that right!
As such, I started to use it on my new projects. Who doesn’t want a large contributions graph on their Github profile?
But what amazes me more is their new update! You can now click the definition of a function, class, and variables and jump to the actual file all within the Github Web Interface 😀It even also shows references!

Amazing isn’t it? Now I am waiting for a free CI / CD tool for private repositories and organizations like what Gitlab has. For now, I love using Github and will plan to do some of my private projects with it.