Thoughts – Aaron Yang | UI/UX Designer, User Researcher, Website Developer / Sun, 18 Dec 2022 16:30:41 +0000 en-US hourly 1 https://wordpress.org/?v=6.2.2 /wp-content/uploads/2021/02/cropped-Logo_AY_-favicon-1-32x32.png Thoughts – Aaron Yang | UI/UX Designer, User Researcher, Website Developer / 32 32 204485775 Embed Custom Code into a WordPress Post/Page: A Better Approach /embed-custom-code-into-a-wordpress-post-page-a-better-approach/ Sun, 05 Jun 2022 03:27:47 +0000 /?p=1486 Read More »Embed Custom Code into a WordPress Post/Page: A Better Approach]]>

I am maintaining a WordPress website for my department. As a part of that, sometimes I need to add custom code into the webpages to automize some work. At the beginning, it was not too hard. First, I finish all the code locally with a single HTML document and make sure it works properly. Second, I copy all the code in <style>, <body>, and <script> tags, and pasted them into a WordPress Custom HTML block. It works pretty well, just like the native WordPress element.

Custom HTML block of WordPress

The Goal

I have two goals in this project.

  1. The embedded iframe should look native.
  2. I can edit all the source code with a native code editor and sync the page content with GitHub.
  3. It can be reused easily in WordPress.

Solutions

Give the embedded iframe a native look.

The following two functions were inspired by the solution I found on Stackoverflow. The original answer was a little bit more complex, which considered compatibility for the old browsers. The basic idea is to set the iframe height to the height of the source web page when loaded. To get that height, we can send the height from the source to the iframe. Following two functions are used:

// The function that send the height of the source page content.
function sendHeightForIframe(mainContainer){
    parent.postMessage(document.querySelector(mainContainer).offsetHeight, '*');
}

// The function that receives the height from source page and set the height for the iframe.
function getHeightForIframe(trackedIframe) {
    // Listen for a message from the iframe.
    window.addEventListener("message", function (e) {
        if (isNaN(e.data)) return;
        // replace #iTweeContainer with what ever what ever iframe id you need
        const trackedElement = document.querySelector(trackedIframe);
        trackedElement.style.height = e.data + 'px';
        trackedElement.style.width = "1px";
        trackedElement.style.minWidth = "100%";
    }, false);
}

Here is the usage of two functions. First, add the function sendHeightForIframe to the page to be embeded. I added the selector “body” to the parameter. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embeded Page</title>
</head>

<body id="contentBody">
    
  <div>
  	This is the page to be embeded. 
  </div>

	<script>
      	sendHeightForIframe("body");

		function sendHeightForIframe(mainContainer){
            parent.postMessage(document.querySelector(mainContainer).offsetHeight + 50, '*');
        }

    </script>

</body>

</html>

Then, I added the iframe to the target page, call the function getHeightForIframe and pass the id of the iframe. 

<iframe src="url_of_the_embeded_page" id="trackedIframe" frameborder="0" width="100%" style="min-height: 100vh"></iframe>

<script type="text/javascript">
	getHeightForIframe("#trackedIframe");

  	function getHeightForIframe(trackedIframe) {
		// Listen for a message from the iframe.
    	window.addEventListener("message", function (e) {
      		if (isNaN(e.data)) return;
      		// replace #iTweeContainer with what ever what ever iframe id you need
      		const trackedElement = document.querySelector(trackedIframe);
      		trackedElement.style.height = e.data + 'px';
      		trackedElement.style.width = "1px";
      		trackedElement.style.minWidth = "100%";
    	}, false);
    }
</script>

Host the source code on GitHub

I wrote the entire project in VS code and hosted it on GitHub. To make it visible, I created published the project with GitHub page. However, you can host it anywhere you want.

Reuse the code with short coder

Next, you can add the iframe code and the script to a HTML block of the WordPress page and it will work well. However, it would be inconvenient to edit and reuse. A better approach is to attach the code somewhere and insert a shortcode into the page. To achieve that, I installed a plugin called “Shortcoder.” I create a shortcode in this plugin and pasted the code.

On the target WordPress page, I inserted the shortcode.

In this way, I can reuse the code by adding the shortcode on any page. More importantly, I can update the code with a native editor like Visual Studio Code without logging in my WordPress dashboard.

]]> 1486 Center-Surround Organization and Hermann Grid Illusion /center-surround-organization-and-hermann-grid-illusion/ Sat, 13 Jun 2020 00:51:07 +0000 /?p=174 Read More »Center-Surround Organization and Hermann Grid Illusion]]>

“The photoreceptors in a particular receptive field do not simply stimulate the ganglion cell, but instead are arranged in what is called a center-surround organization. For example, light falling on the center of the receptive field might result in the corresponding photoreceptor stimulate the ganglion cell (an ON response). Light falling just on the surrounding ring of photoreceptors might inhibit the ganglion cells (an OFF response). This cell is an example of an ON-center, OFF-surround cell.” 

Figure1. ON-center, OFF-surround cell

There are two kinds of responses of ganglion cell in the center-surround organization when light falling on the receptive field: stimulate the ganglion cell, or inhibit it. If the ganglion cells in the center of receptive field are stimulated and peripheral ones are inhibited, the cell will be called ON-center, OFF-surround cell. As is shown in Figure 1, if light fall on the center of the cell, the sensitivity, or the firing rate of the whole cell will increase. But if light fall on the peripheral part of the cell, the sensitivity of the whole cell will decrease so that people may see a dark spot, even if the spot does not exist.

 

Figure2-a. Hermann Grid

Figure2-b. Explanation of Hermann Grid

One of the most classical examples of this is Hermann Grid illusion (Figure 2-a). When viewing the Hermann Grid, people will see the faint dark spots that appear at the intersections of the white lines. In Figure 2-b, compared to cell 1, cell 2 on the intersection has more OFF cells activated (marked with rad minus), which means more inhibition on cell 2. So it is less sensitive than cell 1. Therefore, we see dark spot at the intersection. Actually, if you look carefully at the grid, you probably see very faint dark lines between every black square, which is extracted below (Figure 3-a). On the center of the white line, more surrounding photoreceptors (OFF cells) are stimulated by light, so that more center photoreceptors are inhibited from perceiving the light.

Figure3. The faint dark area we see on Hermann Grid

The function of center-surround organization can also reflect on some LOGO design. With single color, they produce ingenious chiaroscuro. Take the example of Figure 4, the logo of Woolmark. When looking at the logo, you might notice that the space between the lines is not pure white. Certain parts of them seem little brighter, which are marked with green on Figure 4-b. That’s because these areas are at the end of the gaps. There will be less light falling on the ganglion cell, and the OFF-surround cells do not produce too much inhibition. So, we feel these areas are brighter, just like there are some light leaks from the inside of the wool ball.

Figure4. The logo of Woolmark

Sources:

Grid illusion: https://en.wikipedia.org/wiki/Grid_illusion

Making Sense of the Hermann Grid Illusion: http://www.rosslab.neurobio.pitt.edu/making-sense-of-the-hermann-grid-illusion/

]]> 174 Beyond what We See in Color: Color Constancy /beyond-what-we-see-in-color-color-constancy/ Sat, 13 Jun 2020 00:38:45 +0000 /?p=165 Read More »Beyond what We See in Color: Color Constancy]]>

Our visual system has the ability to distinguish colors of objects and ignore the color or the wavelength of light source. This phenomenon is called color constancy. For example, following figure shows what our visual system can perceive from a colorful cube when it is illuminated by different color light.

In the picture above, we can distinguish red, blue, yellow and green squares, even though the cubes are illuminated by yellow and blue light. However, when color was extracted from the image, we may find that the real color of the cube is not what we see. In the left picture, the ‘red’ is actually orange and the ‘blue’ is actually cool gray. In the right picture, the ‘red’ is actually purple and the ‘yellow’ is actually gray. (Images are from: Lotto, R. Beau, Surajit Nundy, and Dale Purves. “Why we see what we do: a probabilistic strategy based on past experience explains the remarkable difference between what we see and physical reality.” )

How does our vision system have the ability of color constancy? According to German Biologist Von Campenhausen’s theory, we gain this ability during the evolution of our vision system. In the natural world, one important way for animals to distinguish edible food or avoid potential danger is of color. But natural daylight is not constant. During morning and dusk, the color of skylight looks warm; and during the middle of the day, it will be cool. As a result, the color of objects also varies accordingly. This may cause threatening to survival because the animal may fail to find right food or recognize the toxic fruit. With vision evolution and experience accumulation, human and many animals evolve the color constancy, which makes the vision system can always distinguish the color of objects in the varied environment.


References:

Lotto, R. Beau, Surajit Nundy, and Dale Purves. “Why we see what we do: a probabilistic strategy based on past experience explains the remarkable difference between what we see and physical reality.”

American Scientist 90.3 (2002): 236+. Biography in Context. Web. 14 Sept. 2015.

Vincent Walsh, Janusz Kulikowski: “Perceptual Constancy: Why Things Look as They Do.” Cambridge University Press. 13 August, 1998. P324.

Martin J. Tovée. “An Introduction to the Visual System.” Cambridge University Press; 2 edition (July 14, 2008).

]]> 165