Content: Front Page

Primary Content

Different Component States

Commenting is disabled.

In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need to be addressed.

In turn, we might neglect designing for the different states of the component or the whole system that we are designing.

In general, here are the different states a component might be in:

  • Populated
  • Blank


The populated state simply means that the component has been modified to have its intended content. In the example of an Accounts page, there is at least one account created.

See the Pen Component State: Populated by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820


The blank state occurs when there is no content – whether it is the initial appearance or a result of removing all previous content.

See the Pen Component State: Blank by Brian Dys Sahagun (@BrianSahagun) on CodePen.1820

Always consider the design of the other states of the components.

Revisiting CSS Levels

Commenting is disabled.

I am currently making a curriculum for the basics of HTML and CSS.

Revisiting CSS Levels, I have written in the past about it:

The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.

And from there on, we build towards Visual Design.

Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.

Can your design stand in black and white?

Can your design stand in a serif font?

Yes, it should.

Web Typographic Hierarchy

Commenting is disabled.

Designers must establish a typographic hierarchy in their web designs.

This is not random; this is written in a style sheet; this is designed.

The typographic hierarchy aids in making reading web texts easier.

Here is an example of a designed web typographic hierarchy:

The baseline is 16px; from there, up scale is multiplied by 1.5 and down scale is multiplied by .75.

Small: 12px
Medium: 16px
Large: 24px
X-Large: 36px
XX-Large: 54px

We should not go beyond 12px because that would be too small for the naked eye.

As a designer, you may now decide which heading level is Large. In this case, I would say Large is H3, X-Large is H2, and XX-Large is H1.

H4, H5, and H6 would be 16px but with different additional styles to differentiate them when put in the context of heading and paragraph.

Subsidize Traffic

Commenting is disabled.

Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen

Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen

Metro Manila traffic is as bad as it is. We motorists make it worse when we employ “offensive driving” instead of defensive driving.

All types of vehicles, from the most expensive to the rusted ones, can get stuck altogether in the sweltering heat of the sun or the drenching gush of rain.

The least one could do is treat others as their road peers instead of road rivals. In doing so, we tend to subsidize traffic.

But how can one subsidize traffic, thus, improving the overall condition of it?

  • Stay on your lane
  • Let overtakers get ahead
  • Give way to lane skippers

Stay on your lane

You may skip from lane to lane as long as you don’t disrupt the flow in that lane. Disrupting the flow could mean inserting your vehicle in an exact space in between two vehicles in that lane. If you don’t want the cognitive load of deciding where the fastest lane is – stay on your lane.

Let overtakers get ahead

You’re maybe racing with time to a destination but don’t race with overtakers. They might be in a “number two” emergency situation, you never know.

Give way to lane skippers

And if there are cars inserting themselves into your lane, slow down and just let them. If you don’t, two lanes are disrupted – theirs and yours. If you do, then congratulations, you subsidized traffic!

The Value of Photographs Over Time

Commenting is disabled.

Value of Photographs Over Time

Chart of Value of Photographs Over Time by Brian Dys Sahagun

The value of a photograph doubles over time.

At the moment of a moment’s capture the value to the owner is close to zero.

It’s only for sharing directly to someone.

It’s only for posting indirectly to an audience.

It’s a smile-maker or a cringeworthy cue.

Its value to machine learning is immense and future-proof.

Its value to content aggregation is in-valuable.

And in the day after, while being stashed away it brews.

And in the day after next until another generation is born a moment captured is a moment created.

We Stop and Go

Entry Comments Actions


Driving along a highway. At hundred twenty. It feels like god is watching you. The auto – buck naked – it’s only the chassis, the steering wheel, the seat, and you. You feel invulnerable in that speed because you see the rain speckles streak upwards yet you don’t feel the violent current of air that you’re piercing into.

But you are afraid of losing control. Afraid of vanishing from the story of other people’s books. And what about when others lose control?

Shift in second gear and pulse the brakes. “Never drift,” my brother told me at a downwards spiral parking lot.

Shift in first gear. “Reverse and full throttle,” my brother told me as I drifted back a steep slope.

A mix and match of speed, acceleration and deceleration. A calculation of distance. An anticipation of others in movement, in stillness. And I wondered how a school of fish would sway in unison.

Only for today we all share this road with one another. With things, with animals, with people.

And aren’t we all dreaming of home? Of good night’s sleep?

I sit in the dark of ten p.m. A desolate intersection, a face aglow of stop waiting to go.

Sandals Na May Medyas

Commenting is disabled.

c. 1997

Nauso ang topsider na may medyas. Nauso ang balat na sandalyas na may butas-butas at strap na may medyas. Baduy daw sabi ng tiyo ko. Hindi ko sila ginaya. Jeprox ba? Baduy. Jologs sa panahon ngayon.

May kilala akong nagsusuot ng Birkis tapos medyas. Nagmula siya sa Davao at nag-aral sa Ateneo De Manila. Kawawang bata, hindi alam ang kalakalan sa Maynila.


How Meralco Will Make Bill Payments Even Easier

Commenting is disabled.

On April 8, 2014 I wrote out my frustration about failing to pay my electricity bill – I discovered it saved as draft, unpublished.

Now, here it is – has anything changed?

Meralco + BPI Express Online = Fail

It’s the start of the month again, I logged in to BPI Express Online to pay my Meralco bill. But I remembered that Meralco updated the Account Number of my account making my current enrollment in BPI invalid. Countless times, I tried to enroll my new Account Number to no avail.

Meralco + BPI = Fail

So, I went to a nearby BPI branch to pay the bill. But lucky me, the teller said that they don’t accept overdue payments. You know, when you’re paying the bill past the due date stated on the bill? I looked at my bill and drat, yes, due date was yesterday – April 6, Sunday.

Meralco + LBC = Fail

I headed to an LBC across the street – still, they don’t accept overdue payments. It’s as if Meralco automatically becomes unlisted in their roster of “accepted bills” after the bill’s due date.

Meralco punishes you for not paying on time

Apparently, overdue payments are only accepted at Meralco Business Centers. So I remotely asked my wife to pay the bill at the nearest business center. It was near, all right and if she had free time. But the line was long – like 45-minutes long. That night after work, I dared myself to come home.

Online payments = FTW; Old Business Centers = WTF

Let me clarify – old business centers as the only acceptable payment center is WTF.

The main benefit of online payment of bills is that wherever you are, whatever you do, you can make the payment. It goes the same with Third Part Agents (TPAs) such as banks (BPI, BDO) and payment centers (LBC, Bayad Center) – chances are they are just around the corner, competing for customers like us. Unlike the handful Meralco Business Centers that would require you to book a flight to get there.

The Problem

Meralco does not have a well-rounded grace period in bill payments. After the stated due date, it then limits you to paying only at any of their Business Centers. But chances are, there’s only one in your area. And like I said, one must take a trip to reach it.

The Solution

Don’t limit customers who are so willing to pay their bills – anywhere, anyhow they want.

I interviewed Meralco’s customer service via Facebook Messenger and found out about their schedule from meter reading to billing to letting you live by the candlelight.

The person behind the screen also explained the reason behind the problem: it takes 3 days for TPAs (third party agents like BPI, Bayad Center) to report the payment to Meralco – and I assume, if they didn’t have some kind of ban, by the time Meralco receives your payment, you already duped them into thinking that you deserved that glowing television light despite being an overdue payee.

Let’s see how Meralco could afford being forgiving by allowing TPAs to accept late payments (with a grace period, of course).

I dub it the Meralco Billing Schedule (this is the normal process as I calculated it):

  • March 27: Meter reading
  • March 30: Bill delivery – 3 days after meter reading
  • April 6: Bill due date – 7 days after bill delivery or 10 days after meter reading
  • April 9: Notice of disconnection – 3 days after bill due date
  • April 15: Order of disconnection – 6 days after notice of disconnection

As you can see, there is a total of 9 days before the SWAT comes barging in your front yard and disconnecting you from a line more important than online.

Meralco could still afford to let TPAs accept payments up to 3 days after issuing the notice of disconnection (April 12). That will leave the required 3 days of TPA reporting of payments.

I talked to a colleague a month ago – he’s working on a bill payment system wherein Meralco is one of the billers. To my surprise, it is still fashionable in this day and age to prolong the suffering of people already without TV and fridge.

How I prevented this anomaly from happening ever again? I enrolled all my bills in Citi One Bill.