Sergei Badulin sbadulin

Deploy your site with git

This gist assumes:

you have an online remote repository (github / bitbucket etc.)
you have a local git repo
and a cloud server (Rackspace cloud / Amazon EC2 etc)
- your (PHP) scripts are served from /var/www/html/
- your webpages are executed by Apache
the Apache user is named www-data (may be apache on other systems)

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Combining two git repositories

Use case: You have repository A with remote location rA, and repository B (which may or may not have remote location rB). You want to do one of two things:

preserve all commits of both repositories, but replace everything from A with the contents of B, and use rA as your remote location
actually combine the two repositories, as if they are two branches that you want to merge, using rA as the remote location

NB: Check out git subtree/git submodule and this Stack Overflow question before going through the steps below. This gist is just a record of how I solved this problem on my own one day.

Before starting, make sure your local and remote repositories are up-to-date with all changes you need. The following steps use the general idea of changing the remote origin and renaming the local master branch of one of the repos in order to combine the two master branches.

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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

Download videos from egghead

Install the React Developer Tools Chrome Extension.
Go to the egghead website, i.e. Getting Started with Redux
Click View -> Developer -> Javascript Console, then the React tab, then the <NextUpLessonList ...> tag.
Click back to the Console tab, then run:

JavaScript courses as on March 2016

Short link: www.bit.ly/js-courses-list (NB: if you click it from this document recursion may occur :) )

Russian:

name or author	url	duration, week/month	price, rub
Hexlet	https://ru.hexlet.io/professions/frontend
Hexlet	https://ru.hexlet.io/professions/frontend	8m	$40/m

	// Module dependencies

	var express = require('express'),
	mysql = require('mysql');

	// Application initialization

	var connection = mysql.createConnection({
	host : 'localhost',
	user : 'root',

	chore: add Oyster build script
	docs: explain hat wobble
	feat: add beta sequence
	fix: remove broken confirmation message
	refactor: share logic between 4d3d3d3 and flarhgunnstow
	style: convert tabs to spaces
	test: ensure Tayne retains clothing

	Guides:

	http://pragtob.wordpress.com/2014/01/13/how-to-get-started-with-contributing-to-open-source/
	http://movethewebforward.org/
	http://www.smashingmagazine.com/2011/11/30/the-smashing-guide-to-moving-the-web-forward-community/
	http://nshipster.com/stewardship/
	https://speakerdeck.com/brycekahle/helping-open-source-software

	for Designers: