You know what
I’m gonna fucking rebuild my website since the ui got bashed pretty hard by a friend who studies hci

And just gonna make it faster while at it

It's not that bad....
Wait why does it take so long to load?

Is that 1 giant image?
Use a lower quality image, it's the web not a billboard.

@C0D4 shoukd be one of those demotivational postera in every design shop. "it's the web, not a billboard."

Some constructive hints while you're at it:

- The link buttons have too little contrast. Use https://wave.webaim.org/ to check that.

- No document structure: page regions and headings are missing.

- HTML has unnecessary type=script tags, and CSS doesn't validate. Use px only with a number, or 0 without unit. Use https://validator.w3.org/ to verify.

- Don't use inline style="", but external CSS sheets. Once you have more pages, the CSS will be cached across them. And when you add Content Security Policy, inline styles will suck.

- Similarly for scripts and icons: Don't inline them.

- Avoid loading from third party websites - host resources yourself. That is better for the privacy of your visitors, and your website avoids external points of failure.

- NEVER use absolute font heights in px. Use relative sizes to 100%, which is what the user has set in his browser for his accessibility needs.

- Avoid "target="blank". Let the visitor decide whether he wants a new window or not. Also, that breaks browser history back/forward and is especially annoying for people with screenreaders.

- Class abominations like <div class="project-module module text project-module-text align- editable js-editable js-project-module e2e-site-project-module-text"> show a gross misunderstanding how HTML and CSS are meant to be used. Avoid presentational class names. The markup says WHAT it is, not HOW it looks.

- Add expire server headers for your static resources, and minify your CSS/JS. Use https://gtmetrix.com/ to check.

- Don't scale down that huge JPG image in the browser. It's 4096x3083, that's why it takes 6 MB. Scale it down on the server. Or use the HTML picture tag for several versions of the image, depending on what size is needed, along with appropriate CSS breakpoints. And while you're at it, use WebP - JPG only as fallback for piece of shit browsers like current Safari or IE. And even in the current dimensions, it's twice as big as it needs to be - use efficient JPG compression.

- See https://developers.google.com/speed... - you have gone overboard with JS. The translation stuff seems to be very bloated.

@C0D4 the image is not even that large, the problem is the text. In order to quickly determine if two words collide, you need to draw them on canvas and determine the pixel positions. This essentially takes some seconds, and is noticeably long when settings are low

@F1973 it is, according to my ui design friend.

Plus now it’s basically a random selection which can be changed to spiral selection. And the text size does not necessarily reflect the frequency, although by chance it should, but no guarantee.

With the spiral, one can decrease the font size with control

@K-ASS That "word collision" thing sounds like you shouldn't be doing that in the first place. Sounds like manual, slow JS trying to do the browser's job.

@Fast-Nop oh man, so many, some of them I cannot even understand.

But yeah, I will take a look, thank you for the advice

@Fast-Nop I’m trying to be serverless, I guess it will be a lot faster with a c++ implementation

@Fast-Nop and no, how to arrange the text is not a browser work, it has to be determined by manually checking collision, and by manually I mean let JavaScript check it

@K-ASS The word collision is in the user's browser - that won't be possible with C++.

And no, word collision detection isn't necessary. Millions of websites do without that because the browser is perfectly able to do that. Use appropriate container divs with font relative size and let the browser do the word breaks, along with appropriate media breakpoints in CSS.

Hold on, your building a canvas then rendering the site inside that?

Idk if it's me having force dark theme on fucking with this by color inversion or not, but I can't read most of the text.

@Stuxnet ok that’s not the website I’m taking about, this one is free from Adobe so I don’t get control

@C0D4 no, just the word cloud is on canvas

@Fast-Nop wait so are you suggesting me to instead of drawing a canvas, do it as a webpage?

I’m confused, are we talking about the same website

Ok I need to clarify, I’m talking about my website to generate word cloud

@K-ASS ah gotcha

@K-ASS I don't see anything on your page that would even require a canvas. Everything you do looks like it's perfectly possible using HTML and CSS. It's a simple, static website, after all.

You see, if you want to have font scaling based on the window width, you don't use a canvas. You use container divs and style them in CSS using media breakpoints.

Actually, I don't even see anything that would require JS at all - except the Google Analytics spyware, which is also pretty pointless for a portfolio (i.e. non-sales) website.

That website with only HTML and CSS plus downscaled and properly compressed picture would be quite fast.

@Fast-Nop man, we are definitely not talking about the same website

@K-ASS I'm talking about the one from your profile. You don't need JS for that, let alone some canvas nonsense.

Which is why Google Pagespeed says your page is slow on multiple points - because it does things that it shouldn't be doing, and that other websites just don't do.

I get the feeling this thread went a whole different direction.

Are we taking about the same site?

Seems everyone is talking about
https://tangxuan.me/home

@C0D4 yeah i guess he ment
https://devrant.com/rants/2865613/...
(and btw my poor old Laptop isn't even strong enough to use it)

@Jedidja
Oh, that's actually worse.

https://gtmetrix.com/reports/...

@C0D4 Yeah just proper image scaling and using more JPG compression would do a lot.

@Fast-Nop ok yes I was talking about my word cloud and you were talking about the portfolio

To clarify, the word cloud is heavily dependent on js just because it needs to be. I’m trying to speed up the process to generate the word cloud and improve user experience by redesigning ui

The portfolio on the other hand, is out of my control. The images themselves are not uploaded to website. Instead, Adobe directly access my Lightroom library to display the images. Thus, the images are already scaled down. And again, it is out of my control

@Jedidja yeah that’s one problem I wanted to dress. Seems like other word cloud does everything on their server and I’m trying to localize it.

The performance issue is from the image processing part I guess, the selection is for loop which should not break the browser unless you saw it frozen and just shut it down. In that case, it is just running, and if you open the console you can see

@K-ASS Now I understand how you came up with using C++ for the word cloud - yes, that might work. And certainly it would not work with HTML/CSS alone.

But for the portfolio: just save the image, rescale and compress it, upload it to your webspace and link to it. Then you have it under control.

@Fast-Nop yeah, the c++ version’s only problem is that I will need a server to run the code.

And for the portfolio, I cannot manually upload pictures I think. And uploading the downscaling version seems to be redundant. The point of using Adobe portfolio is to have adobe do all the work and showcase the pictures. So I guess I will leave it alone now.
Plus I don’t think people are interested in my pictures

That's why it's good to make it clear what your usability goals are and how you will evaluate your ui ;)
I spent a good amount of time creating mockups of a ui (with every state described) that I'm working on just to make sure I don't waste time rewriting it after finding out that my boss needed different functionality etc.

Although I must admit that I only started appreciating HCI after I had some courses on it. I think people should be taught to at least know what caveats to look for in designs (be it their own or other's)...