victor-homyakov

BFCache, или Туда и обратно

API и поддержка браузерами

PageTransitionEvent API

• CanIUse PageTransitionEvent: https://caniuse.com/#feat=page-transition-events
• CanIUse PageTransitionEvent persisted: https://caniuse.com/#feat=mdn-api_pagetransitionevent_persisted
• Описание pageshow event на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
• Описание pagehide event на MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

Pulimet

Hi All!

I've recently launched a tool that wraps many of the commands here with a user interface. This desktop application is currently available for macOS. There's a roadmap outlining planned features for the near future.
Feel free to request any features you'd like to see, and I'll prioritize them accordingly.
One of the most important aspects of this application is that every command executed behind the scenes is displayed in a special log section. This allows you to see exactly what’s happening and learn from it.

Here's the link to the repository:  https://github.com/Pulimet/ADBugger

App Description:
ADBugger is a desktop tool designed for debugging and QA of Android devices and emulators. It simplifies testing, debugging, and performance analysis by offering device management, automated testing, log analysis, and remote control capabilities. This ensures smooth app performance across various setups.

jaydenseric

#!/usr/bin/env bash

# Usage:
# 1. Save script in project.
# 2. Run "chmod +x find-unused-sass-variables.sh".
# 3. Run script, pointing to Sass directory: "./find-unused-sass-variables.sh ./scss".

VAR_NAME_CHARS='A-Za-z0-9_-'
find "$1" -type f -name "*.scss" -exec grep -o "\$[$VAR_NAME_CHARS]*" {} ';' | sort | uniq -u

paulirish

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

totherik

Per https://code.google.com/p/v8/codesearch#v8/trunk/src/runtime.cc


%CreateSymbol
%CreatePrivateSymbol
%CreateGlobalPrivateSymbol
%NewSymbolWrapper
%SymbolDescription
%SymbolRegistry
%SymbolIsPrivate

jboner

Latency Comparison Numbers (~2012)
----------------------------------
L1 cache reference                           0.5 ns
Branch mispredict                            5   ns
L2 cache reference                           7   ns                      14x L1 cache
Mutex lock/unlock                           25   ns
Main memory reference                      100   ns                      20x L2 cache, 200x L1 cache
Compress 1K bytes with Zippy             3,000   ns        3 us
Send 1K bytes over 1 Gbps network       10,000   ns       10 us
Read 4K randomly from SSD*             150,000   ns      150 us          ~1GB/sec SSD

paulirish

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];