Jiayee.net

My learning diary

reCaptcha on-error

#software #web #javascript #angular
Polling wasn’t effective because: Hot reloading did not happen because of some heap limit error. I called the wrong function to check if the reCaptcha errored. To deal with the heap limit, my buddy suggested updating the docker-dev script in package.json to: { "scripts": { "docker-dev": "export NODE_OPTIONS=\"--max-old-space-size=4096\" && ..." } } As for checking if the reCaptcha errored, neither on-expire nor captchaService.isValid worked. A possible explanation for the former would be that the reCaptcha didn’t expire.

Continue reading "reCaptcha on-error"

Captcha isValid()

#software #web #angular
I needed the client to check for the captcha failure when a user loads a form. In the captchaService abstraction for angular-recaptcha, there was isValid() which does: /** * Check if the response has been set, assuming captcha is enabled. */ this.isValid = () => this.response || !this.enabled; I had a way to trigger the captcha failure. In the same WiFi network, I accessed a form from localhost through my mobile phone.

Continue reading "Captcha isValid()"

Polling

#software #web #javascript #angular
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

#software #web #javascript #angular
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

#software #web #javascript #angular
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"

Next page