Medicine, Software and everything in between.

During this year's Cognizant Softvision Programmers' Week conference, I heard a very inspiring presentation from an Argentine software engineer about a project he had started to assist in calculating the dosage of insulin for his son, who had recently been diagnosed with Type 1 Diabetes mellitus.....

Contributing to the Pancreas Digital Open Source Insulin Bolus Calculator

During this year's <a href="https://www.cognizantsoftvision.com/news-posts/cognizant-softvision-kicks-off-programmers-week-2022/" target="_blank" title="CSV Programmers' Week">Cognizant Softvision Programmers' Week conference</a>, I listened to a very inspiring presentation from an Argentine software engineer about a project he had started to assist in calculating the dosage of insulin for his son, who had recently been diagnosed with Type 1 Diabetes mellitus (T1DM).

### About the Pancreas Digital 
<a href="https://www.youtube.com/PancreasDigital" target="_blank" title="Pancreas Digital YT Channel">Pancreas Digital</a> is a non-profit organization based in Buenos Aires, Argentina, that focuses on diabetes technology, manages an open-source insulin bolus calculator, and plans online workshops hosted on YouTube. 

### About the Open Source Insulin Bolus Calculator
The Pancreas Digital Insulin Bolus Calculator uses a standard formula that matches the meal insulin to the patient's carbohydrate intake (carbohydrate counting). A deployed version (online version) of this calculator can be found <a href="https://calculadora.pancreas.digital/en-US" target="_blank" title="Bolus Calculators">here</a>.

### My first contribution
My first contribution was to implement Internationalization (i18n) in the project (i.e. adding support for local languages and cultural settings) in order to allow for more broader personal use. You can check out my <a href="https://github.com/Pancreas-Digital/bolus-calculator/pull/7" target="_blank" title="pull request">pull request (PR) here</a>. 

#### Tasks completed
- Added i18n which is <a href="https://nextjs.org/docs/advanced-features/i18n-routing" target="_blank" title="i18n support">supported out-of-the-box by Next.js</a>.
- Added support for the english language `en-US`.
- Translated the Disclaimer text (which runs when the app is first run).FNext
- Translated the labels & input fields on the calculator page.

![Bolus calculator (Spanish)](/images/pancreas-digital-es.jpg "Bolus Calculator - Spanish")
Spanish version of the Pancreas Digital Insulin Bolus Calculator

![Bolus calculator (English)](/images/pancreas-digital-en.jpg "Bolus Calculator - English")
Translated version of the Pancreas Digital Insulin Bolus Calculator

- Changes made to `next.config.js` file to enable the out-of-the-box `i18n` support in Next.js
~~~js
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase) => {
 return {
 env: {
 siteUrl: phase === PHASE_DEVELOPMENT_SERVER ? 'http://localhost:3000' : 'https://pancreas.digital',
 siteTitle: 'Pancreas Digital - Calculadora de bolos',
 siteDescription: 'Calculadora de bolos de insulina para el control de la diabetes.',
 siteLogo: 'Vertical.jpg',
 siteName: 'Pancreas Digital',
 twitterCard: 'summary_large_image',
 twitterImageAlt: 'Pancreas Digital Logo',
 twitterSite: '@fedemotta_',
 },
 reactStrictMode: true,
 i18n: {
 locales: ['es-AR', 'en-US'],
 localeDetection: true,
 defaultLocale: 'es-AR',
 },
 };
};
~~~

- All the other code changes can be found in the Pull Request (PR) <a href="https://github.com/Pancreas-Digital/bolus-calculator/pull/7" target="_blank" title="Feature/6 Implement i18n in the insulin bolus calculator #7">Feature/6 Implement i18n in the insulin bolus calculator #7</a>.
### Future contributions
- Improving input field validations.
- Investigating further the effect of dietary fat and protein on the rise in basal glucose levels, as well as the possibility of enhancing the algorithm for insulin bolus calculation to include all three variables (carbohydrate, fat and protein).
- Translating the application into other languages, e.g. French, German, Ukrainian, Swahili, etc.
- <a href="https://nightscout.github.io" target="_blank" title="Nightscout">Nightscout</a> integration. Nightscout is an open-source cloud application used by people with diabetes and parents of kids with diabetes to visualize, store and share the data from their Continuous Glucose Monitoring (CGM) sensors in real-time.

### References
1. Schmidt, S., & Nørgaard, K. (2014). Bolus Calculators. Journal of Diabetes Science and Technology, 8(5), 1035–1041. <a href="https://drive.google.com/file/d/1oGir3lOpkCqtBOUywWmORLEfikX2ghTD/view?usp=sharing" target="_blank" title="Bolus Calculators">(View paper)</a> 
2. Pesl, P., Herrero, P., Reddy, et al. (2016). An Advanced Bolus Calculator for Type 1 Diabetes: System Architecture and Usability Results. IEEE Journal of Biomedical and Health Informatics, 20(1), 11–17. <a href="https://drive.google.com/file/d/1wgcFZM0TtbZO7weaLsTuiDfJ5q7Qlg9H/view?usp=sharing" target="_blank" title="Advanced Bolus Calculator for T1DM">(View paper)</a>

In this short tutorial I'll show you how to go about creating a React application and deploying it to Github Pages (a free web hosting service provided by Github)...

How to deploy a React App to Github Pages

In this short tutorial I will show you how I went about creating a React app and deployed it to <a href="https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages" target="_blank" title="Github Pages">Github Pages</a> (a free web hosting service provided by Github). I used 
 <a href="https://create-react-app.dev" target="_blank" title="create-react-app">Create React App</a> (a tool used to build React applications from scratch) and <a href="https://www.npmjs.com/package/gh-pages" target="_blank" title="gh-pages">gh-pages</a> (an `npm` package that makes deployment to Github Pages pure bliss). 

## Prerequisites
---
1. You need to have <a href="https://nodejs.org/en/" target="_blank" title="Node.js">Node.js</a> and <a href="https://docs.npmjs.com/about-npm" target="_blank" title="npm">npm</a> installed on your computer. These are the versions I will be using for this tutorial (you don't have to have the same versions btw). 

~~~js
$ node --version
v16.11.1

$ npm --version
8.0.0
~~~

Personally, I use <a href="https://github.com/nvm-sh/nvm" target="_blank" title="nvm">nvm</a> (a version manager for node.js that allows you to quickly install and use different version of node via the command line).

2. You should also have `Git` installed. The version I will be using is:
~~~js
$ git --version
git version 2.37.0 (Apple Git-136)
~~~

3. You should have a Github account or <a href="https://docs.github.com/en/get-started/onboarding/getting-started-with-your-github-account" target="_blank" title="Setting up a Github account">set one up</a>.

## Steps
---
### 1. Create an empty Github repository
1. Sign into your Github account.
2. Create a `new repository` (you can find the
<a href="https://github.com/new" target="_blank" title="Create a new repository">create a new repository</a> here. 
*Screenshot of the form shown below*

![Create New Repository](/images/create-new-repository.jpg 'Create New Repository')

3. Fill out sections of the form as follows:
- **Repository name:** You can use any name you want, e.g. *portfolio (that's what I chose)*, my-personal-page, etc. 
- **Repository privacy:** Select *Public*. *NB:* For <a href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-free-for-user-accounts" target="_blank" title="Github Free">Github Free</a> users, the only type of repository that can be used with GitHub Pages is *Public*. For
<a href="https://docs.github.com/en/get-started/learning-about-github/githubs-products#github-pro" target="_blank" title="Github Pro">Github Pro</a> users (and other paying users), both *Public* and *Private* repositories can be used with GitHub Pages.
- **Initialize the repository:** Just leave this as is (don't check the box or make any drop down selections). Doing this will create an empty Github repository rather than pre-populate it with a `README.md`, `.gitignore` and/or a `LICENSE` file.

4. Submit the form. 
Your GitHub account should now contain an empty repository with the name and privacy setting you requested.

### 2. Creating the React App
1. Create a React App and name it `sedusa-githubio` (this is the name I chose but you can choose whatever name you want. Just make sure you replace `sedusa-githubio` with whatever name you choose in your project) by running the following terminal command:

~~~js
$ npx create-react-app sedusa-githubio
~~~

This command will create a new folder named `sedusa-githubio`, which will contain the source code for the React app.


2. Enter the folder for `sedusa-githubio`:

~~~js
$ cd sedusa-githubio
~~~

3. Install the `gh-pages` npm package
- Install the `gh-pages` npm package as a <a href="https://nodejs.dev/en/learn/npm-dependencies-and-devdependencies/" target="_blank" title="development dependency">development dependency</a>

~~~js
$ npm install gh-pages --save-dev
~~~

The `gh-pages` npm package is now installed on your computer and the React app's dependence upon it is documented in the React app's `package.json` file (seen as a property of `devDependencies`).

~~~js
{
 ...
 "devDependencies": {
 "gh-pages": "^4.0.0"
 }
}
~~~

4. Add a `homepage` property to the `package.json` file.

- Open the `package.json` in a text editor (I use <a href="https://code.visualstudio.com/" target="_blank" title="Visual Studio Code">Visual Studio Code</a>.

- Add a `homepage` property in the following format: 
~~~js
https://{username}.github.io/{repo-name}
~~~

*NB:* For a <a href="https://pages.github.com/#project-site" target="_blank" title="project site">project site</a> that's the format. For a <a href="https://pages.github.com/#user-site" target="_blank" title="user site">user site</a>, the format is: `https://{username}.github.io.` You can read more about the homepage property in the <a href="https://create-react-app.dev/docs/deployment/#github-pages" target="_blank" title="https://create-react-app.dev/docs/deployment/#github-pages">https://create-react-app.dev/docs/deployment/#github-pages</a> section of the `create-react-app` documentation.

~~~js
{
 "name": "sedusa-githubio",
 "version": "0.1.0",
 "private": true,
 "homepage": "https://sedusa.github.io/portfolio",
}
~~~

5. Add the deployment scripts to the `package.json`

- Open the `package.json` file in your text editor.
- Add the `predeply` and `deploy` properties to the scripts object.
*NB:* The `predeploy` script is used to bundle the React application and the `deploy` script deploys the bundled file.

~~~js
{
 "scripts": {
 "predeploy" : "npm run build",
 "deploy" : "gh-pages -d build",
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 },
}
~~~

6. Add a `remote` that points to the Github repository

- Add a 
<a href="https://git-scm.com/docs/git-remote" target="_blank" title="https://git-scm.com/docs/git-remote">remote</a> to the local Git repository by doing:

~~~js
$ git remote add origin https://github.com/{username}/{repo-name}.git
~~~

*NB:* Replace `{username}` with your GitHub username and `{repo-name}` with the name of the GitHub repository created in Step 1, e.g.

~~~js
$ git remote add origin https://github.com/sedusa/portfolio.git
~~~

7. Deploy the React app to Github Pages

- Deploy the app to Github Pages by running the command:

~~~js
$ npm run deploy
~~~

This command will cause the `predeploy` and `deploy` scripts defined in `package.json` to run. Under the hood, the `predeploy` script will build a distributable version of the React app and store it in a folder named build. Then, the deploy script will push the contents of that folder to a new commit on the `gh-pages` branch of the GitHub repository, creating that branch if it doesn't already exist.
By default, the new commit on the `gh-pages` branch will have a commit message of `"Updates"`. You can specify a custom commit message via the `-m` option:

~~~js
$ npm run deploy -- -m "Deploy my awesome app to Github Pages"
~~~

GitHub Pages will automatically detect that a new commit has been added to the `gh-pages` branch of the GitHub repository. Once it detects that, it will begin serving the files that make up that commit — in this case, the distributable version of the React app — to anyone that visits the `homepage` URL you specified in the `package.json` (Step 4).
At this point, the React app is accessible to anyone who visits the `homepage` URL you specified in Step 4. For example, this React app is accessible at <a href="https://sedusa.github.io/portfolio" target="_blank" title="https://sedusa.github.io/portfolio">https://sedusa.github.io/portfolio</a>.

## Time to celebrate! The React App is now live on Github Pages 🙌🏽
![Celebrate](https://media.giphy.com/media/3ornkdtVzQfIRpwfug/giphy.gif)

## Code
---
Here is a <a href="https://github.com/sedusa/portfolio" target="_blank" title="Code in Github for project">link to the code</a> for this deployed app.

## References
---
1. <a href="https://create-react-app.dev/docs/deployment/#github-pages" target="_blank" title="The create-react-app deployment guide">The create-react-app deployment guide</a>
2. <a href="https://github.blog/changelog/2020-09-03-build-and-deploy-github-pages-from-any-branch/" target="_blank" title="Build and deploy GitHub Pages from any branch">Build and deploy GitHub Pages from any branch</a>
3. <a href="https://github.com/gitname/react-gh-pages" target="_blank" title="Gitname: Deploying a React App to Github Pages">Gitname: Deploying a React App to Github Pages</a>
4. <a href="https://docs.github.com/en/pages/getting-started-with-github-pages/" target="_blank" title="Getting started with Github Pages">Getting started with Github Pages</a>

Monkeypox has recently been the subject of several news reports. Monkeypox has been prevalent in Central and West Africa since the early 1970s, but in early May 2022, the illness began to spread outside of that region.

Monkeypox: A spreading danger

Monkeypox has recently been the subject of several news reports. It has been prevalent in Central and West Africa since the early 1970s, but in early May 2022, the illness began to spread outside of that region. Over 300 monkeypox cases have been confirmed in 20 non-African countries and six US states as of May 26, 2022. The scenario is still fast changing.

### Background
Monkeypox is an orthopoxvirus that has a clinical appearance similar to smallpox.  The first epidemic in humans was in the Democratic Republic of Congo (DRC) in the early 1970s, despite the fact that it was originally detected in monkeys in 1958.

![Monkeypox virus](/images/monkey-pox-virus.jpg "Monkeypox virus")
Image from the CDC Cynthia S Goldsmith, Russell Regnery. [Public domain]

During the 2003 US epidemic, monkeypox virion was recovered from a human skin sample, as shown in the electron microscope picture above. On the left are mature, oval-shaped viral particles, while on the right are immature, spherical virus particles.

### Transmission
Monkeypox is a zoonotic disease, meaning it may be transmitted to people by contact with or eating of small animals, especially rodents. Several dozen human cases of monkeypox were discovered in the United States in 2003, and the disease was traced back to pet prairie dogs and, eventually, rats imported from Ghana. Human-to-human transmission has also been documented, with the virus entering the body via damaged skin, respiratory droplets, or mucous membrane contact. A proposed transmission method is indirect contact with lesion material, such as through infected garments or linens. 

Several documented cases in the 2022 outbreak are in males who have intercourse with men, raising questions about the specific human-to-human transmission pathways. The transmission of monkeypox is still hampered by exposure to human bodily fluids, respiratory droplets, and direct contact with sores.

### Signs and Symptoms
Fever and lymphadenopathy are common early signs of monkeypox infection, which are commonly accompanied by headache, myalgias, chills, weariness, and cough. Lymphadenopathy, notably swollen submental, submandibular, cervical, and inguinal lymph nodes, is the most consistent clinical symptom that distinguishes monkeypox from smallpox and chickenpox.

![Monkeypox virus](/images/monkey-pox-pustules-face.jpg "Pustules on face")
Caucasian male with monkey pox pustules on his face (Source: nairobitimes.co.ke)

Monkeypox takes 7-14 days to incubate, although it can take anything from 5 to 21 days. The rash appears 1-3 days after the commencement of the fever, and it usually starts on the face/mouth before quickly spreading to the rest of the body, including the palms and soles. The rash resembles chickenpox in appearance. Before resolving, monkeypox lesions usually go through the macular, papular, vesicular, and pustular phases. The sickness lasts 2-4 weeks, including ulcerative lesions in some cases.

### Evaluation
Droplet precautions, such as a N95 mask, gown, gloves, and eye protection, should be used while examining a patient with probable monkeypox. Investigate your travel and exposure history: Maintain a track of all clinical teammates who have been exposed to patients after this has been established. After the patient has left, disinfect the patient room surfaces as needed.

![Clinicians wearing personal protective equipment](/images/monkey-pox-ppe.jpg "Clinicians wearing personal protective equipment")
Image of clinicians wearing personal protective equipment (PPE) from Wikimedia Commons | Javed Anees, District Hospital, Tirur.

Using an oropharyngeal or nasopharyngeal swab, get a viral culture. A vesiculopustular rash skin biopsy or a sample of the ceiling of an intact vesiculopustule should be examined. Polymerase chain reaction (PCR), electron microscope examination (in the absence of other orthopoxviruses), or immunohistochemistry testing can all be used to confirm monkeypox. 
In the differential diagnosis, a Tzanck smear can assist distinguish monkeypox from other nonviral illnesses. A Tzanck smear, on the other hand, cannot distinguish a monkeypox infection from smallpox or herpetic infections.

![Pustules on hand](/images/monkey-pox-pustules-hand.jpg "Pustules on the hand")
Image courtesy of Medscape. The dorsum of a patient's hand has a monkeypox vesiculopustular rash. Some lesions have a central umbilication.

### Treatment
Monkeypox infection is mostly treated with supportive and symptomatic medicine. To avoid the spread of the disease, it is critical to segregate patients and take proper measures. Until all scabs have dried and dropped off, the patient is infectious. Vaccines for monkeypox are available, and in certain circumstances, immunization after high-risk exposure has been demonstrated to prevent illness or reduce severity.

### Mortality and Complications
In Africa, mortality rates range from 1.0 percent to 10.6 percent, with high-risk individuals (such as those who are immunocompromised or malnourished) having the worst outcomes. Bacterial infections can also develop as a result of the initial infection.

I spent a lot of time researching the best combination of complementary frameworks to build this website.  I eventually settled on using NextJS to build the website and Netlify to host and deploy it....

How I built this website

I spent a lot of time researching the best combination of complementary frameworks to build this website. I eventually settled on using NextJS to build the website and Netlify to host and deploy it. 
 These are the steps I took in setting up the project.

 1. Start by creating a `next-js` app by running:
~~~js
 npx create-next-app YOUR-APP-NAME
~~~
You can find the <a href="https://nextjs.org/learn/basics/create-nextjs-app" target="_blank">official docs on how to create a next-js app</a> here.

### Taking a look at the package.json file
Here's a copy of my `package.json` file which we will be referring to throughout this post.
~~~js
{
 "name": "SamuelEdusaMD",
 "private": true,
 "scripts": {
 "dev": "next dev",
 "build": "next build && next export",
 "start": "next start",
 "lint": "next lint"
 },
 "dependencies": {
 "gray-matter": "^4.0.3",
 "next": "^12.1.0",
 "next-pwa": "^5.4.0",
 "raw-loader": "^4.0.2",
 "react": "17.0.2",
 "react-dom": "17.0.2",
 "react-highlight-words": "^0.17.0",
 "react-markdown": "8.0.1",
 "react-syntax-highlighter": "^15.5.0",
 "reading-time": "^1.5.0",
 "rehype-raw": "^6.1.1",
 "styled-components": "^5.3.3"
 },
 "devDependencies": {
 "@types/react": "^17.0.35",
 "@types/react-highlight-words": "^0.16.4",
 "@types/react-syntax-highlighter": "^13.5.2",
 "@types/styled-components": "^5.1.24",
 "@types/webpack-env": "^1.16.3",
 "babel-plugin-styled-components": "^2.0.6",
 "eslint": "7.32.0",
 "eslint-config-next": "12.0.4"
 }
}
~~~

### Adding Typescript to the project
Rename your files from `.js` to `.tsx`. When you restart your server you should see an error in your Command Line Input (CLI) that you're trying to use **typescript** but don't have the necessary packages. 
Run the following command to resolve this error:

~~~js
npm install --save-dev typescript @types/react @types/node
~~~

After restarting your server you will notice 2 new files added to the root of your project, i.e. `next-env.d.ts` and `tsconfig.json`.
- `next-env.d.ts`: Nextjs type declaration file referencing its types inside of your `node_modules/next/types/global`
~~~ts
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
~~~

- `tsconfig.json`: contains the compiler options required to compile the project and specifies the root.
~~~js
{
 "compilerOptions": {
 "target": "es5",
 "lib": [
 "dom",
 "dom.iterable",
 "esnext"
 ],
 "allowJs": true,
 "skipLibCheck": true,
 "strict": false,
 "forceConsistentCasingInFileNames": true,
 "noEmit": true,
 "incremental": true,
 "esModuleInterop": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve",
 "baseUrl": ".",
 "paths": {
 "@components/*": ["src/components/*"],
 "@styles/*": ["src/styles/*"],
 "@posts/*": ["src/posts/*"],
 "@pages/*": ["src/pages/*"],
 "@utils/*": ["src/utils/*"],
 }
 },
 "include": [
 "src",
 "src/**/*",
 "next-env.d.ts",
 "**/*.ts",
 "**/*.tsx"
, "pages/_document.js" ],
 "exclude": [
 "node_modules"
 ]
}
~~~

### Installing styled-components
~~~js
npm install --save styled-components
~~~
Check out the <a href='https://styled-components.com/' target='_blank'>offical docs for styled-components</a> here. 

### Installing the styled-components babel plugin
This plugin adds support for server-side rendering, minification of styles, a better debugging experience (improving the naming for `classNames`👇🏽), minification and dead code elimination.
~~~js
npm install --save-dev babel-plugin-styled-components
~~~
Check out the <a href='https://styled-components.com/docs/tooling#babel-plugin' target='_blank'>offical docs for styled-components babel plugin</a> here. 

<figure>
 <img src='/images/better-classnames.jpg' alt='Better classNames'>
 <figcaption>Screenshot showing an improvement in the className naming (specifically the prepending of the className with fpr example Layout__LayoutWrapper) after adding the plugin</figcaption>
</figure>

Create a file `.babelrc` at the root of your project and add the following code:
~~~js
{
 "presets": ["next/babel"],
 "plugins": [
 ["styled-components", {
 "ssr": true
 }]
 ]
}
~~~

To be continued...

Samuel Edusa MD

Latest Posts

Contributing to the Pancreas Digital Open Source Insulin Bolus Calculator

How to deploy a React App to Github Pages

Monkeypox: A spreading danger

How I built this website