A Self-Contained UI component.

Intro

In BrewCareer.com, users will have 3 different status: normal visitor, signed up member, and mentor. According to UI, these 3 status share same CTA button with different states and behaviours, that means we need to create a button component which is adaptable no matter users are in which status.

Photo by Christin Hume on Unsplash

What’s the challenge?

The CTA button needs to be self contained, it fully adapts to user’s status, so we need to set the logic properly, make sure users always get what they expect while they are interacting with application.

How we approach the solutions.

Since users status potentially could be more in the future, we…


Deep look into the cause of the similar issue we’ve seen before.

I’ll be back…

Once again, our old friend, the rendering issue we had before appeared again, which is supposed to be resolved by tweaking :key value, and it has similar behaviour that the issue only appeared on Prod mode.

so first of all, we compared the error message between Prod and Dev mode which can be seen as below.


To approach a more maintainable CSS codebase.

Why we talk about Colour Variables Naming Strategy?

While maintaining colour variables, one thing I felt really painful is naming new colours. For example, if we need to add a new grey colour which is for menu background, usually it would be named as menuBackgroundGrey straightforwardly, but what if this grey is also for the text colour?

Then we will see this:
color: $menuBackgroundGrey; or background-color: $naviTextGrey;

It does look bit weird, but I think this is still fine, what really painful is there are always multiple menus existing in website. …


The common issue in Vue.js

Intro

While working on Vue.js project, sometimes you might notice that component isn’t rendered, it only shows empty. The reasons could be many, for example, API data doesn’t return because of bad API request, or it does return but the structure is different from Spec, or even some Javascript logic conflicts in template.

So What happened?

As mentioned above, we had an component rendering issue, but the weird thing is it only happened on Prod, on local it still worked well , so this unusual behaviour made us suspect that some conflicts might happen on Prod server. …


In Odds.com.au, we use odds comparison tables (below) to show different odds of each competitor, so users can quickly choose the one they are after, and make the best bet.

In racing game(e.g. horse racing), we put a switch button on top left of table, so users can see the results in different bet type by just clicking, a very typical page interaction in many other websites.

Odds comparison table in Desktop

How data-binding work in this case.

In our approach, while button is clicked, it will hit API endpoint with different param, then presenting the updated data in component without page refresh. During this process, we need the button to…


Odds.com.au is a platform which provides punters all kind of convincing information while they are trying to compose their own betting strategy and seeking for best bets. As a member of web development team, one of my major tasks is to make sure our users won’t get frustrated while they are ready to enjoy the party, like FIFA World Cup 2018.

Before FIFA World Cup coming, we added few features aiming to let punters would put Odds.com.au into their daily essential while they are enjoying soccer party, like Live Score, Confidence Meter, and a simple Stake Calculator. According to result…

Chia Feng Tsai

Founder of BrewCareer.com, Senior Front End Developer, UI/UX Designer, Blogger, Podcaster, Cats Lover.🐈, Ramen Enthusiast 🍜

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store