did you know... #114

Thorin-Oakenpants · 2021-01-10T13:58:00Z

Thorin-Oakenpants
Jan 10, 2021

... that you can use css animation to detect the the hertz of the monitor ... click the last test and count the results in 1 second. At least that's what I'm sure it's related to. The frame can only refresh as often as the monitor allows it. So a 120Hz monitor will return 120 results etc (except I don't have a plethora of monitors lying around to test)

You could of course test it in a half second and * 2 the result

below is my shitty little test page I had locally for some timing shit concepts / tests .. which I've been meaning to tzp-style and add to the test index

click me for details

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>timing</title>
<style>
.mono {font-family: monospace, "Courier New"; font-size: 11px; white-space: pre;}
td {vertical-align: top;}
.anim {
  width: 5px;
  height: 10px;
  background-color: black;
  position: relative;
  animation-name: cssAnim;
	animation-timing-function: linear;
  animation-duration: 1s;
}
@keyframes cssAnim {
	from {left: 0;}
	to {left: 1000px;}
}
</style>
</head>

<body>
<span><span id="anim"></span>&nbsp </span>

<table width="600">
<col width="18%"><col width="18%"><col width="18%"><col width="23%"><col width="23%">
<tr>
	<td>date<br>setInterval</td>
	<td>date<br>setTimeout</td>
	<td>performance<br>now</td>
	<td>performance<br>timeOrigin</td>
	<td>event<br>timeStamp</td>
	<td>css<br>animation</td>
</tr>
<tr>
	<td><button onClick="logInterval()">run</button></td>
	<td><button onClick="runTimeout()">run</button></td>
	<td><button onClick="logPerfnow()">run</button></td>
	<td><button onClick="logPerforigin()">run</button></td>
	<td><button onClick="logEventTS()">run</button></td>
	<td><button onClick="logCss()">run</button></td>
</tr>
<tr>
	<td id="outputa" class="mono">&nbsp </td>
	<td id="outputb" class="mono">&nbsp </td>
	<td id="outputc" class="mono">&nbsp </td>
	<td id="outputf" class="mono">&nbsp </td>
	<td id="outputd" class="mono">&nbsp </td>
	<td id="outpute" class="mono">&nbsp </td>
</tr>
</table>

<script>


function logPerforigin() {
	let strf = "", i = 1, p0 = performance.timeOrigin;
	function steak() {
		if (i < 26) {
			let p1 = performance.timeOrigin;
			strf = strf + (p1-p0) +"<br>"; i++;
		} else {
			clearInterval(burger);
		}
		document.getElementById("outputf").innerHTML=strf;
	};
	let burger = setInterval(steak, 27);
};


function logInterval() {
	let stra = "", i = 1;
	function banana() {
		if (i < 26) {
			var todaya = new Date();
			stra = stra + (todaya.getSeconds() +"."+ todaya.getMilliseconds() +"<br>"); i++;
		} else {
			clearInterval(cake);
		}
		document.getElementById("outputa").innerHTML=stra;
	};
	let cake = setInterval(banana, 31); // banana cake... yummm
};

var t = 1, strb="";
function logTimeout() {
  if (t < 26) {
		var todayb = new Date();
		strb = strb + (todayb.getSeconds() +"."+ todayb.getMilliseconds()) +"<br>";
		var x = setTimeout(logTimeout, 27); t++;
	};
	document.getElementById("outputb").innerHTML=strb
};
function runTimeout() {
	t = 1, strb="";
	logTimeout();
};

function logPerfnow() {
	let strc = "", i = 1, p0 = performance.now();
	function steak() {
		if (i < 26) {
			let p1 = performance.now();
			strc = strc + (p1-p0) +"<br>"; i++;
		} else {
			clearInterval(burger);
		}
		document.getElementById("outputc").innerHTML=strc;
	};
	let burger = setInterval(steak, 23);
}

function logEventTS() {
	let strd = "", i = 1;
	function french() {
		if (i < 26) {
			strd = strd + new Event('').timeStamp + "<br>"; i++;
		} else {
			clearInterval(fries);
		}
		document.getElementById("outputd").innerHTML=strd;
	};
	let fries = setInterval(french, 37);
}

function logCss() {
	let stre ="",
		c = "", // current
		p = "", // previous
		i=1;
	let el = document.getElementById("anim");
	let z = el.getBoundingClientRect().left; // starting left position
	el.classList.add("anim"); // load class
	function steak() {
		if (i < 101) {
			let rect = el.getBoundingClientRect();
			let c = rect.left;
			if (c !== z) {
				if (c !== p ) {
					stre = stre + (Math.round(c) - z) + "<br>";
					p = c;
				}
			}
			i++;
		} else {
			clearInterval(burger);
			document.getElementById("anim").classList.remove("anim"); // unload class
		}
		document.getElementById("outpute").innerHTML=stre;
	};
	let burger = setInterval(steak, 10);
}

</script>
</body>
</html>

abrahamjuliot · 2021-01-11T05:40:08Z

abrahamjuliot
Jan 11, 2021
Maintainer

This looks interesting. I'll take a closer look at this.

0 replies

Thorin-Oakenpants · 2021-01-11T05:45:34Z

Thorin-Oakenpants
Jan 11, 2021
Author

sometimes I get 59 results, sometimes 60

0 replies

prescience-data · 2021-01-16T23:03:40Z

prescience-data
Jan 16, 2021

what does it show on headless? 🤔

0 replies

abrahamjuliot · 2021-01-17T04:17:46Z

abrahamjuliot
Jan 17, 2021
Maintainer

@prescience-data
I'm new to headless, but I am interested in spinning up a puppeteer function to test this. I imagine the results would be similar to Chrome since the results are dependent on the rendering engine (as far as I know).

I refactored the css test here:

live debug page (for headless test): https://cdpn.io/abrahamjuliot/debug/WNGLPzx/jVMpoEgRnomk
- elements by id length, hash, and data will show up in the dom when the results are fulfilled.
fiddle: https://jsfiddle.net/mzsL9rvc

@Thorin-Oakenpants
On my screen I get:

Chrome: 50-70
Firefox: 59-60

0 replies

Thorin-Oakenpants · 2021-01-17T04:25:24Z

Thorin-Oakenpants
Jan 17, 2021
Author

did you just use a cat? lulz .. he's walking backwards

I wanted to detect headless as well, and there's a few github repos about it, antoine's one I think for sure. I also checked the bugzillas on headless to find FF specific traits, but I got nothing -- https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox -- scroll down and click headless

opera, in order, just clicking run in fiddle

67,66,60,59,66,65

FF

60,59,60,60,60,59,60,59,60,60,59,60

0 replies

prescience-data · 2021-01-17T05:15:22Z

prescience-data
Jan 17, 2021

@prescience-data
I'm new to headless, but I am interested in spinning up a puppeteer function to test this. I imagine the results would be similar to Chrome since the results are dependent on the rendering engine (as far as I know).

Are you on the puppeteer-extra Discord? 👀

Lots of chatter about some of the more edge techniques you've implemented, and less exposed discussing there if you are... 🕵

0 replies

prescience-data · 2021-01-17T05:21:04Z

prescience-data
Jan 17, 2021

did you just use a cat? lulz .. he's walking backwards

😆

#cat { 
  display: inline-block;
  transform: scaleX(-1);
}

0 replies

Thorin-Oakenpants · 2021-01-23T03:24:39Z

Thorin-Oakenpants
Jan 23, 2021
Author

I wanted to detect headless as well, and there's a few github repos about it, antoine's one I think for sure

ahh, here we go ... https://github.com/ThomasAitken/Bot-Blocker

0 replies

Thorin-Oakenpants · 2021-02-17T06:53:15Z

Thorin-Oakenpants
Feb 17, 2021
Author

https://bugzilla.mozilla.org/show_bug.cgi?id=1692609#c3

I think the argument against this is that rAF only gets called on a regular 60 times a second when operating at high speed. It'll never go faster than that. It will go slower.

rAF = request animation frame?

1 reply

abrahamjuliot Feb 18, 2021
Maintainer

yes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

did you know... #114

{{title}}

Replies: 9 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

did you know... #114

Thorin-Oakenpants Jan 10, 2021

Replies: 9 comments · 1 reply

abrahamjuliot Jan 11, 2021 Maintainer

Thorin-Oakenpants Jan 11, 2021 Author

prescience-data Jan 16, 2021

abrahamjuliot Jan 17, 2021 Maintainer

Thorin-Oakenpants Jan 17, 2021 Author

prescience-data Jan 17, 2021

prescience-data Jan 17, 2021

Thorin-Oakenpants Jan 23, 2021 Author

Thorin-Oakenpants Feb 17, 2021 Author

abrahamjuliot Feb 18, 2021 Maintainer

Thorin-Oakenpants
Jan 10, 2021

Replies: 9 comments 1 reply

abrahamjuliot
Jan 11, 2021
Maintainer

Thorin-Oakenpants
Jan 11, 2021
Author

prescience-data
Jan 16, 2021

abrahamjuliot
Jan 17, 2021
Maintainer

Thorin-Oakenpants
Jan 17, 2021
Author

prescience-data
Jan 17, 2021

prescience-data
Jan 17, 2021

Thorin-Oakenpants
Jan 23, 2021
Author

Thorin-Oakenpants
Feb 17, 2021
Author

abrahamjuliot Feb 18, 2021
Maintainer