Website - community feedback

[MartinKavik]

Hi!

We want to make Seed's website and documentation as good as possible.

We've recently created a new website (this repository + seed-rs.org). We resolved the main pain points with it - it's responsive, prerendered for the fast first render and better SEO, there is a simple search, night mode, etc. But we think that it's still not good enough.

Could you help us to make Seed's website better?

I think we should focus on the content as the first step to better website.

• We can divide website content into two parts:

  1. Homepage / Landing page - the first page that a (new) Seed user see:

     • Is it clear what Seed is on the first glance?
     • Do you think that something is missing?
     • Or something should be removed?
     • Is it beginner-friendly?
     • Is it good enough for Seed's "marketing"? - Are there enough examples, social proofs, comparing with other frameworks / langs / technologies, etc.?
     • etc.

  2. Documentation - tutorials, guides, changelog, etc.

     • Do you think that something is missing?
     • Are code examples good enough? (too simple? too complex? too few comments?, ..)
     • Is it beginner-friendly?
     • Are there any unnecessary sections?
     • Did you find a typo?
     • Are any parts hard to read or understand?
     • Did you find out-of-date info or dead links?
     • etc.

Thank you!

[David-OConnor]

Please post about or PR any pain-points, missing content, things that weren't clear, lessons-learned etc: It's hard for Martin and I to identify what needs work, since we're too involved in the project.

[MartinKavik]

@rumanbsl's feedback (seed-rs/seed#208 (comment)):
I would actually suggest to provide guidelines bearing in mind many of web developers are familiar with React/Vue architecture. Side by side code examples of how to do thing in both React/vue and Seed would clear potential confusion/question.

One other note is that, I would be happy to contribute. The contribution guideline seems to lack a way of introducing codebase to others. PostCSS team has done outstanding job in their Contribution page. Especially the Core development part is well written. In my opinion this is very important to attract contributors, and Seed should have such kinds of detailed document.

[MartinKavik]

@stephanbuys's feedback:
I would suggest a small investment in the seed website, Rocket’s website did fantastic marketing for that project. Something like that could catapult seed into prominence, at the moment everyone just knows about Yew because it was first.

It's better natural than the previous one (layout wise), but I’m not sure about the colour schemes and some of the navigations are surprising, like clicking from back to front with the next page arrows. I think it could do with a nice CSS framework to start with, plus some nice icons. Have a look at rocket.rs, if you can get anywhere close to that then you’ll draw a lot of attention.

I think that because it’s a frontend framework it would be worthwhile for the webpage to be a good showcase. Also having the CSS niceties, etc, but with the power of rust in the background will make people feel confident to choose Seed.

[MartinKavik]

@rebo's feedback (seed-rs/seed#111 (comment)):
There are a few decent examples about that show decoupling components by use of msg_mapper and clone_app. It would be good to have a clear and simple to follow tutorial that shows this.

The basic single message-update-view loop is fairly comprehensible to newbies but I certainly found it a bit tricky once my app size got big and I wanted to decouple/separate out concerns.

If I have time I might do a tutorial this weekend.

[ctjhoa]

Hi,
congrats for the new website, it's a huge improvement overhaul!
Here some feedback:

Homepage

Is it clear what Seed is on the first glance?

Yes I think it is but I know this project for a long time now.

Do you think that something is missing?

I think that WebAssembly logo could be a good addition to the homepage because it's clearly a foundation of Seed and a web standard.

Or something should be removed?

I globally think that there much text on homepage. You should probably create an FAQ move most of the current content in it.

If you take a look at other web frameworks homepages there is never a lot of content.

https://reactjs.org/
https://angular.io/
https://elm-lang.org/
https://svelte.dev/

They mostly rely on the same pattern:

1. A branding (logo, branding color...)
2. A title and a motto / a catch phrase
3. Some key features

It's sad to say but branding is very key in frontend world.

Another thing is the quoting section which should be at the bottom of page IMO.

Is it beginner-friendly?

Depends if you want to talk to rust beginner, frontend beginner, webassembly beginner. The thing is that Seed is difficult to explain as you need to dive into Rust, Frontend framework and webassembly at the same time.

Is it good enough for Seed's "marketing"? - Are there enough examples, social proofs, comparing with other frameworks / langs / technologies, etc.?

I already answered in previous questions I guess.

Documentation

Do you think that something is missing?
Are code examples good enough? (too simple? too complex? too few comments?, ..)

I'm a frontend developer for almost 6 years now and the best tutorial I've ever done is the svelte tutorial https://svelte.dev/tutorial/basics

This is interactive, from simple to complex examples and cover all features of the framework. It could be awesome to have similar stuff for Seed with a playground to try the framework.

Is it beginner-friendly?

I can't judge.

Are there any unnecessary sections?

I don't think so.

Did you find a typo?

Yes #8

Are any parts hard to read or understand?

I'm not sure that all sentence are crystal clear specially for non english native like me but it's ok.

Did you find out-of-date info or dead links?

I didn't pay attention to that.

[ctjhoa]

Yew recently publish a new website too https://yew.rs/docs/ we could also be inspired by this new website.

[MartinKavik]

@ctjhoa Thanks for the great review!

I globally think that there much text on homepage.

Yeah, I agree with it and also with your other points. I've only added a header above the readme so it's nothing very fancy - it was one of the reasons why I wanted a feedback because I know it isn't good enough.
Once the homepage is redesigned, we can add WASM logo, move the quoting section down and move the old content (readme) to FAQ - I like these ideas.

---

• Branding color(s)
  • I've basically recycled colors from the old website. I think green & blue (aka plants & water) would be playful and nice with the old alternative logo, but they aren't very "compatible" with the current logo. I was thinking about the similar color pallete like I'm using on kavik.cz, because yellow / orange with black logo go together well.
• A title and a motto / a catch phrase
  • Rust framework for creating fast and reliable web apps - I think it isn't bad, but maybe too generic / not catchy.
• Some key features
  • What do you like about this framework?

Could you help us with those things above once you have time?

---

This is interactive, from simple to complex examples and cover all features of the framework. It could be awesome to have similar stuff for Seed with a playground to try the framework.

I've just completed some Svelte tutorial steps and yeah, it's very nice. If I remember correctly there were similar tutorials (aka tours) on e.g. Dgraph and Go websites. Or there are some games where you are learning the chosen programming language by writing code to control your character.

I was thinking about interactive examples some months ago, but there is a problem - I don't know how to compile & run them in a browser. Some options:

• https://play.rust-lang.org/
  • It can't compile to WASM + show the result.
• https://webassembly.studio/
  • There were problems with compilation and there is my old issue in a related repository.
• https://github.com/makepad/makepad
  • Alpha, not usable at the moment.
• Write a custom build service.
  • On Heroku, Azure Functions, etc. I don't have capacity for it in the near future.

Any ideas?

---

I'm not sure that all sentence are crystal clear specially for non english native like me but it's ok.

My English should be bad enough, so I can be used as a docs linter in the future :)

---

Yew recently publish a new website too https://yew.rs/docs/

I was thinking about GitBook (or other docs builders) but there were some disadvantages:

• We probably wouldn't be able to add custom interactive examples.
• Seed users wouldn't be able to use website repo as an example for a documentation site or as a template for their website.
• No custom design.
• I'm not sure we can create a (custom) homepage in GitBook.

[ctjhoa]

Some key features
What do you like about this framework?

To me, Seed key features are:

• Compile to WebAssembly
  • New web standard
  • Binary format
  • You can use all libraries which can compile to WebAssembly, whatever language it is written in
• Rely on Elm architecture
  • Pretty common in frontend world
  • No need to learn new architecture
• Rust ecosystem
  • Not an exotic language syntax
  • Tooling (IDE support, package management ...)
  • Same language for backend and frontend

To sum up it as catch phrase: "Seed is not the framework of today, it's the framework of tomorrow"

Could you help us with those things above once you have time?

Yes, I'm not UX/UI designer but if I'm not too busy I'll be happy to help.

On the playground

This is a difficult task which could be done as a long-term goal but still worth it IMO.

Yew recently publish a new website

I was thinking about the content, do comparison and see how they explain stuff, not necessarily about the website itself. I agree with you that I prefer a website which is a showcase of the framework. Otherwise you can fairly have doubt on framework maturity even if it's more maintainable.

[MartinKavik]

Other items to add into the FAQ:

• Is Seed production ready?
• Seed vs Yew.
• How to write components? / Components vs reusable views.
• Philosophy / Priorities.
• Milestones.

[ghost]

Do you know some error in website ,when i open "https://seed-rs.org" with firefox browser

[MartinKavik]

Do you know some error in website ,when i open "https://seed-rs.org" with firefox browser

• some error open"https://seed-rs.org/" with firefox #12
• Compiled package cannot be opened normally in Firfox browser seed-quickstart-webpack#10

[shelvacu]

When browsing the site on mobile, it feels very sluggish while scrolling. Other websites any particular point under my finger will follow the finger, whereas on seed.rs it takes a little bit to "catch up". Let me know if that makes sense.

Other than that, site looks very nice and does a very good job explaining the concepts (so far, haven't read everything).

I'm using the most recent firefox mobile on android 7

[MartinKavik]

very sluggish while scrolling

I can't reproduce it on iOS - I would need help debugging unfortunately. Or probably wait for Christmas, when girlfriend will have a new phone with Android... Or is it possible to reproduce it on a simulator?

[ctjhoa]

I do not reproduce it on a mi 9t pro (android 10) with firefox nor chrome.

[arctic-alpaca]

When scrolling the Seed website using Firefox on Windows 10 and dark mode, scrolling becomes slightly delayed (the site scrolls ~0.5 secs after using the scroll wheel). I can't see this behaviour when using the light mode in Firefox. Edge doesn't show this behaviour at all. Disabling all plugins in Firefox had no effect on the scrolling behaviour. Highlighting text is also somewhat delayed using dark mode with Firefox.

---

When using Firefox on a Pixel 3XL Android phone, I can see different scrolling behaviour between dark and light mode. I don't see any "sluggishness", but it looks like some frames are skipped when using dark mode and scrolling fast. The "skipped frame" behaviour isn't present in Chrome.

---

When scrolling in Firefox or Chrome on Android using the dark mode, a white bar at the bottom of the display can appear. I could reproduce it mostly when scrolling up, lifting my finger of the device for a moment, then scroling down again.
Screenshots:

Screenshots

Chrome:

Firefox while scrolling (finger on touchscreen):

Firefox not scrolling (finger off touchscreen):

On Android using Chrome and Firefox, there is a white line on the top of the website. For some reason it differs in position between Firefox and Chrome. In Firefox, the line appears every time the site is scrolled upwards, in Chrome the line only appears when being scrolled to the top of the website.

Screenshots

Chrome (this screenshots shows an offline version of the website, this also happens on the live version):

Firefox:

Let me know if I can provide you with more information.

[shelvacu]

I'm sorry I didn't think to mention it, I was using dark mode. On my phone light mode works great and dark mode has issues.

[MartinKavik]

@arctic-alpaca Thanks for the detailed report. I can't reproduce it on my Windows 10 and Firefox.
However I would guess it's HW / drivers related. The dark mode on seed-rs.org is "simulated" by an overlay (a div) with styles set to mix-blend-mode: difference;. Perhaps this blending is a relatively expensive operation and some GPU/CPUs and browsers aren't fast enough to apply the effect on the entire screen immediately.
I think it would be properly resolved by custom dark styles (it would also fix inverted colors in images).

[arctic-alpaca]

@MartinKavik I think you are right. I just realized I had hardware acceleration in Firefox deactivated. When activating hardware acceleration, the delay is gone and the website behaves just like the light mode version.

I can't find any settings regarding this in the Android version of Firefox, but I guess this also causes the difference in behavior there. This could also be tied to how powerful the phone is or how the Firefox uses the API in different Android versions (just guessing here) , so some people don't see the issue while others do.

[ghost]

Hello, the svg objects are missing g tag. Confirmed on Win/Chrome/Vivaldi.
Sorry this is my first time commenting on github so if i am doing something wrong i will delete this comment. I just wanted to point it out.

[MartinKavik]

Hi @kamuygiken
If I remember correctly, we've discussed it several months ago on the chat and the result is #109.
Probably somewhere inside the Webpack pipeline there is a code that changes viewBox to viewbox. Feel free to create a PR if you manage to fix it (even workaround with g or something else would be good enough if it works).

[proudmuslim-dev]

I'm trying out Seed for the first time and one thing I'm noticing is poor grammar in the documentation. While this isn't a huge issue, it does make reading it a little irritating. Are there any plans to clean it up?

[MartinKavik]

@proudmuslim-dev Feel free to send a PR with corrections.

[proudmuslim-dev]

@proudmuslim-dev Feel free to send a PR with corrections.

I'll give it a shot when I'm free, thanks!