My learning diary

Polling

There were instances where users filled up a time-consuming form but could not submit it because of reCaptcha failure. Users ended up having to refresh and re-populate the form. That’s some harsh user experience. My team uses a forked version of angular-recaptcha. I located the controller, directive and template for the form. I attached a recursive $timeout at the controller and the directive, but as of now, I have not gotten them to work.

Continue reading "Polling"

Dynamic Tooltips

I had a tooltip for a switch which contained 2 lines of text. The first line of the tooltip shows how users can fill the textarea field nearby. The second line reminds users to meet certain prerequisites before filling the field. My GovTech OSS buddy suggested shortening the tooltip depending on user interaction. At first, the tooltip looked like: <i class="..." uib-tooltip="Here's the one and only static tooltip!" tooltip-trigger="'click mouseenter'" ></i> uib-tooltip seems to come from UI Bootstrap.

Continue reading "Dynamic Tooltips"

Intercepting Angular Data Binding

I have two form switches. Let’s call them A and B. I had to program them such that: When A is off, disable and switch B off. When A is on, disable and switch B off. We can ignore backend logic because I programmed it such that if A is off, ignore B. So, how did I solve this? I intercepted the data binding with a directive. This may not be the best solution, but it was so convenient and intuitive to me!

Continue reading "Intercepting Angular Data Binding"

Style Fixes 1

I discovered there were some unexpected styles for <code> and <pre> in this site. This is due to Foundation’s default styles. The inline code style was fine, but the same style applied to code blocks (i.e. <pre><code>...</code></pre>), and that was not fine. There was also insufficient margin and padding for the code blocks. I inspected the <code> elements. I found out that Foundation was the culprit. It has been styling the <code> elements on top of what Hugo has in store.

Continue reading "Style Fixes 1"