Biodata/résumé (simple) project related notes

Last updated on 6 Oct. 2024
Over past few days I am updating my (Ravi S. Iyer) biodata/résumé - GitHub repo. Some notes related to the biodata source files/project are given below:


Get Query String Parameters with JavaScript, https://davidwalsh.name/query-string-javascript

To force Chrome to discard cache for specific site/URL and reload page: Ctrl+F5 . I had to do this to get Chrome to show my latest biodata page hosted on github. Ref: clear cache for specific website in Google chrome, https://support.google.com/chrome/thread/16531954/clear-cache-for-specific-website-in-google-chrome?hl=en

To save a web page (biodata, in this case) in colour as PDF in Chrome, check "Background graphics" option in Save As PDF dialog. Ref: Win10 - Is there a way to print a web page to PDF in color?, https://www.reddit.com/r/techsupport/comments/nlnw7s/win10_is_there_a_way_to_print_a_web_page_to_pdf/
=============

What meta tags are important to use?
Links to a video: How much time should I spend on meta tags, and which ones matter?, https://www.youtube.com/watch?v=RBTBEfd7z_Y , 2 min 18 secs, 12 years ago - Core message is that meta description matters but keywords don't matter much.

Adding biodata page to Google Search Console:
Tried domain (property) verification but that needs some DNS configuration entry.
Am now trying URL-prefix (property) verification (Verification method: HTML file) which needs a specific file provided by Google to be uploaded to site. That worked. Now Google SC says it is processing data for the site and so I will have to revisit it after a few days to check whether it indexed the biodata page.

==========
Oct 5. 2024
I noticed that the github.io load shows black-and-white text for a few split seconds before the coloured content is shown. There is also a layout shift.
I suspect that this is because of the javascript code loading the css file(s) as a second step.

https://pagespeed.web.dev/analysis/https-ravisiyer-github-io-biodata/1auexe6zuz?form_factor=mobile is a nice site analyzing the performance and other aspects of the site. CLS (Cumulative Layout Shift) is flagged as an issue.

I think I should use a statically specified css file for the regular colour site. If the blackandwhite version is chosen (through query parameters) then I should take on the performance hit of dynamically loading black and white css file (and, if required, dynamically removing the statically specified colour css file).
Related article:
How to dynamically remove a stylesheet from the current page, https://stackoverflow.com/questions/5033650/how-to-dynamically-remove-a-stylesheet-from-the-current-page ... This response may be useful for me:

If you know the ID of the stylesheet, use the following. Any other method of getting the stylesheet works as well, of course. This is straight DOM and doesn't require using any libraries.

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

=========

Perhaps there is an easy way to have only one css file which conditionally uses colour CSS or plain black-and-white css. ...

How to load css resources conditionally ?, https://www.geeksforgeeks.org/how-to-load-css-resources-conditionally/ mentions media print as one possibility but I want it for the regular page too. ... Printing, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing seems to confirm that it may not be suitable for my needs.

Using @import in CSS to Conditionally Load Syntax Highlighting Styles in Dark Mode, https://blog.jim-nielsen.com/2019/conditional-syntax-highlighting-in-dark-mode-with-css-imports/

Looks like media query is one possibility but I need a kind-of custom media query feature. https://developer.mozilla.org/en-US/docs/Web/CSS/@media does not seem to cover such custom features.

---------------

Is it okay to add id/class to <link> tag?, https://stackoverflow.com/questions/10077475/is-it-okay-to-add-id-class-to-link-tag ... It seems that the following is OK:
<link rel="stylesheet" href="css/mobile/load.css" id="stylesheet_mobile" />
----
The post author needed it for "us(ing) JavaScript to dynamically disable stylesheets" which is what I need.

===========
Trying out solution of static colour style sheet which is disabled dynamically using JavaScript and replaced with plain black and white stylesheet if query string specifies black and white. ...

Now https://ravisiyer.github.io/biodata does not show black and white data first. The colour version is shown straightaway.
======
Lighthouse shows a CLS of 0 for mobile as well as for desktop. 
Strangely, initially https://pagespeed.web.dev/ was showing similar or same CLS as before I made the changes. However, after I tested with Lighthouse and then re-tested pagespeed.web.dev it showed CLS of 0 for both mobile and desktop.

https://ravisiyer.github.io/biodata/index.html?display=blackandwhite gave CLS of 0.191 in Lighthouse for desktop (0 blocking time) and a CLS of 0.162 for mobile (and 210 ms blocking time). But that's not an issue as visually I could not make out either a layout shift issue or a delay issue. Further, this page is not the regular page. Coding wise, it is here that a new stylesheet is loaded which stylesheet would have to be retrieved from the server.
---------

Hmm. It just struck me that I could load both stylesheets but disable one of them. Some references are shared below. I think I could do it quite easily but there seems to be a standard/non-standard issue. I don't think it is worthwhile to invest time on this now. Only if the plain black & white display option is used regularly and has performance issues, then I should invest time in seeking a good/standard solution.

Add <link disabled> stylesheets to document.styleSheets, https://github.com/whatwg/html/issues/9977
Dynamically Enable/Disable CSS files, https://gist.github.com/achingono/7661804
How to disable a CSS stylesheet with JavaScript, https://sgued.fr/blog/disable-css/ - "Using disabled on <link> element is not standard and should be avoided. "

Comments

Post a Comment