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
/* | |
* 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: function (t) { return t }, | |
// accelerating from zero velocity | |
easeInQuad: function (t) { return t*t }, | |
// decelerating to zero velocity |
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
I wrote this as a reference for myself because some of the property names are non-obvious, and there are a number of relevant special properties, and there is no central concise listing of them all in GSAP Docs, other than (in longer form) on the CSSPlugin page.
...are all supported, with hyphenated-names
becoming camelCaseNames
. Non-animatable properties are also supported but they will be set at the beginning of the tween.
Special mentions:
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.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
elem.clientLeft
, elem.clientTop
, elem.clientWidth
, elem.clientHeight
elem.getClientRects()
, elem.getBoundingClientRect()
/** | |
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
* | |
* To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
* the height of element `.foo` —which is a full width and height cover image. | |
* | |
* iOS Resolution Quick Reference: http://www.iosres.com/ | |
*/ | |
This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.
You want a script that does a local compile to e.g. an out/
directory. Let's call this compile.sh
for our purposes, but for your project it might be npm build
or gulp make-docs
or anything similar.
The out/
directory should contain everything you want deployed to gh-pages
. That almost always includes an index.html
.
// 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 | |
*/ |
var p1 = { | |
x: 20, | |
y: 20 | |
}; | |
var p2 = { | |
x: 40, | |
y: 40 | |
}; |
// 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]; |
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