hawkins/always-sunny

It's Always Sunny in Philadelphia random episode picker

always-sunny's Issues

Rearrange layout to better fit usage

Users have requested layout be changed to better fit usage of the site. To quote one:

I would move the sections around a bit: the randomizing factors up top, the episode description in the middle, and the "watch on Netflix" button at the bottom.

This allows users to follow the process:

1. Choose factors and randomize
2. View the resulting episode
3. Play the episode on Netflix

Include links to Wikipedia

Episodes could benefit from links to their wiki page itsalwayssunny.wikia.com

This way users could get additional info on episodes if the given description is not enough to recall memorable quotes, etc.

Allow user to select random episode by season

With the addition of selecting specific episode and season by URL, the function getRandomEpisodeFromSeason was added. This could easily be leveraged to allow users to select random episodes from a specific season via the Controls interface.

Offline plugin not caching title font

Title font Caveat Brush is not cached with offline-plugin

Need to add this URL to externals.

Server-render content to provide more meaningful previews for OpenGraph

I'd like to try out Razzle for this.

What:

• List name of episode in OG tags when a season/episode is specified in URL

How:

• Set them dynamically in Episode.js, which will already be rendered thanks to SSR via Razzle

Add progressive web app

It would be awesome if mobile users could download the site as a progressive web app to use on-the-go more easily.

Something like this should make this feasible. However, this link uses another service worker for caching assets, while I'm currently using offline-plugin. Maybe the two can be more seamlessly merged?

Query data from api

To save on data, I'd like to leverage api.thegangpicksanepisode.com (from #23) instead of bundling the episode list

Caching results sounds difficult, but like a wonderful practice and learning opportunity

Add notable quotes

We could scrape quotes from the wiki and display inline somewhere, that would be rad

See #9

Missing video data for Season 6, Episode 14

Turns out that Season 6, Episode 14 is not listed in Sunny.

All we really need is the video ID, name, and description.

Host data on a separate server

Something like api.thegangpicksanepisode.com would be 🔥

Ideas:

• GraphQL ❤️
• Queries:
  • get_episodes(season?, writer?, lead?, guest?)
  • get_episode(season, episode)
• Types:
  • Episode
  • Season
  • Writer
  • Lead
  • Guest

Overhaul: Ditch json dump in favor of GraphQL and abstract to support multiple shows

This is a huge effort, but after falling in love with the show Letterkenny, I also want to support more shows here.

It's already pretty generic in data, just not in the backend. So, this would be a large scale project, but not a total rewrite.

---

Backend

This is where I really want things to change. Right now it's a single json file that's actually downloaded to the front end and then filtered. That's nasty as fuck, and I don't like it. It's way too excessive for most users, I suspect.

I'd like to improve this by serving content behind a GraphQL interface. Long term, I'd like this to be behind an AWS Lambda function querying DynamoDB tables and returning results to answer GraphQL queries. Short term, I'd port that json file to a lambda function which responds to GraphQL queries.

This allows us to be generic in data handling, so we can use a consistent schema for queries across any devices (web, mobile apps, tvos, etc) while downloading less data in total.

Web Frontend

This website's pretty ugly these days. I liked it then, but it hasn't aged well, users have had some complaints over the years. I don't know what I'd really change it to, other than I would use GraphQL to query for data instead of json and use CSS grid for layout.

Other Frontends

With the use of GraphQL (do you see what I'm getting at yet? This is a big deal), we could very easily port this frontend to other applications, such as mobile via react native, apple tv, command line... Lots of potential here.

---

Related: #26 , #24 , #31 , #29 , #23 , #18, #6, #5, #2, #1

Add Season 12

Season 12 is up on Hulu, so it would be great to watch and track data for it

iOS and Apple TV App

Would be awesome to get an iOS and Apple TV app out there for this!

Overhaul styling

• De-uglify the style ✨
• Make it mobile friendly 📱

Add ability to load specific episode with URL parameters

It would be great if users could specify which episode to load via URL, so they could point friends to specific episodes etc.

I.e., https://thegangpicksanepisode.com/?s=7&e=10 would load with the app focusing on Season 7: Episode 10, "How Mac Got Fat."

Add a search bar

I would love to be able to search for a specific episode title. You could also search the description for the keywords...

Improve Lighthouse Score

In it's current state, this is a measly 57/100. I know I can do far better than that!

This is an umbrella issue containing a checklist and links to relevant other issues.

Here are the current issues:

Progressive Web App

• First meaningful paint: 1106.8ms / 1600ms (99)
• Perceptual Speed Index: 1204 / 1250 (98)
• Time To Interactive (alpha): 1164.2ms / 5000ms (99)
• Contains some content when JavaScript is not enabled
  • The page body should render some content if its scripts are not available. Progressive enhancement means that everyone can access the basic content and functionality of a page in any browser, and those without certain browser features may receive a reduced but still functional experience.

Best Practices

• Using bytes efficiently
  • Uses 90% of its CSS rules: 6KB (~30ms) potential savings
  • Has optimized images
  • Has appropriately sized images
• Avoids old CSS flexbox
• Avoids <link> that delay first paint: 3 resources delayed first paint by 155ms
• Opens external anchors using rel="noopener"
• Background and foreground colors have a sufficient contrast ratio: 9 elements fail
  • #root > .App > .main > .controls > div:nth-of-type(2) > .theme__field___qDoJ_ > .theme__templateValue___NUF6W.theme__value___3DpnS > div > .item > strong
  • #root > .App > .main > .controls > div:nth-of-type(2) > .theme__field___qDoJ_ > .theme__templateValue___NUF6W.theme__value___3DpnS > div > .item > small
  • #root > .App > .main > .controls > .theme__button___1ikWq.theme__raised___2tddz.theme__primary___zkacG
  • #root > .App > .main > .controls > button:nth-of-type(2)
  • #root > .App > .main > .controls > button:nth-of-type(3)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(1)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(2)
  • #root > .App > .main > .episode > p:nth-of-type(2) > .dark > span:nth-of-type(3)
  • #root > .App > .main > .episode > .theme__button___1ikWq.theme__raised___2tddz.theme__primary___zkacG
• Every form element has a label: 1 element fails
• Manifest's short_name won't be truncated when displayed on homescreen
• Manifest's display property is set

Performance Metrics

• Critical Request Chains: 4
  • Longest request chain (shorter is better): 3
  • Longest chain duration (shorter is better): 1429.09ms
  • Longest chain transfer size (smaller is better): 95.07KB

Lighten background and adjust button margins

Users have mentioned that the yellow buttons feel a little too close to the character names or dropdown, so that should be given a little more space. It's especially apparent on mobile. Maybe simply increase md-button { margin-bottom }.

The dark grey background also gives the impression a popover is active or the site is not ready for user interaction. Lightening the background color could alleviate this issue.

Leaving Netflix; replace with links to Hulu

Well this blows. All of my favorite shows are off of netflix now. There goes my subscription.

Since they have stake in Hulu instead, we'll have to change links to point there. Thankfully all the data's been mined already, so all it'll take is just getting new URLs and cleaning up the now useless giant pile of netflix-specific data I never did take advantage of.

Source: https://netflixlife.com/2017/11/02/its-always-sunny-in-philadelphia-leaving-netflix-december/

---

Anyone can easily help on this one ; just pick a season and copy links to the episodes and paste them in a comment or something, if you stargazers ever check issues 😋 It's that simple this time around.

Selecting any episode should update URL

Should any selection be made, random or otherwise, the URL should be updated so the user can easily share this link.

Force columns to remain fixed-width

When searching for "ponderosa", you find results with large descriptions that widen the search column more than it should, which adversely affects the other two columns.

This should be fixed by preventing the columns from surpassing a max width.

Add more guest characters to season 12

Currently we're missing a lot of guest characters on Season 12. Really need to add the rest of these

Querying improper season, episode selection should display error and random episode

Should a season and episode combination not tie back to a real episode, a random episode should be selected and an error message should be shown on screen.

Something along the lines of...

if (season && episode) {
  this.state = {
    episode: getEpisodeDetails(season, episode)
  };
  if (this.state.episode === undefined) {
    // Display error
    // ...
    // Select random episode
    this.state.episode = getEpisodeDetails(season, episode);
  }
}

Change route schema

(Not sure if this should be called a "schema", but anyway)

Having the index/root page redirect to another "page" located at /season/episode is disruptive for development

May be better to redesign routing for purposes of /#/season/episode similar to how Spectacle uses /#/slide_number

Update serve

There are a few vulnerabilities around serve, and while they don't matter at all for this project, we should update serve and other dependencies.