DEV Community

Discussion on: What was your win this week?

Collapse
 
siddharthshyniben profile image
Siddharth

Waiting for the site! Lets see how good it actually is, as this is your first not-silly site.

Also love your content, and more content = 😎

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Didn't realised you hadn't seen any "serious" stuff of mine.

A little out-dated now and it has fallen into disrepair but my favourite site is still my old company site klu.io as it was (and is) just so different.

The site is over 5 years old and I had only been doing websites for a few months then so there are loads of things I would do better, but as I hand crafted every single graphic and animation it still holds a special place for me!

Despite all of that - it still holds up today for most stuff (a real 100 for speed on mobile...none of this bull where people show their desktop scores!), works all the way back to IE9, it even works without JavaScript!:

klu.io scoring 100 / 100 for performance, accessibility, best practices and SEO

Best viewed on Desktop FYI and you should check out the "The Secret to a great website" page - the mobile experience is only average at best (one of the things I would rethink).

So see what you think of that, then contrast it with the new site when it launches (new site is more corporate though so it won't be as fun!)

Thread Thread
 
siddharthshyniben profile image
Siddharth

That site is cool, considering the fact that every animation was handmade it should have taken a while. But can't really say i like it, the design is old school.

IE9, no JavaScript... How do you even do that 😬

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

IE9, no JavaScript... How do you even do that 😬

Progressive Enhancement - those two words still guide nearly everything I do.

You start with a base experience that will work in 99.5% of browsers but might not be fancy and then add features that modern browsers support.

As for no JS, a bit of server side magic solves that where if I request a page via AJAX it just sends a page fragment. So it works like a SPA when JS loads, but if I request a page normally (when JS fails or is switched off) then it will send the entire page as static HTML and function as a MPA.

As all the animations etc. are just SVG and CSS the only thing that changes is the page reloads instead of transitioning. Oh and a load of hacks with vw units to fix the crappy IE9 layout engine!

the design is old school.

It wouldn't be the word I would use to describe it as there are no old school sites that look like or behave like it either...weird is probably a better description and I am sure you are not the first person to dislike the design as I have strange taste! 🤣

Although I prefer "unique" rather than "weird" as that sounds more flattering! 😋

The point is more around performance anyway as that is the most complex site I have seen that scores 100 on performance.

It was a technical showpiece and a learning exercise for me rather than a design showpiece as my design skills weren't (and probably still aren't) stellar!

You should also run it through Mozilla Observatory - not many sites get 125 / 100 on there and there are some interesting tricks I had to do to get the Content Security Policy to work and load Google Analytics without ruining the scores!

I might go and fix the PWA as that seems to have broken so it no longer installs 😪