so sometime in the second half of 2023 I'd like to update roc-lang.org again
to reflect all the progress we've made!
so far the goals of the website have been:
so at a high level, I think a good goal for the next iteration of the website would be "looks more like a typical programming language website" (e.g. it's actually styled, unlike today's which is explicitly unstyled) but still isn't a "pitch" website. It's not trying to sell you on how awesome Roc is; rather, it talks about the goals and current progress toward those goals
so the content would be similar to today, but it would look more like a normal language website - e.g. it would have a real layout, navigational links (like the tutorial does across the top), etc.
and then the biggest change I'd like to make is to incorporate the web repl into the front page, so you can try out the language right away
specifically I like the idea of having a little code snippet right there, but have it be something you can interact with right away if you focus into the input box right below it (I have some ideas on how this could look and work)
so if anyone is interested in working on this, lmk! I know @Georges Boris has expressed interest, but maybe others are interested in collaborating on it too!
do you have some reference sites that you feel are similar to what you would hope for this?
#5136 should probably be fixed before we incorporate the web repl into the front page.
A lot of people will probably also be hit by the unavailability of entering definitions #5301
I like the Pony website, and think it could be a good model for this (though the language and website are both a little more polished than Roc): https://www.ponylang.io
You know it's gonna be solid when the website has Richard's signature with a text gradient on it:
CleanShot-2023-05-30-at-12.35.522x.png
I don't know how, but I would love to contribute to this :nerd:
Hi @Éber Freitas Dias,
What precisely would you like to contribute to? Are you referring to this:
a good goal for the next iteration of the website would be "looks more like a typical programming language website"
I can contribute with design (UX/UI) and coding. Not the best designer around, but I can try and help.
Maybe a little off-topic but, does roc already has some kind of logo design in place?
Maybe a little off-topic but, does roc already has some kind of logo design in place?
Yes, this the roc logo: https://avatars.githubusercontent.com/u/63474338?s=200&v=4
Anton said:
Yes, this the roc logo: https://avatars.githubusercontent.com/u/63474338?s=200&v=4
Right, but what in terms of typography? Are we going for a specific thing with the text?
We don't have a roc style guide yet, but I think a lot of people are happy with the fonts used in the docs.
@Éber Freitas Dias there are also some design tokens available! @Richard Feldman could you maybe link what your friend created here? I'll upload that to roc/design-assets (also, if you could link the current logos, it would be great to also host it there)
yeah, they're all in https://github.com/roc-lang/roc/issues/3274
also note that the tutorial has some elements that overlap with the docs but not completely: https://www.roc-lang.org/tutorial (the tutorial is more recent than the docs, but neither of them is authoritative in terms of style; both are just independent experiments, and nothing is set in stone!)
Thanks. Sorry to disrupt with so many questions. I can see that design-wise we already have paths and proposals. Let me know how I can contribute :blush:
One of the things I was trying to do was unify the css files so they use the same styles. The idea there being that maybe we can link to a single file and this will make the site more maintainable when everything it sitting together on the next update. There is also the Examples site too, Tutorial, Docs.
worth noting that we had a pool some time ago and people generally preferred the color palette on the docs - so the idea would be to apply that palette to the tutorial as well iirc
sure, although also feel free to experiment with variations and post screenshots so we can discuss...like I said, everything's an experiment at this stage! :big_smile:
I want to give an update on progress with the 2023 website for @Georges Boris @Éber Freitas Dias and anyone else who is interested in contributing. PRs most welcome :smile:
We have made a start on the basic structure for the new site which for now is sitting at www/wip_new_website
on main, and includes a local build script using roc run build.roc
. It is generated using the static-site-gen platform which gives us Roc code syntax highlighting and enables most of the content to be written in markdown.
Ideally we will update the site prior to Roctoberfest, as this supports that activity and in preparation for 2023 Advent of Code.
The new site has the following structure;
The initial focus has been to try and scope out what should be included. For now this basically just pages and headings which loosly define structure, and are supported by dot points or comments to capture ideas. Richard provided input here so we have a reasonable starting point.
There is a lot of things that need work. For example there has been almost no work on styling or content. It is still very much a work in progress and all contributions welcome.
Some ideas for things that would be hlepful;
Also you can visit the WIP site sitting on main at https://www.roc-lang.org/wip
I made a little interactive code example thing for the new homepage - https://jsfiddle.net/L1xh7k9j/ (you have to drag to expand the bottom right square to see the whole thing)
this particular code snippet is just a proof of concept; I want to actually use it on a bigger example of error handling (e.g. in basic-cli, do some File I/O and then some HTTP, and then see how all the errors combine to a single exhaustive when
), so people can click through quite a bit of different syntax and learn about the language that way. I know when some people encounter a new language, they like to learn by seeing code examples, so I figure this could be a good experience for them right on the homepage.
it's all plain HTML and CSS, no JS - I generated it using this roc script
Nice, I like how users can easily walk through the code with the descriptions and skip anything they are already comfortable with.
Are you thinking of having this on the home page instead of the WebREPL?
in addition to!
I'm thinking this would be further down the page
as a larger example
I made a mockup of a layout idea for the homepage:
the big code example at the bottom would be done using the hover-to-learn-more thing I shared above - so it would have syntax highlighting and you could hover over things to learn about specific language features like pipelines, backpassing, error handling, tasks, string interpolation, etc.
there would be more content below this, but I'm curious what people think about this as a first impression - like imagine you visit roc-lang.org, you don't know what the language is about yet, and this is the first thing you see
Quite spaced out up top. Feels like too much dead space
Also, not an issue with the website, but the size that it is showing at on my computer is zoomed poorly which doesn't help with initial reading and judgement.
Also, kinda feels too flat.
But content seems fine especially if dump right to an interactive explanation tool that works well and has nice colors
It seems like the platforms concept needs a mention somewhere near the top. That's such a unique feature for a programming language, and a reason someone might want to use Roc, and a reason someone might have heard about Roc and want more info.
I thought about mentioning platforms and applications early, but it doesn't seem like a good "first impression" thing to me because it requires a lot of explanation. I don't think if it says something like "Novel “platforms and applications” design" or something it really helps answer the basic question of "is this a language I might be interested in?" and I think if I explain the whole thing, it's going to overwhelm the other basic info :big_smile:
here's a less spaced-out version
and here it is alongside several other PL homepages, for comparison:
here's another version with syntax highlighting matching the color scheme (at least for that initial code snippet)
I like the layout. It look clean and uncluttered, simple too.
I would put origami bird in the line with big purple Roc, because PL logos are "wevy-wevy-impovtant" for any conf talk :angel:
ha, yeah I guess all the others have the logo next to the name except Java
Tbh, not all of them, but it might be helpful imprinting visual cue right away - and there is plenty of white space to do so on this layout to do so.
Maybe each point could have a related icon instead of a star?
yeah I tried that at first but it felt more distracting than helpful
I like the vibe :)
I do prefer using columns for the fast, friendly and functional explanations like Rust does. Three full-width text blocks feels quite dense.
"Like Rust and clang, it compiles to unboxed values using monomorphization and LLVM for optimizations." is quite a complicated sentence for the average programmer. I would share this information later in the page.
Yeah I had the same thought. "Unboxed", "monomorphization", and "LLVM" are familiar terms for compiler developers, and maybe systems programmers, but not really for high level app developers.
Maybe summarise it as compiling to machine code like Rust and C++, then add details further down.
new Swift website: https://www.swift.org/
the "use cases" section is pretty nice
I put together a draft of a page elaborating on what the "fast" in "fast, friendly, functional" means: https://gist.github.com/rtfeldman/768d80df24befbbe9dac249faedb6617 (I want to do the same for "friendly" and "functional" too) - any feedback welcome!
wow, cool. I learnt some things reading that. I don't have many comments, reads really well and is easy to follow.
I don't like the flow of this sentence for some reason. Not sure if it is this sentence specifically or due to the context of the surrounding text:
Similarly, for design reasons unrelated to performance, all I/O operations in Roc are asynchronous.
This isn't exactly true:
If Roc data structures are shared across threads (which might or might not come up, depending on the platform), then atomic reference counting must be used, which is slower.
There are plans that use owner and non owner reference counts where a specific thread is the owner. In practice this can often mostly use non-atomic reference counting. Well it is true an atomic will probably be used somewhere, there are multiple schemes that avoid atomics almost all the time.
Good read overall
Last comment. Maybe you are overselling:
Unfortunately, linking on macOS is much more complex than on any of those others, so it's taking longer to implement.
It theoretically shouldn't be much more complicated, but it is much less documented and needs more work.
ok I made a revised version!
https://gist.github.com/rtfeldman/768d80df24befbbe9dac249faedb6617
The dev backend is currently implemented for WebAssembly, which you can see in the Web REPL, and in roc repl on x64 Linux.
This sounds like it's saying that roc repl
on x64 Linux is implemented using the WebAssembly dev backend.
Or at least that it uses some dev backend.
But neither of those things is true. roc repl
uses LLVM, regardless of target.
We actually looked at the code together the other day, and it was calling LLVM
that's true today! Although I'm assuming https://github.com/roc-lang/roc/pull/5805 will get merged before this goes live :grinning:
Oh wow :astonished:
I have been a little out of touch lately. Sounds there's been an enormous amount of progress on the dev backend! :tada:
yeah! @Folkert de Vries has been jamming on it :guitar:
Ah that makes sense then! Nobody better for making massive progress fast! :rocket:
brought to you by a week of vacation. (well, 2 days). Now I have to fix the long tail of subtle alignment bugs
However, there is plenty of room for further compiler optimizations; current optimizations include only LLVM, Morphic, and Perceus. Promising examples of potential future optimizations include closure-aware inlining, automatic deforestation, and full compile-time evaluation of top-level declarations.
This reads a bit dense to me.
Probably cause a lot of names LLVM, Morphic, Perceus. Then a lot of optimizations that people may or may not have context for.
Also, saying only LLVM
sounds funny given it is the standard for tons of compiler optimizations and passes.
fair, although I think for people who are interested in optimizations, they'll really appreciate the specifics
e.g. we get asked a lot if we've heard of Perceus :big_smile:
I made some styling changes to /repl
to make it look more like the rest of the site: https://github.com/roc-lang/roc/pull/5826
cc @Brian Carroll
Richard Feldman said:
ok I made a revised version!
https://gist.github.com/rtfeldman/768d80df24befbbe9dac249faedb6617
This reads very well!
btw I tried using performance.now()
to time how long the web repl takes to completely evaluate and render the output of entries, and I'm consistently seeing numbers around 60-80ms between when the browser gets the Enter key event and when it's added the output to the DOM - and that's counting all the JavaScript in between! :mind_blown:
HUGE props to @Brian Carroll for making the wasm code generation and surgical linking work...I'm so excited to get this on the homepage and show it off :grinning_face_with_smiling_eyes:
Ooh nice! :big_smile:
@Richard Feldman are there any parts of the WIP site that you would like assistance with? Maybe drafting content?
yes! So Netlify recently deprecated their automatic asset optimization feature, which means we'll need to start doing our own minification and such explicitly in our Netlify builds
some specific things I think we should do in that build:
I know npm has the best ecosystem for optimizations like thus, but I'd really like to keep npm out of the normal build process, so people don't need npm to build the site locally
for example maybe we could have something like www/optmize.sh
- so you can try the optimizations locally if you have npm installed and want to try out changes to the optimization build process, but it's a separate and totally optional thing...and then in our Netlify build process, we have it run optimize.sh
after the normal build process
We could bundle the REPL JS files just using cat
. It's not like a big JS project, there's only 3 files. One of them is generated and the other 2 are handwritten. They'll need to be slightly modified but that's fine.
If we leave out the bundler it might simplify things a lot
that's a great point! Yeah I guess we could just use sed
to remove the import
statements
and then cat
to combine them, love it :+1:
I had a bit of an attempt at combining the JS files... almost worked ok. Got a bit stuck on the module where we were referencing things like roc_repl_wasm.entrypoint_from_js
or roc_repl_wasm.default
. I had another idea and almost got it working, but just wondering what people think of using something like parcel-bundler with e.g. parcel build index.html
to combine and minify and add cache busting names etc.
I'm ok with that as long as we do it in a separate optimize.sh
and it's not necessary to have npm installed to build the site locally for normal development! :big_smile:
I don't really understand why we need this though. It's a few kB of JS, and 2MB of compressed Wasm. Feels like shaving a few bytes off the JS and CSS is not going to matter
Yeah it seems like something we should do minimal benchmarks for before we add it. Minifying definitely can make things harder to debug even when it's only used in production.
bundling would be more about minimizing network requests than total bytes
OK well my idea was that bundling is relatively easy to do. It's just concatenating strings and stuff. Whereas minification requires proper npm libraries. But npm libraries are heavy.
Now, it looks like the WIP new website is using the static site generator. What if it was able to read your JS/CSS files, concatenate them, and insert them into <style>
and <script>
tags? Then you get one HTML file in one network request. And a second one for the .wasm file, which can't be helped.
It's just concatenating strings and stuff
That's assuming we'd edit the files to delete the import
statements, in a PR.
All the JS would be in the same namespace so you wouldn't need to say roc_repl_wasm.entrypoint_from_js
, it would just be entrypoint_from_js
because it would be defined "locally" in the concatenated file.
And the generated file also has export default __wbg_init;
, so roc_repl_wasm.default
would become __wbg_init
.
You'd need to do the concatenation in dev as well to see the effect of your changes, so that's a downside.
Anyway it's just an idea. It might be more familiar to people to do it the npm way.
ah I see! I like that idea :thumbs_up:
basically I'm in favor of:
worth noting that npx
could be a good option here - like don't have config files or anything, just optimize.sh
which runs stuff like npx minify *.html
or whatever
also worth noting: we have to have at least 1 network request to load fonts, and that's render-blocking, so having 1 js and 1 css in parallel with that likely makes no difference because the font is the bottleneck to rendering anyway
and there are also of course caching benefits to doing that instead of inlining them all the way
that said, having a JS file that loads other JS files over the network could become the bottleneck instead
Oh, do fonts block the initial render? I thought it would render with a default font in the same family and then re-render.
We can get rid of JS loading more JS. Maybe load them in separate script tags.
Richard Feldman said:
- there's some way to minimize fonts based on actual content - e.g. strip out the glyphs that don't come up in any of our .html files - I don't know what the name of the tool is that does it, but since we serve our own fonts and have all the content in static .html files, we should be able to do that too!
The tool you're looking for is a font subsetter. If you don't mind doing it manually, this online tool is my usual goto. I still haven't found a good CLI tool to do it, only this library is the easiest/closest thing to what I want, but I also haven't really looked outside the JS ecosystem.
that library sounds great! :100:
yeah the JS ecosystem is by far the most mature for optimizing web pages
makes it very difficult to avoid npm haha
If anyone would like to work on the above optimisation idea then please let us know. I don't think I will be able to make much progress on this anytime soon.
I wrote up a functional.md draft to go with the earlier fast.md (I'm still working on friendly.md
) - any feedback welcome!
Overall it reads really well. I really enjoyed it and learnt some new things which was cool. I feel like it kind of just ended.. like maybe it could do with a conclusion? but not sure.
I had to read this a couple of times, maybe reword?
which can be less error-prone than defensive copying (which might be accidentally forgotten), but which—to be fair—can also increase unintentional copying
I had to read this a couple of times, I think the double negative was hard to parse
Roc's automatic reference counting neither pays for runtime cycle collection nor memory leaks from cycles, because the language's lack of direct mutation primitives lets it rule out reference cycles at language design time.
That last sentence seemed to just sit there and didnt seem connected or supported. Maybe I missed how these tradeoffs fit the design goals, but first read through I paused at this point.
, and that performance optimization will tend to involve more profiling. These tradeoffs fit well with the language's overall design goals.
Is this supported by any anaylsis or references or more of an anecdotal observation? Just seemed to be a rather key point of your argument.
These scenarios tend to be rare enough across code bases, and the performance benefit small enough, that it's acceptable for Roc to omit these language primitives
more of an anecdotal observation. Mainly I wanted to acknowledge a tradeoff (one I assume exists)
I could maybe add a "likely" there to clarify
all good feedback, thanks!
I'm curious if SSO plays a factor in the text trimming example. I'm assuming you can't subslice a stack value? Maybe that's an incorrect assumption. I'm also not sure if SSO would be faster than a subslice since both are just stack allocations
hm, that's a good point...maybe I should use a non-string example there :thinking:
I don't know if anyone who's seeing it for the first time is going to consider SSO, I was mostly just curious. I think it's a cool example cause it shows multiple possible optimization paths
Now that I'm back from a mini-vacation, I should have some free time to look into an optimization script
awesome! :smiley:
ok, here's the revised draft! https://gist.github.com/rtfeldman/435a99219a0c645f5b640c6f1a251aea
I really like it. I'm definitely keen to share with my mates. I find it hard sometimes to explain all these ideas without getting tripped up on too much detail, this reads like a good overview in my opinion.
This includes shadowing, which is disallowed
I am still not sold on this premise, though it is the state of current roc. Whenever I see code with x1
, x2
, x3
, etc... it is just painful. Makes the code harder to read, brittle to change, and more error prone. Pipelining does fix one class of this issue, but not all of them.
I'm heading to bed right now, but I can't seem to get the wip site building. I'm getting compiler version mismatches (missing linux-x86_64.rh
file). Trying the --prebuilt-platform=false
doesn't fix it. I'm sure I'm missing a simple step to get it to use a local version, but I have no idea what it is.
I've just made a PR #5858 to fix the wip site roc build script.
Then you should be able to build it with % cd www/wip_new_website && roc run build.roc
. If you don't already have it you may need to run cargo install simple-http-server
Thank you for the update! But It's a slightly different problem:
I was expecting this file to exist:
/root/.cache/roc/packages/github.com/roc-lang/basic-cli/releases/download/0.5.0/Cufzl36_SnJ4QbOoEmiJ5dIpUxBvdB3NEySvuH82Wio/linux-x86_64.rh
However, it was not there!
Note: If the platform does have an .rh1 file but no .rh file, it's because it's been built with an older version of roc. Contact the author to release a new build of the platform using a roc release newer than March 21 2023.
If you have the platform's source code locally, you may be able to generate it by re-running this command with --prebuilt-platform=false
I'm not sure. Maybe you have an older version of Roc cli? @Anton would know what is going on here.
I made the web repl mobile-friendly: https://github.com/roc-lang/roc/pull/5862
this way when people are pulling it up to check it out after @Brian Carroll's talk next week, it will look nice on their phones, too! :smiley:
Awesome, thanks!
I followed up with a PR to match the height of the loading message to the height of the loaded state
Also removed wasi.js since I now realise it's impossible for user code to ever use it. The REPL "platform" doesn't have any effects, only memory allocation.
@ABuffSeagull looks like you're using an older version of roc, I'd recommend trying again with the latest nightly.
Huh, I guess so. I could've sworn that I was using the one I was building with nix develop
but I was probably just forgetting to set my PATH
or something. Thank you though, got me on the right track
hey folks - is there any public link for the WIP 2023 website? (I ended up starting Roctoberfest late and I wanted to follow the steps of someone coming to the language for the first time)
it's currently at https://www.roc-lang.org/wip although there's a bunch of un-merged stuff
I wrote up a little thing for roc-lang.org/bdfn - https://gist.github.com/rtfeldman/67ae19aa2515115fe1657f76ff4a6976
I figure it's something people will ask about
not sure if it would make more sense as a FAQ entry?
as a FAQ entry it wouldn't be in first person, for better or worse
I think it is a valuable addition and gives clear direction and authority regarding decisions. Sets the tone, expectations that people are welcome etc. I would suggest a heading like "Leadership" and putting on this page https://www.roc-lang.org/wip/community.html
My day job has a policy of no FAQs in website content, cuz FAQ's are hard to find information in and they indicate that you should have organized everything else better, and I think I agree in this case. (The Community page does seem like a good organized place for this.)
I have seen bad FAQs, but I don't think I would ever conclude something like that. FAQs can be wonderfully helpful and searchable.
I can see both sides. If you spread information over "themed" pages you need to rely on a search engine to get a user their answer but you avoid massive pages to get lost in. With an faq page you have nearly all information in one place but you need to rely on ctrl+F or a provided search functionality, which are typically worse than a search engine.
So considering the optimize.sh
script, it turns out that harfbuzz has an hb-subset
command in some extra packages (libharfbuzz-bin
on Ubuntu, harfbuzz-subset
on Alpine, etc). This actually works really well, but only on .ttf
files. I've tried decompressing the .woff2
files, but there must be something that gets lost in the original compression, cause it just won't work.
Would this be a good path to go down? I'm not sure how to guarantee that package is installed (I'm not used to Nix). I think it would work best if the original .ttf
files were hosted in the assets repo and generate the compressed fonts off of them.
Some other thoughts I have:
.woff
files are needed, .woff2
has basically full supportsed
command, I'm sure). Actually I may have answered myself, it shouldn't be that hardThe harfbuzz package is available on nix, if you mention me on your eventual PR, I'll add it in the right place :)
PR open https://github.com/roc-lang/roc/pull/5918
excellent, thank you so much for making this happen! :grinning:
Of course! I'm very excited for this language and I definitely want to help, but web dev is about all I know
@ABuffSeagull that's awesome, web dev is super helpful right now!
actually there's a bug I'd love help tracking down right now: if you load the new wip website (README for how to build it there's a bug where after the web repl loads (a bit down the page), it scrolls the page down to it.
I thought it would be a quick fix of removing autofocus
from that element, or in repl.js
disabling the .focus()
or .scrollTo()
calls, but I tried taking all of those out and that didn't solve it - so definitely seems to be a nontrivial web dev bug to figure out! :big_smile:
I worked some more on the homepage - here's the new stuff above the web repl...any feedback welcome!
dark mode:
Screenshot-2023-10-21-at-10.30.53-PM.png
light mode:
Screenshot-2023-10-21-at-10.29.48-PM.png
mobile:
Screenshot-2023-10-21-at-10.30.18-PM.png
right below this will be the web repl, followed by a bigger code example
Looks good! I like the style for the fast,friendly, functional boxes. Some nits:
Really like it! However, I feel the boxes on mobile are overly big? Yes it's easy to tap on, but it can become so low density that you have to scroll tons and that feels bad.
Of course density is always a tricky one in web design
I feel the boxes on mobile are overly big?
True, it might be good to make them the same width as the code box, at least on mobile.
Maybe have the text within the boxes wrap around the purple titles when there's only 1 to a row? The header/body/link structure works fine when you can see many boxes but it becomes annoyingly spread out when reading what is effectively a list.
I think that I'm not a fan of the dark mode green. That said it does have quite good contrast
It does have that old school terminal vibe :)
I think my preferred old school terminal color is amber. Not that it would fit the site.
I posted some updates to the WIP homepage last night. Still some todos:
any feedback welcome!
Have you any ideas for the Examples site? I think it would be good to also have those available with the new site. I thought we had those as a link in the navbar at one point. At the moment there isn't anywhere you can see them in their rendered glory.
The Tutorial content also needs to be moved across in full. That should be a matter of copying the remaining markdown. I guess one the new site is live we can then remove the tutorial from the current location.
On the Install page, we could add a little more content e.g. to describe the nightlies or editor support status.
Luke Boswell said:
Have you any ideas for the Examples site? I think it would be good to also have those available with the new site. I thought we had those as a link in the navbar at one point. At the moment there isn't anywhere you can see them in their rendered glory.
Yeah I couldn't fit all the links we had in the nav bar on mobile, and that was the one I decided to remove.
I'm up for putting them on the homepage though!
Elias Mulhall said:
my expectation would be for the entire info card to be clickable
that's a great idea, love it! :smiley:
It might be worth removing the Language Reference header on Community page for now. I had grand ambition to write that and move the relevant content out of the tutorial, but I guess it can stay there for now.
yeah I definitely want that to exist, but probably not soon :big_smile:
Or even better. Leave a note saying coming soon, or help write this section - drop is a message in zulip??
Looking good folks!
I can spend some time on this today if there is anything @Richard Feldman you would like assistance with. Maybe adding the fast/friendly/functional links if you are happy with those gists you shared previously? I could also try adding examples to the build script and front page.
yeah adding those links would be great!
I have the .md files checked in, they just need to actually exist and have some styling
We can change the '''elm
to '''roc
too :grinning_face_with_smiling_eyes:
Looks awesome! :tada:
I love the embedded REPL concept. Looking at it on my laptop, it doesn't immediately read as interactable though. I glance at it and think it's a screenshot or other static element. Maybe a small blinking cursor would help, or similar? I think I'm also having this reaction because I need to scroll a page before seeing it, so it feels like an anonymous block in the middle of a page which I've been trained to scroll past.
I haven't checked them all, but do any of the links still lead to dead pages? I get it's nice to have them there so they'll work once implemented, but I find it rough when looking for useful links, seeming to find them, only to discover on click they don't exist.
The Install Roc page is a tad rough. Having the first half of a dotpoint list be listing problems, and the second half links, is pretty odd. Maybe add some notes about how OS support is expected to evolve?
Declan Joseph Maguire said:
I haven't checked them all, but do any of the links still lead to dead pages? I get it's nice to have them there so they'll work once implemented, but I find it rough when looking for useful links, seeming to find them, only to discover on click they don't exist.
If you find any please leave a comment. There shouldn't be too many left lying around.
Declan Joseph Maguire said:
The Install Roc page is a tad rough. Having the first half of a dotpoint list be listing problems, and the second half links, is pretty odd. Maybe add some notes about how OS support is expected to evolve?
The intent is to flesh this out into content. That hasn't happened yet, so what you are seeing is the skeleton without it's bones. :bones:
If anyone feels like writing some markdown summarising the Editor Support status for Roc that would be helpful.
Or brief summary of how Roc manages nightlies
Luke Boswell said:
The intent is to flesh this out into content. That hasn't happened yet, so what you are seeing is the skeleton without it's bones. :bones:
Wasn't sure how close-to-done the wip was meant to be. Good to know!
All good, its easy to lose track of these things. I had forgotten about that page, and haven't looked at it in a while. Needs some love for sure.
I'm not a fan of the text shadow on fast/friendly/fun.
I also agree with this.
I preferred the previous version of border and shadow on the fast, friendly, and functional boxes. As well as the previous borderless code boxes.
The separator lines under the titles draw a lot of attention, I would try something more subtle, perhaps something similar to on the foundation website.
I think there would be good value in having centered install and tutorial links (vertically and horizontally) in the initial page, because I expect a lot of users would want to go there upon visiting the site. "get started" also stands out a lot on the rust website.
A few tweaks away from a top tier website :)
without the box shadows - I like this! :thumbs_up:
Screenshot-2023-11-01-at-9.42.15-PM.png
Screenshot-2023-11-01-at-9.42.34-PM.png
the reason for the text-shadow outline effect is legibility; here it is without that:
Screenshot-2023-11-01-at-7.57.05-PM.png
other potential ways to address the legibility problem:
Screenshot-2023-11-01-at-7.58.44-PM.png
Screenshot-2023-11-01-at-7.58.18-PM.png
the reason I moved away from the purple outlines is that I like how the logo draws the eye more when it's the only big chunk of purple on the page - especially nice because that's about where your eye should start to read the page (and then move down from there)
subtler lines underneath the headings:
Screenshot-2023-11-01-at-8.03.35-PM.png
Screenshot-2023-11-01-at-8.05.06-PM.png
Declan Joseph Maguire said:
I love the embedded REPL concept. Looking at it on my laptop, it doesn't immediately read as interactable though. I glance at it and think it's a screenshot or other static element. Maybe a small blinking cursor would help, or similar? I think I'm also having this reaction because I need to scroll a page before seeing it, so it feels like an anonymous block in the middle of a page which I've been trained to scroll past.
unfortunately if we give it a real cursor (that is, focus it), the browser will auto-scroll down to it - and also it'll capture your down arrow so it won't scroll, so I don't think we can really do that. If we give a fake blinking cursor, I think people might be confused and try to start typing, only to find that it doesn't actually have focus. :sweat_smile:
Anton said:
I think there would be good value in having centered install and tutorial links (vertically and horizontally) in the initial page, because I expect a lot of users would want to go there upon visiting the site. "get started" also stands out a lot on the rust website.
I thought this too at first, but the more I thought about it the less I liked the idea, at least at this stage in the language's progress.
If someone's level of interest in the language is so low that the difference between their actually trying it and not trying it is whether we have a prominent call-to-action button (when the first 2 nav links at the top of the page are "tutorial" and "install" - not difficult to find), I think they're likely to bounce off the language's current level of polish anyway. :big_smile:
If someone's level of interest in the language is so low that the difference between their actually trying it and not trying it is whether we have a prominent call-to-action button (when the first 2 nav links at the top of the page are "tutorial" and "install" - not difficult to find), I think they're likely to bounce off the language's current level of polish anyway.
It indeed seems unlikely to make a difference in people actually trying roc, which is why it seems like unnecessary friction to leave it like this. We improve user-friendliness all over the roc ecosystem, I dislike delivering a subpar first experience here, even if it's on purpose.
The most logical approach seems to be to start with minimal friction, and add friction if we notice lots of "shallow" users .
Two large centralized buttons also come with an accessibility improvement, especially on mobile.
Interesting side-note; I visited the zig website about 15 times before I noticed the "GET STARTED" button.
so to elaborate a bit, I think of this in terms of UX for different personas:
That said, I could see an argument for putting some additional get started and/or install links further down the page, e.g. after you finish reading a particular section of the homepage (like "Use Cases" maybe), if you're now sufficiently persuaded that you'd like to actually try the language, we can make it easier to take the next step so you don't need to scroll back up to the nav bar
all that said, I wonder if a "get started" button underneath the code snippet might be unobtrusive enough
couple of notes re mobile:
Id also suggest linking the larger example early on (though not lifting it up, just a link like “See this interactive example of a Roc program!”). The vast majority of visitors are likely to be individuals that haven’t heard of Roc, and I think the description in the larger example may leave a stronger first impression that the small code block at the top, which could be seen as “yet another ML”, or the non-visual goals in the following three blocks
This feedback might just be a personal thing, but I don't think that the italics on fast/friendly/functional are giving the impact they seem to want to give? Looking at it, it seems to me de-italicizing and capitalizing instead looks a bit better. But this is bikeshedding.
I have no clue whether this is difficult or not to fix, and if it's difficult probably not worth it, but the text area for the repl looks like it has its focus border unaligned with the outer box, and also you can stretch it outside the box, which looks funny
image.png
The font in the hoverable larger example code section is different from the font in the rest of the document - again a nitpick but it might be nice if it's consistent
image.png
I'm not sure how pro/averse you are embedding the Monaco editor into the website, Richard, but if you are not opposed to it, we could even update that larger-hover-example to both use the language server so you can hover on type, and have the existing functionality you have now
So for making the REPL look interactive, maybe make the little caret (or whatever it's called) move around a bit.
For instance, taking the bounce from TailwindCSS and making it horizontal, until you focus on it.
#source-input-wrapper:not(:focus-within)::before {
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateX(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateX(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
I really would rather not use an animation to draw attention to something...I think that's too much :sweat_smile:
love the suggestions @Ayaz Hafiz , thanks! :tada:
Ayaz Hafiz said:
I'm not sure how pro/averse you are embedding the Monaco editor into the website, Richard, but if you are not opposed to it, we could even update that larger-hover-example to both use the language server so you can hover on type, and have the existing functionality you have now
making the code editable seems like an interesting idea to revisit in the future, but I don't want to bring that into scope for this release (which needs to ship in 1-2 weeks for the Advent of Code timeline).
for this release, my main goals for that example are:
yeah, i understand. just a comment, i don't think it's actionable
I love the de-italicized, capitalized version :)
That also fixes the "The fonts for the colored fast, friendly, functional titles are very rounded, which looks a bit off against all the sharp corners we have in the rest of the design." I raised earlier.
Instead of the centered "tutorial" and "install" buttons, I think it would be good to make the header links stand out more, they currently don't draw attention. I believe a very short centered rectangle at the bottom of each header button could work well. For that rectangle, I would go with the same height and color as used under the subtitles for a nice consistent design.
Just had a look on mobile. I'd second Ayaz' point about the hover boxes at the bottom of the page. Once you open a box you can't close it again except by tapping on another line of code. But you can't tap some of the lines because they are covered by the box itself. It's hard to uncover the first few lines in particular. One quick solution could be to add an X to close the modal.
yeah that part is just unfinished - I haven't figured out what design would be nicest. Adding an X to close it seems fine, although I'd like to try to preserve the context of the line somehow (maybe having the box appear right below the line it's describing, instead of covering it?)
Richard Feldman said:
yeah that part is just unfinished
Ah ok cool.
Yes preserving that context sounds like a good idea.
I just noticed that there isn't a link back to the home page on the website. Of course you can just use the back button but I would have expected there to be one
there isn't on the homepage (just because I thought it looked weird to have a big purple bird with a much smaller purple bird right above it), but there should be on the other pages
Ah yeah I see that now
I tried adding links to the tutorial and installation and they still feel too distracting to me :sweat_smile:
Screenshot-2023-11-08-at-10.14.47-PM.png
Screenshot-2023-11-08-at-10.14.23-PM.png
I think if you bring the logo left and down it would look fine
Oh, I miss understood what you added. I see now
Though my comment still applies, I think the wing being over the top purple bar seems strange
Also, I think the tutorial and install links aren't needed cause you have the in the top bar
Though my comment still applies, I think the wing being over the top purple bar seems strange
I actually really like that it overlaps. I think it makes the page pop
I agree that it's too noisy with the extra links
I think the issue with the bird is a lack of colour contrast between it and the header. Also, what if instead of putting links under the example, we put all three links next to each other in the header and give them a colour that pops from the rest, perhaps with "install" being somehow extra emphasised. I'm not sure the best way to do that, as it might risk getting overly busy and fail to form a visual hierarchy, but I think it's doable. I feel like I should be able to confidently identify the install link even from these thumbnails even when it's too small to read.
If you use the same order in the header as you have under the boxes, a differently-coloured "install" link would also serve to separate the block of 3 from the others and also partly center it over the boxes, helping link them visually.
Yeah, that could work.
I feel like I should be able to confidently identify the install link even from these thumbnails even when it's too small to read.
This is indeed an important UI/UX concept.
The logo over the header is a nice touch but no similar overlapping elements are seen in other places in the design, which can make it feel a bit off.
With the centered links the page is now too dense. We could keep the links there and change up the design of the fast... boxes, so they are not shown side-by-side, all three at once. Or, go back to the previous design and add some color to the header buttons.
of course another UX concept is that emphasizing one thing necessarily de-emphasizes everything else. I'm still not convinced that emphasizing "install" is the right move at this stage in the language's development, because I expect the overwhelming majority of visitors to the homepage will be there to learn about the language first, not to jump straight to installing it.
I do think "install" should be easy to find, but I also think it is easy to find right now. If I'm a return visitor to this page, I immediately know all the content on the page below the nav bar is informational, and I'm not returning for information, so I'm just going to look at the nav bar. And it's the second link in the nav bar.
I appreciate that it would be an even better UX for return visitors (who are, say, installing roc for a second time) to make the install link very prominent, but that necessarily comes at the cost of drawing the attention (in other words, distracting) the people who are visiting for the first time, who I think will be the overwhelming majority of visitors right now :big_smile:
I think that could be handled by delicately chosing the relevant colours and/or other methods of emphasis, but of course that might be quite delicate in the face of other issues. Certainly I'd want the visual prominence to be less than the main body.
And given the current low priority of install as an action we want people to take, it might make sense then to have install be the same emphasis as tutorial and examples, and then you don't have the same issue with too many layers of emphasis to clearly grok.
Also, a thought, what if you had donate and install on the right side, and the other header links on the left? Tutorial, Examples, Docs, and Community are all thematically linked, and Install and Donate also feel linked to me. Then you could bump the bird to the center as it's nestled near the negative space right of the title.
Also, what's that story, about choosing the colour to paint the shed?
... Then you could bump the bird to the center ...
That could work, but it also seems quite unconventional, which is something best avoided when it comes to UX.
It could be argued that the header stands out enough in dark mode, but it does seem too little in light mode.
Anton said:
... Then you could bump the bird to the center ...
That could work, but it also seems quite unconventional, which is something best avoided when it comes to UX.
Yes, but it'd also be striking, which I think is a big bonus for helping people remember and recognise Roc and its logo. Plus, it doesn't affect any of the functional aspects of design, so I'd argue it's purely unconventional UI and wouldn't impact core UX.
You could even do something unique with the logo in the future, having it move separate from the rest of the site when you scroll, just a little bit to make it pop extra. Given how minimalist and simple the rest of the site is, having that one single solitary spot of animation (plus something to make the REPL look alive) might look super nice. If you did that though, you couldn't use it ANYWHERE else.
can anyone with Windows verify that there's a horizontal scroll bar on the first code sample on the new homepage?
apparently it looks like this but only seems to happen on Windows
Not in Chrome
Or Edge
I do get this in edge though
image.png
The X to close the code sample with instructions isn't working, and its clipping at the moment.
hm, that should only appear on mobile (or mobile widths)
yeah I do know about that scroll bar
the one in the code example
yo this is great
Screenshot_2023-11-15_11-29-37.png
ok, I just pushed more updates to the WIP homepage and it's now at a point that I'd be happy to ship it ("it" being just the homepage; at a minimum, the pages it links to still need more revisions before the new website is ready to ship!)
(okay actually there are some changes I want to make to its internal structure for the benefit of screen readers, but those aren't blocking feedback on the rest of it)
any feedback on the current homepage is welcome! I'm eager to move onto the other pages, which mostly need copy changes but probably little or no CSS or accessibility changes
All on Mobile Android.
Navigation links feel weirdly spaced/shifted to the left:
Screenshot_20231115-231719.png
Repl input text wraps and is too close to the bottom
Screenshot_20231115-231733.png
List of sponsers is really dense and kinda hard to read especially in that color:
Screenshot_20231115-231825.png
It looks damn nice. I'm on windows (and specifically firefox), and I've noticed a two visual bugs, first minor, second medium.
image.png
A small but noticable misalignment on the header bar, as though it were made of an outer rectangle and a slightly thicker middle rectangle
It's reflected on the other side as well
image.png
Second, the popups overlap the code even on my fairly large laptop screen, and they don't close when I click away. I have no way to close it, so I just have to find another line whose popup isn't blocking the code and click on it.
Aside from that, looks great on my machine, elegant, simple, slick.
ok, I've incorporated that feedback - thanks so much!
Have those changes shifted all the content to the right? It's like there is a white space along the RHS of the page
Screenshot-2023-11-17-at-14.27.02.png
Should the X close the light purple box on the Code Sample? seems to be working ok
what browser is this? I'm not seeing that :thinking:
yes it should, although the X should only be visible on mobile - are you seeing it on desktop?
Safari
weird, this is what I see in Safari
Screenshot-2023-11-16-at-10.39.11-PM.png
Luke, what exactly is the issue with that picture? That the text in example doesn't use the full width?
I think that is on all browsers
the borders on the sides are asymmetrical
like here's what I see at that point:
Screenshot-2023-11-16-at-10.40.22-PM.png
random thoughts:
I see the same as you
It just stood out to me that the blue box takes full width and is centered, but the content stops half way
Screenshot-2023-11-17-at-14.42.56.png
Brendan Hansknecht said:
Luke, what exactly is the issue with that picture? That the text in example doesn't use the full width?
The text wraps before the end of the line, like there is a large margin on the right for the <p> block. It may be deliberate, I'm just pointing it out that it looks strange to me
Luke Boswell said:
It just stood out to me that the blue box takes full width and is centered, but the content stops half way
ohhh that's intentional, to make things easier to read by not having such long lines before they wrap
Ok :thumbs_up:
also, I just pushed updates to the 3 pages linked to by the fast, friendly, and functional sections of the WIP homepage - any feedback on those 3 pages welcome!
They're also now at a point where I'd be comfortable shipping them, so now's the time for feedback on how they come across!
also updated the pages behind the install, community, and donate nav bar links - so the only remaining ones to polish are tutorial, examples, and docs!
I've read through FFF and homepage, they are looking really great. Good flow between the ideas, really easy to follow and understand. Looks really nice too.
I agree, looks and reads great
A small typographical nitpick: there are many occurrences of words “in quotes”, but you are using ", which is the inch symbol, not inverted commas (this is super common, though. I think I just reacted because there was several of them)
"... (It also works for encoding; there is an Encode.toBytes function which encodes similarly to how Decode.fromBytes decodes.)..."
This is on the "Friendly" page. The use of the word "similarly" is a bit jarring here. Am I meant to interpret this as referring to the algorithms, or the result? It seems to imply (or be open to the possibility) that there's no guarantee that encoding and decoding the same data will result in the original data, that they are only usually inverse functions.
Similarly in that everything is inferred from the types in both cases.
Personally I don't see the implication about not being inverse.
Oh I get the intended meaning and was 98% confident about it, but this seems like something that should be 100% confident and would just take minor rewording.
Yeah it could probably be a bit more precise about what it means
I only brought it up because Richard wanted final feedback before launching
Also, in the "functional" section, I feel the word "flake" might do well with a link. Other than that, everything is excellent.
Nice improvements!
I would say the Examples section is too dense (on Desktop) with all three side-by-side.
I still believe the header should stand out more in light mode than it does now.
One issues with the repl on that page is that every time i type the box gets larger a tiny bit
backspace also makes the box larger, I made a thicc box.
Screenshot-2023-11-17-054757.png
Thats a great site though, as a newcomer very straight to the point and good presentation. And it looks great aesthetically.
I have horrible eyes, but looking at the site in the dark does strain my eyes because the black is super dark compared to the bright cyan. Dark reader makes it a lot better for me. But I'm pretty sure it might just be me since it's a problem I have a lot.
Is the darkness the problem, the vividness of the cyan, the contrast in brightness, or something more subtle about their relationship?
Specifically the value (HSV) of the background is too low. The cyan isn't too bad. Although I would prefer the violet there for a larger element, the cyan on the other elements is perfectly fine. But it might just be that my eyes are particularly bad or that the dark background is making the cyan strain more then it would normally.
no need to apologise, this sort of stuff matters. I can imagine the background being bumped up one or two arbitrary units for value without being a problem. However, I know that some people have the exact inverse accessibility problem, needing the highest possible contrast. I wonder if there's a better universal solution?
I changed it from 6% to 8% and its a massive difference for me.
@Jacob want to make a PR for that? The CSS file in question is site.css
and it's in the wip_new_website
directory
https://contrastchecker.com/ can verify whether it's still a sufficient level of contrast according to WCAG AA guidelines
I think you can still have high contrast without a super dark background. I'm not sure if its a universal UI thing, but I remember material UI docs mentioning that slightly above too dark is better than too dark.
If so, I don't think it needs to be included this very update, but if there's a standard accessibility toolkit for letting people set custom solutions. I heard that Musescore did some incredible stuff for accessible interfaces for their Musescore 4 release recently, and they're open source, but I don't know how generalisable that is to websites
Just because this is a totally new class of accessibility failure for me (and likely for some others), can you explain what the overdark background is like subjectively? I just find that sort of thing useful for remembering this stuff and making sure to pay attention in future for those who need it, so I'd love to have a sense of how it feels and what it's like.
Ok, I was playing with some colors and #151517
(value from 6% to 9%) makes the cyan way better for me. Also passes the accessibility contrast from that page you posted.
awesome! Are you ok with making a PR for it?
I'm not a UI person, so I could be entirely wrong. But I think too dark of backgrounds is generally bad? Except on OLED screens? I can try to see if there is any advice on this.
Sure!
sweet, thank you so much!
personally I prefer dark backgrounds that are lighter than #000 but I always assumed more contrast was better
so this fits with my general personal preference in addition to making it easier on your eyes :big_smile:
But I think too dark of backgrounds is generally bad
Yeah, if I change my monitor settings to their defaults, it's also too black for me.
I remember having a custom a background color for my pdf reader when studying and then I would also avoid colors that are too dark.
BTW this is me just talking about a cool thing I learned about, but there's this thing called OKLAB that's like, HSV but done better? HSV but equal numerical gaps correspond to (mostly) equal subjective perceptual gaps . Also the variables are properly orthogonal perceptually. I learned about it from the graphics space, but I wonder if it'd be useful for accessibility purposes.
I see you rich. You're now obligated to make OKLAB a builtin somehow.
It is declarèd thus.
I think my contrast preferences for dark mode depend a lot on my monitor and ambient lighting.
That's a good point Bryce. @Jacob , mind finding a good value that splits the diff between your needs and min constast standards? Ideally whatever value we choose shouldn't be overly sensitive to hardware.
I'd like to try it out with the version that looks good to Jacob - it's easy to deploy and see how it looks to others!
Not sure how much it’s worth worrying about viewers’ hardware anyway. At a certain point it’s probably a fool’s errand. For professional video they just make sure it looks good on a n accurate calibrated display and then call it good.
Worst case scenario we could add a high contrast theme down the road perhaps?
I mean, we can still split the diff between max contrast and whatever is best for @Jacob . I'm not talking about "optimality" per se, just trying to find a happy medium.
we can, but I'd like to try it at "is comfortable for him and sufficient contrast" before splitting a difference (into something that's uncomfortable for him) that might not need to be split :big_smile:
Unrelated, but I’m eyeing my calendar for an opportunity to do some work on the docs. No promises, but I’d love to help!
My main desire for the docs is to make the sidebar sticky. Whenever I use the builtin docs right now I navigate by either ctrl+f or typing the anchor link directly into the url.
hm, a challenge with that is: what if the list of docs is longer than your viewport height? How do you scroll to see the ones at the end if it's sticky? :sweat_smile:
also, have you tried the "press S to search" thing?
Ok, just before I submit the PR. I was playing with keeping the contrast the same (almost indiscernibly brightening text) with the WCAG website u posted. Or would u just prefer a minimal change?
Both pass the WCAG, so not sure if it really matters? EDIT: Just submitted PR, the difference is so tiny, that unless someone mentions it, probably fine to keep it where its at, don't want to be changing a bunch of colors!
Richard Feldman said:
hm, a challenge with that is: what if the list of docs is longer than your viewport height? How do you scroll to see the ones at the end if it's sticky? :sweat_smile:
As is frequently the case with tooling, I'd want to do it like Elixir does with Hexdocs. https://hexdocs.pm/ecto/Ecto.Changeset.html
Richard Feldman said:
also, have you tried the "press S to search" thing?
I'll be real I've noticed it many times and only just tried it. The fact that it jumps you back to the top is nice.
Elias Mulhall said:
Richard Feldman said:
hm, a challenge with that is: what if the list of docs is longer than your viewport height? How do you scroll to see the ones at the end if it's sticky? :sweat_smile:
As is frequently the case with tooling, I'd want to do it like Elixir does with Hexdocs. https://hexdocs.pm/ecto/Ecto.Changeset.html
interesting, so separate scroll bar for the navigation...I generally default to "one scroll bar per page" but I can see the argument in this case.
I'm up for trying that layout! Curious what others think.
The separate scroll bar occurred to me. Had to know without trying it while I’m busy building something, but I could see it potentially being frustrating to have to move my cursor over the sidebar to scroll it. But maybe it would be fine!
Jacob said:
Specifically the value (HSV) of the background is too low. The cyan isn't too bad. Although I would prefer the violet there for a larger element, the cyan on the other elements is perfectly fine. But it might just be that my eyes are particularly bad or that the dark background is making the cyan strain more then it would normally.
Not that it's particularly relevant at this point, but I hit this all the time
Another thing we could try (instead of or in addition to scrolling sidebar) is collapsing the module sections when JS is enabled.
Not sure whether that’s a good idea.
Are the Rust and Zig docs double scrollbars the same thing that you're mentioning?
rust is
zig main tutorial like doc page is, not standard library docs
Yeah I just saw, the std auto generated docs dont automatically add anything to the guide.
yeah the std docs are search and then ctrl+f driven
I have rarely even though about the fact that the rust docs have a second scroll (maybe because for most modules it doesn't), They aggregate all of the links together at the bottom of the page to generally avoid too long of a side bar
I say that then immediately have a bad experience with one of their pages with a double scroll bar. Apparently the smaller side menu scroll bar only works in firefox when the page is in focus. So I tried to scroll the side menu while this chat was in focus and instead it scrolled the main page. That is not optimial.
For the code exmaple pages on the website, like https://www.roc-lang.org/wip/examples/PatternMatching/README.html, does it lazy load the code as you scroll? Cause it seems to have an issue for me with code not rendering until I click on it. Like I see it loading in chunks as I scroll, but the last chunk never loads unless I click.
From a UI perspective double scrollbar is a bit awkward. I also think it would require some deeper style changes to not look ugly with the current docs layout.
I think the main upside is that I can be reading one part of the docs in the main panel and then look at some other stuff in the sidebar without losing my place. That can be nice when I'm thinking through a problem and kind of know what I want to look at next, but don't want to fully commit to a jump.
@Brendan Hansknecht the examples should just be static HTML
So it should load the whole page in one go
Bryce Miller said:
Another thing we could try (instead of or in addition to scrolling sidebar) is collapsing the module sections when JS is enabled.
I think this is a good idea. When I open the docs on my mobile I have like 15seconds of scrolling through the module navbar before I get to the content of the index page. If we collapse it would just be the module names instead of also having every single function as a nav link
Maybe the issue is that it isn't just text. Instead it is a metric ton of spans to get code formatting and color. So firefox lazy loads it. On top of that, it kinda fails and thus the behavior in the video.
Richard Feldman said:
we can, but I'd like to try it at "is comfortable for him and sufficient contrast" before splitting a difference (into something that's uncomfortable for him) that might not need to be split :big_smile:
Whoops I misspoke. I meant to was something like find the middle of the overlap between his needs re: overdark BG vs the high contrast. Still satisfying both with some extra wiggle room so that changes won't cause issues.
ok, now all the links on https://www.roc-lang.org/wip should be ready to launch except for the tutorial (which I'll be revising today and tomorrow) - so if anyone has any feedback on any pages other than the tutorial, now's the time! :smiley:
I'm making issues for some minor things
cool, thanks!
In the examples on the home page we mention "platform" twice. Should we make that a link to a page on the website with an explanation?
yeah I'd like to, although I don't know where to link to right now. Maybe I can make a quick page for it for now, and in the future that can be a language reference entry.
Sounds good :+1:
ABuffSeagull said:
Richard Feldman said:
- there's some way to minimize fonts based on actual content - e.g. strip out the glyphs that don't come up in any of our .html files - I don't know what the name of the tool is that does it, but since we serve our own fonts and have all the content in static .html files, we should be able to do that too!
The tool you're looking for is a font subsetter. If you don't mind doing it manually, this online tool is my usual goto. I still haven't found a good CLI tool to do it, only this library is the easiest/closest thing to what I want, but I also haven't really looked outside the JS ecosystem.
I actually wrote a tool for subsetting fontawesome for use at my last job:
https://github.com/faldor20/symbolswinger it creates a list of non-standard symbols in a html document that you can feed to a tool that can subset the font.
I used this to do the actual subsetting:
https://fonttools.readthedocs.io/en/latest/subset/index.html
might be of some use to you :)
--Just realised this was months ago, zulip just dumped me there and i didn't notice the date :sweat_smile:
Not sure if this is know but was playing around with the repl on the WIP page and did a typo of
» 0.1 + 0,2
panicked at 'not yet implemented: unhandled parse error: Pattern(IndentEnd(@82), @81)', crates/reporting/src/error/parse.rs:673:14
Stack:
after that the repl wouldnt print new expressions
Can you log an issue for this so we can track it? Issue with parsing and should print a nice error
Does it break the repl on other panic cases, like number overflow?
This is an actual rust panic, so I think it is different from a roc panic. Though a roc panic may also break the repl, not sure
I know we got rid of the CLI commands etc from the Docs page.
But I still really think it would be super helpful to have at least something minimal there for common use cases. I have only stumbled across these over time, and I know they are in roc help
but it wasn't obvious to me.
Some ideas;
roc repl
roc check
- really helpful when you have type annotationsroc format
roc dev myapp.roc
and roc run myapp.roc
and roc myapp.roc
roc test
roc build --optimize
roc build --debug
roc run --time
roc run --linker=legacy
roc docs
roc glue /path/to/glue/spec.roc /platform/glue /platform/main.roc
ok, tutorial now works on /wip
except on mobile (there's a problem there I need to fix)
@Luke Boswell let's revisit that after launch...I'm open to the idea in some form but it doesn't seem like a blocker
Regarding the REPL panic mentioned above - the web REPL is supposed to gracefully handle Rust panics or Roc panics and keep going. They should not break the page. That was the case before we added the state machine for handling definitions, so I suspect that's what breaks.
Hey, another thing I noticed on my windows machine on firefox - spellchecker was active in the REPL when I tried it today, but I don't remember this happening last time (maybe I was unobservant). Kinda weird, feels bad. I don't want my spellchecker to yell at me because I named a function likeThis.
Can you file an issue for that @Declan Joseph Maguire?
Gladly. Where would I do that for the website?
Everything for the website is also in the main roc repo https://github.com/roc-lang/roc/issues
Website is looking really good. Right now many of the pages are using max-width: 720px;
for the body, and that's kind of rough on the examples sub-pages. Many of the code snippets require horizontal scrolling to figure out what's going on. Using max-width: var(--body-max-width);
helps a good deal, but I'm not sure if we want that on every page.
hm, yeah maybe we should apply that width to p
but not pre
on examples pages? :thinking:
I for sure prefer the limited width on paragraphs of text
Also just noticed we still need to fix the instructions at the start of the tutorial instead of saying val1
. I can look at it after work later.
Also the text input on REPL in light mode is barely visible
Screenshot-2023-11-20-at-09.16.14.png
web repl does not like binding the same variable twice. try entering x = 1
twice in a row.
It seems like a number of invalid cases are crashing. X = 1
also breaks
yeah neither of those are quick fixes unfortunately
the text color is easy, I'll fix that tonight
I wrote up some docs for platforms (no diagrams yet, but can incorporate some later!) so people have something to read tomorrow: https://github.com/roc-lang/roc/blob/0a0edb59d791937c8974702225e55a670c71ba42/www/wip_new_website/content/platforms.md
any feedback welcome!
Roc-Platform-To-Binary-Inline-Dark.svg
Roc-Platform-To-Binary-Inline-Light.svg
I changed this to be inline, here are the generated light and dark mode svgs from my images earlier
Hopefully one of those works for something you could put on the site and color as you want.
awesome, thank you!
This back and forth I think makes it harder to read:
A Roc game engine platform might provide functionality for rendering and sound, whereas a Web server platform probably would not.
A Roc Web server platform (like basic-webserver) might provide functionality for managing incoming HTTP requests, which a game engine platform likely would not. (It might, however, offer non-HTTP networking functionality for multiplayer games.)
I think it would be better to make one bullet point just game engine. Then the next only webservers (maybe with a start like a webserver platform on the the other hand would not have any rendering or sound capabities, but would ...). I think it is a bit strange to go game, web, web, game in such a small space.
Applies to the 3rd bullet point also jumping back to games after talking about gui
relatedly, I thInk the ecosystem benefits section covers the same thing more or less.
Not a fan of the multiple platform section. I think it should give a more direct answer. As it is written currently, it almost feels like it is belittling the reader.
This design has security benefits, ecosystem benefits, and performance benefits, and the domain-specific memory management platforms can implement can offer additional benefits as well.
Maybe instead something like:
This design has security benefits, ecosystem benefits, and performance benefits. On top of that, the opportunity for domain-specific memory management offers additional potential gains.
if you'd like to create a platform is to say hi in the #beginners channel on Roc Zulip!
Is it worth mentioning #Writing a platform instead?
hm, unfortunately the diagram gets super small in the context of that page's width :sweat_smile:
Screenshot-2023-11-20-at-2.34.38-AM.png
I think we can ship it as just text for now and revisit figuring out how to get a diagram in there sometime after launch
Richard Feldman said:
I wrote up some docs for platforms (no diagrams yet, but can incorporate some later!) so people have something to read tomorrow: https://github.com/roc-lang/roc/blob/0a0edb59d791937c8974702225e55a670c71ba42/www/wip_new_website/content/platforms.md
In the applications heading I think it would be helpful explicitly state how the code works eg:
" In the example above we reference the platform in the packages header and assign it to pfackages { pf: ".."}
. We then specify the features we want to import from the platformimports [pf.Stdout]
, and we define the entry point the platform should use to start executing our code. provides [main] to pf
"
alternatively you could use comments in the code block
app "hello"
#Reference the platform in the packages header and assign it to 'pf'
packages { pf: "https://github.com/roc-lang/basic-cli/releases/download/0.5.0/Cufzl36_SnJ4QbOoEmiJ5dIpUxBvdB3NEySvuH82Wio.tar.br" }
#Specify the features we want to import from the platform
imports [pf.Stdout]
#Define the entry point the platform should use to start executing our code. In this case it will be the 'main' expression below
provides [main] to pf
main =
Stdout.line "Hello, World!"
Additionally one major question I had when finishing my read through was "What about code that's portable across platforms?" like say i wrote a library for logging and i want to use it in my cli application and my webserver, can i do that?
Say i make a cli application and then at some point i realize i wan to expose a http endpoint for some reason, what do i do?
https://lobste.rs/s/lskhwr/roc_programming_language#c_gq5zyn
And then I scroll down and… a repl? OMG. Yes.
nice work @Brian Carroll! :smiley:
Oh very cool. Nice work to you too, the site is looking great! Lovely to have such positive reactions from people.
also thanks to @Luke Boswell, @Anton , and @Brendan Hansknecht for making this happen!!! :heart_eyes:
will this be Roc's equivalent of "I thought this was going to be about the email client"? :laughing:
Screenshot-2023-11-20-at-9.53.43-AM.png
Netlify dashboard right now
Screenshot-2023-11-20-at-10.29.30-AM.png
Congrats on the website release!
On the tutorial page, did we ever discuss adding position: sticky
to the table of contents, or putting it in a sidebar? It might be nice to be able to jump around more easily. I know I've done that a lot on the equivalent Zig page (where they have a separately-scrolling sidebar)
the challenge with sticky is that if your window height is too small to show the whole ToC, then you can't possibly scroll to see the bottom entries anymore :sweat_smile:
we discussed multiple scrollbars somewhere earlier (I forget if it was this thread or a different one) but there was some pushback on that idea
unique visitors yesterday
unique visitors today
pageviews yesterday
pageviews today
100x unique visitors and 80x pageviews compared to yesterday...I'd say all the effort on the new website paid off! :smiley:
amazing work all around, everyone! :tada:
Any issues with adding a link to https://github.com/roc-lang/roc on the front page of the website?
seems reasonable as long as it can be unobtrusive...I'm not sure offhand where we could sneak it in without disrupting the beginner flow :thinking:
How does this look?
Screenshot-2023-12-01-at-12.06.44.png
edit I can fix up the vertical alignment
Or maybe for smaller screens
Screenshot-2023-12-01-at-12.12.44.png
You could also try a section of icons linking to various things like GitHub, Twitter, Zulip, etc in a row
How about this?
Screenshot-2023-12-01-at-13.16.26.png
Screenshot-2023-12-01-at-13.16.19.png
I like the first one with just GitHub
I assume that's an inline SVG for the GitHub logo?
ghLogo =
(Html.element "svg")
[
(Html.attribute "viewBox") "0 0 98 96",
(Html.attribute "height") "25",
(Html.attribute "xmlns") "http://www.w3.org/2000/svg",
(Html.attribute "fill-rule") "evenodd",
(Html.attribute "clip-rule") "evenodd",
(Html.attribute "role") "img",
class "svg-logo",
]
[
(Html.element "path")[(Html.attribute "d") "M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"][],
]
.svg-logo {
fill: var(--text-color);
}
nice!
Just noticed that https://www.roc-lang.org/different-names is rendering strangely: no left margin at all.
Thanks for reporting that @Jacob Elder, could you file an issue?
List.first on that page is linking to https://www.roc-lang.org/builtins/List#join instead of https://www.roc-lang.org/builtins/List#first as well.
oops, nice catch! Want to make a PR to fix it? :smiley:
Sure. Is this actually the source file https://github.com/roc-lang/roc/blob/main/www/public/different-names/index.html ?
I mean, it's not being generated somehow?
correct, it's just html
OK, here you go https://github.com/roc-lang/roc/pull/6507a
awesome, thank you so much!
Last updated: Jul 06 2025 at 12:14 UTC