Skip to content

Instantly share code, notes, and snippets.

@Vestride
Vestride / encoding-video.md
Last active Oct 28, 2020
Encoding video for the web
View encoding-video.md

Encoding Video

Installing

Install FFmpeg with homebrew. You'll need to install it with a couple flags for webm and the AAC audio codec.

brew install ffmpeg --with-libvpx --with-libvorbis --with-fdk-aac --with-opus
@paulirish
paulirish / what-forces-layout.md
Last active Oct 27, 2020
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@gre
gre / easing.js
Last active Oct 26, 2020
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
View easing.js
/*
* Easing Functions - inspired from http://gizma.com/easing/
* only considering the t value for the range [0, 1] => [0, 1]
*/
EasingFunctions = {
// no easing, no acceleration
linear: t => t,
// accelerating from zero velocity
easeInQuad: t => t*t,
// decelerating to zero velocity
@conorbuck
conorbuck / angle-between-points.js
Created May 5, 2012
JavaScript: Find the angle between two points
View angle-between-points.js
var p1 = {
x: 20,
y: 20
};
var p2 = {
x: 40,
y: 40
};
View wp-query-ref.php
// This gist is now maintained on github at https://github.com/luetkemj/wp-query-ref
<?php
/**
* WordPress Query Comprehensive Reference
* Compiled by luetkemj - luetkemj.github.io
*
* CODEX: http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
* Source: https://core.trac.wordpress.org/browser/tags/4.9.4/src/wp-includes/query.php
*/
@addyosmani
addyosmani / README.md
Last active Oct 18, 2020 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@remy
remy / _README.md
Last active Oct 17, 2020
requestAnimationFrame helper
View _README.md

raf.js

A simple script with a few niceties that allows for multiple requestAnimationFrame calls, and FPS pinning.

How it works

The script polyfills rAF if required, then overloads requestAnimationFrame and cancelAnimationFrame with a process that allows multiple frames to be queued up for rAF to run.

This is useful if there are multiple animations running on the page, you want all the callbacks to happen at once, and not on multiple rAF calls. This script is meant as a drop-in solution to that problem.

@jeffpamer
jeffpamer / encode.sh
Created Mar 16, 2018
Smooth Scrubbing Web Video FFMPEG Mega Command
View encode.sh
ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 -an -vf "scale=-1:1440, reverse" -preset veryslow -g 2 output.mp4
// -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3
// Encode for web with a good balance of browser compatibility and compression ratio
// -an
// Strip audio tracks
// -vf "scale=-1:1440, reverse"
// Scale video to 1440px wide, maintaining aspect ratio
@Restuta
Restuta / framework-sizes.md
Last active Oct 15, 2020
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)
View framework-sizes.md

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan  4 22:03 angular2.min.js
@revolunet
revolunet / lzw_encoder.js
Created Feb 25, 2011
LZW javascript compress/decompress
View lzw_encoder.js
// LZW-compress a string
function lzw_encode(s) {
var dict = {};
var data = (s + "").split("");
var out = [];
var currChar;
var phrase = data[0];
var code = 256;
for (var i=1; i<data.length; i++) {
currChar=data[i];
You can’t perform that action at this time.