Georgios Kaleadis georgiee

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

Accessibility

Info collected about a11y topics.

Resources

The A11Y Project
WebAIM: Web Accessibility In Mind
Web Accessibility by Google (Udacity)
Start Building Accessible Web Applications Today - by Marcy Sutton

⚠️ this is now stupidly out of date

Computers

13" Macbook Pro 3.3 GHz i7 (late 2016)
Microsoft Surface Book (2016)

Peripherals

Dell up3216q 32" monitor

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	export default class BlogPost extends Component {

	constructor(props) {
	super(props);

	this.state = {
	'codepen': false
	};
	}

	{
	"scripts": {
	"build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
	"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
	"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
	"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
	"build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
	"build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
	}
	}

	#!/usr/bin/python2
	import requests
	import os
	import sys
	import random
	import string

	FILTERS = [
	"smile",
	"smile_2",

	#!groovy
	import groovy.json.JsonOutput
	import groovy.json.JsonSlurper

	def label = "mypod-${UUID.randomUUID().toString()}"
	podTemplate(label: label, yaml: """
	spec:
	containers:
	- name: mvn
	image: maven:3.3.9-jdk-8

	<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

	<style>
	body {
	margin: 0;
	}
	/* Style the element from the outside */
	/*
	fancy-tabs {
	margin-bottom: 32px;