kelsS

Tiny rules for how to name stuff

CSS

How to name CSS classes

Stateful Class names

Is it a state that is only one of two conditions? (i.e. a boolean)

kelsS

CSS :focus Selector

The :focus selector is used to select the element that has focus. It is allowed on elements that accept keyboard events or other user inputs.

• HTMLInputElement
• HTMLSelectElement
• HTMLTextAreaElement
• HTMLAnchorElement
• HTMLButtonElement
• HTMLAreaElement

kelsS

UPDATED 22.11.2022

It's been two years since the last update, so here's the updated working script as per the comments below.

Thanks to BryanHaley for this.

setInterval(function () {
    video = document.getElementsByTagName('ytd-playlist-video-renderer')[0];

 video.querySelector('#primary button[aria-label="Action menu"]').click();

kelsS

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

kelsS

var OFF = 0, WARN = 1, ERROR = 2;

module.exports = exports = {
    "env": {
        "es6": true
    },

    "ecmaFeatures": {
        // env=es6 doesn't include modules, which we are using
        "modules": true

kelsS

.nvmrc

16

.gitignore

# Logs
logs
*.log

kelsS

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
 width: 1px;

kelsS

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
 width: 1px;

kelsS

Keybase proof

I hereby claim:

• I am kelss on github.
• I am kelss (https://keybase.io/kelss) on keybase.
• I have a public key ASCpkaHqf5QnVkAJhntI9JKYrYbUVbKWkh-RC_VGGo9xkgo

To claim this, I am signing this object:

kelsS

BEM Cheatsheet

BLOCK

Block encapsulates a standalone entity that is meaningful on its own.

While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.

Holistic entities without DOM representation (such as controllers or models) can be blocks as well.