(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
import React from "react"; | |
export type ColorScheme = "light" | "dark"; | |
export default function useColorSchemePreference( | |
defaultColorScheme: ColorScheme = "light" | |
) { | |
let darkQuery = "(prefers-color-scheme: dark)"; | |
let [colorScheme, setColorScheme] = React.useState<ColorScheme>( | |
typeof window === "object" && window.matchMedia |
/* | |
Copy this into the console of any web page that is interactive and doesn't | |
do hard reloads. You will hear your DOM changes as different pitches of | |
audio. | |
I have found this interesting for debugging, but also fun to hear web pages | |
render like UIs do in movies. | |
*/ | |
const audioCtx = new (window.AudioContext || window.webkitAudioContext)() |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
function byteLength(str) { | |
// returns the byte length of an utf8 string | |
var s = str.length; | |
for (var i=str.length-1; i>=0; i--) { | |
var code = str.charCodeAt(i); | |
if (code > 0x7f && code <= 0x7ff) s++; | |
else if (code > 0x7ff && code <= 0xffff) s+=2; | |
if (code >= 0xDC00 && code <= 0xDFFF) i--; //trail surrogate | |
} | |
return s; |
.navbar | |
.caret | |
.label | |
.table | |
.img-responsive | |
.img-rounded | |
.img-thumbnail | |
.img-circle | |
.sr-only | |
.lead |
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
// MIT license | |
(function() { | |
var lastTime = 0; | |
var vendors = ['ms', 'moz', 'webkit', 'o']; |