Roman Nurik

@romannurik
1.2K Followers
161 Following
61 Posts
UX Designer/Engineer working on idx.dev and Firebase at Google
Websitehttps://roman.nurik.net

Now *everyone* gets to build @astro sites like I do!

I've been using Google IDX as my exclusive development environment for two months, maintaining the Astro docs, working on my own websites, publishing the Astro blog... everything!

I wrote about what it's been like, and why having cloud IDEs is so important to me, and for our open-source community! 🚀

https://www.rainsberger.ca/blog/idx-first-impressions/

https://m.webtoo.ls/@astro/113584104179318004

IDX: my first impressions

Sarah Rainsberger
snippet.idx.dev now has the new (rebeccapurple) CSS icon, and coming soon to IDX proper too (the file icon theme)
We were unhappy with the state of prompt templating for JS, so we wrote an engine! (Queue the "now you have 2 problems" meme). It can do RAG, interleave prefix and completion, tool-use, and more. Internal only for now but I'm psyched with where it could go.

The result is a palette unique to Project IDX that covers all our needs, from 📝 syntax highlighting to ✅ SCM badges (added, modified, removed files) to 💜 product and feature logos (IDX AI) to 🎬 YouTube videos* and beyond!

* https://youtube.com/watch?v=-wlZY4tfGMY

Project IDX: Full-stack application development with generative AI

YouTube

To build and fine-tune the palette, I built a ⚙️ custom palette editor in React, inspired by some great work from Stripe [1], and powered by Material's new HCT color system [2] for 👁️ perceptive analysis and interpolation.

[1] https://stripe.com/blog/accessible-color-systems
[2] https://material.io/blog/science-of-color-design

Designing accessible color systems

How we designed a color system with hand-picked, vibrant colors that also met standards for accessibility and contrast.

A key goal was to come up with a core color palette that simultaneously felt:

💜 Bold enough for our unique visual identity and marketing content (http://idx.dev)

👩‍💻 Yet restrained enough for extensive, sustained use (hours per day) in a core editor experience…

Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

Another design detail for Project IDX (http://idx.dev) is the custom light and dark color themes… a lot of work went into these themes last year. The themes were 🔬 hand-crafted to balance foreground/background contrast with adjacent-token contrast in the editor…
Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

💜 [10/10] With that, here’s to the journey ahead, folks. I hope you’ll join us for it. https://idx.dev
Project IDX

Project IDX is an entirely web-based workspace for full-stack application development, complete with the latest generative AI from Gemini, and full-fidelity app previews, powered by cloud emulators.

💜 [9/10] And finally, AI AI AI AI AI…
💜 [8/10] And is there a word for that feeling you get after `prettier` runs and your code is nice and tidy?