-
Install the React Developer Tools Chrome Extension.
-
Go to the egghead website, i.e. Getting Started with Redux
-
Click
View -> Developer -> Javascript Console
, then theReact
tab, then the<NextUpLessonList ...>
tag. -
Click back to the
Console
tab, then run:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import invariant from "tiny-invariant"; | |
class AmalgoBox extends HTMLElement { | |
get input() { | |
return this.querySelector("input") as HTMLInputElement; | |
} | |
get button() { | |
return this.querySelector("button") as HTMLButtonElement; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function (context, trackingId, options) { | |
const history = context.history; | |
const doc = document; | |
const nav = navigator || {}; | |
const storage = localStorage; | |
const encode = encodeURIComponent; | |
const pushState = history.pushState; | |
const typeException = 'exception'; | |
const generateId = () => Math.random().toString(36); | |
const getId = () => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// paste in your console | |
speechSynthesis.onvoiceschanged = function() { | |
var msg = new SpeechSynthesisUtterance(); | |
msg.voice = this.getVoices().filter(v => v.name == 'Cellos')[0]; | |
msg.text = Object.keys(window).join(' '); | |
this.speak(msg); | |
}; |
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element
or the /deep/
path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* This is small, light weight vanilla JavaScript Bootstrap script. | |
* | |
* It comes handy in situations where a framework i.e. jQuery is used only | |
* for "load" and "ready" events etc. This small script will not only save | |
* lot of bytes but also gives a basic start on writing object literal JavaScript. | |
* | |
* Learn more about object literal JavaScript at following resource: | |
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals | |
* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// setup | |
!(function(root) { | |
var AsyncGoogleMap = (function() { | |
// constructor | |
function AsyncGoogleMap(canvas, lat, lng, zoom, callback) { | |
if ( typeof canvas === 'undefined' ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Check and verify user status or prompt for authorization | |
function checkUserStatus(response) { | |
var permissions = { | |
scope: '' // email | |
}; | |
if ( isConnectedUser(response) ) | |
return FB.api('/me', gotUserInfo); | |
return FB.login(checkUserStatus, permissions); | |
} |
NewerOlder