Attach to Process

JavaScript

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

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.

Read more...

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.

<script type="text/javascript">
var isAboutPage = /\/about\/$/i.test(window.location.href);
if (isAboutPage) {
  var x = document.getElementsByClassName("post-date");
  if (x) {
    x[0].remove();
  }
}
</script>

I added the script to the layouts/partials/default_foot.html file, just before the closing </body> 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

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.

Read more...

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;
}
Read more...

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

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

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that you wanted to add a Previous or Next link to.

In Part 1, I covered how I generated links to the Previous and Next post for my “indexed” journal entries. In this post, I'll talk about how I generated the links for non-indexed journal entries.

Handling Old Journal Entries

So, now that I have navigation working for my “indexed” entries. I turned my attention to my precursor journal entries. These entries don't use base 10 numbers as indexes in their slugs/URLs. For example, the post slug for Journal Entry – I ends in “I”, which is a roman numeral. Same goes for Journal Entry – II, III, IV and so on. To further complicate things, I decided to leave the post slugs unchanged for other precursor journal entries. The post slug for Journal Entry – XV for instance is still “decisions-decisions”. I thought about writing JavaScript that would convert roman numerals to base 10 numbers. But then that won't work for non-indexed entries like Journal Entry – XV.

Shot myself in the foot right there, huh? >_<

Read more...

Update 06/22/2020: Didn't realize that the JavaScript that I talked about in this post, was actually creating a Next link for this post. It thought this was a Journal Entry post, because it found that text in here. That's hilarious, but that is also part of the fun of tinkering. I have fixed it.

Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that uses index numbers for post slugs. For a working example of this, check out the posts on my photo-blog.

Finally got full blog post navigation working for my Journal Entries. If you have JavaScript enabled on your browser, you could effectively navigate from Journal Entry – I up to Journal Entry – XVI, then continue on to Journal Entry – 001, all the way up to the latest one (as of this writing), Journal Entry – 060. You can also navigate from Journal Entry – 060, all the way back down to Journal Entry – I.

Getting Post Slug and Index

To make navigation work between blog posts in a series, I made use of a standard format for post slugs/URLs. I call them “indexed” entries because I added an index to the end of the slug/URL. For example, “journal-entry-001”, “journal-entry-002”, “journal-entry-003” and so on. It's really just a way to help me figure out the sequence of posts.

So, first off, here is the JavaScript for getting the post slug from the URL. Then from there, getting the post index from the slug. Without this code, it will be impossible to automatically generate the links to the Previous and Next posts.

var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");

// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();
Read more...