jimthedev

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
/**
 * Use case: audio player with dynamic source in react
 *
 * Usage:
 *   <AudioPlayerDOM src={this.state.currentFile}/>
 *
 * Todo: make a better api, actually pass props through
 * Todo: use children instead of passing

jimthedev

Neopolitan Pizza at Home (using a pan)

The general idea behind this recipe is to:

1. Make a delicious dough, using some sugar to help brown in home oven
2. Rest / rise the dough at 66-72F
3. Portion out the dough (freeze some of them if desired)
4. Fashion a pizza from a dough portion
5. Put ingredients on pizza
6. Put a little drizzle of evoo on the top

jimthedev

import { useCustomElement } from "./useCustomElement";

// My regular react app that is using a web component /
// custom element inside it.
// Notice that we have some handlers, some state, etc.
function Component() {
  const [txt, setTxt] = React.useState("init")
  function handleClick() {
    setTxt("clicked")
  }

jimthedev

const angular = require('angular');

function OnKeyComboDirective () {
    return function (scope, element, attributes) {

        // We're using a custom event listener on keyup
        const comboListener = e => {
            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.which == 65) {
                setTimeout(function () {
                    scope.$eval(attributes.onKeycombo);

jimthedev

// Make sure you have an html element with an id of root and thewn you can run this. r is react, d is react-dom

Promise.all([
  import(
    "https://cdn.jsdelivr.net/npm/@esm-bundle/react-dom/esm/react-dom.resolved.production.min.js"
  ),
  import(
    "https://cdn.jsdelivr.net/npm/@esm-bundle/react/esm/react.production.min.js"
  )
]).then(([{ default: d }, { default: r }]) =>

jimthedev

const context = React.createContext()
 
export const StoreProvider = ({ children, initialState = {} }) => {
  const [store, setStore] = React.useState(() => initialState)
 
  const contextValue = React.useMemo(() => [store, setStore], [store])
 
  return (
    <context.Provider value={contextValue}>
      {children}

jimthedev

They are reducers. Unlike other places, don't return existing state. Return undefined, unless something actually changed. Any action can be handled by all other plugins. No way for one plugin to block another.

jimthedev

const reducer = (state, action) => {
  if (state.status === 'idle') {
    if (action.type === 'fetch') {
      return {
        status: 'fetching'
      }
    }
  }
  if (state.status === 'fetching') {
    if (action.type === 'resolve') {

jimthedev

Call(Function("increment"), "topics", "254119747652682260", [
  "data",
  "clickCount"
]);


/*

each document in the topics collection looks like this: 

jimthedev

NOTE: THESE ARE INCOMPLETE AND THE STEPS LISTED HERE WILL ABSOLUTELY LEAVE YOU VULNERABLE TO ATTACK. THIS IS WORK IN PROGRESS AS I WORK ON HARDENING THE SERVER

Overview

The following are steps to help you configure and run your own Heroku-like server which can support multiple Horizon.io / RethinkDB applications including support for Lets Encrypt (SSL) on Digital Ocean.

Limitations

Recommend keeping your domain scheme to subdomain.domain.com and no deeper. If you try to go further then it makes Let's Encrypt a little trickier.