JavaScript — Attach to Process

DevNotes - 004

Thu, 16 Feb 2023 04:13:20 +0000

To cause Azure to keep sending emails repeatedly for your Heath Check alerts, you need to uncheck the checkbox that says “Automatically Resolve Alerts”.

If you want to see what kind of error Axios throws, it is better to use console.log(error.toJSON()) than console.log(error). That's because the former option will list out all the properties from the error variable, while the latter option will only list out the error message itself.

Instead of adding todo comments, track it as a task so it doesn't get lost.

Source: TODO: Post an Article

Looking for a new way to do end-to-end testing on modern web apps? Check out Playwright. The tests are pretty easy to follow because it's basically a set of instructions written in code. So as you might have guessed, it's catered more to developers than non-technical folks.

I am going through the Pro ASP.NET Core 6 book. After trying to run the command libman install bootstrap@5.1.3 -d wwwroot/lib/bootstrap from page 72 (Chapter 4) of the book, I started getting the error listed below:

[LIB002]: The "bootstrap@5.1.3" library could not be resolved by the "cdnjs" provider

Turns out it was an issue with the library manager package that was installed. The fix is to install a newer one. More info can be found here:

https://github.com/Apress/pro-asp.net-core-6/blob/main/errata.md

Was looking for a way to add a list of objects to the appsettings.json file, then retrieve that list and turn them into something I can check against in a controller class. This answer works wonderfully.

React Hook Form — seems like a cool alternative form handler for React.

SQL to MongoDB Mapping Chart — good reference on how to write MongoDB queries based on expected SQL Server queries.

Reasons to blog if you're a software developer:

It helps you write better emails at work.
It helps you write better user stories and acceptance criteria.
It helps you communicate your ideas better.

If you're noticing a pattern there, it's all about being a better communicator. And you would want that, because that also helps you advance in your career.

Series: #DevNotes Tags: #Axios #ASPNetCore #Azure #Blogging #JavaScript #MongoDB #Playwright #React #SqlServer #Tests

Discuss... or leave a comment below.

Attach to Process Write.as Theme

Mon, 21 Feb 2022 17:59:41 +0000

Useful Array Functions in JavaScript and C#

Sat, 05 Feb 2022 13:46:15 +0000

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.

Get Random Post using JavaScript

Fri, 30 Jul 2021 23:12:05 +0000

On my Above the Earth and Seas photo-blog, I was able to add a link to get a random post using just plain JavaScript.

The reason this works is because I decided to use numbers for all the post slugs/urls. That allows me to use simple Math functions in JavaScript to come up with a random number. Then I use that random number to construct a url to link to. It's pretty basic but it works.

Here is the Custom JavaScript that I added:

// This number matches the url of my latest post
const latestIndex = 36;

/* Get random post */
const a = document.querySelector('a[href$="/random"]');
if (a !== null) {
    const randomIndex = Math.floor((Math.random() * latestIndex) + 1);
    const pad = '000';
    const randomPostIndex = (pad + parseInt(randomIndex)).slice(-pad.length);
    const randomPostUrl = 'https://ateas.dinobansigan.com/' + randomPostIndex;
    a.setAttribute('href', randomPostUrl);
    a.setAttribute('title', 'Get a random post');
}

Tags: #JavaScript

Discuss... or leave a comment below.

JavaScript Destructuring

Mon, 15 Feb 2021 04:27:20 +0000

As part of learning React, I'm also trying to shore up my JavaScript skills. Thankfully, the React: Getting Started pluralsight course also offers a modern JavaScript crash course. These are my notes from when I tried to understand JavaScript's Destructuring feature.

Note that you can run the sample code on a JavaScript tester website, like say the JSComplete Playground.

So, the JavaScript destructuring assignment syntax allows you to get just the properties you want from an object. It seems to be like a shortcut for getting to the properties of an object. For example:

const customerInfo = {
	firstName: "Dino",
	lastName: "Bansigan",
	emailAddress: "myemail@email.com",
	website: "dinobansigan.com"
}

const getFullName = ({firstName, lastName}) => {
	return firstName + " " + lastName;
}

console.log(getFullName(customerInfo));

In the code above, you can see how I have created a customerInfo object. Then next is a function called getFullName that takes a firstName and lastName parameter. These parameters are destructured from the customerInfo object.

If you look at the last bit of code where I call console.log, you can see that instead of passing in parameters customerInfo.firstName and customerInfo.lastName, all I had to do, was pass in the customerInfo object. JavaScript through the destructuring feature is smart enough to know to use the firstName and lastName properties from the customerInfo object.

This destructuring feature can come in handy with arrays too. Together with the rest and spread operators, you can pick specific values from an array, split arrays and spread items to build a new array. For example:

const fellowShipOftheRing = ["Frodo", "Gandalf", "Sam", "Aragorn", "Legolas", "Pippin", "Merry", "Boromir"];

let [ringBearer, ...restOfFellowShip] = fellowShipOftheRing;

console.log("Ringbearer: " + ringBearer);
console.log("Rest of the Fellowship: " + restOfFellowShip);

const copyOfTheRestOfFellowship = [...restOfFellowShip];
restOfFellowShip = null;
console.log("Rest of the Fellowship: " + restOfFellowShip);
console.log("Copy of the Rest of the Fellowship: " + copyOfTheRestOfFellowship);

If you look at the code above, you can see an array called the fellowShipOftheRing. It has all nine members of the Fellowship. Then on the next line, you can see how you could easily pick out the first value from the fellowShipOftheRing array and assign it to the ringBearer variable. Then the rest of contents of the array are assigned to the restOfFellowShip variable. That's pretty cool!

Then the next set of code shows how to make a copy of the restOfFellowShip array using the spread operator. The easiest way I can visualize it, is you basically spread the contents of the restOfFellowShip array inside the brackets to create a new array for the copyOfTheRestOfFellowship variable. And to prove that it is a real copy of the array and not just another pointer to the original array, I set the restOfFellowShip array to a value of null before calling console.log.

That's as far as my notes went. If you found any mistakes in this post, please educate me by leaving a comment below or getting in touch with me. Thanks!

Tags: #JavaScript

Discuss... or leave a comment below.

Hide Publish Date Using JavaScript

Sat, 06 Feb 2021 00:33:57 +0000

I am using the Lanyon theme on my micro.blog hosted photo-blog. I noticed that the Published Date was showing up on my about page. Here is how I managed to hide it using some JavaScript.

I added the script to the layouts/partials/default_foot.html file, just before the closing tag.

This is a result of me playing around with Custom JavaScript on my write.as sites. I was able to carry over what I learned here and use it to fix something on another website. One of the best benefits of maintaining a personal website, is brushing up on your HTML, CSS and JavaScript skills.

Tags: #JavaScript #MicroBlog

Discuss... or leave a comment below.

On Learning React

Fri, 05 Feb 2021 06:38:15 +0000

My first attempt at learning the React JavaScript library was by reading the ASP.NET Core 3 and React book. I started reading that book a few months ago. I've gone through the first six chapters, which mostly covers how to build a web app front-end using React. While I did learn a lot reading those chapters, I was barely keeping up.

There's so many new concepts, new libraries, new methods, new syntax to learn. It felt overwhelming at times. It didn't help that I kept getting distracted at the JSX syntax — which looked insane to me at times.

I found myself simply typing what was in the book. But I actually couldn't tell you why the code worked. I was honestly struggling to keep up. But more importantly, I was confused and frustrated at it all. Why would you even want to go through all this trouble of writing a React app? I didn't get it. And consequently, I wasn't too excited to learn more. But I had to.

So, after having gone through the first six chapters of the book, today I decided to take a stab at this React: Getting Started pluralsight course. And my God, what a change!

I'm actually now excited to learn more about what I can do with React. I've only gone through the first two chapters, which are basically an introduction to React. But man what a blessing! It explained really well so much of the key concepts that I've struggled to grasp. A lot of the confusion I had while reading the book, is now slowly starting to make sense.

It's almost like this course is required reading, before actually reading the book.

I now better understand props. I now better understand state management between components. I now better understand components, which is crucial if I ever want to master React. Even the JSX syntax is now starting to make sense.

I get it now. I get why you would want to build a web app using React. I get why you would want to learn React. And now I'm excited to learn more. I feel like if you want to start learning React, you should give this pluralsight course a try first.

This is not to say that the book, ASP.NET Core 3 and React, is a bad book. It's not. It's actually very detailed and covers a lot of topics that will definitely be useful at work. It's just that I think it's too advanced for a React beginner like me. I need to get a better handle on the basics and key concepts of React, before I can fully appreciate the book.

P.S. Apologies if this post is not as polished as other posts. I'm trying to follow Joel's advice on caring less and writing more.

Tags: #JavaScript #ReactJS

Discuss... or leave a comment below.

How to Customize the Footer on a Write.as Website

Sat, 16 Jan 2021 00:00:00 +0000

There are two ways that I know of to customize the footer on a Write.as website. The first one is through CSS and the second one is through JavaScript. I'll go through those two options in this post.

Option 1: CSS

I got this idea of customizing the footer via CSS after looking at Robert Xu's Write.as powered site. It puzzled me that I could not highlight the text in the footer. After viewing the page source, I finally figured out that it was CSS trickery.

So, anyway here we are. To customize the footer using CSS, all you need to do is modify the following CSS script, then add it to the Custom CSS settings for your website.

footer nav::before {
    content: "Copyright © 2020 - 2021 by Your Name \A";
    white-space: pre-wrap;
}

Note the \A at the end of the content value. That basically functions like a line break () in HTML. Without that, the content value will show up to the left of the “published with write.as” footer text. With \A in place, the content value will show up above the “published with write.as” footer text.

That also means that through the use of \A, you can add however many lines of text you want into your footer.

So, the main thing I like about using CSS for a customized footer, is that even if JavaScript is disabled on the browser, it will still work. If all you really want is to display some text on the footer, this is the best option in my opinion.

Now the thing that I don't like about it, is that it doesn't allow you to add hyperlinks in your footer. If you want to do that, then you have to use JavaScript.

Option 2: JavaScript

As I mentioned above, one of the reasons to go with JavaScript for a customized footer, is that it allows you to add hyperlinks as part of the footer content. This means that you can add links to other websites, or to a license, etc...

To customize the footer using JavaScript, modify the contents of the customFooterHTML variable below, then copy and add the JavaScript code to the Custom Javascript settings for your website.

/* Custom Footer*/
var customFooterHTML = 'Copyright © 2019 - 2021 by Your Name
The opinions expressed herein are my own and do not represent those of my employer
or any other third-party views in any way.
published with write.as';

var x = document.querySelector('footer').getElementsByTagName('nav')[0];
x.innerHTML = customFooterHTML;

For an example of this customized footer in action, scroll to the bottom of this page.

Note that I added class="home pubd" to my links (anchor elements). home and pubd are Write.as classes that have their own specific styling. I added them so that I won't run into padding issues in the footer. This also means that you can put in other class names that you can style via your own Custom CSS settings.

Also note that instead of using \A to force a line break, I use the regular HTML line break. This is one of the benefits of going with the JavaScript approach. You are pretty much working with HTML at this point. This also means that you can put any valid HTML elements in there.

Lastly, note that I also added published with write.as as part of the value for customFooterHTML. That's because with this approach, you are replacing the content of the footer with the content inside the customFooterHTML variable. So, if I don't add it, that text won't show up.

Maybe that's something you don't want to include in the first place. If that's the case, then you can simply exclude it from the value of the customFooterHTML variable.

So, you already know what I like about this approach — the ability to use HTML and add hyperlinks. What about drawbacks?

Well, since this is done via the Custom Javascript settings for your website, if one of the scripts in there runs into an error, it is possible that your footer won't be rendered. Also, if someone is viewing your website on a browser with JavaScript disabled, then your footer also won't show up. It's not that big of a deal, but something to keep in mind when using this approach.

Tags: #HowTo #WriteAs #CSS #JavaScript

Discuss... or leave a comment below.

A Possible Limitation with WebAssembly Apps?

Tue, 22 Dec 2020 02:00:00 +0000

A WriteFreely user recently got in touch with me, asking if I could modify the Write.as Archive Page Generator app, to make it work with WriteFreely instances. I spent some time with it last week and I ran into a snag. I'm getting this TypeError: Failed to fetch JavaScript error whenever it tries to fetch data from the WriteFreely instance I'm testing.

When I try getting posts from a Write.as blog using a Blazor WASM app, it works. When I try getting posts from a WriteFreely instance blog, using the Blazor WASM app, it won't work. But when I try getting posts from a WriteFreely instance blog, using a .NET Core console app that uses the WriteAs.NET library I wrote, the same library that the Blazor WASM app uses, it works. Something weird is going on.

My research into the issue indicates a possible limitation with WebAssembly apps. There must be some security setting on the WriteFreely instance I'm testing, that's blocking my Blazor WASM requests. The Write.as API is obviously not blocking my requests, so something is going on with that WriteFreely instance.

I dug into it some more and found that it is a CORS related issue. But at this point, there's nothing else I could on my end to fix it. I created a thread on discuss.write.as to talk about it.

Tags: #Blazor #JavaScript #WebAssembly

Discuss... or leave a comment below.

Domain Redirect via HTML and JavaScript

Tue, 15 Dec 2020 02:00:00 +0000

I purchased a new domain, nowlisteningto.com for my Now Listening to... music blog. Prior to buying the new domain name, I didn't realize how big of a pain it was going to be to set up redirection. Turns out, you can't setup a 301 redirect using just DNS records. It has to be done on a web server level, or via your domain registrar. My issue is that I can't use my domain registrar for redirects, because I use Netlify to manage the DNS records for my domains. And from what I can see, Netlify doesn't have a menu option for redirecting from one domain to another.

So, I ended up doing a redirect via HTML and JavaScript, by hosting a static site on Netlify. This static site's purpose is to simply redirect from nowlisteningto.dinobansigan.com to nowlisteningto.com. It is not ideal, but this will do for now until I figure out a better solution. Thanks to this answer on StackOverflow for the idea.

Tags: #CustomDomain #DomainRedirect #HTML #JavaScript

Discuss... or leave a comment below.