Treehouse
writes on March 26, 2013
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about SVGs, Dropdowns, and HTML5 Form Elements.
Here are the links for the week:
SPOILER ALERT!
http://joshbuddy.github.com/spoiler-alert/
svg.js – A lightweight JavaScript library for manipulating and animating svg
http://www.svgjs.com/
Breaking down Amazon’s mega dropdown – Ben Kamens
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
How to lose weight (in the browser)
http://browserdiet.com/
Preboot
http://getpreboot.com/
HTML5 forms input types | HTML5 Doctor
http://html5doctor.com/html5-forms-input-types/
Genericons – a free, GPL, flexible icon font for blogs!
http://genericons.com/
devref | HTTP Header Analyzer
http://devref.com/
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 talking about SVGs, drop downs, and HTML5
form elements.
Nick: Let’s check it out. First up is Spoiler Alert.
Jason: Spoiler Alert this is the best show on YouTube.
Nick: Spoiler Alert, basically this is a jQuery plug in that will blur
elements on your page that you pick, and if you go ahead and click on those
blurred elements, you can reveal them completely. So this is something that
works on text, it works on images and it’s really easy to add in to your
site, and it looks like there’s compatibility currently on Chrome, Firefox,
and Safari. If we go ahead and head over to GitHub you can go ahead and
download the code there. And to go ahead and use it, you just add this
Spoiler Alert to your JavaScript.
Jason: This would be really useful if you were creating a website with Mad
Libs in it, I think.
Nick: Yeah, exactly. I mean you don’t want to know you know.
Jason: You don’t want to know too much. You don’t want to give too much
away.
Nick: You don’t want to reveal it. This you know would also be good on a
video game review or movie review website, where you know you might have
spoilers in the review, and you don’t want to reveal them. So I think it’s
a pretty cool way to do it and technologically, this uses CSS filters to go
ahead and blur the text and images, which is why it doesn’t quite work on
Internet Explorer.
Jason: Spoiler Alert it doesn’t work on Internet Explorer.
Nick: Surprise.
Jason: That was actually a true statement.
Nick: Yeah, all right.
Jason: I guess we can go ahead and move on.
Nick: Let’s move on.
Jason: Next up we have a project called SVG.JS this is a lightweight SVG
animation and manipulation library. As you would expect it supports a ton
of different plug in options and it is, of course, very easy to use. If you
click the see it in action button, you can see a ton of options that they
have on the site here, and as I scroll down you can see the different
things that the SVG.JS plug in does.
So it’s a little bit hard to see as we’re scrolling down here, but if you
go towards the bottom you can see the different animations that they do and
isn’t that just craziness, animating, moving, sizing, rotating, and skewing
these different SVGs. So there is a really great page for it over on
GitHub. The plug in page for it shows all the different options that it has
and as you would expect, it supports a ton of different options, checks for
SVG support and there’s really is just way too much to go over on this
show. But if you want to check this out, we’ll have a link to it in the
show notes, on our YouTube channel at youtube.com/gotreehouse.
Nick: Check it out. Next up is this really amazing blog post about Amazon’s
mega drop down menu. So you know when you go to amazon.com, you go over to
the left side, and they have this huge drop down menu that basically breaks
down all of the different sections of the site. Now prior to this blog
post, I hadn’t really thought a whole lot about this, it just kind of
worked.
Jason: Yeah.
Nick: And I thought it was very straightforward and just used HTML and CSS,
possibly some JavaScript, but it’s actually much more complex than that. In
this blog post, they first say that you can go ahead and scroll to the
different elements or different departments here and it switches between
each one pretty quickly.
Now if you look at your more traditional drop down menu, this is a drop
down from Con Academy, this one is from Boot Strap, you’ll notice that
there’s a delay. Now you need that delay there to make sure that when you
scroll over to the next menu, you know it doesn’t disappear. And as you can
see in this example from Boot Strap, of this kind of maddening situation
where there’s no delay there, and the menu disappears before you can go
ahead and click on it.
So how are they doing this then on Amazon? They’re scrolling through here,
and they’re changing the menus very quickly with no delay. And yet when you
scroll over to the right side there’s no issue. Well, they’re actually
using some pretty complicated trigonometry and math basically, to
triangulate where your cursor is going to move next. So if you’re hovered
over one of these items it creates this little triangle, where your mouse
can actually go to. And so even if you hover over other departments in the
list here, it will not switch to them, because it’s anticipating that
you’re actually going to go over to the menu on the right.
So pretty amazing post, definitely worth checking out, and definitely worth
possibly implementing on your own site, because the gentleman that wrote
this article, Ben here, was nice enough to create a jQuery plug in that
will actually go ahead and do this for you, so pretty amazing stuff, pretty
deep web programming there.
Jason: Yeah, that’s really awesome. It’s something that I never thought
about either even having implemented drop downs myself. It can actually be
a bit of a maddening process.
Nick: Yeah, they actually end up being really complicated for some reason,
so this is pretty amazing, and provides really good usability.
Jason: Yeah, definitely check that out.
Nick: Cool.
Jason: Next up we have a website called How to Lose Weight in the Browser,
and there is a wonderful illustration on this site. Now what this site goes
over is all of the different best practices that you have, for slimming
down your web pages. Things like minifying your CSS and JavaScript, where
to place them in the browser for more speed, because as I think we’ve gone
over before on this show, the speed of your web pages is very important
from a user experience point of view.
If your site is slow-loading your users might go ahead and disappear. So
they have a ton, just an absolute ton, of different best practices on the
site. It goes over what to do with your HTML, your CSS, JavaScript, jQuery
images, and even on your server. So we’ve talked about most of these best
practices here on the show before. Things like minifying your CSS. They
even talk about minifying your HTML.
Now browsers don’t care if your HTML is nice looking and well indented, so
there are tools that you can use to take all the line breaks out of your
HTML and slim that down, because every single little bit helps when you’re
going on to display your web pages.
Nick: That’s interesting, because I’ve heard about minifying JavaScript and
CSS. I don’t think I’ve heard of anybody minifying HTML, so that makes
sense.
Jason: Yeah, and they even point to a tool that you can use. And it goes so
far as you know even putting your style sheets on the top, and then
JavaScript on the bottom. There’s actually way too much to go over here on
the show, but you can check this out on browserdiet.com.
Nick: That’s very cool stuff. I mean front end performance is one of the
areas where you can actually make the most performance gains, because you
can have better hardware. You can certainly optimize your database schema
or sequel queries on the back end, but front end performance ends up being
a lot of the load time, and it’s the area where you can usually see the
quickest wins in terms of performance.
Jason: Yeah, and it’s a very deep rabbit hole.
Nick: Yes, it is. There are lots and lots of tips and best practices you
can dig into there.
Jason: Nick, on that note I feel like this show gets a little bit serious
sometimes.
Nick: It does.
Jason: Want to maybe take a little break and relax with Zack.
Nick: I think so. I’m starting to feel a little bit stressed out. Let’s
relax.
Jason: Treehouse lullabies in spring.
Nick: Wow, I feel much better now, Jason.
Jason: I didn’t blink once.
Nick: I feel like we really needed that.
Jason: Yeah nice little break.
Nick: All right, cool. Next up is Preboot which is basically the precursor
to Boot Strap which is the popular CSS or front end framework from Twitter.
Jason: That we’ve talked about, maybe once or twice on this show.
Nick: Or a million times. Pre boot is a collection of less mix-ins and
variables that allow you to write CSS a lot more effectively. There’s a lot
to go over here in Preboot, so I’m going to just go ahead, and give you a
small example here using colors.
So they suggest that you can actually go ahead and compute your colors,
using these less mix-ins and variables. So for example if you had a black
color here, you could go ahead and darken it, and then you could just use
in your code, something like black 90 or black 20 etc. And they also give
an example, where you could keep your brand colors consistent, by using
these variables here, where you say you know primary success warning and
then you use those in your code, instead of using actually hexadecimal
values, which can get copied and pasted everywhere.
Jason: Right.
Nick: You could have slight inconsistencies and then if you want to change
a color, it gets really crazy. So with this, you can go ahead and just
change it all in one place, but pretty cool stuff, definitely worth
checking out. There’s a lot to dig into here.
Jason: Yeah, I guess you would use this if you don’t have the need for like
full Boot Strap suite.
Nick: Yeah.
Jason: Or even if you just want to learn and see how it works.
Nick: Yeah, no it’s definitely worth checking out, if you’re just starting
to learn this stuff.
Jason: Next up the HTML5 doctor is back in, with a blog post on the HTML5
form input types that you’re going to be seeing a lot more lately. So this
is a pretty great list of all the different new input types that we have
available. There’s search, email, URL, date ranges, date times, colors. And
then they also go through and show how each of these different input fields
work.
Now why are you going to want to use HTML5 inputs as opposed to just
regular inputs and then parsing that logic server side? Well, with HTML5
inputs, you get certain helpers on different devices. You know the web is
moving to phones and tablets and all that, and it’s something that you need
to pay attention to. So as an example they have here, if you look at the
email form input helper, then if you use the email input on the iPhone, it
will actually give you a different keyboard. And the same thing is true for
telephone numbers and URL’s. Here’s a good example of the telephone input
field, on both iPhone and Android devices. You get just a number keypad
instead of the usual text input. So this is a great blog post to go
through, and just kind of get a refresher. Get up to date about the new
HTML5 format elements that we have access to.
Nick: That’s very cool stuff. I remember you know in years past so many
people have been waiting for these HTML5 form elements to really come of
age. So it’s exciting to see the development.
Jason: Yeah.
Nick: New developments like this.
Jason: And actually would be able to use them.
Nick: Yeah, seriously. So next up is this really cool icon set or this
really cool icon font, called Genericons or Genericons, we’ve talked about
font icon or icon fonts on the show before. Basically, it’s a vector icon
font that you can embed as a web font, and it will allow you to go ahead
and use all of these various icons on your site.
Now the cool thing about using an icon font is that the file sizes are
generally very small, and they’re all vector-based, which means according
to this site, you can use Genericons for instant high DPI to change icon
colors on the fly or even with CSS effects, such as drop down shadows, or
gradients. I was really hoping it would rhyme for the third verse there.
Jason: Maybe we can get Zack to come up with a rhyme for that.
Nick: But that’s okay. I mean on that note, you know I’d give this site
four out of five stars for not actually rhyming there. But actually, it’s
pretty cool. You know you have all of your typical icons here like Facebook
and Twitter, GitHub, LinkedIn, Pinterest. So overall, I’d say this is very
very pinteresting.
Jason: I see what you did there.
Nick: It’s a word I’m trying to make happen.
Jason: Nice, pinteresting; got it.
Nick: Pinteresting.
Jason: Next up we have a site called DevRef. Now this is a small collection
of utilities that you might find useful, while you’re developing your
different websites. So this has things like a base 64 decoder, URL
decoders, and encoders, decimal and hexadecimal binary converters, a header
analyzer, just kind of really small, but useful tools that you might need
when developing a website. An example is a tag stripper, so if you have an
HTML tag in here, you know strong hello, you can hit submit, and it just
gives you the text without the different tags, so a bunch of different
utilities that you can try out and that’s over at devref.com. That’s about
all I’ve got for this week. Who are you on Twitter Nick?
Nick: I’m @nickrp.
Jason: And I’m @jseifer. If you liked this show go ahead and check out our
YouTube channel at youtube.com/gotreehouse. Over there you’ll find show
notes, and links, and more.
Nick: And of course, if you’d like to see more videos like this one, be
sure to check us out at teamtreehouse.com. Thanks so much for watching, and
we’ll see you next week.
Jason: Pinteresting.
Male: If you’d like to see more advanced videos and tutorials like this one
go to teamtreehouse.com and start learning for free.
