Anggi Arlandi Priatmadi arlandi

Frontend Testing

This is an incomplete collection of frontend testing tips, tricks and tools. It's just the stuff I've found useful over the years. Feel free to suggest more stuff. I'll add it if I like it ;)

Device Testing

MacOS: Xcode Device Simulator: https://unrealnavigation.com/blog/web-inspector-with-ios-simulator
Inspector for real iOS devices: https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Inspector for real Android devices: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
https://www.browserstack.com/

Performance

Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.

Server

Wildcard Express route configures a Redux store for each request and makes an addReducers() callback available to the getComponents() method of each React Router route. Each route is responsible for adding any Redux reducers it needs when it's loaded. (This isn't really necessary on the

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

This will create a proxy server in whatever your availability zone your VPC is in. For me, that's us-east-1b. For you, that may be something different. Steps 10+ should more or less work regardless of your provider since those steps cover the setup and configuration of TinyProxy.

Click the Launch Instance button.
Choose Ubuntu Server 14.04 LTS (HVM), SSD Volume Type. This isn't strictly necessary. If you choose another OS, check its documentation for how to install new packages.
On the Choose an Instance Type screen, select t2.micro. It's Free Tier eligible.
Click the Next: ... buttons until you reach the Configure Security Group screen.
- You may wish to reduce the amount of storage on the Add Storage screen. This is optional.
- You may wish to add a tag on the Tag Instance screen. This is also optional.
On the Configure Security Group screen:

Select Create a new security group.

Currently considering https://github.com/webdriverio/webdrivercss

Core Goals:

Can test in up-to-date versions of all major browsers
Can test on up-to-date versions of all major OSes
Can test in IE9 (because Bootstrap v4 will support IE9+)
Don't want to have to setup/maintain our own cluster of VMs running all the necessary OSes (and all the versions of Windows)
Workflow for management of reference/baseline/norm screenshots

	//events - a super-basic Javascript (publish subscribe) pattern

	var events = {
	events: {},
	on: function (eventName, fn) {
	this.events[eventName] = this.events[eventName] \|\| [];
	this.events[eventName].push(fn);
	},
	off: function(eventName, fn) {
	if (this.events[eventName]) {

	<!DOCTYPE html>
	<html>
	<head>
	<title>Animated ASCII Penis</title>
	</head>

	<body>

	<span id="pen">8====================D</span>
	<span id="is"> </span>

	/**
	* Patch the console methods in order to provide timestamp information
	*
	* Usage:
	* > console.log('ok')
	* 2012-09-06T11:52:56.769Z ok true
	*
	* Note:
	* The patch will only be applied with the first call.
	*

	Latency Comparison Numbers (~2012)
	----------------------------------
	L1 cache reference 0.5 ns
	Branch mispredict 5 ns
	L2 cache reference 7 ns 14x L1 cache
	Mutex lock/unlock 25 ns
	Main memory reference 100 ns 20x L2 cache, 200x L1 cache
	Compress 1K bytes with Zippy 3,000 ns 3 us
	Send 1K bytes over 1 Gbps network 10,000 ns 10 us
	Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD

	echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
	. ~/.bashrc
	mkdir ~/local
	mkdir ~/node-latest-install
	cd ~/node-latest-install
	curl http://nodejs.org/dist/node-latest.tar.gz \| tar xz --strip-components=1
	./configure --prefix=~/local
	make install # ok, fine, this step probably takes more than 30 seconds...
	curl https://www.npmjs.org/install.sh \| sh