Dino’s Journal 📖

WebDevelopment

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...

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 #React #Rust #StaticSiteGenerator #WebDevelopment #SoftwareDevelopment

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

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 this site. 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.

#JavaScript #SoftwareDevelopment #WebDevelopment

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

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...

Most of the time, using display: none; is all you need to hide an HTML element. But every once in awhile, doing so will hide the element, but would not reclaim the space the element would have been occupying.

To hide an HTML element and not have it take up space, you can do something like this:

#post-signature-hidden {
    max-height: 0;
    margin-top: -3em;
    visibility: hidden;
}

In case you're wondering, that's the CSS I use to stop my Post Signatures from showing up on my pinned pages.

#CSS #WebDevelopment #SoftwareDevelopment


Links to this page: Weeknotes – 010

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

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...

Finished work on the WriteFreely Archive Page Generator Blazor app. While it does say WriteFreely, you can still pass in Write.as as the instance name and your Write.as alias, and it will work just the same.

#Blazor #WebDevelopment #SoftwareDevelopment


Links to this page: Weeknotes – 008

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

While working on a Blazor WASM project last week, I noticed that no matter what changes I make to the index.html and app.css files, they were not reflected whenever I open up the site on IIS Express. It turns out to be a caching issue. All I needed to do, was hit CTRL + F5 after the site loads, and it will pull in my changes.

#Blazor #WebDevelopment #SoftwareDevelopment


Links to this page: Weeknotes – 008

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

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.

#Blazor #JavaScript #WebDevelopment #SoftwareDevelopment


Links to this page: Weeknotes – 006

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)

Was supposed to create an “Unpopular Posts” Blazor WASM app, but ended up creating the opposite. Anyway, I managed to make the app flexible by having it use query string parameters. That means that you can use the app and embed it into your own Write.as page/site. Just follow the instructions in the readme.

Link: Write.as Popular Posts – Blazor WASM App

#Blazor #WebDevelopment #SoftwareDevelopment


Links to this page: Weeknotes – 006

Find me on Mastodon (@dino@writing.exchange) or Micro.blog (@Dino)