Make Investment Works

From school, training, and work, we'll get deeper knowledge in software development. It's not uncommon we lack investment education since schools don't teach everyone, unless we happen to be in the related majors. I decide to write something about investment to reflect what I've learned by myself so far.

Financial advisor

A Financial advisor is a person that provides financial advice or guidance to clients. They can be insurance agents, investment managers, tax advisors, real estate planners, etc. Investment managers deal with their clients' investment portfolios.  It may be good to have your money managed by experts. But you have to be cautious in choosing a financial advisor. They will charge you fees for compensations. Some charges 1% - 1.5% of the assets they manage. Some charge by hour. Regardless your criteria, please add this: a fiduciary. A fiduciary has a higher ethical standard and is required to act on behalf of his or her clients benefits. That means, if the client had all the prerequisites and the information, the client would have taken the same action. A non-fiduciary is only required to make suitable and reasonable action, which may not be the client's best benefits.

Actively managed fund and passively managed fund

An actively managed fund is always attended by a manager, who is supposed to be an expert. They pick the stocks, bonds and other investment vehicles in the funds. A passively managed fund, on the other hand, doesn't requires a fund manager to pick for the funds. They usually match the index they follow. With less human intervening, it incurs less fees to manage the fund.

You may believe actively managed fund will perform well, since  an expert always keeps an eye on it and adjusts immediately to the market change. You remember the chart of the fund always looks good. For example in the screenshot, FSPTX outperforms the benchmark. (Note the chart is for illustration only. It doesn't mean the fund is good or bad). Is that the whole story? Do you notice the text below it? The performance data featured represents past performance, which is not guarantee of future results.

Example Fund Prospect

from https://fundresearch.fidelity.com/mutual-funds/summary/316390202

This study by S&P Down Jones Indices in 2016 shows that 90 percent of actively managed funds fail to outperform their index targets over the past one-year, five-year and 10-year periods. Why don't you find such funds from your fund managers? The funds can be discontinued. Fund managers don't want you to lose confidence.

One major factor in the under performance is the fee in actively managed funds. The cost can be the management fee, trading commission, etc. All financial advisers need compensations. It doesn't matter how well the fund performs. What really matters is how much you get after the fees.  Let's look at the fee of the fund FSPTX.

Example Fund Fee

from https://fundresearch.fidelity.com/mutual-funds/fees-and-prices/316390202

Its expense ratio is 0.77% and its Exp Cap (Voluntary) is 1.15%. The expense ratio is what you pay right now. Exp Cap is the limit of the fee you may pay in future, which means you might end up paying 1.15% fee. For example, you have $10000 in investment and the market value doesn't change in 10 years. If the expense ratio at 0.77%, you pay $10000 * 10 * 0.77% = $770, If the expense ratio is 1.15%, you pay  $10000 * 10 * 1.15% = $1150. That's $380 more for $10000, even when you don't have any gains. The fee of a passively managed fund can be lower than 0.1%.  I'm sure you see the difference. If you worry about the fee, you may be scared when you know Expense Cap may be terminated or revised at any time. You don't have control how much you're charged.

First, most funds cannot outperform the index. You already don't have too many gains. Second, you need to pay more in fees to have an actively managed fund. Passively managed fund most likely just mirror the index it's tracking. It doesn't requires too many fees to get similar performance as an index. An actively managed fund needs perform much better than a passively managed fund to give you the equal gains, after you pay the fees. Those make passively managed fund more attractive than actively managed fund.

Diversification and re-balance

Don't put all eggs in one basket. For example, if you only invest in one company's stock, your return of investment is the same as the company stock. When the company has a rough year, or even goes bankruptcy, you may lose everything. The best way to reduce the risk is to diversify. You can diversify within the same category. For example, you buy 25 – 30 unrelated stocks. Or you can diversify across all categories. You have everything in your portfolio: stocks, bonds, precious metal, etc. The theory is that the same economy data won't affect all of them in the same way. It may hit one stock or one category heavily but be neutral or good for another one. In the end the positive smooths out the negative. You'll need to decide how to allocate your investment, depending on you risk tolerance and investment goal.

What strikes me is re-balance. It has a twofold effect. First, it shields you from more risks. Second, it is a simple way to buy at the bottom/sell at the top. For example, you have a portfolio with 80% stocks and 20% bonds. If the stocks grow to 90%. That may mean the stock is going up. Because it has a cycle, it'll going down some day. If you keep investing in stocks and the stock market crashes, you'll lose a lot. Why not re-balance and have more in bonds? You may sell some stocks and buy more bonds, or invest more in the bonds. In the end, you will have 80% in stocks and 20% in bonds. That may not be the top when you sell the stock. But who knows. Don't try to time the market. You're reducing the risks and having some gains.

Few can guarantee you can get in in and out of the market at the right time. But there are many ways to reduce the risks. Diversification and re-balance are good tools in your risks management.

 

Lump-sum vs recurring

Do you save the money until it's large enough before you investment? Or do you set aside smaller money in your paycheck and invest every month? The first approach is lump sum and the second one is recurring.

They both have advantages and disadvantages. For lump sum, if you buy when the market is at the bottom, you'll get much larger gains. Every rise will count as your gains afterwards. Remember to sell them at the right time too. You need much luck in both time. If the market crashes after you buy, you need to wait a long time before getting even. The second, regardless how the market is, you keep investing even with smaller money. For some money, you may lose. For some other money, you get gains. When you spread out investment like this, you're also reducing the risks. Lump sum can give you much higher return when you do that at the right time. Recurring on the other hand, can reduce your risks of timing the market wrong.

 

I've been talking most about avoiding the fees and reducing the risks. What really makes it works is discipline. Once you decide how to allocate your investment, how to re-balance, and whether lump-sum or recurring, don't let good or bad news in the market sway you. You need to research and analyze before you make any changes. Try to do it rationally, not emotionally. The best way to get more gains is to time the market right. That's almost impossible. Luck is much more important than expertise. The second best way is to reduce risks. Make sure you don't lose money before you get gains.

Make Your Website Accessible

In my previous post, I talked about why accessibility matters. Here are some tips to make your website accessible.

Use HTML semantic elements to structure your website

Semantic elements are the elements with meaning. Screen readers can describe the meaning to the user, and navigate the elements accordingly. Don't use semantic elements for layout only purpose. For example, <table> can be used in layout to show unrelated data in some particular way. Don't do this. Screen readers will try to interpret them as rows and columns in a table and that will confuse users. On the other hand, if your data and their relation have some form of meaning, use semantic data to organize them. For example, we can use <div> with CSS style to make some text look like heading. If the the text is actually in heading, we need to use heading elements such as h1, h2 and h3. Use semantic elements to help screen readers and only use them when the data meet the semantic of the element. Some other semantic elements are <header>, <nav> etc.

Add alt to <img>

A picture is worth a thousand words. I know the images are important. They're funny. They're telling a lot of stories. Some of them can only be conveyed via a picture. Think of this. Not all users are able to see the picture. As you know, the technology right now cannot analyze a picture and say what is on it precisely. Not to mention it must be in the context of your website. Use the alt attribute in the <img> element. Give it some concise description of the image. The screen reader can read the text to the user. Please help the user to understand what you try to say with a picture.

Support keyboard navigation in your website

Don't assume all the users always use the mouse in your website. No. Come up with a good way to navigate your website with only keyboard. The most important key is the TAB. It should navigate the next logical element on your website. If your web page is a form, users should be able to use tab to go through all of the input fields. If you have many different sections in your web page, use some form of navigation bar to help users to go to each section quickly.

Use WAI-ARIA

If you can use semantic elements, that's great. But if you find yourself in a situation that semantic element isn't an option, follow WAI-ARIA. It contains a set of aria-* attributes you can use to describe your information to users with disabilities. Some common and important attributes are aria-label, role, etc. Here are the list of aria-* attribute.

Test with Screen Readers

I've mentioned screen readers above. Please test your websites using a screen reader. Listen to what the screen reader tells you. Not to look at what's presented on the website. This will give you a sense how users with disabilities understand your website. Similar to a user study, try to find out what the gap is for a person with disabilities and close that. There are Narrator on Windows, Jaws etc. Play with them and get familiar.

 

Hope you find some useful information from this article. We can definitely do some small things to improve the whole experience for those with disabilities. For example, add alt to img, use semantic elements or aria-* attributes and test with a screen reader.

Why Accessibility Matters

The technology has prevailed our daily life. We enjoy the convenience by the technology. But a large portion of population with varied forms of disabilities may not feel the same way, because the applications are not accessible. Accessibility matters because it helps more people to use the application and bring convenience to all of us.

Accessibility is Important to Users

According to US Census Bureau, 1 in 5 people in the US have a disability. (https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html)
Around the world, about 15% of the world population have some form of disability (https://www.disabled-world.com)
Even for those who don't have any issues when they're young, they may develop when they age. They don't see well, have difficulties in moving around and have shaking hands.
Yes. That is terrible. We can help them. But I'm a developer. I'm just writing code. It's not related to my work. What can I do to help them? I'm glad you ask. It's related to our work. It's more and more important to create applications that are also accessible to the people with disabilities. Computers, Internet and mobiles bring convenience to our life. For example, we don't need to go to a bank for basic banking. A lot of government related activities can be done online. A few weeks ago, I filed a report of a stolen bike to police department online and got acknowledged the next day. The technology has saved us many trips. The applications we write has benefited so many people. If we are not aware of it, we may unintentionally leave behind some people that have some forms of disabilities. It's important to keep that in mind when we develop applications. We need to make our application accessible to all.

Accessibility Adds to a Good UX Design

Speaking of good UI, we always think of elegant UI layout, attractive colors and various fonts, which is also what we interact with most of time. When I learned User Interface Design at the university, I also thought of creating good UI for our eyes until I realized how important it is for us to create accessible applications. Accessibility is an important part in UI design. A good design doesn't only mean fancy UI. The first and most important principal of a good design is that it's usable. I remember the cover of the book The Design of Everyday Thing. I wouldn't argue the teapot looks good or bad. It is definitely not usable. Then what's the point to create such a thing for people to use? That's what we'll get if we don't pay attention when we develop our applications. When we keep accessibility in mind, we start to focus on the core work flow of our application. It not only helps people with disabilities, but also improves experience for those without disabilities. The application will focus on the work that it is designed for. The UI will be simplified and has less distractions.

How Accessibility Benefits Users

It's more powerful to watch how vision impaired users to use applications. The least I don't expect is that they are playing games. That’s amazing.

Below is a short documentary about how a blind person loves to play games.

Gaming Through New Eyes - Award Winning Short Documentary - Blind Gaming

There are indeed many obstacles to them in games. But we can make games much better for them.

Conclusion

There are already many applications that are not accessible. We cannot change all of them at once. What we can do is to design with accessibility for new applications and to fix with accessibility bit by bit for old ones. I understand that we always have limited resource, tight schedule and complicate work. But little by little, we can make the world a little better.

Create a Shared Component in Ionic 3

We use Ionic 3 to develop mobile applications. We of course want to re-use the code as much as possible. Component provides us a way to create our building block and re-use them in the application. At the same time, Ionic 3 also supports lazy loading. Each lazy-loaded page itself is in a module. How do we share the component between these modules? The first option is to declare the component in the app module (a.k.a app.module.ts). But this will beat the purpose of lazy loading. The component will be loaded when the app starts. We want to load it only when it's used. We can wrap the component into a module and import it in the places where it is used. Let's see how to do it.

Create a Project

Let's create a project.

$ npm install -g ionic cordova
$ ionic start sharedComponentDemo

This will take a while to download the necessary node packages. After that, we can go ahead to add pages and components. We'll use hero form in the demo. We'll have two pages that use the same form. The first page is to add a hero and the second page is to edit the hero. It makes sense to share the same form component.

Add Pages

We'll use the Ionic command to add pages. We'll make them lazy loading later.
First, let's create the page to add a hero.

$ ionic g page hero.add

That will create three files:

$ ls src/pages/hero-add/
hero-add.html  hero-add.scss  hero-add.ts

Then let's create a page to edit a hero

$ ionic g page hero.edit

Wire Pages to App

If you run ionic serve now, you won't see the page. That's because the new pages we just added aren't wired to the app. And the pages created from the command aren't lazy loadable either. We're going to make them lazy loadable and add them to the application. We'll only use HeroAddPage as an example. We can apply the same change to HeroEditPage.
First, we need to import IonicPage from ionic-angular in hero-add.ts, and add the decorator @IonicPage to the class HeroAddPage (above @Component).
Then, we'll create a module.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HeroAddPage } from './hero-add';

@NgModule({
  entryComponents: [
    HeroAddPage,
  ],
  exports: [
    HeroAddPage,
  ],
  declarations: [
    HeroAddPage,
  ],
  imports: [
    IonicPageModule.forChild(HeroAddPage),
  ],
  providers: [
  ],
})
export class HeroAddModule {}

We have the module for the page now. We can use it in the application. The Ionic command creates the app using the tab template. Let's change tabs.ts. Replace tab1Root with "HeroAddPage" and tab2Root with "HeroEditPage" and remove other tabs. Now we show the pages in the app. We don't need to import the modules or components. We just use the pages in the form of string. Ionic will load them.

A Shared Component

The shared component is a form for adding or editing a hero. Let's still use the command to create it.

$ ionic g component hero.form

Similar to the pages, we create the component and the module. I'll omit the component since it's similar to page. It just doesn't use @IonicPage. I'll focus on the module. We have to export the component.

import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { IonicModule } from 'ionic-angular';
import { HeroFormComponent } from './hero-form';

@NgModule({
  entryComponents: [
  ],
  exports: [
    HeroFormComponent,
  ],
  declarations: [
    HeroFormComponent,
  ],
  imports: [
    FormsModule,
    IonicModule,
  ],
  providers: [
  ],
})
export class HeroFormModule {}

That's it. We just create a reusable component that can be used in different modules. There is one more step though. We need to import it in the modules where we use it. For example, in hero-add.module.ts, we add HeroFormModule into imports.

Here are the steps to create and use a shared component:
1. Add the component to a shared module and export the component in the module.
2. Import the shared module in the modules where we'll use the component.
You can check out the complete demo app at https://github.com/kceiw/sharedComponentDemo.git.

Don’t Fall to the Trap of a Reset Button

I recently added a button to a form to reset all its inputs to default values once it's clicked. But the button cleared all the inputs. It turned out to be that I set the button type to "reset" and that's what it is supposed to do. Below is what I did.

First I added a button to a form <button type="reset" (click)="onButtonClick()"/>. Maybe you're not familiar with (click)="onButtonClick()". I used Angular 2 here and what it means is to handle the click event in onButtonClick. I set all the fields in the form to some default values which are not null or undefined. Guess what. All the inputs were blank after the button was clicked. While I expected they show some values. Though I debugged and made sure onButtonClick() did what it's supposed to do. I didn't find why the inputs were cleared.

Since I used some component from Ionic Framework in the form, I wondered whether there's some bug in that component. To prove it or disprove it, I wrote a simplified code snippet in plunkr. To my surprise, it worked. I compared the simplified code and my original code and realized the only difference was I set type to reset in my code.

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button, a reset button will

The button resets all the controls to their initial values.

It has effects on the form's inputs too. No wonder that I set the inputs to the default values and reset always clears all of them.

If you want to reset your form, don't add "reset" to the button unless you understand what it does. If you have encounter a problem, it's always a good idea to try it out in a simplified version of your code.