search

jimniels / teamcolors

Team Colors for professional sports teams
https://teamcolors.jim-nielsen.com
138 stars 63 forks source link

Load stylesheet in template #52

Closed tjboudreaux closed 9 years ago

tjboudreaux commented 9 years ago

The lag that occurs before the document is ready for modification causes a small flicker to occur on page load.

Moving the stylesheet into the template itself solves this problem.

Review on Reviewable

jimniels commented 9 years ago

So the reason this is loaded via JS rather than via the template is that the actual HTML structure is different on the initial page load. The idea here was a type of progressive enhancement: if js is not enabled, the user still gets a barebones HTML doc with the color key/pair values organized by league. However, if the JS loads, the HTML content is modified in structure by JS and hence the styling of the page becomes relevant. The current CSS styles are built for the JS enhanced HTML structure, so loading them on the initial page load before we know if the JS works isn't really optimal for this situation.

I don't love this functionality at present (in part because of the flicker), so it's likely going to change in the near future. I'm going to transition this page to use React instead of jQuery and I believe this issue will become moot at that point, as we'll handle progressive enhancement differently.

tjboudreaux commented 9 years ago

Hey Jim. Have you started working on moving this to React yet? I'd love to help w/ that if you're interested.

I started working on adding NCAA support here: https://github.com/tjboudreaux/teamcolors.github.io/commit/3d8768b6e72dbc2fcef2681ef47aa57f51907050

I'm in the early stages of a personal project that will need NCAA colors and logos and would like to add it here and then generate the stylesheets I need from here so that others might be able to reuse this data if needed.

jimniels commented 9 years ago

I've started semi-planning how I'd like to do the React part, but haven't written any code yet (that's the easy part ha :wink: ). I'd like to try and keep a progressive enhancement approach, i.e. even if there's no javascript the information of the site is still accessible. Likely something similar to what there is now: a barebones HTML structure on first page load, then if JS is enabled, run React and render all the pretty colors, logos, etc.

The NCAA addition would be great! I briefly looked at what you've done so far and, just FYI, that was kind of an older structure of the code. I moved the site over to work with a task runner (Gulp) which meant each 'league' was abstracted into it's own JSON file, see here: https://github.com/teamcolors/teamcolors.github.io/tree/master/src/data

I'm not sure when i'll get around to the React stuff. I've got other priorities at the moment, but once I feel like we've got a clear path towards a progress-enhancement implementation, i'd love to dive in. Any comments/suggestions are welcome towards that goal :)

jimniels commented 9 years ago

This has been resolved with the newest React work. The stylesheet is now loaded via the HTML, and there is a preloader until react kicks in and renders everything.