DEV Community: Patrícia Pereira

[Typper v1.0.0] Can you type your way to the top? 🎮🏆

Patrícia Pereira — Mon, 11 Jan 2021 19:23:23 +0000

After working on and releasing the core functionality of the game, it was time to focus on getting Typper looking and feeling like a real game.

So, what's new?

✨ Main menu and game over screens
🏆 Game score and leaderboard (yes!)
🌈 General UI improvements

Give it a try, have fun and feel free to reach out and give feedback 📝 or report a bug ⭕️.

🎮 PLAY 🎮

Typper 💻🎮, (the beginning of) a typing game [v0.2.0-beta]

Patrícia Pereira — Tue, 29 Sep 2020 13:36:23 +0000

🎉 Introducing Typper, a simple typing game where our hero is a Ninja fighting off a never ending hoard of Zombies. 🎉

Typper is still in an early stage, there are many features and improvements to come that will make everything more interesting!

Give it a try, have fun and feel free to reach out and give feedback 📝 or report a bug ⭕️ (I am sure there are a few).

🎮 PLAY 🎮

patricepeartree / typper-web

A simple typing game where our hero is a Ninja fighting off a never ending hoard of Zombies.

Remarks

Typper is being developed using React. It is not the obvious approach to building a web-based game, but I wanted to familiarize myself with the new Hooks API, so 🙆.

I did not use any library for the animations (sprites, object movement, collision detection, ...). I know it would have saved me a lot of work, but I wanted to try and use the Web Animations API.

PatricePeartree @ Twitter

COVID-19: Emergency Queue

Patrícia Pereira — Fri, 01 May 2020 04:08:24 +0000

What we built

In the midst of the COVID-19, myself and @leeforaday developed an application that we believe could simplify and improve the waiting process for someone who calls the Medical Emergency Line. The application is intended to serve as a communication point between the medical responders of the national Medical Emergency Line and the callers (possible patients).

While the ideia was thought with our country's particular situation in mind, it was implemented all in English and without any ties to any specific health line or entity.

With our application in use, the process when someone calls the health line becomes the following:

The patient with symptoms calls the line;
It is greeted with an automatic response that asks (and waits for the answer between each question):
- the patient's name
- the patient's age
- a description of the patient's symptoms
After answering these questions, a message is played informing the patient that they will receive an SMS with a request ID, and more instructions on how to get information about their estimated waiting time;
The call finishes, and the patient receives the SMS with the request ID mentioned above, and a number to send a SMS to know the estimated waiting time to receive a call back from one of the medical responders;
The medical responders have in their work interface two buttons, one to retrieve the next request in the queue, another to retrieve a welfare check request (patients that are already being continuously followed up by the medical team);
Then they are presented with the information about the patient they are about to call (and in case of an welfare check, previous call notes that might have been written). From their desktop application, they can call back to the patient. The responders can write notes about the call, and select the person for welfare checks if deemed necessary.

We also added some statistics to the work interface of the medical responders: Calls in Queue, Calls in Progress, and Calls Processed Today. The daily statistics are reset every day at midnight.

Category Submission:

COVID-19 Communications

Demo Link

A patient starts by making a call to the Medical Emergency Line:

After the call is finished, the patient receives a text message:

And they can then query for their estimated hold time:

Eventually, the patient request will be the next in the queue and a responder will process it:

Responder's desktop application view:

Browser dialling from the responder to the patient (the responder selects the patient for daily welfare checks):

There can come a time when there are no more patients in the queue (not very likely):

(The next day - since the patient was marked for daily welfare checks)

A responder processed the next patient in the welfare check queue:

Responder's desktop application view:

Browser dialling from the responder to the patient:

And that's it! All the patients are being taken care of and don't need to stay on hold on the phone waiting for an available medical responder! 🎉

Link to Code

https://github.com/patricepeartree/emergency-queue

How we built it

The implementation of this project integrated the following Twilio products:

The desktop application was built with Electron and React (with redux and react-redux).

The server was implemented in Node and Express. We also used agenda, a job scheduling library for Node.

Real time communication between the server and the desktop application was implemented using Socket.IO.

Typescript was used in both the server and the desktop application.

The data is stored in a MongoDB database.

And finally, Docker and Docker Compose to tie everything together.

Additional Resources/Info

To help us make our server API publicly available from inside a Docker container, we used the wernight/ngrok Docker image.

We added celebratory confetti when there are no requests left with the help of this great npm package: canvas-confetti.

The interface was designed mainly with components from Semantic UI for React.

A product of social distancing 🏠, created by:
🍪 @leeforaday
☕ @patricepeartree

.ltag__user__id__17020 .follow-action-button { background-color: #006c6c !important; color: #000000 !important; border-color: #006c6c !important; }

Leonor Bandeira

big data, web dev, all the tv shows.

leeforaday

COVID-19: Medical Emergency Line Queueing [Concept]

Patrícia Pereira — Sun, 12 Apr 2020 13:05:25 +0000

Hi, all.

So me and @leeforaday have decided to participate in the Twilio x DEV Hackaton, and here we are just putting our application idea out into the world.

A small background

Just like in many other countries, in our country, Portugal, the COVID-19 pandemic is hitting hard. Our National Health System, which is not at 100% even in normal situations, does not have conditions to receive and treat the enormous amount of patients needing medical care due to the COVID-19 virus.

Our government and health authorities are working around this disability by trying to enforce people to first go through our existing national Medical Emergency Line.

If someone feels sick and suspects it might be from COVID-19 infection, instead of going to an hospital urgency service, they first must call this line. The patient will only go to the hospital if the medical responder deems that the their symptoms are serious enough to need medical assistance. If not, the patient will isolate themselves at home and be accompanied daily by phone.

The problem

This approach is starting to show its first positive impacts by avoiding the collapse of the health system. But with the increasing number of calls to the Medical Emergency Line, the hold time has become proportionally bigger, all the while with the callers obliged to stay on the call.

Our solution

Our proposal for this hackaton is to develop an application to simplify and improve the waiting process for the patients who call this line. The application would be intended to be used by the medical responderes in the national Emergency Medical Line.

The core feature of our application (still to be named) is an idle waiting line for the national Emergency Medical Line. The process would become the following:

The patient with symptoms would call the line.
- There would be no human interaction at this point.
- They would be asked to identify themselves and describe their symptoms.
- The call would end and the patient would now be in a waiting line to be contacted back, but without the need to be on the phone.
- The patient would receive a request identifier by SMS which they can use at any time to get their estimated waiting time left.
The patient would eventually be contacted back by a medical responder.
- After the call, if the medical responder decided that the patient is a COVID-19 suspect but without the need of medical assistance, they would be able to flag the patient for continuous phone follow ups.

Twilio Integration

The implementation of this project will use the following Twilio products:

That's all for now. It's time to get to work and see what we can come up with until the end of the hackaton. Stay tunned!

How to run multiple Node and Angular versions simultaneously

Patrícia Pereira — Fri, 20 Mar 2020 18:01:34 +0000

In my line of work as a Web Engineer, I have leaped through a decent amount of projects in a not so big amount of time. Not only that, but all of these projects had at least one Node based component and a big part of them also used Angular as their Frontend framework. So I eventually came to a point where I needed to actively work on my current project but be able to quickly switch back to any of the other projects.

I must admit that the first time this switch was needed, I naively downgraded both Node and Angular CLI… Only to then upgrade them again when I went back to working on my current project. Not only is this a time-wasting process, it is susceptible to errors from missing information. An Angular project's CLI version is in the package.json file, but what about the Node version? That is a piece of information that must be documented, and as we all know well, documentation is almost always left behind.

Each Angular version is compatible with a range of Node versions. When downgrading/upgrading Angular CLI, you also need to make sure the Node version being used is compatible. Besides, it's good practice to maintain versions during development, unless explicitly wanting to change them.

It was in that moment that I started to search for a possible solution to manage different Node and Angular versions for different projects. I found two concepts that seemed promising to be used together:

nvm, a version manager for Node
Local Angular CLI

nvm

nvm is a Node version manager command line tool. It allows the user to install multiple Node versions on its machine and then use different versions in separate shells simultaneously.

If you are not familiar with nvm commands, keep in mind that:

nvm run [arguments] is equivalent to node [arguments]

nvm exec [command] [arguments] is equivalent to [command] [arguments]

A normal nvm usage workflow (and the one we are going to use to manage different projects' Node versions) would be to install each project's Node version and then execute it in an independent project dedicated shell. Node can either be or not be natively installed in the machine, it does not make a difference for this use case.

For demonstration purposes, let's suppose we have the following projects:

Project XPTO, Node version 8.17.0
Project EPIC, Node version 12.16.1

To be able to execute both projects without needing to downgrade/upgrade your Node version, you have to:

1. Install both Node versions using nvm:

$ nvm install 8.17.0
$ nvm install 12.16.1

2. Go to the directory of project XPTO and set nvm to use the correct Node version:

$ nvm use 8.17.0
# check Node version being used
$ nvm run -v # or just "node -v"
> Running node v8.17.0
> v8.17.0
# start project XPTO
$ nvm exec npm start # or just "npm start"

By executing nvm use you are defining the Node version that nvm is going to run in that shell, not only in the directory where you executed the command.

3. Open a new shell, go to the directory of project EPIC and do the same for that project's Node version.

Now there are two different projects being executed by two different Node versions! What's missing? Well, nvm use action is shell session scoped, which means new shells will start with the default nvm version of Node. So when you come back to work tomorrow and open a shell to start either of your projects, nvm will no longer be pointing to their correct Node version.

Luckily, nvm has the .nvmrc file, which allows the user to specify a Node version to be used by nvm in a directory and all its sub-directories. Create this file in the root directory of your projects with the correct Node version:

# in project root directory
$ echo "8.17.0" > .nvmrc

Make sure you always use nvm commands to execute Node or npm, given that these are the commands that search for and use the .nvmrc file:

# "node server.js" with Node version from .nvmrc
$ nvm run server.js
# "npm start" with Node version from .nvmrc
$ nvm exec npm start

Now nvm will always run the correct Node version for your projects!

Local Angular CLI

If you are working on an Angular project, besides guaranteeing the correct Node version you also need to make sure you are using the correct Angular CLI version when running your ng commands.

When you create an Angular project, the Angular CLI is added as a development dependency to your project's package.json:

{
  ...
  "devDependencies": {
    "@angular/cli": "9.0.5",
    ...
  }
}

This means that independently of the Angular CLI version you have globally installed in your machine, there will be a locally-installed Angular CLI in node_modules folder after installing your projects' dependencies. What you need to do is make sure you execute this locally-installed version instead of the global one. You can do one of the following:

Use `package.json` scripts

The npm run-script command adds the node_modules/.bin binaries to the pre-existing shell's PATH that is then provided to the scripts. This means that scripts in package.json which execute ng will be running the locally-installed Angular CLI. If you also want to directly execute ng in the shell using this approach, you can add "ng": "ng" as a script in package.json.

{
  ...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    ...
  }
}

# serve your application with nvm and local Angular CLI
$ nvm exec npm start
# create an Angular component using local Angular CLI
$ nvm exec npm run ng g component my-cool-component

Use `node_modules/.bin/ng`

Run the local Angular CLI by directly executing the binaries present in the node_modules/.bin folder in a shell.

# create an Angular component using local Angular CLI
$ nvm exec ./node_modules/.bin/ng g component my-cool-component

Conclusion

By taking advantage of both nvm and local Angular CLI binaries, it is not only possible to manage different Node and Angular versioned projects, but also to do it in a simple and straightforward way.

With this methodology, it's important to never forget to use the nvm commands! It's true that a simple command (e.g. to start a project) turns a bit more verbose, but the trade-off of being able to work on and execute multiple projects seamlessly is a big plus.

Hope this is helpful for someone out there! 💡
And of course, thanks for reading. 🤓
If you have any question/suggestion/feedback, feel free to leave a comment. 📝

PatricePeartree @ Twitter

DEV Community: Patrícia Pereira

[Typper v1.0.0] Can you type your way to the top? 🎮🏆

So, what's new?

patricepeartree / typper-web

A simple typing game where our hero is a Ninja fighting off a never ending hoard of Zombies.

Typper 💻🎮, (the beginning of) a typing game [v0.2.0-beta]

patricepeartree / typper-web

A simple typing game where our hero is a Ninja fighting off a never ending hoard of Zombies.

Remarks

COVID-19: Emergency Queue

What we built

Category Submission:

Demo Link

Responder's desktop application view:

Browser dialling from the responder to the patient (the responder selects the patient for daily welfare checks):

Responder's desktop application view:

Browser dialling from the responder to the patient:

Link to Code

How we built it

Additional Resources/Info

Leonor Bandeira

COVID-19: Medical Emergency Line Queueing [Concept]

A small background

The problem

Our solution

Twilio Integration

How to run multiple Node and Angular versions simultaneously

nvm

1. Install both Node versions using nvm:

2. Go to the directory of project XPTO and set nvm to use the correct Node version:

3. Open a new shell, go to the directory of project EPIC and do the same for that project's Node version.

Local Angular CLI

Use package.json scripts

Use node_modules/.bin/ng

Conclusion

Use `package.json` scripts

Use `node_modules/.bin/ng`