Design comparison
Solution retrospective
I didn’t go into this project expecting to have much trouble, and I was mostly right. At least, I never ran into any of the unrelenting existential crises posed by some of the previous challenges I’ve worked on, which made for a nice change of pace. What the project did have was a relatively wide scope of page contexts, each with its own set of edge cases to consider. Rather than posing one or two major roadblocks, this was more a test of endurance in solving a longer string of minor challenges.
I’ve spent my last few FEM projects working toward a final “go-to” stack of technologies to use (including Vite, TailwindCSS, and Svelte), and I continued that here by adding in Cypress for E2E testing. Since this project was going to be light on Javascript, I decided to use Astro instead of plain Vite.
Unfortunately, my environment-configuration skills weren’t quite up to the task of configuring five different tools at once (Astro, Vite, Svelte, Storybook, Tailwind), most of which have “convenient” one-command setups and which expect to be the center of your universe once installed. I ultimately dropped Storybook and Svelte in favor of a (somewhat ad-hoc) component testing strategy using Cypress.
As mentioned above, the site itself came together fairly easily once I managed to stop fighting with my toolchain. The hardest component to implement was probably the mobile navigation with its werid, four-dimensional background circle. I look forward to submitting this project and taking a look at some other solutions, since I’m not at all happy with the concessions I made in order to make mine work.
One important lesson I learned had to do with the various SVG illustrations on the index page: if you’re going to inline SVGs, particularly those using the <defs> element, make sure all of its ids are globally unique, since the SVGs can see each other once you’ve stuck them into the same markup. Equivalently, if some part of some SVG is inexplicably blurry, cropped, or otherwise mangled, there’s a good chance it’s borrowing an effect or path element from a neighboring graphic. It’s a good idea to check for this error first before spending two hours debugging a graphic by hand, which is a lesson I won’t be forgetting any time soon.
Community feedback
- @elaineleungPosted over 2 years ago
Hey Alexander, this is great work, and I especially enjoy reading the process you went through, which I find super useful. I never heard of Astro, but after checking out your code I feel like that's something I'd be interested in, and I would definitely check it out.
I got two questions here:
-
I haven't had much experience using 'aria-controls', and what I've heard about it so far hasn't made me really want to use it yet in my projects. I was reading Heydon Pickering's post on how to build a menu, and he mentioned how
aria-controlsisn't supported everywhere, and therefore there should be more reliable ways for control. Given his post is quite dated, I wonder whether things have changed, so I wanted to see what's your experience in usingaria-controlsand whether it's still as unreliable as Heydon says. -
What's your take on Svelte vs. Astro, and what were the issues you ran into with component testing that made you drop Svelte + Storybook and stick with Astro in the end?
0@SakeranPosted over 2 years agoHi Elaine. To be honest, I did the non-CSS parts of mobile navigation here mostly on auto-pilot, so it took me a second to remember where I even used
aria-controls. I think I saw Kevin Powell use it once in his Scrimba course and never really questioned how necessary it was. I did just do some research on it, and DigitalA11y's page on aria-controls would suggest that not much has changed. Adding it doesn't really hurt anything, but it only serves to enable a single keyboard shortcut to a narrow range of AT users.As for the second question, my problem wasn't "Svelte vs. Astro" so much as "Storybook vs. Astro", and there's a bit of a story here. The neat thing about Astro is that you can build out plain HTML using any framework you'd like (Svelte, React, etc), with any related Javascript being shipped only when you tell it to (see the Astro docs on island architecture). You can also choose to just use Astro's default JSX syntax, which is really all I needed for this project.
Unless I wanted to use Storybook. Storybook doesn't currently understand Astro components, but it does understand Svelte, so the plan was to use that as a common language between the two. That should have worked in theory, but in practice Astro and Storybook have slightly different opinions on how things should be configured by default, and resolving that conflict would have taken a deeper knowledge of both that I just don't have right now.
I tried a couple other schemes to get everything working, like using React for my framework, or building my components in a completely separate repository. ...this went on for a while (I'm stubborn), but eventually I realized the real moral of this story: development tools are nice, but they shouldn't be allowed to dictate one's entire process. In this case, I had to step back and decide that this was an Astro project more than it was a Storybook project, and change my setup accordingly. Cypress testing isn't quite the same thing, but still did 95% of what I needed without any of the aforementioned drama.
So to sum up: I ended up dropping Storybook because I couldn't make it work with Astro, and I dropped Svelte because I only really needed it to use Storybook. There's probably a lesson here about embracing simplicity that I definitely will not learn, because I'm not doing real front-end development if my project has any fewer than twelve moving parts. But someone smarter might take it to heart.
1@elaineleungPosted over 2 years ago@Sakeran Thanks for the explanation, really appreciate all the details, and I feel like this whole post alone can be a blog post. Anyway, coincidentally yesterday Fireship dropped a video on his channel talking about Astro, and after watching it I ended up doing a bunch of research on Astro. It seems like others have had similar experiences since Astro is so new, and some ended up developing their own plugins and other workarounds. Anyway, can't wait to try it out, and also I haven't used Cypress in awhile, so I'd be interested to see how it works with Astro. Will be sure to circle back to this post once the time comes!
0 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord