hamatoyogi

Setup

• Go through all system preferences
• Use DotFiles?
• The definitive guide to setting up a new mac for development

Install Utilities

hamatoyogi

const arbitraryDataList = [{
		rootId: 'false'
	},
	{
		root: {
			field1: 'val1'
		}
	},
	{
		root: {

hamatoyogi

export default class Article extends Component {


  // notice that it's an async function
  static async getInitialProps () {
    
  // fetch data on the server and parse it to JSON
  const res = await
  fetch('http://localhost:3000/wp-json/wp/v2/articles/1316999');
  const json = await res.json();

hamatoyogi

import React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

@observer
export default class extends React.Component {

  constructor() {
    super();
    this.randomPhrases = [

hamatoyogi

import styled from 'styled-components';

// some overly styled button

const MyButton = styled.button`
     background: #3d94f6;
     background-image: linear-gradient(to bottom, #3d94f6, #1e62d0);
     border-radius: 20px;
     color: #ffffff;
     font-family: Open Sans;

hamatoyogi

@observer
export default class extends React.Component {
  constructor() { ... } // for brevity

  // define the data we want to "watch"
  @observable chosenPhrase = this.randomPhrases[0];
  @observable counter = 0;

  // define an "action" -> we are saying what that we want to change a peice of "watched" data
  @action

hamatoyogi

1. Install @module-federation/nextjs-mf.

yarn add @module-federation/nextjs-mf

2. Add resolutions to package.json:

  "resolutions": {

hamatoyogi

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

hamatoyogi

const io = require('socket.io-client');
const http = require('http');
const ioBack = require('socket.io');

let socket;
let httpServer;
let httpServerAddr;
let ioServer;

/**

hamatoyogi

// based on https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

// this object holds the TW variable name we will have in our theme. The value are a pair for [CSSVariable, value]
// we use only the RBG vaules without the actual "rgb(0, 0, 0)" decalration for Tailwind to use in it's functions.
const customColors = {
  'demo': ['var(--demo)', '64, 180, 229'],
  'another-tw-name': ['var(--another-tw-name)', '102, 195, 234'],
};

/**