Jinwoo Oh arkist

Inspired by dannyfritz/commit-message-emoji

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

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

Commit type	Emoji
Initial commit	🎉 `:tada:`
Version tag	🔖 `:bookmark:`
New feature	✨ `:sparkles:`
Bugfix	🐛 `:bug:`

	First, install nginx for mac with "brew install nginx".

	Then follow homebrew's instructions to know where the config file is.

	1. To use https you will need a self-signed certificate: https://devcenter.heroku.com/articles/ssl-certificate-self
	2. Copy it somewhere (use full path in the example below for server.* files)
	3. sudo nginx -s reload
	4. Access https://localhost/

	Edit /usr/local/etc/nginx/nginx.conf:

	for t in `git tag`
	do
	git push origin :$t
	git tag -d $t
	done