Mini Show & Tell While between jobs recently, I ha...

# feed

[darkmoon_uk]

Mini Show & Tell
While between jobs recently, I had the pleasure of spending a little time on my Compose/WASM homepage.

Structure of the content still bears much improvement, but as a tech demo, some here may like to see it 💁
• Compose/WASM frontend
• Ktor backend
• Fully automated CI/CD pipeline: compiles the both and packages them as a Docker image via Google Jib plugin, publish image to local container and then web-hook redeploys.
Has a little Q&A chatbot that knows my resume data; now backed by Mistral 'La Plateforme' (🇪🇺💪).
All frontend/backend comms are via `kotlinx.rpc`kodee loving

UI is responsive using size-classes to lay-out sensibly across Desktop/Mobile (try resizing browser window).
Contact details and photo layout were fun to 'get right' using a combo of Flow layout and layout callback to match the vertical size of the 'flowed' contact details.

Full source via GitLab link at bottom of the site

[Stefan Oltmann]

Infinite loading screen on my iPad 👀

[darkmoon_uk]

Thanks for trying @Stefan Oltmann; I test the site on a number of WASM-enabled browsers/devices in general is seemed fine to me. Is your iPad on an older version of Safari? Does it load JetSnack for example? Anyway, I should probably catch WASM loading failure and present something else.

[Stefan Oltmann]

Nope, current iOS on iPad Pro M1. My own WASM pages work since Apple introduced support.

[Stefan Oltmann]

Oh, just checked... It also doesn't work for me on macOS.
Current Firefox.

[Stefan Oltmann]

There is a infinite loading screen... how long is it supposed to load?

[Stefan Oltmann]

Ah, it's finally there... it took 2 minutes to load. 👀

[Stefan Oltmann]

Is the loading animation fake or does it really load lots of data? 🤔

[CLOVIS]

About a minute of loading for me… I wonder what makes it so slow. It's 13MB, which is a lot for a website, but it still shouldn't take a full minute.

[S.]

I'd argue that compose for web is not the ideal tech for this kind of website. But this aside, it's normal that a wasm/canvas page takes longer to load because there are more resources to download and interpret than for a "traditional" html & js page (or compose html in kotlin's ecosystem). until all of that is finished you will see a blank or loading screen. You can also see that until there are MBs (!) of fonts downloaded, you can't read any text. Because there's no fallback. A typical portfolio page probably has a MAXIMUM of 1 or 2 MBs of resources, yours downloads 50MB, that's quite a lot.
@darkmoon_uk to help a little, I would strongly suggest to use some content-encoding like gzip and apply proper caching headers. that would already largely compress the transferred files and not have the browser download the same static resources each time

[Stefan Oltmann]

https://stefan-oltmann.de/oni-seed-browser/ also uses custom fonts and a lot of assets. Its multiple MB, too. But I’m on local WiFi, so the page loads within 5 seconds.

The minute-long loading screen seems to be wrong.

Maybe the loading is already completed and the animation is just wrong?
Didn’t look into the code what it’s actually doing.

[CLOVIS]

Oni seed loads in ~2s for me, even with force-reload

[S.]

still a lot less MB. it's just 5.5MB to download since you're properly compressing the files. Hatton's page has an uncompressed 25mb emoji font for example

[CLOVIS]

^which takes 15s to load for me by itself

[Stefan Oltmann]

Yeah, I worked a bit on the resources lately. 🙂

[Stefan Oltmann]

Wait…. 25 MB just for the TTF file alone?

[CLOVIS]

yes

[S.]

https://fonts.google.com/noto/specimen/Noto+Color+Emoji this one. and it's not the only font the site uses

[Stefan Oltmann]

The Chinese font for ONI is also huge, but I use a tool to remove all characters that are not part of the strings.xml . I don’t know if this could be done here, too.

[CLOVIS]

Most likely, the site is mostly static so I don't think it uses that many emojis

[Stefan Oltmann]

Ah, I guess it’s part of the third tab - the compose test card for font loading.

I would have made that a separate project and not part of my portfolio page.

[S.]

I understand it's project to play around with things. a portfolio with a ws rpc service is rather uncommon.
the issue is that, the loading screen (the white one) is displayed until the emoji font has finished being downloaded. the other fonts, arguably more important ones to show the main content, are only requested afterwards

[Stefan Oltmann]

The white loading screen is displayed to me like 2 seconds - similar to my ONI seed browser.
That’s when the WASM app starts. On his page it shows a infinite loading screen for more than a minute. That’s certainly done by WASM.

[S.]

this one?

[Stefan Oltmann]

Yes, but with black background.

[S.]

oh do you happen to have lightmode enabled in the browser? for me it's the other way round

[Stefan Oltmann]

Isn’t that already the WASM app?

[Stefan Oltmann]

I believe the loading animation is fake or broken.

[S.]

yeah, once .wasm has finished it changes colors and I get the white one

[Stefan Oltmann]

What happens the two minutes after that? 🤔

[S.]

emoji font

[S.]

and I believe that the actual text content is fetched from the api, since there's a 42kb request. but only after all fonts are downloaded. these things definitely have to be switched around

[Stefan Oltmann]

Ah, ok, so maybe the backend is slow.

[darkmoon_uk]

Thanks @Stefan Oltmann, @S. & @CLOVIS for your thoughts on the (poor!) loading performance of my site; I hadn't paid much attention to that side of things but judging by the numbers mentioned above I really should!

I'm a little surprised by reports of a minute or more since I've never seen it take more than 10s to load (although that is still too long), and the Font resource in particular should load asynchronously after the main page. The fact that it isn't might be a race condition that can be influenced.

That said, I can't defend the indefensible 🙂
Will see what I can do to improve things when I next have time on it; will be an interesting technical exercise.

[S.]

10s in dev environment or of the published page? but judging by your timezone, the server might also just be far away from us. and yeah as you can see in the waterfall I posted above, the emoji font seems to block, the other two are async

[S.]

compression and fixing/switching around the requests will probably do wonders

[darkmoon_uk]

10s from remote locations - office in the city. The site itself is coming from my own home, but that's on 1Gbps fibre connection and has been very fast within my city. Perhaps it becomes much slower outside Australia for some reason.

[S.]

well, that is to be expected

[darkmoon_uk]

I'll start with adding GZip - instant turn-key speed boost (that I've advised others to do many times before 🤦) and looking at influencing the request order.

[darkmoon_uk]

Since I do log the questions asked of my Chatbot; it was interesting to see some attempts at making it give up the system prompt; or trying to make it lie that I've worked at Google 😆

[darkmoon_uk]

I'm pleased to say mistral-small-latest did a great job of handling that diplomatically! (Not ChatGPT as someone else asked)

[darkmoon_uk]

As for the system prompt; it can be seen in the (open) source code [1][2].

[Eugen Martynov]

Can not copy from chat. But asked AI - how old is Chris and got - he was born 1979 and he is 44 years old. Clearly hallucination or my math skills are not good.

[Eugen Martynov]

Also got quite long time loading