Hasan Biyik hahuaz

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

Problem

I have two Github accounts: oanhnn (personal) and superman (for work). I want to use both accounts on same computer (without typing password everytime, when doing git push or pull).

Solution

Use ssh keys and define host aliases in ssh config file (each alias for an account).

How to?

Generate ssh key pairs for accounts and add them to GitHub accounts.

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

	import React, { useState, useEffect } from "react";

	function App() {
	const [value, setValue] = useState("");

	//Waits for a period of time then resolves
	function timeout(ms) {
	return new Promise((resolve) => setTimeout(resolve, ms));
	}

	.flex {
	display: flex;

	.align-center {
	margin: auto;
	align-self: center;
	}

	.align-left {
	margin-right: auto;

	'use strict';

	const crypto = require('crypto');

	const ENCRYPTION_KEY = process.env.ENCRYPTION_KEY; // Must be 256 bits (32 characters)
	const IV_LENGTH = 16; // For AES, this is always 16

	function encrypt(text) {
	let iv = crypto.randomBytes(IV_LENGTH);
	let cipher = crypto.createCipheriv('aes-256-cbc', Buffer.from(ENCRYPTION_KEY), iv);