Joan León nucliweb

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

Tras este tweet que publiqué

He sido freelance, emprendedor y trabajo desde hace años para empresas USA de diversos tamaños en remoto como programador fullstack. Ahora en GitHub. Si puedo ayudar a alguien en orientar su carrera, mis DMs están abiertos. Ask me anything.

he recibido muchos mensajes y escribo aquí algunos de los consejos que he dado en resumen. Nota: algunas cosas son concretas de trabajar en España. Si vas a trabajar desde Sudamérica sólo una nota: tienes la ventaja de la zona horaria para trabajar con EEUU.

Inglés

Tener un buen nivel de inglés es fundamental para poder trabajar con clientes extranjeros. El conocimiento del idioma tiene que mantenerse en el tiempo. Es como mantenerse en forma física; si lo dejas, lo pierdes. Personalmente aunque trabajo 100% en inglés desde hace bastantes años, intento crearme un entorno diario con el idioma para no perderlo:

	// gif by dave aka @beesandbombs :)

	int[][] result;
	float t, c;

	float ease(float p) {
	return 3pp - 2pp*p;
	}

	float ease(float p, float g) {

	var talksByLikes = [].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent , ratio : talk.querySelector('a.ka-like-link + a.ka-social-link').title }));

	var currentDay = /5693168230072320/.test(window.location.href)
	? "5649626120060928"
	: "5693168230072320";
	document.querySelector(`a[data-day-id="${currentDay}"]`).click();

	setTimeout(function(){
	talksByLikes = talksByLikes.concat([].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent, ratio: ta

	WEBGL // p5 WEBGL rendering mode.
	createCanvas(w, h, renderer) // Creates a 3D canvas (if renderer is WEBGL).

	// Primitives
	plane(width, height) // Creates a plane in 3D space. Equivalent to rect() in the default rendering mode.
	plane(width, height, detailX, detailY) // Creates a plane in 3D space with the number of triangle subdivisions specified.
	box(width) // Creates a cube in 3D space.
	box(width, height, depth) // Creates a cuboid in 3D space.
	box(width, height, depth, detailX, detailY) // Creates a cuboid in 3D space with triangle subdivisions.
	sphere(radius) // Creates a sphere in 3D space.

	ArrayList<Rect> rects;
	float mx, my, mm, time;

	void setup() {
	size(720, 720, P2D);
	generate();
	}


	void draw() {

	<!doctype html>
	<div id="sketch"></div>

	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #383838;
	}
	#sketch {

	boolean recording = false;
	int frame = 1;
	float theta = 0;
	float phi = 0;
	float time = 0;
	float r = 50;
	int cols = 5;
	int rows = 5;
	Lissajou[][] curves;

	<css-doodle>
	:doodle {
	@grid: 20x1 / 60vmin;
	overflow: hidden;
	}
	:container {
	transform: scale(25);
	filter: @svg-filter(<svg>
	<filter>
	<feTurbulence baseFrequency="@r(.016, .056, .001)" seed="@r(100)" numOctaves="@r(8, 15)" />

	const drawille = require('drawille')
	const bunny = require('bunny')
	const glmatrix = require('gl-matrix')
	const width = 200
	const height = 200
	const canvas = new drawille(width, height)
	const mat4 = glmatrix.mat4
	const vec3 = glmatrix.vec3

	let points = []