Failure to read any of the writings articles with Qt5 WebView (i.e. WebKit)

[cipriancraciun]

Accessing the following URL with a Qt5 WebView based browser (that uses behind the scenes WebKit) fails. First it seems to show the contents, then it just errors out with Application error: a client-side exception has occurred (see the browser console for more information).

=> https://brianlovin.com/writing/the-shape-of-software

Since there isn't a developer console I can't say why it fails.

---

P.S.: Nice article, at least the philosophical part about software written to one own's particular needs. Too bad the article requires JavaScript to read... :)

[brianlovin]

Thanks for the heads up. I'm not familiar with Qt5 WebViews — how could I reproduce that on my side? I'm on macOS.

[cipriancraciun]

For some reason the page does load with the following simple script, but fails in a more complex Python Qt5-based browser. Thus you could perhaps ignore this issue.

It might be perhaps because your site uses some "advanced" JS functionality that trips WebKit? (I say this because initially the page does load, then it "flashes" to the white blank page with the error noted above.)

---

I think a simple Python script as the following one would do (but as said it does work for your site):

import sys
from PyQt5.QtWidgets import QApplication
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView

app = QApplication(["webview"])

browser = QWebEngineView()
browser.load(QUrl("https://brianlovin.com/writing/the-shape-of-software"))
browser.show()

sys.exit(app.exec_())

[brianlovin]

Got it, thanks for the extra details. I'm thinking this might be at the edge of how people might experience my site, but I'll keep an eye out for any broader access issues in the future.

[cipriancraciun]

I'm thinking this might be at the edge of how people might experience my site, but I'll keep an eye out for any broader access issues in the future.

You might want to take into account a non JavaScript version of your site... :)

There aren't many (percentance wise) people accessing the web today without JavaScript enabled, but in absolute terms they might be quite a few... (I'm one of them, and I find it astonishing how many sites require JavaScript to display anything, although strictly speaking they wouldn't need JavaScript for the functionality they offer.)

[brianlovin]

Right now almost every page is working on my end with JS disabled — I found one bug when navigating from the Writing index view to a single blog post, but all of the other list/detail views seem to be okay. A lot of JS-backed interactions, like reacting to something, aren't working though.

Have you found other pages that aren't working in your browser with JS disabled?

[cipriancraciun]

Have you found other pages that aren't working in your browser with JS disabled?

Indeed the site works without JS enabled, at least on a "fresh" Firefox profile.

Unfortunately, it seems I assumed that the site doesn't work, because I have a custom CSS stylesheet (i.e. userContent.css) that it seems bandly interacts with your own CSS, and thus it results (visually) in an emtpy page. (My customized CSS basically forces my font, foreground and background, and a few other simplifications; however I would say 99% of the sites, that don't break due to JS, do not have any issues with my userContent.css, so there must be something that trips over your CSS.)

So, once again sorry for the false issue report. :)

---

BTW, if you want to make a small experiment, also try to use No Style from View -> Page Style (on Firefox).

[brianlovin]

Thanks for the tip. Could you share any screenshots or details about your custom CSS file? Would be cool to poke at this and see if I can figure out what might be going wrong.

[cipriancraciun]

Sure, below is (part of) the userContent.css.

It should basically just make everything yellowish-on-dark-red, with custom font and size. (It also removes shadows, filter effects, and other things that just make everything slow.)

Normally the site shouldn't "break", but in the case of your site I just get a "blank" (i.e. dark-red) empty page.

It is strange, because I don't touch layout properties like display, position, left, right, etc.

@-moz-document {

    html:root {

        --uc-foreground  : hsl(30, 75%, 75%);
        --uc-border      : hsl(30, 75%, 25%);

        --uc-a-remote    : hsl(210, 75%, 75%);
        --uc-a-hover     : hsl(330, 75%, 75%);
        --uc-a-local     : hsl(15, 75%, 75%);

        --uc-background  : hsl(0, 75%, 10%);

        --uc-selection   : hsl(0, 75%, 20%);
        --uc-placeholder : hsl(0, 75%, 20%);
        --uc-scroll-a    : hsl(0, 75%, 20%);
        --uc-scroll-b    : hsl(0, 75%, 10%);
    }

    html:root,
    html:root *,
    html:root *::after,
    html:root *::before,
    html:root *::marker,
    html:root *::placeholder,
    html:root *::selection {
        border-color : var(--uc-border) !important;
        /* border-width : 1px !important; */
        border-radius : 0px !important;
        outline : none !important;
        opacity : 1 !important;
        box-shadow : none !important;
        text-shadow : none !important;
        text-decoration : none !important;
        filter : none !important;
        mix-blend-mode : normal !important;
        backdrop-filter : none !important;
        transform : none !important;
        transform-origin : none !important;
        translate : none !important;
        scale : none !important;
        rotate : none !important;
        perspective : none !important;
        transition : none !important;
    }

    html:root {
        font-family : "JetBrains Mono NL" !important;
        font-weight : normal !important;
        font-style : normal !important;
        font-variant-ligatures : none !important;
        font-size : 20px !important;
        line-height : 30px !important;
    }
    html:root *,
    html:root *::after,
    html:root *::before,
    html:root *::marker,
    html:root *::placeholder,
    html:root *::selection {
        font-family : inherit !important;
        font-weight : inherit !important;
        font-style : inherit !important;
        font-variant-ligatures : none !important;
        font-size : inherit !important;
        line-height : inherit !important;
    }

    html:root,
    html:root *,
    html:root *::after,
    html:root *::before,
    html:root *::marker,
    html:root *::placeholder,
    html:root *::selection {
        color : var(--uc-foreground) !important;
        background : var(--uc-background) !important;
        cursor : default !important;
    }

    html:root body *,
    html:root div *,
    html:root h1 *,
    html:root h2 *,
    html:root h3 *,
    html:root h4 *,
    html:root h5 *,
    html:root h6 *,
    html:root p *,
    html:root ol *,
    html:root ul *,
    html:root dl *,
    html:root pre *,
    html:root blockquote *,
    html:root table *,
    html:root form *,
    html:root main *,
    html:root header *,
    html:root footer *,
    html:root nav *,
    html:root section *,
    html:root article *,
    html:root aside *,
    html:root dialog * {
        background : transparent !important;
    }
    html:root body,
    html:root div,
    html:root h1,
    html:root h2,
    html:root h3,
    html:root h4,
    html:root h5,
    html:root h6,
    html:root p,
    html:root ol,
    html:root ul,
    html:root dl,
    html:root pre,
    html:root blockquote,
    html:root table,
    html:root form,
    html:root main,
    html:root header,
    html:root footer,
    html:root nav,
    html:root section,
    html:root article,
    html:root aside,
    html:root dialog {
        background : var(--uc-background) !important;
    }

    html:root a[href],
    html:root button,
    html:root select,
    html:root input[type="submit"],
    html:root details > summary {
        color : var(--uc-a-remote) !important;
        cursor : pointer !important;
    }
    html:root a[href] *,
    html:root button *,
    html:root select *,
    html:root input[type="submit"] *,
    html:root details > summary * {
        color : inherit !important;
        cursor : inherit !important;
    }
    html:root a[href]:hover,
    html:root button:hover,
    html:root select:hover,
    html:root input[type="submit"]:hover,
    html:root details > summary:hover {
        color : var(--uc-a-hover) !important;
        outline : dotted 1px var(--uc-a-hover) !important;
        outline-offset : -1px !important;
    }
    html:root a[href^="#"] {
        color : var(--uc-a-local) !important;
    }
    html:root a[href="#"] {
        color : var(--uc-foreground) !important;
    }

    html:root input,
    html:root textarea,
    html:root select {
        -moz-appearance : none !important;
    }

    html:root img,
    html:root svg,
    html:root video,
    html:root canvas {
        background : hsl(0, 0%, 10%) !important;
        filter : grayscale(1) !important;
        mix-blend-mode : luminosity !important;
        opacity : 0.5 !important;
        font-size : 0px !important;
    }
    html:root img:hover,
    html:root svg:hover,
    html:root video:hover,
    html:root canvas:hover {
        background : hsl(0, 0%, 50%) !important;
        filter : none !important;
        mix-blend-mode : normal !important;
        opacity : 1.0 !important;
    }

    html:root > body {
        margin-left : 4ch;
        margin-right : 4ch;
        margin-top : 4ch;
        margin-bottom : 4ch;
    }

    html:root,
    html:root * {
        scrollbar-width : thin !important;
        scrollbar-color : var(--uc-scroll-a) var(--uc-scroll-b) !important;
    }

    html:root *::-moz-selection {
        color : var(--uc-foreground) !important;
        background : var(--uc-selection) !important;
        opacity : 1 !important;
    }
    html:root ::-moz-placeholder {
        color : var(--uc-placeholder) !important;
        background : transparent !important;
        opacity : 1 !important;
    }

    html:root h1,
    html:root h2 {
        font-size : 1.10rem !important;
    }
    html:root h3,
    html:root h4 {
        font-size : 1.05rem !important;
    }
    html:root h1,
    html:root h2,
    html:root h3,
    html:root h4,
    html:root h5,
    html:root h6 {
        font-weight : bold !important;
    }
    html:root sup,
    html:root sub,
    html:root small {
        font-size : 0.50rem !important;
    }
    html:root b,
    html:root strong {
        font-weight : bolder !important;
    }
    html:root em,
    html:root i,
    html:root q {
        font-weight : lighter !important;
    }
    html:root s {
        text-decoration : line-through !important;
    }
    html:root u {
        text-decoration : underline !important;
    }
}

[brianlovin]

Strange, on first skim I can't see anything that jumps out as being a culprit. If you decide to poke at it, let me know if you find the offending selector(s) 😊