Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
PSone.css – Playstation 1 style CSS Framework (micah5.github.io)
274 points by lnyan on Jan 23, 2023 | hide | past | favorite | 64 comments



I'm not an expert on css or npm so excuse my ignorance, but why is the recommended way to install several of these to do an npm install? shouldn't it just be adding a css file to your folder and referencing it?


And then how do you update it when there is a new feature or fix? Just remember to occasionally at random check if the random CSS you copy pasted has changed? How do you check if it's changed, go find any commits to look at the diff and compare?

Copy pasting random CSS around is why, as an example, a project I work on has multiple subtly different shades of blues, why margins and paddings are not consistent even on the same page, etc.

Sounds like a lot of work compared to npm update.


Sounds like the problem is poor documentation and project management.

Speaking as someone who builds massive web projects for a billion dollar company, I can state that nothing you describe is necessary if you document your work, maintain standards, and have recurring maintenance events.

CSS maintenance is not hard. It's just boring.


Yeah, you could do all of that, or you could just use a package manager.


But a package manager is a hundred-ton hammer when all you need is to decorate your little html page that you hand-edit and push with rsync.

You wanted a fun website but what you got is a dependency manager with a production CI/CD pipeline taking 15 min to check that yes, the sentence you wrote can in fact be written.

Package managers work, but isn't there some middle ground that doesn't involve depending on a runtime that itself is continuously updated ?


If all you're doing is making one little html page and pushing it up with rsync, then just download the .css file into your folder and carry on.

The existance of other methods doesn't preclude you from doing it whatever way you want to. The CSS file is right there on github to download https://github.com/micah5/PSone.css/blob/master/PSone.css


Yes but the original question is interesting: how do you make sure you're using the latest one ?

You could use the upstream URL, but that'd be a privacy issue.

You could proxy the upstream file, but that rules out static serving.

Maybe use a Makefile that fetches the last version and uses it ?


>Yes but the original question is interesting: how do you make sure you're using the latest one ?

You don't, because you're rendering a simple html page, and whatever minor changes are in the new version are largely irrelevant.


> Maybe use a Makefile that fetches the last version and uses it ?

That would be a package manager lol.


It does 80% of the job of a package manager with 20% of the complexity, I find that acceptable


> isn't there some middle ground that doesn't involve depending on a runtime that itself is continuously updated ?

jsDelivr is pretty nimble in the regard. It mirrors GitHub and npm (and caches and (optionally) minifies the result) so depending on the project, you can get a specific release, or just pull from the master branch, by simply changing the URL of the CSS file.


>But a package manager is a hundred-ton hammer when all you need is

Unfortunately, this is the state of much of software development today. It's why most webpages are enormous. It's why massive increases to speed, processing power, and communication bandwidth have resulted in no real net increase to web-browsing speed for the last 10 years.


    It's why massive increases to speed, processing power, 
    and communication bandwidth have resulted in no real 
    net increase to web-browsing speed for the last 10 years. 
nor to developer productivity, either. I feel that has massively decreased in the last decade.

There are clearly cases where complex build/CI/CD pipelines make sense, but people now believe they need big enterprisey FAANG-scale solutions even when they don't.


CSS uses global rules, hierarchical inheritance, is rendered differently between browser engines/mobile platforms, includes lots of hacky ways to do the same thing, and has constantly evolving standards. CSS is Hard with a capital H.


Are you sure you're talking about the same thing as the parent comment? I believe they're discussing the maintenance and synchronisation of integrating third party .css file(s) into your code.


Because it’s the same workflow as working with big projects. Tools like vite gives you hot-reloading/fast refresh for HTML/CSS/JS workflow and cache busting/minifying your assets automatically.


I wish there was GTK1/2 styles.


Any examples of webpages using these frameworks?


This looks more like FFVII.css?

There wasn't really a unifying UI on the PS1 anyway except for the BIOS

The cursor here seems inspired by it: https://www.youtube.com/watch?v=0jZ0DxwRm-0


Even the BIOS had different UIs depending on the model.


My favourite is the UI used by emulators today, it's so ugly:

https://fantasyanime.com/emuhelp/images/epsxe-memory-card4-t...


Makes sense that it is the UI used by one of the PlayStation BIOSes.

I really liked the visualizations built in as a kid. It was my CD player for years.


I seem to remember being able to pop in playstation CDs into CD players and it'd play the game music


Many PS1 games stored their soundtrack as normal CD audio tracks on the same disk. The first track would contain the game data, additional tracks were music.


This was super common in early games but was almost unheard of by approximately midway through the PS1 lifecycle.

I think the biggest reason was the desire to cram more data onto the disk. Uncompressed redbook CD audio fills up your whole disc... fast.

It's also hard (impossible? I think?) to do seamless looping playback with CD audio if you're just streaming redbook because the laser has to seek back to the beginning of the track. This is a common issue in games where the background music for a level might be e.g. 1:30 of looping music.

Lastly, storing naked redbook audio on the discs may have been been seen as affecting game CD soundtrack sales, which were often a pretty big deal in Japan.


This was a fun trick, but may $DEITY have mercy on your eardrums if your volume was up, headphones were on, and you accidentally played the data track.


Same, the PS had a better CD player than windows did. Hell, I don't think I had a CD-ROM in my PC when we first got a PS, but that might just be my memory failing after 30 years.


The PSX "Sound Scope" was introduced a bit after halfway through the lifespan of the PSX models SCPH-7000 and up.


Emulators just run the BIOS ROM you give them. You'll get different UIs depending on which BIOS version you have.


This is the UI I had in my original PS1. Never knew they updated it for the PSone.


It looks like something someone threw together with placeholder images in a day. The one I remember was alot more boring though: https://www.youtube.com/watch?v=0jZ0DxwRm-0

(I had an EU PS1 bought ~1997)


This is the interface my console had. Much nicer than the blueish one in my opinion.


The containers are definitely FF7 text boxes. The progress bars are MGS health bars. So comfy.


Looks more like Squeenix CSS


It was still just Square at that time.


Can't select the text in the containers. Accessibility no-go.


Technically you couldn't select the text on a PS1 either, so it's historically accurate.


I normally have 90% scaling on my browser and nearly all of these retro CSS themes have strange glitches on that scaling level. I guess they can't do much about that and it's a combination of styling, font weight and rendering that clash together.


What game is it trying to imitate? Final Fantasy VII?


Looks like FF7, MGS, and Tekken 3.


Possibly, the progress bars also give me Metal Gear Solid vibes too


Ha! I love this kind of thing.

It would make for a nice blog theme. In fact I might give it a go myself.


I have wondered whether to adopt similar nice retro looks for my blog myself.

But then I think that as a blog author your primary concern should be to get people to read your blog in the first place and this may not be super easy on eyes and readability.

Better to keep it simple stupid.


Don't hesitate to switch to a more readable font, the later Final Fantasy games did that while keeping the same lo-fi gradient menus and it works quite well, and is way more readable.


Retro game fonts can be pretty readable, what ruins them is the hard coded low resolution antialiasing that many games have which make it essentially impossible to scale or filter the graphics.


Why text is pixelated, but controller buttons - high res? Adding hover/pressed states for controller buttons would be a nice touch, if they are actual buttons.


I think this has been shared before, I’ve tried using it but it as some flaws. The font for example puts a dot on the row below the letter V, and some of the default margins are tricky to work with. But it’s a fun idea!


Cool, why not include the source (SCSS) in the repo though?


That's glorious the NES one too


Sorry to say this, but this "CSS framework" looks awful when JavaScript is disabled.


I can't spot any difference when disabling JavaScript. On the GitHub page, you can see that it's just a CSS file, though they do plan to add JS in the future.

Maybe you have an extension interfering?


Ah, you're right! It's not JS but fonts loaded from cdn.jsdelivr.net (I assumed JS based on the host).

No longer can edit previous comment.


Man a PS2 one of these would leave me feeling feelings.


nice work, master onion would be proud.


The D-Pad icons just reminded me how terrible the PS5 D-Pad is.

It's been a thing since forever to show the actual button graphic in-game during tutorials or menus or whatnot. But the PS5 D-Pad's individual buttons, out of context of being part of the cluster, makes them look backwards.

As a result, I spent most of my time with Diablo 2 Remastered, drinking the wrong potions.

Seriously, check this out and tell me what arrow directions they mean to suggest while sitting 10 feet away on a couch: https://ibb.co/KxM4bf4


Left, Up, Down, Right? But yeah those icons are more harmful than leaving them out. They should just be arrows...


They should draw the complete d-pad and highlight the button to press instead.


A huge left arrow with a tiny right arrow inside of it - can't make that up.


Maybe I'm just a weirdo but those icons seem perfectly intuitive to me.


The grey part of the icons make arrow-points that "point" in the opposite direction of the direction that is communication by the actual arrow-shaped icons, the latter being the actual direction required to produce the correct action.

The two points in the icons provide two exactly opposite messages, and the wrong one is larger than the correct one, thus GP's confusion.


Even without those arrows it seems very intuitive. It's just a subsection of the dpad with each button being an image that represents itself.


You can indeed reason it out. That doesn't mean it's very good though.

You pretty much have to have a very specific image of a d-pad in mind. It helps that that d-pad is also the one in your hands, but you shouldn't have to look at the controller, or have its detailed look memorized, to figure it out.


Fundamentally the fact that there’s anything to think about is an abject failure of why they put the icons there in the first place.

I think what happened here is obvious: there’s a very longstanding software design pattern that was broken by a perfectly sensible hardware controller design. The solution is likely to just stop using that software pattern. Make analogous icons or whatnot.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: