Neri Barnini jiin

optimize GLTF file

This optimizes a GLTF file that was exported by blender (or similar) by de-duplicating buffer views (i.e. chunks of bytes) that are equal and removing redundant accessors.

For example, 100 cubes of different scales/materials/rotations/etc should all end up using a single BufferGeometry in ThreeJS, which isn't the case with current GLTF exporters in Blender and parsers for ThreeJS.

In scenes with a lot of instancing, it can dramatically reduce total file size as well as render performance. In one test scene:

Before: 4.8MB file size, 832 THREE.Geometry instances across 832 THREE.Mesh objects
After: 661KB file size, 13 THREE.Geometry instances across 832 THREE.Mesh objects

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

CSS units

Recommendations of unit types per media type:

Media	Recommended	Occasional use	Infrequent use	Not recommended
Screen	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
Print	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

Relative units

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

Raw Attribute Strings

<div my-directive="some string" another-param="another string"></div>

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

Deploy your site with git

This gist assumes:

you have a local git repo
with an online remote repository (github / bitbucket etc)
and a cloud server (Rackspace cloud / Amazon EC2 etc)
- your (PHP) scripts are served from /var/www/html/
- your webpages are executed by apache
apache's home directory is /var/www/

	/*
	This script attempts to identify all CSS classes mentioned in HTML but not defined in the stylesheets.

	In order to use it, just run it in the DevTools console (or add it to DevTools Snippets and run it from there).

	Note that this script requires browser to support `fetch` and some ES6 features (fat arrow, Promises, Array.from, Set). You can transpile it to ES5 here: https://babeljs.io/repl/ .

	Known limitations:
	- it won't be able to take into account some external stylesheets (if CORS isn't set up)
	- it will produce false negatives for classes that are mentioned in the comments.

	# sleepy flower girl
	(◡ ‿ ◡ ✿)

	# y u no
	ლ(ಠ益ಠლ)

	# smiling breasts
	（^人^）

	# flipping tables

	<script type="text/ng-template" id="one.html">
	<div>This is first template</div>
	</script>

	<script type="text/ng-template" id="two.html">
	<div>This is second template</div>
	</script>

	var dns = require('dns');

	function reverseLookup(ip) {
	dns.reverse(ip,function(err,domains){
	if(err!=null) callback(err);

	domains.forEach(function(domain){
	dns.lookup(domain,function(err, address, family){
	console.log(domain,'[',address,']');
	console.log('reverse:',ip==address);