
Show HN: A faster, minimal YouTube interface built on Angular.js and Foundation - mcrittenden
http://toogl.es/#/browse
======
mcrittenden
Code is on GitHub here: <https://github.com/mikecrittenden/toogles>

If you like it, there's a Chrome extension to redirect YouTube video pages to
Toogles here:
[https://chrome.google.com/webstore/detail/toogles/kljfdbkcac...](https://chrome.google.com/webstore/detail/toogles/kljfdbkcacjeogbiiiikahgkmmlgdekf)

~~~
hackerboos
Very nice.

Why did you choose Angular over competing frameworks? I'm researching which JS
framework I should invest my time in.

~~~
mcrittenden
Mostly just because Angular just feels the best to me out of all the
frameworks I've tried. I've built a few trivial apps in Backbone and Knockout
and some more complex stuff with Ember, and Angular just works the way my mind
works more than they do. I always feel like I know where everything needs to
go (with Ember I constantly felt like I was doing it wrong) and the thick
templating layer makes sense to me.

Sorry, I know that's not a very helpful answer.

~~~
aidos
I'll have to disagree with you, I think that's a useful answer :)

It's good to hear these things even if it's just anecdotal and unquantifiable.
I've only really worked with Ember and I feel the way you do. It's always
interesting information from someone with experience in multiple frameworks
(especially when they're all so young and we're all a bit lost as to which one
to build our next project on).

Nice webapp by the way!

------
l33tbro
Good work overall man. Some feedback:

1\. One of the things I dig on the Youtube interface is being able to see
immediately how long ago something was posted. As I (and many others) use YT
as a music streaming site, a recently posted video is generally a sign that
the sound quality is going to be better. Same goes for video actually. If it's
posted in the last few years, the quality is likely to be HD. I suggest when
you return a search result, you could place info on it when you hovered your
mouse over the video pane. As you do this, the video still disappears and we
get a series of specs on the video. I guess you could do this in your "upload
date" field, but it seems to be limited to this month at the moment.

2\. F __* the haters - I loved how you didn't include the comments section in
each video. I find no value in YT user comments. Whether someone is showing
love or spitting vitriol (let's admit, 90%), I have never really found it
added much to my user exp.

~~~
mcrittenden
Great idea about how long ago it was posted. I'll add that ASAP. Glad you like
it!

------
timdorr
Interesting choice of framework, given that the PS3's YouTube application is
built in AngularJS as well: [http://blog.angularjs.org/2012/08/your-excuse-to-
buy-playsta...](http://blog.angularjs.org/2012/08/your-excuse-to-buy-
playstation.html)

Did you find any advantages to using AngularJS, or was it just
coincidence/familiarity?

~~~
mortenjorck
Wow. This feels vastly faster and more responsive than the PS3 YouTube webapp,
perhaps by an order of magnitude.

~~~
jlgreco
Perhaps part of the difference is that the PS3 is actually fairly underpowered
by today's standards for general purpose computing (CPU intensive stuff,
unless specifically made with their architecture in mind.)

------
hnriot
This is a decent enough youtube front end, but I'm not seeing what the
framework does for you? The whole app is very trivial, using he gdata api is
simple javascript and the layout is again very simple. bootstrap and a few
hours of javascript would accomplish the same thing? If it had used isotope js
maybe to sort/filter the videos, or mayve vegas js for some interesting eye
candy, but what's the big deal here?

~~~
mcrittenden
Client side routing, infinite pager, auto-updating search results as
filters/sorts are changed, good client side templating with on the fly
updates, etc., are all made a lot easier by Angular.

If you're worried about page size then note that I'm not using jQuery or
anything besides Angular and Angular is only like 76KB. If I removed Angular
and put in jQuery and a few plugins then I'd be at roughly that same number,
and I'd need more custom code to go with it. So why not use Angular?

Or, if you're just wondering why this is worthy of the HN frontpage, then I
can't answer that. :)

~~~
hnriot
I wasn't wondering why this was front page on hn, I've long again tried not to
second guess what appeals to the masses. Just look at your own product's
trending for that. Who'd have thought that Maru's first snow encounter would
be youtube worthy!

I don't mind page size either, everything I've ever written has started out
including jquery. Anyone that argues that jquery is too big doesn't have a
clue what they are talking about (CDN's/Cache etc)

Having written dozens of web apps that use mustache, I totally get why you
like client side templates (json+mustache is completely awesome), bootstrap is
awesome.

My point was that with bootstrap, json, gdata, mustache etc the features you
mention are all straightforward, no Angular required. Nothing wrong with
AngularJS. No disrespect intended. I was just saying that I could have put
that together with the technologies I mentioned very easily and quickly with
all those features.

I liked it though, I wasn't trying to put down what you've done.

~~~
mcrittenden
> I liked it though, I wasn't trying to put down what you've done.

Thanks! No worries!

> My point was that with bootstrap, json, gdata, mustache etc the features you
> mention are all straightforward, no Angular required.

Sure, but I could just as easily turn that around and say with angular, all
these features are fairly straightforward, no jquery or bootstrap or mustache
requred, right? Why is one better than the other? Or if they're not, why bring
it up (serious question)?

------
sushi
I like it's clean and simple layout. Really nice work.

A little feedback: When someone is on video page, you have this icon
<http://d.pr/i/eOEE> to increase video size. It looks more like an "index of
categories" icon. I'd change that.

Also the left vertical bar to restore default layout, you are showing once
video is full size is not apparent enough. I'll experiment some other colors
or maybe a small "plus" like I did here <http://typezebra.com>.

~~~
mcrittenden
Hi again, just wanted to let you know I changed the way toggling the sidebar
works like you mentioned and I'd appreciate any feedback you have time to
give? <http://toogl.es/#/view/oFR4L6GegXA> is an example link.

~~~
sushi
Nice. It's far more noticeable now. Perhaps you can change the icon to a
smaller one when the video is full screen, just to indicate to user he is
going to make screen smaller after clicking it.

------
TranceMan
Fantastic, I love seeing these projects - minimal and functional - scratching
an itch :)

Also I had totally forgotten about <https://gdata.youtube.com/demo/index.html>
\- thanks for the reminder!

Nice work/code

~~~
mcrittenden
Thanks! Yeah, the gdata API and demo is pretty nice (and VERY fast). It's been
a joy to work with.

------
Puer
Interesting. I'm currently running Arch Linux on my Acer Aspire One 722-BZ197.
When I try and watch HD and fullscreen videos on YouTube that screen tears and
the audio and video get out of sync, but when I use toogl I'm able to watch in
720p fullscreen with no problems whatsoever. I know my poor video performance
can be largely blamed on poor graphics drivers, but I have found the new
YouTube layout to be fairly slow and bloaty, which definitely contributes to
the problem.

Great job. I've replaced the standard YouTube shortcut on chrome with a
shortcut to Toogles, and I fully intend to use it from here on out.

~~~
mcrittenden
I think the issues when watching YT maybe be due to YT still using Flash by
default unless you opt-in for HTML5 at <http://youtube.com/html5> ? I could be
mistaken there, but it seems like the embeds show HTML5 by default but the
main site still doesn't.

Anyways I'm super glad you like it, please give me a holler (contact info in
profile) if you have any feedback or annoying issues.

------
felipesabino
Nice work!

I am currently using this youtube extension for a more minimalistic version of
youtube

[https://chrome.google.com/webstore/detail/youtube-options-
fo...](https://chrome.google.com/webstore/detail/youtube-options-for-
googl/bdokagampppgbnjfdlkfpphniapiiifn)

There is a full version here, with some tweaks that the sandobx version can't
do

<https://spoi.com/software/yto/>

~~~
mcrittenden
Nice! Hadn't seen that one before.

------
dombili
This is great. I don't think I would go back to using YouTube's default layout
if I could somehow see my subscriptions on the homepage.

~~~
mcrittenden
Ah good point. Subscriptions _should_ be available at
[http://toogl.es/#/user/<yourusername>/subscriptions](http://toogl.es/#/user/<yourusername>/subscriptions)
but you're right that it would be nice for them to go on the homepage.

~~~
jschuur
That worked for me, although it also didn't include all the subscriptions.
Could that be a bug on your end, or are some channels somehow private and not
others?

What I'd really like is a quick way to dismiss some of the videos from my
subscriptions that I don't want to watch. That way I can come back again later
and see only the ones left. I realize this is really just a 'watch later'
playlist, but I'd prefer to remove things (permanently) from my main
subscription interface.

Great work so far though!

------
DeepDuh
One thing that drives me nuts about the new native interface is how it handles
subscriptions. I mean the feed you get is actually not that bad, but it's way
too cumbersome to get to see only your subscriptions.

Is it possible from youtube's API to authenticate a user and then access his
subscriptions (and maybe even the aggregated feed based on them)?

~~~
mcrittenden
Yup, that's possible. Adding authentication adds a ton of cool stuff I could
do, but it also makes the app significantly more complicated and I'm not sure
yet if I'm willing to go there. I'll think about it.

Pull requests are always welcome though! :)

------
nightpool
Pretty awesome! The one big feature I'm missing is comments (Not visible by
default, but maybe they could appear from a button at the bottom of the
description?) Also, it'd be nice if the time links worked (Some videos have
times in the description that help you navigate, especially on full album
uploads).

~~~
mcrittenden
I'm probably not going to integrate comments, but note that you can click the
name of the video you're viewing to go to the YouTube page for it if you
really want to see comments for it.

Would you mind linking to a video with a time in the description if you have
one handy that I can use for testing?

~~~
nightpool
<http://toogl.es/#/view/QR_rKSTM43I> is what I'm listening to right now.

~~~
mcrittenden
Awesome, thanks! I'll check it out.

~~~
dirkk0
Thanks for publishing this.

(listening to Solar Fields (and I bought this!):
<http://toogl.es/#/view/c_KuGgpqbes> )

~~~
mcrittenden
My pleasure, thanks for using it!

------
cantlin
I generally access YouTube by typing "yo" into Chrome's omnibar and hitting
tab to search. If like me you want to take this for a spin without installing
the Chrome Extension you can edit the search engines list in Chrome to replace
the search URL for youtube.com with

    
    
        http://toogl.es/#/search/%s

------
jackalope
This is great! I don't have Flash installed on my computer, so YouTube won't
show me half of its videos (unless I'm already in fullscreen and it shows up
as a thumbnail at the end, go figure). This lets me access every one in HTML5
without jumping through any hoops. Extra points for leaving out comments!

------
mikecane
I've discovered a big problem. I get different search results from your site
versus YouTube. One example, I searched for "Nook HD+" (with the quotes). I
get more videos at YouTube than your site shows. How is that even possible? Is
YouTube limiting what you can get from it?

EDIT for typo.

~~~
mcrittenden
You found a bug! Search on my site is ignoring the "+" (i.e., search for "Nook
HD" returns the exact same results which accounts for the difference) probably
because I forgot to urlencode the query. Will fix, thanks!

~~~
mikecane
Hitting "Upload Date" no longer reorders the video results from search.

~~~
mcrittenden
Really? Can you give me an example? Seems to be working OK for me.

~~~
mikecane
You know how you can do YouTube one better? Offer to remember Sort. I tend to
use several search terms every day. Having to manually sort each one is a real
PITA. If I'm searching for "Nook HD+" and sort This Month/Upload Date, I'd
like a checkbox that would keep that sort automagically for the next search
terms I enter. That YouTube doesn't offer that -- and saved searches -- is a
huge FAIL on their part.

~~~
mcrittenden
I've thought about this but my concern is that it might harm more than it
hurts. For example, I search for music albums sometimes and filter by "long
(20+ minutes)" for that, but the other 90% of the time when searching I don't
want it to keep that filter, so it would be more of a pain. Thoughts on that?

------
eterpstra
This is pretty cool! Not only is Angular my fav. js framework, but there are
no comments underneath the videos. Sometimes while watching a video on YouTube
I'll catch a glimpse of the user comments by accident and I'll feel dirty for
the rest of the day. Bravo, sir.

~~~
mcrittenden
Same. I've had a few requests to add in the comments and it's one thing I'm
standing firm on. :)

~~~
eterpstra
Side note: I would really like to see an infographic on the average number of
comments it takes for a thread on YouTube to degenerate into nothing but name
calling and racial slurs. Maybe separated by category, and adjusted for number
of views.

------
mikecane
That is damn wicked fast on my crap PC. Now I wish YouTube allowed us to use
skins. I'd use that!

------
krisc
The layout is nice and simple. My biggest complaints:

\- can't add to playlists

\- can't subscribe

\- can't browse through a channel's playlists

------
jlengrand
Really cool stuff. I think about using it instead of the usual one.

One thing though : when switching from video to video (by clicking links at
the end), the rest of the webpage doesn't update (at least on my computer).

~~~
mcrittenden
Yeah, that's because the player is just a plain old iframe embed. I'm planning
on adding related videos to the sidebar (as a hidden-by-default tab) which
will hopefully help.

~~~
jlengrand
I was expecting that kind of answer :). No problem ;), it still is really nice

------
przemoc
It's really slick YT front-end. You should also (unobtrusively) include your
TangleTube's [1] functionality in Toogles.

[1]: <http://tangletube.com/>

~~~
mcrittenden
Good find :) I've actually thought about that but haven't been able to work
out a way to do it unobtrusively. Any thoughts?

------
nslamberth
I love this.

Youtube's default homepage is so cluttered I usually jump to my subscriptions
immediately, with your framework I've actually been browsing youtube channels.
Never happened before.

~~~
mcrittenden
Thanks! I've actually experienced the same thing.

------
hinoglu
good job. adding recommendations would provide continuity. rating preview is a
good feature; i've always wondered why youtube does not provide it by default.

~~~
mcrittenden
Thanks. I was thinking of adding recommended videos as a tab (alongside an
"Info" tab) when viewing a video, so you don't see it by default but you can
click the tab to see them if you'd like. Does that implementation sound good
to you?

~~~
hinoglu
It seems fine. Sadly i don't have much sense on visual design, so as long as
the recommendations exist somewhere on page, it's fine for me :)

------
gawker
Beautiful! Thanks! I'm probably going to fork it at some time to add
something. I've been dreaming about this for a while.

~~~
mcrittenden
Please do.

------
genwin
Nice! I would actually use this to browse YouTube, whereas I don't browse YT
directly now due to its bad interface.

------
companyhen
Really nice, I really enjoy the design. I have been thinking of making
something semi-similar.

------
z3niMAGiNE
Blazingly fast. I promptly installed the Chrome extension. Thanks for your
hard work!

~~~
mcrittenden
Awesome, thanks! Let me know if anything bugs you about it.

------
zosegal
Love this. Would love it even more if there was a toggle for Night Mode
though.

------
interg12
Very fast. I would prefer bigger video squares and smaller text.

------
shaurz
It would be cool if you could log in and see your subscriptions.

~~~
mcrittenden
You can see your new subscribed videos without logging on by clicking the
"Subscriptions" tab on your user page.
[http://toogl.es/#/user/<yourusername>/subscriptions](http://toogl.es/#/user/<yourusername>/subscriptions)

I know this currently isn't discoverable and I'm working on that, but feel
free to try it out and let me know if it does what you're after.

~~~
shaurz
Thanks! Looks pretty good.

------
prezjordan
This is amazing. Any way you could integrate subscriptions?

~~~
mcrittenden
You can see your new subscribed videos without logging on by clicking the
"Subscriptions" tab on your user page.
[http://toogl.es/#/user/<yourusername>/subscriptions](http://toogl.es/#/user/<yourusername>/subscriptions)

I know this currently isn't discoverable and I'm working on that (and it's
also funky because it's on every user page, not just your own, but I'm trying
to avoid logins), but feel free to try it out and let me know if it does what
you're after.

~~~
prezjordan
Huh, neat. However, I use a google+ account to log in, so I'm not sure what my
"username" is exactly.

EDIT: Found it! <http://toogl.es/#/user/E8OXL41NDk4aZkvxSbJolg/subscriptions>
but there's nothing there

~~~
mcrittenden
> but there's nothing there

Do you have anything on <https://www.youtube.com/my_subscriptions> (i.e., new
subscription videos)? It just displays the "new" ones, not all of them, due to
a limitation in the YouTube gdata API.

~~~
prezjordan
<http://i.imgur.com/SwCPbYg.png>

------
flexie
Nice layout. The - mostly - flat design is very well done.

~~~
mcrittenden
This is pretty much all thanks to Foundation--it's really great.

------
thomasfl
You won me over. I'm definitely going to use angular.

------
darthhao
That's awesome! I really like that minimalist layout.

~~~
mcrittenden
Glad you like it!

------
zobzu
I like the UI. A lot faster than YT, too.

------
tharshan09
nice app. just quickly wanted to report a bug: on smaller resolution the
sidebar cannot be scrolled down.

------
ErikHuisman
It misses Youtube's autocomplete..

~~~
nirvanatikku
@mcrittenden -- here's some code for integrating YouTube autocomplete into the
webapp (feel free to pull the 'suggest' method from the library):
<http://tikku.com/jquery-jqtube-util#search_example_4>

~~~
mcrittenden
Awesome! I'll check this out. I've been missing the autocomplete too.

------
dhirajbajaj
awesome its really fast..only i expected to see duration in thumnail for
videos.

~~~
mcrittenden
Ah good point, can't believe I missed that. It's there now. Thanks!

------
level09
This is insanely fast, I'm getting tempted now to dig more into Node.js

~~~
mcrittenden
This actually doesn't use Node (or any server side code) at all--it's 100%
client side. It queries the YouTube gdata API using JSONP.

I'm a little surprised at how fast it is though--I think it's mostly due to
the fact that YouTube returns API requests really really quickly and Angular
does a good job of reacting quickly, plus I'm not using jQuery or anything
besides Angular that could slow things down.

~~~
lousy_sysadmin
I believe this consume huge amount of bandwidth on your side, mind sharing the
stats for the last 24 hour?

~~~
mcrittenden
Not sure what you mean? Why would it consume a lot of bandwidth? Videos and
images are streamed directly from YouTube and all of the API interaction
happens client side so it doesn't go through my server at all.

