Rashid rashidtvmr

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

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

if(document.queryCommandSupported('copy')) {
        if(text=='') { text = ' '; } // empty inputs do not get selected

        // copy text to off-screen input
        $('#clipboard').val(text);

        // 1.) does copy empty inputs, but adds newline before content
        var range = document.createRange();
 range.selectNode(document.querySelector('#clipboard'));

	:root {
	--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
	--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
	--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
	--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
	--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
	--ease-in-circ: cubic-bezier(.6, .04, .98, .335);

	--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
	--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);

	// 1. type of null is object
	// 2. NaN is not equal to NaN ie NaN == NaN // false
	// 3. Object.preventExtension prevent obj from adding keys
	// 4. Object.isExtensible check for above config
	// 5. Object.seal() apply step 3 and makes all of its properties unconfigurable i.e, they can’t be changed, anymore (except for their values): Read-only properties stay read-only, enumerable properties stay enumerable, etc
	// 6. Object.freeze applies 3 and 5
	// 7. Object.freeze is shallow this function frozes deeply
	// 8. Shallow copy Object.assign, spread operator etc (Only own (non-inherited) properties are copied),
	// 9. Many built-in objects have special “internal slots” that aren’t copied by object spreading #
	// 10. Property attributes aren’t always copied

	// @ts-nocheck
	import { FFmpeg } from '@ffmpeg/ffmpeg';
	import { useState, useEffect, useRef } from 'react';


	const useVideoGeneration = ({
	ffmpeg,
	images,
	audio,
	slideDuration,

	import { useState, useEffect } from 'react';

	export default function useImagesConversion(images: any) {
	const [imageBuffers, setImageBuffers] = useState<any>([]);
	const [progress, setProgress] = useState(0);
	const [error, setError] = useState<any>(null);
	const [controller, setController] = useState<any>(null);

	useEffect(() => {
	// Create a new AbortController

	import { Events } from "./events";

	export class MyClass {

	events = new Events(this); // there we go!

	constructor(data) {
	await init();
	}

	/**
	* Simplest event system for any class to implement
	*/
	export class Events {
	constructor(host) {
	this.proxy = document.createDocumentFragment();
	this.proxy.host = host;

	["addEventListener", "dispatchEvent", "removeEventListener"].forEach(
	this.delegate,

	cd /home/<user>/
	sudo apt-get install unzip
	wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip
	unzip sdk-tools-linux-4333796.zip -d Android
	rm sdk-tools-linux-4333796.zip
	sudo apt-get install -y lib32z1 openjdk-8-jdk
	export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
	export PATH=$PATH:$JAVA_HOME/bin
	printf "\n\nexport JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64\nexport PATH=\$PATH:\$JAVA_HOME/bin" >> ~/.bashrc
	cd Android/tools/bin