this post was submitted on 12 Nov 2023
15 points (94.1% liked)

Programming

17460 readers
139 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev



founded 1 year ago
MODERATORS
 

Ok, so I've been thinking for a bit, and I know there's a ton of alternative "libre" frontends for websites like YouTube and Reddit. However, I was thinking: what If I just wanted to make my own frontend? Not specifically for the intentions of "libre", but I wanted to change the controls and appearence of the website. I'm honestly unsure of how to approach this. Any thoughts?

top 10 comments
sorted by: hot top controversial new old
[–] 4L3moNemo@programming.dev 16 points 1 year ago (1 children)

Easyest way, to begin with, is to use a browser addon and userscripts. Addons to look for are Greasemonkey, Tampermonkey, or Violentmonkey and alike alternatives. Keyword to google "userscripts". P.S. As I see it, from your description, you just want some mods (changes) to existing UI, no need to rebuild one from a scratch in other more complicated ways.

[–] Debuholden@programming.dev 2 points 1 year ago (1 children)

I took a look at these, and decided that I'm gonna use something like flask as a lot of people seemed to express privacy concerns over all of them. If you disagree please let me know.

[–] anzo@programming.dev 17 points 1 year ago

No offense but you should probably start by learning some frontend development (e.g. VueJs) because your pick sounds like you still don't understand the 'stack' architecture, divided between API endpoints (e.g. flask) and the reactive components (Javascript)..

[–] SpacePirate@lemmy.ml 9 points 1 year ago

The generalized approach in industry is to use API calls, and create classes to structure the data you receive as JSON or XML. At that point, it is entirely up to you how to format and display the data from your classes. Take a look at some of the Lemmy client code like Mlem, Memmy, or Voyager as examples. Though they have gotten more complicated, they all follow this client-server model for front end development.

However, due to recent shenanigans around API and RSS by companies, mostly those looking to prevent AI companies from using their data for free, the alternative, much worse method is to take the HTML output from a standard web request, and try to reverse engineer the page information into a class structure. This sucks, breaks frequently, and requires you to code around ads and other junk on pages in order to get at the content.

[–] Deckweiss@lemmy.world 3 points 1 year ago

A website is just textfiles that your browser downloads. You can open the debug menu and read them, and even edit them. Sometimes the files are minified or obfuscated and you need to use some special tools to make them readable. But the core concept is: the files are on your pc, you can do with them whatever you want.

If you don't know how to start, it seems to me that you wouldn't have enough skill to succeed. So instead I'd suggest you start with what's called "userscripting" (greasemonkey or similar). Userscripting is a way to modify a website on the fly. For example you could remove some elements, reposition elements, add buttons with new functionality etc. That will let you start with your goal on a small scale, possibly with some compromises from your vision. But you will be able to get into the general workflow and get results in a reasonable timeframe.

If you want to do it properly you have to study the API, which can be either publicly documented or you have to read the websites source to reverse engineer it. Then you just program a website like usual which uses the API and does something with the results. If there are already open source frontends, and no public API docs, you can read those projects source instead, which is easier than reverse engineering.

Hope this helps as an entry point

[–] x4740N@lemmy.world 1 points 1 year ago (1 children)

Scrape the website instead of using an api if the website offers it

[–] JerukPurut404@lemmy.my.id 1 points 1 year ago (1 children)

Why not using the api? The requests can also be proxied for more secruity

[–] x4740N@lemmy.world 0 points 1 year ago (1 children)

Because of situations like reddit

[–] JerukPurut404@lemmy.my.id 1 points 1 year ago

Yeah but not every site like reddit.

[–] quantenzitrone@feddit.de 1 points 1 year ago

I have no experience. Anyway:

  • learn how to make a basic website in some flexible programming language like go, rust or python (django)
  • make a list of functionality of your original website you want to provide an alternative frontend for (as a start, you can expand later)
  • find a way to retrieve all important data for the most important functionality reliably
  • implement it into your website
  • make it fancy, expand functionality, use the same webpaths for you website like as the original (so it can easily be redirected with libredirect or similar)

You can also look at and analyze the source code of existing Libre frontends like rimgo (go).