LearnTreehouse Show Episode 12 – Flowplayer 5


writes on October 17, 2012

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Fokus, Flowplayer 5, and new fonts.

Here are the links for the week:


flowplayer 5

Cutting the Mustard

IE for Mac

Use VMs for testing.



Dom Monster


Source Code Pro

Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: And you’re watching The Treehouse Show, your weekly dose of internets
where we talk about all things web design, web development and more.

Jason: In this episode we’ll be taking a look at FOKUS using Internet
Explorer on your Mac and a nifty bookmarklet called DOM Monster.

Nick: Let’s check it out.

Jason: First up is FOKUS. Nick what do you think your favorite flavor of
ice cream is?

Nick: Jason let’s try to stay focused.

Jason: Sounds good.

Nick: It’s Neapolitan by the way.

Jason: Neapolitan?

Nick: Yes. And FOKUS is not spelled the way that you normally spell it.
It’s spelled FOKUS and it’s basically this nifty little piece of JavaScript
that you can include on your web page and when you go to highlight text, it
will actually black out the rest of the web page and only show you the
highlighted text. You could use this for a number of different reasons,
maybe if you’re building web-based presentation software and you want to
highlight something in particular or if you’re showing a web page and doing
it like in a presentation format and you want to just show a particular
piece of the web page it’s a really good way to do that.

Jason: I’m going to go with Cherry Garcia.

Nick: All right. Sounds good.

Jason: Next up, there is a new version of Flowplayer out. Flowplayer 5 uses
the video element to display videos in HTML 5. What’s new in Flowplayer?
Well it is responsive, which is something that we all talk about on this
show. I think a little bit too much. But Flowplayer is something that
people used a lot before. What was great about it is that if HTML 5 is
available, it will use that. If not, it can always fall back to using Flash
to display video. Probably the best part about the new Flowplayer is it’s
very minimal and also very easily skinnable, as well as being very easy to
use. So you can check that out at flowplayer.org and we’ll have a link to
that in the show notes, which you can check out on our Youtube channel.

Nick: Pretty nifty. Next up is this really cool blog post from the BBC
called “Cutting the mustard”. They’re website is Responsive News, but then
there is this post called “Cutting the mustard” which basically describes
this technique for progressive enhancement. Basically the post is resorting
to some old school methods that haven’t been used in I guess not quite some
time, but the author feels it’s like some people have generally forgotten
about them.

Jason: In this age of bandwidth gluttony.

Nick: That’s right.

Jason: We have to return to making our sites just a little bit more

Nick: So the author is describing this technique for just building the HTML
for the most basic experience possible and then adding JavaScript on top of
that as an enhancement.

Jason: Right and then I think he also mentioned using the native
implementations if the browser supports it rather than falling back to a
huge library that maybe doesn’t contain everything that you want.

Nick: It is really refreshing to see when you know there are so many
libraries that our getting pretty huge and you have to include so many of
them to build kind of a modern front end experience.

Jason: Exactly. Blog post worth reading?

Nick: It’s definitely worth reading. It is a little bit long, but we just
gave you the TLDR, so you can go ahead and read more if you like.

Jason: Awesome. Next up, over on the OS X Daily blog, there’s a really
awesome blog post on installing Internet Explorer for the Mac the easy way.
This is a way to run IE 7, 8 and 9 for free in a virtual machine.

Nick: Whoa! For free?

Jason: For free. Now this is actually an old blog post, but since we are
talking about you know progressive enhancement, it is kind of worth noting
that you can still do this. There are free images provided by Microsoft for
Windows with versions of IE 7, 8, and 9 on them and then this is just a
quick post detailing how to do that and use open source virtualization
software to get that all set up on your Mac. So check that out.

Nick: Pretty nifty. So next up is this really cool website at
WebPlatform.org. This is brand new, and it’s basically all new
documentation for the normal front end web stuff that you’d expect, like
HTML, CSS and more. This is all organized by the W3C and a number of other
big name companies. And it’s just basically really good documentation. It’s
kind of a community project. So at this stage it’s a little bit rough. I
looked at actually the header element in HTML 5 and there was hardly any
documentation there, but I would imagine all that stuff is going to get
filled out pretty quickly.

Jason: Yes they’re working on it. Right now it’s just basically an import
of content that was already on Microsoft sight, Google, Modzilla 6. They’re
goal is to have one centralized spot for knowledge about the latest
standards from you know a lot of the browser vendors that implement them.
So it looks like a really worthwhile project, so go ahead and get involved
with that if you can.

Nick: Very cool stuff.

Jason: Next up we have a piece of JavaScript called Keymaster. This is
really awesome. It’s a simple library for defining keys strokes in
JavaScript. This can actually be a really cumbersome thing to do when
writing web pages. So you get this one global method called Key, and you
can pass Key a string, and inside of that string you can abbreviate the
different key strokes that you want and then pass it to function and this
will go ahead and call that function every time that key is pressed. This
is very useful for abstracting away shortcut keys inside of your
application; and just having one common interface is very easy to do rather
than having to look up the key code all the time, although we did cover
what the key code on a previous episode.

Nick: That’s right. That tool where you can go ahead and look up key codes
really quickly and that’s helpful, but this is perhaps even more helpful.

Jason: We’re always one upping ourselves here on the Tree show here.

Nick: That’s right.

Jason: Or are we?

Nick: Next up is DOM Monster, which is a project from Thomas Fuchs and Amy

Jason: You sure you pronounced that name right?

Nick: I’m pretty sure I pronounced it just right. Thanks, Jason. Basically
it’s just a little bookmarklet.

Jason: Scary.

Nick: That you can grab and put into your bookmarks tool bar and of course
yes, has this scary little monster there.

Jason: Really scary.

Nick: So we’re going to go ahead and bring up the bookmarks tool bar and
hit DOM monster and bam!

Jason: Bam!

Nick: We have this little console, and it tells us basically some
diagnostic information about the web page, and it gives us some tips for
improving front end performance. So in this particular case for the DOM
monster page, it says “reduce the number of tags that use style attributes.
There are 199 bytes of inline JavaScript code” which is actually not much
at all. But you know, really pretty handy and it’s super important to get
front end performances as fast as possible, especially in this age of
mobile devices.

Jason: Agreed. I like the icon even though it scares me a little bit.

Nick: It’s just in time for Halloween .

Jason: So next up we’re going to be talking about compass.app. In another
episode we talked about compass which is a little framework for generating
and working with CSS. One of our members pointed out Compass.app which is
an app for working with Compass. And so what this will do, is it will give
you a little interface for working with Compass and then it will
automatically update inside of your browser, and just kind of compile
everything as it needs to be compiled. This is a 10 dollar application, but
30% of the proceeds go to charity. So check that out at

Nick: That is a pretty nifty feature because often times when you’re
developing with you know tools like compass or SAAS, you’ll have to go
ahead and refresh the browser constantly.

Jason: Right.

Nick: That’s a big you know back and forth. So it’s pretty cool that you
can see those results as they’re developing.

Jason: Definitely worth 10 dollars.

Nick: Very cool.

Jason: Not sponsoring the show.

Nick: Shame on them.

Jason: Just to make that clear. Yeah.

Nick: Next up is this really cool font from Adobe called Source Code Pro,
and there’s not a whole lot to say about this. There’s a pretty nifty blog
post where they talk all about the advantages of using Source Code Pro over
other fonts in any text setter, but you know it’s just a new font that is
worth trying out. I think it looks pretty nice. It looks like it’s a little
bit more proportionally spaced, but also you know mono spaced at the same
time, which is what you want for coding. So pretty cool. I like it.

Jason: It’s nice. I like their color scheme.

Nick: Yes.

Jason: You know your choice of source code font is a very personal choice.
So try this out. If it doesn’t work out you don’t have to keep using it.

Nick: It is a very personal choice because it’s going to be something that
your working with all the time. So..

Jason: Yes.

Nick: Allright, well I think that about wraps things up for this episode of
the Treehouse Show. Jason did we learn anything today?

Jason: Not really.

Nick: No?

Jason: No. We learned that there are some pretty interesting tools for
working with Compass and DOM monster. That’s pretty neat.

Nick: Alright.

Jason: Other than that I learned practically nothing.

Nick: You learned my favorite flavor of ice cream.

Jason: That’s true. That’s very important.

Nick: And you were thinking Cherry Garcia?

Jason: Yes.

Nick: All right.

Jason: Yes I am.

Nick: Got it.

Jason: So thanks so much for watching this episode of the Treehouse Show.
For show notes and more check in our youtube channel at

Nick: And if you’d like to follow us on Twitter. I’m at nickrp.

Jason: And I’m at jseifer.

Nick: And of course if you’d like to watch more educational videos like
this one, you can check us out at teamtreehouse.com. Thanks for watching.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop