Add breadcrumb list structured data using JSON-LD

Bugfix: No "Experiment" suffix in the heading text
Apply recommendations from Lighthouse (2)
2021-03-06 10:00:00 +07:00 · 2021-03-06 09:00:00 +07:00 · 2021-03-06 08:00:00 +07:00 · 2020-12-04 15:00:00 +07:00 · 2020-11-11 19:40:00 +07:00
29 changed files with 773 additions and 96 deletions
--- a/experiment/addition_game.html
+++ b/experiment/addition_game.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Addition Game - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Addition game: Play until you don't have numbers in your hand">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Addition Game"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Addition Game Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -46,7 +63,7 @@
 			<p>This was created because I want to implement a game that was played so much, either at school or when playing with friends in my neighbourhood.</p>
 			<p><span class="italic">Play until you don't have numbers in your hand</span></p>
 			<p><a href="bare/addition_game.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 644px; height: 554px;" src="bare/addition_game.html"></iframe>
+			<iframe style="width: 644px; height: 554px;" src="bare/addition_game.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/bare/addition_game.html
+++ b/experiment/bare/addition_game.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Addition Game - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/bare/dip/contrast_enhancement.html
+++ b/experiment/bare/dip/contrast_enhancement.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Contrast Enhancement - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -8,7 +8,7 @@
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<style>
 noscript, .noscript {
-	background: #fff9cC2;
+	background: #fff9c4;
 	border: 4px solid #fff176;
 	border-radius: 4px;
 	display: block;
@ -45,6 +45,10 @@ h1 {
 	width: 256px;
 }

+.attrib {
+	font-size: 12px;
+}
+
@media (max-width: 832px) {
 	body {
 		margin: 0 8px;
@ -62,7 +66,7 @@ h1 {
 	</noscript>
 	<p>Contrast enhancement is a technique to make objects in an image easier to distinguish.</p>
 	<div class="figures">
-		<img id=img src="hawkesbay.png">
+		<img id=img src="hawkesbay.png" alt="Original image" width=256 height=256>
 		<canvas id=c width=256 height=256></canvas>
 	</div>
 	<article>
@ -81,6 +85,8 @@ h1 {
 			<canvas id=cB2 width=256 height=256></canvas>
 		</div>
 	</article>
+	<hr>
+	<p class="attrib">Image used: "Unequalized Hawkes Bay NZ" by Konstable (CC BY 2.0); edited from Phillip Capper (CC BY 2.0)</p>
 	<script>
 const SIZE = 256;
 const a = c.getContext("2d");
--- a/experiment/bare/dip/edge_detection.html
+++ b/experiment/bare/dip/edge_detection.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Point and Edge Detection - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -8,7 +8,7 @@
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<style>
 noscript, .noscript {
-	background: #fff9cC2;
+	background: #fff9c4;
 	border: 4px solid #fff176;
 	border-radius: 4px;
 	display: block;
@ -49,6 +49,10 @@ h1 {
 	width: 256px;
 }

+.attrib {
+	font-size: 12px;
+}
+
@media (max-width: 832px) {
 	body {
 		margin: 0 8px;
@ -84,9 +88,9 @@ body.mathml .eq-image {
 	<h2>Point Detection</h2>
 		<p>Below is an example of point detection.</p>
 		<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd></mtr><mtr><mtd><mn>-1</mn></mtd><mtd><mn>8</mn></mtd><mtd><mn>-1</mn></mtd></mtr><mtr><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-		<p class="equation eq-image"><img src="edge_detection-eq-1.png" height=75 style="height: 75px;"></p>
+		<p class="equation eq-image"><img src="edge_detection-eq-1.png" alt="Kernel for point detection" width=119 height=94 style="height: 75px; width: auto;"></p>
 		<div class="figures">
-			<img id=imgA src="valve.png">
+			<img id=imgA src="valve.png" alt="Original image" width=256 height=256>
 			<canvas id=cA width=256 height=256></canvas>
 		</div>
 	</article>
@ -100,19 +104,19 @@ body.mathml .eq-image {
 				<div class="figure">
 					<b>Horizontal</b><br>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr><mtr><mtd><mn>2</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-2</mn></mtd></mtr><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-2.png" height=75 style="height: 75px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-2.png" alt="Kernel for horizontal Sobel filter" width=107 height=94 style="height: 75px; width: auto;"></p>
 					<canvas id=cB width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>Vertical</b>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd><mtd><mn>1</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>-1</mn></mtd><mtd><mn>-2</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-3.png" height=75 style="height: 75px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-3.png" alt="Kernel for vertical Sobel filter" width=119 height=94 style="height: 75px; width: auto;"></p>
 					<canvas id=cC width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>Magnitude</b><br>
 					<p class="equation eq-mathml" style="height: 75px;"><math><msqrt><msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>y</mi><mn>2</mn></msup></msqrt></math></p>
-					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" height=22 style="height: 22px;"></p>
+					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" alt="Magnitude formula" width=82 height=28 style="height: 22px; width: auto;"></p>
 					<canvas id=cD width=256 height=256></canvas>
 				</div>
 			</div>
@ -124,19 +128,19 @@ body.mathml .eq-image {
 				<div class="figure">
 					<b>Horizontal</b><br>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-5.png" height=75 style="height: 75px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-5.png" alt="Kernel for horizontal Prewitt filter" width=107 height=94 style="height: 75px; width: auto;"></p>
 					<canvas id=cE width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>Vertical</b>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-6.png" height=75 style="height: 75px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-6.png" alt="Kernel for vertical Prewitt filter" width=119 height=94 style="height: 75px; width: auto;"></p>
 					<canvas id=cF width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>Magnitude</b><br>
 					<p class="equation eq-mathml" style="height: 75px;"><math><msqrt><msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>y</mi><mn>2</mn></msup></msqrt></math></p>
-					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" height=22 style="height: 22px;"></p>
+					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" alt="Magnitude formula" width=82 height=28 style="height: 22px; width: auto;"></p>
 					<canvas id=cG width=256 height=256></canvas>
 				</div>
 			</div>
@ -148,24 +152,26 @@ body.mathml .eq-image {
 				<div class="figure">
 					<b>45 degrees</b><br>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>-1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-7.png" height=75 style="height: 54px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-7.png" alt="Kernel for 45 degrees Roberts filter" width=76 height=67 style="height: 54px; width: auto;"></p>
 					<canvas id=cH width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>135 degrees</b>
 					<p class="equation eq-mathml"><math><mrow><mo>(</mo><mtable><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr><mtr><mtd><mn>-1</mn></mtd><mtd><mn>0</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-					<p class="equation eq-image"><img src="edge_detection-eq-8.png" height=75 style="height: 54px;"></p>
+					<p class="equation eq-image"><img src="edge_detection-eq-8.png" alt="Kernel for 135 degrees Roberts filter" width=76 height=67 style="height: 54px; width: auto;"></p>
 					<canvas id=cI width=256 height=256></canvas>
 				</div>
 				<div class="figure">
 					<b>Magnitude</b><br>
 					<p class="equation eq-mathml" style="height: 54px;"><math><msqrt><msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>y</mi><mn>2</mn></msup></msqrt></math></p>
-					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" height=22 style="height: 22px;"></p>
+					<p class="equation eq-image" style="height: 75px;"><img src="edge_detection-eq-4.png" alt="Magnitude formula" width=82 height=28 style="height: 22px; width: auto;"></p>
 					<canvas id=cJ width=256 height=256></canvas>
 				</div>
 			</div>
 		</article>
 	</article>
+	<hr>
+	<p class="attrib">Image used: "Valve original (1)" by Simpsons contributor (CC BY-SA 3.0)</p>
 	<script>
 const SIZE = 256;
 const aA = cA.getContext("2d");
--- a/experiment/bare/dip/grey_transform.html
+++ b/experiment/bare/dip/grey_transform.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Greyscale Transformation - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -8,7 +8,7 @@
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<style>
 noscript, .noscript {
-	background: #fff9cC2;
+	background: #fff9c4;
 	border: 4px solid #fff176;
 	border-radius: 4px;
 	display: block;
@ -44,6 +44,10 @@ h1 {
 	width: 256px;
 }

+.attrib {
+	font-size: 12px;
+}
+
 input[type=range], #slider {
 	max-width: 400px;
 	width: 90%;
@ -80,7 +84,7 @@ msup>*:nth-child(2) {
 		<h2>Negative transformation</h2>
 		<p>Below is an example of negative transformation (invert color), i.e. <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <mrow><mn>1</mn> <mo>-</mo> <mi>x</mi></mrow></math> where <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
 		<div class="figures">
-			<img id=imgA src="torii.png">
+			<img id=imgA src="torii.png" alt="Original image" width=256 height=256>
 			<canvas id=cA width=256 height=256></canvas>
 		</div>
 	</article>
@ -88,10 +92,10 @@ msup>*:nth-child(2) {
 		<h2>Logarithmic transformation</h2>
 		<p>Below is an example of logarithmic transformation. It uses <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <mrow><mi>c</mi> <msub><mi>log</mi><mn>2</mn></msub><mrow><mo>(</mo><mn>1</mn> <mo>+</mo> <mi>x</mi><mo>)</mo></mrow></mrow></math> where <math><mi>c</mi></math> is the value of slider below and <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
 		<div class="figures">
-			<img id=imgB src="torii.png">
+			<img id=imgB src="torii.png" alt="Original image" width=256 height=256>
 			<canvas id=cB1 width=256 height=256></canvas>
 			<canvas id=cB2 width=256 height=256></canvas>
-			<pre id=coutB>0</pre>
+			<pre><label id=coutB for=sliderA>k = 1</label></pre>
 			<input id=sliderA type="range" min=0 max=2 value=1 step=0.001>
 		</div>
 	</article>
@ -99,13 +103,15 @@ msup>*:nth-child(2) {
 		<h2>Power-law transformation</h2>
 		<p>Below is an example of power-law (gamma) transformation. It uses <math><mi>T</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow> <mo>=</mo> <msup><mi>x</mi><mi>k</mi></msup></math> where <math><mi>k</mi></math> is the value of slider below and <math><mi>x</mi> <mo>∈</mo> <mrow><mo>[</mo><mn>0</mn><mo>,</mo> <mn>1</mn><mo>]</mo></mrow></math>.</p>
 		<div class="figures">
-			<img id=imgC src="torii.png">
+			<img id=imgC src="torii.png" alt="Original image" width=256 height=256>
 			<canvas id=cC1 width=256 height=256></canvas>
 			<canvas id=cC2 width=256 height=256></canvas>
-			<pre id=coutC>0</pre>
+			<pre><label id=coutC for=sliderB>k = 1</label></pre>
 			<input id=sliderB type="range" min=-1024 max=1024 value=0>
 		</div>
 	</article>
+	<hr>
+	<p class="attrib">Image used: "Aoi Aso-jinja, torii" by Saigen Jiro (CC0 1.0)</p>
 	<script>
 const SIZE = 256;
 const a0 = cA.getContext("2d");
@ -142,7 +148,7 @@ const clamp = (v) => Math.min(Math.max(v, 0), 255);
 const logarithmic = (v, c) => c * Math.log2(1 + v / 255) * 255;
 function drawA(val) {
 	let multiplier = val;
-	coutB.innerText = multiplier;
+	coutB.innerText = "k = " + multiplier;
 	let canvasData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
 	let freq = new Array(256); for (let i = 0; i < 256; i ++) freq[i] = 0;
 	for (let j = 0; j < canvasData.height; j ++) {
@ -172,7 +178,7 @@ const k1 = 1 / 1024 / 1024;
 const powerlaw = (v, e) => Math.pow(v / 255, e) * 255;
 function drawB(val) {
 	let exponent = Math.pow(10, val * val * Math.sign(val) * k1);
-	coutC.innerText = exponent;
+	coutC.innerText = "k = " + exponent;
 	let canvasData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
 	let freq = new Array(256); for (let i = 0; i < 256; i ++) freq[i] = 0;
 	for (let j = 0; j < canvasData.height; j ++) {
--- a/experiment/bare/dip/smoothing.html
+++ b/experiment/bare/dip/smoothing.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Image Smoothing - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -8,7 +8,7 @@
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<style>
 noscript, .noscript {
-	background: #fff9cC2;
+	background: #fff9c4;
 	border: 4px solid #fff176;
 	border-radius: 4px;
 	display: block;
@ -48,6 +48,10 @@ h1 {
 	width: 256px;
 }

+.attrib {
+	font-size: 12px;
+}
+
@media (max-width: 832px) {
 	body {
 		margin: 0 8px;
@ -81,9 +85,9 @@ body.mathml .eq-image {
 		<h2>Mean/Box Filter</h2>
 		<p>Below is an example of mean filter (box filter).</p>
 		<p class="equation eq-mathml"><math><mfrac><mn>1</mn><mn>9</mn></mfrac> <mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd></mtr><mtr><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd></mtr><mtr><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-		<p class="equation eq-image"><img src="smoothing-eq-1.png" height=75 style="height: 75px;"></p>
+		<p class="equation eq-image"><img src="smoothing-eq-1.png" alt="Matrix equation for mean/box filter" width=114 height=94 style="height: 75px; width: auto;"></p>
 		<div class="figures">
-			<img id=imgA src="noisy-photo.png">
+			<img id=imgA src="noisy-photo.png" alt="Noisy photo" width=256 height=256>
 			<canvas id=cA width=256 height=256></canvas>
 		</div>
 	</article>
@ -91,9 +95,9 @@ body.mathml .eq-image {
 		<h2>Gaussian blur</h2>
 		<p>Below is an example of Gaussian blur with <math><mn>σ</mn> <mo>=</mo> 1</math>.</p>
 		<p class="equation eq-mathml"><math><mfrac><mn>1</mn><mn>4.8976</mn></mfrac> <mrow><mo>(</mo><mtable><mtr><mtd><mn>0.3679</mn></mtd><mtd><mn>0.6065</mn></mtd><mtd><mn>0.3679</mn></mtd></mtr><mtr><mtd><mn>0.6065</mn></mtd><mtd><mn>1.0000</mn></mtd><mtd><mn>0.6065</mn></mtd></mtr><mtr><mtd><mn>0.3679</mn></mtd><mtd><mn>0.6065</mn></mtd><mtd><mn>0.3679</mn></mtd></mtr></mtable><mo>)</mo></mrow></math></p>
-		<p class="equation eq-image"><img src="smoothing-eq-2.png" height=75 style="height: 75px;"></p>
+		<p class="equation eq-image"><img src="smoothing-eq-2.png" alt="Matrix equation for Gaussian filter" width=295 height=94 style="height: 75px; width: auto;"></p>
 		<div class="figures">
-			<img id=imgB src="noisy-photo.png">
+			<img id=imgB src="noisy-photo.png" alt="Noisy photo" width=256 height=256>
 			<canvas id=cB width=256 height=256></canvas>
 		</div>
 	</article>
@ -101,10 +105,12 @@ body.mathml .eq-image {
 		<h2>Median filter</h2>
 		<p>Below is an example of median filter. Median filter works best for salt-and-pepper noises.</p>
 		<div class="figures">
-			<img id=imgC src="salt-and-pepper.png">
+			<img id=imgC src="salt-and-pepper.png" alt="Image with salt-and-pepper noise" width=256 height=256>
 			<canvas id=cC width=256 height=256></canvas>
 		</div>
 	</article>
+	<hr>
+	<p class="attrib">Images used: "Highimgnoise" by Lugiadoom (Public Domain) and "Noise salt and pepper" by Marko Meza (Public Domain)</p>
 	<script>
 const SIZE = 256;
 const aA = cA.getContext("2d");
--- a/experiment/bare/drive_a_car.html
+++ b/experiment/bare/drive_a_car.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Drive A Car - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/bare/genetic_algorithm.html
+++ b/experiment/bare/genetic_algorithm.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Genetic Algorithm - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/bare/localoutlierfactor.html
+++ b/experiment/bare/localoutlierfactor.html
@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+	<title>Local Outlier Factor - Experiments - srifqi</title>
+	<meta charset="utf-8">
+	<meta name="author" content="srifqi">
+	<meta name="description" content="Local outlier factor calculator">
+	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
+	<style>
+noscript, .noscript {
+	background: #fff9c4;
+	border: 4px solid #fff176;
+	border-radius: 4px;
+	display: block;
+	padding: 4px;
+	margin: 8px;
+}
+
+noscript, .noscript, noscript *, .noscript * {
+	font: 12px sans-serif !important;
+}
+
+body {
+	font: 16px sans-serif;
+	margin: 0 auto 16px;
+	max-width: 800px;
+	overflow-y: scroll;
+	width: 100%;
+}
+
+h1 {
+	text-align: center;
+}
+
+#form {
+	text-align: center;
+}
+
+#form>* {
+	display: inline-block;
+	margin: 0 16px;
+	max-width: calc(100% - 32px);
+	text-align: left;
+	width: 350px;
+}
+
+#form>div>textarea {
+	height: 225px;
+	width: 100%;
+}
+
+#form label {
+	display: block;
+	margin: 4px auto;
+	max-width: 100%;
+	width: 350px;
+}
+
+#form label input[type=number] {
+	background: white;
+	border: 1px solid #e0e0e0;
+	float: right;
+	height: 16px;
+	width: 200px;
+}
+
+#form br {
+	content: " ";
+	display: block;
+	height: 4px;
+	line-height: 4px;
+}
+
+#res {
+	font-family: monospace;
+	margin: 24px 0 0;
+}
+
+#res th, #res td {
+	padding: 0 8px;
+	text-align: right;
+}
+
+#res td:hover {
+	background: #fff9c4;
+}
+
+.pout {
+	color: red;
+}
+
+#c {
+	border: 1px solid black;
+	display: none;
+	height: 500px;
+	width: 500px;
+}
+
+.attrib {
+	font-size: 12px;
+	margin-left: 4em;
+	text-align: justify;
+	text-indent: -4em;
+}
+
+.italic {
+	font-style: italic;
+}
+
+#tooltip {
+	background: #fff9c4;
+	border: 4px solid #fff176;
+	border-radius: 4px;
+	display: none;
+	padding: 4px;
+	position: fixed;
+}
+
+@media (max-width: 832px) {
+	body {
+		margin: 0 8px;
+		width: calc(100% - 16px);
+	}
+}
+	</style>
+</head>
+<body>
+	<h1 id="title">Local Outlier Factor</h1>
+	<p>Local outlier factor (LOF) is an algorithm for finding anomalous data points by measuring the local deviation of a given data point with respect to its neighbours (Breunig et al., 2000).</p>
+	<noscript class="noscript">
+		For full functionality of this site, it is necessary to enable JavaScript.
+		Here are the <a href="https://www.enable-javascript.com/" target="_blank">
+		instructions how to enable JavaScript in your web browser</a>.
+	</noscript>
+	<div id="form">
+		<div>
+			<label for="raw">Raw data</label>
+			<textarea id="raw">1  26  35
+2  13  12
+3  11  5
+4  10  15
+5  50  45
+6  200 200
+7  18  20
+8  21  14
+9  16  20
+10 21  75</textarea>
+		</div><!--
+		--><div>
+			<p>Input data in the text box with format:<br>&emsp;ID&emsp;x&emsp;y</p>
+			<label>Neighbour count: <input type="number" id="neighbour" min="1" value="3"></label><br>
+			<label>Threshold: <input type="number" id="thresh" min="0" value="2" step="0.1"></label><br>
+			<label><input type="checkbox" id="proxshow" checked> Show proximity matrix</label><br>
+			<label><input type="checkbox" id="knnshow" checked> Show nearest neighbours</label><br>
+			<label><input type="checkbox" id="avdenshow" checked> Show average density</label><br>
+			<label><input type="checkbox" id="avreldenshow" checked> Show average relative density</label><br>
+			<button id="btnCalc">Calculate</button>
+		</div>
+	</div>
+	<div id="res"></div>
+	<canvas id="c" width=500 height=500></canvas>
+	<hr>
+	<p class="attrib">Breunig, M. M.; Kriegel, H.-P.; Ng, R. T.; and Sander, J. (2000). LOF: Identifying Density-based Local Outliers. <span class="italic">Proceedings of the 2000 ACM SIGMOD International Conference on Management of Data (SIGMOD)</span>. pp. 93–104. doi:10.1145/335191.335388. ISBN 1-5811-3217-4.</p>	
+	<div id="tooltip"></div>
+	<script>
+var DATA = [];
+var a = undefined;
+var distSq = (A, B) => Math.pow(A[1] - B[1], 2) + Math.pow(A[2] - B[2], 2);
+var dist = (A, B) => Math.sqrt(distSq(A, B));
+var prox, avgDens, avgRelDens;
+const CSIZE = 500;
+const fixFrac = 2;
+function calc() {
+	res.innerHTML = "";
+	// data preparations
+	neighNum = neighbour.value;
+	thresVal = thresh.value;
+	DATA = raw.value.split("\n");
+	DATA.forEach((v, i, a) => {
+		a[i] = v.split(/\s+/g);
+		let p = String(a[i][0]);
+		a[i].forEach((v, i, a) => a[i] = Number(v));
+		a[i][0] = p;
+	});
+	let N = DATA.length;
+	// proximity matrix
+	prox = [];
+	for (let i = 0; i < N; i ++) {
+		prox.push([]);
+		for (let j = 0; j < N; j ++) {
+			prox[i].push([j, dist(DATA[i], DATA[j])]);
+		}
+	}
+	if (proxshow.checked) {
+		let pmat = "<b>Proximity matrix</b><table>";
+		pmat += "<tr><th>";
+		for (let i = 0; i < N; i ++)
+			pmat += "<th>" + DATA[i][0];
+		for (let i = 0; i < N; i ++) {
+			pmat += "<tr><th>" + DATA[i][0];
+			for (let j = 0; j < N; j ++) {
+				pmat += "<td onmouseover=\"t_dist(" + i + ", " + j + ")\"";
+				pmat += " onmouseout=\"t_clear()\">";
+				pmat += prox[i][j][1].toFixed(fixFrac);
+			}
+		}
+		pmat += "</table><br>";
+		res.innerHTML += pmat;
+	}
+	// sort proximity matrix by row to get nearest neighbours
+	prox.forEach((v, i, a) => a[i].sort((A, B) => A[1] - B[1]));
+	if (knnshow.checked) {
+		let nears = "<b>" + neighNum + "-nearest neighbours</b><table>";
+		for (let i = 0; i < N; i ++) {
+			nears += "<tr><th>" + DATA[i][0];
+			for (let j = 1; j <= neighNum; j ++) {
+				nears += "<td onmouseover=\"t_dist(" + i + ", " + prox[i][j][0] + ")\"";
+				nears += " onmouseout=\"t_clear()\">";
+				nears += "<b>" + DATA[prox[i][j][0]][0] + "</b><br>" + prox[i][j][1].toFixed(fixFrac);
+			}
+		}
+		nears += "</table><br>";
+		res.innerHTML += nears;
+	}
+	// average density
+	avgDens = [];
+	for (let i = 0; i < N; i ++) {
+		let sum_ = 0;
+		for (let j = 1; j <= neighNum; j ++)
+			sum_ += prox[i][j][1];
+		avgDens.push(neighNum / sum_);
+	}
+	if (avdenshow.checked) {
+		let avden = "<b>Average density</b><table>";
+		for (let i = 0; i < N; i ++) {
+			avden += "<tr><th>" + DATA[i][0];
+			avden += "<td onmouseover=\"t_avgDens(" + i + ")\"";
+			avden += " onmouseout=\"t_clear()\">";
+			avden += avgDens[i].toFixed(fixFrac);
+		}
+		avden += "</table><br>";
+		res.innerHTML += avden;
+	}
+	// average relative density
+	avgRelDens = [];
+	for (let i = 0; i < N; i ++) {
+		let sum_ = 0;
+		for (let j = 1; j <= neighNum; j ++)
+			sum_ += avgDens[prox[i][j][0]];
+		avgRelDens.push(sum_ / neighNum / avgDens[i]);
+	}
+	if (avreldenshow.checked) {
+		let avrelden = "<b>Average relative density</b><table>";
+		for (let i = 0; i < N; i ++) {
+			avrelden += "<tr><th>" + DATA[i][0];
+			avrelden += "<td " + (avgRelDens[i] > thresVal ? "class=\"pout\"" : "");
+			avrelden += " onmouseover=\"t_avgRelDens(" + i + ")\"";
+			avrelden += " onmouseout=\"t_clear()\">";
+			avrelden += avgRelDens[i].toFixed(fixFrac);
+		}
+		avrelden += "</table><br>";
+		res.innerHTML += avrelden;
+	}
+	// outliers
+	let outliers = "<b>Outliers</b><table>";
+	outliers += "<tr><th>ID<th>x<th>y";
+	for (let i = 0; i < N; i ++) {
+		if (avgRelDens[i] <= thresVal)
+			continue;
+		outliers += "<tr><th>" + DATA[i][0];
+		outliers += "<td>" + DATA[i][1];
+		outliers += "<td>" + DATA[i][2];
+	}
+	outliers += "</table><br>";
+	res.innerHTML += outliers;
+	// plot graph
+	let xMin = DATA[0][1];
+	let xMax = DATA[0][1];
+	let yMin = DATA[0][1];
+	let yMax = DATA[0][2];
+	for (let i = 1; i < N; i ++) {
+		if (DATA[i][1] < xMin) xMin = DATA[i][1];
+		if (DATA[i][1] > xMax) xMax = DATA[i][1];
+		if (DATA[i][2] < yMin) yMin = DATA[i][2];
+		if (DATA[i][2] > yMax) yMax = DATA[i][2];
+	}
+	let scale = Math.max(xMax - xMin, yMax - yMin);
+	a.clearRect(0, 0, CSIZE, CSIZE);
+	let ox = (-xMin / scale * .8 + .1) * CSIZE;
+	let oy = (-yMin / scale * .8 + .1) * CSIZE;
+	oy = CSIZE - oy;
+	a.strokeStyle = "black";
+	a.beginPath();
+	a.moveTo(ox, 0);
+	a.lineTo(ox, CSIZE);
+	a.stroke();
+	a.beginPath();
+	a.moveTo(0, oy);
+	a.lineTo(CSIZE, oy);
+	a.stroke();
+	a.font = "12px sans-serif";
+	for (let i = 0; i < N; i ++) {
+		let px = ((DATA[i][1] - xMin) / scale * .8 + .1) * CSIZE;
+		let py = ((DATA[i][2] - yMin) / scale * .8 + .1) * CSIZE;
+		py = CSIZE - py;
+		a.fillStyle = avgRelDens[i] > thresVal ? "red" : "black";
+		a.fillRect(px, py, 2, 2);
+		a.fillText(DATA[i][0], px, py);
+	}
+	c.style.display = "block";
+}
+// tooltips
+t_clear = () => {
+	tooltip.style.display = "none";
+	tooltip.innerHTML = "";
+};
+t_dist = (i, j) => {
+	let ii = DATA[i][0];
+	let xi = DATA[i][1];
+	let yi = DATA[i][2];
+	let ij = DATA[j][0];
+	let xj = DATA[j][1];
+	let yj = DATA[j][2];
+	tooltip.innerHTML = "distance<br>"
+	tooltip.innerHTML += "= sqrt((x<sub>" + ii + "</sub> - x<sub>" + ij + "</sub>)<sup>2</sup> + (y<sub>" + ii + "</sub> - y<sub>" + ij + "</sub>)<sup>2</sup>)<br>";
+	tooltip.innerHTML += "= sqrt((" + xi + " - " + xj + ")<sup>2</sup> + (" + yi + " - " + yj + ")<sup>2</sup>)";
+	tooltip.style.display = "block";
+};
+t_avgDens = (i) => {
+	let sums = "";
+	let sum2 = "";
+	for (let j = 1; j <= neighNum; j ++) {
+		sums += "dist(" + DATA[i][0] + ", " + DATA[prox[i][j][0]][0] + ")";
+		sum2 += prox[i][j][1].toFixed(fixFrac);
+		if (j < neighNum) {
+			sums += " + ";
+			sum2 += " + ";
+		}
+	}
+	tooltip.innerHTML = "average density<br>";
+	tooltip.innerHTML += "= neighbour count / (" + sums + ")<br>";
+	tooltip.innerHTML += "= " + neighNum + " / (" + sum2 + ")";
+	tooltip.style.display = "block";
+};
+t_avgRelDens = (i) => {
+	let sums = "";
+	let sum2 = "";
+	for (let j = 1; j <= neighNum; j ++) {
+		sums += "avg<sub>" + DATA[prox[i][j][0]][0] + "</sub>";
+		sum2 += avgDens[prox[i][j][0]].toFixed(fixFrac);
+		if (j < neighNum) {
+			sums += " + ";
+			sum2 += " + ";
+		}
+	}
+	tooltip.innerHTML = "average relative density<br>";
+	tooltip.innerHTML += "= (" + sums + ") / neighbour count / avg<sub>" + DATA[i][0] + "</sub><br>";
+	tooltip.innerHTML += "= (" + sum2 + ") / " + neighNum + " / " + avgDens[i].toFixed(fixFrac);
+	tooltip.style.display = "block";
+};
+document.addEventListener("mousemove", (ev) => {
+	if (ev.clientX <= window.innerWidth / 2) {
+		tooltip.style.left = (ev.clientX + 16) + "px";
+		tooltip.style.right = "";
+	} else {
+		tooltip.style.left = "";
+		tooltip.style.right = (window.innerWidth - ev.clientX) + "px";
+	}
+	if (ev.clientY <= window.innerHeight / 2) {
+		tooltip.style.top = ev.clientY + "px";
+		tooltip.style.bottom = "";
+	} else {
+		tooltip.style.top = "";
+		tooltip.style.bottom = (window.innerHeight - ev.clientY) + "px";
+	}
+});
+btnCalc.addEventListener("click", () => { calc(); });
+window.addEventListener("load", () => { a = c.getContext("2d"); });
+	</script>
+</body>
+</html>
--- a/experiment/bare/negative_lens.html
+++ b/experiment/bare/negative_lens.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Negative Lens - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/bare/positive_lens.html
+++ b/experiment/bare/positive_lens.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Positive Lens - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/bare/vibration_test.html
+++ b/experiment/bare/vibration_test.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Web Vibration API - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -39,7 +39,7 @@ h1 {
 	width: 75%;
 }

-#p {
+#pc {
 	margin: 16px 0;
 }

@ -66,8 +66,8 @@ h1 {
 		Here are the <a href="https://www.enable-javascript.com/" target="_blank">
 		instructions how to enable JavaScript in your web browser</a>.
 	</noscript>
-	<button id="b">START</button>
-	<div id="p"></div>
+	<button id="b">START</button><br>
+	<div id="pc"><label id="p" for="freq"></label></div>
 	<div id="freq-container">
 		<input id="freq" type="range" min="0" max="11" value="11" step="1" orient="vertical">
 	</div>
--- a/experiment/bare/waterdrop.html
+++ b/experiment/bare/waterdrop.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Waterdrop - Experiments - srifqi</title>
 	<meta charset="utf-8">
--- a/experiment/dip_contrast_enhancement.html
+++ b/experiment/dip_contrast_enhancement.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Contrast Enhancement - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,14 +7,31 @@
 	<meta name="description" content="An example of contrast enhancement in digital image processing">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Contrast Enhancement"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
-	<header><h1>Contrast Enhancement</h1></header>
+	<header><h1>Contrast Enhancement Experiment</h1></header>
 	<main>
 		<nav>
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li class="active"><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -47,7 +64,7 @@
 			<p>There are two techniques described here: contrast stretching and histogram equalization. Each techniques has its own usage.</p>
 			<p><span class="italic">Histogram equalization makes objects easier to distinguish, but can make the image looks "unreal".</span></p>
 			<p><a href="bare/dip/contrast_enhancement.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 800px; height: 500px;" src="bare/dip/contrast_enhancement.html"></iframe>
+			<iframe style="width: 800px; height: 500px;" src="bare/dip/contrast_enhancement.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/dip_edge_detection.html
+++ b/experiment/dip_edge_detection.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Point and Edge Detection - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,14 +7,31 @@
 	<meta name="description" content="An example of point and edge detection using filters in digital image processing">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Point and Edge Detection"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
-	<header><h1>Point and Edge Detection</h1></header>
+	<header><h1>Point and Edge Detection Experiment</h1></header>
 	<main>
 		<nav>
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li class="active"><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -47,7 +64,7 @@
 			<p>There are one point detector and three edge detector: Sobel operator, Prewitt operator, and Robert cross.</p>
 			<p><span class="italic">It seems like Sobel operator is the brightest. This is a reason to use thresholding after edge detection.</span></p>
 			<p><a href="bare/dip/edge_detection.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 850px; height: 500px;" src="bare/dip/edge_detection.html"></iframe>
+			<iframe style="width: 850px; height: 500px;" src="bare/dip/edge_detection.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/dip_grey_transform.html
+++ b/experiment/dip_grey_transform.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Greyscale Transformation - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="An example of greyscale transformation in digital image processing">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Greyscale Transformation"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Greyscale Transformation Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -47,7 +64,7 @@
 			<p>There are three transformation: image negative (invert color), logarithmic transformation, and power-law (gamma) transformation.</p>
 			<p><span class="italic">Power-law transformation can be used for contrast streching.</span></p>
 			<p><a href="bare/dip/grey_transform.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 800px; height: 500px;" src="bare/dip/grey_transform.html"></iframe>
+			<iframe style="width: 800px; height: 500px;" src="bare/dip/grey_transform.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/dip_smoothing.html
+++ b/experiment/dip_smoothing.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Image Smoothing - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="An example of image smoothing (mean, Gaussian, and median filter) in digital image processing">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Image Smoothing"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Image Smoothing Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li class="active"><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -47,7 +64,7 @@
 			<p>There are three smoothing techniques: mean blur (box blur), Gaussian blur, and median filter.</p>
 			<p><span class="italic">For salt-and-paper noises, median filter works very well!</span></p>
 			<p><a href="bare/dip/smoothing.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 800px; height: 500px;" src="bare/dip/smoothing.html"></iframe>
+			<iframe style="width: 800px; height: 500px;" src="bare/dip/smoothing.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/drive_a_car.html
+++ b/experiment/drive_a_car.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Drive A Car - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Drive a car and avoid obstacles!">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Drive A Car"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Drive A Car Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -52,7 +69,7 @@ var f=50/3,g=t=y=0,j=k=1,m=[0,0,0,0,0],h=500,w=800,p=w/8,o=w/4,r=h/5,e=250;for(n
 			</pre>
 			<p><span class="italic">Drive a car and avoid obstacles!</span></p>
 			<p><a href="bare/drive_a_car.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 804px; height: 504px;" src="bare/drive_a_car.html"></iframe>
+			<iframe style="width: 804px; height: 504px;" src="bare/drive_a_car.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/genetic_algorithm.html
+++ b/experiment/genetic_algorithm.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Genetic Algorithm - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="An example of genetic algorithm in action">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Genetic Algorithm"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Genetic Algorithm Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -43,12 +60,12 @@
 					</tbody>
 				</table>
 			</aside>
-			<p>This was created because I want to create a basic implementation of <a href="https://en.wikipedia.org/wiki/Genetic_algorithm" target="_blank">genetic algorithm</a>. I have seen things like this before, but I forget about the original web page.</p>
+			<p>This was created because I want to create a basic implementation of <a href="https://en.wikipedia.org/wiki/Genetic_algorithm" target="_blank" rel="noopener">genetic algorithm</a>. I have seen things like this before, but I forget about the original web page.</p>
 			<p>There are 25 individuals in each generation. Each new generation is created from top 5 individuals. No individual lives past its generation.</p>
-			<p>You can control and edit initial configuration by clicking "Edit environment" button or you can read <a href="https://github.com/srifqi/srifqi.github.io/blob/master/experiment/bare/genetic_algorithm.html" target="_blank">its source code</a> and try to modify it yourself!</p>
+			<p>You can control and edit initial configuration by clicking "Edit environment" button or you can read <a href="https://github.com/srifqi/srifqi.github.io/blob/master/experiment/bare/genetic_algorithm.html" target="_blank" rel="noopener">its source code</a> and try to modify it yourself!</p>
 			<p><span class="italic">What if you use other target words?</span></p>
 			<p><a href="bare/genetic_algorithm.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 600px; height: 500px;" src="bare/genetic_algorithm.html"></iframe>
+			<iframe style="width: 600px; height: 500px;" src="bare/genetic_algorithm.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/index.html
+++ b/experiment/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,17 @@
 	<meta name="description" content="srifqi's experiments">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments"
+		}]
+	}
+	</script>
 </head>
 <body>
 	<header><h1>Experiments</h1></header>
@ -15,6 +26,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li class="active"><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -34,6 +46,7 @@
 		<section>
 			<p>I like to do coding and creating mini projects. Here are some of my projects.</p>
 			<ul>
+				<li><a href="localoutlierfactor.html">Local Outlier Factor</a> (<time datetime="2020-12-04">4 December 2020</time>)</li>
 				<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a> <span class="exp-dip">DIP</span> (<time datetime="2020-11-11">11 November 2020</time>)</li>
 				<li><a href="dip_edge_detection.html">Edge Detection</a> <span class="exp-dip">DIP</span> (<time datetime="2020-11-04">4 November 2020</time>)</li>
 				<li><a href="dip_smoothing.html">Image Smoothing</a> <span class="exp-dip">DIP</span> (<time datetime="2020-11-01">1 November 2020</time>)</li>
--- a/experiment/localoutlierfactor.html
+++ b/experiment/localoutlierfactor.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+	<title>Local Outlier Factor - Experiments - srifqi</title>
+	<meta charset="utf-8">
+	<meta name="author" content="srifqi">
+	<meta name="description" content="Local outlier factor calculator">
+	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
+	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Local Outlier Factor"
+		}]
+	}
+	</script>
+</head>
+<body style="border: 0; max-width: 100%;">
+	<header><h1>Local Outlier Factor Experiment</h1></header>
+	<main>
+		<nav>
+			<ul class="left-menu">
+				<li><div><a href="/">Home</a></div></li>
+				<li><div><a href="./">Experiments</a></div><ul>
+					<li class="active"><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
+					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
+					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
+					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
+					<li><a href="dip_grey_transform.html">Grey Transform</a></li>
+					<li><a href="genetic_algorithm.html">Genetic Algorithm</a></li>
+					<li><a href="vibration_test.html">Web Vibration API</a></li>
+					<li><a href="addition_game.html">Addition Game</a></li>
+					<li><a href="negative_lens.html">Negative Lens</a></li>
+					<li><a href="positive_lens.html">Positive Lens</a></li>
+					<li><a href="waterdrop.html">Waterdrop</a></li>
+					<li><a href="drive_a_car.html">Drive A Car</a></li>
+				</ul></li>
+				<li><div><a href="/minetest.html">Minetest</a></div></li>
+				<li><div><a href="/library.html">Libraries</a></div></li>
+			</ul>
+		</nav>
+		<section style="max-width: calc(100% - 16px);">
+			<aside>
+				<table>
+					<thead>
+						<tr><th colspan="2">Local Outlier Factor</th></tr>
+					</thead>
+					<tbody>
+						<tr><th>Type</th><td>Course material</td></tr>
+						<tr><th>Date</th><td><time datetime="2020-12-04">4 December 2020</time></td></tr>
+					</tbody>
+				</table>
+			</aside>
+			<p>Unlike last time, this was created <span class="italic">for</span> an assignment. I did it in JavaScript since start.</p>
+			<p>Local outlier factor is used in anomaly detection.</p>
+			<p><span class="italic">Have you tried a data set without any outliers?</span></p>
+			<p><a href="bare/localoutlierfactor.html" target="_blank">open in new window</a></p>
+			<iframe style="width: 900px; height: 500px;" src="bare/localoutlierfactor.html" title="The experiment"></iframe>
+		</section>
+	</main>
+</body>
+</html>
--- a/experiment/negative_lens.html
+++ b/experiment/negative_lens.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Negative Lens - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Simulation of a ray of light goes through negative lens">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Negative Lens"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Negative Lens Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -53,7 +70,7 @@ function G(a,b){for(a=a||1,b=b||1,0>a&&(a=-a),0>b&&(b=-b),b>a&&(a=[b,b=a][0]);;)
 			</pre>
 			<p><span class="italic">Simulation of a ray of light goes through negative lens</span></p>
 			<p><a href="bare/negative_lens.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 1004px; height: 504px;" src="bare/negative_lens.html"></iframe>
+			<iframe style="width: 1004px; height: 504px;" src="bare/negative_lens.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/positive_lens.html
+++ b/experiment/positive_lens.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Positive Lens - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Simulation of a ray of light goes through positive lens">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Positive Lens"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Positive Lens Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -53,7 +70,7 @@ function G(a,b){for(a=a||1,b=b||1,0>a&&(a=-a),0>b&&(b=-b),b>a&&(a=[b,b=a][0]);;)
 			</pre>
 			<p><span class="italic">Simulation of a ray of light goes through positive lens</span></p>
 			<p><a href="bare/positive_lens.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 1004px; height: 504px;" src="bare/positive_lens.html"></iframe>
+			<iframe style="width: 1004px; height: 504px;" src="bare/positive_lens.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/vibration_test.html
+++ b/experiment/vibration_test.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Web Vibration API - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Vibrate your device from Web!">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Web Vibration API"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Web Vibration API Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -44,11 +61,11 @@
 				</table>
 			</aside>
 			<p>I was browsing on the Web when suddenly an advertisement showed up and vibrate my phone. I was confused for a second because it said that there is a virus inside my phone. Knowing that it is an advertisement, I ignored that. But, I did not know that you can vibrate your device from Web!</p>
-			<p>This was created to demonstrate <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API" target="_blank">Web Vibration API</a>. It consists of a function, <code>navigator.vibrate()</code>, to do vibration for some amount of time.</p>
+			<p>This was created to demonstrate <a href="https://developer.mozilla.org/docs/Web/API/Vibration_API" target="_blank" rel="noopener">Web Vibration API</a>. It consists of a function, <code>navigator.vibrate()</code>, to do vibration for some amount of time.</p>
 			<p>Since the API only allows to vibrate for a finite amount of time, a timer is scheduled to re-vibrate the device (using <code>setTimeout()</code> function). To prevent gap between vibration, the length of each vibration is doubled. It is fine because the <code>vibrate()</code> function will reset the duration.</p>
 			<p><span class="italic">Try different vibration cycle</span></p>
 			<p><a href="bare/vibration_test.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 500px; height: 600px;" src="bare/vibration_test.html"></iframe>
+			<iframe style="width: 500px; height: 600px;" src="bare/vibration_test.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/experiment/waterdrop.html
+++ b/experiment/waterdrop.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Waterdrop - Experiments - srifqi</title>
 	<meta charset="utf-8">
@ -7,6 +7,22 @@
 	<meta name="description" content="Watch every drop of water drops">
 	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
 	<link rel="stylesheet" href="/main.css">
+	<script type="application/ld+json">
+	{
+		"@context": "https://schema.org",
+		"@type": "BreadcrumbList",
+		"itemListElement": [{
+			"@type": "ListItem",
+			"position": 1,
+			"name": "Experiments",
+			"item": "https://srifqi.github.io/experiment/"
+		}, {
+			"@type": "ListItem",
+			"position": 2,
+			"name": "Waterdrop"
+		}]
+	}
+	</script>
 </head>
 <body style="border: 0; max-width: 100%;">
 	<header><h1>Waterdrop Experiment</h1></header>
@ -15,6 +31,7 @@
 			<ul class="left-menu">
 				<li><div><a href="/">Home</a></div></li>
 				<li><div><a href="./">Experiments</a></div><ul>
+					<li><a href="localoutlierfactor.html">LOF (Statistics)</a></li>
 					<li><a href="dip_contrast_enhancement.html">Contrast Enhance</a></li>
 					<li><a href="dip_edge_detection.html">Edge Detection</a></li>
 					<li><a href="dip_smoothing.html">Image Smoothing</a></li>
@ -55,7 +72,7 @@ var e=[10,110,210,310],w=h=400,W=H=200,f=0,g=100,h=50/3,i=1000;c.width=c.height=
 			</pre>
 			<p><span class="italic">Watch every drop of water drops</span></p>
 			<p><a href="bare/waterdrop.html" target="_blank">open in new window</a></p>
-			<iframe style="width: 404px; height: 404px;" src="bare/waterdrop.html"></iframe>
+			<iframe style="width: 404px; height: 404px;" src="bare/waterdrop.html" title="The experiment"></iframe>
 		</section>
 	</main>
 </body>
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>srifqi</title>
 	<meta charset="utf-8">
@ -21,8 +21,8 @@
 		</nav>
 		<section>
 			<p>Hi! I'm <b>srifqi</b>.</p>
-			<p>I'm a computer science student at <a href="https://uns.ac.id" target="_blank">Sebelas Maret University</a>. I like to do coding and creating mini projects. Sometimes, I document or review my progress in my blog. You can explore them using links on the left bar.</p>
-			<p>I also like to play <a href="https://www.minetest.net" target="_blank">Minetest</a>, a voxel game engine (and also the game). It is my longest game that I still play (and contribute!) until now. I make mods and published some of them to <a href="https://content.minetest.net" target="_blank">Minetest Content Database</a>.</p>
+			<p>I'm a computer science student at <a href="https://uns.ac.id" target="_blank" rel="noopener">Sebelas Maret University</a>. I like to do coding and creating mini projects. Sometimes, I document or review my progress in my blog. You can explore them using links on the left bar.</p>
+			<p>I also like to play <a href="https://www.minetest.net" target="_blank" rel="noopener">Minetest</a>, a voxel game engine (and also the game). It is my longest game that I still play (and contribute!) until now. I make mods and published some of them to <a href="https://content.minetest.net" target="_blank" rel="noopener">Minetest Content Database</a>.</p>
 			<p>While exploring my projects, unless stated, my code is licensed under MIT License.</p>
 		</section>
 	</main>
--- a/library.html
+++ b/library.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Libraries - srifqi</title>
 	<meta charset="utf-8">
@ -17,7 +17,7 @@
 				<li><div><a href="/experiment/">Experiments</a></div></li>
 				<li><div><a href="/minetest.html">Minetest</a></div></li>
 				<li class="active"><div><a href="/library.html">Libraries</a></div><ul>
-					<li><a href="https://github.com/srifqi/calendar.js" target="_blank">calendar.js</a></li>
+					<li><a href="https://github.com/srifqi/calendar.js" target="_blank" rel="noopener">calendar.js</a></li>
 					<li><a href="/seven.js/">seven.js</a></li>
 				</ul></li>
 			</ul>
@ -25,7 +25,7 @@
 		<section>
 			<p>I created some (small, maybe unusable) libraries. These were created to teach me about creating API and GitHub Pages. Here are some of them.</p>
 			<ul>
-				<li><a href="https://github.com/srifqi/calendar.js" target="_blank">calendar.js</a>: calendar widget</li>
+				<li><a href="https://github.com/srifqi/calendar.js" target="_blank" rel="noopener">calendar.js</a>: calendar widget</li>
 				<li><a href="/seven.js/">seven.js</a>: seven segment display using canvas or SVG</li>
 			</ul>
 		</section>
--- a/main.css
+++ b/main.css
@ -146,6 +146,7 @@ figure {
 }

 figure img {
+	height: auto;
 	max-width: 100%;
 	width: 250px;
 }
--- a/minetest.html
+++ b/minetest.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en" dir="ltr">
 <head>
 	<title>Minetest - srifqi</title>
 	<meta charset="utf-8">
@ -17,7 +17,7 @@ article>aside {
 }

 .mod-no {
-	color: red;
+	color: #b30000;
 }

 .cdb {
@ -37,8 +37,8 @@ article>aside {
 			</ul>
 		</nav>
 		<section>
-			<p>I like to play <a href="https://www.minetest.net" target="_blank">Minetest</a>, a voxel game engine (and also the game). It is my longest game that I still play (and contribute!) until now. I make mods and published some of them to <a href="https://content.minetest.net" target="_blank">Minetest Content Database</a>.</p>
-			<p>Minetest came to me when I was searching for voxel sandboxing game (that is free!) many years ago. Since then, I either play it, create mods for it, or contribute to it. Here are some of <a href="https://forum.minetest.net/search.php?author=srifqi&fid[]=9&fid[]=11&fid[]=13&fid[]=15&sf=firstpost&sr=topics&sk=t" target="_blank">my mods</a>:</p>
+			<p>I like to play <a href="https://www.minetest.net" target="_blank" rel="noopener">Minetest</a>, a voxel game engine (and also the game). It is my longest game that I still play (and contribute!) until now. I make mods and published some of them to <a href="https://content.minetest.net" target="_blank" rel="noopener">Minetest Content Database</a>.</p>
+			<p>Minetest came to me when I was searching for voxel sandboxing game (that is free!) many years ago. Since then, I either play it, create mods for it, or contribute to it. Here are some of <a href="https://forum.minetest.net/search.php?author=srifqi&fid[]=9&fid[]=11&fid[]=13&fid[]=15&sf=firstpost&sr=topics&sk=t" target="_blank" rel="noopener">my mods</a>:</p>
 			<article id="superflat">
 				<h2>Superflat Map Generator</h2>
 				<aside>
@ -47,18 +47,18 @@ article>aside {
 							<tr><th colspan="2">superflat</th></tr>
 						</thead>
 						<tbody>
-							<tr><td colspan=2 class="cdb"><a href="https://content.minetest.net/packages/srifqi/superflat/" target="_blank"><img src="https://content.minetest.net/packages/srifqi/superflat/shields/title/"></a></td></tr>
+							<tr><td colspan=2 class="cdb"><a href="https://content.minetest.net/packages/srifqi/superflat/" target="_blank" rel="noopener"><img src="https://content.minetest.net/packages/srifqi/superflat/shields/title/" width="130" height="20" alt="Superflat on Content DB"></a></td></tr>
 							<tr><th>Latest version</th><td>1.4<br><time datetime="2019-08-02">2 August 2019</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2014-07-17">17 July 2014</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-yes">Yes</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=9772" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=9772" target="_blank" rel="noopener">link</a></td></tr>
 						</tbody>
 					</table>
 				</aside>
 				<p>This mod generates world layer by layer. This mod was created because I read that Minecraft has superflat mode in its world generation. This works the same, albeit uses different format, as superflat in Minecraft.</p>
-				<p>The actual description is "(Yet Another) Superflat Map Generator" because there is another map generator that generates flat world, e.g. built-in flat mapgen and <a href="https://forum.minetest.net/viewtopic.php?t=8952" target="_blank">flatgen</a> mod.</p>
+				<p>The actual description is "(Yet Another) Superflat Map Generator" because there is another map generator that generates flat world, e.g. built-in flat mapgen and <a href="https://forum.minetest.net/viewtopic.php?t=8952" target="_blank" rel="noopener">flatgen</a> mod.</p>
 				<figure>
-					<a href="/assets/minetest-mod-superflat.png" target="_blank"><img src="/assets/minetest-mod-superflat.png" alt="Flat world from superflat mod"></a>
+					<a href="/assets/minetest-mod-superflat.png" target="_blank" rel="noopener"><img src="/assets/minetest-mod-superflat.png" width="270" height="180" alt="Flat world from superflat mod"></a>
 					<figcaption>Flat world from superflat mod</figcaption>
 				</figure>
 			</article>
@ -73,19 +73,19 @@ article>aside {
 							<tr><th>Latest version</th><td>0.7<br><time datetime="2016-02-27">27 February 2016</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2014-09-03">3 September 2014</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-yes">Yes</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10055" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10055" target="_blank" rel="noopener">link</a></td></tr>
 							<tr><th>ContentDB</th><td><span class="mod-no">Not Registered</span></td></tr>
 						</tbody>
 					</table>
 				</aside>
-				<p>This mod generates world with more biomes and features than what Minetest had back then. It also supports other mods: <a href="https://forum.minetest.net/viewtopic.php?t=549" target="_blank">moreores</a> and <a href="https://forum.minetest.net/viewtopic.php?t=8890" target="_blank">bakedclay</a>. This mod was my attempt to create map generator that uses noise (2D and 3D) and supports another mod.</p>
-				<p>This mod can be modified by another mod. I also create an example for that in another mod: <a href="https://forum.minetest.net/viewtopic.php?t=11975" target="_blank">amgmt_plugin</a>. Now, Minetest supports custom biomes from its modding API that makes this mod irrelevant.</p>
+				<p>This mod generates world with more biomes and features than what Minetest had back then. It also supports other mods: <a href="https://forum.minetest.net/viewtopic.php?t=549" target="_blank" rel="noopener">moreores</a> and <a href="https://forum.minetest.net/viewtopic.php?t=8890" target="_blank" rel="noopener">bakedclay</a>. This mod was my attempt to create map generator that uses noise (2D and 3D) and supports another mod.</p>
+				<p>This mod can be modified by another mod. I also create an example for that in another mod: <a href="https://forum.minetest.net/viewtopic.php?t=11975" target="_blank" rel="noopener">amgmt_plugin</a>. Now, Minetest supports custom biomes from its modding API that makes this mod irrelevant.</p>
 				<figure>
-					<a href="/assets/minetest-mod-amgmt-1.png" target="_blank"><img src="/assets/thumb/minetest-mod-amgmt-1.png" alt="An intersection of many biomes from amgmt mod"></a>
+					<a href="/assets/minetest-mod-amgmt-1.png" target="_blank" rel="noopener"><img src="/assets/thumb/minetest-mod-amgmt-1.png" width="250" height="128" alt="An intersection of many biomes from amgmt mod"></a>
 					<figcaption>An intersection of many biomes</figcaption>
 				</figure>
 				<figure>
-					<a href="/assets/minetest-mod-amgmt-2.png" target="_blank"><img src="/assets/thumb/minetest-mod-amgmt-2.png" alt="A river bordering two biomes from amgmt mod"></a>
+					<a href="/assets/minetest-mod-amgmt-2.png" target="_blank" rel="noopener"><img src="/assets/thumb/minetest-mod-amgmt-2.png" width="250" height="128" alt="A river bordering two biomes from amgmt mod"></a>
 					<figcaption>A river bordering two biomes</figcaption>
 				</figure>
 			</article>
@ -97,11 +97,11 @@ article>aside {
 							<tr><th colspan="2">advancedban</th></tr>
 						</thead>
 						<tbody>
-							<tr><td colspan=2 class="cdb"><a href="https://content.minetest.net/packages/srifqi/advancedban/" target="_blank"><img src="https://content.minetest.net/packages/srifqi/advancedban/shields/title/"></a></td></tr>
+							<tr><td colspan=2 class="cdb"><a href="https://content.minetest.net/packages/srifqi/advancedban/" target="_blank" rel="noopener"><img src="https://content.minetest.net/packages/srifqi/advancedban/shields/title/" width="158" height="20" alt="Advanced Ban on Content DB"></a></td></tr>
 							<tr><th>Latest version</th><td>0.3<br><time datetime="2019-08-08">8 August 2019</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2014-12-24">24 December 2014</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-yes">Yes</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10823" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10823" target="_blank" rel="noopener">link</a></td></tr>
 						</tbody>
 					</table>
 				</aside>
@ -120,13 +120,13 @@ article>aside {
 							<tr><th>Latest version</th><td>0.1<br><time datetime="2015-01-07">7 January 2015</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2015-01-07">7 January 2015</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-yes">Yes</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10940" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10940" target="_blank" rel="noopener">link</a></td></tr>
 							<tr><th>ContentDB</th><td><span class="mod-no">Not Registered</span></td></tr>
 						</tbody>
 					</table>
 				</aside>
 				<p>This mod bans player when they are dead, i.e. Minecraft's hardcore mode.</p>
-				<p>This is a continuation from <a href="https://forum.minetest.net/viewtopic.php?t=10823" target="_blank">advancedban</a> mod. I actually forgot which idea comes first: this or ban player's name. If I recall correctly, this idea comes first and then I realised that Minetest bans only IP address.</p>
+				<p>This is a continuation from <a href="https://forum.minetest.net/viewtopic.php?t=10823" target="_blank" rel="noopener">advancedban</a> mod. I actually forgot which idea comes first: this or ban player's name. If I recall correctly, this idea comes first and then I realised that Minetest bans only IP address.</p>
 				<p>I have not checked this mod for so long. Maybe, I should back into improving this mod. There are requests to set a timer to reset the list and/or add API for other mods.</p>
 			</article>
 			<article id="shout">
@ -140,14 +140,14 @@ article>aside {
 							<tr><th>Latest version</th><td>0.1.2<br><time datetime="2015-06-24">24 June 2015</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2015-06-11">11 June 2015</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-yes">Yes</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=12560" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=12560" target="_blank" rel="noopener">link</a></td></tr>
 							<tr><th>ContentDB</th><td><span class="mod-no">Not Registered</span></td></tr>
 						</tbody>
 					</table>
 				</aside>
 				<p>This mod limits messages by distance so that only players within certain distance are able to hear. Player can "pay" to "shout" (send message without distance limitation), though.</p>
 				<p>This mod was created because I like the idea that you can not hear distant speech.</p>
-				<p>This idea already implemented before in <a href="https://forum.minetest.net/viewtopic.php?t=6273" target="_blank">chatplus</a> mod. But, shout mod only implements this very idea. Also, it has payment for "shouting".</p>
+				<p>This idea already implemented before in <a href="https://forum.minetest.net/viewtopic.php?t=6273" target="_blank" rel="noopener">chatplus</a> mod. But, shout mod only implements this very idea. Also, it has payment for "shouting".</p>
 			</article>
 			<article id="carpet3d">
 				<h2>Carpet</h2>
@ -160,7 +160,7 @@ article>aside {
 							<tr><th>Latest version</th><td>0.3<br><time datetime="2014-10-19">19 October 2014</time></td></tr>
 							<tr><th>First release</th><td><time datetime="2014-09-22">22 September 2014</time></td></tr>
 							<tr><th>Active</th><td><span class="mod-no">No</span></td></tr>
-							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10180" target="_blank">link</a></td></tr>
+							<tr><th>Forum topic</th><td><a href="https://forum.minetest.net/viewtopic.php?t=10180" target="_blank" rel="noopener">link</a></td></tr>
 							<tr><th>ContentDB</th><td><span class="mod-no">Not Registered</span></td></tr>
 						</tbody>
 					</table>
Author	SHA1	Message	Date
Muhammad Rifqi Priyo Susanto	23982a14a6	Add breadcrumb list structured data using JSON-LD Bugfix: No "Experiment" suffix in the heading text	2021-03-06 10:00:00 +07:00
Muhammad Rifqi Priyo Susanto	e7c4f161f3	Apply recommendations from Lighthouse (2) Bugfix: Invalid background-color property for DIP experiments	2021-03-06 09:00:00 +07:00
Muhammad Rifqi Priyo Susanto	a1440f508d	Apply recommendations from Lighthouse	2021-03-06 08:00:00 +07:00
Muhammad Rifqi Priyo Susanto	8910cf32b4	Add Local Outlier Factor entry It is added to the list of experiments. Its link is also added in other pages.	2020-12-04 15:00:00 +07:00
Muhammad Rifqi Priyo Susanto	3cdc6f572c	Add attribution to images	2020-11-11 19:40:00 +07:00