The idea behind the website
Since I registered ”fivepointseven.com” in 2015, I’ve re-done my website about 5 times. That’s more than once a year. And I was never quite happy with the result. Given that I never really had time to think it through and build it, I always resorted to using themes. And we all know how that works in the end.
So I decided, ”Okay, this time will be different!”. And it certainly was 😃
Show me the tech
At the time of building and writing this, one of my primary areas of experience is React. So it’s only fair to use React to build my own website, right? Well, yeah, but just building yet another React website is not good enough.
And I haven’t even told you about all the non-obvious stuff yet. But let’s go through everything piece by piece.
First things first, this website is a Next.js app.
Next.js is an amazing framework built by cool people at Zeit and it is the best way to do server side rendering with React, period. It also makes it incredibly easy to lie to the user (more on this later) to give them that sweet perceived performance.
Yes, this website is also offline first. Which is really an accident 😃
See, I still don’t believe that the whole ”offline first web” thing is gonna fly. I mean, ”web” and ”offline” are literally contradictory words. But nevertheless, people are doing offline webapps with service workers these days. What service workers are also really good at, is lying to the user. This whole damn website is built on lies!
See, service workers are sneaky. They install in your browser quietly, they intercept your requests and non-consentually put things in your cache. Which makes them perfect experience enhancers.
When you load any given page on this website, you load about 100-200kb of content. If your browser supports service workers, that little guy also gets installed. And upon installation it pulls every single thing in existence on this website (about 1.2mb total) into your cache, and from that point on, the whole website is loaded entirely from disk, which is near instant. And by complete accident, it also makes the website offline first 🤷🏻♂️.
CSS Grid is wonderful and magical and there’s absolutely no reason not to use it.
– Oi Max, but what about old browsers?
They have auto-update functionality since 2014. Old browsers is a thing that haunts systems that rely on lots of legacy shit. Most web applications built today - don’t and shouldn’t.
I’m watching u 👀
Every website does, to be honest. Everyone has those activity heatmaps, referer trackers, etc, etc. And this website is no exception. It uses Keen.io to aggregate lots and lots of custom events that I can then sort and query how I need. And unlike most of those abovementioned websites, I’m honest about it - your every move is being tracked. Clicked a link? Tracked. Read this thing till the end? Tracked. Scanned a QR code on my business card? Tracked!
Contact form is not using email. Email is offensive. I don’t like email. I do use it and check it regularly, but for the purpose of receiving messages from people I don’t think it’s the best solution.
As such, contact form is using a Telegram bot to send me an alert when someone fills out the form. I’m on Telegram almost 24/7, so that works perfectly for me.
There’s a total of 40 CSS animations on the website (excluding basic transitions) to provide maximum magic when interacting with the site.
As of recently, all the case study pages including this one are written in Markdown using MDX. MDX enables amazing workflow with Markdown and React and I really recommend checking it out.
There’s not a single !important in any of the styles.
Code is fully typed using Flow types.
The site was originally deployed with Docker on Google Cloud Platform, but some time ago I moved it to Zeit’s Now platform. Now is a beautiful way to deploy Node.js applications and it removes all the headache from the deployment process.
After the CI is done with the build, it puts all the secrets in place, deploys the website to Now and aliases the new deployment to the domain. Smoooooth.
Website is served via HTTP/2 which is supposed to give you some of that extra speed due to the sweet multiplexing that H2 does.
What was that about lying to the user?
Yeah, so most of the magic that you see around here is perceived. Let’s break down all the lies, starting from the first thing on the website.
The spinny compass
Next.js makes achieving this incredibly easy. What really happens when you go to root from those two pages, is you don’t go to ”/”. You go to ”/?nospin=true”. That query string is hidden from the user, but available to Next.js router, which makes the magic happen.
We’ve already talked about service workers and how the site uses caching. It pulls all of website’s data to disk cache. On a home connection, loading ~1mb of assets will take 2-3 seconds. The welcome animation plays for one second and it would take an average person ~2 seconds to look around, read the hello and notice links. So by the time you decide to go to a new page, it will most likely be ready on disk and you will get it immediately.
Links are also preloaded using Next’s own capabilities. All of these thigs combined with animations ensure fluid user experience.
Wow, you’ve made it this far! Or you just scrolled down to see how long this thing is. Regardless of which one it was, thank you for your interest. If you still have more interest, hit that back button at the top and check out my other works.
Thanks for your time and have an amazing day!