LearnNative Feeling HTML5 Mobile Apps | Treehouse Show Ep. 21


writes on December 18, 2012

In this episode of the Treehouse Show, Jason Seifer and Jim Hoskins talk about achieving a native feel for your HTML5 mobile apps, which fonts to use for mobile apps, the new Hammer for Mac, and CSS smells.

Here are the links from this week’s episode:








Video Transcript

Jim: Hi, I’m Jim Hoskins

Jason: I’m Jason Seifer.

Jim: You’re watching The Treehouse Show. Your weekly dose of internets.
Where we talk about all things web design, web development, and

Jason: In this episode we’ll be talking about making your website
ready for Internet Explorer 10, mobile fonts, as well as CSS
code smells. Nick Pettit is out this week due to a bizarre
gardening accident.

Jim: So everybody talks about making mobile apps in HTML5 but how do you
really make it feel native, especially on iOS.

Jason: I have no idea.

Jim: Well, we have the anatomy of making a native feeling iOS app using
HTML5 right here on Justin Vincent’s blog.

Jason: Thanks, Justin!

Jim: It’s actually really cool, it’s not a lot of real technical stuff as
far as code wise, but it takes an app that he made and it shows
the various components he used to make it feel like a native
app. For instance, wrapping the HTML in phonegap to get rid of
the browser, Chrome. As well as some of the frameworks he used
and some of the techniques. Like using font-face for some nice
fonts, CSS3 calculations and animations, and a lot of other cool
techniques. So it goes through some of the screens and points
out the techniques that we used to make it feel really native,
make it look really good, and be very responsive.
It’s really cool to check out, kind of some things that you may not
remember when trying to build an HTML5 app for an iOS device.

Jason: What’s interesting is we talked about a project called
fastclick on the last Treehouse Show and there’s an equivalent
of that built into one of the JavaScript frameworks that he uses
in his application.

Jim: It’s pretty cool. It’s pretty common techniques to fill so a lot of
different mobile frameworks implement that type of behavior.
It’s really important to do, because otherwise it feels really

Jason: Shameless plug: go watch all of our previous episodes of The
Treehouse Show. Next up, time’s are changing in the land of web
design and web development. There is a blog post over on the
amazedsaints #techjournal, “Changing Times for Web Developers–6
Tips That You Should Read to Survive”. The first tip, learn to
write better JavaScript and CSS. I think maybe learning to build
a fire would be a pretty good tip to survive, but I digress.
Learn to write better JavaScript and CSS, that’s always
something that you’re going to be needing to do in these
changing times of web development. Familiarize yourself with a
responsive framework. This is also a very good idea. responsive
is something that we talk about probably a little bit too much
on this show. Another tip, he says, is to learn the most useful
JavaScript MVC frameworks and he has a list of six of them on
here. You can also check out TodoMVC for examples of building
applications in all of these frameworks. Then, as well, the
usual, understand REST and HTTP and understand HTML5 beyond the
buzzword, and finally, optimize. For more information on all of
those things you can find the link to that in our show notes at

Jim: So the short version of it is just keep learning everything?

Jason: Yep, stay sharp.

Jim: Stay sharp. Well, I know a site that can keep you real sharp on all
the latest web design and web developments techniques.

Jason: What site is that?

Jim: I believe it’s called teamtreehouse.com. Pretty cool site.

Jason: ‘ll have to check that out, never heard of it.

Jim: So, you’ve heard of IE, Internet Explorer?

Jason: I have.

Jim: Remember when we always would develop for it and it was like, “This
site only works in IE”?

Jason: That’s what I refer to as the good old days.

Jim: Well, the good old days are gone and now sites don’t work in IE, and
here’s a nice blog, on the Windows blog, on how to make your
WebKit optimized sites work from Internet Explorer 10. Because
now we’re all so hopelessly dependent on the WebKit browser
prefixes that all of the sudden we don’t have browser standards
anymore and WebKit’s the new IE, or so they say. It’s actually a
pretty good outline. Most of the tips are pretty common advice,
it starts off pretty strong by including the standard CSS in
addition to the WebKit prefix CSS because, for some of the items
Internet Explorer only supports the standard webKit prefix. But
there are some other ones as well. A lot of them are pretty new
to me, I haven’t really developed for Internet Explorer so there
are some things that are just like, “I did not know you had to
do that.” For instance, the touch events, Microsoft implemented
their own instead of touch starts like MS tap down. So there’s a
lot more branching code the you have to do but there’s a lot of
different tables from the WebKit way of doing it to how to fix
it to do both WebKit and Internet Explorer based interactions.
so, if you are looking to make your website work really well in
Internet Explorer 10 and you want to optimize made for touch on
the surface tablets this is a really good resource to check out
because it goes over everything.

Jason: This would also be a great resource to check out if you’re
going to build a library that abstracted this all the way for

Jim: Ah, that’d be nice.

Jason: Wouldn’t it?

Jim: Hopefully on the next episode of Treehouse…

Jason: Yeah. Next up is our app review. Our app review this week is an
app called Hammer. Hammer is a paid application, but this is a
web development tool for web designers and web developers. This
lets you build out static HTML sites really quickly. You don’t
have to worry about any server site scripting languages, and it
supports all of the different things that you’re possibly used
to like SAS, HTML includes, paths, CoffeeScript, and a bunch of
things like that. It’s very simple to use. Here is a demo of it
right up here. I created a project and it shows you all of the
different little assets that you have inside of the project. In
one click you can launch it inside of your text editor and you
get access to the output inside of the build directory. Then,
you can even break it up into different includes for your
header, footer, navigation, pretty much anything that you need
inside of your project. You can find this application over at
hammerformac.com. Worth noting, Hammer is not sponsoring this
show, shame on them, but it’s still a pretty cool application.
Especially useful if you’re getting started on building a new
static website.

Jim: That’s pretty cool. So, speaking of editors, colors are very
important in your editor because you are looking at that thing
all day, right?

Jason: Like, for syntax highlighting.

Jim: Yeah, and you don’t want to have to go around and find all those
different themes, what if they’re all in one place?

Jason: That would make my day.

Jim: Color Schemes, this project has a whole bunch of them I haven’t even
counted them.

Jason: Consider my day made.

Jim: I just keep scrolling and there are so many themes.

Jason: There are really nice looking.

Jim: They are some very nice themes. Different light ones, dark ones…

Jason: Maybe your feeling like grunge today, maybe you want a grungy,
green theme.

Jim: Something more futuristic maybe?

Jason: Maybe you want something darker and orange. They’ve got that.

Jim: You’ve got, pretty much a theme for every time of day, every mood,
and every piece of code that you have.

Jason: 1:30 p.m. on a Tuesday, use the Earth Song theme. Why not.

Jim: That’s good feng shui or good energy at 1:37, right?

Jason: Yeah.

Jim: So these are compatible when Sublime Text 2, TextMate, as well as vim
are added in there for all the color schemes so it’s a good set
of schemes to check out. You can install them all and just
switch them till your heart’s content.

Jason: Very nice. Next up we have project called EpicEditor and its
name is actually pretty correct. This is an embeddable
JavaScript markdown editor. So if you are needing to write
markdown, which I personally find that user enjoy more than
using one of those WYSIWYG editors. It gives you some formatting
options, you can give it a preview, click right back to edit,
and it’s nice. You can actually go full screen, you know. Say
I’m writing markdown, and you’ll request full screen privileges
if you have to, then you can actually get a preview on the right
while you’re writing your markup on the left. Kind of neat, I
like it.

Jim: That is really cool. I love markdown. I prefer that way of writing
anything. My blog, really just anything I write I write in
markdown first and then I convert it.

Jason: Checks.

Jim: Checks, yeah, I always have little asterisk around my name to make it

Jason: There you go.

Jim: OK, so, on mobile devices guess which font is supported across iOS,
Android, and Windows Phone 7.

Jason: Hellvetica. Comic sans. Papyrus.

Jim: Well, according to Tiny Type, nothing.

Jason: Nothing? That’s terrible news.

Jim: So, Tiny Type is that compatibility table or, rather, incompatibility
table for built in fonts on mobile platforms. There’s a lot of
research done in here as to which fonts are built into which
platform and Android looks pretty sparse. Look like only four of
them. Even beyond that there is no single font that spans across
all three. But if you want to know which fonts are available on
iOS, Android, or Windows Phone 7, Tiny Type is a great table to
look at and he’s trying to keep it up to date so people are
submitting updates if the information is incorrect. Pretty good
research to check out if you just need to know what fonts are
available where.

Jason: That’s both awesome and kind of concerning all at the same

Jim: Font’s are important.

Jason: Yes. Thanks for putting that together. So, finally we have an
article called Code Smells in CSS. Very often, when you’re
learning to program or code in any different language it can be
as useful to learn from the things that you are not supposed to
do as much as from what you’re supposed to do. So there is a
great blog post here by Harry Roberts on different code smells
that you might encounter when writing CSS. He goes through and
he breaks down certain things that you may not want to be doing
and then show how you probably do want to do it. Now, this is a
really long article so we’re not going to go into everything on
here, but it’s definitely worth the read. You’ll probably find
some things that maybe you were doing that you probably
shouldn’t. So yeah, check that out, we’ll have that link in the
show notes as well. And that’s about all we’ve got for this
episode. Jim, who are you on twitter?

Jim: I am jimrhoskins on twitter.

Jason: I am jseifer. Thanks so much for tuning in to this episode of
The Treehouse Show, for more information on anything we’ve
talked about you can check out our show notes at

Jim: This episode is brought to you by Treehouse, the best way to learn
how to design and develop for the mobile and web. Check us out a

Jason: We’ll see you next time. If you’d like to see more advanced
videos and tutorials like this one, go to teamtreehouse.com and
start learning for free.

To watch more videos like this, go to http://trhou.se/start-free-yt
And don’t forget to subscribe on Youtube: http://trhou.se/subscribe-treehouse-yt

Connect with Treehouse!
Website: http://www.teamtreehouse.com
Twitter: http://trhou.se/treehouse-twitter
Facebook: http://trhou.se/treehouse-facebook
Google+: http://trhou.se/treehouse-google-plus

Each week, we’ll release:

– New episodes of ‘The Treehouse Show’ – up to date news and tips on web design, coding, and more.
– ‘Quick Tip’ videos – these are short how-to videos on today’s most relevant web technologies.
– and much more!


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