Faster than save/restore HTML5 canvas
copy const canvas = document.createElement ( 'canvas' ) const c = canvas.getContext ( '2d' ) canvas.width = innerWidth canvas.height = innerHeight document.body .append ( canvas) c.fillStyle = 'black' c.fillRect ( 0 , 0 , canvas.width , canvas.height ) class Shooter { constructor( ) { this .x = innerWidth / 2 this .y = innerHeight / 2 this .vx = Math .random ( ) * 10 - 5 this .vy = Math .random ( ) * 10 - 5 this .color = 'rgba(255, 0, 0, 0.5)' this .size = 10 this .halfSize = this .size / 2 } draw( ) { this .x += this .vx this .y += this .vy if ( this .x < 0 ) { this .x = innerWidth } else if ( this .x > innerWidth) { this .x = 0 } if ( this .y < 0 ) { this .y = innerHeight } else if ( this .y > innerHeight) { this .y = 0 } c.fillStyle = this .color c.translate ( this .x , this .y ) c.fillRect ( - this .halfSize , - this .halfSize , this .size , this .size ) c.setTransform ( 1 , 0 , 0 , 1 , 0 , 0 ) } } const NUM = 1000 const shooters = [ ] for ( let i = 0 ; i < NUM; i++ ) { shooters.push ( new Shooter( ) ) } function loop( ) { c.fillStyle = 'rgba(0, 0, 0, 0.1)' c.fillRect ( 0 , 0 , innerWidth, innerHeight) for ( let i = 0 ; i < NUM; i++ ) { shooters[ i] .draw ( ) } requestAnimationFrame( loop) } loop( )
Try it out…
Using setTransform(1, 0, 0, 1, 0, 0)
is faster than using save
and restore
. If you don’t need to save context info like fills, line styles etc… consider this method.
Validate Anagram
copy function normalizeString( word) { word = word.toLowerCase ( ) const result = normalizeString.memo [ word] if ( result) return result return normalizeString.memo [ word] = [ ...word .replace ( /\s/g , '' ) ] .sort ( ) + '' } normalizeString.memo = { } const checkAnagram = ( word, source) => normalizeString( word) === normalizeString( source) // try it out const target = 'adorn hair' const anagrams = [ 'hoard rain' , 'hair radon' , 'hadron air' , 'hairdo ran' , 'radian rho' , 'au revoir fail' ] ; anagrams.forEach ( anigram => { console.log ( anigram, '=' , checkAnagram( anigram, target) ) } )
Try it out…
Check if two strings are anagrams of one another.
Log All Class Method Calls
copy class ConfusingClass { constructor( ) { logMethodCalls( this ) this .confuseMe = 1 this .someFn ( 300 ) } someFn( startVal = 1 ) { this .confuseMe = startVal this .testFn ( ( ) => this .otherFn ( 123 ) ) } testFn( fn) { this .confuseMe += 1 fn( this .confuseMe ) } otherFn( value = 111 ) { this .confuseMe += 2 this .testFn ( ( ) => this .confuseMe += value) this .confuseMe = this .add ( this .confuseMe , 999 ) console.log ( this .confuseMe ) } add( a, b) { return a + b } } const confusing = new ConfusingClass( ) function logMethodCalls( target) { const keys = Object .getOwnPropertyNames ( target.constructor .prototype ) for ( let i = 0 ; i < keys.length ; i++ ) { const key = keys[ i] const propOrMethod = target[ key] if ( typeof propOrMethod === 'function' ) { target[ key] = function ( ...args ) { console.log ( key, '(' , args.join ( ', ' ) , ') - was run' ) return propOrMethod.apply ( target, args) ; } } } }
Try it out…
This one is good for dealing with confusing classes with lots of method calls. It logs any time a method is called, what its name is and what arguments were passed to it. Sometimes this really beats stepping through breakpoints, at least in my experience…
Simple Way to Validate CSS Colors
copy function isColor( col) { const cache = isColor[ col] if ( cache != null ) { console.log ( '- reading cache' ) return cache } isColor.el .style = '' isColor.el .style .color = col return isColor[ col] = !! isColor.el .style .color } isColor.el = document.createElement ( 'div' ) console.log ( 'is "red" a color?' , isColor( 'red' ) ) console.log ( 'from the cache: ' , isColor( 'red' ) ) console.log ( 'is "rgbx(1, 2, 3)" a color?' , isColor( 'rgbx(1, 2, 3)' ) ) console.log ( 'is "#0f0" a color?' , isColor( '#0f0' ) ) console.log ( 'is "hsl(192, 50%, 50%)" a color?' , isColor( 'hsl(192, 50%, 50%)' ) ) console.log ( 'from the cache: ' , isColor( 'hsl(192, 50%, 50%)' ) ) console.log ( 'is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?' , isColor( 'lab(2000.1337% -8.6911 -159.131231 / .987189732)' ) ) console.log ( 'is "snippetZone" ?' , isColor( 'snippetZone' ) )
Try it out…
I find this technique is usually good enough to validate colors…