---
title: "Use React Native Web's Pressable with Remix's Link magic" 
slug: remix-react-native-pressable-release-v1
description: You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!
tags: [react, remix, react-native]
publishedAt: 2022-02-19
ogImage: null
---

I just released [`remix-react-native-pressable`](https://github.com/HorusGoul/remix-react-native-pressable), a small package that allows you to use React Native Web's `<Pressable>` component with all of Remix's `<Link>` properties and magic.

Essentially, it implements the same logic Remix uses in their `<Link>`, but adapted to React Native Web's `<Pressable>` props.

Here's a little example using the `to` property:

```tsx
import { View, Text } from 'react-native';
import { RemixPressable } from 'remix-react-native-pressable';

export default function MyRemixRoute() {
  return (
    <View>
      <RemixPressable to="/about">
        <Text>Link to /about</Text>
      </RemixPressable>
    </View>
  );
}
```

Just like that, you get a link rendered using `<RemixPressable>`. The main benefit of this is that you can now use this component like any other React Native Web's `<Pressable>` you have in your app.

Here's another example (extracted from my website's rewrite!), in which you can see another way of using this library. I have a design system with a Button that uses `<Pressable>` in its implementation, but the design system is platform agnostic, so it doesn't know about Remix. For cases like this, we can use the `<RemixPressableChildren>` component to get the props we need to pass to the platform-agnostic `<Button>`. 

```tsx
import { RemixPressableChildren } from 'remix-react-native-pressable';
import { Button } from 'ui/lib/Button';

...

export default function Index() {
  ...

  return (
    <>
          <RemixPressableChildren to="/blog">
            {(pressableProps) => (
              <Button {...pressableProps}>More publications</Button>
            )}
          </RemixPressableChildren>
    </>
  );
} 
```

Now that you've seen how `<RemixPressable>` works, here are both the repository and its npm page:

- [github.com/HorusGoul/remix-react-native-pressable](https://github.com/HorusGoul/remix-react-native-pressable)
- [npmjs.com/package/remix-react-native-pressable](https://www.npmjs.com/package/remix-react-native-pressable)

Also, I recently published an article about [How to Setup React Native Web in a Remix project](https://horus.dev/blog/react-native-web-remix-setup). If you're interested in using React Native with Remix, that's probably the best resource to get started!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



You can now use remix-react-native-pressable and forget about the Link component if you're using React Native Web with Remix!

Use React Native Web's Pressable with Remix's Link magic

---
title: How to Setup React Native Web in a Remix project 
slug: react-native-web-remix-setup
description: Easy way to use React Native components in your Remix projects and reuse code
tags: [react, remix, react-native]
publishedAt: 2022-02-07
ogImage: https://horus-dev-media.s3.amazonaws.com/1bc3b4fc-9626-44e2-a7b6-b7541f77daa1
---

I assume you're here because you want to know how to set up React Native Web in your Remix project. Well, you're lucky, I had to do this a few days ago, and I haven't run into trouble with it yet, so here's a tutorial about it:

**Let's get started!**

_The result of this tutorial is also available as a GitHub repository that you can just clone to get started with your project: [https://github.com/HorusGoul/remix-react-native-web-starter](https://github.com/HorusGoul/remix-react-native-web-starter)_

## 1. Installing the react-native-web package

The first thing you have to do is install the `react-native-web` package. However, since we can't customize our build process because Remix doesn't allow it yet, we'll need to use a package manager that will enable you to install a package with an alias. In this case, I decided to use `pnpm`.

```bash
$ pnpm add react-native@npm:react-native-web
```

Then, the types if you're using TypeScript. Note that not all types will be correct for a React Native Web project, but that's out of the scope of this tutorial.

```bash
$ pnpm add --save-dev @types/react-native
```

## 2. React Native Web Styles

React Native Web has its own way of handling styles, and for SSR and hydration, they give you a stylesheet element that you have to place in the `<head>` of your page.

We'll pass that stylesheet element to our Root using the Context API. Let's do that by creating a `rn-styles.tsx` file inside the `app` folder. Here's the content for that file:

```tsx
import { createContext, useContext } from "react";

export const ReactNativeStylesContext =
  createContext<React.ReactElement<unknown> | null>(null);

export function useReactNativeStyles() {
  return useContext(ReactNativeStylesContext) ?? ReplaceWithStylesSSRTag;
}

export const ReplaceWithStylesSSRTag = <meta name="REPLACE_WITH_STYLES" />;
```

Now, let's move to the `app/root.tsx` file. We'll now use the `useReactNativeStyles()` hook and put the `stylesElement` inside the `<head>`. Also, we'll wrap the `<Outlet />` component with a View with a few properties to match the React Native Web behavior. 

```tsx
...

import { useReactNativeStyles } from "./rn-styles";
import { View, StyleSheet } from "react-native";

...

export default function App() {
  const stylesElement = useReactNativeStyles();

  return (
    <html lang="en">
      <head>
        ...

        {stylesElement}
      </head>
      <body>
        ...

        <View pointerEvents="box-none" style={styles.appContainer}>
          <Outlet />
        </View>

        ...
      </body>
    </html>
  );
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
});
```

We also need to add a global stylesheet to Remix that contains the following. 

```css
html, body {
  height: 100%;
}

body {
  display: flex;
}
```

_Take a look at the [Remix Docs about Stylesheets](https://remix.run/docs/en/v1/guides/styling#regular-stylesheets) if you don't know how to add CSS in a Remix project._

## 3. SSR and Hydration

Assuming you haven't modified the `app/entry.client.tsx` file, just replace its contents with the following:

```tsx
import { RemixBrowser } from "@remix-run/react"";
import { hydrateRoot } from "react-dom/client";
import { AppRegistry } from "react-native";
import { ReactNativeStylesContext } from "./rn-styles";

const App = () => <RemixBrowser />;

AppRegistry.registerComponent("App", () => App);

// @ts-ignore
const { getStyleElement } = AppRegistry.getApplication("App");

hydrateRoot(
  document,
  <ReactNativeStylesContext.Provider value={getStyleElement()}>
    <App />
  </ReactNativeStylesContext.Provider>
);
```

What's going on with that code? We're using React Native Web `AppRegistry` to get the initial styles for the app and avoid hydration from failing.

Now, let's move to the `app/entry.server.tsx` file, where we'll do a similar thing. Take a look at the code:

```tsx
import { renderToString, renderToStaticMarkup } from "react-dom/server";
import { RemixServer } from "@remix-run/react"";
import type { EntryContext } from "@remix-run/node";
import { AppRegistry } from "react-native";
import { ReplaceWithStylesSSRTag } from "./rn-styles";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const App = () => <RemixServer context={remixContext} url={request.url} />;

  AppRegistry.registerComponent("App", () => App);

  let markup = renderToString(<App />);

  // @ts-ignore
  const { getStyleElement } = AppRegistry.getApplication("App", {});
  const stylesMarkup = renderToStaticMarkup(getStyleElement());

  markup = markup.replace(
    renderToStaticMarkup(ReplaceWithStylesSSRTag),
    stylesMarkup
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}
```

This time, we're not passing the app styles using the ReactNativeStylesContext, but injecting them inside the markup by replacing a custom meta tag.

## 4. Using React Native Web components

One last thing you could do if you're doing this in a new project is to go ahead and replace your `app/routes/index.tsx` with the following:

```tsx
import { Text, View } from "react-native";

export default function Index() {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  );
}
```

Then do `pnpm dev` and open your project in the browser to see your first Remix route rendered with React Native Web components!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)



Easy way to use React Native components in your Remix projects and reuse code

How to Setup React Native Web in a Remix project

---
title: 7 Resources to Improve Your HTML and Accessibility Skills
slug: 7-resources-to-become-better-html-accessibility
description: Learning these resources will make you a better developer by teaching you how to build inclusive websites and web apps.
tags: [webdev, HTML, a11y, codenewbie]
publishedAt: 2022-02-01
ogImage: https://horus-dev-media.s3.amazonaws.com/f7d79b0e-fadd-4a73-a8b7-d9fa0b41bcd4
---

Some devs say HTML is easy, but it's not. HTML is complex, and the lack of time put into it makes the web harder to use for many people.

Do your users a favor and learn HTML.

Here is a list with 7 resources about HTML and Accessibility 👇

## 1. HTMHell

The [htmhell.dev](https://htmhell.dev) website has a "Hell" category with many bad practices with details and tips on how to fix them. These are all taken from real websites. 

It also has a "Heaven" section with tips.

Follow them on Twitter! [@htm_hell](https://twitter.com/htm_hell)

## 2. [inclusive-components.design](https://inclusive-components.design)

Quoting their website: "A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust, and accessible version of it."

## 3. Learn Forms! by [@ChromiumDev](https://twitter.com/ChromiumDev)

This is an entire course dedicated to HTML form fields. It covers the basics, testing, design, accessibility, localization, security, and more advanced stuff.

It also has mini quizzes at the end of each section!

[https://web.dev/learn/forms/](https://web.dev/learn/forms/)

## 4. Accessible Tables Tutorial

The [@w3cdev](https://twitter.com/w3cdev) has multiple tutorials about Web Accessibility, I went through this one the other day, and I learned a lot 🤯 

Check it out: [https://www.w3.org/WAI/tutorials/tables/](https://www.w3.org/WAI/tutorials/tables/)

They also have Page Structure, Menus, Images, Forms, and Carousels tutorials.

## 5. The Best Accessibility Practices To Use Emojis on the Web

This article talks about how to use emojis on your websites and apps. The best part is that you can also apply the same practices for SVG and Font Icons.

P.S. I wrote this one 😛 

[https://horus.dev/blog/happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web](https://horus.dev/blog/happy-emoji-day-the-best-accessibility-practices-to-use-emojis-on-the-web)

## 6. Responsive Images

This article by [@MozDevNet](https://twitter.com/mozdevnet) teaches about the concept of responsive images. If you go through it, you'll learn to use features like `srcset` and the `<picture>` element to implement responsive images on your websites and apps.

[https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

## 7. axe by [@dequesystems](https://twitter.com/dequesystems)

axe is tool to run accessibility checks against your website and components. 

You can use it as a browser extension or include `jest-axe` or `axe-core` in your automated testing pipeline.

[https://www.deque.com/axe/](https://www.deque.com/axe/)

---

And that's it! HTML is a vital part of the web, and if you don't do it correctly, your websites may be a nightmare to use for some users.

If you learn HTML, you'll make better websites, and your users will be happier 🎉

---

This post was initially published as a Twitter thread, so make sure to follow me on Twitter if you don't want to miss any of the resources I share daily.

- 👨‍💻 My Twitter account: [@HorusGoul](https://twitter.com/HorusGoul)
- 🧵 Thread: [https://twitter.com/HorusGoul/status/1484556412655005698](https://twitter.com/HorusGoul/status/1484556412655005698)

Learning these resources will make you a better developer by teaching you how to build inclusive websites and web apps.

7 Resources to Improve Your HTML and Accessibility Skills

---
title: React Hyper Scroller v3 released!
slug: react-hyper-scroller-v3-release
description: An easy to use and hyper-fast virtual list library for React
tags: [react,react-hyper-scroller,open-source,javascript]
publishedAt: 2021-11-24
ogImage: https://horus-dev-media.s3.amazonaws.com/c2d06d35-e5d0-42d5-a04f-17d1688f7c83
---

Virtual lists play an essential role in today's web because sometimes, we need to render lists with many items (think about hundreds or even thousands!) or lists with components that are expensive in terms of performance.

If we need to display a list that contains 5000 items, that means that we'll need to create at least 5000 elements in the DOM. That's expensive and will probably take a bit of time. But that's the best-case scenario; lists are usually composed of items with many elements. If we add up everything, we'll need to render thousands and thousands of elements. That's REALLY EXPENSIVE!

Virtual lists solve that, allowing you to render only the items that fit on the user's screen. Each time the user scrolls, the lists automatically render new items and remove the ones you left behind. This is awesome, as we won't be wasting resources for elements that won't be on screen unless the user wants to see them!

<center>
  <img src="https://horus-dev-media.s3.amazonaws.com/6f98b6c2-861d-434b-aafb-d2bc6c190317" alt="React Hyper Scroller's logo" style={{ height: 100 }} aria-hidden="true" />
</center>

**I'm releasing [React Hyper Scroller v3](https://react-hyper-scroller.horus.dev/?utm_source=horus.dev&utm_medium=Social&utm_campaign=release) today**, a library that allows you to use virtual lists in your React apps and websites. You'll see that it is not a `v1`, but a `v3`, that's because I originally created this library to solve the problems of one of my projects, [Kiddle](https://kiddle.xyz). These issues are scroll restoration and the ability to render lists of items with unknown sizes.

React Hyper Scroller's main features are solving these issues, but another one is great DX (Developer Experience). Here's an example from the [documentation](https://react-hyper-scroller.horus.dev/docs/intro/?utm_source=horus.dev&utm_medium=Social&utm_campaign=release):

```jsx
import HyperScroller from "react-hyper-scroller";

// List of random numbers from 50 to 300 (inclusive).
// These number represent the height of each item in the list.
// We do this to simulate a list of items with unknown height.
const items = new Array(100)
  .fill(0)
  .map(() => Math.floor(Math.random() * 150) + 50);

export function MyList() {
  return (
    <HyperScroller estimatedItemHeight={175}>
      {items.map((item, index) => (
        <div key={`item-${index}`} style={{ height: item }}>
          Item {index}. Height: {item}
        </div>
      ))}
    </HyperScroller>
  );
}
```

One thing to keep in mind is that React Hyper Scroller may not be the best for all use-cases. If it doesn't work for you, there are very cool alternatives like [`react-window`](https://github.com/bvaughn/react-window), [`react-virtualized`](https://github.com/bvaughn/react-virtualized) or [`react-virtual`](https://github.com/tannerlinsley/react-virtual).

Want to know more about React Hyper Scroller?

* [Documentation Website](https://react-hyper-scroller.horus.dev/?utm_source=horus.dev&utm_medium=Social&utm_campaign=release) 
* [Getting Started](https://react-hyper-scroller.horus.dev/docs/intro?utm_source=horus.dev&utm_medium=Social&utm_campaign=release)
* [GitHub Repository](https://github.com/HorusGoul/react-hyper-scroller)


An easy to use and hyper-fast virtual list library for React

React Hyper Scroller v3 released!

---
title: Installing Linux on Windows (WSL) is easier than ever
slug: installing-wsl-is-easier-than-ever
description: The new way to install the Windows Subsystem for Linux (WSL) is as simple as typing a single command in your terminal.
tags: [linux, windows, wsl]
publishedAt: 2021-11-12
ogImage: https://horus-dev-media.s3.amazonaws.com/b89e608a-f280-4a75-96a8-4179a11db12e
---

**TL;DR:** Open a terminal with admin rights and execute the following command: `wsl --install`. If you want to choose a distro, continue reading!

Until very recently, you had to go through multiple steps to enable WSL in your system. The worst part was that some of them were in the control panel, others in a terminal, and you also had to use the Microsoft Store to choose the Linux distribution you wanted.

With the recent changes they've made for the release of both Windows 11 and the latest Windows 10 update, installing WSL has become a straightforward task.

You only need to run one command if you're happy with using Ubuntu as your Linux distribution:

```bash
wsl --install
```

If you prefer another distribution, with this other command, you can list all the available distros:

```bash
wsl --list --online
```

And then, run the installation command:

```bash
wsl --install -d <distro name>
```

That's it! You'll have to restart your computer, and then it will ask you for a username and password. Once you create your user, the process will be completed.

The new way to install the Windows Subsystem for Linux (WSL) is as simple as typing a single command in your terminal.

Installing Linux on Windows (WSL) is easier than ever

---
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) 

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)

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

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

---
title: Using HTML, CSS, and JavaScript to Create OBS Plugins for Your Live Streaming Sessions
slug: using-html-css-and-javascript-to-create-obs-plugins-for-your-live-streaming-sessions
description: How to use web technologies to build new experiences for your live streaming sessions.
tags: ["webdev", "javascript", "livecoding", "html"]
publishedAt: 2020-04-11
ogImage: https://horus-dev-media.s3.amazonaws.com/bbc9a39e-fdcf-4242-ad80-cbaecabb9cd7
---

A few days ago, I decided to give a try to live coding on Twitch. I developed a bot for one of the forums I visit regularly and it was a great experience, a lot of people visited the streaming and the big majority stayed for a while.

Because of that, I have been looking for ways to improve the experience of my live coding sessions and then I thought that one of these ways could be creating my own plugins for OBS (Open Broadcaster Software).

I found out that OBS plugins can be written in C++, but that's overkill! Then I thought that maybe there's another way using web technologies (HTML, CSS, and JS), that's when I discovered the `Browser` source.

![Browser Source](https://horus-dev-media.s3.amazonaws.com/8efd827c-758a-4174-a6f9-31b74382fbe9)

This type of source allows you to use an internal browser that supports modern web capabilities, just point it to an URL or a local HTML file and start building a dynamic experience for your viewers!

![Browser Source Properties](https://horus-dev-media.s3.amazonaws.com/c571a603-6fba-4334-96fa-c4c1a06124a4)

Once I got to know about this, I decided to use [Preact](https://preactjs.com/) with [HTM](https://github.com/developit/htm) and plain CSS as the stack to build my plugins. I believe that this stack rocks for this use case because it doesn't require a build step, just go ahead and use the platform!

Here's a GIF of my first OBS plugin, which loads the latest posts of my dev.to profile in case someone wants to read one of my publications after the stream finishes:

![Plugin that retrieves my latest dev.to publications](https://horus-dev-media.s3.amazonaws.com/5efe4a59-6bd4-4c7e-a148-71f6c644659c)

After building my first plugin and seeing that this stack rocks, I have created a repository that you can use as a template to develop obs plugins with this stack: [HorusGoul/preact-obs-plugin](https://github.com/HorusGoul/preact-obs-plugin).




How to use web technologies to build new experiences for your live streaming sessions.

Using HTML, CSS, and JavaScript to Create OBS Plugins for Your Live Streaming Sessions

---
title: Step Up Your Multi-Computer Setup By Sharing Mouse and Keyboard Between Systems
slug: step-up-your-multi-computer-setup-by-sharing-mouse-and-keyboard-between-systems
description: Like Apple's Universal Control, but Open Source and with support for Windows and Linux too!
tags: ["productivity", "tutorial"]
publishedAt: 2020-03-04
ogImage: https://horus-dev-media.s3.amazonaws.com/3c360add-bea3-4aca-9e47-72390b11b6e1
---

Last week, I finished setting up my main computer, which uses Ubuntu, and today I needed to work with my MacBook Pro to be able to work with the iOS simulator. I placed it in my desk and after using both computers for a few hours, I noticed that this could be better if both systems shared the same keyboard and mouse.

Well, seems like I wasn't the only one to think about that.

## KVM Switches

KVM Switches (KVM stands for keyboard, video and mouse), allow you to share these peripherals between multiple systems. In general, there are two types, **hardware** and **software** KVM switches.

Clearly, the first thing I did was to look for a software solution, and I decided to try with [Barrier](https://github.com/debauchee/barrier).

## Barrier Configuration

Installing Barrier was easy, they provide a snap package for Ubuntu and also pre-built binaries for OS X and Windows.

* [Snap](https://snapcraft.io/barrier)
* [Windows, OS X and other Linux build](https://github.com/debauchee/barrier/releases) 

Barrier uses a Client-Server architecture, and because of that, the first thing we're going to configure is the server. The server is the machine that will "own" the keyboard and the mouse, while the clients will receive information about what is going on and then act accordingly.

1. Open the Barrier app in the machine that you picked to be the server. Select the **Configure interactively** option and click in the button that says **Configure Server**.

2. That will open a new window where you can modify the layout of screens by using drag and drop. In my case, I added it to the left of my main computer.

3. Double click the new added screen and give it a name. The name is important because it has to match the name of the client you're going to configure next. To check the client name, open the Barrier app in the client and check the name there.

![Server configuration](https://horus-dev-media.s3.amazonaws.com/bb9ef809-ceaa-4848-b476-64197caff203)

4. Save all this configuration and start the server. 

5. Take a look to the IP addresses in the server, one of them should be bold, that's the IP of our server and we need to use it in order to configure our clients. Go to your client and configure them, you can first check if the auto config works for you, otherwise just fill the **Server IP** with the one you got earlier.

![Client configuration](https://horus-dev-media.s3.amazonaws.com/51cbf105-b6e1-4aab-a382-00df5416f604)

And that's it, with this you just configured a KVM switch and it should be working now!

![Sharing mouse and keyboard between Ubuntu and OS X](https://horus-dev-media.s3.amazonaws.com/f8d90095-326c-4bdf-bf2c-1ee2185f6462)

## What now?

This KVM switch uses your LAN network to establish the Client-Server communication, there are multiple things that can result in a degraded experience. 

Barrier is the program I chose, but there are others that may work better for your system, if this one doesn't do it, just keep looking, and remember, there are hardware KVM switches too!


Like Apple's Universal Control, but Open Source and with support for Windows and Linux too!

Step Up Your Multi-Computer Setup By Sharing Mouse and Keyboard Between Systems

---
title: Say Goodbye To Provider Hell With react-component-pack
slug: say-goodbye-to-provider-hell-with-react-component-pack
description: A library that allows you to create context provider groups
tags: ["react", "javascript", "typescript"]
publishedAt: 2020-02-27
ogImage: null
---

If you're developing apps with React, you may have faced something like this:

```jsx
function App() {
  return (
    <AuthProvider>
      <DataProvider>
        <AnotherDataProvider>
          <WtfProvider>
            <ThisIsGettingReallyBigProvider>
              <OhMyGodTheresMoreProvider>
                <FinallySomeRealComponents />
              </OhMyGodTheresMoreProvider>
            </ThisIsGettingReallyBigProvider>
          </WtfProvider>
        </AnotherDataProvider>
      </DataProvider>
    </AuthProvider>
  );
}
```

That's what people call Provider Hell and I created this tool to make this kind of code more readable.

Here's the same example, using the [react-component-pack](https://github.com/HorusGoul/react-component-pack) utility:

```jsx
import { createPack } from 'react-component-pack';

const ProviderPack = createPack(
  AuthProvider,
  DataProvider,
  AnotherDataProvider,
  WtfProvider,
  ThisIsGettingReallyBigProvider,
  OhMyGodTheresMoreProvider
);

function App() {
  return (
    <ProviderPack>
      <FinallySomeRealComponents />
    </ProviderPack>
  );
}
```

> *NOTE:* This utility won't allow you to pass props to a specific provider. Feel free to submit a PR 😁

A library that allows you to create context provider groups

Say Goodbye To Provider Hell With react-component-pack

---
title: Node.js + TypeScript Starter For Your Next Project
slug: node-js-typescript-starter-for-your-next-project
description: Straightforward Node.js & TypeScript Starter
tags: ["nodejs", "typescript", "webdev", "beginners"]
publishedAt: 2020-02-17
ogImage: null
---

If you're a beginner that wants to learn TypeScript and Node, this starter may be the best choice for you. You won't need to configure anything in order to be able to develop and build your project, just clone it, install the dependencies and launch the development script, the rest is in your hands!

The current configuration handles polyfills for you using Babel, lints your code using ESLint, and makes sure everything is correct when you attempt to submit a new commit.

Here's the repo: [HorusGoul/node-ts-starter](https://github.com/HorusGoul/node-ts-starter)

I hope you like it, make me know if there's anything you'd like to see included or about any issue that you encounter while using it.

👋

Straightforward Node.js & TypeScript Starter

Node.js + TypeScript Starter For Your Next Project

Learn how to create new experiences in Minecraft with this step-by-step guide to build your first mod.

Blog