Oleh Burkhay atma

`vs` Questions

http://stackoverflow.com/questions/804115 (rebase vs merge).
https://www.atlassian.com/git/tutorials/merging-vs-rebasing (rebase vs merge)
https://www.atlassian.com/git/tutorials/undoing-changes/ (reset vs checkout vs revert)
http://stackoverflow.com/questions/2221658 (HEAD^ vs HEAD~) (See git rev-parse)
http://stackoverflow.com/questions/292357 (pull vs fetch)
http://stackoverflow.com/questions/39651 (stash vs branch)
http://stackoverflow.com/questions/8358035 (reset vs checkout vs revert)

How to use Hexo and deploy to GitHub Pages

1. Install Hexo

$ sudo npm install -g hexo-cli

$ hexo -v
hexo-cli: 0.1.9

React HN (Universal rendering, Offline caching, optimisations)

Repo: https://github.com/insin/react-hn
Live: https://react-hn.appspot.com (Version with forced offline caching at https://react-hn-rest.appspot.com)
Detailed breakdown: https://gist.github.com/addyosmani/6e25174135f4f0095de77f07ecf068df
Lighthouse: First meaningful paint (target value: 1,000ms) 100 (382.25ms)
Lightouse: Speed Index (target value: 1,000) 98 (1330)
Preact HN - a Preact version of this app is also available

React + Webpack application using the PRPL pattern

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

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

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

	window.Clipboard = (function(window, document, navigator) {
	var textArea,
	copy;

	function isOS() {
	return navigator.userAgent.match(/ipad\|iphone/i);
	}

	function createTextArea(text) {
	textArea = document.createElement('textArea');

	/*
	https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

	You can copy paste this code in your console on smashingmagazine.com
	in order to have cross-fade transition when change page.
	*/

	var cache = {};
	function loadPage(url) {
	if (cache[url]) {

	#clean all containers:
	docker ps -a \| sed '1 d' \| awk '{print $1}' \| xargs -L1 docker rm

	#clean all images:
	docker images -a \| sed '1 d' \| awk '{print $3}' \| xargs -L1 docker rmi -f

	// Этот скрипт должен быть размещён в <head> над всеми внешними объявлениями стилей (link[rel=stylesheet])
	function loadFont(fontName, woffUrl, woff2Url) {
	// 0. Многие неподдерживаемые браузеры должны останавливать работу тут.
	var nua = navigator.userAgent;
	var noSupport = !window.addEventListener // IE8 и ниже
	\|\| (nua.match(/(Android (2\|3\|4.0\|4.1\|4.2\|4.3))\|(Opera (Mini\|Mobi))/) && !nua.match(/Chrome/)) // Android Stock Browser до 4.4 и Opera Mini

	if (noSupport) {
	return;
	}