DEV Community: Horus Lugo

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

Horus Lugo — Sat, 19 Feb 2022 13:09:59 +0000

I just released 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:

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

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:

Also, I recently published an article about How to Setup React Native Web in a Remix project. 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

How to Setup React Native Web in a Remix project

Horus Lugo — Mon, 07 Feb 2022 19:18:58 +0000

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

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.

$ 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.

$ 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:

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.

...

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.

html, body {
  height: 100%;
}

body {
  display: flex;
}

Take a look at the Remix Docs about 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:

import { RemixBrowser } from "remix";
import { hydrate } from "react-dom";
import { AppRegistry } from "react-native";
import { ReactNativeStylesContext } from "./rn-styles";

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

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

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

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

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:

import { renderToString, renderToStaticMarkup } from "react-dom/server";
import { RemixServer } from "remix";
import type { EntryContext } from "remix";
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:

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

7 Resources to Improve Your HTML and Accessibility Skills

Horus Lugo — Tue, 01 Feb 2022 09:48:29 +0000

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

2. 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

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/

4. Accessible Tables Tutorial

The @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/

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

6. Responsive Images

This article by @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

7. axe by @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/

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
🧵 Thread: https://twitter.com/HorusGoul/status/1484556412655005698

React Hyper Scroller v3 released!

Horus Lugo — Wed, 24 Nov 2021 20:00:40 +0000

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!

I'm releasing React Hyper Scroller v3 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. 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:

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, react-virtualized or react-virtual.

Want to know more about React Hyper Scroller?

Installing Linux on Windows (WSL) is easier than ever

Horus Lugo — Fri, 12 Nov 2021 10:07:40 +0000

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:

wsl --install

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

wsl --list --online

And then, run the installation command:

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.

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

Horus Lugo — Sat, 10 Oct 2020 19:46:55 +0000

Hey DEV! 👋

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

HorusGoul / rtmp-social-multicast

Want to stream to Twitch, YouTube, Facebook, and/or Periscope at the same time? That's what this project allows you to do!

RTMP Social Multicast Server

Want to stream to Twitch, Youtube, or Periscope at the same time? That's what this project allows you!

Prerequisites

Git
Docker
Docker Compose

Getting Started

This guide will go through configuration and how to use it with OBS. Make sure to have all the prerequisites installed on your machine.

Clone the repo

$ git clone https://github.com/HorusGoul/rtmp-social-multicast

Open the repo

$ cd rtmp-social-multicast

Create a .env file based on the .env.template file.

$ cp .env.template .env

Open and fill the .env file and fill it with the configuration for the platforms you want to stream.

⚠️ Make sure to use a strong RTMP_SECRET if you plan to expose the server to the internet.

⚠️ Avoid changing the RTMP_AUTH_SERVER variable unless you know what you're doing.

Now let's launch everything with Docker Compose

$ docker-compose up

Time to stream! We'll…

View on GitHub

Follow me on Twitter if you want to know more about my future projects, posts, or whatever I came up with!

How to Create React, Vue or TS/JS Projects from the Address Bar 🤯

Horus Lugo — Tue, 04 Aug 2020 18:39:49 +0000

Did you know that you could just type react.new in the address bar to create a React project? The same applies for Vue, TypeScript and JS too!

Try it!

All thanks to CodeSandbox, I bet there are more but I couldn't find a list.

Did you know about this? Do you know if there are more special URLs?

Use React's useState and useReducer without Worrying about Immutability

Horus Lugo — Mon, 03 Aug 2020 19:39:33 +0000

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

TL;DR: Check out the 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:

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;

A few things to care about:

We're saving all the state inside the useState hook. To update it we need to call setState.
The only thing we're trying to modify here is the user's bio. Notice how it's nested inside the profile object.
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?

...

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:

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?

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:

$ npm install immer use-immer

Now add this import in one of your files:

import { useImmer } from 'use-immer';

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

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

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:

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;

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:

immerjs / use-immer

Use immer to drive state with a React hooks

use-immer

A hook to use immer as a React hook to manipulate state.

Installation

npm install immer use-immer

API

useImmer

useImmer(initialState) is very similar to useState The function returns a tuple, the first value of the tuple is the current state, the second is the updater function which accepts an immer producer function or a value as argument.

Managing state with immer producer function

When passing a function to the updater, the draft argument can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.

Example: https://codesandbox.io/s/l97yrzw8ol

import React from "react";
import { useImmer } from "use-immer";
function App() {
  const [person, updatePerson] = useImmer({
    name: "Michel",
    age: 33
  });

  function updateName(name) {
    updatePerson(draft => {
      draft.name = name

…

View on GitHub

That's all! Follow me on Twitter if you want to know more about my future projects, posts or whatever I came up with!

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

Horus Lugo — Fri, 17 Jul 2020 11:54:11 +0000

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.


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


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


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


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

Follow me on Twitter https://twitter.com/HorusGoul if you want to learn more about web development!

My New Website Built with Next.js, TailwindCSS and Vercel

Horus Lugo — Fri, 12 Jun 2020 16:00:32 +0000

One of the things that has been always bugging me is to not have a personal website that makes me feel like I've done a great job after finishing it. That's mainly because I wanted to build a website but didn't know what to put in it.

That's what changed this time because I knew what to put in my website, and also was really inspired and it took me very little time to discover how I wanted to display the content. In my previous attempts to have an amazing website, I wasn't able to find this kind of inspiration so most of the times I felt frustated and ended up looking for a template that would temporarily do the job.


My previous website, a blog built with a Gatsby template

As I usually do when I'm building personal projects, I decided to try some new tools that I haven't used before, in this case, Next.js and TailwindCSS were the new shiny things I wanted to take a look into.

I've been reading a lot of things regarding Next.js in the last few years, but in the last few months they released a new feature called Static HTML Export that allows developers to use the framework as a static site generator. Also, Next.js is mainly developed by Vercel, a platform that allows you to deploy Next.js apps (and other kind of apps) to the cloud, combining CDN for static content and Serverless functions for your API and Server Side Rendered (SSR) routes. The best part of it is that they manage all of that for you, and with zero config you can get your Next.js app easily deployed in their platform.

Finally, I decided to go with TailwindCSS to style the website, I found that it's really easy to use and that once you learn the basics, applying styles to something in your website it's just a matter of adding a few utility classes to the elements you want to modify.


Vercel + Next.js + TailwindCSS = horus.dev

If you mix those tools, you'll eventually get a website like the one I have been building for the last few weeks, I bet you're already curious about what my new website looks like so... here's the link!

➡️ https://horus.dev

But wait, there's more, it's also open source so feel free to take a look to the code on GitHub!

HorusGoul / horus.dev

My personal website, built with Next.js, React, TailwindCSS and Vercel.

horus.dev

The code of my current website, built using React and Next.js, TailwindCSS, and finally Vercel because it's the best platform to deploy Next.js projects.

Bootstrapped using HorusGoul/next-ts-starter

View on GitHub

What do you think about my new website? Make me know about your ideas on how I could improve it in the comments 😊

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

Horus Lugo — Sat, 11 Apr 2020 14:21:08 +0000

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.

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!

Once I got to know about this, I decided to use Preact with 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:

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.

HorusGoul / preact-obs-plugin

Preact OBS Plugin

This is a template that can be used to build OBS plugins (or webapps!)

$ git clone https://github.com/HorusGoul/preact-obs-plugin hello-world-obs-plugin

The dependencies are downloaded from CDNs, just launch a web server with npx serve and use the local URL in your Browser source on OBS.

I recommend you to use npx live-server to develop, it will reload your website whenever you change one of the files.

View on GitHub

Follow me on Twitter if you want to know about my future articles, projects or whatever I come up with!

How To Improve Your Problem-Solving Skills

Horus Lugo — Thu, 12 Mar 2020 21:56:52 +0000

Alice just finished her first development course, she wanted to continue learning and getting more in-depth knowledge about the universe of possibilities that programming offered her.

She also wanted a job, and deciding to build a portfolio was her best choice to be able to do some interviews as soon as possible.

How did she start?

At first, she began using what she learned in the course. Then, she continued to mix that content with the answers she found while searching for the problems that started to arise.

A lot of challenges were appearing in front of her, and that’s when she realized that there was one important thing that the course didn’t teach her.

Problem-solving

Problem-solving is one of the most valued soft skills a programmer should have in their toolbox, and Alice was just training to become a better problem solver without even knowing it.

She got really good at it while building her portfolio, and that wasn’t the only thing learned, she also got to know new tools, concepts, tricks, etc.

Once she finished her portfolio, she applied to a few jobs and ended up working in one of the companies she wanted the most.

She continued learning, and, over the years, she built an amazing career! Mainly because creating things led her to improve her problem-solving skills along with other hard skills she learned on the go.

When people ask Alice how it was when she started coding, she always talks about how she got through her first portfolio and how improving your problem-solving skills can boost your career.

That’s the story of Alice, If you’re starting with programming, I recommend you to follow her advice so...

Go and build some projects while improving your problem-solving skills at the same time!

If you don’t know what to build, here’s a repository with a lot of things that you can start building after you finish reading this post:

karan / Projects

📃 A list of practical projects that anyone can solve in any programming language.

Mega Project List

A list of practical projects that anyone can solve in any programming language (See solutions). These projects are divided in multiple categories, and each category has its own folder.

To get started, simply fork this repo.

CONTRIBUTING

See ways of contributing to this repo. You can contribute solutions (will be published in this repo) to existing problems, add new projects or remove existing ones. Make sure you follow all instructions properly.

Solutions

You can find implementations of these projects in many other languages by other users in this repo.

Credits

This repo was compiled by Karan Goel.

Problems are motivated by the ones shared at:

Numbers

Find PI to the Nth Digit - Enter a number and…

View on GitHub

Also, there are other soft skills that are indispensable if you want to build a successful career, you may want to learn about them too: 10 Soft Skills Every Developer Needs from Hackernoon.

Reach me on Twitter if you build something amazing, I usually share stuff about my future articles, projects or whatever I come up with!

DEV Community: Horus Lugo

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

How to Setup React Native Web in a Remix project

1. Installing the react-native-web package

2. React Native Web Styles

3. SSR and Hydration

4. Using React Native Web components

7 Resources to Improve Your HTML and Accessibility Skills

1. HTMHell

2. inclusive-components.design

3. Learn Forms! by @ChromiumDev

4. Accessible Tables Tutorial

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

6. Responsive Images

7. axe by @dequesystems

React Hyper Scroller v3 released!

Installing Linux on Windows (WSL) is easier than ever

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

HorusGoul / rtmp-social-multicast

Want to stream to Twitch, YouTube, Facebook, and/or Periscope at the same time? That's what this project allows you to do!

RTMP Social Multicast Server

Prerequisites

Getting Started

How to Create React, Vue or TS/JS Projects from the Address Bar 🤯

Use React's useState and useReducer without Worrying about Immutability

immer and use-immer

immerjs / use-immer

Use immer to drive state with a React hooks

use-immer

Installation

API

useImmer

Managing state with immer producer function

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

1. Replacing Text with Emojis

2. Using Emojis as Decoration

It works with icons too! 🤯

My New Website Built with Next.js, TailwindCSS and Vercel

HorusGoul / horus.dev

My personal website, built with Next.js, React, TailwindCSS and Vercel.

horus.dev

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

HorusGoul / preact-obs-plugin

Preact OBS Plugin

How To Improve Your Problem-Solving Skills

How did she start?

Problem-solving

Go and build some projects while improving your problem-solving skills at the same time!

karan / Projects

📃 A list of practical projects that anyone can solve in any programming language.

Mega Project List

CONTRIBUTING

Solutions

Credits

Table of Contents

Numbers

`immer` and `use-immer`