Are people taking advantage of customizing the frontend source?

[gabek]

Right now we go out of our way to ship raw HTML, CSS and Javascript so people can have full access to the complete frontend source and do whatever they want with it and customize their page. However, to do this we give up a lot.

• We can't bundle, minify, transpile or take advantage of tree shaking to shrink our shipping code size.
• We use Preact instead of React. I think this is fine, but it turns some people off from working on the code with the slightly different syntax.
• We can't use nice to have developer tooling such as hot module reloading with Webpack.
• We can't share code between frontend and Admin because the admin is using JSX and JSX requires transpiling.
• We can't utilize 3rd party UI libraries like we do in the admin such as Ant Design because it requires the whole React + Webpack + Babel setup.

So the question I want to ask is: Are all the things we're giving up worth it? Are people taking advantage of having the full source shipped with Owncast?

[moan0s]

Yes I do and I would say a way of configuring the sites color theme is important to me. I think a option to not change the full css but some base colors would also work.

Here is what I use so far:

:root {
  --header-bg-color: #008081;
  --bg-opacity: 0;
}

.message {
 background-color: #24c5f2
}

.instance-title {
font-weight: bold
}

.text-indigo-600 {
    color: #004660;
}

.bg-gray-800 {
background-color: #008081;
}

.bg-gray-300 {
background-color: white;
}

#message-input-container {
background-color: #008081;
}

[jeyemwey]

I can’t speak for the general public, but as an application developer, a frontend rewrite in React and with TypeScript would improve development speed and comfort immensely. A „clean“ frontend (maybe in it’s own repo and bundled in like the admin) could benefit from unit and integration tests, shared components and a cleaner structure instead of multiple mega-files with hundreds of lines.

I can barely imagine that instance admins would change much of the admin which cannot be changed with CSS or by swapping image assets, since the structure is too complicated already.

[gabek]

I don't want to discuss too much about the developer experience, since that's not really the concern. There's generally only a couple people who ever work on the frontend of Owncast, and that's far fewer than there are people running it. The tradeoffs are worth it if the users care about the flexibility, so that's why I'm asking if people care. But there are a couple things to clarify:

maybe in it’s own repo and bundled in like the admin

Keep in mind that would require people to have three projects up and running at any given time. That's a lot of overhead to get a full dev environment running.

could benefit from unit and integration tests, shared components and a cleaner structure instead of multiple mega-files with hundreds of lines.

shared components

There's nothing stopping us from doing any of that right now. Javascript is Javascript and while we can't share between the admin and the frontend right now for the reasons above, we absolutely can build whatever components in Preact and they work great.

which cannot be changed with CSS or by swapping image assets

If you use the admin as an example to model after, you can't make any changes to the images or CSS of the admin because it's all bundled in.

[gabek]

As an update, we're running a poll to hear directly from those people running Owncast if they're taking advantage of the frontend source files. Please answer this one question if you run Owncast, we want to hear from you!

https://gabekangas.typeform.com/to/P5uXL74P

[gabek]

56% of the responses said they do take advantage of the raw HTML, CSS and Javascript that is shipped. But I'm also assuming a large percentage of people who don't take advantage of it didn't know what I was asking or didn't care enough to answer the poll, where the people who do take advantage of it wanted to make their opinion known. So in retrospect I'm not sure how valid of a poll this was, but it's something!

[gabek]

Another option, though I'm not sure if it's a good one, is to have a internally bundled version of the frontend (just like we do with the admin), but allow people to override it by having a local copy on the filesystem.

This would require people who want to make a simple HTML or Javascript change to have the entire web build tooling installed, however. While that would probably just be git clone ... npm install and then npm run build that's still a significant hurdle if you want to change one word in the frontend to another, for example. I'd probably want to build some tooling on top to make it easier, like a script that pulls down the web source, puts it in the right place, does the NPMing, etc. Though it's unlikely anybody would read the documentation to know how that works, so maybe it would be a waste.

It's still unclear to me what people are editing in their raw source that they can't do via CSS, so if anybody has any examples, please let me know!

[pa5tlife]

I am taking advantage of it and appreciate it very much.
I just wish I knew more CSS. Also I dont know any programming language except a tiny bit of python. I guess it's time to learn more. Thanks for putting in the extra effort to offer customization. I'm having trouble just doing simple color changes so I'm gonna be taking a while to get it the look that I want. Being able to embed it is great though, because I can just use my nooby style-sheets.