Ordered SVGs, PS5 Storage Problems, & Imagine Dragons

My book club is not meeting to discuss the next part of Building a Modern Computer, so I will delay part 2 of that series until next week. In the meantime, I have picked up a few things this week that I would like to share.

SVGs render differently than regular html tags. Using a PS5 without additional storage is definitely a problem, but there is an easier cheaper solution. And Imagine Dragons has a great song out that has grabbed my musical ear and I want to share it with you.

Additionally, I am getting my second COVID-19 vaccine 💉 on Friday. To say that I am looking forward to getting life back to what it was pre-pandemic is an understatement. Back when singing was not a dangerous activity and the arts were flourishing. We had no idea how easily it could be taken away. Here’s to 🥃 looking ahead to socializing with strangers again (in two weeks and a day from when I write this).

SVG Rendering Order Tip

When I would see an SVG and modify it in JavaScript, I was under the impression that the elements rendered on the page similarly to other HTML elements. But they do not! From the MDN docs:

The globally valid rule for SVG files is, that later elements are rendered atop previous elements. The further down an element is the more it will be visible.

That means, if you are working with serval SVG elements, like and and tags in a , or group container, like so:

import React from 'react';

const SVGSandbox = () => (
  <svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
    <g>
      <rect width="100%" height="100%" fill="#000">
      <circle cx="150" cy="100" r="90" fill="#218412">
      <text font-size="50" fill="#FFF" text-anchor="middle">Soap</text>
    </g>
  </svg>
);

export default SVGSandbox;

The later elements will be rendered over the earlier elements if not positioned otherwise with x and y values. But, if we are trying to capture mouse events on several items in a , you can render a shape at the bottom of the and set the fill to transparent and detect the mouse events on the overlaying shape. Using local state to detect these events, they can be easily used to render changes on the other shapes within the tag.

If anyone wants a more detailed explanation of how to do this, please leave a comment and I will be glad to dedicate a step by step article and linked code sandbox explaining what I am doing. If the quote above was all you needed to understand what I just detailed (or it went straight over your head because this is not your 🍵), 🍻.

import React, { useState } from 'react';

const SVGSandbox = () => {
  const colors = ['#000', '#218412', '#FFF'];
  const [isHovering, setIsHovering] = useState(false);

  return (
    <svg version="1.1"
      baseProfile="full"
      width="300" height="200"
      xmlns="http://www.w3.org/2000/svg">
      <g>
        <rect width="100%" height="100%" fill={colors[isHovering ? 0 : 1]}>
        <circle cx="150" cy="100" r="90" fill={colors[isHovering ? 1 : 2]}>
        <text font-size="50" fill={colors[isHovering ? 2 : 0]} text-anchor="middle">Soap</text>
        <rect width="100%" height="100%" opacity="0" onMouseOver={setIsHovering(true)} onMouseOut={setIsHovering(false)}>
      </g>
    </svg>
  )
};

export default SVGSandbox;

I didn’t test the above code, but that should illustrate what I am talking about.

PS5 and Storage Space is a Problem

I came to the Playstation 5 without ever having owned or played for more than a few minutes anything on the Playstation 4. Even though there is not a wealth of PS5 content to play, there is a vast library of fantastic exclusives and third-party games that are excellent. The problem is, [the internal storage of the PS5 is limited to less than 1 TB]. I was constantly playing the juggling battle of deleting a game when I got a new one (because PS4 games are really cheap both in the PS Store and in physical media). It made not only a backlog, but an inability to play many of the games that I had. I know, first world problem right?! But there is a solution to this problem that I have found for less than the price of a new PS5 game.

I bought an external 2 TB WD drive for around $60. Next, I changed the setting for the PS% to automatically download PS4 games to the external drive. That took a while to finish, but now I have about 400 GB on the PS5 free with about 8 PS5 games on internal storage, and about 30 games on the external drive with about a 500 GB left of storage space. Now all my games are available to play whenever I want without having to delete a game and wait for the new game to download to the PS5. Having PS Plus for the free 20 great PS4 games is a great deal, but it fills your internal storage quickly. Of course, if you have more PS4 games, a bigger drive would be a good choice, but about 40 games is a lot to have on hand at once.

It is definitely worth it as it allows me to install all of my PS5 games on the internal memory and move all of my PS4 games to the hard drive. I have not noticed a big difference in loading times, either. It is still snappy.

Follow You by Imagine Dragons

Here are the chords and lyrics to sing and play along.

Happy musicing!

PS: My apologies for being a bit later in the week. Life happens.