Introducing the Official Web Explorer!

is cool :+1:

4 Likes

I’m glad this is official now! I like the dark theme. It seems like the thumbnails are tinted black, though - is that intentional? Here’s how it looks on Firefox (I could try to find bugs if you want):

Interestingly, it seems that some people have a dark theme, and some users have a light theme.

Also, I totally agree with the seed thing to an extent - I believe all code on Hopscotch should be open source, but if the closed sourcing on mobile devices with seeds is an intentionally added feature, then I believe that there should at least be the option to close source project code on publish, or at least have this be a Pro-only feature.

10 Likes

Otherwise, I’m sure that they could just make code should be available to all users once the seed block compatibility issues are solved, if so!

7 Likes

Thanks – I’m really excited to be further developing it!

Actually, yes. One thing I noticed about dark modes in the past is that in really dark environments, the images are the same and still hurt my eyes. So, when I created a dark mode, I darkened the images to reduce that strain. I found that it really helps, and I hope that it helps you as well.

The main issue I believe was editing and remixing, as that would allow products to be obtained for free or given to the wrong person. It’s much easier to remove the edit button from the UI than it is to create an entire view-only mode in Hopscotch.

8 Likes

it depends on the system theme

4 Likes

Mm, I see what you mean. By changing the light threshold of an image directly, on a technical level you’d also be changing the maximum amount of lightness, which might sound obvious, but in turn this also changes the energy level of the image, on an aesthetics and presentation standpoint.

Take, for instance, the mobile homepage, compared to the dark theme homepage:

So my main point of feedback: the tint consequently ends up making the dark mode look drained of energy, which consequently fundamentally strikes against Hopscotch’s main design language: a cartoon-like and bright visual aesthetic, which is shown in project thumbnails, as well as the official content. This, in my opinion, also diminishes first impressions of these projects.

There’s actually a very easy fix to fixing this issue - in order to decrease eye strain, generally there shouldn’t be too much contrast between dark and light elements. By changing the background color, the sharpness is immediately alleviated:

Before (40% image opacity):

After (100% image opacity):

Here are the color codes I used, though I'm sure one could keep playing with the exact numbers. (Also, I haven't ran a proper contrast check on these codes.)
:root {
    --col-bg-main: #444;
    --col-bg-toolbar: #272727;
    --col-low-border: 1px solid #666;
    --col-label-text: #fff;
    --img-opacity: 1;

If you want, I could do a pull request on the HS-Tools repo, but I think they’re pretty easy to replace anyways. Either way, feel free to use these without credit!

To me, this is still dark enough to decrease eye strain contrary to a light theme, while also preserving the thumbnail lightness, creating all-around great first impressions and maintaining the whole aesthetic of the Hopscotch app.

Otherwise, users could remedy the high contrast dark environment. For one, the use of night shift/night light features helps tremendously to reduce eye strain, by emitting yellow light instead of blue light based on a user-set threshold… to be honest though, I’m not sure exactly how much this would help, since this is more an issue of eye strain due to contrast rather than blue light.

8 Likes

Ahh right. Maybe code sections that are paid-only or have if(product) while loops or conditionals could be greyed out and locked individually?

5 Likes

oo long post.

4 Likes

Lastly, users could also turn their screen brightness down if they feel that it’s still too light. Almost forgot to mention this. (I believe most apps with both light and dark components use a dark gray rather than a black for a background - at least, that I use.)

Might as well use this example that I made - as an image is darkened, energy level is lowered:

6 Likes

Thanks for the feedback!

This actually isn’t something I’ve touched since the beginning of my HS Tools Web Explorer. Once I get the chance, I can definitely look into it and see what I can do.

I’m not sure whether you’re addressing the Web Explorer or the app, but I don’t see a reason to lock viewing of the purchase code on the web, and I am not working with the iOS app in any way.

That’s a good point, though in my experience that doesn’t always work, and (subjectively) it doesn’t look good having the gray background brighter than the toolbar, though of course I could change that. But if I change that, then there could be too little contrast with the text.

Either way, it’s definitely something I can change since it’s practically untouched from its creation on the HS Tools Explorer.

And if anyone else has thoughts on this, feel free to post or tag me.

8 Likes

In the meantime though, there is something else I’m working on that I think you all will be super excited about :thinking:

8 Likes

Can you tell us what it is?

I can’t wait!

3 Likes

Haha not yet :wink:

5 Likes

):

why not?

I don’t want to wait

2 Likes

@/Awesome_E display help

if there is an option
@/Awesome_E display the thing you will add

1 Like

Yeah of course! Hopefully it helps.

Sure. It’s definitely something to play around with. I personally think this could work out. I guess it might be better because it makes the top bar display more prominently (excuse the scrollbar, I think it’s a Firefox-specific problem):

Before:

After (image 2):

Image 2 color codes
:root {
    --col-bg-main: #232323;
    --col-bg-toolbar: #545454;
    --col-low-border: 1px solid #444;
    --col-label-text: #fff;
    --img-opacity: 1;
}

.topnav button {
    color: #aaa;
}

Maybe the cards could benefit being darker, on the other hand. There’s an app I use that utilizes the contrast between dark cards on a light background throughout the app, which I took inspiration from. Hmm maybe less contrast is good…

Do you think I could play with colors a bit more and do a pull request on the hs-tools repo later? I’d love to help.

6 Likes

This is separate from the HS Tools repo. I don’t think it’s a giant task but I just need the time. If you make a PR I think it could take as much time for me to review then put it into the Hopscotch organization’s repo as it would to code it myself.

7 Likes

Sounds good; no worries then!

7 Likes

just saw the latest update! the log-in feature is amazing :)) cant wait til you add more interactive features

12 Likes

Just Imagine if…

Awesome E Made it so you could edit & create games

4 Likes