Project / Website

A Tale of Tasty Transformation.

January 08, 20223 min read
logo of Taiwan Tapas

A Tale of Tasty Transformation: Our Family Restaurant's Makeover! 🍲

Once upon a time, in a bustling little town, a family restaurant opened its doors, and the magic began. Fast forward two years, and our enchanting Taiwanese eatery has undergone a metamorphosis that would make any caterpillar green with envy. From battling hygienic dragons to navigating through the treacherous lockdowns, we emerged victorious with a sparkling Google score of 4.7 stars, proving that our sumptuous dishes and pocket-friendly prices are a match made in culinary heaven. 🥢✨

Our online presence soared to new heights, and we crafted a website along with vital entries on Google and TripAdvisor, all with minimal fuss. Our website, with an impressive 200 daily visitors, is quite the virtual superstar among small businesses. Netlify, the online genie, hosted our website effortlessly, but we faced a minor hiccup when attempting to host multiple domains from different providers on it. Certificates got tangled, which is a big no-no for a customer-facing website. But, as they say, you live and learn!

If we were to travel back in time, we'd host on Netlify with Gatsby again, but this time, we'd keep everything under the mighty Netlify umbrella. Should our stakeholders wish to sprinkle their creativity on the content, we'd consider hopping back to WordPress. However, Gatsby gives us the freedom to dance with full flexibility while keeping things less complex. 💃

A Peek Behind the Technical Curtain 🔧

Though there are no major differences between and this delightful blog, we did take a different approach to styling. We ventured into the world of Tailwind CSS to unravel the mysteries surrounding its popularity. Admittedly, we were skeptical about this newfangled abstraction, but then we saw the light, and here's why:

  • Faster than a speeding stylist: We discovered that perfection can take a backseat when speed is the priority. Tailwind is like using inline styles without the bulk or the nagging voice in your head scolding you for writing inline styles.
  • Simpler than CSS modules: React (and Vue, its cousin) is all about keeping everything in one file. Many libraries push this idea, advocating for CSS in JS in various forms. Tailwind shares the same philosophy but adds a sprinkling of development speed, making it superior to plain old CSS.
  • Logarithmic time complexity: This one may not have mattered much to us, but with Tailwind, your code's time complexity grows logarithmically. Thanks to tree shaking on build, only used CSS is retained and reused. In other CSS in JS solutions, you may find yourself rewriting the same styles. Composition is possible but not as easily integrated into your CSS solution.

While we've yet to fully master Tailwind in a more extensive project, its benefits, coupled with an excellent dark mode implementation, have transformed our initial skepticism into admiration. What we once dismissed as an unnecessary abstraction with a dreadful syntax now holds the potential to become our go-to tool for writing CSS that's faster, more reusable, and a smidge more performant than ever before. 🚀

Taiwan TapasTaiwanese FoodGatsbyBlog