1
00:00:00,330 --> 00:00:01,040
I'm Nick Pettit.

2
00:00:01,040 --> 00:00:01,870
>> I'm Jason Seifer.

3
00:00:01,870 --> 00:00:05,060
>> And you're watching the Treehouse Show,
your weekly dose of Internets where we're

4
00:00:05,060 --> 00:00:07,730
talking about all things web design, web
development and more.

5
00:00:07,730 --> 00:00:13,010
>> In this episode, we'll be talking about
icons, cheat sheets, fonts and more.

6
00:00:13,010 --> 00:00:14,492
>> Let's check it out.

7
00:00:14,492 --> 00:00:19,151
[MUSIC]

8
00:00:19,151 --> 00:00:22,300
First up is an icon set called.

9
00:00:23,310 --> 00:00:25,780
ICONO, ICONO.

10
00:00:25,780 --> 00:00:26,960
>> I, I, ICONO.

11
00:00:26,960 --> 00:00:28,620
I, I, I don't ICONO.

12
00:00:28,620 --> 00:00:29,680
>> Oh, I see.

13
00:00:29,680 --> 00:00:31,210
Oh, no.

14
00:00:32,320 --> 00:00:33,280
>> I co, yes.

15
00:00:34,660 --> 00:00:35,750
>> I, co, no.

16
00:00:35,750 --> 00:00:40,810
Okay, well anyway, it's pure CSS icons
with only one element.

17
00:00:40,810 --> 00:00:43,210
So each one of these things you see here.

18
00:00:43,210 --> 00:00:44,030
>> I can't believe it.

19
00:00:44,030 --> 00:00:45,873
Is the element surprise?

20
00:00:45,873 --> 00:00:49,392
[BLANK_AUDIO]

21
00:00:49,392 --> 00:00:50,500
Get it?

22
00:00:50,500 --> 00:00:51,620
>> I, I got it.

23
00:00:51,620 --> 00:00:55,710
So, all of these elements here, all of
these icons here are comprised of

24
00:00:55,710 --> 00:00:59,800
one element, and they're just styled with
CSS.

25
00:00:59,800 --> 00:01:02,250
So, that's pretty amazing.

26
00:01:02,250 --> 00:01:05,670
And if you want to use it in your website,

27
00:01:05,670 --> 00:01:11,120
you can just download icono.min.css and

28
00:01:11,120 --> 00:01:17,580
then link it into your web page, and then
you can go ahead and use these.

29
00:01:17,580 --> 00:01:23,430
You can also check out the GitHub repo,
and if you want to watch that and see.

30
00:01:23,430 --> 00:01:27,030
I don't know what new icons come out in
this icon set or don't.

31
00:01:27,030 --> 00:01:28,060
I mean, it's, it's up to you.

32
00:01:28,060 --> 00:01:29,030
>> Yeah, we're not the boss of you.

33
00:01:29,030 --> 00:01:32,480
We just, we just politely suggest links,
it's up to you if you wanna go to them.

34
00:01:32,480 --> 00:01:33,360
>> I'm not here to judge.

35
00:01:33,360 --> 00:01:35,900
>> Yeah, we support your decision either
way.

36
00:01:35,900 --> 00:01:40,460
But those icons are on GitHub, and next up
is a great segway into a GitHub

37
00:01:40,460 --> 00:01:45,680
cheat sheet, and you can also find this
cheat sheet on where else?

38
00:01:45,680 --> 00:01:46,780
GitHub.

39
00:01:46,780 --> 00:01:48,180
>> GitHub,.

40
00:01:48,180 --> 00:01:51,010
>> I know you're expecting me to say
CNN.com.

41
00:01:51,010 --> 00:01:52,020
Nope.

42
00:01:52,020 --> 00:01:56,550
Anyway, this is a wonderfully cool
collection of hidden and not so

43
00:01:56,550 --> 00:01:59,710
hidden features of Git and GitHub.

44
00:01:59,710 --> 00:02:05,230
Now, a lot these start with things that
you can add to the url of something and

45
00:02:05,230 --> 00:02:08,080
you could do things like ignore
whitespace.

46
00:02:08,080 --> 00:02:14,820
So if you add a question mark and w equals
one to any dif the URL will remove

47
00:02:14,820 --> 00:02:20,040
any changes only in white space which lets
you just see the code that has changed.

48
00:02:20,040 --> 00:02:26,830
You can also do fun things like adjust the
spacing of tabs from 4 spaces, to 2

49
00:02:26,830 --> 00:02:30,750
spaces, to 8, you know, whatever, whatever
your little heart desires you can do.

50
00:02:30,750 --> 00:02:35,050
More URL tricks, you can see the commit
history by author,

51
00:02:35,050 --> 00:02:38,570
just put author in the query string.

52
00:02:38,570 --> 00:02:42,570
Alright, and we're not going to get to far
into this because there are an absolute

53
00:02:42,570 --> 00:02:47,740
ton of different items on here because
this is a very impressive cheat sheet, but

54
00:02:47,740 --> 00:02:51,770
we will have a link in the show notes that
you can check out right below this video.

55
00:02:51,770 --> 00:02:52,420
>> Very nice, Duff.

56
00:02:52,420 --> 00:02:57,364
Well, next up is the challenge for web
designers in 2015 parenthesis or

57
00:02:57,364 --> 00:03:00,050
how to cheat at the future.

58
00:03:00,050 --> 00:03:05,700
That's the title of this blog post and
it's basically about how

59
00:03:05,700 --> 00:03:10,670
this person thinks we're at an inflection
point very similar to Ajax.

60
00:03:10,670 --> 00:03:13,740
So when Ajax first came around it was all
new and

61
00:03:13,740 --> 00:03:18,370
different and now, Ajax is everywhere.

62
00:03:18,370 --> 00:03:19,650
So.

63
00:03:19,650 --> 00:03:23,460
If you kind of look around at the
technology available to us now,

64
00:03:23,460 --> 00:03:28,620
particularly in phones, a phone can do all
of these things, and,

65
00:03:28,620 --> 00:03:32,070
in fact, a laptop can do many of these
things, as well.

66
00:03:32,070 --> 00:03:36,310
So you can capture the screen, the phone
could listen, or

67
00:03:36,310 --> 00:03:39,960
record video and audio, can respond to
ambient light,

68
00:03:39,960 --> 00:03:45,210
can vibrate, you can work off line, you
could use the camera, all sorts of stuff.

69
00:03:45,210 --> 00:03:50,430
And basically, looking a couple of years
in to the future,

70
00:03:50,430 --> 00:03:56,230
kind of based on what we've seen in the
App Store, and the Android stores,

71
00:03:56,230 --> 00:04:00,240
you can kind of look in to the future and
look at these design patterns, and

72
00:04:00,240 --> 00:04:04,880
get a sense of where the web might be
going in a couple of years.

73
00:04:04,880 --> 00:04:09,130
So the challenge is not to just wait
around and

74
00:04:09,130 --> 00:04:14,100
do this, but instead of waiting five
years, just try to work at some of

75
00:04:14,100 --> 00:04:19,040
these things right now and, kind of, I
guess, design what is lacking.

76
00:04:19,040 --> 00:04:20,560
That's what they say in the article.

77
00:04:20,560 --> 00:04:23,710
>> The future is today.

78
00:04:23,710 --> 00:04:25,950
>> Only if you make it today.

79
00:04:25,950 --> 00:04:28,180
>> Yesterday, already happened.

80
00:04:29,670 --> 00:04:30,490
>> That's always true.

81
00:04:32,250 --> 00:04:35,960
>> Next up we have a collection of
essential JavaScript links.

82
00:04:35,960 --> 00:04:41,710
This is a wonderfully large collection of
you guessed it, links about JavaScript.

83
00:04:41,710 --> 00:04:44,660
Now, this is opinionated and

84
00:04:44,660 --> 00:04:49,800
the author also would like to say that hey
it has no bearing on whether or

85
00:04:49,800 --> 00:04:52,900
not the links make the lists, some of them
are affiliate links.

86
00:04:52,900 --> 00:04:57,910
So that's just a little little disclaimer
that we have upfront and

87
00:04:57,910 --> 00:05:00,860
also not not in cahoots with the treehouse
show.

88
00:05:00,860 --> 00:05:04,450
Anyway there are a lot of great reading
materials if you are looking to

89
00:05:04,450 --> 00:05:08,870
learn JavaScript there is great reading
learning JavaScript essentials.

90
00:05:08,870 --> 00:05:11,670
This is for all skill levels.

91
00:05:11,670 --> 00:05:16,630
There is required viewing, this is a small
collection of different

92
00:05:16,630 --> 00:05:21,570
videos about JavaScript and how to do
great coding.

93
00:05:21,570 --> 00:05:23,465
Interesting things like immutable data and

94
00:05:23,465 --> 00:05:28,160
react.js, which is a really cool library
that we haven't gone too far into.

95
00:05:28,160 --> 00:05:30,280
Even links to the different specs and

96
00:05:30,280 --> 00:05:34,600
the ecma six script draft there's a
collection of books and

97
00:05:34,600 --> 00:05:38,690
different tools and libraries, just a ton
of different things, so if your looking to

98
00:05:38,690 --> 00:05:43,238
get a little bit further into JavaScript
coding this is a great list to start with.

99
00:05:43,238 --> 00:05:44,450
>> Very nice, Duff.

100
00:05:44,450 --> 00:05:46,220
Well next up is Font Pair.

101
00:05:46,220 --> 00:05:50,320
This is a website that helps you pair
Google fonts together.

102
00:05:50,320 --> 00:05:55,370
So, if I just scroll down the page here
you can see, oh, okay, so

103
00:05:55,370 --> 00:06:00,330
the heading is this font and then the body
is just average.

104
00:06:00,330 --> 00:06:02,390
Oh, that's the name of the font, okay.

105
00:06:02,390 --> 00:06:08,240
And here we have ice talk web and then the
body's Laura.

106
00:06:08,240 --> 00:06:11,530
And here the heading is Lato and
Merriweather.

107
00:06:11,530 --> 00:06:12,250
It's pretty cool.

108
00:06:12,250 --> 00:06:14,620
These fonts actually look really nice
together.

109
00:06:14,620 --> 00:06:17,020
And, so, if you're preparing papyrus and

110
00:06:17,020 --> 00:06:19,780
comic sans together, then maybe this is
the website for you.

111
00:06:19,780 --> 00:06:20,640
If I-

112
00:06:20,640 --> 00:06:22,100
>> This, this is a nice website.

113
00:06:22,100 --> 00:06:28,190
I would like it to also suggest like maybe
cheese and, and burger pairings.

114
00:06:28,190 --> 00:06:29,790
You know, get a little burger menu on
here.

115
00:06:29,790 --> 00:06:30,380
>> Yeah.

116
00:06:30,380 --> 00:06:31,110
>> Sounds delicious.

117
00:06:31,110 --> 00:06:32,950
>> That would, that would be a nice
website.

118
00:06:32,950 --> 00:06:34,570
>> I wish to make that.

119
00:06:34,570 --> 00:06:35,570
>> I, I-
>> Wanna make that?

120
00:06:35,570 --> 00:06:36,840
You wanna make a website together?

121
00:06:36,840 --> 00:06:38,570
>> Yeah, yeah.
>> You want a weird website journey?

122
00:06:38,570 --> 00:06:39,530
>> Yeah, I like websites.

123
00:06:39,530 --> 00:06:40,125
>> I like websites.

124
00:06:40,125 --> 00:06:45,840
>> If you click here, you can say maybe
you want a cursive font and then a serif

125
00:06:45,840 --> 00:06:50,770
font but, you're not quite sure which ones
of those will look good together.

126
00:06:50,770 --> 00:06:56,540
Well, you can click on that and here we
have some cursive fonts and

127
00:06:56,540 --> 00:06:59,920
then we have some serif fonts.

128
00:06:59,920 --> 00:07:01,820
So, pretty cool.

129
00:07:01,820 --> 00:07:06,240
It's very helpful if you just need to pick
some fonts real quick and

130
00:07:06,240 --> 00:07:08,380
you have maybe one font that you like but

131
00:07:08,380 --> 00:07:12,940
you're not sure what font might go with
it, so pretty cool, pretty helpful.

132
00:07:12,940 --> 00:07:14,020
>> Yeah I'm really hungry now.

133
00:07:14,020 --> 00:07:15,505
>> Yeah for the hamburgers.

134
00:07:15,505 --> 00:07:16,160
>> Mm-hm.

135
00:07:16,160 --> 00:07:18,130
But anyway, that's all we have time for
this week.

136
00:07:18,130 --> 00:07:18,798
Nick who are you on Twitter?

137
00:07:18,798 --> 00:07:19,816
>> I am at @nickrp.

138
00:07:19,816 --> 00:07:20,770
>> And I am at @jseifer.

139
00:07:20,770 --> 00:07:23,660
For more information on anything we talked
about check out the show notes right below

140
00:07:23,660 --> 00:07:24,160
this video.

141
00:07:24,160 --> 00:07:26,806
We want to thank everybody for watching
and we'll talk to you next week.

142
00:07:26,806 --> 00:07:28,168
See you later.

143
00:07:28,168 --> 00:07:34,809
[MUSIC]