DEV Community: Phillip Malboeuf

Video Broadcasting with OBS for Remote Developers

Phillip Malboeuf — Thu, 30 May 2019 16:27:03 +0000

I absolutely love Twitch! Gaming streams are what I turn to after a long day of code. Day9, Savjz, Grubby, and plenty of others, are masters of the art. Gotta love'em!

But what I'd like to look into today is their broadcasting setup and how we, as freelancers and remote workers, can gain something from the use of it. In fact, take a look at a few streams here: twitch.tv/directory/game/Programming, that'll give you an idea of where I'm going with this.

Open Broadcaster Software

So we've all had a screen-share call before, you pick a window, a browser page or a phone emulator, and that replaces your camera feed with whatever is happening on that screen. With OBS, you can share a window that has so much more than that, even like, your face 🤯!

Setting the Scenes

An OBS scene starts black. You could follow their overview instructions, but for our purposes we may start right away by adding the few sources we need to build our first scene. First off, the camera! In the Sources box, click the + button and select Video Capture Device to create a new one. You can now put yourself anywhere on the feed! Next comes our code editor, from the + button again, select Window Capture and find your editor's window in the dropdown. And again, you can put your code anywhere! By the same couple of button clicks, you can add: a browser window, a terminal window, an emulator window, a design tool's window, anything really. Try building multiple scenes, transitioning between them mid-stream is entirely seamless. I have one that is my code editor full-screen, one that is half my code and half a browser window, and another that is mostly my face. Take a look back at the video up there.

Chroma Keying

Well, you guessed it, you'll need a green screen, mine is the Elgato Green Screen by Corsair.

Do you have one setup yet? Okay now, if you select and right-click your camera source, you'll find the Filters at the bottom of the toolbar. Next, in the Effect Filters box, add a Chroma Key. You'll notice that there's quite a few sliders to play with here. I'm not going to pretend to know anything about green screen lighting setup, but after a few minutes of tweaking the Similarity and Smoothness settings I got something that worked well for me. My setup has a 433 value for similarity, 66 for smoothness and 133 for color spill reduction.

Sharing your Broadcast Window

Great, unto the final step: getting onto a screen sharing call. In OBS, right-click anywhere in the video preview box and enable the Windowed Project (Preview). You'll now have a stand-alone window you can select for your screen-sharing video conferencing. As a side note, I found Discord to have the better screen-sharing capabilities. My client sent me this screenshot 🤪.

Other Crazy Things you Can Do

You could have TWO remote developers show up on the same broadcast, one developer dials in via a video call to the broadcaster and the broadcaster inserts the caller's feed as a source onto the scene.
OBS can record your stream, perhaps you'd want to keep records of pair-programming sessions or you'd like to film a product demo. All of that can be saved by the click of a button.
If you have a recording of developer commenting on their work, you can broadcast yourself ON-TOP of that recording. Developer on developer on developer... to infinity!

Try it out and let me know how your clients react when they see you on your next OBS powered call!

Subtle Developer-Client Communication Mistakes

Phillip Malboeuf — Mon, 20 May 2019 14:11:23 +0000

You've made these, I've made these, and we will continue to make these on occasion, now let's be conscious of them.

Have you ever asked yourself why a relationship with a client or colleague might have degraded over time? Why you feel such in sync with one client but not with another? Why a client or colleague might not have the same trust in you that they once did? 🤔

It's likely that nobody would be able to point out to you a specific error you might've made. My theory is that a series of small missteps eventually tips the scale, your client ends up frustrated or hurt, and they start looking elsewhere for a new developer.

But now, if we bring our attention to the details of our day-to-day communication or interactions, we may get incrementally more conscious of these subtle mistakes of ours, and slowly but surely, you'll see your relationships improve.

Hiding errors

Without a doubt, you should self-report errors you've made, the small ones just as much as the biggies. Do let your client know the technical details of an error (to a reasonable extent) and the impact it might've had on their business. It shows that you're aware of the quality of your work and that you're keeping careful watch over your client's business.

If you've made a mistake that has caused financial damage, immediately apologize and offer to reimburse (in cash or hours) at least part of the lost amount. And you know, you might be able to mark that off as a loss in your tax report, so it's okay 🤪.

Asking of someone without explanation

Surely, you've received one of those "HEY, do this for me, just do it!" emails before, how do they make you feel? To demand the completion of a task without context or without a visible goal is downright abusive. Always give a bit more context than is necessary when giving a task to someone, and if this has been sent to you, (even though you can infer things yourself) gently ask for more details. The two of you, you and your client, will start building a better feedback loop this way.

Pulling past mistakes forward

This one might relate more to a colleague-colleague relationship, but it can apply to any relationship really. So someone has made a mistake, don't bring it up again. Assume they've taken the necessary steps to correct it and prevent it from happening again. Bringing up old anxieties is cruel, only take into account the absolute current state of things.

Not asking for help

You will need to ask for help. I know that asking questions might make you feel like an imposter. But if it bothers you to ask, you need to realize that the people you work with most likely have a massive knowledge pool that doesn't overlap with yours. Just as much as a client or colleague needs you, you need them to get your work done. Asking for help shows that you're interested and invested.

Never questioning things

You know, a client will not resent you if you question or critique something about their business. Well most likely, you're questioning something they're already thinking about (remember your client has spent more time on their business than you have), but it shows that you're not just there to do your work and go home: you're on board and you're looking out for them.

However, there are wrong ways to go about this. Don't blame individuals, don't assume they haven't already considered solutions, and don't do it in public.

Opening with pointed questions

A conversation with a client or colleague about their work or business needs to have a gradient, a gradient that begins with general all-encompassing questions and then slowly dives down to more minute or pointed topics. Tackling a conversation that way would let you understand the "why"s of certain implementation details and your client will not feel like they're tortured under interrogation.

Overlapping conversations

This is why Slack is so good for the work environment, it lets you compartmentalize conversations. Having multiple threads for various topics like, feature-development, bugs, invoices, or lunch 🍕, keeps your feedback loops moving. Everybody would wince from an interruption about invoice payments or a server failure in a thread that is meant for feature-development.

Speaking to someone who doesn't have your attention

Ask before firing up a conversation with your client, especially one with a difficult or sensitive topic. Let them know you need their time, do provide context for your conversation, but wait until they say they're ready before you dive in. I believe this applies to emails as well, you may write to your client "Hi, like we discussed last week, I'd like to send you the details of my proposed invoicing schedule, is that okay? Thank you, from your developer". If you think that might slow down conversations, just try it and let me know if I'm wrong. (Hint: I'm not 🥳)

Overtly hating what another loves

Tastes can't be judged. All you need to do is to not rub your preferences in someone's face. Overt hate towards something someone associates themselves with can deeply sadden a person, and it will only entrench both of your positions. Ask them what they like about it, the answers will surprise you.

Being unaware of love or hate

This one is tricky, if you ask someone how they felt clicking through a website you made, or after a demo you presented, their answers will never be the ones you thought they'd be. So ask more often!

How about you? Do you have any subtle mistakes you'd like to share with the group?

Simple Steps to a Typescript Class Decorator

Phillip Malboeuf — Wed, 15 Aug 2018 14:01:20 +0000

I've been struggling with the implementation of a class decorator for my React component classes. I needed it to be able to consume a Context within the lifecycle methods of my components. If you're unsure as to how the React 16.3 Context API works, I've compiled a list of the articles I've found to be the most accessible on the subject. And if you're familiar with the API, please read on to explore the different pieces of a Typescript class decorator.

A list of articles on the React Context API

An approachable article with a clear use case (and snacks!):

Learn the React Context API with a Practical Example You Can Bring to Your Apps

Shawn Reisner ・ Jun 14 '18

#react #webdev #materialdesign
A slightly deeper dive: Introducing the React Context API by Leigh Halliday
And of course, the well written: Context on the official React documentation

Now, a Typescript Class Decorator

A class decorator is used to modify the constructor function of a class. In other words you can conveniently mess with the instantiation phase of a class instance. So a class decorator in Typescript (that does nothing) may have this structure:

export function decorator<C>(ClassDefinition: C): C {
  return ClassDefinition
}

Where C is the generic type of the ClassDefinition. Flip through the Generics docs if you haven't encountered them before: Generics on the official React documentation

With that implemented, you could use your decorator on classes that need to be modified with an @:

import { decorator } from './decorator'

@decorator
export class Cat {}

Next, a React Component Class Decorator

So our goal is to modify a React Component class to make it consume a context, right. First, let's rename a few things and add the React.ComponentClass type definition.

import * as React from 'react'

export function withContext<C extends React.ComponentClass>(Component: C): C {
  return Component
}

Now Typescript recognizes C as a ComponentClass.
You: but DUDE where's our Consumer? Me: we're getting there! Let's instantiate our context first.

Initializing a Context

Going forward, we'll use a "pet store" as our example use case with a "cart" and the functionality to add cats to the cart. So, our context will have an array of cats called cart and a function called addPetToCart. Creating a context in Typescript requires you to provide default values including their type definitions. Here then is our context initialization:

import * as React from 'react'

export const StoreContext = React.createContext({
  cart: [] as {catId: number}[],
  addPetToCart: (catId: number)=> function(): void {}
})

Writing our Context Decorator

Okay, we've finally been writing some React. And the React docs are telling us that the best way to consume a context is to implement an HOC and pass it to the child component in its props. So following our StoreContext initialization we may write a StoreContext.Consumer stateless component as our decorator, as so:

import * as React from 'react'

export const StoreContext = React.createContext({
  cart: [] as {catId: number}[],
  addPetToCart: (catId: number)=> function(): void {}
})

export function withStoreContext<C extends React.ComponentClass>(Component: C): C {
  return (props => <StoreContext.Consumer>
      {context => <Component {...props} context={context} />}
    </StoreContext.Consumer>) as any as C
}

Reading this, you might be yelling at me: what is this as any as C garbage!? The issue is that yes a class decorator is supposed to return a class definition, and Typescript is not ok with us trying to return a function instead. But React on the other hand accepts both ComponentClasss and StatelessComponents interchangeably. Therefor I'm satisfied with force casting this SFC function to our C class definition.

Writing our Provider Component Class

Let's set aside our decorator for now and let's move on to write our StoreContext.Provider component. Here is where we may implement the functionalities of our pet store: put the cart in a component's state and define an addPetToCart function. As so:

import * as React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import { StoreContext } from './context'
import { Pets } from './pets'

interface StoreProps {}
interface StoreState {
  cart: {catId: number}[]
}

export class Store extends React.Component<StoreProps, StoreState> {
  constructor(props: StoreProps) {
    super(props)
    this.state = {
      cart: []
    }
  }

  public addPetToCart(catId: number): void {
    this.setState({ cart: [...this.state.cart, { catId }] })
  }

  public render() {
    return <StoreContext.Provider value={{
        cart: this.state.cart,
        addPetToCart: this.addPetToCart.bind(this)
      }}>
      <BrowserRouter>
        <Switch>
          <Route path='/' component={Homepage} />
        </Switch>
      </BrowserRouter>
    </StoreContext.Provider>
  }
}

You'll notice the existence of a BrowserRouter. I've simply found that having components deep in Routes is a common use case for the application of the Context API. We're getting somewhere ladies and gentlemen!

Writing our Consumer Component Classes

For our final lap, we'll have a Homepage component that renders in our cats collection and a Cart component. Since the Cat component needs access to the addPetToCart function from the store context and the Cart will read the cart array also from the store context, we give them both the withStoreContext decorator:

import * as React from 'react'
import { RouteComponentProps } from 'react-router-dom'

import { withStoreContext } from './context'


interface HomepageProps extends RouteComponentProps<any> {}
interface HomepageState {
  cats: CatProps[]
}

export class Pets extends React.Component<HomepageProps, HomepageState> {
  constructor(props: HomepageProps) {
    super(props)
    this.state = {
      cats: [{id: 1, name: 'Garfield'}, {id: 2, name: 'Mufasa'}]
    }
  }

  public render() {
    return <>
      {this.state.cats.map(cat => <Cat key={cat.id} {...cat} />)}
      <Cart />
    </>
  }
}


interface StoreContextProps {
  context?: {
    cart: {catId: number}[],
    addPetToCart: (catId: number)=> void
  }
}

interface CatProps extends StoreContextProps {
  id: number,
  name: string
}
interface CatState {}

@withStoreContext
export class Cat extends React.Component<CatProps, CatState> {
  constructor(props: CatProps) {
    super(props)
    this.state = {}
  }

  public render() {
    return <div>
      <strong>{this.props.name}</strong>
      <button onClick={()=> this.props.context.addPetToCart(this.props.id)}>Add to Cart</button>
    </div>
  }
}


interface CartProps extends StoreContextProps {}
interface CartState {}

@withStoreContext
export class Cart extends React.Component<CartProps, CartState> {
  constructor(props: CartProps) {
    super(props)
    this.state = {}
  }

  public render() {
    return <ol>
      {this.props.context.cart.map((item, index)=> <li key={index}>{item.catId}</li>)}
    </ol>
  }
}

You'll find that it's useful to define a StoreContextProps interface for our consumer components. This next step will be our last!

Let's Render into the DOM

All that is left is to ReactDOM.render into a document element:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import { Store } from './store'

ReactDOM.render(<Store />, document.getElementById('store'))

Questions & Comments

Thanks for reading this and don't hesitate if you have any questions or comments! And here's the complete repo running on Parcel:

phillipmalboeuf / simple-steps-to-a-typescript-class-decorator

Simple Steps to a Typescript Class Decorator

I've been struggling with the implementation of a class decorator for my React component classes. I needed it to be able to consume a Context within the lifecycle methods of my component. If you're unsure as to how the React 16.3 Context API works, I've compiled a list of the articles I've found to be the most accessible on the subject. And if you're familiar with the API, please read on to explore the different pieces of a Typescript class decorator.

Read the full article on dev.to!

View on GitHub

DEV Community: Phillip Malboeuf

Video Broadcasting with OBS for Remote Developers

Open Broadcaster Software

Setting the Scenes

Chroma Keying

Sharing your Broadcast Window

Other Crazy Things you Can Do

Subtle Developer-Client Communication Mistakes

Hiding errors

Asking of someone without explanation

Pulling past mistakes forward

Not asking for help

Never questioning things

Opening with pointed questions

Overlapping conversations

Speaking to someone who doesn't have your attention

Overtly hating what another loves

Being unaware of love or hate

Simple Steps to a Typescript Class Decorator

A list of articles on the React Context API

Learn the React Context API with a Practical Example You Can Bring to Your Apps

Shawn Reisner ・ Jun 14 '18

Now, a Typescript Class Decorator

Next, a React Component Class Decorator

Initializing a Context

Writing our Context Decorator

Writing our Provider Component Class

Writing our Consumer Component Classes

Let's Render into the DOM

Questions & Comments

phillipmalboeuf / simple-steps-to-a-typescript-class-decorator

Simple Steps to a Typescript Class Decorator