Jiayee.net

My learning diary

Sticky

#software #web #css
I found myself entangled in CSS. I needed app-header to stick to the top at all times. I also needed template-header to be right beneath app-header at all times. Lastly, embedded-content should begin immediately after template-header and should not be sticky. Here’s how the page organisation might look like: <div class="app"> <div class="app-header"> <!-- Content --> </div> <div class="app-content"> <div class="template-container"> <div class="template-header"> <!-- Content --> </div> <div class="embedded-content"> <!-- Content --> </div> </div> </div> </div> The simplest approach is to place app-header and template-header inside a single div.

Continue reading "Sticky"

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()"

Some Similarities

#software #web #css
This .some-class { display: flex; flex-direction: column; justify-content: center; min-height: 20rem; } and this .some-class { display: flex; align-items: center; min-height: 20rem; } appear the same to me. CSS-Tricks says, You can think of align-items as the justify-content version for the cross-axis (perpendicular to the main-axis).

Continue reading "Some Similarities"

Redux Poof!

#software #web #redux
I was at Page A. Page A calls an API and stores the response in the Redux store. After some clicking, I was routed to Page B. I expected to retrieve the API response stored by Page A. But it wasn’t there! The culprit was <a href ...>. I should be using Link or navigate(...) instead. When I refreshed Page B after getting there via Link, the store went poof again.

Continue reading "Redux Poof!"

Next page