feat: new gamedb site design #122

FernandoBasso · 2018-09-23T00:01:51Z

NOTE: This is a WIP. @skmp urged me to show what I already had so people could give feedback.

two col game grid on the home page on desktop, 1 col on mobile
lazy load video thumbnails
load youtube iframe video on click
two themes: light (default) and dark with toggle button
responsive (even thumbnail and video player)

Seems to be working at least reasonably, but it probably has issues and
bugs. I'm open to discussion and suggestions about code and the site
design.

Light version:

Darker version:

NOTE: We are discussing the next steps and ideas for the gamedb website here: #125

- two col game grid on the home page on desktop, 1 col on mobile - lazy load video thumbnails - load youtube iframe video on click - two themes: light (default) and dark with toggle button - responsive (even thumbnail and video player) Seems to be working at least reasonably, but it probably has issues and bugs. I'm open to discussion and suggestions about code _and_ the site design.

AbandonedCart · 2018-09-23T03:39:03Z

.tern-project

+    "browser"
+  ],
+  "loadEagerly": [
+    "path/to/your/js/**/*.js"


Isn't this a placeholder that needs to be filled?

No, not a placeholder. Just an example. This file is not used for the site. It is by editors to know how to intelligently assist us with JavaScript. I guess we can remove it from the project.

Oh ok. "path/to" is usually placeholder syntax. I just wasn't sure.

AbandonedCart · 2018-09-23T03:39:13Z

.tern-project

+  ],
+  "dontLoad": [
+    "node_modules/**",
+    "path/to/your/js/**/*.js"


Same as above

AbandonedCart · 2018-09-23T03:41:30Z

_includes/head.html

@@ -3,7 +3,13 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {%- seo -%}
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/main.css?v=" | append: Time.now.to_i  | relative_url }}" />


Instead of the time, couldn't this use the hash or something related to the revision? It seems excessive to prevent caching it when it won't actually change between commits.

You are right. I have used this locally to help me with dev.

Technically jekyll templates are evaluated on site build, so the time field should remain constant after the site is deployed

So, one option is to use the time. On each build, it would generate a new timestampe that would cache-bust all css and javascript when the user acesses the site, even though many times neither will have changed (ex, we change some text, add a new game, etc), sometimes only one or the other, and the users would still re-download all js and css.

Other option is to set a css and js version variables on _config.yml, use it to cache-bust js and css and bump it only when needed, but then we would need to manually update .config.yml when we change css and/or js. Doing that is similar to manually setting versions like I did so far in my tests: in the place you include the asset. Just that it would be configured in one place.

AbandonedCart · 2018-09-23T03:42:38Z

_layouts/default.html

-  </script>
+
+  {% assign nocache = 'now' | date: '%s' %}
+  <script src="{{ "/js/scripts.js?v=" | append: nocache | relative_url }}"></script>


Shouldn't this be using the same method as above (along with the comments about it)?

Indeed. This was just another approach I was trying.

AbandonedCart · 2018-09-23T03:43:31Z

_layouts/home.html

+                  <img
+                      class="video-thumbnail"
+                      data-src="http://img.youtube.com/vi/{{ game.videos.first.yt }}/0.jpg"
+                      src="{{ "/assets/images/placeholder-image-large.jpg?v=1" | relative_url }}"


Per the previous comments, you now have a 3rd method for caching. Isn't this going to get hard to track?

Yes, very hard :D Again. I was just trying different approach locally.

I have yet another one in mind: set the css and js 'cache' variable in _config.yml and update it there when needed, and always use it for css/js cache busting.

AbandonedCart · 2018-09-23T03:49:02Z

Is there a specific logic behind the column choices over a flexible layout that adjusts to the size of window?

AbandonedCart · 2018-09-23T04:01:47Z

_layouts/default.html

@@ -15,17 +15,10 @@

    {%- include footer.html -%}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


https://code.jquery.com/jquery-3.3.1.min.js
Not related to the change, but if you happen to run into issues with the obscure cloudflare version.

We can use another method of loding jQuery, sure.

You probably don't need to switch, but the "official" link was being posted just in case.

FernandoBasso · 2018-09-23T09:17:45Z

Is there a specific logic behind the column choices over a flexible layout that adjusts to the size of window?

No specific reason other than some personal views.

The site was originally a narrow 800px on desktop (and one column layout for desktop and mobile, default Jekyll layout). I increased it to 960px for the desktop and made it "two columns on desktop", "one column on mobile". It was a small improvement, I dare say (if not an improvement, let us consider it as just another approach then).

I'm not sure about making it as flexible as to use the full viewport width, though. But here I speak my own personal preferences. I generally dislike it when a website fills the screen with 1920px wide (in case of my display) worth of stuff. I find it too much. Or course, that is worse for text. For a grid of games I guess it would not be necessarily "bad".

If we made the home full width, flexible, then we have to make (I think) the game page narrower, perhaps? Although I do not think (as I said) that the game grid on home page could look be OK if it took the full width of the screen, the game page has more chances of not looking good (again, my personal opinion) because there would be no grid (we could make video grids on the game page since some games have two or more videos, but then, not sure it would make sense). Again, I think the full width would be too much in certain displays.

That is my overall take on the flexible, full with approach. Anyways, there are pros and cons every approach we could possible think of. Perhaps my arguments make sense to you, perhaps they don't.

AbandonedCart · 2018-09-23T13:50:53Z

It's solid logic, which is all I was asking about. You may want to consider doing mobile, tablet, and desktop with tablet either being a smaller 2 or larger 1.

skmp · 2018-09-24T08:11:04Z

I don't think we need to overcomplicate this. 2 for wide, 1 for less wide sounds just fine.

Use a single way to cache-bust CSS and JavaScript. The main CSS or the theme-related CSS is changed, we should increment the respective variables on `_config.yml' so we bust the cache for those files a new site build is generated.

FernandoBasso · 2018-09-29T18:19:35Z

I think the main, initial part of what I intended to do is done. Let me know if there is something from this set of features/code that you guys think should still be improved.

`tern' is no longer maintained. Let's switch to TSServer for checking and helping with JavaScript.

AbandonedCart

Looks like you cleaned it up nice and settled on one cache method. 👍

luserx0

Great job extending our previously undecorated theme!

Some notes I'd like to add:
- The dark theme should be something else, this sort of blue interferes with the reicast logo. Something along the grey palette or even a switch between the general background and the per game highlight could do.
- There should be a search bar for the games included (not everybody knows about CTRL+F).
- You should update the about section (the already existing footer could make a great scaffold).
- A little more info on the README, about what you've done, would be great.

Keep up the good work!

FernandoBasso · 2018-10-04T08:43:45Z

Let's try some stuff about the dark color soon, then, and the search bar would be a very useful feature.

I'll try to work on your suggestions asap. Thanks for the earnest feedback. Much appreciated.

skmp · 2018-10-04T23:53:31Z

Looks really good! @FernandoBasso why don't you create an ticket with a list of ideas on what you want to work on next, and we can discuss there about next steps?

FernandoBasso · 2018-10-06T17:26:31Z

NOTE: We are discussing the next steps and ideas for the gamedb website here: #125

AbandonedCart reviewed Sep 23, 2018

View reviewed changes

FernandoBasso added 3 commits September 29, 2018 13:51

fix: remove unnecessary code

f2e4b42

refactor: change cache-busting approach for js and css

d3eca2d

Use a single way to cache-bust CSS and JavaScript. The main CSS or the theme-related CSS is changed, we should increment the respective variables on `_config.yml' so we bust the cache for those files a new site build is generated.

minor: update javascript code to two-space indentation

b1e3356

add: replace tern with tsserver for JavaScript

f6832ae

`tern' is no longer maintained. Let's switch to TSServer for checking and helping with JavaScript.

AbandonedCart approved these changes Sep 30, 2018

View reviewed changes

luserx0 self-requested a review October 3, 2018 23:47

luserx0 approved these changes Oct 4, 2018

View reviewed changes

luserx0 merged commit dd29350 into skmp:master Oct 4, 2018

FernandoBasso mentioned this pull request Oct 6, 2018

Ideas and next steps for gamedb.reicast.com #125

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new gamedb site design #122

feat: new gamedb site design #122

FernandoBasso commented Sep 23, 2018 •

edited

Loading

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

AbandonedCart Sep 23, 2018

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

skmp Sep 23, 2018

FernandoBasso Sep 26, 2018

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

AbandonedCart commented Sep 23, 2018

AbandonedCart Sep 23, 2018

FernandoBasso Sep 23, 2018

AbandonedCart Sep 23, 2018

FernandoBasso commented Sep 23, 2018

AbandonedCart commented Sep 23, 2018

skmp commented Sep 24, 2018

FernandoBasso commented Sep 29, 2018

AbandonedCart left a comment

luserx0 left a comment

FernandoBasso commented Oct 4, 2018 •

edited

Loading

skmp commented Oct 4, 2018

FernandoBasso commented Oct 6, 2018 •

edited

Loading

		@@ -15,17 +15,10 @@

		{%- include footer.html -%}
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

feat: new gamedb site design #122

feat: new gamedb site design #122

Conversation

FernandoBasso commented Sep 23, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AbandonedCart commented Sep 23, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FernandoBasso commented Sep 23, 2018

AbandonedCart commented Sep 23, 2018

skmp commented Sep 24, 2018

FernandoBasso commented Sep 29, 2018

AbandonedCart left a comment

Choose a reason for hiding this comment

luserx0 left a comment

Choose a reason for hiding this comment

Great job extending our previously undecorated theme!

FernandoBasso commented Oct 4, 2018 • edited Loading

skmp commented Oct 4, 2018

FernandoBasso commented Oct 6, 2018 • edited Loading

FernandoBasso commented Sep 23, 2018 •

edited

Loading

FernandoBasso commented Oct 4, 2018 •

edited

Loading

FernandoBasso commented Oct 6, 2018 •

edited

Loading