jschr

<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">

jschr

Recommended Books

A list of useful books to improve your skills

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

Programming

Building your core

• The Pragmatic Programmer - Hunt & Thomas

jschr

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])
    })

jschr

'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')

jschr

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'

jschr

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

jschr

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

jschr

/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

jschr

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

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

jschr

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