[HN Gopher] PSone.css - Playstation 1 style CSS Framework
___________________________________________________________________
PSone.css - Playstation 1 style CSS Framework
Author : lnyan
Score : 252 points
Date : 2023-01-23 05:56 UTC (17 hours ago)
(HTM) web link (micah5.github.io)
(TXT) w3m dump (micah5.github.io)
| majortennis wrote:
| That's glorious the NES one too
| raydiatian wrote:
| Man a PS2 one of these would leave me feeling feelings.
| [deleted]
| traspler wrote:
| 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.
| thomond wrote:
| 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
| matheusmoreira wrote:
| The containers are definitely FF7 text boxes. The progress bars
| are MGS health bars. So comfy.
| Narishma wrote:
| Even the BIOS had different UIs depending on the model.
| thomond wrote:
| My favourite is the UI used by emulators today, it's so ugly:
|
| https://fantasyanime.com/emuhelp/images/epsxe-memory-
| card4-t...
| doubled112 wrote:
| 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.
| jamal-kumar wrote:
| I seem to remember being able to pop in playstation CDs
| into CD players and it'd play the game music
| space_ghost wrote:
| 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.
| JohnBooty wrote:
| 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.
| doubled112 wrote:
| 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.
| jermaustin1 wrote:
| 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.
| nebula8804 wrote:
| The PSX "Sound Scope" was introduced a bit after halfway
| through the lifespan of the PSX models SCPH-7000 and up.
| addandsubtract wrote:
| This is the UI I had in my original PS1. Never knew they
| updated it for the PSone.
| thomond wrote:
| 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)
| matheusmoreira wrote:
| This is the interface my console had. Much nicer than the
| blueish one in my opinion.
| Narishma wrote:
| Emulators just run the BIOS ROM you give them. You'll get
| different UIs depending on which BIOS version you have.
| [deleted]
| psychphysic wrote:
| Ha! I love this kind of thing.
|
| It would make for a nice blog theme. In fact I might give it a go
| myself.
| epolanski wrote:
| 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.
| kroltan wrote:
| 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.
| matheusmoreira wrote:
| 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.
| mouzogu wrote:
| nice work, master onion would be proud.
| TazeTSchnitzel wrote:
| What game is it trying to imitate? Final Fantasy VII?
| maxwell wrote:
| Looks like FF7, MGS, and Tekken 3.
| smcl wrote:
| Possibly, the progress bars also give me Metal Gear Solid vibes
| too
| hypertele-Xii wrote:
| Can't select the text in the containers. Accessibility no-go.
| onion2k wrote:
| Technically you couldn't select the text on a PS1 either, so
| it's historically accurate.
| thomasedwards wrote:
| 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!
| rvieira wrote:
| Collection of retro CSS:
|
| https://github.com/sw-yx/spark-joy/blob/master/README.md#fun...
| dotluis wrote:
| Any examples of webpages using these frameworks?
| rickstanley wrote:
| I wish there was GTK1/2 styles.
| mysterydip wrote:
| 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?
| lloydatkinson wrote:
| 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.
| reaperducer wrote:
| 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.
| themikesanto wrote:
| Yeah, you could do all of that, or you could just use a
| package manager.
| rakoo wrote:
| 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 ?
| kulahan wrote:
| >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.
| JohnBooty wrote:
| 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.
| madeofpalk wrote:
| 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
| arcanemachiner wrote:
| > 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.
| JamesonNetworks wrote:
| 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.
| urbandw311er wrote:
| 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.
| thangngoc89 wrote:
| 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.
| voytec wrote:
| Sorry to say this, but this "CSS framework" looks awful when
| JavaScript is disabled.
| jolmg wrote:
| 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?
| voytec wrote:
| 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.
| Waterluvian wrote:
| 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
| Idk__Throwaway wrote:
| Maybe I'm just a weirdo but those icons seem perfectly
| intuitive to me.
| arcanemachiner wrote:
| 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.
| c7b wrote:
| A huge left arrow with a tiny right arrow inside of it - can't
| make that up.
| kadoban wrote:
| Left, Up, Down, Right? But yeah those icons are more harmful
| than leaving them out. They should just be arrows...
| [deleted]
| agateau wrote:
| They should draw the complete d-pad and highlight the button to
| press instead.
| butz wrote:
| 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.
| cantSpellSober wrote:
| Cool, why not include the source (SCSS) in the repo though?
| deafpolygon wrote:
| Looks more like Squeenix CSS
| qbasic_forever wrote:
| It was still just Square at that time.
___________________________________________________________________
(page generated 2023-01-23 23:02 UTC)