Skip to content

Instantly share code, notes, and snippets.

Shaw shshaw

Block or report user

Report or block shshaw

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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
View concentric-styling-order.md
{
	/* Where the box is placed */
	position: ;
	z-index: ;
	float: ;
	place-self: ;
	justify-self: ;
	align-self: ;
	vertical-align: ;
@cecilemuller
cecilemuller / readme.md
Last active Mar 28, 2019
Using Three.js "examples" (e.g. OrbitControls) with Webpack 2
View readme.md

Javascript files from the examples folder (such as OrbitControls) are not CommonJS or ES Modules, but they can still be used in Webpack bundles:

In package.json:

"dependencies": {
	"three": "0.84.0",
	"webpack": "2.4.1"
}
@nolanlawson
nolanlawson / parens-and-perf-counterpost.md
Last active Nov 28, 2017
"Parens and Performance" – counterpost
View parens-and-perf-counterpost.md

"Parens and Performance" – counterpost

Kyle Simpson (@getify) wrote a very thoughtful post decrying optimize-js, which is a tool I wrote that exploits known optimizations in JavaScript engines to make JS bundles parse faster (especially minified bundles, due to what could be reasonably described as a bug in Uglify).

Kyle lays out a good case, but I tend to disagree with nearly all his points. So here's my rebuttal.

@danielberndt
danielberndt / load-from-json.js
Last active Apr 15, 2019
load pixi.js sprite sheet jsons via webpack
View load-from-json.js
`
this allows you to use all of webpack's goodness to load your sprites.
here's some benefits:
- saving one roundtrip since webpack's json-loader will inline the json data into the script. Thus it doesn't need to be loaded from the server first
- use a lot of the file-loader power and beyond to create cache-busting urls, and apply image-minification via e.g. image-webpack-loader
`
import PIXI from "pixi.js";
@Restuta
Restuta / framework-sizes.md
Last active Jun 16, 2019
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 – Angular, Ember and React.

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
@staltz
staltz / migration-guide.md
Last active Dec 28, 2018
How to show migration guides in GitHub Markdown
View migration-guide.md

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

@paulirish
paulirish / what-forces-layout.md
Last active Jun 17, 2019
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@markhowellsmead
markhowellsmead / speed_test.js
Last active Aug 29, 2015
Measure how fast an image loads: mainly to test network speed
View speed_test.js
/*
This example is the basis of a simple WordPress plugin
which measures the download speed of a sample image
and then sends this information to the server for further action.
(e.g. writing to a database)
*/
function measureSpeed() {
var duration = (endTime - startTime) / 1000;
var bitsLoaded = downloadSize * 8;
@remy
remy / _README.md
Last active Feb 6, 2019
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.

You can’t perform that action at this time.