codenameyau / explorer

Rediscover YouTube

About Me

Nice to meet you! My name is Jorge. I'm from NYC.

I'm a software engineer with 10+ years of professional software engineering experience and 3+ year of engineering management experience.

In my freetime you can find me tinkering with bots, game development, generative AI, procedural generation, IT security, software-defined radio, raspberry pi, and grooming my ever growing list of startup ideas.

Outside of tech, I enjoy swimming, biking, eating out, hiking, and immersing in nature. When I'm not outside you can find me fiddling with 3D puzzles, collecting coins and comic books, and creating my own board games.

explorer's Issues

Use a wider date range when searching

More utility and better results. I'm thinking a 2 week range is good. Play around with it.

Autocomplete design

This includes dom manipulation and js css. Ideally I would like to create the dom elements and style the css in javascript so I can make the library reusable.

Replace urlencoded %20 with plus signs

Convert for readability:

/results?search_query=taylor%20swift
/results?search_query=taylor+swift

Google Analytics

To see how the site is doing.

Personalize search results on the homepage based on language regions

To bolster engagement for international users.

Autocomplete suggestions debounce delay on input

Make this feature customizable as well by making it a property.

Proposal to rename project

The website is focused around instant search, trending hash tags, and infinite scroll.

Proposals:

• Youtube Explorer
• HashTube
• Trend

Auto-complete search

Demo and tutorial

• http://codepen.io/tayfunerbilen/pen/rIHvD
• http://shreyaschand.com/blog/2013/01/03/google-autocomplete-api/

Bring up hamburger menu for mobile

We might need some font-awesome for hamburgers.

Revert design

There's something very elegant about the old design that gives a clear message about the site.

Create config file

The config file should contain the following:

• debug settings
• cache settings
• port settings

Display total results after search

As part of the JSON dump, this stat is returned and is potentiall useful.

 "pageInfo": {
  "totalResults": 1000000,
  "resultsPerPage": 4
 },

HD toggle

Add it somewhere conspicuous like near the logo. Add support in the API.

Weighted publishedAfter and publishedBefore dates

As it stands dates are uniformly chosen. I'd like to weigh it as a negative skew distribution.

Add date for search exploration results

This may require removing the social media links. They don't really add value in the first place.

Replace image and captions with figure

More semantic meaning for the HTML.

Update search request to use JSONP

Perform this if the tiny server is overwhelmed with requests. The drawback is that you'll need to expose an API key. Keep the backend API proxy so it can be referenced in the future.

Youtube search result icon is not properly set on load

For example, visit blue+ufo and the youtube button will only link to youtube.

Order by viewCount and/or relevance

Right now I'm supported a random parameter upon search.

At the start, randomly set the order to either relevance or viewCount. When searching for videos, only use relevance.

Remove tab index

Tab index indicates the tab order at which the tab key navigates.

Card layout design

Cards might be an interesting design alternatives. Right now it's hard to keep focus on so many videos in the search results. I might want to expand their size.

They should include likes, comment counts, and views.

Create a jquery-free version of suggestions.js

Would love to open source both libraries.

Check user's history

Give the option for a user to sign in to access their viewing history.

Explore advanced search filters

Very interesting parameters that might require a revisit to the UI:

• location
• locationRadius
• order (date, rating, relevance, viewCount)
• videoDuration

Scroll event won't occur on insufficient results

If the scrollbar doesn't show up, scroll won't occur. Should be fixed in skully.js.

Simplest solution, load 24 videos at the start. Doesn't fix the bug, but idc.

Automatically adjust size while viewing embedded videos

Since fullscreen mode is locked, I'll have to get creative.

Docker container

This is a good opportunity to create a single docker image. Call the container:

codenameyau/youtube-explorer

Make the site more discoverable

To promote engagement, change up the type of videos that are displayed for maximum chaos.

Seamless infinite scroll

The goal is to activate infinite scroll before the user reaches the bottom of the screen, say 300px. You'll need to work with the prevPageToken and nextPageToken to get the logic right.

Fix the margins for the search results

There is an unwanted and unprofessional padding. Fix the css.

Result titles should link to actual video

To provide a shortcut for viewing video on youtube.

Random url to start with google trends

Instead of loading the same default videos, load something more interesting.

New Idea
Use twitter's API and take the top trending hashtags and use that as the search term seed. Randomize it a bit shuffling the categories that uses see--news, music, sports, etc.

Add social media icons

YouTube -> Links to youtube share.
GitHub -> Links to the project repo.

Hint text when hovering over the publication date

Copy:

Everytime you refresh the page, we'll send you on a fun date to explore YouTube's top hits published on that day.

Add gulpfile with full pipeline

The biggest value that gulp would bring is autoprefixing. Nonetheless, let's include it anyways.

Update title in search results

For browser state history.

Add likes and dislikes preview for video result

Might be an interesting problem to tackle since I need to make a request everytime I want to fetch the likes and dislikes for a video result.

Update url to reflect search

Use a query parameter.

/results?search_query=taylor+swift

Update navigation bar with new design

The current design looks bland and would be unsuitable for marketing value. There should be:

• a link to the logo
• a search bar for the input field
• link to the about page
• link to youtube
• link to github

Update with a new design.

Implement infinite scroll

Enable infinite scroll and queue the next 9 videos. Once the bottom of the screen is reached, display those 9 videos and queue up again.

Tweak published dates for full day since midnight

Right now the 24 hour range is based on the current time so if it's Jan 3, 2011 11:30PM,

Then published videos will appear from Jan 3, 2011 11:30PM to Jan 4, 2011 11:30PM.

Change it so this range is sent instead: Jan 3, 2011 12:00AM to Jan 4, 2011 12:00AM.

Open iFrame to embeded video on click

When clicking on the link, load the iFrame instead of opening a new window.

Change grid from 3 cols to 4 cols

This makes the website dramatically more useful and pretty.

Fix search input text indent and padding

Clicking on video label multiple times creates multiple embeds

Related to #8.

Only display suggestions when selector input is in focus

#2, the divs are currently appended after the input. The goal is to make it a fixed position only appears if the input is in focus. Hovering over an item should prepopulate the input.

Search result JSON dump

{
 "kind": "youtube#searchListResponse",
 "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/MdCFp9dKC-o-4Ayl77I90nB3wvE\"",
 "nextPageToken": "CAQQAA",
 "pageInfo": {
  "totalResults": 1000000,
  "resultsPerPage": 4
 },
 "items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/pmieHairXjy5K34Z1SZ_1GwCtyk\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "lggj_xMhNzA"
   },
   "snippet": {
    "publishedAt": "2015-11-08T19:04:02.000Z",
    "channelId": "UChqUTb7kYRX8-EiaN3XFrSQ",
    "title": "After Iran feud, Obama and Netanyahu turn to Israel's aid wish list",
    "description": "Subscribe: http://smarturl.it/reuterssubscribe Hours before his departure to Washington, Israeli Prime Minister Benjamin Netanyahu says he will discuss ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/lggj_xMhNzA/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/lggj_xMhNzA/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/lggj_xMhNzA/hqdefault.jpg"
     }
    },
    "channelTitle": "ReutersVideo",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/o2I8wRWpIoXc1lA30FYciRtsqDY\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "0odSiR-Zbq8"
   },
   "snippet": {
    "publishedAt": "2015-11-09T04:01:11.000Z",
    "channelId": "UClu2e7S8atp6tG2galK9hgg",
    "title": "WWE 2K16 Celebrity Deathmatch Tournament :: Bob Ross vs Barrack Obama",
    "description": "WWE 2K16 Celebrity Deathmatch! Inspired by your comments, I am going to try a creative approach to WWE 2K16. Let me know what you think and are you ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/0odSiR-Zbq8/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/0odSiR-Zbq8/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/0odSiR-Zbq8/hqdefault.jpg"
     }
    },
    "channelTitle": "BdoubleO100",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/CcnNr9_33egu_DxjoawymLSfF4k\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "bI4L7N_W1BI"
   },
   "snippet": {
    "publishedAt": "2015-11-03T06:32:37.000Z",
    "channelId": "UCulzbDBXyr2xSRP2O3wt73w",
    "title": "Full Video - President Barack Obama Mocking Republicans - Obama Rips Into 2016 GOP Field -CNBC",
    "description": "President Barack Obama mocks the GOP candidates for demanding debate changes. “If you can't handle those guys, then I don't think the Chinese and ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/bI4L7N_W1BI/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/bI4L7N_W1BI/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/bI4L7N_W1BI/hqdefault.jpg"
     }
    },
    "channelTitle": "",
    "liveBroadcastContent": "none"
   }
  },
  {
   "kind": "youtube#searchResult",
   "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/Il1W_Mevwty1c0SBrbsVkCH0k04\"",
   "id": {
    "kind": "youtube#video",
    "videoId": "L88H2HWEXrw"
   },
   "snippet": {
    "publishedAt": "2015-07-22T03:49:49.000Z",
    "channelId": "UCUsN5ZwHx2kILm84-jPDeXw",
    "title": "The Daily Show - Exclusive - Barack Obama Extended Interview",
    "description": "Reflecting on his two-term presidency, Barack Obama looks back at his accomplishments and also shares his opinions on the role of government. * Watch this ...",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/L88H2HWEXrw/default.jpg"
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/L88H2HWEXrw/mqdefault.jpg"
     },
     "high": {
      "url": "https://i.ytimg.com/vi/L88H2HWEXrw/hqdefault.jpg"
     }
    },
    "channelTitle": "comedycentral",
    "liveBroadcastContent": "none"
   }
  }
 ]
}

Replace swig with Nunjucks

It might be work exploring other templating languages or better yet use raw html for templating.

Function to truncate text

Truncate the text to 60 characters. Also move other util functions into utils.js

Add favicon

Excellent Resource
https://www.iconfinder.com/search/?q=video