web notes

"everything looks tiny"

use the viewport meta tag in the page's HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

"tables look messed up"

put <table>s in a <div class="scroll-horizontal"> then use the following CSS:

.scroll-horizontal {
	overflow-x: auto;
	white-space: nowrap;
}

looping animations

<video preload="auto" autoplay loop muted playsinline>
	<source src="loop.webm" type="video/webm" />
	alt text
</video>

video with controls

<video preload="metadata" controls playsinline>
	<source src="loop.webm" type="video/webm" />
	alt text
</video>

audio with controls

<audio preload="metadata" controls>
	<source src="audio.mp3" type="audio/mpeg" />
	alt text
</audio>

images embedded in HTML

convert the image file to base64: base64 foo.png

<img src="data:image/png;base64,
SOME BASE64 HERE
" />

nearest-neighbor image scaling

use the following CSS:

.nearest-neighbor {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: pixelated;
}