In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about magical navigation, writing markdown, automatic retina images, and more.
Here are the links mentioned in this week’s episode:
Automatic Conditional Retina Images
Nick: I’m Nick Pettit.
Jason: I’m Jason Seifer, and you’re watching the Treehouse show. You’re
weekly dose of internets where we talk about all things web design, web
development and more.
Nick: In this episode we’ll talking about magical naviagation. Keeping an
eye on your system. As well as the usual discussion of everything that’s
new with responsive design techniques.
Jason: Well, let’s check it out!
Nick: First up with MagicNav.js,which is a Jquery plugin for generating
navigation links on your web page. It’s available on johnpolacek, is that
how you pronounce it Jason?
Nick: Polacek.com/magicnav.js, and basically, if you just run magicnav.js,
it will take all of those first level headlines and turn them into links
that you can click on. Then smoothly scroll down to other parts of the
page. It’s pretty easy to use. You just select your H1 elements there. Then
you say what the ID of the element should be that you want to put inside.
Pretty handy. It has a very specific use case. I think, it could come in
handy in a few places.
Jason: I’m a big fan of anything that saves me from having to do a lot of
typing. Which that definitely does.
Nick: Very true.
Jason: But if you are coding your sites symantically, then that could be a
really, really big help.
Nick: That’s true as well.
Jason: Next up we are going to be talking about glances. Glances is a
little python application for the command lines. This is a little more
developer related. This let’s you keep an eye on different aspects of
what’s going on with your system. By your system, I mean, your computer.
The thing you’re developing with.
Nick: Thank you for clarifying that.
Jason: No problem. I figure of all the things I would clarify would be, it
would be your system is. This is going to let take a look at things like
CPU load, network load, and how much memory different applications are
taking up. It’s a command line application, so it’s easy. Just go ahead and
run Glances. If you want to take a look at the code for it, it’s developed
in Python. Shows your disk IO, what volumes you have mounted as well as
what all your CPUs are doing. Go ahead and check that out
Nick: Well done.
Jason: No problem.
Nick: All right. Next up is slab text and this a another Jquery plug-in
that’s handy for creating responsive designs. This is actually similar to
[inaudible 00:02:43] fit text J query plug in, except it uses what’s called
a slab type algorithm. You can have multi-line headlines instead of just a
single line of text that fits into a responsive design. If I were to resize
this browser, it would actually re-flow this headline and it would all be
spaced proportionately. This is pretty handy because so many headlines are
multi-lined and you want them to be really big and take up the whole page
no matter what size the device is. Fit text did a pretty good job of that
but this takes that one step further.
Jason: You know where this would be really useful, Nick is displaying
tweets. Full screen on web pages.
Nick: So, just 140 characters across a 27″ screen.
Jason: One single tweet.
Nick: Jason, you’re always thinking practically.
Jason: Well, you know. So Nick, it’s time for our app review.
Nick: Let’s check it out!
Jason: Nick, how often do you write Markdown?
Nick: All the time, actually.
Jason: All the time. Well, I have a tool for you. It’s called Marked. You
can get it at markedapp.com. This is a markdown program that is going to
display the markdown that you’re writing in another application. Most
people prefer to write markdown or anything like that in a text editor.
What this will do is anytime you save a file it’s going to go ahead and
redisplay it in another window, with all the formatting in tact. The thing
that’s really nice about this program is that it has different style sheets
that you can output. So you can have book style, different text, you can
even do custom style sheets and it will either export to HTML or PDF for
you. Have a little demo here if you want to see it. I’ve got TextMate 2,
over on the left and marked over on the side and you can see as I’m writing
things they show up on the right side and marked as soon as I press the
save button. A great app, it is a paid app. They are unfortunately not
sponsoring this show.
A and Jason: Shame on them.
Jason: Wow! That was awesome! That is available in the app store or at
Nick: That’s pretty cool. What are you thinking, Jason?
Jason: I’m glad you asked that Nick. I’m thinking async these days. What
I’m actually referencing strangely enough is how I’m thinking but an
article by Chris Coyier, over on the CSS tricks website on “Thinking
Async”. In this article he’s talking about when you load java script from
third party website you do it asynchronisly[SP]. What this is going to do
is going to do is if there is some hold up on another website it’s not
going to impact the load time of your own site. There are a few different
techniques and a few different approaches for how to do this. In this
article which is definitely, definitely worth reading, it tells you a few
different ways to go through it and you can figure out your preferred
method. This is something you’re going to really want to keep in mind these
days as sites load more and more external java script for different plug
ins. You know, anything you need, like buttons, tweet this buttons, share
buttons, email everybody you have ever met buttons and who even knows
Nick: That’s a lot of stuff to load in. That will definitely help.
Jason: You want to have all those buttons on your site.
Nick: Most definitely. The more buttons the better.
Jason: That is a great technique.
Nick: Terrible advice. All right, next up is typeicons or type icons. We
could quite figure out how to pronounce this but basically it’s at
Jason: What are typeicons, Nick?
Nick: Jason, I’m so glad you asked. Typeicons are basically a vector based
web font kit, that you can go ahead and imbed in your webapp or your native
iphone or android application. It will allow you to use a font to display
icons. This is pretty handy because that means you don’t have to include a
whole bunch of different assets for all these tiny different icons. You can
just go ahead and just throw in one font and then you have access to this
whole nice consistent icon set. The thing is it’s a little bit limited in
scope, but I think it has all the basic things that you might need. The
nice thing about it being a font is that it is vector based, so it’s ready
for all those fancy new retina displays.
Jason: That’s awesome.
Nick: It is pretty awesome.
Jason: I wish they would include some sort of pronunciation on the site.
Nick: I think that’s the only thing that’s missing, really.
Jason: Next up, we talk about retina displays and ways of displaying retina
images all the time. We’ve gone over plug ins that allow you to display
graphics specifically for retina displays in java script. Recently came
across a blog post by Shaun Inman, on how to do this automatically and
conditionally. His approach to this is pretty neat. He says as soon as a
retina enabled device comes to your website, what you’re going to want to
do is set a cookie using java script saying that the device is a retina
device. From there, on your web server you’re going to use conditional re-
write rules to automatically redirect the browers to that specific retina
image as soon as they load the page after that initial request. This is a
really interesting approach that I think has a lot of credit for picking
up. Similar in nature to keeping all of your retnified [SP] images in a
certain directory and using convention to serve them, but definitely want
to keep an eye on them.
Nick: Pretty nifty. Next up is SneakPeekIt. Available at sneekpeekit.com.
If you’re feeling like a hipster, these are sheets of paper that you can go
ahead and print out and then have something to actually have physically to
draw your mockups on.
Nick: I know that’s a novel concept.
Jason: What year is it?
Nick: I feel like I’m transported back to the 90’s here. A lot of web
designers these days use digital tools to mockup their websites. They might
do it in Illustrator, Photoshop or Fireworks or various Adobe apps. There’s
also apps that are specifically for mocking things up like Balsamic
mockups. That’s one of my favorites. There’s also web based tools like
Mockingbird. There’s a whole bunch of stuff to check out there. If you
would like to take out a pencil and paper. Sneakpeekit provides great
downloadable PDFs that you can go ahead and print out and just draw your
website right on there. They have all the nice measurements for a grid
based layout. You can go ahead and do stuff for the ipad and more. Pretty
Jason: I wonder, do they include guidelines for typewriters on there, as
Nick: I think so Jason. I think there are guidelines for typewriters on
there just for you.
Jason: All right. Next up there’s another Jquery plugin called J query
picture. This is a plug in that is to “help ease the design and transition
towards responsive images”. This is going to use the new figure and picture
tags and give you a little snipit of Jquery java script you can just use
for figures that are responsive, call this picture method. If you have
provided the different sizes, it will display the different pictures when
you resize your browser with the different media queries. Pretty simple
plugin. Weighs in at 2 kilobytes, so you have literally no reason not to
use it unless it doesn’t make sense for your project.
Nick: Pretty nifty.
Jason: Yeah. Nice plug-in.
Nick: Well Jason, what did we learn today?
Jason: We learned that responsive design and retina images are still a
thing that we have to look out for on the web.
Nick: I think they are here to stay.
Jason: At least for a little while.
Nick: Just a little bit. You can find us on Twitter. I’m @nickrp.
Jason: I’m @JSeifer. Thanks so much for tuning into this episode of the
Treehouse show. For show notes and more, check out our YTube channel at
Nick: This episode was brought to you by Treehouse. The best way to learn
web design, web development, mobile business and more. You can check us out
Thanks so much for watching and we’ll see you next week.