re-designed the website

[BramSuurdje]

Hi,

for my final project at school, I was recently tasked with redesigning a website of our choosing. I chose this project because of my passion for it.

I built the website using Next.js and ShadCN. For the backend, I used Pocketbase. Pocketbase makes it extremely easy to update the website when a new project is released. You can simply create a new record on the web GUI with all the info about the project.

URL: https://helper-scripts.com/

[tteck]

That looks really nice! I'm looking forward to seeing the finished product!

[jackcarljack]

If you're looking to re-design your website or want to convert your site from WordPress to PHP, I highly recommend checking out this website development company in Dubai. They are a great website development company with a strong track record of delivering high-quality projects.

Their team is experienced and can handle everything from design to development, ensuring that your website meets all your needs and expectations. You can find more details on their services and past work on their website: RedSpider. I'm sure they'll be able to help you out!

[tteck]

Thanks, but the site has been redesigned.

[jackcarljack]

okay buddy, but you can get more help regarding the web design or development by following them or their methods. Your site will definitely get high rank in SERP.

[dualizeo]

Awesome! Great job it's looking amazing! I wonder if tteck would approve for the replacement page 😂 Because it does need a facelift

Things I would suggest:
Main Index page needs to POP, GLOW, LOOK AMAZING AF Lol! similar to this:
https://codepen.io/TurkAysenur/details/ZEpxeYm
See Example Pages:
https://umbrel.com/
https://casaos.io/
https://unstructured.io/
I Would suggest a Black, Silver colors to make it look professional, Full width & Responsive on Phone sizes.

UIUX:
We shouldn't be taken to Another page when clicking on Get Started: ( People hate that ) Less friction as possible,
INSTEAD Have the Search bar in Bold in the middle and when typing it dynamically takes your to the services targeting the div ( scrolls to the service automatically ) The main thing is everything about ttek Promox Scripts should be accessible in the front page if users want to know more but it should only be lazy loaded by scrolling down, also it shouldn't take up much time to load for SEO and more about making it feel fast and responsive, as I said if users want more information they can scroll or click other links

Other Suggestions:
ICONS for the main topics on the left if possible?

Also:
Taking it a step further, I would also recommend Rendering Current Logo in 3D by making it look more professional, futuristic as this is the way to go. Remember it will be seen by thousands of people and Professionals for evaluation of this hypervisors "Apps" as scripts as the competition is Truenas Scale in terms of Apps, hopefully we can beat other self hosted services like umbrel and casa os etc..

Remember:
The whole point is to INSPIRE More contributions! and hopefully something as this bold will lead to a bigger community! 😃

In the future:
A page for linking to other ProxMox Projects would be Perfect such as these: 👌
( to gain support from other communities and awareness )
https://github.com/Corsinvest/awesome-proxmox-ve
and of course links to the official Website and Forums & unofficial Discord ( Promox doesn't have official discord )
and another cool feature would be a page with youtube videos showing community using ttek scripts ( I know a couple of youtubers that use ttek ) such a page would be useful related to Guides on launching the scripts.

[BramSuurdje]

Wow, thanks for all the feedback! Truly. I'll definitely take everything into consideration and keep you posted.

[BramSuurdje]

quick update: all the scripts are imported from the main site. may still include some bugs. but now will start work on fixing the search bar not showing the results at times.

[DrEVILish]

Awesome first attempt, The following are opinions,

Having a "homepage" is kinda slows down gaining access to the information required.

I come to the LXC Scripts page to get the single-line script to install. Having to load the page and then click on an extra button to go to another page to start searching.

Adding the search to the home page, and transitioning on the fly would be better. SPA.
Adding a shortcut key to start typing on the page starts immediately searching as well. i.e. "Type / to search" feature github has.

Search page, left column requires scrolling on a 13" screen, more interaction to see all items in the page when theres a whole section on the right not utalised.

Visually the icon of the app appearing in a blue box doesn't always look good with icons that clash, I would add a rounded outline with a grey or black background to not clash with the developer icon. You could use the "blue" for the button highlighting and mouse link hover, instead of underlines on hover.

Adding "favicons" of the pages to the left column allows visual people to quickly see which app they are looking for as a visual reference.

App doesn't collapse down on a screen width of less than "1280", clips the text and columns.

[BramSuurdje]

How satisfied are you with the current website?

for me, the current website that you have works well functionally, i mean it does what it needs to. but doesn't really impress visually. and so that's what i'm trying to improve. with the help of awesome people that want to give feedback.

[rrubas]

@ttec As a user I'm satisfied, everything is basically one click and clear and I'm definitely not looking for animated coloring pages for kids where it's a problem to find the script they need.
You're doing a great job!

[BramSuurdje]

i have applied most of the feedback you gave. i will continue tommorow with the favicons. and continue trying to fix the problem with the accordions not expanding when a user starts to search.

[DrEVILish]

I'm genuinely happy with the current site. It's simple. all the information is easily digestible. Filtering is powerful and quick.
My detailed critique of the webpage was only because it was for their school project.

@BramSuurdje
/new - could do with some filtering and the boxes a little bit smaller on my 13" screen having only 3 boxes in the grid up at the same time feels a bit waste of space. If you could do some breakpoints on the width of the page for how many are in the grid. On larger screens having them so big is cool.

[BramSuurdje]

/new was purely a proof on concept haha. i just wanted to show @tteck a different layout that could be used. there was less then 5 minutes of designing in that. i just wanted to show it off with the overlay on click

[BramSuurdje]

I've added a new temporary "/new" page to the site. Today, I've been experimenting with a grid design. I wanted to see your preference. I haven't spent time on the actual grid design yet, only on the popup that occurs when you click on a script. Just wanted to know what you would prefer.

@tteck

[BramSuurdje]

like this?

[tteck]

Nice

[BramSuurdje]

i have also added embed support for all populair websites e.g. twitter, discord etc. it looks something like this

[BramSuurdje]

i added the ability to share links that go directly to a application.

[tteck]

Can pihole -a -p be put in an inline code block? pihole -a -p

[tteck]

[BramSuurdje]

do you own the domain: "https://helper-scripts.com/"? if so you can link it to vercel in 1 click. vercel is fully free and pocketbase (the database) is also free. if i could contact you somewhere private i can send you the details for the database website login and we can work out on how to link your domain to vercel

[tteck]

Yes I own that domain.

[tteck]

I'm tteckster on discord

[BramSuurdje]

does it have to be deployed to gh-pages? i can see if i can make it work but linking it to vercel is the easiest and the best for performance.

[Anti-Apple4life]

Do you think it would be possible or beneficial to move the script requests to the website? Since Pocketbase is now being used, that could be implemented, and might be easier to manage than a Github Discussion. There is also some pre-built self-hosted apps for this type of thing.

[tteck]

No, I prefer it to stay in Discussions.

[CrazyWolf13]

That is awesome!

One little suggestion I would have, could you add a note for each LXC to show what the default value, priviledged or unpriviledged is?
Because I often have to search through the raw script to see if default is priviledged or unpriviledged.

Thanks and really hope this comes true, always tought this website could use a little facelift <3

[tteck]

Will put it somewhere in the description, for now here is a list of default privileged containers

[CrazyWolf13]

❤️

[tteck]

omit Omada and Ubuntu (already changed)

[gehtdichnichtsan]

The new site is cool. I think, a Screenshot from all the programs would be nice. So that a user can see, how the program looks.

[BramSuurdje]

that wouldn't work for most programs because some dont have a GUI. i want to make it so that the site is pretty universal

[condio]

I really like the look of the new site and all of the added detail on items.

My only suggestion is to change the navigation headers to have a backslash instead of a hash. For example, "Media - Photos" to me means it's a section about Media around Photos. I think it should be "Media / Photos" which means it's the section about media and photo tools. Same goes for the rest of the headers. It's very minor, but I do think this change may make sense.

Other than that minor nitpick, you did a great job.

[tteck]

I would think you have it backwards. Anyway, It has always been a dash.

[condio]

I would think you have it backwards. Anyway, It has always been a dash.

I've always used a forward slash in English writings to show things are interchangeable. Perhaps it's just a variation of writing I grew up with that is not standard with others variations. I'm cool with whatever you use. It's very possible my use of it is not how a majority do it.

Examples I can think of quickly:

• him/her
• Someone was sick/injured.
• Can you call/text me?
• and/or
• Coke/Pepsi

According to Wikipedia, what I'm describing is apparently the use of a / to mean an "inclusive or".
"Connecting non-contrasting items
The slash is also used as a shorter substitute for the conjunction "and" or inclusive or (i.e., A or B or both),[12] typically in situations where it fills the role of a hyphen or en dash. For example, the "Hemingway/Faulkner generation" might be used to discuss the era of the Lost Generation inclusive of the people around and affected by both Hemingway and Faulkner. This use is sometimes proscribed, as by New Hart's Rules, the style guide for the Oxford University Press.[11]"
https://en.wikipedia.org/wiki/Slash_(punctuation)#And

I'm cool with whatever you choose. Your scripts have been invaluable to me and I shouldn't care how the headers are labeled. I just know I was a little confused when using them for the first time. I get them now and it's not a problem. Sorry for turning a tech topic into some sort of crazy guy's english test. The changes to the proposed site are really cool and I look forward to using it.

[Deekerman]

Would it be possible to add like a whats new kinda thing for those of us who look daily at the site to see what new magic scripts have been made?

[Deekerman]

Thats what i have been doing. I have the changelog saved and open it first, then once i see what it is i go to another tab with the website to see what the description is, then if that tickles me enough i click the link to see the site. daily routine

I would sign up for a weekly newsletter :P just sayin. But i do appreciate this is just me being lazy. The system i have now is working.

[Anti-Apple4life]

Also, if you are really eager, you can set up a change detection server with the script here and point it towards the raw changelog

[BramSuurdje]

https://helper-scripts.com/scripts

[Deekerman]

@Anti-Apple4life

I tried but didn't know how to do the raw so basically every time there was like a slight change i got notifications. I am not a smart man. Not good at this stuff. Getting better. But not good. Lol. Thanks for the tip with the raw tho. I like that. Do you have a link for it?

[Anti-Apple4life]

The URL for the raw changelog is this: https://raw.githubusercontent.com/tteck/Proxmox/main/CHANGELOG.md

[LetrixZ]

It's much slower than the previous site since it has to make a request for every script everytime.

Would it be possible to preload all the scripts and keep them cached, or at least cache an already loaded script?

[BramSuurdje]

i'll see what i can do. i did it this way to make it faster when more script inevitably get released. so the user doesn't have to load a whole dictionary just to load a "debian 12 LXC" for example. but i'll look into the caching

[DrEVILish]

Back Button in Browser doesn't do anything after clicking a script

History Tree
https://helper-scripts.com/
https://helper-scripts.com/scripts -> click "View Script"
https://helper-scripts.com/scripts?id=tyui8tzzxf5dnnq

At this point clicking "Back" in the browsers navigation (or using a keyboard shortcut) doesn't return to the previous view state/url

[BramSuurdje]

i'll get on it today.

[tteck]

hit the "X" in the top right of the selected script

[BramSuurdje]

the back button now works as intended.

[maxoss]

#2978 (comment)

[tteck]

The site is still in its early stages regarding mobile functionality. Efforts are underway to enhance the experience on mobile devices.

[tteck]

Currently, approximately 8% of users access the site via mobile devices.

[tteck]

Mobile functionality has been improved! 🎉

[maxoss]

Thanks, works great!

[frezeen]

i suggest a link on every app script page to a forum discussion about it. if someone need support for that script he has a direct link to discussion about it.. this for dont spread infos around about specific scripts support.. or a spoilered support window discussion on bottom app script page

[tteck]

Every app doesn't have a discussion. Besides, discussions can become lengthy and filled with misinformation. I have linked discussions for a few pertinent applications and will continue to do so as I see fit.