Skip to content

Instantly share code, notes, and snippets.

Avatar
:electron:
This is the way...

Yoav Ganbar hamatoyogi

:electron:
This is the way...
View GitHub Profile
View yuval-js-2.js
const arbitraryDataList = [{
rootId: 'false'
},
{
root: {
field1: 'val1'
}
},
{
root: {
View next-js-simple-article.js
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();
View mobx-simple-example.js
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 = [
View styled-components-demo.js
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;
View SC-bsgen.js
@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
View WP5-nextjs.md
  1. Install @module-federation/nextjs-mf.
yarn add @module-federation/nextjs-mf
  1. Add resolutions to package.json:
 "resolutions": {
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View socket-io-jest-test.js
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 / tailwind-custom-css-color-opacity-hwlper.js
Created Jan 29, 2021
Helper functions for Tailwind CSS variable colors
View tailwind-custom-css-color-opacity-hwlper.js
// 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'],
};
/**