Attach to Process

Gatsby

Fire and forget template for C#/.NET to run something that you don't need to wait on and don't care about the results.

Task.Run(() =>
{
	//code goes here
});

In ReactJS, if ESLint says you cannot use inline arrow functions to pass in props in JSX, a solution is to wrap them with the useCallback hook.

Reference: https://stackoverflow.com/a/36677798/5041911


Modals — can be used to add dialog or popup info boxes on your ReactJS app.


So using this library actually helped me solve my Azure Application Insights logging issue. The issue being, since I had a dateOfBirth object in my formData object, app insights would save it as an object, as opposed to something like dateOfBirth: 2024-04-16. The solution was to flatten the formData object so it will get logged properly in Azure App Insights.


Rendering the HTML string in React — short tutorial on how to render an HTML string in ReactJS/Gatsby.


Series: #DevNotes Tags: #CSharp #DotNet #Template #ReactJS #Azure #ApplicationInsights #Gatsby

Discuss... or leave a comment below.

What is a react helmet?

  • React helmet is a helper component that allows you to add data to the <head> section of a document or HTML page. It basically allows you to add <link> tags, <scripts> and other tags that goes into the <head> section of an HTML page.

Source: What is react helmet?

So react-helmet library didn't work for me, but this one did.


The equivalent of the npm install command in yarn is yarn without any parameters.


Was trying to help out someone on discuss.write.as get a logo to show up beside their blog title. I learned that you can actually set the size of the background image using something like background-size: 150px;. Cool stuff.

Reference: Resizing background images with background-size


So last time I decided to just not show a header image for my Now Listening to... website on mobile screens. It was because I didn't know how to handle it. Well my easy solution turned out to be getting a smaller sized image to use as a header image. Then I was able to just add a css media screen entry that uses the smaller sized image.


Co-worker was running into Gatsby/Kentico/Grahpql errors with one of our projects. We pretty much had the same .env file and code base. Deleting the folder and downloading again didn't fix it. What worked for him was running the command npm cache clean --force.

Note: This is probably a dangerous command to run. Please research what it does before you try it out. I'm only sharing what worked for me and my team. But this was a last resort type of attempt to fix our errors.


To create a repository from an existing folder or files using Github Desktop, first you have to create the repository on the app itself. This is so that the app can create and initialize the folder on your drive. Then you can copy over the files into the folder that the app created. And then you're set.


To copy the _redirects file (or any other file for that matter) to the Output folder in Wyam, you can use the pipeline code below:

Pipelines.Add(
    // Copy redirect file to the output folder
    CopyFiles("_redirects")
);

Tags: #DevNotes #CSS #Gatsby #Github #NodeJS #ReactJS #Wyam #Yarn

Discuss... or leave a comment below.

Starting a new DevNotes series. This is a spin-off from my Weeknotes series. This one focuses on software development content only. This one won't exactly be a weekly thing. I'll only publish a DevNotes post when I have a number of notes to share. Otherwise I'll bundle them up into a bigger post and publish then. And with that out of the way, let's get started...

I'm starting to notice a trend with the Rust programming language. It seems to be the next big thing. Microsoft even joined the Rust Foundation. It probably should be the next language I should learn after React.


I just realized, after installing the React Browser Dev Tools Extension, that Microsoft's Azure DevOps site was built using React. If Microsoft, who created C# and ASP.NET, uses React on their core products, it is just one more reason for me to really dig into React.


React components can be thought of as building blocks for your website. Instead of creating a button then styling it with the primary-button CSS class, you create a PrimaryButton component then use it wherever you want.

Reference: Get to Know Gatsby Building Blocks


I was building a very basic Gatsby website, the one from their tutorial. It was taking too long to build the output for a static site. Too long compared to building sites using Wyam. I don't have anything against Gatsby. In fact I'm trying to learn Gatsby. I'm just pointing out that it seems slow compared to Wyam.


While going through the Gatsby tutorial, I found another alternative to Netlify for hosting static sites: Surge.

Tags: #DevNotes #Gatsby #ReactJS #Rust #StaticSiteGenerator

Discuss... or leave a comment below.