Yayabels Personas

It’s been a while since I thought about yayabels, my little side project. Not to say that this project is not important to me, but some projects deserve more attention because those other projects get me paid. What can I say? I guess I’m partial to not starving to death.

Now, I am slowly shifting my mindset towards yayabels again and hopefully fix some major bugs and add some new modules.

Today, I want to define some yayabels personas. But first, what are personas:

persona, (also user personacustomer personabuyer persona) in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way


The keyword here is fictional. If you see a familiar name or circumstance, its just coincidence. Remember, these are all made up.

What’s all this again?

During yayabels.com development, I need to capture as much use case as I can, or at least the most important ones. These use cases come in the form of personas. So without further ado, here are some of the personas I came up with.



Dorothy is a homemaker and a mother of three kids. Her husband is away for work most of the time. She needs a stay at home yayabel to help around the house and with the kids.


Liza is a businesswoman who has a few shops around. She needs a yayabel to help around the shops. Bonus points for a high school diploma.


Ozawa is an expat from Japan. She is now living in the Philippines indefinitely. She needs a yayabel that speaks English.


Nancy is a pinay living in the UK. She’s coming to the Philippines this summer and needs yayabels for two weeks or so.


Life in Samar is hard for Ineng and she just dropped out of Sta Fe National high school. She is looking to earn a bit of money.


Inday is 52 and used to work in Hong Kong several years ago as a Domestic Worker. She takes care of her grandchildren at home but is looking for work.


Dodoy didn’t graduate high school but he has a driver’s license. He wants to use that skill and earn a few bucks.

Alyas Pusa

He has a pending murder case back in Mindanao and is now loose in Manila as a fugitive. He wants to become a family driver or a boy.


Isagani knows several people who is out of work and wants to work as yayabels. He is looking to earn a finder’s fee.


Tomas owns a manpower services but business is slow and wants to leverage this platform to reach as much prospect as possible.


There you go. Below is the list of all the personas I covered above. I know there are still several use cases that aren’t covered here. If you have anything in mind, please leave a comment below. Remember, this project is not only for me and I will need every help I can get.

PersonaMember Type
Alyas PusaEmployee
summary of yayabels Personas

Yayabels Home Page

In my previous post I discussed what yayabels is about and the problem it tries to solve. I also outlined how it will try to address the very specific “Kasambahay Hiring Problem”.

What you see above is the materialization of that solution. Here is the mobile version of the same page:

The entire experience revolves around three process flows

  1. Helper Wanted Posts
  2. Referrals
  3. Job Applications

I am not sure how to simplify the entire experience even further but I think that will do for now.

Any feedback or comments will be greatly appreciated.

In my next post I will show you the Helper Wanted screen.

Yayabels The Kasambahay Network

On my free time I work on a web app that tries to solve a specific problem.

I’m sure you or someone you know needed a house help at one point in your lives. What was your experience? For us, we meet house helpers only through word of mouth from family and friends. I’m sure there are maid services around but they’re just not very “discoverable”. Also, if I may add, their services are too expensive for somebody who lives in CALABARZON or similar area.

This app I am building tries to solve this by

  • Introducing a platform for families who need services of house helpers.
  • Offering incentives to head hunters in the form of a finder’s fee.
  • And last but not least, helping aspiring and experienced house maids to come out and apply for the jobs based on their preference. i.e. location, monthly salary, scope of work, etc.

I should probably emphasize that last bullet point. Let me explain.

Many of the kasambahays come from distant provinces and several of them are unfortunate to have no education at all and can barely read or write.

That is why the biggest challenge I am facing is how to design the UX (user experience) to be as simple and easy enough so it has the farthest reach. And we all know that simple is never easy.

The second bullet point is a kind of fallback. We don’t have to expect that job applicants can read or write. That’s where head hunters come in. Now I’m just using “head hunter” to define somebody who wants to refer a house help. It could be any person who has access to the internet who wants to help another person to find a job as house maid. They could expect a finder’s fee or not.

The last piece of the puzzle is the families who are in (sometimes dire) need for a helper. They are the ones who create wanted posts, and offer finder’s fee.

The idea is simple. Create a community where everyone can help each other out.

What do you think? Yay or nay?

ReactPinoy UX for Mobile

I really like this tweet:

I like

I like it so much I immediately implemented it in my side project reactpinoy.

Here is reactpinoy viewed in desktop mode:

reactpinoy desktop view

Here is reactpinoy viewed in mobile mode:

reactpinoy mobile view

While there’s is still a lot more UI/UX to debug here, immediately the experience for mobile immediately changed for the better.

Steve wrote a book called Refactoring UI. I plan to read the book when I get my hands on it. I hear it’s great because its a UI book that’s made by a developer for developers. The “No B.S. approach to UI design” or so I’d like to think about it.

If you cant read the book for some reason, Steve drops little gems like the one at the start of this post on his twitter feed, so I strongly recommend you give him a follow. His twitter handle is @steveschoger.

That Little Triangle in Bootstrap Popover

Reaction Component

There is a side learning project I am working on  and I want to apply a popover UX to a specific component.

reaction component

Initially I wanted to show this in a modal window for simplicity’s sake.

But why simplify things when we can complicate them?

Enter Bootstrap Popover

What am I talking about? This bootstrap popover:


Specifically, this triangle:


The css for that looks alien. Fortunately, css-tricks is here to explain it.

CSS Triangle

The Shapes of CSS

End Product


news item component

When user clicks on a person, the “Popover” shows.

But wait. Bug!


Looking back to the bootstrap 4 source code, they implemented it using absolute positioning, so I guess that’s where I am headed now.

Anyway, gotta go to work, stay tuned for any progress.


I am so over this now that I learned about the triangle thingy and ::after css selectors and all that shit.

The links I shared above explained how to create a triangle effect using an empty div and showing/hiding its borders and then putting them in ::after/::before elements.

So I decided to give up and just use the bootstrap popover and move on because life is short.

Here it is:



Having Fun with Automated Tests

You read the title right. It has the words “Fun” and “Automated Tests” in one sentence.

Consider the following test data:

_dbContext.Members.Add(new Member
    Id = new Guid(CONST_MEMBER_ID_1),
    FirstName = "John",
    LastName = "Smith",
    Address = "One Fictional Way",
    CellNo = "09150001111",
    Email = "johnsmith@mail.com"

This adds a test data to the Members table in a SQLite database using Entity Framework. This SQLite db gets created and then destroyed (using EF Migration) when I run my tests. So far all is very straightforward, no biggie.

But what if I have to generate several members into the database? Writing my own randomizer would be fun but I got some other shit to do.

Fun Factor #1: BOGUS

Let’s take a look at the very cool open source library Bogus.

From its GitHub page:

Bogus is a simple and sane fake data generator for .NET languages like C#, F# and VB.NET. Bogus is fundamentally a C# port of faker.js and inspired by FluentValidation‘s syntax sugar.

With this tool I can generate random stuff for just about everything. Names, phone numbers, email, dates. You name it.

If I needed to generate a new firstname, lastname, and email, then I would do it like this:

var names = new Bogus.DataSets.Name();
_member.FirstName = names.FirstName();
_member.LastName = names.LastName();
var internet = new Bogus.DataSets.Internet();
_member.Email = internet.Email(_member.FirstName, _member.LastName);

Perfect! More time for me to do other shit later.

Fun Factor #2: Builder Pattern

Everybody knows or have heard about the Builder design pattern. Right?

Its a design pattern popularized by the Gang of Four (GoF). The easiest example I can think of is the StringBuilder in .NET.

Well, to make testing more fun, you could take this pattern and use it to generate our test data!

I created a MemberBuilder class that will ultimately build a *surprise* Member object.

class MemberBuilder
        private Member _member;
        private readonly Faker<Member> _faker;
        public MemberBuilder()
            _faker = new Faker<Member>()
                .RuleFor(m => m.FirstName, (f, u) => f.Name.FirstName())
                .RuleFor(m => m.LastName, (f, u) => f.Name.LastName())
                .RuleFor(m => m.Email, (f, u) => f.Internet.Email(u.FirstName, u.LastName))
                .RuleFor(m => m.MembershipNo, f => f.UniqueIndex.ToString().PadLeft(5))
                .RuleFor(m => m.CellNo, f => f.Phone.PhoneNumber())
        public Member Build()
            return this._member;
        public MemberBuilder RandomValidData()
            _member = _faker.Generate();
            return this;

To use it:

var member = new MemberBuilder()


Why bother?

Well, Mr Smarty Pants, I believe this form is more readable.

The above code shows me immediately that it just generated a member with random data that will be valid for all tests.

In the future when I need to test for invalid data, I could just create another RandonInvalidData() that will do exactly that.

Plus we are software engineers, we love to complicate simple stuff.


The Ultimate Productivity Tool

Its so easy to get distracted these days. Social media alone will take a big chunk of your time and attention at any given day.

I too, struggle with this on a daily basis, not necessarily about social media, but the web in general. I read stuff on hackernews, aspnet blogs, and other technology/software engineering blogs. Its easy to get lost down that rabbit hole. So the stuff I need to do for the day gets pushed down a bit.

Pomodoro technique for me is sometimes a hit and miss. Sometimes it works, sometimes it doesnt. Why is it not working?

One day I decided to blame it all on the pomodoro tools I use, and thought I should create one of my own.

Enter micromanager-timer.

I took all my favorite features of all the pomodoro tools I ever tried and stole it to make this the ultimate productivity tool.


“This app is nothing but a glorified timer”. Is what you would say. But wait, take a look at these features and reserve judgement for later:

Auto Screen Capture

One feature is its ability to capture your screen as you are in the pomodoro zone. Because sometimes, you want to document stuff that you were doing and taking notes while doing it is another distraction. You could be researching for a blog or a just want to add a journal/wiki entry – this feature is great for that.

Music Player (soon)

Some people can focus better when listening to music. So what would you say If your pomodoro timer plays your “in the zone” music while you are actually “in the zone”? I could image myself listening to death-metal during the 25 mins focus times, and then classical music for the breaks – or vice versa!

Why micromanager-timer?

Imagine your manager checking up on you every so often and then ask you to review your work. This is what I was thinking when I named this app.

That and because naming things is hard.


I created this app in not more than about two hours (4 pomodoros), so the architecture is crap. I uploaded the source code to github so people can learn how to NOT DEVELOP an app.

Seriously, I needed a tool ASAP, so I fired up Visual Studio 2017 and created a WINFORMS app. It’s 2018 and I just created a windows forms app.

If I get some free time, I am going to over-engineer the shit out of this timer. I’m talking about external plugin architecture, unit tests, benchmarks, CI/CD, and all that crap.


This is the options page. Right now the only ones that are working are Pomodoro duration and Screenshot intervals.


Every few seconds, screenshots are stored in a folder structure like this:


The app stores the screenshots inside a folder with a similar task name and that folder also resides inside a folder with the current date with format “yyyy-mm-dd”.

The Future

Right now I am using it as is for the time being. It still sucks but I get that 25 mins countdown organized into tasks with screenshots.

There is still a lot to be done but I promise to work on it in the coming days, and will be blogging about it.

How to Kickass at Work

On good days I know I am above average programmer. On bad days I am just the worst imposter.

But I know how to minimize those bad days. I would like to share it with you.

Know your app from the outside.

This is embarassing to admit. I build stuff outside of work and I really enjoy it. But when it comes to the stuff I am actually getting paid to build I tend to procrastinate or get ADHD.

You know how it was built but the technique is to intimately know how it’s used. This is embarassing befause this is the part where I slack off. I always depend on a tester for these kinds of stuff. In the end it always bites me back. Always. When I’m fixing a bug, I move very slow because I have to figure out how to navigate the app every fucking time.

Maybe I have to login as a different user, how do I create one? How to generate this type of report? How to display this field in the form. I scramble most of the time.

One tip I could give in this area is to create a new test data from the ground up for each bug. New user, new customer, new up everything. In no time you will know half the system by heart. This may not be applicable to some data-specific bugs but its worth a try.

Automate stuff.

We develop an electron app at work. In many scenarios we need to publish/package the app so we could replicate some bugs. Packaging an electron app means running a bunch of commands, several of which are long-running.

Some of those commands dont work when I have other processes in memory as well. I have to make sure to exit VSCode or kill the app.exe manually for example.

All of this is time consuming. Instead of doing them manually, put all the commands in a script file. Pro tip: powershell is great stop hating if you come from a Linux background. You can virtually do anything in Windows using powershell. I havent tried it on Linux but you could download powershell for Linux and try it out for yourself.

Here is an example of my automated script file.



For a time we needed to do the packaging of electron app to debug stuff. This is because of a limitation of the app combined with the chromium subsystem limitation which i didnt really spend time to look at (ADHD remember?)

This is where communications come in. In my case it was more of a commsplaining (50% complaining).

You see, I work with engineers from Madrid and I am from Manila. I have a very good relationship with them. The kind where I am comfortable to whine about anything. In one chat message I mentioned in passing that the whole packaging of electron while debugging is killing me, and then the dude just lit up saying he already has a fix for that.

I asked if he could share it so the whole team could benefit. Long story short – debugging just became more convenient.

The moral of the story? Go ahead, whine about stuff. JK.

Try to Finish Stuff in the AM

This is more of a note to self type of thing but I find when I need to concentrate, Its easier in the mornings. Most people usually come in later after lunch so I have a few minutes to scramble.

We are fairly new team in the office and I want to know the team by joining in lunches, coffees, and everything. This bites me back in the end because it leaves me with less time than I started with but in the long run, I know it will pay off. To build a high performing team you have to know each other well.

Thats it. Thanks for reading.


I have been working on something during the past few weekends, and I will be posting about it soon. But the link is here:


username: manager
password: manager

I just need to add a few things to the app so I can publish it. Stuff like landing page and multi-tenant feature, etc. The source code is privately hosted on VSTS, I have no plans yet of open-sourcing it but maybe someday.

But now my ADHD is kicking in and I want to make something else. This time, I will make it in the open. I initially planned to have it as a team side-learning project at Amaris and host it in corporate VSTS, but I decide we can still make it a team-thing but hosted openly at GitHub.

The Paluwagan System

What is it? Here is a few links that will do a better job of explaining it than I probably could.



Existing Apps

There are no Android apps in Google Play store. There might be something similar to it but named differently. Paluwagan is after all, a Filipino term.

Over at Github, there are five other people who also had the same brilliant idea:


I haven’t tried any of these yet, but I’m sure they’re all good.

Mine will be better because I will make it. I joke but the experience is gonna be sweet.



Why I’m Going Back to WordPress from Ghost

I opened an AWS (Amazon Web Services) account. Purchased a domain name. I decided to write a weekly blog. I was going to conquer the world.

One year later, my debit card expired.

Along with my ambition.

So why I came crawling back to WordPress? Two words:

Cognitive Burden.

Now that I committed to a hosted setup, I felt like I need to deliver quality content. Because this would reflect towards me and my own identity. Which was not the effect I was looking for. What I really wanted was to just write my thoughts down for my future self mostly.

Subconsciously, I was also planning about doing all kinds of stuff like separating the blog with my future personal profile. For example, my blog would be at blog.jfaquinojr.com, personal website at jfaquinojr.com, side-learning stuff would be at x.jfaquinojr.com. I guess those unconverted to-do tasks that kept looming at the back of my mind also added to the cognitive burden already building up.

I just wanted to write a blog.

I rant. The last time I thought WordPress would slow me down. So I decided to host my own Ghost platform. I was wrong. Let the ‘I told you so’ from my friends and colleagues commence.

My move to hosted Ghost was probably just a way for me to scratch my own itch of setting up a hosted AWS environment so I could tell my friends, hey my blog is hosted at AWS. That’s my lame excuse.

I will rule the world with WordPress.

My world. Like I mentioned earlier, I will write a blog for my future self. Hopefully, there will be a time when I am searching for stuff, I will come across my own. And then I will be my own savior. My own kingdom where I rule over just myself. It’s going to be sweet. And if somebody else comes across anything useful I post here, that’s just going to be the cherry on the cake.