Skip to content

Instantly share code, notes, and snippets.

View blaja's full-sized avatar

blaja

8 followers · 37 following
View GitHub Profile
@blaja
blaja / .js
Created August 8, 2015 13:41
Inspecting internal [[class]] of objects in JS
// NOTE: this is specification dependent classification. It has nothing to do with formal class programming concept.
// The value of the [[Class]] internal property is defined by specification for every kind of built-in object.
// The value of the [[Class]] internal property of a host object may be any String value except one of:
// "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", and "String".
// The value of a [[Class]] internal property is used internally to distinguish different kinds of objects.
Object.prototype.toString.call({}); // "[object Object]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(function(){}); // "[object Function]"
Object.prototype.toString.call(''); // "[object String]"
@blaja
blaja / .js
Created August 7, 2015 01:58
This is how to extend Host(DOM,BOM) objects. But best to not do it at all, use wrappers.
const $ = function(selector) { return document.querySelector(selector); }; // Returns first matched element or null
const $$ = function(selector) { return document.querySelectorAll(selector); }; // Returns NodeList of matched elements or empty NodeList []
// If you want to extend HTML DOM prototype do it this way or something like this.
// Check for property or method pre-existance. Obv if JS Engine already provides property or method, you don't want to override it with your own custom one.
// This works in IE9+ or can be done even in IE8+
// Adding a new method to all HTML elements via the HTMLElement prototype
if(!HTMLElement.prototype.remove) {
// defineProperty because of enumeration
@blaja
blaja / .js
Created August 5, 2015 10:35
Get for..of loop on NodeList interface in Chrome
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
@blaja
blaja / .js
Created August 4, 2015 11:30
document.getElementById('btn').addEventListener('click', function() {
"use strict";
const evens = Array.from(document.getElementsByClassName('even'));
for(let even of evens) {
even.classList.toggle('bold');
even.nextElementSibling.classList.toggle('italic');
}
});
@blaja
blaja / .js
Created August 2, 2015 15:12
(function () {
'use strict';
return this === undefined; // false
}.call(this));
(function(global){
'use strict';
@blaja
blaja / .js
Last active August 29, 2015 14:26
Simple way to exclude webkit prefixed props in Chrome using some ES6 features.
// Filter out CSS properties without webkit prefixes in Chrome console
// To find "hidden" properties of an object we need to use Object.getOwnPropertyNames.
Object.getOwnPropertyNames(document.body.style).filter(
property => !property.startsWith('webkit')
);
@blaja
blaja / .js
Created August 1, 2015 14:34
Fetch some JSON using Fetch API
const request = new Request('https://output.jsbin.com/pasixu.js', {
method: 'GET',
requestMode: 'cors',
});
fetch(request).then(function(response) {
return response.json();
}).then(function(body) {
console.log(body);
}).catch(function(){
@blaja
blaja / .js
Last active August 29, 2015 14:26
Not worth a look!
// Navigate to different location using different BOM && DOM API-s. Paralysis of choice :) Are there more ways ?
location = 'https://www.google.com/';
location.href = 'https://www.google.com/';
window.location = 'https://www.google.com/';
document.location = 'https://www.google.com/';
window.location.href = 'https://www.google.com/';
@blaja
blaja / .html
Last active August 29, 2015 14:26
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {height: 100vh;display: flex;align-items: center;justify-content: center;}
/* Button component - works only in FF correctly ATM */
@blaja
blaja / gist:71310d4031231f25268d
Last active August 29, 2015 14:25