Skip to content

Instantly share code, notes, and snippets.

View hamatoyogi's full-sized avatar

Yoav Ganbar hamatoyogi

View GitHub Profile
@hamatoyogi
hamatoyogi / tailwind-custom-css-color-opacity-hwlper.js
Created January 29, 2021 21:32
Helper functions for Tailwind CSS variable colors
// 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'],
};
/**
const io = require('socket.io-client');
const http = require('http');
const ioBack = require('socket.io');
let socket;
let httpServer;
let httpServerAddr;
let ioServer;
/**
@hamatoyogi
hamatoyogi / machine.js
Created November 22, 2020 14:00
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
  1. Install @module-federation/nextjs-mf.
yarn add @module-federation/nextjs-mf
  1. Add resolutions to package.json:
  "resolutions": {
@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
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;
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 = [
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();
const arbitraryDataList = [{
rootId: 'false'
},
{
root: {
field1: 'val1'
}
},
{
root: {
@hamatoyogi
hamatoyogi / NewMacGuidelines.md
Last active August 31, 2020 12:02 — forked from alexilyaev/NewMacGuidelines.md
New Mac Guidelines