I started working on the official “Getting started with GraphQL on ASP.NET Core and Hot Chocolate – Workshop” tutorial, but since the workshop is a bit outdated, it targets .NET 5 and an older version of Hot Chocolate. I am using the latest .NET 7 (at the time of this writing) and top-level statements. In this post, I will address the issues I ran into due to Hot Chocolate version changes from 11 to 13.
Continue readingFix Synology Photos Not Playing HVEC Videos And Not Reading Taken Timestamp
If you are still running Synology DSM 6 and are looking into migrating to Synology DSM 7, and one of the main Synology apps you use is Photo Station, there are some major changes in how Synology handles photo uploading in the new Synology Photos app.
Continue readingError: Cannot find module ‘gatsby-plugin-utils/polyfill-remote-file’
After updating Gatsby from 3.0.4 to 4.12.1 I got the following error message: Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file' and the stack trace below:
$ NODE_OPTIONS="-r esm" gatsby develop -H 0.0.0.0 -o
/Users/esausilva/Development/Projects/andreasilva-design/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
/Users/esausilva/Development/Projects/andreasilva-design/node_modules/gatsby/dist/utils/start-server.js:1
Error: Cannot find module 'gatsby-plugin-utils/polyfill-remote-file'
Require stack:
- /Users/esausilva/Development/Projects/andreasilva-design/node_modules/gatsby/dist/utils/start-server.js
...
Continue reading Create a React Custom Lightbox Gallery
With many lightbox gallery solutions on NPM, I ended up writing my own React Custom Lightbox Gallery Component to meet my specific needs.
I was looking for a “lightbox” type gallery that would allow me to display images (multiple images in the same modal), videos, text, and a mix of that, all within the same modal window. All I could find were galleries that could only display a single image in a modal.
This is a two-part tutorial:
- Create a React Custom Modal
- Create a React Custom Lightbox Gallery (you are here)
Create a React Custom Modal
With many modal solutions on NPM, I ended up writing my own React Custom Modal Component to meet my specific needs.
Well, the above statement is not entirely true. I was looking for a “lightbox” type gallery that would allow me to display images (multiple images in the same modal), videos, text, and a mix of that, all within the same modal window, and to accomplish all of that I needed a custom modal component!
This is a two-part tutorial:
- Create a React Custom Modal (you are here)
- Create a React Custom Lightbox Gallery
React Hook to play a video with Intersection Observer
How to use a custom React hook to auto-play a video with Intersection Observer when it becomes visible and pause when it goes out of view.
I was building my wife’s website and she wanted to play a video clip as a background with some text overlaying the video. I knew I did not want to play the video on page load, but only when it became visible to the user.
With Intersection Observer, I was able to accomplish exactly that.
Continue readingAdd a React App to a NET Core MVC App
In this tutorial, we will go step by step on how to add a React App to a NET Core MVC App. Handling 404 pages and client routing.
I am one to think that not everything I build has to be a Single Page Application (SPA). Recently I was building a project for a client, and I decided that only one section of the app needed to be a SPA and the rest of the app a “traditional” MVC app, so I started the app with the “MVC” part and later added the “SPA”. This is how I did it.
Continue readingDeploy a Production React App to Netlify
In this tutorial, we will learn how to deploy a React app with a back-end API to Netlify. We will cover deploying an Express.js API and Lambda Functions to interact with the React front-end.
I have written two other tutorials where we will deploy the same app to Vercel and Heroku. (Links below)
Continue readingDeploy a Production React App to Vercel
In this tutorial, we will learn how to deploy a React app with a back-end API to Vercel. We will cover deploying Lambda Functions API to interact with the React front-end.
I have written two other tutorials where we will deploy the same app to Netlify and Heroku. (Links below)
Continue readingDeploy a Production React App to Heroku
In this tutorial, we will learn how to deploy a React app with a back-end API to Heroku. We will cover deploying an Express.js API to interact with the React front-end.
I have written two other tutorials where we will deploy the same app to Vercel and Netlify. (Links below)
Continue reading