Misc HTML/CSS/JS things

README.md

A collection of little hacks and a reusable code snippets that I have collected over time.

• blank-fix.html
  Fixes an exploit created when links are openned in a _blank window
• class-methods.js
  Adds addClass, removeClass and hasClass methods to Element objects
• favicons.html
  All of the sizes and formats for favicons and similar icons
• default-focus-styles.css
  Use the default focus styles in CSS

blank-fix.html

<!-- This fixes an exploit created when links are openned in a _blank window -->

<a target="_blank" rel="noopener noreferrer"></a>

class-methods.js

/*
 * These add back the only things I really missed from jQuery
 */

// Returns whether an element has a class or not
Element.prototype.hasClass = function(className) {
    return this.className && new RegExp('(^|\\s)' + className + '(\\s|$)').test(this.className);
};

// Add a class, if not present, to an element
Element.prototype.addClass = function(className) {
    if (this.hasClass(className)) {
        return;
    }
    if (this.className !== '') {
        this.className += ' ';
    }
    this.className += className;
    this.className = this.className.trim();
    return true;
};

// Remove a class, if present, from an element
Element.prototype.removeClass = function(className) {
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
    this.className = this.className.replace(re, ' ');
    this.className = this.className.trim();
    return true;
};

// Add a class if not present, remove that class if it is
Element.prototype.toggleClass = function(className) {
    if (this.hasClass(className)) {
        this.removeClass(className);
    } else {
        this.addClass(className);
    }
    return true;
};

default-focus-styles.css

/*
  Copy the default :focus styles to use on other elements

  https://css-tricks.com/copy-the-browsers-native-focus-styles/
  https://remysharp.com/til/css/focus-ring-default-styles
 */

input:focus + label {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

favicons.html

<!-- All of the sizes and formats for favicons and similar icons -->

<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="path/to/favicon-180.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="path/to/favicon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="path/to/favicon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="path/to/favicon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="path/to/favicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76"   href="path/to/favicon-76.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"   href="path/to/favicon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60"   href="path/to/favicon-60.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57"   href="path/to/favicon-57.png">
<link rel="icon" sizes="32x32" href="path/to/favicon-32.png">

<meta name="application-name" content="[SITENAME]" />
<meta name="msapplication-TileColor" content=" #FFFFFF" />
<meta name="msapplication-square70x70logo" content="path/to/ms_smalltile.png" />
<meta name="msapplication-square150x150logo" content="path/to/ms_mediumtile.png" />

<link rel="mask-icon" href="safari-pinned-icon.svg" color="#262626">