Reviving a jQuery Classic: Burger Builder Reimagined

Breathing New Life into a Classic

In the process of organizing old files, a 2015 project named 'burger.zip' resurfaced. This web project, a burger builder designed for a Swiss client, involved a unique feature: a radial menu of ingredients that users could select to assemble their burger. Originally developed using jQuery 1.7, the need to modernize this project was clear.

From jQuery to TypeScript and GSAP

The original project, spread across 1244 lines in five files, relied heavily on jQuery and a 780-line radial menu plugin. Updating this required a shift to modern technologies. By utilizing Vite for building, TypeScript for type safety, and GSAP for smooth animations, the project was reimagined without compromising the original user experience.

The radial menu, once a bulky jQuery plugin, was replaced with a concise 50-line trigonometry solution:

const cx = container.clientWidth / 2;
const cy = container.clientHeight / 2;
const radius = Math.min(cx, cy) - 40;
const step = (Math.PI * 2) / els.length;

els.forEach((el, i) => {
  const a = offset + i * step - Math.PI / 2;
  const x = cx + Math.cos(a) * radius;
  const y = cy + Math.sin(a) * radius;
  el.style.transform = `translate(${x}px, ${y}px)`;
});

Enhancing Visual and Functional Appeal

While the initial rebuild functioned correctly, it lacked visual flair. To address this, three parallel agents enhanced the visual components. They introduced gradients and sesame seeds on the buns, grill marks on the beef, and added animations like a quarter-turn tumble, squash on landing, and a gentle jiggle.

However, challenges arose. GSAP's y-tweens interfered with CSS transforms, requiring a strategic workaround to maintain the burger's position.

#burger {
  position: fixed;
  top: 0; bottom: 0;
  margin: auto 0;
  height: max-content;
}

Lessons Learned

In efforts to enhance the graphics, the original bun art's nuanced details were initially lost. This highlighted the importance of preserving certain original elements that contribute to the overall character of a project.

Conclusion

The archived version of the original project remains as a testament to its time, while the modern rebuild stands as a demonstration of evolving web technologies. This transformation not only revitalizes the project but also respects its origins by maintaining essential design features.

For more details, visit the GitHub repository.