Skip to content

Instantly share code, notes, and snippets.

@jeffpamer
jeffpamer / encode.sh
Created March 16, 2018 19:38
Smooth Scrubbing Web Video FFMPEG Mega Command
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
@adambene
adambene / coroutines-and-generators.js
Last active December 22, 2022 10:38
Coroutines and generators in JavaScript
function* delays() {
let a = yield delay(800, "Hello, I'm an");
console.log(a);
let b = yield delay(400, "async coroutine!");
console.log(b);
}
const coroutine = nextValue => iterator => {
const { done, value } = iterator.next(nextValue);
@micjamking
micjamking / _triangle-mixin.scss
Created March 22, 2017 02:47
Sass Triangle Shape Mixin
/**
* Triangle CSS Shape
* https://css-tricks.com/examples/ShapesOfCSS/
* @usage @include triangle('down', 10px, #111)
*/
@mixin triangle ($direction: 'up', $size: 100px, $color: red){
width: 0;
height: 0;
@if $direction == 'up' {
@btroncone
btroncone / ngrxintro.md
Last active June 26, 2024 08:27
A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

@remojansen
remojansen / class_decorator.ts
Last active September 14, 2023 14:54
TypeScript Decorators Examples
function logClass(target: any) {
// save a reference to the original constructor
var original = target;
// a utility function to generate instances of a class
function construct(constructor, args) {
var c : any = function () {
return constructor.apply(this, args);
}
@paulirish
paulirish / what-forces-layout.md
Last active July 5, 2024 08:26
What forces layout/reflow. The comprehensive list.

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
@dmnsgn
dmnsgn / .eslintrc.js
Created July 23, 2015 13:31
.eslintrc Google JavaScript Style Guide (eslint v0.24.1)
{
// http://eslint.org/docs/rules/
"env": {
"browser": true, // browser global variables.
"node": false, // Node.js global variables and Node.js-specific rules.
"worker": false, // web workers global variables.
"amd": false, // defines require() and define() as global variables as per the amd spec.
"mocha": false, // adds all of the Mocha testing global variables.
"jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0.
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

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

@1Marc
1Marc / vimeo-raw-file
Created July 27, 2014 01:02
Vimeo Raw File Script
copy('<ul>'
+ '<li><a download href="' + $("#use_your_own_player input:eq(2)").val() + '">Mobile .MP4 file</a> (480×270)</li>'
+ '<li><a download href="' + $("#use_your_own_player input:eq(1)").val() + '">Standard Def .MP4 file</a> (640x360)</li>'
+ '<li><a download href="' + $("#use_your_own_player input:eq(0)").val() + '">High Def .MP4 file</a> (1280x720)</li>'
+ '</ul>')
http://vimeo.com/99210022/download?t=1403810003&v=265672656&s=f423e5f7722fe0702204e25c76fea728
@patriciogonzalezvivo
patriciogonzalezvivo / GLSL-Noise.md
Last active July 6, 2024 09:32
GLSL Noise Algorithms

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);