Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
esnextbin sketch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas width="640" height="480" id="canvas"></canvas>
</body>
</html>
// Browser support detection inspired by:
// https://github.com/icodeforlove/Console.js/blob/master/src/Console.js#L12
var browser = {};
browser.isFirefox = /firefox/i.test(navigator.userAgent);
// does this also work for Edge?
browser.isIE = !!document.documentMode;
browser.isChrome = !!window.chrome
var support = {};
support.console = !!window.console;
support.consoleStyles = browser.isChrome || browser.isFirefox;
support.consoleGroupStyles = browser.isChrome;
console.log('browser: ', browser);
console.log('support: ', support);
log("blue log", "color: blue");
logGroup("blue group", "color: blue");
log("blue log", "color: blue");
logGroupEnd();
function log(text, css) {
if(!support.console) return;
if(css && support.consoleStyles) {
console.log(`%c${text}`, css)
} else {
console.log(text)
}
}
function logGroup(text, css) {
if(!support.console) return;
if(css && support.consoleGroupStyles) {
console.group(`%c${text}`, css)
} else {
console.group(text)
}
}
function logGroupEnd(text, css) {
if(!support.console) return;
console.groupEnd();
}
{
"name": "esnextbin-sketch",
"version": "0.0.0"
}
'use strict';
// Browser support detection inspired by:
// https://github.com/icodeforlove/Console.js/blob/master/src/Console.js#L12
var browser = {};
browser.isFirefox = /firefox/i.test(navigator.userAgent);
// does this also work for Edge?
browser.isIE = !!document.documentMode;
browser.isChrome = !!window.chrome;
var support = {};
support.console = !!window.console;
support.consoleStyles = browser.isChrome || browser.isFirefox;
support.consoleGroupStyles = browser.isChrome;
console.log('browser: ', browser);
console.log('support: ', support);
log("blue log", "color: blue");
logGroup("blue group", "color: blue");
log("blue log", "color: blue");
logGroupEnd();
function log(text, css) {
if (!support.console) return;
if (css && support.consoleStyles) {
console.log('%c' + text, css);
} else {
console.log(text);
}
}
function logGroup(text, css) {
if (!support.console) return;
if (css && support.consoleGroupStyles) {
console.group('%c' + text, css);
} else {
console.group(text);
}
}
function logGroupEnd(text, css) {
if (!support.console) return;
console.groupEnd();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.