Jordan Schroter jschr

Recommended Books

Recommendations from others are noted in (parentheses). The rest are my personal recommendations.

	export default {
	entry: {
	// entry file for the app bundle and the sever-side
	// render function
	main: 'index.ts'
	},

	output: {
	filename: `[name].js`,
	path: 'build',

	/app # contains the code for the website generator and our react components (written in Typescript)
	/assets # image assets
	/components # React components
	App.tsx # the top-level React component for our app
	Template.tsx # defines the html template for server-side rendering (injects the pre-rendered App html, css and js)
	webpack.config.ts # our webpack config that is used for dev and in our handler
	getProps.tsx # an async function for retrieving our app props (ie. fetches from Github, Twitter and Medium)
	mount.tsx # function that mounts our app to the DOM
	ssr.tsx # server-side rendering function, returns the initial html of our website
	index.ts # our webpack entry file, mounts the app when in browser context and exports the ssr function for the static website generator

	container_commands:
	migrate_db:
	command: >
	docker run -e "DB_HOST=${DB_HOST}" -e "DB_PORT=${DB_PORT}" -e "DB_NAME=${DB_NAME}" -e "DB_USER=${DB_USER}" -e "DB_PASSWORD=${DB_PASSWORD}" aws_beanstalk/staging-app:latest npm run db:migration:run
	leader_only: true

	import fontLatoRegular from './fonts/Lato-Regular.woff2'
	import fontLatoBold from './fonts/Lato-Bold.woff2'

	export const baseFontSize = '25px'
	export const fontFamily = { fontFamily: 'Lato', src: `url(${ fontLatoRegular }) format('woff2')` }
	export const fontFamilyBold = { fontFamily: 'Lato-Bold', src: `url(${ fontLatoBold }) format('woff2')` }
	export const textColor = '#fff'
	export const bgColor = '#fff'

	'use strict'

	require('dotenv').load()

	const Promise = require('bluebird')
	const AppCompiler = require('@spin-io/sdk-app-compiler')
	const tar = require('tar-stream')
	const gzip = require('zlib').Gzip
	const request = require('request')

	export default function ({ username }) {
	return `<html><body>hello ${username}</html></body>`
	}


	There are a few layers involved in making a realtime app. Still learning the realtime architecture myself but internally, your infrastructure will need to be able to support reacting to updates instantly. That's pretty difficult to do when you have multiple servers and clients making updates while also asking to be notified of those changes in realtime.

	RethinkDB handles that at the db level. Meaning your web servers can directly ask the database when an update has occurred. Most other databases don't have a way for servers to open a communication channel that allows them to be notified of database changes as they occur. In relational databases you could probably accomplish this with table triggers but I'm not too familiar with using them like that. RethinkDB makes it much easier, and has a cool query language. However in a lot of cases in realtime apps your clients will disconnect and reconnect and will require knowledge of the change log of updates since the last time it was connected. To do that you’d n

	export default {
	getItem(key, cb) {
	chrome.storage.local.get(null, (data) => {
	if (chrome.runtime.lastError) return cb(chrome.runtime.lastError)

	// data will be null if local storage is empty
	data = data \|\| {}

	cb(null, data[key])
	})

	<link rel="import" href="../chart-js/chart-js.html">
	<link rel="import" href="../paper-input/paper-input.html">
	<link rel="import" href="../core-icons/core-icons.html">
	<link rel="import" href="../paper-icon-button/paper-icon-button.html">
	<link rel="import" href="../topeka-elements/theme.html">
	<link rel="import" href="../topeka-elements/topeka-resources.html">
	<link rel="import" href="../topeka-elements/topeka-quiz-view.html">
	<link rel="import" href="../topeka-elements/topeka-leaderboard.html">

	<polymer-element name="my-element">