Ok, this is pretty meta – I'm writing about the website your currently on. But I really like the way it is built, so let's have a look at that.
I wanted a website that fulfills the following requirements:
As React runs just as well in a node.js context as in the browser, the whole code for the pre-rendering is exactly the same as the one for the client side app.
Motion design is something really important to me. With this project I challenged myself to incorporate very natural motion – moving elements should closely resemble physical objects from the real world.
If you check out a photo gallery, you might notice a difference of the movement from traditional CSS animations. All motion is calculated with spring formulas, which come really close to movement in the real world. Try to navigate fast through the pictures and you'll notice the speed of the movement increasing – you'd have to hack CSS animations quite a bit for such a behaviour.
On a mobile phone you can also use swipe gestures to navigate through the photos. Swipes are also cancellable at any point and respond as expected. When you reach the end, you'll notice the motion of the elements telling you that you've reached the end – no need for a textual hint. And all that with smooth 60 FPS :).
The base for the animations is from Ralph Thomas – a true genius in the field of physics-based UIs.
What keeps the app together is the module bundler webpack. If you're doing frontend, I can only advise you to have a look at an introduction. Here's a list of things webpack does with an overseeable configuration:
Webpack can also output a JSON file containing all the names of the generated assets. In an earlier version of this website, I used that to cache all static assets with a service worker in an offline cache, so the whole website also runs offline. However, I removed that feature later, since the website has grown quite a bit in size and you don't want a website that you're visiting for the first time to put 20MB of images and videos in a (semi-)permanent cache. But for an app that somebody uses frequently, this approach would be a great addition to the UX.
Regarding CSS, I wanted to try a new structural approach. Usually I recommend BEM for React apps, but the long class names can make your HTML code a bit noisy. That's a point where CSS modules really shine.
With CSS modules you can write code like this:
At first you might get frightened, because it looks like the class names
.icon will be used. Those are names that are guaranteed to cause naming collisions in every website that uses more than a few divs.
.lLSSjheLU1W5Br9UATESw, which will prevent name clashes.
It's actually very similar to what you get by using the style encapsulation features of shadow DOM, but without sacrificing on browser support.
I love being efficient when developing.
Development can be such a joy when tools don't get in your way. I should thank Dan Abramov for his great work in this area at this point.
If you want, you can check out the full code of this website on Github.