TimMikeladze

The usage of React components in apps has become more popular over the last two years and rightly so. React provides a very structured paradigm for building the ui over your app, managing state and handling events. Although opinionated React doesn't make any assumptions towards how you go about styling your components yet it opens up some interesting avenues of thinking about CSS.

This talk will explore the some of different ways you can handle style in React, touching upon some of the following points.

• The advantages of defining CSS as Javascript objects
• CSS Modules
• How do styled component libraries such as react-bootstrap and material-ui fit in to the mix?
• Using preprocessors such as Sass
• What to make of all this, which approach should you use when and why?

TimMikeladze

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

TimMikeladze

Spec template for user facing systems

Table of contents

• Table of contents
• Summary
• Conceptual data model
  • User

TimMikeladze

const FORM_REGISTRY_KEY = Symbol.for('yaFormRegistry');

const globalSymbols = Object.getOwnPropertySymbols(global);
const hasSymbol = globalSymbols.indexOf(FORM_REGISTRY_KEY) > -1;

if (!hasSymbol) {
  global[FORM_REGISTRY_KEY] = {
    handlers: {},
    add(name, handler) {
      this.handlers[name] = handler;

TimMikeladze

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './src/index.js',
  target: 'node',
  externals: [nodeExternals()],
  devtool: 'eval-source-map',
  output: {
    path: path.join(__dirname, '/lib'),

TimMikeladze

  app.use('/graphql', graphqlExpress(async (req) => {
     
    const userId = req.userId;
    const user = await db.findUserById(userId)

    return {
      schema,
      context: {
        user
      },

TimMikeladze

export type Country = {
  code: string;
  flag: string;
  mobileCode: string;
  name: string;
  timezone: string;
  utc: string;
};

const countries: Record<string, Country> = {

TimMikeladze

{}

TimMikeladze

[{
	"title": "Acts of Vengeance: Marvel Universe",
	"author": "",
	"image": "https://d23tvywehq0xq.cloudfront.net/i72c1e74bbcfe6d28dac782c8912b4206c.jpg"
}, {
	"title": "Atlantis Attacks",
	"author": "",
	"image": "https://d23tvywehq0xq.cloudfront.net/ykd882437984e3fa5b644d868662cef55d.jpg"
}, {
	"title": "Avatar the Last Airbender",

TimMikeladze

import { getSession } from 'next-auth/react';
import { findUserByEmailOrName, getMatches } from '../../graphql/resolvers';
import { createObjectCsvStringifier as createCsvStringifier } from 'csv-writer';
import AdmZip from 'adm-zip';
import { NextApiRequest, NextApiResponse } from 'next';
import isDowntime from '../../util/isDowntime';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,