---
title: This project allows you to do streaming to multiple platforms like Twitch, YouTube, or Periscope at the same time!
slug: this-project-allows-you-to-do-streaming-to-multiple-platforms-like-twitch-youtube-or-periscope-at-the-same-time
description: Are you looking for a self-hosted alternative to restream.io? Try this project!
tags: ["bash", "docker", "nodejs"]
publishedAt: 2020-10-10
ogImage: null
---

Hey! 👋

I just published a GitHub project that allows you to self-host a streaming server so you can stream to multiple platforms at the same time.

At the moment, Twitch, YouTube, and Periscope are the only supported platforms. Adding a new one is easy, so I encourage you to create a PR if you need support for other platforms 😄

Here's the repo: [https://github.com/HorusGoul/rtmp-social-multicast](https://github.com/HorusGoul/rtmp-social-multicast)

Are you looking for a self-hosted alternative to restream.io? Try this project!

This project allows you to do streaming to multiple platforms like Twitch, YouTube, or Periscope at the same time!

---
title: Use React's useState and useReducer without Worrying about Immutability
slug: use-react-s-usestate-and-usereducer-without-worrying-about-immutability
description: Struggling with immutability? Finding a lot of spread operators in your codebase? This guide is for you!
tags: ["react", "tutorial", "javascript"]
publishedAt: 2020-08-03
ogImage: null
---

**TL;DR:** Check out the [https://github.com/immerjs/use-immer](https://github.com/immerjs/use-immer) library, it's awesome!

Let's start with this component which allows us to change the user's bio:

```jsx
import React, { useState } from "react";

function UserCardEditor() {
  const [state, setState] = useState({
    id: 14,
    email: "example@domain.com",
    profile: {
      name: "Horus",
      bio: "Lorem ipsum dolor sit amet..."
    }
  });

  function changeBio() {
    const newBio = prompt("New bio", state.profile.bio);

    setState(current => ({
      ...current,
      profile: {
        ...current.profile,
        bio: newBio
      }
    }));
  }

  return (
    <div>
      Name: {state.profile.name}
      <p>{state.profile.bio}</p>
      <button onClick={changeBio}>Change Bio</button>
    </div>
  );
}

export default UserCardEditor;

```

<iframe src="https://codesandbox.io/embed/use-immer-example-1-ql9br?fontsize=14&theme=dark&view=preview"
     style={{ width: "100%", height: "250px", "border": 0, borderRadius: "4px", overflow: "hidden" }}
     title="use-immer-example-1"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

**A few things to care about:**
1. We're saving all the state inside the `useState` hook. To update it we need to call `setState`.
2. The only thing we're trying to modify here is the user's bio. Notice how it's nested inside the profile object.
3. React expects you to replace the state with a new one, to do that you must create a new object and pass it to the `setState` function!

Knowing that, it's simple to understand the reason behind doing this to update the state, right?  

```jsx
...

setState(current => ({
  ...current,
  profile: {
     ...current.profile,
     bio: newBio
  }
}));

...
```

I don't blame you if you don't think it's simple, because it's not. All these lines of code can be represented with this if you're using mutation:

```jsx
setState(current => { 
  current.profile.bio = newBio;
});
```

You see? A single line instead of cloning the object using the spread operator multiple times. That's simple!

And... illegal. React expects you to return something from that function, maybe we can just return the same object?

```jsx
setState(current => { 
  current.profile.bio = newBio;
  return current;
});
```

Yay! But... the view didn't update! Why? Well... remember that React expects you to use a **NEW** object, and that's not a new object, it's still the old one, you simply mutated one of it's properties.

Then... should we just stick to the long and noisy way that uses the spread operator?

You could, but... Someone already solved this problem!

## `immer` and `use-immer`

Ever heard of `immer`? You may have heard of this library if you've been playing with Redux! If you didn't, let's take a look into how we can use Immer with React!

First, let's install it:

```bash
$ npm install immer use-immer
```

Now add this import in one of your files:

```js
import { useImmer } from 'use-immer';
```

We were editing the UserCardEditor component right? Let's replace the `useState` with `useImmer`:

```diff
- const [state, setState] = useState({
+ const [state, setState] = useImmer({
   id: 14,
   email: "example@domain.com",
   profile: {
     name: "Horus",
     bio: "Lorem ipsum dolor sit amet..."
   }
 });
```

For now, it's the same as before... But Immer actually allows us to mutate the data in order to update it! We can now replace our `setState` call with this:

```jsx
setState(draft => { 
  draft.profile.bio = newBio;
});
```

Because we're using Immer, the library will work behind the scenes to create a copy of the object and apply the same modifications that we do to the draft object. With this, we can use mutation to update our React state!

Here's the final code:

```jsx
import React, { useState } from "react";
import { useImmer } from "use-immer";

function UserCardEditor() {
  const [state, setState] = useImmer({
    id: 14,
    email: "example@domain.com",
    profile: {
      name: "Horus",
      bio: "Lorem ipsum dolor sit amet..."
    }
  });

  function changeBio() {
    const newBio = prompt("New bio", state.profile.bio);

    setState(draft => {
      draft.profile.bio = newBio;
    });
  }

  return (
    <div>
      Name: {state.profile.name}
      <p>{state.profile.bio}</p>
      <button onClick={changeBio}>Change Bio</button>
    </div>
  );
}

export default UserCardEditor;

```

<iframe src="https://codesandbox.io/embed/use-immer-example-2-h3xwe?fontsize=14&theme=dark&view=preview"
     style={{ width: "100%", height: "250px", "border": 0, borderRadius: "4px", overflow: "hidden" }}
     title="use-immer-example-2"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

The `use-immer` library also has a replacement for `useReducer`, but we won't be covering it here, I recommend you to go to their repo and check out the examples:

[https://github.com/immerjs/use-immer](https://github.com/immerjs/use-immer) 


Struggling with immutability? Finding a lot of spread operators in your codebase? This guide is for you!

Use React's useState and useReducer without Worrying about Immutability

---
title: Happy Emoji Day! The Best Accessibility Practices To Use Emojis on the Web
slug: happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web
description: A few tips that you should apply if you use emojis or icons on your website
tags: ["accessibility", "webdev", "html"]
publishedAt: 2020-07-17
ogImage: https://horus-dev-media.s3.amazonaws.com/40309aaa-5881-4122-a3e8-32f5f1471065
---

Today is the World Emoji Day and because of that I'm going to share with you two tips that will make your Emojis accessible to people using screen readers:

## 1. Replacing Text with Emojis

The first one is going to be useful when we are replacing text with emojis. As an example, we could use the red cross emoji instead of the text "Delete" in a button that triggers the deletion of a record in our app, let's see the bad approach and the good one:

**The bad approach:** This button is not accessible, it will confuse the user because of how emojis are read by screen readers.

```html
<button>❌</button>
``` 

**The good approach:** This button is now accessible, we have wrapped the Emoji in a `<span />` tag that has the `role=img` and `aria-label` attributes.

For a screen reader, the emoji will behave like an image with a description, and it will simply read it's description making this code accessible!

```html
<button>
  <span role="img" aria-label="Delete">❌</span>
</button>
``` 


## 2. Using Emojis as Decoration

This case is useful when we are using emojis as decoration, that's also when we don't want screen readers to see them, and for that we can use the `aria-hidden` attribute with the value `true`.

Here's an example with a bad and a good approach:

**The bad approach:** This button is accessible but doesn't follow the best practices as the screen reader will try to read the emoji and that will create unnecessary noise for the user. 

```html
<button>❌ Delete</button>
``` 

**The good approach:** This button will work perfectly in screen readers because we're telling it to ignore the emoji. That's it!

```html
<button>
  <span role="img" aria-hidden="true">❌</span> Delete
</button>
``` 

## It works with icons too! 🤯

It can't be all about emojis today, I'm pretty sure your app has icons, maybe you got those from FontAwesome? Material? An SVG you created?

Are they accessible? Because the tips we just saw also apply for icons!

So... even if you don't use emojis, **what are you waiting for? Go and make your apps more accessible!**

A few tips that you should apply if you use emojis or icons on your website

Horus Lugo

Where to find me

Latest articles

This project allows you to do streaming to multiple platforms like Twitch, YouTube, or Periscope at the same time!

Use React's useState and useReducer without Worrying about Immutability

Happy Emoji Day! The Best Accessibility Practices To Use Emojis on the Web

Showcase

Atom - Periodic Table & Tests

Kiddle