Joan León nucliweb

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

PNG + SVG export from canvas-sketch

The helper function canvas-to-svg.js wraps a given render function (or renderer object) so that you can use Canvas2D context methods as usual, but upon single frame export (with Cmd/Ctrl + S) it will produce both a PNG and SVG file.

This uses canvas2svg which is not a perfect solution, as the Canvas2D API was never designed to be translated to SVG. Its best to stick with simple shape and path operations.

Full instructions: first install the canvas-sketch CLI if you haven't already:

npm install canvas-sketch-cli -g

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
Uniformity among transformations between components with different primary colors

	/**
	* Title: How to create Custom Observable and Operators with RxJS and Node.js.
	*
	* Description: With this example I want to show how you can generate custom
	* Observables and Operators with RxJS and Node.js.
	*/

	import { Observable } from 'rxjs';
	import { request } from 'undici';

	:root {
	--violation-color: red; /* used for clear issues */
	--warning-color: orange; /* used for potential issues we should look into */
	}

	/* IMAGES */

	/*
	* Lazy-Loaded Images Check
	* ====

	/**
	* A bookmarklet for viewing shifted elements while debugging
	* Cumulative Layout Shift (web.dev/cls). Works in Chrome 84+
	* Shows the previous position of shifted elements in yellow,
	* and the new position in red.
	*
	* To install:
	* 1. Copy the code starting from the line beginning `javascript:`
	* 2. Add a new bookmark in Chrome, and paste the code in as the URL.
	**/

	export function clapperBoard() {
	let audio = new AudioContext()
	let beep = audio.createOscillator()
	let flash = document.createElement("div")

	beep.frequency.value = 440 * 5
	beep.connect(audio.destination)
	flash.classList.add("clapperboard")

	beep.start()

	[lcp]
	const po = new PerformanceObserver(() => {});
	po.observe({type: 'largest-contentful-paint', buffered: true});
	const lastEntry = po.takeRecords().slice(-1)[0];
	return lastEntry.renderTime \|\| lastEntry.loadTime;

	[cls]
	const po = new PerformanceObserver(() => {});
	po.observe({type: 'layout-shift', buffered: true});
	return po.takeRecords().reduce((val, entry) => val + entry.value, 0);

	const puppeteer = require('puppeteer');

	const Good3G = {
	'offline': false,
	'downloadThroughput': 1.5 * 1024 * 1024 / 8,
	'uploadThroughput': 750 * 1024 / 8,
	'latency': 40
	};

	const phone = puppeteer.KnownDevices['Nexus 5X'];