Artur Kornakov fliptheweb

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Parent

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

iframe

About Sass and Gzip

Hey guys! I have a question regarding Sass usage and Gzip compression. If anyone knows something, be sure to share. :)

A quick reminder

It's good practice to use Sass @extend rather than including mixins when possible because of the way Sass handles @extend. To put it simple, it doesn't take the CSS content from the extended selector to place them in the extending one. It works the other way around: it takes the extending selector and append it to the extended selector.

Placeholder

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.

Use these rapid keyboard shortcuts to control the GitHub Atom text editor on macOS.

Key to the Keys

⌘ : Command key
⌃ : Control key
⌫ : Delete key
← : Left arrow key
→ : Right arrow key
↑ : Up arrow key

Data Injection

Задача: компоненту необходимо получить сторонние данные, которые он не может получить через пропсы.

Проблема: разные источники данных могут иметь разные API, которые влекут за собой необходимость реализации дополнительных аспектов в рамках компонента: useState/useEffect, обработка loading state, доступ к асинхронным API, etc.

Решение: Каждый раз когда компоненту нужны сторонние данные, создавай

Краткая характеристика:

У него много сторов и сторы могут зависеть друг от друга, а не один большой стор и селекторы. То есть он ближе к Эфектору, чем в Редаксу/MobX. Всё ради tree shaking.
Он ближе к стору прямых измений. В публичном API нет экшенов. Но всё-таки value = 1 на манер MobX запрещены — значения можно менять только через спец. методы. И в синхронизации состояния с сервером экшены есть (просто скрыты из публичного API).

Плюсы:

Может работать без Логакса, чисто как стейт-менеджер.
API специально создан, чтобы хранить в сторах бизнес-логику, чем разгружать компоненты и упрощать переносимость приложения между фреймворками.
От 157 байт (!) в вашем JS-бандле.
Расчитан на агрессивный tree shaking, чтобы в JS-бандле был только код того состояния, которые используются в текущих страницах.
Очень ленивый — сторы на которых никто не подписан выгружаются из памяти, а их бизнес-логика останавливается.

	Latency Comparison Numbers (~2012)
	----------------------------------
	L1 cache reference 0.5 ns
	Branch mispredict 5 ns
	L2 cache reference 7 ns 14x L1 cache
	Mutex lock/unlock 25 ns
	Main memory reference 100 ns 20x L2 cache, 200x L1 cache
	Compress 1K bytes with Zippy 3,000 ns 3 us
	Send 1K bytes over 1 Gbps network 10,000 ns 10 us
	Read 4K randomly from SSD* 150,000 ns 150 us ~1GB/sec SSD

	# let aws-sdk guess content type and allow long cache for everything apart from JS, CSS and HTML
	aws s3 sync $WORKDIR/ s3://$BUCKET --cache-control="max-age=86400000" --exclude ".html" --exclude ".js" --exclude "*.css" --acl public-read
	# set JS content type correctly so UTF chars can be included safely (otherwise browsers mess up UTF)
	aws s3 sync $WORKDIR/ s3://$BUCKET --cache-control="max-age=86400000" --exclude "" --include ".js" --acl public-read --content-type "application/javascript; charset=UTF-8"
	# set CSS content type correctly so UTF chars can be included safely
	aws s3 sync $WORKDIR/ s3://$BUCKET --cache-control="max-age=86400000" --exclude "" --include ".css" --acl public-read --content-type "text/css; charset=UTF-8"
	# 10-minute CDN cache for HTML files
	aws s3 sync $WORKDIR/ s3://$BUCKET --cache-control="max-age=600" --exclude "" --include ".html" --acl public-read --content-type "text/html; charset=UTF-8"