If you’ve ever tried to learn how to code, you’ll probably know that practical examples make for the best learning experience. While it’s all well and good trying to focus purely on theory, tinkering with real code is where you’ll gain most of your knowledge. This JavaScript tutorial that’s currently doing the rounds on sites like Reddit is a great example, then, as it’s based on the PlayStation 5’s user interface.
The following page includes a practical demo you can play with, as well as a full breakdown of how it was made. While it’s obviously a fairly straightforward recreation, it has all of the animations that you find on Sony’s next-gen console, and it’s just a fun thing to faff about with if you’re interested in expanding your coding knowledge.
[source semicolon.dev, via reddit.com]
Comments 13
Currently in the middle of a JavaScript/HTML/CSS/PHP/SQL group project so this might genuinely be helpful.
Sony hire him
@nessisonett Let us know if you have a faff with it!
Did programming at university, don't ever want to code again lol, it was just too much for me, makes you appreciate what programmers do, it's so annoying typing everything out for it not too work, then have to go through everything and find that you missed something small which completely breaks everything. I did enjoy the html stuff though that was pretty straight forward once you knew a bit of it. But I knew once I finished the course that I wasn't going to do any more programming lol. Although have been doing a bit of html in work recently just basic stuff luckily.
I might have a look at this, just so I can pretend I've got a PS5
Sony, hire this person to fix up your web store. Or at least have your dev team read the tutorial.
@Gremio108 Haha, that is what I am doing. Honestly though, as a programmer myself, I am going to check this out just to get an understanding of how others structure their code. I am always interested in seeing new/more efficient ways to do things that my self-taught mind hasn't come up with.
@Daleaf I feel this lol I took a few coding classes as well. Nothing more frustrating then not being able to figure out why something won't work and maybe spending hours trying to figure out why, only to find out it was cause you forgot to close the tag or put a semicolon after something smh
@optic_efun11 Took programming in college and loved it. Got me to where I am now as a DBA, but the key with being stuck is to walk away for a bit, take a break and take another look at it after you've had a break. In college I got stuck on something for an assignment and ended up waking up the next day with a solution. Coding is great, but I find that I work best alone lol.
@rumple1980 @optic_efun11 haha yea can be really frustrating at times, but when you did manage to get it working or figure out why it was not working then it's a great feeling like @rumple1980 said sometimes just walking away or having a break was great, for me it was smoking my special blend 😀 and just have a think about what does what and then sometimes it would just hit you Eureka lol. Oh and definitely work alone some of the rage when something didn't work f this and f that haha.
The code is pretty good too but his CSS class naming is junk. .v .vs .vr .rr etc.will be a nightmare to manage by others.
Make it readable, BEM or similar much better.
There are things about the PS5's UI that drive me insane though. Like the horizontal trophy list, how long it takes to access the trophies, the game base has too many clicks to get to the friends list......
@Kelrics90 yeah gotta agree, the lack of folders, having to go down then back up to get the installed games in library. It's a good console with some features that are missing and slowly being drip fed, though I believe it will get there in the end. 😅😅
Tap here to load 13 comments
Leave A Comment
Hold on there, you need to login to post a comment...