Xetera commented 3 years ago

Hey folks, I'm looking for feedback on an interesting addition I've been thinking about on creators' pages. Let me know what you think, whether that's support, disapproval or concerns.

What are web components?

Web components let you create new elements on webpages outside of your usual <div>, <img>. There's an interesting framework called polymer that builds one of its core concepts called lit-element on top of it. If you've ever gone on YouTube and clicked inspect element, you've already used this and know what it looks like.

What does this have to do with top.gg?

We currently let bot developers use CSS and HTML to customize their pages and that works for many developers but there are some pages that make it quite clear that erm... bot developers really shine in the backend, and not frontend, to say the least.

Web components would let Top.gg make HTML components that specifically fit with the site's theme available to you without having to use any CSS. This would let you create automatically responsive layouts as simple as

<gg-title>Commands</gg-title>

<gg-grid>
  <div>Name</div>
  <div>Description</div>
  <div>$roll</div>
  <div>The command literally every bot already has</div>
</gg-grid>

<gg-buttons row>
  <gg-button href="https://bottum.gg">
    Invite my bot
  </gg-button>
  <gg-button href="https://patreon.com/botum">
    Support Me (These VPS bills don't pay themselves you know)
  </gg-button>
</gg-buttons>

That look in-line with the site's theme without having to write your own CSS.

Javascript

Web components would also allow us to bundle safe Javascript behavior with elements that you would otherwise not have access to. I currently can't think of any specific JS that would make sense in the context of a bot page, but it would certainly be a possibility open to exploration. Is there any "common" Javascript functionality you wish you had access to on your product pages?

Browser Support

Components are widely supported by many browsers, about as widespread as flexbox support. So we would not be including the kinds of polyfills Polymer ships with to avoid unnecessary bloat. We already do not support any version of IE since the only cringe browser epic gamers like yourselves use is Safari, which already has support for what we're thinking about doing with Web Components.

Why I think this could be valuable

Top.gg will be changing its design dramatically by the start of March. We've been changing technologies on the side as well, moving away from regular CSS to styled-components which makes life orders of magnitude easier for the dev team, but it makes it difficult for us to keep providing CSS classes to accomplish the above because of compilation.

Disabled user CSS

We're going to be adding a feature -similar to what Reddit does that makes it possible to go on https://www.reddit.com/r/ooer without getting a seizure- that disables custom user CSS on product pages. My current thoughts is that Web Components would be immune to this toggle since the CSS is pre-defined by Top.gg. It would let you build more interesting designs for all users that don't get reduced down to something ugly with user CSS disabled.

Uniformity

I'm extremely happy with the step we're going to take in design changes and I think developers, especially those who are not well versed in CSS, would appreciate being able to make their page feel more consistent with the rest of the site, instead of doing something like

button {
  background: red;
  color: yellow;
}

body {
  background: url(https://i.pinimg.com/originals/60/97/bd/6097bde9c8edf20b92c31ae38c81bd9d.gif);
}

and sending my eyes to the ICU in the process. I feel like once the new design goes live more people might be interested in having a design that automatically fits the page design since it's going to look pretty good 🙏.

Web components, if implemented, would NOT remove your existing access to CSS and would only be an extra optional feature you would have the chance to use if you want. Because of this "badly designed pages" won't be going away, but we will simply be giving devs extra tools to use designing their page. That being said, we will not be adding any new accessible CSS classes so we have no plans on replicating the functionality of Web Components with CSS for the time being.

This is not planned or being worked on at this time so we have no time estimate for when it would be delivered even if we see overwhelming support for it. I'm just looking for opinions at this stage.

Your thoughts

Do you enjoy the complete creative freedom CSS gives you, or do you just want to make your bot page look pretty without having to put much effort or time into it?

Feel free to drop a 👍 reaction on the issue if you're vibing with this one but don't have anything to add. _{Please don't reply with 👍}

Aprixia commented 3 years ago

I suck at css, so I'd rather use your components. Plus, that would allow me to actually make a pretty nice bot page as well, rather than just a straight up plain one. Just make sure you also make documentations on how to use this and the different variables.

Wondermine commented 3 years ago

Well i feel this is a great idea, as this will make the pages more accurate for html and css users, and it will make them more good looking, i like it!

takipsizad commented 3 years ago

wut

ChillFish8 commented 3 years ago

We're going to be adding a feature -similar to what Reddit does that makes it possible to go on https://www.reddit.com/r/ooer without getting a seizure- that disables custom user CSS on product pages. My current thoughts is that Web Components would be immune to this toggle since the CSS is pre-defined by Top.gg. It would let you build more interesting designs for all users that don't get reduced down to something ugly with user CSS disabled.

While sure the issue noted in the reddit example is valid, this issue should surely be minimised / removed via the whitelisting process and also users generally reporting pages.

While this may be convinient for a user for some pages, this has the potential to completely destroy others which undoubtidly will lead to the end user running to issues and not working out why it's doing it. Sometimes developers add the custom CSS because it's required in order to make the page work correctly and I think making so they're essentially forces to using the components in order to make it support a wider range of user base is a 👎, a good example would be iframes which for example can be transparent, which work with custom CSS but can be made un-readable without it. which leaves three options in the end:

Give users the choice to disable custom CSS and possibly forget about it then leading to some pages being absolutely destroyed because they cant re-design the page to make it user friendly because of the lack of css.
Dont give users the choice and let them do what they've been doing for the last how ever many years of operation.
Force developers to use compontents allowing users to disable custom css which imo makes it way worse for the developer and I think forcing them to use a set component system in order to make a readable page without the standard layout and design is starting to get to the why bother having custom x in the first place when if you take user experience seriously you have to use the same theme as everyone else.

Misly16 commented 3 years ago

About js, I had previously suggested something like adding some js frameworks that devs can use, such as aos which would be pretty cool imo.

Xetera commented 3 years ago

We're going to be adding a feature -similar to what Reddit does that makes it possible to go on https://www.reddit.com/r/ooer without getting a seizure- that disables custom user CSS on product pages. My current thoughts is that Web Components would be immune to this toggle since the CSS is pre-defined by Top.gg. It would let you build more interesting designs for all users that don't get reduced down to something ugly with user CSS disabled.

While sure the issue noted in the reddit example is valid, this issue should surely be minimised / removed via the whitelisting process and also users generally reporting pages.

While this may be convinient for a user for some pages, this has the potential to completely destroy others which undoubtidly will lead to the end user running to issues and not working out why it's doing it. Sometimes developers add the custom CSS because it's required in order to make the page work correctly and I think making so they're essentially forces to using the components in order to make it support a wider range of user base is a 👎, a good example would be iframes which for example can be transparent, which work with custom CSS but can be made un-readable without it. which leaves three options in the end:

Give users the choice to disable custom CSS and possibly forget about it then leading to some pages being absolutely destroyed because they cant re-design the page to make it user friendly because of the lack of css.

Dont give users the choice and let them do what they've been doing for the last how ever many years of operation.

Force developers to use compontents allowing users to disable custom css which imo makes it way worse for the developer and I think forcing them to use a set component system in order to make a readable page without the standard layout and design is starting to get to the why bother having custom x in the first place when if you take user experience seriously you have to use the same theme as everyone else.

Well, you can't report pages for shitty CSS and it's not something we vet in the approval process either aside from the really crazy seizure stuff. Users will be able to see that they have css disabled when looking at bare pages and the default will be to have it enabled. It's the user's choice to disable it so if bot owners get bad reviews on like "a shitty page with no css", which is already a thing that never happens, we'd remove it.

We just want to give users more control over the look of the site and don't think it'll be affecting bot developers too much. This can be discussed somewhere else though because it's not really about web components.

Xetera commented 3 years ago

About js, I had previously suggested something like adding some js frameworks that devs can use, such as aos which would be pretty cool imo.

That's still out of the scope of the current proposal.

erwin1234777 commented 3 years ago

While im not too familiar with polymer's features, i'd be more than happy to see it being implemented as long as it provides both experienced users and new users an upperhand on it.

In the top.gg environment, everyone is competing with eachother for views, and while i do agree that most of the users shine on the back end, they should also be rewarded for the effort they put into their pages for frontend. By providing a "Too easy" way to develop your bot page without putting in the effort, it takes away from the users who did so. (more suggestions and questions below regarding this) This may be a very selfish sounding argument, however the freedom that css gives is over the users is amazing and should be rewarded.

With my base opinion above, as biased as it may be, i'll go on ask a couple questions and some suggestions.

First, is this a new feature or an attempt to patch seizures? If its the latter, why not simple add a method to report bots page for seizure inducing content? If its the former, heres more questions.

Ragarding balance:

We seen how much does this provide to new users (its an easy way to get them to easily make a good looking bot page), but, on the other end of the coin, what does it provide to us who already have nifty bot pages? What does this brings to the table for us?
- How much will this break other bots pages? ( i see you mentioned it being a new tool, but will this affect currently existing pages at ALL? )
- What are the restrictions on things we can and cannot use polymer for? Do we have access to embeds? Videos? Something along the lines of iFrame?
Regarding accessibility:
- Will this feature be openly used or will this be limited to Premium/Certified Devs?
- Will users(not devs, as in viewers) be able to opt out of css/polymer if they so chose?
- Does polymer still enforce the light/night mode?
As i mentioned before, my opinion regarding to the environment is more to the competitive/critical side, so it shows im not fond of "too easy" ways to give developers, as it takes away the rewards we sow after we put in effort on our pages. Im 100% down for new features, however i'd like to know more about this.

Suggestion:
- (probably a too harsh one): This HIGHLY depends on how easy you plan to implement polymer, if its TOO easy, i would recommend adding polymer (along with other features, like a small builder) to aid Premium users to build their pages. This could possibly include templates using poylmer, as both as incentive for people to use premium (apart from the ads) and a way to balance the competitive environment.

Xetera commented 3 years ago

First, is this a new feature or an attempt to patch seizures?

The seizure CSS was something I used as an example to show that there are people who want to customize their pages but are not experienced enough with CSS for it. If people are turning their pages to r/ooer on purpose that should be reportable but that's not really the point here. It's meant to be a feature.

What does it provide to us who already have nifty bot pages?

Not much. If you've spent time customizing your page to work perfectly and aren't concerned with making your pages fit the site's theme then this shouldn't really affect you.

How much will this break other bots pages?

In theory web components will simply register new html elements that gets exposed to users. We don't change any existing element because that would break people's pages but also because browsers that have a hard time catching up with standards like safari and safari ios :^) don't support modifying existing elements. This should not be breaking anyone's page.

What are the restrictions on things we can and cannot use polymer for?

Web components and polymer are not the same thing. Polymer is a framework that is mostly about polyfilling support for next-gen web standards like web components. In some way the goal of polymer is to not exist which is what it makes it very interesting, but we're not going to be bringing in polymer, instead we'll use the existing support for creating custom elements. What that supports (like custom attributes and such) will be something we have to think about when implementing, but you should have no problem putting an iframe or whatever inside a web component since it acts like a regular element.

Will this feature be openly used or will this be limited to Premium/Certified Devs?

Don't know about this one yet, I'm just interested in how this would work as a feature and its restriction is something we would have to talk about later. I'd like it to be open to everyone but I can't make that call on my own of course.

Will users(not devs, as in viewers) be able to opt out of css/polymer if they so chose?

They will be able to opt out of custom CSS written by bot devs but not web components as their styling is not customizable by the bot dev.

Does polymer still enforce the light/night mode?

All the styling in components would change with different modes (and site themes like red/blue etc which will be added later)

Overall I'd say the goal is to get a clean presentation for whatever it is you want to list. I don't believe in keeping things intentionally difficult for people just to highlight the few who struggle to get through it. Making your bot page fit in with top.gg should be simple and making it stand out and look amazing should be the thing that gets rewarded. The point isn't to give devs every tool available to make an amazing page, it's to allow users to make a good looking generic page using our elements.

My philosophy is if you're manually building a website that can be done quickly in squarespace then it's not squarespace's fault for making what you do simple, you just need to step up your own game.

webtax-gh commented 3 years ago

If you want bot pages to be similar and make them easy to create, why not just make pre-made css (create some global css classes)? That would be much less bloated than polymer and it would make it easier for everyone that knows plain html to use. More people know / will use html than polymer. I don’t personally like these changes.

Xetera commented 3 years ago

If you want bot pages to be similar and make them easy to create, why not just make pre-made css (create some global css classes)? That would be much less bloated than polymer and it would make it easier for everyone that knows plain html to use. More people know / will use html than polymer. I don’t personally like these changes.

Like I said, we're not going to be including polymer because there's already browser support for web components. You don't have to learn any js framework, just use custom html components, maybe I should make that more clear in the RFC. I also mentioned that premade css is a little more unnatural for us to maintain now that we're switching technologies to compile our css. I'm sure there's still a way to make that work and it's possible that might be simpler in the long run. It's a tradeoff to weigh

DragonDev15 commented 3 years ago

Sounds really good but will this be too overwhelming to new users or would there be an extensive guide on how to do it so they can learn how to do it?

Amazing idea though. If this does get implemented how long would be the estimated wait?

Milo123459 commented 3 years ago

I suck at css, so I'd rather use your components. Plus, that would allow me to actually make a pretty nice bot page as well, rather than just a straight up plain one. Just make sure you also make documentations on how to use this and the different variables.

I agree. Would be cool.

jaipack17 commented 3 years ago

Well, talking about CSS. A person might be good at it or might not be. What I think is that if everyone was given the freedom to use inbuilt Bot page tools inside the Edit Section then even the people with no CSS experience would be able to enhance their bot pages. This not only equips the bot creators to make better content on top.gg but also naturally attracts more users to add new bots! It will do good to new bots, the top.gg website as well as small bot creators.

DragonDev15 commented 3 years ago

Well, talking about CSS. A person might be good at it or might not be. What I think is that if everyone was given the freedom to use inbuilt Bot page tools inside the Edit Section then even the people with no CSS experience would be able to enhance their bot pages. This not only equips the bot creators to make better content on top.gg but also naturally attracts more users to add new bots! It will do good to new bots, the top.gg website as well as small bot creators.

This would allow for extensive creativity for the bots however lots of documentation would be needed.

raunakrajadh commented 3 years ago

This would help the developer, who is really bad at CSS, and would surely make it easy to make a responsive site! As said it can allow extensive creativity for the bot developers to design their bot pages.

DragonDev15 commented 3 years ago

This would help the developer, who is really bad at CSS, and would surely make it easy to make a responsive site! As said it can allow extensive creativity for the bot developers to design their bot pages.

Would this allow us to completely change the layout so its custom as that would be really cool (All bots can have unique layouts!)

raunakrajadh commented 3 years ago

This would help the developer, who is really bad at CSS, and would surely make it easy to make a responsive site! As said it can allow extensive creativity for the bot developers to design their bot pages.

Would this allow us to completely change the layout so its custom as that would be really cool (All bots can have unique layouts!)

No this wouldn't allow you to completely change the layout, but the bot description section!!

DragonDev15 commented 3 years ago

No this wouldn't allow you to completely change the layout, but the bot description section!!

Oh okay, So its only the description. Thats cool (I did mis-read it, sorry)

raunakrajadh commented 3 years ago

No this wouldn't allow you to completely change the layout, but the bot description section!!

Oh okay, So its only the description. Thats cool (I did mis-read it, sorry)

Ohh np

Miolus commented 3 years ago

I'd use the components feature as they would make it easier to decide and meet a layout that fits to top.gg's style, most time should be spent for the bot not the bot page. As another feature for bot pages I'd recommend automatic server count like seen on other botlists, would also make a good bot page easier. (automatic server count could be implemented as variable into the components.)

raunakrajadh commented 3 years ago

I'd use the components feature as they would make it easier to decide and meet a layout that fits to top.gg's style, most time should be spent for the bot not the bot page. As another feature for bot pages I'd recommend automatic server count like seen on other botlists, would also make a good bot page easier. (automatic server count could be implemented as variable into the components.)

You can also use the top.gg API for Server count, and I don't think any other botlist has any sort of "automatic server count" without using their API! Dont take me rude 😅

Xetera commented 3 years ago

Automatic server count -as far as I know- is not possible without breaking Discord's ToS so this is not something we can consider.

HeyItzMystic commented 3 years ago

If it's fully customizable and has decent documentation, then I'd be down.

raunakrajadh commented 3 years ago

Automatic server count -as far as I know- is not possible without breaking Discord's ToS so this is not something we can consider.

Anyways, I support the changes in the Creator's page!! And I would be happy to use the new feature on the website.

top-gg / issues

[RFC] Top.gg Web Components #569

What are web components?

What does this have to do with top.gg?

Javascript

Browser Support

Why I think this could be valuable

Disabled user CSS

Uniformity

Your thoughts