Rebuilding our tech stack for the new Facebook.com

The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now.

Throughout the process, we anchored our work around two technical mantras:

  1. As little as possible, as early as possible. We should deliver only the resources we need, and we should strive to have them arrive right before we need them.
  2. Engineering experience in service of user experience. The end goal of our development is all about the people using our website. As we think about the UX challenges on our site, we can adapt the experience to guide engineers to do the right thing by default.

We applied these same principles to improve four main elements of the site: CSS, JavaScript, data, and navigation.

Rebuilding our tech stack for the new Facebook.com →

πŸ€” A bit weird they named the CSS section β€œRethinking CSS to unlock new capabilities” though, as they’re basically using CSS as it is meant to be used: use em for font-sizes so that users can zoom, use CSS Custom Properties for theming / dark mode, etc. #embracetheplatform

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

3 Comments

  1. … which makes it extra weird why the redesign is still not available on Safari. πŸ€·πŸ»β€β™‚οΈ

      1. Nope. I’ve had the new design for a while when using Chrome, but when you visit with Safari, there’s a small banner saying “The new Facebook is coming to this browser soon”. Seems to work fine when you set the user agent to Chrome though. Guessing it’s because Safari doesn’t do autoplay video? I see a lot of black squares (mostly ads) with “Sorry, we’re having trouble with playing this video”.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.