Skip to content

Instantly share code, notes, and snippets.

@davidkpiano
davidkpiano / ts-0-60.ts
Last active Jan 22, 2021
TypeScript from 0 to 60
View ts-0-60.ts
// No TypeScript
function add(a, b) {
return a + b;
}
// Type function arguments
// vvvvvv vvvvvv
function add(a: number, b: number) {
return a + b;
}
View punk.js
const CODES = ['o', 'W', 'X', 'H', 'i', 'a', 'l', 's', 's','Q', 'v', 'y'];
console.log(`/${CODES.filter((c,i) => i % 3 == 0).join('')}`)
@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
@Martin-Pitt
Martin-Pitt / concentric-styling-order.md
Last active Dec 10, 2020
CSS Concentric Styling Order
View concentric-styling-order.md
{
	/* Where the box is placed */
	position: ;
	z-index: ;
	float: ;
	place-self: ;
	justify-self: ;
	align-self: ;
	vertical-align: ;
@robweychert
robweychert / frame-based-animation.md
Last active Feb 4, 2021
A simple Sass function for frame-based CSS animation
View frame-based-animation.md

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}
@cecilemuller
cecilemuller / readme.md
Last active Jan 27, 2021
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 Feb 26, 2020
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 Jul 19, 2021
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
@staltz
staltz / migration-guide.md
Last active Mar 3, 2021
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: