TimvanScherpenzeel

Implementing audio and video autoplay unlocking

Due to recent changes in the autoplay policy of Chrome 66 developers of interactive experiences on the web are facing new challenges regarding audio and video autoplay. The new policy has unfortunately broken many of the older experiences that rely on autoplaying audio and video.

So how to move forward?

Previous solutions

Previously developers used to face this issue on iOS mobile devices where the audio context was locked. Most developers fixed this by using the initial touch event of a user to unlock the audio.

cdata

const cloneGltf = (gltf) => {
  const clone = {
    animations: gltf.animations,
    scene: gltf.scene.clone(true)
  };

  const skinnedMeshes = {};

  gltf.scene.traverse(node => {
    if (node.isSkinnedMesh) {

mattdesl

procedural mesh generation

Generates an algorithmic 3D OBJ file with ThreeJS and Node.js.

# print to stdout
node generate-mesh.js > test.obj

# write to file
node generate-mesh.js test.obj

ayamflow

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

dmnsgn

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

ljharb

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

Samsy

import {
	EventDispatcher,
	Vector2,
	Vector3,
	MOUSE,
	Quaternion,
	Spherical,
	PerspectiveCamera,
	OrthographicCamera,
} from 'three';

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

mjackson

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "array-bracket-spacing": [2, "always"],
    "comma-dangle": 0,
    "consistent-return": 1,
    "curly": [1, "multi-or-nest", "consistent"],
    "eqeqeq": [2, "smart"],
    "max-len": 1,

ilfroloff

'use strict';
import Singleton from 'Singleton';

class ClassA extends Singleton {
    constructor() {
        super();
    }
    
    singletonMethod1() {
        // ...