DEV Community

Discussion on: What was your win this week?

 
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 😪