3 ½ / 4 Stars

Link to the Talking Cinema podcast deep dive

Why I love this movie

I loved the score. Anything Italian-ish and whimsical, I like. I think whimsical scores are underrated. And they work in comedies that are not outright comedies. The whimsical scores let the audience know the tone of the movie. It helps them be in on the joke.

I love movies shot on film, and this movie, like all movies from the 60s, is shot on film.

I also like how Caroline, who is supposed to be American but speaks Italian (dubbed, by the way, which all or most Italian movies filmed during that time were). But with no accent. Which got me thinking, do any country other than American movies depict foreigners in the same language but with an accent? Like Schindler’s List is in English with a German accent.

I didn’t mind the dubbing. I’m used to it. One of my favorite movies is “The Good, The Bad And The Ugly”; that movie is poorly dubbed. I thought about it while watching this movie on Plex, which is dubbed in English, but I like the Italian language too much.

I love the costumes and set design. I think this movie may have been more influential to Austin Powers than the Beatles’ movie “Help.”

But I also think this government controls everything in our lives. One of the sub-themes in the movie is that the government is controlling our lives - confiscating items from people’s homes, taking old people away from society, and locking them up.

And old people are a problem? I wonder if it is because of health care costs. Or that young and middle age people don’t like old people. I think it’s true, by the way. I think the government and people in charge in general, which are usually made up of old people, don’t like old people. It is just that people in power think they are different and not that old.

And I love the ending before the ending. And I think it would have been a better ending. But maybe not. They fell in love, but it was more lust than love. They still killed each other, or at least they thought. Caroline had doubts and was pressured to kill because the cameras were rolling, but Marcello gave Caroline a gun with blanks without her knowing. But Marcello just flat-out killed her, if it wasn’t for her body armor. He wasn’t pressured.

And would a forced marriage of two people who aren’t good and evil (I think both Marcello and Caroline don’t care about much) even last long? But Marcello is a man’s man, and Caroline wants a man’s man. She likes the company of effeminate men, but she doesn’t want to be with one of them.

I love this movie, not 4 out of 4 stars but 3 ½ out of 4 stars. Which is still very good.

Favorite Scenes

1. Caroline is starting to be conflicted when they transport the beach studio/home. You know she is having doubts about killing Marcello.
2. Marcello laughed when Caroline outsmarted him and had a gun pointing at him. The best defense is laughter. Accept death. It’s a nice fuck you.
3. Caroline is happy that Marcello is not dead. The money and fame are not what she wants. She wants a relationship. She wants a man. And not just any man, but a man’s man. When you’re in love, you always make mistakes.
4. My first thought - I loved how she shot him, and we thought Marcello died. Then I loved that he killed her. And wanted to kill her. I think the movie should have ended there - it would have been a sad ending, but better.

Flaws

I think the shootout with Olga and Lidia was just bad. But the movie is supposed to be ridiculous, and I think Elio Petri, the director, didn’t want to kill one or both of the leads.

Writing

The script is good, but I think the set design, acting, and mood carry the movie.

“An enemy a day keeps the doctor away.”

“I like effeminate men. They’re ideal friends for women. They’re great company. Have you ever been like them?”

Directing/Editing/Sound

From a technical level, it is great. All around. The camera movement and angles are incredible. It reminds me of the Coen brothers and Scorsese movies.

Acting

The acting is great. And playing it seriously with less dialogue with the main leads actually makes it more compelling to watch. Especially on rewatch.

3 ½ / 4 Stars

Link to the Talking Cinema podcast deep dive

Why I love this movie

The first hour is so good. It moves fast. We don’t even know Bond’s mission until about 45 - 60 minutes into the movie. I love that.

I also like that this is similar to License to Kill, which shows Bond going rouge from central command.

It is a shame that the combination of Peter Hunt, the director, and George Lazenby, the actor that plays Bond, did not make another Bond movie. They would have gotten better if they had kept making Bond movies.

I also like the humor; the comedy is played up in the movie’s first half.

And I love how Bond works with the 2nd biggest criminal organization to go after the number 1 biggest criminal organization. Sometimes you have to work with bad guys who are competitors of other bad guys.

Then finally, and this applies to all Bond movies, is the score. The score is so good. It’s right up there with Indiana Jones and Back to the Future movies. The score really makes the movie better.

Favorite Scenes

1. The intro - the first seven minutes. It shows the physicalness of Bond. Bond can fight. And the humor of Bond.
2. The car ride to Draco’s place to the whistling of the little guy sweeping to the fight scene to having a drink with Draco.
3. Does Draco have a master plan for Bond to go after Blofeld and Spectre? I didn’t think about it until the movie’s end, but that seemed to be his main motive - not to get his daughter married or be in better health.
4. M and Ms. Moneypenny’s brilliant setup motivates Bond to go after the criminal.
5. The scene at the bullfighting event - Theresa is amazing. She is different than the other Bond girls. She gets her dad, Draco, to tell Bond what he wants. So Bond is now not obligated to play along for information. Theresa wants love - true love. Not to be caught in the middle of the mission.
6. The montage of them is romantic and funny. So good. Bond is playing the long game. But he only has two weeks, though. Bond is a romantic. He loves women. He doesn’t like just the sex, but he likes the wooing. This Bond does sleep with other women, but he wants to settle down with Theresa. It is genuine.
7. The set-piece to unlock the safe is brilliant. He decides to look at the playboy instead of the read the newspaper while waiting.
8. The villain - a lot like Dr. Evil.
9. Alpine room - Women all around the world just hanging out.

Flaws

The extended ski chase scene is too long and not suspenseful. The 2nd half is not as good as the 1st half.

Writing

Here are my favorite lines in the movie:

“Do not kill me, Mr. Bond. At least we’ve had a drink. And then if you wish, I’ll give you another chance” - Draco.

“There is always something formal about the point of the pistol” - Bond.

“What she needs is a man to dominate her” - Draco.

“You must give me the name of your occultist” - Bond.

Directing/Editing/Sound

The editing is great. The hand-to-hand combat scenes were ahead of their time. Fast cutting, which I normally don’t like - but I like it in this film, playing with the film speed, and the sound effects are fantastic. Many movies now do the same thing, but this movie seems like an early pioneer.

Acting

I really really liked George Lazenby as Bond. I think he gets too much criticism. It is hard to be sandwiched between Sean Connery and Roger Moore. But Lazenby has good looks, the physicalness, and his acting is good. Sure he doesn’t have long dialogue or a scene where he is shouting, but most Bond movies don’t have that.

Also, he does show some vulnerable-ness in the movie - the scene where he flys in the helicopter (you can tell he is nervous), after the ski chase at the skating rink (he is nervous because he is surrounded and he gets scared by one of the giant snow monsters), and the ending where he cries over the death of his newlywed wife.

This is a different James Bond. I want more of this Bond.

3 ½ / 4 Stars

Link to the Talking Cinema podcast deep dive

Why I love this movie

It’s a revenge movie, and I love revenge movies. And this is a different Bond movie. It’s darker than the other Bond movies. You could say that Skyfall is somewhat of a dark movie with a revenge element, but Licence to Kill is flat-out a revenge movie.

And it’s a revenge movie, and this is a spoiler if you have been listening to this pod (we give spoilers), but Bond kills the villain at the end. No prison, have someone else kill him, or have the bad guy kill himself. Bond even tells the bad guy, Sanchez, why he is killing him. All the elements you need that are in a revenge movie, at least for my definition.

And this movie wastes no time, especially the first half. In the first 15 minutes, you are introduced to Bond, his friend Felix (and his wife, which ends up getting killed), who gets severely injured, and the bad guy. From there, you know what the movie is going to be. And Bond has no time to be the funny, witting guy. He is on a mission, but not from his boss. It is his own mission. He wants revenge.

Favorite Scenes

The first 8 minutes are off the hook. From the coast guard helicopter to the DEA handing a gun to Felix and then having them run, I think in slow motion, to get Sanchez. To Bond, with the strange look from the DEA and Coast Guard, performing a death-defying stunt to capture Sanchez’s plane.

The shark scene where Feliz gets severely hurt. I love the line - “See you in hell.” Felix just knows he is going to hell even though he is a good guy.

A short scene, but the look on Bond’s face when he finds out the bad guys killed Sharky. Bond was already on a mission to get revenge. Now the bad guys just turned it up a notch.

The scene with Q. Q is also in on this rouge mission too. He loves Bond. And he knows that Bond needs his help. It might be the most extensive that Q has been used in a Bond mission. Pretty cool.

Also, I love all the scenes with Benicio del Toro, who plays Dario - Sanchez’s henchman. Watching an actor play a small role in a movie before they get big is fun. And Del Toro has had a great career with The Usual Suspects, Snatch, Traffic (he won an oscar for that role), and Sicario.

The drug scene is where they mix it with petrol or some solution. Pretty ingenious idea.

Flaws

I could probably go with a shorter action set piece at the end. I’m not a big-action set-piece type of guy. But it’s the 80s and a Bond movie, so it is known to have action sequences. Also, this movie has a teenage audience, so you have to include that. But I do like this movie predates Fast and Furious, because a lot of that action at the end is very Fast and the Furious.

The movie would have been better served if it ended with Sanchez being lit on fire. But I guess you needed to see if Felix survived and if Bond ended up with Lupe or Pam.

Writing

Great script. Simple plot, but you don’t need something complicated for a revenge movie. I love how they set up what the movie is about right from the beginning.

Some of the lines by Pam, played by Carey Lowell, are a little weak. I don’t think it’s her fault. Movies from that time just had underdeveloped women characters. But Carey Lowell looks great. The same with Lupe, played by Talisa Soto.

Directing/Editing/Sound

This movie is directed by John Glen - who directed 5 James Bond movies. This was his last one and probably his best. He also edited 3 other Bond movies - On Her Majesty's Secret Service (1969), The Spy Who Loved Me (1977), and Moonraker (1979) - so he has a lot of experience making James Bond movies.

Acting

Timothy Dalton makes a great Bond. I think he got too much criticism for playing this role. It is just hard to follow Sean Connery and Roger Moore. The latter being a great all-time actor and the former having the great looks and timing to play Bond. But Dalton has the good looks and that edge to him - which serves him well in this movie because it is a darker movie.

I think because this movie was a disappointment compared to previous Bond movies, they wanted to do a reboot. They didn’t do another bond movie until six years after Licence to Kill.

And I think they wanted to reboot it to give it more humor and less dark.

Other

Bond has a lot of fans, but what I find interesting is how many people are interested in the casting of Bond. That is like it’s another whole thing in itself. It’s like the casting of Bond is its own headline. It has cultural significance. Even politicians would remark on who is playing Bond. It’s like Bond represents the type of guy we should honor and even strive to be, which can be problematic. Bond is a womanizer, but he does it for the mission.

The Problem

You have money and want to use it to make the world a better place. Giving money to a charity seems like a good idea. They have people that have dedicated their lives to helping others. Giving money to a charity will help more people than using your money to help people directly.

But is that money being used to help people in need? Is that money being used effectively, where the services the charity provides are helping people?

The first part, the money used to help the people in need, is the part web3, and blockchain can bring some transparency. The second part, the funds used effectively to help people, is a little tougher to solve and won’t be addressed in this article (or pod).

The Solution

The blockchain can be used as a public ledger to track the money donated to the charity and where that money is getting spent.

The benefits of the blockchain are that it is public, and any transaction that gets recorded on the blockchain can’t be deleted or edited.

1. So imagine if someone wanted to donate money to a charity that helps pay for a family’s energy bills.
2. There is a charity that only accepts cryptocurrencies as their donation, and that donation will be recorded on the blockchain.
3. The family sends the cryptocurrency to the charity, which is recorded on the blockchain.
4. The charity finds an eligible family that needs assistance with their energy bill.
5. The charity gets the family account number of the energy company that provides energy to that family.
6. The charity works with the energy company to help it accept cryptocurrency.
7. The charity sends the money to the energy company to pay for a family’s (or multiple families') energy bill. This transaction gets recorded on the blockchain along with the families’ account numbers.
8. The charity takes a percentage of the money donated to pay for its administration.
9. The person who donated the money can look up online where the money went and see how much was used to pay for the families’ energy bills and how much was used for the charity’s administration.

3 ½ / 4 Stars

Link to the Talking Cinema podcast deep dive

Why I love this movie

I came into this movie with low expectations. Actually, I came in with negative expectations. I thought it would be a blue state “know-it-all” who would make fun of the red state “dimwit” and that it would be a fake vengeance movie. The type of vengeance movie where there is no vengeance.

I was wrong. Yes, there was blue-state/red-state comedy, but then it became a mystery.

And I’ll give the ending away since I do give away spoilers since this movie review (and pod) is a deep dive, and you can’t do a deep dive if you don’t talk about the plot, the twists, and the ending.

But I never thought the character, Ben, played by B.J. Novak, would kill the bad guy. I never thought B.J. Novak would write a character that he would play himself that would kill another character. But he did. The balls of him to make a movie that makes fun of himself - because I think he did write the character to show that Ben is a loser. Not a bad guy. But a guy who is a big city snob. He only cares for himself. He cares only about his work, hooking up with chicks, wanting to be a voice that others hear and become famous in that elite academic way, and having a lot of fun with alcohol, parties, and more sex. Your classic workaholic hedonist that many upper middle classic liberal school graduates want to be.

That is why I love this movie. B.J. Novak decides to make fun of himself and people like him, and he doesn’t shy away from being a vengeance movie. And for it to be a legit good vengeance movie, you have to kill the person at the end. No way around it. No jail time. No bad guy is killing himself. You have to kill the bad guy or have the bad guy kill the good guy while the good tries to kill the bad guy. That is it. And B.J. Novak follows through with it.

Favorite Scenes

1. When it gets to Texas, it gets good. The funeral is great. The funeral has a picture of Ben. You can’t even see the dead girl’s face. Ben thinks of things to say, and he pulls it off. Short and sweet, all while ad-libbing the whole thing.
2. I love the guns in the truck. I think B.J. Novak fell in love with the red state.
3. Calling his producer Eloise - I think a single person’s dream is drinking, being on the internet, and living in a $2 million apartment. Not sure if they are making fun of that person that lives in that apartment. I’ll be honest, because I have a kid, and I’m in my 40s, and I don’t want to rule the world like I used to, but when I see people live like that, I just feel sorry for them. I feel like they live an empty life, and I wonder if B.J. Novak and Issa Rae, who plays Eloise, know that. That is why they made that apartment so outrageous - clean looking, expensive, great furniture, her drinking wine on the couch, face mask, nice clothes. Eloise calls him out - his life is empty. All he cares about is being an intellectual, hooking up, and being famous.
4. “Dead white girl, the holy grail of podcasts.” - Eloise
5. I never liked Ashton Kushner, but he is great in this movie. But it is obvious that he is the bad guy or the secret good guy. There are very few movies where a famous actor plays a small role at the beginning of the movie, and they don’t turn up to be bigger later in the movie. I can think of one movie - Inside Man, directed by Spike Lee, which has Willem Dafoe in a small, no-nothing role.
6. “You’re wasting my time, I might as well waste yours” - Gangster Sancholo.
7. “Why I like Whataburger, it’s always there.”
8. The scene where Shaw’s family is waiting for Ben after he checks out of the hospital. He is surprised that they are waiting for him. Also, I liked how they didn’t play up that scene. They could have made it gut-wrenching with crying, but it was kept low-key. I liked it.
9. The vengeance scene. I would prefer the shooting scene with no music playing. And maybe more of a darker tone. But that is just me picking on it. I was more surprised that he pulled it off. He shot him. And missed because he is not a guy with any experience with guns. The chances of missing the shot would be more realistic. I do wonder if Ben will suffer from PTSD because of this. Killing someone is not something you can just brush off.
10. In the end scene, Sharon Shaw, Abilene’s mom, played by J. Smith-Cameron, talks about life is about regret. It starts with regrets and ends with regrets. And the in-between is all regrets — very good dialogue.

Flaws

Quinten, played by Ashton Kutcher, was a great character. But it was flawed. I don’t think he would so brazenly give away to Ben that he is the one that left Abilene to die from a drug overdose.

Sure Quinten could have gotten away with it, as he said, but it would have ruined his reputation. Also, is he involved with dealing drugs? That would get him in trouble.

Or maybe he thought Ben would not have gone through with the podcast because of the scrutiny the Shaw family would have gotten. And Ben would want to protect his career and reputation and never release the pod.

I thought the Whataburger scene in the parking lot was a little much. But I think the movie needed one angry rant about the blue versus red states. Also, I think it needed to play up that Ben can be condescending douche.

Writing

The script is good because of its ending. The jokes and light-heartedness in the beginning make the ending so much better.

Directing/Editing/Sound

B.J. Novak can direct. I would have liked a darker ending. No music score. But other than that. No complaints. I loved the Texas landscape. It makes good cinematography.

Acting

The stand-outs are the cast that plays the Shaw family. Everybody is so good — I love Boyd Holbrook at Ty Shaw and the mom, played by J. Smith-Cameron. J. Smith-Cameron has a small role, but she is great in this movie.

And B.J. Novak is great. He doesn’t go over the top. And that is smart. There is no woe in me with his character.

Meet my latest project - ideas by robot

I love movies. So much so, I have a podcast where I do a deep dive on movies I love - Talking Cinema.

I love building web apps that I would use myself.

I love to write and have always wanted to write a screenplay.

So I created an app that helps you develop movie ideas - a one-sentence science fiction movie plot.

Front-End (GitHub repo)

This front end is as simple as it gets. I used HTML, CSS, and Vanilla Javascript. That’s it. It’s amazing what you can build with no front-end framework.

The webpage has one button that makes a fetch request for a one-sentence movie plot to the back-end server and retrieves that request to display on the front-end.

Back-End (GitHub repo)

I built an express nodeJS server for the back-end. I used GOT for my HTTP request library.

I send some sample prompts to the GPT-3 API so the AI knows what I am asking for and expecting in return.

In this case, I want the AI to send me a one-sentence science fiction movie plot.

After sending the prompts to the GPT-3 API, I get a one-sentence movie plot from the AI. The movie plot then gets sent back to the front-end, ready to be displayed on the web page.

Summing it up (TL;DR)

1. Created a Front-End with HTML, CSS, and Vanilla JS
   1. One button to fetch a science fiction movie plot from the back-end
2. Created a Back-End express NodeJS server
   1. Used the GOT library to communicate with the GPT-3 API
   2. Send the request back to the Front-End to display the one-sentence movie plot on the web page

I get stuck all the time when I’m coding. Actually, I get stuck and look for answers or workarounds online more than I do coding. Probably at a 3:1 ratio of troubleshooting to coding.

Here is an example of me looking for an answer and finding one.

Problem

I’m building an app using Firebase for my authentication. I use Firebase JWTs to ensure the user is logged in and has permission to access the app.

Firebase uses a JSON file containing a secret key for verifying the JWT on my backend server.

I don’t want to put the JSON file containing the secret key in my repository, which is a no-no.

One solution is to put the JSON file as an environmental variable in the .ENV file.

However, the JSON file has some special characters and blank spaces. When I run the code to verify the token, it fails because my code doesn’t read the variable correctly in the .ENV file.

Solution

Google

I googled “firebase auth jwt environment variables.” The first results are from the Firebase Docs. I read the docs but didn’t find the solution.

So I go back to the google results and see some Stackoverflow solutions. I found one solution, but it was rather complex, and some people responded that this solution didn’t work for them.

I just need to be able to read the JSON data from the .ENV file. It got me thinking I should just google how to do that instead of including Firebase. Maybe this will get me more results that will work.

So I googled it again, but with a new search - “how to store JSON in env.” I got a result with a blog titled “How to Store JSON in an Environment Variable.”

This was a perfect solution. It recommended encoding the JSON with base64 and storing that in the .ENV file. And then, in the code, you decode the env variable containing the JSON secret key.

That worked!

Summing it up (TL;DR)

1. When I run into problems, I do the following:
   1. Google
      1. Search Results
         1. Docs
         2. Stackoverflow
         3. Blogs

As far back as I can remember, I always wanted to be a film director.

There is still a possibility that I can be a director. With YouTube, I can upload a short film that I recorded and edited on my phone…and voilà, I am a director.

Being a developer is like being a director. A director creates. Well, a developer creates too.

I want to Build Stuff to Improve People’s Lives

And with web development, the developer doesn’t even need a lot. It still amazes me that you need a text editor (I prefer VS Code) and a browser (Chrome), and you can create a fantastic web application. You don’t need a powerful computer or fancy developer tools.

I wanted to be a developer when I realized that a developer could create with basic (and free) tools.

I wanted to create and build stuff. And to help people improve their lives.

Being a developer allows me to do that. I can create a web app that can improve the lives of others.

My first web app was a breathing and meditation app — a simple app created with HTML, CSS, and JavaScript.

It satisfied the part of me that wants to build stuff. And it fulfilled the part of me that wants to help people - breathing and meditation can increase happiness and reduce anxiety.

Using my developer skillset, I can create web apps to help people that cost little money to myself and those I want to help. It does cost me time to learn the developer skills to build the web app. But that is time well spent, which leads me to the second reason I want to be a developer.

Exercising my Brain

Sometimes I can get in a rut and live on autopilot. I don’t do anything to push my brain. And that is not good. We need to exercise our brain so it doesn’t become mush. Exercising your brain helps prevent cognitive decline, increases mental capacity, and improves memory.

I needed to challenge my brain, and when I got interested in wanting to build web apps - I found my brain exercise - coding.

Coding makes my brain exercise from aligning elements on the web page to figuring out how to save data to a database to set up a local and cloud environment for your web app.

There are days I want to shake my computer because I keep getting errors, but eventually, I figure out what is causing the issue or find a workaround that makes the issue obsolete. All of that is exercising my brain. And it doesn’t feel like a chore like physical exercise because I am also working on something I love - building stuff that helps other people.

Summing it up (TL;DR)

What made me want to be a developer?

To create and build stuff. Being a developer, I can make a web app with little monetary investment.

To help improve other people’s lives. Being a developer, I can create a breathing and meditation app. I am working on a web app where people can read stories of others receiving gratitude that AI generates. Reading gratitude stories can reduce anxiety, increase motivation, and be optimistic.

The Problem

Your son or daughter wants a new e-bike or something rather expensive. As a parent, you don’t want to spoil your kids with costly gifts they may or may not use.

But kids persist and will keep begging, persuading you to buy them that gift.

So you make a deal with your kid that if they get straight A’s, you will buy them an e-bike.

From the kid’s perspective - you get straight A’s, and your parents still don’t buy you that e-bike. They say the e-bike is too dangerous, which they may have a point, but they did break their word.

And the parents will say that we didn’t have a formal contract and we're just joking or saying it so you would concentrate on your grades.

The parents and kids could have made a contract, but who will enforce that? The parents can just disregard the agreement.

The Solution

That is where the smart contract could solve this problem.

A smart contract is code that runs on the blockchain - a decentralized, lightweight database where entries into that database can’t be edited or deleted.

A developer or a no-code program can be used to create a smart contract.

So how would this work?

1. Imagine there is a no-code website that creates smart contracts designed to look up your kid’s grades at school
2. You would go onto this smart contract website
3. Create a smart contract with the following details
   1. Checks to see if your kid got straight A’s from the school’s report card website
      1. The school report card website can provide an API that you can use in the smart contract
      2. Or, if there is no API, you can enter the username/password for the report card website, and the smart contract will scrape the webpage for your kid’s grades
   2. If the kid did get straight A’s, then trigger a purchase of the e-bike using funds from the parent’s bank account or credit card
      1. The bank account or credit card number will be encrypted in the smart contract so no other party can steal it
         1. Cryptocurrencies can be used too
            1. The smart contract will have the address and amount of the cryptocurrencies needed to purchase the e-bike.
   3. The smart contract would run the day after the school’s report card is published.

Running the smart contract:

1. The day after the school’s report card is published, the smart contract will run
2. It will use the API or username/password to login into the school’s report card website
3. Check your kid’s grades
4. If your kid got straight A’s, it would use the credit card number to purchase the e-bike from the e-bike’s website.
5. The e-bike gets delivered to your door for your kid to use

I see smart contracts having a lot of value for little things like motivating your kids to get good grades.

The Problem

How do you know the food you eat is from a local organic farm? Sure, the label on the bag of organic spinach says it is organic and came from a farm in the same state you live in. But is that label correct? Could the company that put that spinach in that bag be lying? The spinach could have come from an out-of-state farm, and the spinach is not organic. It was grown conventionally like most spinach, but someone along the way decided to just slap an organic label on it and charge the customer twice as much.

Ouch! The same goes with maybe the Alaskan salmon that you bought. Did it come from Alaska? Is it wild? Or is it farmed off the coast of the Atlantic?

Can you trust the labels on the food packaging? If the label says, it must be true. Or is it? Could there be a way to verify that your food is organic? Or, at the very least, you could see where the spinach originated from and what stops it made along the way before it got to your table? Similar to how you can see where a UPS package originated from and the multiple stops it took before it got to your door.

That is where Web3 and the blockchain can come in.

The Solution

First, we need a farm-to-table blockchain that farmers, distribution companies, and grocery stores would use to record the time and place where the food was picked, processed, packaged, transported, stored, and bought.

Imagine the customer buying organic spinach at the grocery store could scan a QR code or barcode using their phone and see where the spinach originated from, how it was grown, when it was picked and bagged, and when it arrived at the grocery store.

Sure the input data on the blockchain could be incorrect, but at least you are getting a level of transparency that you didn’t get before.

So how would this work?

1. Assuming a farm-to-table blockchain has been built, all the players - farmers, food processing and packaging companies, food distributors, and grocery stores- have agreed to use this blockchain.
2. The farmer picks the organic spinach that is ready to be sent for processing and packaging. The farmer uses an app on their phone to log how much spinach was harvested. The app will record the amount, time, and date, along with the farmers’ information - the farm’s name, organic certification, if it had one, and possibly the name of the farmer that picked the spinach.
3. The food processing and packaging company goes to the farm to pick up the organic spinach. The person from the processing/packaging company uses their phone to log the receiving of the spinach. The app on the phone will log this onto the blockchain.
4. Each time the spinach gets transferred to a location, the person receiving the spinach would log the transaction on their phone, then record that transaction on the blockchain.
5. The packaging company would bag the spinach and put a QR code on the bag of spinach. The QR code will refer to an ID already created on the blockchain.
6. The food distributor will pick up the bags of spinach and scan the QR code as they load them into their truck. This will record the date/time and distributor onto the blockchain.
7. When it arrives at the grocery store, the grocers will scan the bags of spinach to record the date and time of receiving the spinach.
8. The customer can scan the QR code on the bag of spinach using their phone. The customer can see which farm the spinach came from, the date and time, and which farmer picked the spinach. The customer can see if the farm itself is certified organic. The customer can also see all the stops the spinach took up when it got to the grocery store.

Now the customer knows that this spinach came from an organic farm in the same state they live in.

Having the blockchain can also help when food poisoning outbreaks occur from a specific batch of spinach. When an outbreak occurs to a particular bunch, that can be recorded on the blockchain. A customer can get notified on the phone that the bag of spinach they bought has been contaminated.

There are some potential issues with data input, the person logging the information into the blockchain could be incorrect, but at least it leaves a trail. And that trail is on the blockchain, where the data can’t be edited or deleted. If someone finds out later that there is misinformation, we can find the source of the error and prevent that from happening again.

The problem with Healthcare Research is that most research involves white people. And more specifically, white males. And non-white races, mainly black and brown races, are nonexistent. Women are more “complicated.”

Now Web 3 and the blockchain won’t solve having other races be in RCT, random controlled trials - the gold standard in scientific research. Researchers need to recruit other non-white races for their studies to solve that. Also, RCTs are expensive, and many countries with money tend to be the US and Western Europe.

Not every recommendation or advice that comes out of the healthcare research would apply to women or non-white races. Most health recommendations don’t apply to women and non-whites.

But there could be a solution that uses the blockchain and AI to analyze health data, find correlations, and develop better recommendations for specific races, gender, or even patient.

The solution

If we can get a patient’s health data onto the blockchain that involves all genders and races, then we can have data scientists and AI analyze that data and find the correlation. The more patients and their data we can get on their blockchain, along with a greater diversity of genders, races, and ages - we can get recommendations on better health specific to gender and ethnicities.

The advantage of the blockchain is that it is public, and we can’t edit the data - once it’s on the blockchain.

Any researcher or AI can look at the data and analyze it. Researchers have biases that do affect their analysis. The researcher may not think they have any bias, but they are human, and humans have biases even if we don’t think we do. The data could be the same, but two researchers could come up with two different conclusions.

Having the data on a blockchain allows anybody, academic researchers or just someone interested in data science, to look and analyze the data.

We can see competing companies or individuals that would create their own AI to research the data. Some AIs could be better than others.

This could create a marketplace of AIs so patients can submit their data and get a health risk assessment along with any specific treatment recommendations or lifestyle changes.

Potential Problems

Since the blockchain is public, no one wants their health data for all to see - mainly if it is used to discriminate against you. It could be a job that may discriminate against you based on your health because they may not want to pay for your health insurance, or it may affect your career. Terrible, but that could happen.

One way would be to make the data anonymous, so there is no identifying information that can be tied to you - no name, driver’s license, or social security number.

The patient must also consent to submit their health data to the blockchain. And the patient could also choose which data they wish to withhold - like age, race, height, or weight - even though that data would help researchers and the AI find any specific health recommendation by race, gender, or age.

But the patient should have to consent and be able to decide which data gets onto the blockchain.

How will it work

1. Assumption - The patient uses the blockchain and off-chain to store their medical records.
2. A health research company wants to research cardiovascular disease and wants access to many patients across many genders, ages, and biomarkers.
3. The patient hears about this and decides they want to participate in this research.
4. The patient goes on a website and selects the cardiovascular research they want to submit their health data.
5. The patient then enters their patient ID.
6. The patient then selects which data they would like to submit.
   1. The patient selects all their data or some of their data.
      1. This includes:
         1. Gender
         2. Age
         3. Height
         4. Weight
         5. Medical History
            1. Surgeries
            2. Current and Past medications
            3. Allergies
            4. Family Medical History
            5. Past doctor visits
            6. Supplements
7. The patient then consents and submits the data but not their patient ID.
   1. That way, the research company will not be able to tie the patient’s health data to a specific person.
8. The research company will take that data and store if off-chain
9. Data scientists and AI programs can then analyze that data.
10. With more patient data, the better for the data scientists/AI to find correlations on what causes cardiovascular disease.
    1. They may find that a specific race and gender are more susceptible to cardiovascular disease, that they should see a cardiologist, and may need treatment earlier than other races and genders.

Conclusion

Web 3 and blockchain allow the patient to own the medical records that they can access anytime. And it will enable them to select and submit which health data they would like researchers to use.

Web 3 allows health researchers to get more patient data and more variety of patients. The more data a data scientist can get their hands on, the better the recommendations will be.

People tend to lie or not tell the whole truth when being asked about their health. Web 3 makes it easier for patients to submit their health records to researchers. And Web 3 allows researchers to quickly get more patient data and accurate health data instead of relying on patient surveys that may not reflect reality.

The problem

When a patient visits the doctor, the doctor asks you questions about any health issues, then does an examination, and at the end gives you recommendations that could involve medications, treatments, and lifestyle changes.

At the same time, the doctor is making notes on a paper chart, which a nurse or the front desk will later enter into the computer. Sometimes the doctor will enter their notes and assessment directly into the computer.

Some doctors don’t even have electronic medical records. They have a paper chart. In those cases, Web3 and the blockchain won’t solve that issue. Yikes, but they would need to upgrade to go electronic. But that will improve in the future when dictation and AI get to the point where the doctor can speak into a microphone with their patient’s notes. The AI will record and correctly categorize those notes into an electronic medical record.

Okay, back to the problem. If the doctor’s office or hospital has a computer to store the patient’s health records, the patient will usually have access to those records online.

But what if the patient switches health providers because of a new job that uses different insurance. Or you may have moved out of state. Or you don’t like your doctor and wish to go somewhere else.

When that happens, the new doctor will ask for your health records from your previous doctors. And usually, the records are transferred by fax. Why? Because most doctor practices are old school. They may not have the same healthcare system as the other doctor. They may not even have email, strange but true. Doctor offices tend to be very low-tech outside of medical equipment.

Faxing has a lot of issues. Sometimes the fax fails to send, and the sender has to send it multiple times. Sometimes the receiver says they never received it, putting the burden on the patient to ensure the data gets over to the new doctor.

Sometimes the fax runs out of paper, so the new doctor only gets a partial set of the patient’s records.

Yikes, I won’t go through all the problems with faxing, but we can see the issues that arise with faxing medical records.

Not to mention the person receiving the fax could be the front desk. Should the folks at the front desk be able to view the patient’s medical records?

The other problem is that the patient doesn’t own their medical records. They can’t just switch doctors without telling their previous doctors that they must send their medical records to their new doctor.

Why can’t patients go to any doctor they choose and bring their medical records to the office?

The solution

This is where a Web3 and the blockchain could be a solution. The patient and the doctor can agree to enter the patient’s medical records.

How will it work

1. A Healthcare Web3 Patient medical record storage system would need to exist

   a. And there could be competing storage systems

2. The patient would sign up for this Web 3 storage system.

   a. A recurring payment would need to be involved. If the major health insurers agree to support the Healthcare Web3 Patient medical record storage system, the insurers can cover the expense.

3. The doctor would then enter the patient’s health medical records into the website.

4. The website backend would record the data into the blockchain

5. The patient’s identifying information would be stored in the blockchain

   a. The patient’s medical records would be encrypted and stored off-chain.

   b. Why off-chain? Storing on the blockchain can be expensive because of the gas fees, and the blockchain is not designed to store large amounts of data. That is where off-chain storage comes in.

6. If the doctor needs to review the patient’s medical health records, they will go onto the website and request access.

7. The patient will get a request that the doctor wants to access their records, and the patient will need to approve the request if the doctor wants to view the medical records.

   a. This could be tedious for the patient and the doctor. Especially if the patient is not near their phone and the doctor only has time right now to view the records.

   b. A potential solution would be that the patient would designate the doctor to view the records anytime they want for a specific period - a week, month, or forever in the future as long the patient is seeing the doctor.

8. The patient approves the request. The website then authenticates that request on the blockchain, redirecting the website to retrieve and decrypt the medical records stored off-chain.

9. The doctor can view and update the medical records, which will then be stored off-chain.

10. The website will notify patients that their medical records have new and updated information. The patient can view their records anytime.

11. If a patient changes doctor, they can give their ID to the new doctor.

12. The new doctor would use the patient’s ID on the website to request access.

13. The approval process with the patient and doctor would occur.

The Benefits

The benefit of having the patient’s data on the blockchain is that they can quickly bring their health records when they see a new doctor.

No more faxing. More privacy. The front desk and other personnel that work in the doctor’s office won’t be able to view your records even if it is not intentional.

The best benefit is that patient owns their medical records. Not the doctors. Not the insurance companies. And if the patient wishes to not share their medical records with the doctors or insurance companies, they can revoke access to the website.

I plan to do part 2 on this use case on how having the patient’s medical records stored on the blockchain and off-chain can be used for medical research.

One of my favorite Twitter accounts I follow is Derek Thompson - Staff writer at The Atlantic and host of the “Plain English” podcast at The Ringer. When Derek writes Twitter threads, he will sometimes write his bias, letting the reader know where he stands. I love that. I will do the same.

• I’m a Web3 believer and skeptic.
  • I think Web3 will have a future and disrupt many industries.
  • I don’t believe Web3 will take over the world.
• I’m lukewarm on a lot of the mainstream tech journalism.
  • I think they are dismissive of the new tech because they don’t like the founders - petty but true.
  • But I’m willing to change my mind after reading Charlie Warzel’s excellent article - The Petty Pleasures of Watching Crypto Profiteers Flounder.
    • I know that is a link to an essay. But the writing is straightforward, and Warzel is a professional and gifted writer.
• I find tech buzzwords the bane of my existence. They are just an excuse to sound smart to impress others and increase the word count on an article or blog.
  • If an ordinary person talked like a Web3 VC in a pitch meeting to other VCs, the VCs would turn off their brain and leave the meeting physically or mentally.
• It’s going to take some time on how Web3 will be used. Internet Technologies were invented in the late 1970s and early 1980s, but they didn’t take off until the mid-1990s, when the World Wide Web was invented.

Charlie Warzel’s article - The Petty Pleasures of Watching Crypto Profiteers Flounder

This article made me laugh and points out why I can’t read most of the blogs about Web3. I can read a technical blog where a developer writes how they created a Web3 app. But a blog on why Web3 will rule the world written by VCs and investors is not a good reading experience. I think these writers are obsessed with word count. They use a lot of buzzwords that make no sense. They could take a lesson from one of my favorite bloggers - Flavio Copes. He writes short, easy-to-read blogs that give you the information you need and nothing else. And Google rewards him well with his blogs showing up on Page 1 on many different topics. So I’ve decided to write about a potential real-life Web3 use case. I may expand this to a blog series where I write about one use case weekly.

Potential Real-Life Web3 Use Cases - Streaming Music and Artist’s Royalties

Many people listen to music using a streaming service - Spotify, YouTube Music, or Apple Music. They are great. They have an extensive music library, and the customer only has to pay for the streaming service, not each song they listen to.

I don’t think that model will go away for music listeners.

So Spotify gets money from customers who listen to music on their platform. Then Spotify pays the money to the music rights holders (ex - record labels). The music rights holders then pay the artists their cash.

Money flow:

Customer → Spotify → Music Rights Holders → Artists

This model works, but Spotify and Music Rights Holders could fudge the numbers on how many people stream an artist’s music. Ultimately, the artist may not get their fair share of the money.

Web3 could solve this. Spotify could work with the Music Rights Holders and artists to create a smart contract, code on the blockchain, that would do the following:

1. Customer listens to an artist’s song using Spotify.

2. As the customer plays the song on their phone, the Spotify app on the phone will communicate with the smart contract on the blockchain.

3. The smart contract will record the number of times the song is streamed on the blockchain.

4. Spotify will pay the Music Rights Holders based on the number of times that song has been played, which is publicly available for everyone to look up on the blockchain.

5. Then the Music Rights Holders will pay the artist.

The smart contract will most likely be written by a developer, but no code is coming where the artist could write the smart contract by themselves. Everyone will review the smart contract to make sure the details are correct. This allows artists to determine how often their songs are streamed and how much they will get paid without relying on Spotify and the Music Rights Holders for that information.

Web3, smart contracts, and the blockchain keeps everybody honest and ensure the artists get paid their fair share.

• Intended Audience
• What are we Building?
• Prerequisite
• Folder Structure
• Create Layout with HTML and CSS
• Install Netlify CLI
• Write Client Side JavaScript
• Write Netlify Functions
• Test Locally

Intended Audience

• Experience using NPM to install packages
• Newbies are welcome. Follow along and google (I use DuckDuckGo) anything you need more clarity on. Intermediate/Advanced programmers do this all the time.

What are we Building?

• A website (demo link) that calls the Ron Swanson Quotes API, using Netlify Functions (serverless), and displays the quote.
• We will be using HTML, CSS, and Vanilla JavaScript to build the website.
• The code is publicly available at GitHub.

Prerequisite

• Node.js - here is a link to install
  • this is needed to test Netlify Functions locally

Folder Structure

project folder
│   .env
│   .gitignore
│   index.html
│   netlify.toml
│   script.js
│   style.css  
│
└───functions
│   │   ronSwansonQuotes.js

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<title>Ron Swanson Quotes</title>

<body>
    <header>
        Ron Swanson Quotes
    </header>
    <main>
        <p id="ron-swanson-quote"></p>
    </main>
    <footer>
        made with love @codingraj
    </footer>
</body>

<link rel="stylesheet" href="style.css">

/* Box sizing rules */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Set Grid Layout, min-height, some color, and padding on the top and bottom */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: #d1bdf7;
  place-items: center;
  padding-block: 2vw;
}

npm init -y

node_modules
# Local Netlify folder
.netlify
.env

npm install netlify-cli --save-dev

npm install node-fetch@2.6.5

[functions]
  # Directory with serverless functions, including background functions,
  # to deploy. This is relative to the base directory if one has been set, 
  # or the root directory if a base hasn’t been set.
  directory = "functions/"

const fetch = require("node-fetch");

const API_ENDPOINT = "https://ron-swanson-quotes.herokuapp.com/v2/quotes";

exports.handler = async (event, context, callback) => {
  return fetch(API_ENDPOINT)
    .then((response) => response.json())
    .then((data) => ({
      statusCode: 200,
      body: JSON.stringify(data),
    }))
    .catch((error) => ({ statusCode: 422, body: String(error) }));
};

// url for Netlify Functions. When Netlify builds the site, it places all functions in the "/.netlify/" folder
const quoteNetlifyFunctions = "/.netlify/functions/ronSwansonQuotes";

//call api when page loads
callQuoteAPI();

//call netlify functions for api
function callQuoteAPI() {
  fetch(quoteNetlifyFunctions)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      //display the quote on the HTML Page
      document.getElementById("ron-swanson-quote").innerText = data;
    })
    .catch((error) => console.error(error));
}

<script src="/script.js"></script>

npx netlify dev

We will build a backend with Express.JS that receives the uploaded files and store them in Web3.storage, decentralized storage backed by Filecoin.

The final result will be a website maker, (demo link), that will create a decentralized website - example.

My Table of content

• Intended Audience
• What are we Building?
• Prerequisite
• Folder Structure
• Create Frontend Website
• Create Express.JS Backend Server

Intended Audience

• Experience or familiarity with creating a full-stack app
• Newbies are welcome. Follow along and google (I use DuckDuckGo) anytime you need more clarity. Intermediate/Advanced programmers do this all the time.

What are we Building?

• A website (demo link) can create and deploy a one-page decentralized website
• We will be using HTML, CSS, and Vanilla JavaScript to build the frontend website.
• We will be using the expressJS framework to create our backend server.
• The frontend code and backend code is publicly available at GitHub.
  • They are split up into two repos. For some reason, I don't like mono-repos, but I'm willing to change my mind.
• We won't be covering the code step by step with an explanation.
  • Instead, I will explain what the code is doing at a high to medium level

Prerequisite

• Any code editor (I use VSCode)
• Node.js - here is a link to install

Folder Structure

Frontend

project folder
│   index.html
│   script.js
│   style.css

Backend

project folder
│   .env
│   .gitignore
│   server.js
│
└───controller
│   │   createFolders.js
│   │   createHtmlFile.js
│   │   storeFilesToWeb3Storage.js
│   │   uploadFilesFromClient.js
└───routes
│   │   receiveFilesFromClient.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="make web3 decentralized websites using Web3.storage"
    />
    <meta name="keywords" content="web3 decentralized web3.storage" />
    <meta name="author" content="codingraj" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/style.css" />
    <script src="/script.js" defer></script>
    <title>Web3 Static Website Maker</title>
  </head>
  <body>
    <header>
      <div class="logo-title">Web3 Decentralized Website Maker</div>
    </header>
    <main>
      <h1>Create a one page website hosted on Web3.storage</h1>
      <br /><br />
      <p>
        Get your
        <a href="https://docs.web3.storage/#get-an-api-token" target="_blank">
          Free Web3.storage API Token here</a
        >
      </p>
      <br />
      <div class="card">
        <label for="website-title">Web3.storage API Token</label>
        <span class="inputRequired"></span>
        <span class="incorrectAPI" id="incorrectAPI-id"></span>
        <br />
        <input
          type="text"
          name="api-token"
          id="api-token-id"
          placeholder="API token not saved on the server"
          required
          autofocus
        />
        <br />
        <br />
        <label for="header-title">Header Title</label>
        <span class="inputRequired"></span>
        <br />
        <input
          type="text"
          name="header-title"
          id="header-title-id"
          placeholder="ex - I love pineapple on pizza"
          required
        />
        <br />
        <br />
        <label for="">Upload Image</label>
        <span class="inputRequired"></span>
        <br />
        <input
          type="file"
          accept="image/*"
          name="image-file"
          id="image-file-id"
          required
        />
        <br />
        <br />
        <label for="image-alt-text">Image Alt Text</label>
        <br />
        <textarea
          name="image-alt-text"
          id="image-alt-text-id"
          placeholder="ex - a slice of pizza with pineapple toppings on a paper plate"
        ></textarea>
        <br />
        <div class="buttonRequired" id="buttonRequired-id"></div>
        <br />
        <button id="generate-button-id" data-cy="generate-button">
          Create Website on Web3.storage
        </button>
        <br /><br /><br />
        <a class="web3-website-link" id="web3-website-link-id" target="_blank”">
          your new website
        </a>
      </div>
    </main>
    <footer>made with <span class="heart">&hearts;</span> @codingraj</footer>
  </body>
</html>

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
.logo-title {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

:root {
  --font-family: "Merriweather Sans", sans-serif;

  --color-background-header-footer: #d1bdf7;
  --color-button-background: #1a45df;

  --color-primary-font: #000036;
  --color-secondary-font: #ffffff;
  --color-complimentary-font: #1a45df;
  --color-placeholder-font: #4e5b62;

  --font-size-sm: clamp(0.5rem, 0.5rem + 1.5vw, 2rem);
  --font-size-100: 0.775rem;
  --font-size-200: 0.875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.125rem;
  --font-size-500: 1.25rem;
  --font-size-600: 1.5rem;
  --font-size-700: 1.875rem;
  --font-size-xl: clamp(2rem, 1rem + 3vw, 5.75rem);
}

h1 {
  font-size: var(--font-size-700);
  line-height: 1.1;
}

.logo-title {
  font-size: var(--font-size-700);
}

/* Set Grid Layout, min-height, some color, and padding on the top and bottom */

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 5fr auto;
  min-height: 100vh;
  gap: 2vw;
  font-family: var(--font-family);
  text-align: center;
}

header {
  font-size: var(--font-size-700);
  grid-row: 1 / 2;
  padding-block: 1vw;
  background: var(--color-background-header-footer);
}

main {
  grid-row: 2 / 3;
}

footer {
  padding-block: 1vw;
  grid-row: 3 / 4;
  background: var(--color-background-header-footer);
}

/* # card   */

.card {
  background: var(--color-background-header-footer);
  outline: none;
  padding: 1.5rem;
  border-radius: 8px;
  width: 90vw;
  margin: auto;
}

@media only screen and (min-width: 50em) {
  .card {
    width: 60vw;
  }
}

input {
  padding: 0.75em 0.5em;
  border: 2px solid;
  border-radius: 4px;
  font-size: var(--font-size-300);
  width: 90%;
}

label {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 2;
}

/* # input and textarea fields   */

input:required {
  border-color: #1a45df;
  border-width: 2px;
}
textarea {
  width: 90%;
  height: 15%;
  padding: 0.75em 0.5em;
  border: 2px solid;
  border-radius: 4px;
}

@media only screen and (min-width: 50em) {
  input,
  textarea {
    width: 70%;
  }
}

::placeholder {
  color: var(--color-placeholder-font);
  font-size: var(--font-size-100);
}

/* # buttons  */

button {
  border: none;
  background-color: var(--color-button-background);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font-size: var(--font-size-sm);
  color: var(--color-secondary-font);
  cursor: pointer;
  text-align: center;
}

.inputRequired:after {
  content: "required";
  font-size: var(--font-size-100);
  color: var(--color-complimentary-font);
  margin-left: 0.5vw;
}

/* # error message display and style   */

.buttonRequired {
  display: none;
}

.buttonRequired:after {
  font-size: var(--font-size-100);
  color: var(--color-complimentary-font);
  margin-left: 0.5vw;
}

.incorrectAPI {
  font-size: var(--font-size-100);
  color: red;
  margin-left: 0.5vw;
}

/* # decentralized website link returned from server   */

.web3-website-link {
  border: 5px solid orange;
  padding: 1vw;
  width: fit-content;
  margin: auto;
  animation: blink 1.5s infinite;
  display: none;
}

/* # loading animation after user clicks button   */

.loading {
  position: relative;
  overflow: hidden;
}

.loading:before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  z-index: 1;
  background: pink;
  animation: slide 1.5s ease infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(340%);
  }
}

@keyframes blink {
  0% {
    border-color: lightgreen;
  }
  50% {
    border-color: darkgreen;
  }
  100% {
    border-color: lightgreen;
  }
}

/* # heart color for footer   */

.heart {
  color: red;
}

// declare environment
// to determine API url
let env = "dev";
let url;

if (env === "dev") {
  url = "http://localhost:8080/upload-files";
}

if (env === "prod") {
  url = "https://web3-website-maker.herokuapp.com/upload-files";
}

// select button Id
const createWebsiteButton = document.getElementById("generate-button-id");

// add click event listener that
// will get Input Ids, Input Values
createWebsiteButton.addEventListener("click", async () => {
  const apiTokenInput = document.getElementById("api-token-id");
  const fileInput = document.getElementById("image-file-id");
  const headerTitleInput = document.getElementById("header-title-id");
  const altImageInput = document.getElementById("image-alt-text-id");

  // check if Input fields is complete
  // if complete then call Function uploadFile
  // pass file selected, api token value, alt image value, and header title value
  if (
    apiTokenInput.value != "" &&
    headerTitleInput.value != "" &&
    fileInput.value != ""
  ) {
    uploadFile(fileInput, apiTokenInput, altImageInput, headerTitleInput);
  } else {
    // if the fields are incomplete
    // display error message
    document.getElementById("buttonRequired-id").style.display = "block";
    document.getElementById("buttonRequired-id").style.color = "orange";
    document.getElementById("buttonRequired-id").innerText =
      "fill in required fields";
  }
});

async function uploadFile(
  fileInput,
  apiTokenInput,
  altImageInput,
  headerTitleInput
) {
  // create random 4 digit number to create folder on server with a unique name
  var folderName = String(Math.floor(1000 + Math.random() * 9000));

  // grab website link element ID
  // we will use this to display the link after a successful response from the server
  const websiteLink = document.getElementById("web3-website-link-id");

  // add file and user input to FormData object
  const userFormData = new FormData();
  userFormData.append("folderName", folderName);
  userFormData.append("image", fileInput.files[0]);
  userFormData.append("headerTitle", headerTitleInput.value);
  userFormData.append("token", apiTokenInput.value);
  userFormData.append("altImage", altImageInput.value);
  console.log([...userFormData]);
  createWebsiteButton.classList.add("loading");
  createWebsiteButton.innerText = "wait";
  websiteLink.style.display = "none";
  document.getElementById("buttonRequired-id").innerText = "";
  document.getElementById("incorrectAPI-id").innerText = "";
  document.getElementById("api-token-id").style.borderColor = "#1a45df";

  // send `POST` request
  await fetch(url, {
    mode: "cors",
    method: "POST",
    headers: {
      Accept: "application/json",
    },
    body: userFormData,
  })
    .then((res) => {
      // if status is OK from server, then set the button to its original text
      if (res.status === 200) {
        createWebsiteButton.classList.remove("loading");
        createWebsiteButton.innerText = "Create Website on Web3.storage";
        return res.json();
      }
    })
    .then((data) => {
      // display the website link with the URL from the backend server
      websiteLink.style.display = "block";
      websiteLink.href = data.url;
      headerTitleInput.value = "";
      fileInput.value = "";
    })
    .catch((err) => {
      // catch error and display a message
      // apply border styling
      // set the button to its original text
      console.log("error: " + err);
      document.getElementById("api-token-id").style.borderColor = "red";
      document.getElementById("incorrectAPI-id").innerText =
        "Something went wrong. Your API token might be incorrect";
      createWebsiteButton.classList.remove("loading");
      createWebsiteButton.innerText = "Create Website on Web3.storage";
    });
}

npm i express express-fileupload express-validator web3.storage cors dotenv

npm i nodemon -D

"type": "module",
"scripts": {
    "devTest": "nodemon server.js",
    "start": "node server.js"
  },

// server setup
import dotenv from "dotenv";
dotenv.config();
import express from "express";
import fileUpload from "express-fileupload";

// API routes
import receiveFilesFromClient from "./routes/receiveFilesFromClient.js";

const app = express();

// enable express-filesupload
app.use(fileUpload());

// bring the API routs
app.use(receiveFilesFromClient);

// start server

const port = process.env.PORT;

app.listen(port || 8080, () => {
  console.log("all systems are a go on port " + port);
});

import dotenv from "dotenv";
dotenv.config();
import { Router } from "express";
import cors from "cors";
// import all the logic for the API routes
import { createFolders } from "../controller/createFolders.js";
import { createHtmlFile } from "../controller/createHtmlFile.js";
import { storeFilesToWeb3Storage } from "../controller/storeFilesToWeb3Storage.js";
import { uploadFilesFromClient } from "../controller/uploadFilesFromClient.js";

// used to validate the user input from the frontend
import { body } from "express-validator";

// create Express router for API routes
const router = Router();

// using CORS to restrict the origin requests to come from the Frontend only
const whitelist = [process.env.ORIGIN];
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      console.log("origin: " + origin);
      callback(null, true);
    } else {
      // throw error and stop API call if the origin is forbidden
      // I'm using a Heroku which restarts the server if it stops
      // so no need to restart server in code for production
      console.log("origin: " + origin);
      throw Error("Not allowed by CORS");
    }
  },
};

router.post(
  // the route of the API
  "/upload-files",
  // check request origin
  cors(corsOptions),
  // check and sanitize any user text using express-validator
  body("headerTitle").not().isEmpty().trim().escape(),
  body("altImage").not().isEmpty().trim().escape(),
  // call these functions in order
  createFolders,
  createHtmlFile,
  uploadFilesFromClient,
  storeFilesToWeb3Storage
);

export default router;

import fs from "fs";

export async function createFolders(req, res, next) {
  //create directory
  //create temp dir
  // use the folder name received from the Frontend
  const tempDir = "./upload" + req.body.folderName;

  if (!fs.existsSync(tempDir)) {
    fs.mkdirSync(tempDir);
  }

  // create a sub directory to store the file received from the Frontend
  const childTempDir = tempDir + "/files/";

  if (!fs.existsSync(childTempDir)) {
    fs.mkdirSync(childTempDir);
  }
  // call next() to go to the next function on the route list
  next();
}

import fs from "fs";

export async function createHtmlFile(req, res, next) {
  // Assign variables to the received data
  let headerTitle = req.body.headerTitle;
  // express-fileupload will put any file received from the frontend as req.files
  let imageFile = req.files.image;
  let srcImage = "/files/" + imageFile.name;
  let altImage = req.body.altImage;
  // define folder path to store the files and user input
  let path = "./upload" + req.body.folderName + "/files/";

  // create HTML file from the user input
  // This is the website the app is making
  // included CSS styling in the style tag
  let htmlContent = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
      rel="stylesheet"
    />
    <title>Web3 decentralized website</title>
  </head>
  <body>
    <header>
      <div class="logo-title">Web3 Decentralized Website</div>
    </header>
    <main>
      <h1>${headerTitle}</h1>
      <br />
      <img src=${srcImage} alt="${altImage}" />
    </main>
    <footer>made with <span class="heart">&hearts;</span></footer>
  </body>
  <style>
    /* Box sizing rules */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Make images easier to work with */
    img,
    picture {
      max-width: 80%;
    }

    :root {
      --font-family-header: "Merriweather Sans", sans-serif;

      --color-background-header-footer: #d1bdf7;
      --color-background-body: #ffffff;
      --color-complimentary-two-background: #fff4f9;

      --color-primary-font: #000036;
      --color-secondary-font: #ffffff;

      --font-size-sm: clamp(0.5rem, 0.5rem + 1.5vw, 2rem);
      --font-size-100: 0.775rem;
      --font-size-200: 0.875rem;
      --font-size-300: 1rem;
      --font-size-400: 1.125rem;
      --font-size-500: 1.25rem;
      --font-size-600: 1.5rem;
      --font-size-700: 1.875rem;
      --font-size-xl: clamp(2rem, 1rem + 3vw, 5.75rem);
    }

    h1 {
      font-size: var(--font-size-xl);
      line-height: 1.1;
    }

    .logo-title {
      font-size: var(--font-size-700);
    }

    /* Set Grid Layout, min-height, some color, and padding on the top and bottom */
    body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
      font-family: var(--font-family-header);
    }

    main {
      margin: auto;
      text-align: center;
      padding-block: 2vw;
    }

    header {
      font-size: var(--font-size-700);
    }

    header,
    footer {
      text-align: center;
      padding-block: 2vw;
      background: var(--color-background-header-footer);
    }

    .heart {
      color: red;
    }
  </style>
</html>`;

  //create html page and save html page to file folder using the FS module
  fs.writeFile(path + "index.html", htmlContent, function (err) {
    if (err) throw err;
  });

  // call next() to go to the next function on the route list
  next();
}

export async function uploadFilesFromClient(req, res, next) {
  try {
      //Use the name of the input field to retrieve the uploaded file
      let imageFile = req.files.image;

      //Use the mv() method to place the file in upload directory (i.e. "uploads")
      imageFile.mv(
        "./upload" + req.body.folderName + "/files/" + imageFile.name
      );
      // call next() to go to the next function on the route list
      next();
  } catch (err) {
    res.status(500).send(err);
  }
}

// import the web3.storage library
import { Web3Storage, getFilesFromPath } from "web3.storage";
import fs from "fs";

export async function storeFilesToWeb3Storage(req, res) {
  // define folder path where the files are located
  let parentPath = "./upload" + req.body.folderName;
  let path = "./upload" + req.body.folderName + "/files/";

  const token = req.body.token;

  // Use API token to start the storage process
  const storage = new Web3Storage({ token });

  // get the files that the user uploaded
  const files = await getFiles(path);

  console.log(`Uploading ${files.length} files`);
  try {
    // store files
    // Store the files in web3.storage, if successful it will return a cid - address where the files are stored
    const cid = await storage.put(files);
    console.log("Content added with CID:", cid);
    // remove the temp folders so we don't store anything the user sent on the backend server
    await removeDir(parentPath);
    //send new website URL in response
    res.json({
      message: "File is uploaded",
      url: "https://" + cid + ".ipfs.dweb.link/files/index.html",
    });
  } catch (error) {
    // if the token is incorrect, catch the error and send status to client
    res.status(403).json({ error: "incorrect token: " + error });
    console.error("i found error: " + error);
    await removeDir(parentPath);
    return false;
  }
}

// function that gets the files stored in the file folder
async function getFiles(path) {
  const files = await getFilesFromPath(path);
  console.log(`read ${files.length} file(s) from ${path}`);
  return files;
}
// function to remove file directory
async function removeDir(path) {
  try {
    //  fs.rmdirSync(removePath);
    fs.rmSync(path, { recursive: true });
  } catch (error) {
    console.error(error);
  }
}

• Intended Audience
• What are we Building?
• Prerequisite
• Folder Structure
• Create Layout with HTML and CSS
• Write Client-Side JavaScript

project folder
│   index.html
│   script.js
│   style.css

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

<title>Web3.js Gas Price Tracker</title>

  <body>
    <header>
      <h1>Web3.js Gas Price Tracker</h1>
    </header>
    <main>
      <div class="gas-price">
        <p class="column-header">gas wei:</p>
        <ul id="parent">
          <!-- This is where the current Gas Price in Wei goes -->
        </ul>
      </div>
      <div class="eth-price">
        <p class="column-header">gas eth:</p>
        <ul id="parent-eth">
          <!-- This is where the current Gas Price in ETH goes -->
        </ul>
      </div>
      <div class="usd-price">
        <p class="column-header">gas usd:</p>
        <ul id="parent-usd">
          <!-- This is where the current Gas Price in USD goes -->
        </ul>
      </div>
      <div class="trend">
        <p class="column-header">trend:</p>
        <ul id="parent-trend">
          <!-- This is where we show the % change in prices from 1 second ago -->
        </ul>
      </div>
    </main>
  </body>

<link rel="stylesheet" href="style.css">

/* Box sizing rules */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Set Grid Layout and line height */
body {
  display: grid;
  grid-template-rows: auto 1fr;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

main {
  grid-row: 2 / 3;
  padding: 2vw;
  margin: 2vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gas-price {
  grid-column: 1 / 2;
}

.eth-price {
  grid-column: 2 / 3;
}

.usd-price {
  grid-column: 3 / 4;
}

.trend {
  grid-column: 4 / 5;
}

.column-header {
  text-align: center;
  font-size: larger;
  background-color: beige;
}

<​script​ ​src​="​https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js​"​>​</​script​>
<script src="/script.js"></script>

const web3 = new Web3("https://cloudflare-eth.com");

// this variable will be the HTML ID value for the gas prices.
let dynamicElementID = 0;

// get gas price and convert to eth and usd every 1 second using the Set Interval Function
const interval = setInterval(function () {
  // when this function runs every 1 second, we will increment the ID value by 1. This will make more sense later in the code
  dynamicElementID = dynamicElementID + 1;

  // get gas price in WEI from Web3.js
  web3.eth.getGasPrice().then((data) => {
    // create bullet point element and assign an ID
    // the ID is used to compare the current price and the last price 1 second ago
    let timeOutResults = document.createElement("li");
    timeOutResults.id = dynamicElementID;

    // bind and display WEI gas price to the html element
    let textNode = document.createTextNode(data);
    timeOutResults.appendChild(textNode);
    let parent = document.getElementById("parent");
    parent.insertBefore(timeOutResults, parent.childNodes[0]);

    // get gas price in ETH from Web3.js and show 12 decimal places
    let etherValue = Web3.utils.fromWei(data, "ether");
    etherValue = Number(etherValue).toFixed(12);

    // bind and display ETH gas price to the html element
    let ethResults = document.createElement("li");
    let ethTextNode = document.createTextNode(etherValue);
    ethResults.appendChild(ethTextNode);
    let parentETH = document.getElementById("parent-eth");
    parentETH.insertBefore(ethResults, parentETH.childNodes[0]);

    // calculate the trend
    // grab last price using the ID created 1 second ago (current ID - 1)
    let lastPriceID = dynamicElementID - 1;
    let lastPrice = document.getElementById(lastPriceID);

    // get current price in WEI
    let currentPrice = data;

    //calculate the difference between the current price and last price in percentage
    let difference = Math.floor(
      ((currentPrice - lastPrice.innerText) / lastPrice.innerText) * 100
    );

     // bind and display trend % to the html element
    let trendResults = document.createElement("li");
    trendResults.id = "trend-" + dynamicElementID;
    let trendTextNode = document.createTextNode(difference + "%");
    trendResults.appendChild(trendTextNode);
    let parentTrend = document.getElementById("parent-trend");
    parentTrend.insertBefore(trendResults, parentTrend.childNodes[0]);

    //convert ETH to USD using a free Currency Converter API

    fetch("https://api.cryptonator.com/api/full/eth-usd")
      .then((response) => response.json())
      .then((data) => {
        let usdResults = document.createElement("li");
        let usdPrice = etherValue * data.ticker.price;
        let usdTextNode = document.createTextNode("$" + usdPrice.toFixed(4));
        usdResults.appendChild(usdTextNode);

        // use color to show if the trend is staying the same (yellow), increasing (green), or decreasing (pink)
        if (difference === 0) {
          trendResults.style.backgroundColor = "yellow";
          usdResults.style.backgroundColor = "yellow";
        }

        if (difference > 0) {
          trendResults.style.backgroundColor = "lightgreen";
          usdResults.style.backgroundColor = "lightgreen";
        }

        if (difference < 0) {
          trendResults.style.backgroundColor = "lightpink";
          usdResults.style.backgroundColor = "lightpink";
        }

        let parentUSD = document.getElementById("parent-usd");
        parentUSD.insertBefore(usdResults, parentUSD.childNodes[0]);
      });
  });
}, 1000);

There is a good chance that no one at the company will tell you how to gather requirements. You have to figure it out yourself.

Why is that?

Most companies don't have a business analyst whose primary role is to gather requirements.

So if there are no business analysts, then who gathers the requirements?

Product Owners most likely will try to gather requirements while juggling a hundred other things to do.

But sometimes, it is left to the developers, especially if the product owner has too much on their plate, which happens to most product owners.

No worries. You don't have to be a business analyst to gather requirements. But if you are in a position with some sway, I would advocate having a business analyst full time to collect and refine requirements.

Be Flexible

There will be times when you set up an interview with a user, and when others find out, like your boss or colleague, they want to be in the meeting.

When you have too many people involved with gathering requirements, you may not be able to ask all the questions you want.

The user could come late or leave early for the requirements interview because they have more pressing things to do in their day job. Users are busy, so you have to have respect their time.

Be adaptable. Expect that you need to do follow-up interviews. After the meeting, ask the user if you could do a quick call or ask questions over email/chat. Chances are you have more questions for the users. Most users like to be involved, especially if their input is valued.

If users feel what they say may change the system for the better, the more likely they will want to partake in requirements sessions.

Trust me. You will get better at gathering requirements.

It sounds crazy when you have a day where you can't comprehend any users' jargon when they convey their requirements and needs. It may not feel like it. But you will get better at gathering requirements.

You will start to understand the business processes and requirements. Just remember to keep learning. If you look back after one year, you will be amazed at how much you comprehended.

Talk to both types of users.

Expert users will know the common pain points for features that are used a lot or impact the bottom line, which helps decide which features to develop in the upcoming development cycle.

Expert users will answer questions that you should be asking. You may not know what to ask if you are new to the system or even the company. An expert user will know this and help you with what you should know.

If you find a user like this, develop a good relationship with them and ask them if you could use them as a resource in the future.

A newbie user can tell you how easy or frustrating it is to use the system. This information helps UX designers. You want features to be discoverable and learnable without much help. Watching a new user use the system can tell you that.

With expert and newbie users, they will tell you solutions. Scribble them down, but they may not be the right solution.

Design is not for everybody. Users don't surely make good designers.

Let the design team come up with a solution. It is better to capture their idea, pain points, and goals and use that to develop a design.

Perhaps the design will be similar to the users' solution, but maybe not. Either way, write down what they say but don't anticipate it being the solution.