Attach to Process

Thoughts and Notes on Software Development

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.

For awhile now, I was wondering if it was possible to use Markdown, to make an image clickable. By that I mean, display an image in a blog post, and allow the reader to click that image to view the image in a tab. You can see an example at the end of this post.

So anyway, I know what the Markdown syntax is for a link and for an image, but I've never been able to put the two together until today.

Thanks to this post for the idea on how to do it. This saved me from having to write JavaScript that would find all the Snap.as images in a blog post, then wrap them in an <a></a> tag just to make the images clickable and open in a browser tab.

So just to recap, the Markdown syntax for a link is this: [Link text](Link URL)

And the Markdown syntax for an image is this: ![Alt Text for image](Image URL)

So, given the Markdown listed below for an image, how do you display the image and make it clickable at the same time? ![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png)

Read more...

It's been awhile since I updated the contents of the Archive page on my journal. I stopped updating when my Blazor apps stopped working. Archive Page - Dino's Journal - 20220625

I remember working on some update to my Blazor apps, but the limitation of Blazor WASM as a client-side application, plus the CORS restrictions I kept running into, made it a headache and so I stopped. I eventually created a WPF app just for my own use.

WriteFreely Archive Page Generator written in C# and WPF

This is what I used today to generate the contents for my archive page. Yes I know it is ugly. But I just need it to work, I don't need it to look pretty. And well, it does the job just fine, so I'm happy with it.

Since it is a WPF app, it will only run in Windows. So sorry folks, it's not something that everyone else can easily use. But if there's enough interest on it, I can share the source code in a public repo. Let me know in Remark.as or in the comments below.

Tags: #WriteAs #WPF

Discuss... or leave a comment below.

I thought I'd share the Custom CSS and JavaScript I use on this Write.as blog. The design is inspired by this Hugo Hello Friend theme I saw on micro.blog.

Read more...

How to check if array contains a specific item

To check if an object or item is contained in a JavaScript array, you can use the includes function, like so:

const customerIds = [1, 2, 3, 4, 5];
console.log('IsIncludedInArray', customerIds.includes(3));

To do the same thing in C#, you can use the Contains or Any LINQ method, like so:

var customerIds = new int[5] { 1, 2, 3, 4, 5};
Console.WriteLine("IsIncludedInArray " + customerIds.Contains(3));
Console.WriteLine("IsIncludedInArray " + customerIds.Any(n => n == 3));

How to filter out contents in an array

To filter out the contents of an array in JavaScript, you can use the filter function., like so:

const customerIds = [1, 2, 3, 4, 5];
const filteredCustomerIds = customerIds.filter(n => n <= 3);
console.log('Filtered CustomerIds', filteredCustomerIds);

To do the same thing in C#, you can use the Where LINQ method.

var customerIds = new int[5] { 1, 2, 3, 4, 5};
var filteredCustomerIds = customerIds.Where(n => n <= 3);

foreach (var n in filteredCustomerIds)
{
  Console.WriteLine(n);
}

Tags: #JavaScript #CSharp #DotNet

Discuss... or leave a comment below.

This is sound advice. Using -- to comment out scripts in SQL is generally okay. But there is a risk of the script breaking, when all of a sudden your script is listed in just one line. So the better practice is to use /* comment goes here */ instead. Hats off to Brent Ozar's post for this tip.

Link: Never, Ever, Ever Start T-SQL Comments with Two Dashes

I figured I would add some sample script to illustrate the problem. So here goes.

Original Script

delete from dbo.Customers
--where createDate >= '20211201'
where customerId = 99

Take for example the script above. You originally wrote that script to delete all Customer records in the database that were created since the month of December. You then realize that it will delete more records than you wanted, so you comment out the createDate filter, and use a customerId filter instead.

Now in its current form, the above script would work just fine. You run it and it will delete the record where customerId is equal to 99. All is good.

But what happens if that script is somehow parsed by some other tool, and the resulting script displayed in just one line? Here is what that script looks like.

Broken Script

delete from dbo.Customers --where createDate >= '20211201' where customerId = 99

As you can see from the resulting broken script listed above, instead of just deleting the record where customerId is equal to 99, you will now be deleting all the records in the Customers table. Yikes!

Tags: #SQL #SqlServer

Discuss... or leave a comment below.

In the parent React class component, you can declare a function, that you can then pass into one of its child components.

So say you had a <Form /> child component and a addNewProfile function. You can pass the function to the child component like so:

<Form onSubmit={this.addNewProfile} />

Then in the code for the Form component, you can get to the passed in function via the props object, like so:

 this.props.onSubmit(/*parameters go in here*/)

Note how React is smart enough to know that there would be an onSubmit property available in this.props. That's one of the cool things with React props.

So anyway, passing functions into child components is basically like passing a reference to a function. It's similar to how delegates work in C# and .NET.

Tags: #ReactJS

Discuss... or leave a comment below.

Coworker was getting a TCP error code 10061: No connection could be made because the target machine actively refused it [closed] error, while trying to setup an application to run in IIS.

The fix that worked for us can be found here: TCP error code 10061: No connection could be made because the target machine actively refused it 127.0.0.1:808. windows 7.

The fix was basically to check the “Windows Communication Foundation Non-HTTP Activation” checkbox under .NET Framework 3.5 in the Windows Features settings box.

Tags: #WCF #TCP

Discuss... or leave a comment below.

Version 1.2.0 of WriteAs.Net has been released.

This latest version now allows you to enter an API key when initializing a WriteAsClient instance. This API key will allow you to bypass the rate limiting checks on the Write.as API.

Some basic in-memory caching has also been added to the client. You can configure some of the cache settings when initializing a WriteAsClient instance. The new settings are described below:

  • cacheExpirationInSeconds determines how long data will stay in the cache before it expires. The default value for this setting is 300 seconds.
  • cacheSize determines how many objects it can store in the cache. Note that a collection of posts (List<Post>) and a single post each count as 1 item. The default value for this setting is 4.

You can install it via nuget: Install-Package WriteAs.NET -Version 1.2.0

Or via the .NET Core command line interface: dotnet add package WriteAs.NET --version 1.2.0

If you find any bugs or issues with it, please let me know. Thanks and y'all have a good weekend.

Tags: #DotNet #WriteAs #WriteAsNet

Discuss... or leave a comment below.

I'm working on an update to the WriteAs.Net client/wrapper library. In a previous post I talked about adding caching to it before I release a new version. I ran into some road-blocks that derailed me. I ended up pushing it off to the side to focus my time somewhere else.

The two issues that I ran into were: figuring out what the cache key was going to be for the cached object and removing the oldest object in the cache. I now have solutions for those issues.

For the cache keys, I figured I could use the method name plus the parameter values.

For clearing out the oldest cached object, I decided to make use of a generic Queue collection that could accept the cache key values. Then I could just pop-off the oldest value from the Queue and use that to remove the associated object in the cache.

And so anyway, I should have the updated version of the client/wrapper library out soon. I just need to do some more testing on it.

Tags: #DotNet #WriteAs #WriteAsNet

Discuss... or leave a comment below.

Enter your email to subscribe to updates.