Going from Figma to React, responsively

November 2, 2022 By Mark Otto 0

✍️ If you missed last week’s issue, you’ll want to catch up as it was a big one with Next.js 13 and Turbopack getting announced. This week is a little quieter for big news, but there’s still plenty to be getting on with.. 🙂
Peter Cooper, your editor

Together with  Frontend Masters logo

Remixing Shopify: The Remix Project is Joining Shopify — Shopify, the Canadian e-commerce platform, is well known as a Ruby shop but also does a lot of front-end stuff, such as building the React-powered Hydrogen framework. It appears they see Remix’s full-stack approach as a good way forward for building Shopify apps, and they have a good reputation as a steward for such projects.

Michael Jackson (Remix)

If you’re keen to see how the Hydrogen + Remix story will pan out, there’s a roadmap for their early 2023 releases which includes a Remix-enhanced Hydrogen 2.0.

New Course: Remix Fundamentals — Join Kent C. Dodds for this detailed video course and get up to speed on all things Remix — the full stack web framework. This course covers nested routing, mutations, progressive enhancement, prefetching, error handling, and much more.

Frontend Masters

Responsive Figma-to-React Components with Little Code in Amplify Studio — If you’re using Figma in your interface design process, AWS’s Amplify Studio now has some enhancements for creating responsive components through its so-called ‘Figma-to-Code’ process. Build variants and customize your breakpoints and Amplify Studio generates the React components with your “design decisions built in.”

Amazon Web Services

Code Coverage with Storybook Test Runner — Coverage reports can show you how much of your code is actually executed during testing and allow you to find untested edge cases – something you’ll definitely have as your app picks up more and more possible UI states. Storybook test runner now generates coverage reports to help with this and supports React, Svelte and Vue out of the box.

Yann Braga (Storybook)

🧊  Creating 3D Graphics from React — If you’ve been intending to incorporate 3D into your React project, but don’t know quite where to start, this is an ‘assumes nothing’ (or very little) approach to the subject.

Favour Ogbonda (OpenReplay)

🛠 Code and Tools

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

💝 A little bonus