css — Attach to Process

DevNotes - 002

Thu, 04 Aug 2022 00:00:00 +0000

What is a react helmet?

React helmet is a helper component that allows you to add data to the section of a document or HTML page. It basically allows you to add tags, and other tags that goes into the 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.

Reference: Resizing background images with background-size

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.

Note: 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:

Pipelines.Add(
    // Copy redirect file to the output folder
    CopyFiles("_redirects")
);

Tags: #DevNotes #CSS #Gatsby #Github #NodeJS #ReactJS #Wyam #Yarn

Discuss... or leave a comment below.

Attach to Process Write.as Theme

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

How to add Responsive "Last Updated Date" to Pinned Pages on Write.as

Fri, 21 May 2021 17:30:00 +0000

On some of the pinned pages on my journal, I added a “Last Updated Date” value right under the title. I did it using a span element, like this:

# Archive📜

Last Updated: 2021-03-17

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:

span.lastUpdatedDate {
   font-size: 0.7em; 
   color: silver; 
}
@media screen and (min-width: 480px) {
   span.lastUpdatedDate {
      float: right; 
      margin-top: -4em; 
      margin-bottom: -4em;
   }
}
@media screen and (max-width: 479px) {
   span.lastUpdatedDate {
      margin-top: -2em;
      padding-bottom: 2em;
      display: block;
   }
}

Here is what it looks like on a wide screen:

Here is what it looks like on a mobile phone:

If you know of an easier way to do this with less CSS, please let know in the comments below. Or you can do so privately by leaving me a message.

Tags: #HowTo #CSS #WriteAs

Discuss... or leave a comment below.

Hide HTML Element Without Taking Up Space

Tue, 19 Jan 2021 02:00:00 +0000

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 the pinned pages on my journal.

Tags: #HTML #CSS

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.

How to Embed Responsive YouTube Videos on Write.as

Sun, 19 Apr 2020 18:07:39 +0000

Updated: 4/26/2021

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.

Custom CSS

I added the following Custom CSS:

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML Changes

And on my posts where I embedded YouTube videos, I simply wrapped the iframe element with a div element that had a class attribute value of “video-container”, like this:

With those changes in place, I have found that the YouTube videos I embedded on my posts will shrink down to match the size of the screen on a mobile phone, or will expand to match the width of the text on a post when viewed on a desktop browser. Pretty cool.

Tags: #HowTo #HTML #CSS #WriteAs

Discuss... or leave a comment below.