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.
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.
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.
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:
// Copy redirect file to the output folder
Now, instead of having it show up under the title all the time, I also wanted it to show up to the right of the title, if the screen was wide enough.
So, if the page is being viewed on a wide screen, like on a desktop computer, the “Last Updated Date” will show up on the right side. If the page is being viewed on a small screen, like on a mobile phone, the “Last Updated Date” will show up under the title.
Here is how I made it responsive using Custom CSS:
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:
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.
Coney complained to me this morning that the YouTube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile, but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.
The issue stems from the fact that I have to use iframes to embed videos on write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.