(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']; |