Project Feedback.

[mrchow19910319]

I wrote a website that contains trick2g's youtube page as well as twitch.tv page.

This is my 1st javascript project.

 

Here are two version of it, one is using bootstrap, one is using vanilla CSS.

Tell me which one you prefer. Which one is more responsive and faster. Or which one looks better.

 

Bootstrap: 

https://trick2gsite.netlify.com/

 

Vanilla CSS

https://trock3j.netlify.com/

 

Source Code are inside.

[reniat]

Try to avoid slamming content (in this case the twitch stream) all the way to one side or the other unless it makes sense to do so. The bootstrap example is fairly jarring IMO, since it just looks like the twitch stream is floating weirdly in the page, while some padding could make it feel intentional. 

 

I do prefer the bootstrap versions handling of the scrolled section, so you can scroll without stretching the page forever. You'd probably want to only show a set number and then have a "show more" button, so that the page doesn't get slow (or grow vertically in the case of vanilla CSS version) if there are a lot more videos than there currently are.

[Bananasplit_00]

Twitch is nicer on the CSS site but Youtube is much better on the JS site

[mrchow19910319]

2 minutes ago, Bananasplit_00 said:

Twitch is nicer on the CSS site but Youtube is much better on the JS site

 

4 minutes ago, reniat said:

Try to avoid slamming content (in this case the twitch stream) all the way to one side or the other unless it makes sense to do so. The bootstrap example is fairly jarring IMO, since it just looks like the twitch stream is floating weirdly in the page, while some padding could make it feel intentional. 

 

I do prefer the bootstrap versions handling of the scrolled section, so you can scroll without stretching the page forever. You'd probably want to only show a set number and then have a "show more" button, so that the page doesn't get slow (or grow vertically in the case of vanilla CSS version) if there are a lot more videos than there currently are.

could you amplify more on the twitch part?? you mean I should add some padding to the each side of the window? About the "show more" button, to implement that feature I think I need to utilize youtube Data API's page token. I need to read into that later.

 

Also I think I should borrow bootstrap's youtube section into the newer vanilla CSS section. 

[reniat]

7 minutes ago, mrchow19910319 said:

could you amplify more on the twitch part??

In general, just try to avoid having content flush against the boundaries of your page. There are exceptions (like page banner images, headers, and navbars), but it's a good rule of thumb. Even just a tiny bit of spacing can make the content feel more "contained". You can look at almost any video platform and see this spacing: 

 

[Bananasplit_00]

5 minutes ago, mrchow19910319 said:

 

could you amplify more on the twitch part?? you mean I should add some padding to the each side of the window? About the "show more" button, to implement that feature I think I need to utilize youtube Data API's page token. I need to read into that later.

 

Also I think I should borrow bootstrap's youtube section into the newer vanilla CSS section. 

Padding around the Twitch is much nicer on the CSS site and the top bar looks nicer on the bootsrap site

[mrchow19910319]

1 minute ago, reniat said:

In general, just try to avoid having content flush against the boundaries of your page. There are exceptions (like page banner images, headers, and navbars), but it's a good rule of thumb. Even just a tiny bit of spacing can make the content feel more "contained". You can look at almost any video platform and see this spacing: 

 

1 minute ago, Bananasplit_00 said:

Padding around the Twitch is much nicer on the CSS site and the top bar looks nicer on the bootsrap site

I see. Thanks!