You can listen to the podcast and read the show notes here.
Michaela: Today, we’re looking at Font Awesome and ColdFusion and how you can never have to build icons for your apps again and we're here with Nolan Erck. And he is the founder of. South of Shasta productions.
Nolan: South of Shasta Consulting.
Michaela: South of Shasta Consulting?
Nolan: yes
Michaela: Consulting! He's like an expert ColdFusion consultant and he's always speaking at different conferences. In fact, he’s gonna be speaking I think in like five or six conferences this year including ‘Into the Box’ which we’ll talk about a bit more later. Is it jazz [inaudible] Miracon and C.F. summits and maybe N.C. Defcon. So lots of different things. And he started off doing stuff in the videogame industry and he went into web development like nearly 20 years ago now I think.
And now he's an expert at ColdFusion and web development. And we're gonna look at Font Awesome together and why you might care about that. And why treating icons like fonts is a cool thing and how you can stack your icons, and bore them, and spend them, and rotate them. We'll look at whether this works with bootstrap and some other C.S.S. frameworks and that's the plan for the conversation. So welcome Nolan.
Nolan: Hello, thanks for having me.
Michaela: Yeah, always welcome. So what the heck is Font Awesome for people who haven't come across it?
Nolan: So that the short description is Font Awesome is a vector based C.S.S. font you can add to your web pages. The longer description of to okay why is it useful, why is it anything we wanna learn about. Say you’re working on a website and it can be in ColdFusion or something else. When you get to the H.T.M.L. part on the front end typically, if you're building let's say an admin screen you have like add and edit buttons and save buttons. Typically, these all look about the same from project to project. Let’s say you're building an admin screen for a tool, you want to support both 17 inch laptops with giant screens as well as super tiny iPhone size screens and maybe a middle sized tablet or something between the two as well.
So you call your designer and say, “Hey, I need a save icon for my app. Please make the icon in three different sizes; small medium and large. One for each of those different sized layouts.” Fast forward to December of that year it's the holiday season and you wanna change the color of all of those icons to have maybe a red and a green theme to them. So you call your designer again say, “Please redo those three icons. This time with kind of a red/green tint to them so that the match the holiday theme for the website.” So now you paid your designer to build six versions of the same icon. All you needed was the save button, but they had to build six different things now; small, medium, and large – regular; small, medium, large for the holiday theme.
If you work at a place like Google or other larger outfits that change their theme very regularly, you might also have like a 4th of July themed look and feel for that part of the year or maybe a Halloween set of colors and on and on and on. The idea with Font Awesome is rather than going to the Photoshop style process, creating an icon, swapping new color palettes it out to get the holiday Halloween theme or the 4th of July theme or whatever and creating the same icon over and over again, you use Font Awesome to treat it as a font. So instead of adding actual paying or JPEG files to your app you add a little bit of H.T.M.L. with some C.S.S. attributes in it; class equals XYZ things and then that H.T.M.L. and C.S.S. generates what looks like a save button on the screen and it is.
The difference though is instead of it being a PNG or a JPEG, it's a font character. As far as your browser is concerned, it's rendering the letter F for the number five. It’s rendering just the same kind of character in that font. It can't actually tell the difference that this is not a letter and it’s … the save button. And so Font Awesome, it's a font that does that for you. Instead of the font including letters and numbers, it includes hundreds of different commonly used icons you have in web apps. So things like save button, a delete button, edit, open file icons, help and a trash can and a question mark for looking at documentation. Pretty much anything you can think of that people commonly add to applications these days.
There's an icon for it somewhere in Font Awesome. And rather than having to include six different versions of the font; one for each color scheme, one for each size, it's just a font. So include the font and then use C.S.S. to make the font size go up and down just like you would Courier or Times New Roman and use C.S.S. to change the color just like you would Courier or Times the Roman. So that's why Font Awesome is helpful.
Michaela: Well awesome you might say.
Nolan: yeah exactly
Michaela: So just so we're clear on this no need you don't need to go back to a graphic designer if you wanna change how the icons look with their color or sizing or what have you. You could do that in code dynamically, right?
Nolan: Yes, yeah you can control.
Michaela: So you could have your…
Nolan: go ahead
Michaela: You could have the colors changed based on the dates, or you could have it based on what the user's getting up to, or you can even change… could you even change the text that appears in icon or?
Nolan: There's no text that appears in the icon itself, but it's a font. So you can draw just like I can have two lines of text appear above and below each other or side by side using the float attribute or things like that or putting them in diffs and then using position to move the diffs the around on the page. You can do that same thing with Font Awesome icons because again your site is just drawing fonts on the screen. So yes, anything you can think of that you would normally do with C.S.S. to control text on the page. All of those tricks also work on the Font Awesome icons. And to the extension of that, just like you can write let's say JavaScript or jQuery to control when C.S.S. attributes get applied and not applied to blocks of text on the page.
You can also write JavaScript that turns on and off different bits of Font Awesome content on your page too. So if you have an icon that maybe only admins can delete items out of your web app. Well then you make the delete icon very bold and prominent in color when it's enabled and you have a little bit of Javascript that runs and maybe changes it to a more faded coloring scheme when it's disabled. But you wanna show the icon is still visible on the screen. All of that stuff that works with plain text also works with your Font Awesome icons. So it’s a powerful tool.
Michaela: That is really cool. So this must cost thousands of dollars, right?
Nolan: It is a… so it used to be completely free and completely open source and it got really, really popular which was great. The downside to that was the folks in charge started getting inundated with a lot of requests like please add new icons, I have question about how to do this. And that and they just didn't have the bandwidth to cover it and leave everything completely free. So now they're on version five a Font Awesome and there are two options you have. You could still get the completely free open source version of Font Awesome and use that to your heart's content. There is also a pay version of Font Awesome five. And if you grab that when it comes with a few extra features there are now what they call themes in the font icons.
So basically that you have the same set of I think it's like 600 icons at this point and they have slightly different variations on how they look. Like with double digits or more shadows things like that. You get a couple of extra options for that if you buy the pay version. There are a couple of different ways due to the payment I believe. Like you can do a subscription model. You paid for it once a year and that sort of thing and that helps cover the costs of the folks maintaining font awesome and answering questions and so on.
So you can still go free if you want to keep it completely free and open source and run your site that way. Like if you're building just a small blog for your local soccer team or something you don't have any money for your budget go ahead and do the free version. It works great. It's not limited in any way other than you don't have all of the different themes for the icons. You still have the 600 some odd different options for a concept on. You just don't have as many variations to select or you can buy the pay one and then get that and support the product as well. And it's always nice to support the open source teams like that when we can so.
Michael: Yeah, it's great and it looks like the paid version is 60 dollars and you get a year of support when…
Nolan: I say I was blanking on the price thank you very much yes. Yeah, it's not terribly expensive. You can use it on anything you want. The licensing agreement is pretty fair if you don't have to give them the rights to your app or cut them a royalty or anything strange like that.
Michaela: Yeah and also it looks like on the pro version there’s a C.D.N. that will cache all that font stuff to make it even faster.
Nolan: That's a good point to yes there's a CDN for if you're really worried about speed on your website, you can use the CDN.
Michaela: Who isn’t worried about speed and he's there
Nolan: that's fair
Michaela: Well I guess it depends it depends what your criteria are.
Nolan: Yeah I… it depends on the project for me. Sometimes, I like the control of having all of the assets be on my one web server and I'm not worried about the CDN's going up or down or connecting out to three or four different C.D.'s to grab different types of content. So I've used those on projects. I've also just loaded everything locally onto the client's web server and gone that way. And just found other ways to speed up the website instead. That is kind of the one downside to Font Awesome is you are loading a font onto the site. So there's a little bit of extra overhead in loading this entire… not true type font. It's one of the other formats.
But it's an extra resource to add on your website that takes a little bit of download time and processing power to get into the system. It used to be more of an overhead in the earlier versions of Font Awesome. Like two or three. And in the newer versions, they've done a lot of work to optimize that quite a bit and streamline how the font in the content is grabbed from the server and how it's loaded into the browser and cached and gets rendered on the screens. There's quite a bit of work involved in that to make it less of a hindrance. I know some people especially for building mobile apps, they worry about the sort of thing.
Like oh it's another big library I have to add in my site. That's why I stopped using jQuery because it got so huge and it was a bottleneck on my site. And they're really kind of very conscious of that sort of performance concern with the Font Awesome stuff. So comparing using this to having a bunch of graphic files you end the day your pages could be faster because there is no graphic to download for the browser or?
Nolan: It can indicate let's say like an extreme example. Let's say you have a website with 100 different real icons on it. So 100 different JPEGs and PNG files. Typically in a website, if you're 100 graphics plus the DOT H.T.M.L. file itself plus the C.S.S. file. So 102 things that compose up this website. Web browsers don't go up to the cloud and grab all 100 into assets at one time and download them. They usually grab them in chunks of two or three at a time and upload them consecutively until it gets all of those chunks down to the browser. The mail get rendered processed them show up on your screen. Because of that, you're making so many more round trips up to the cloud that it not having 100 different icons to load up.
Can take a lot of time to connect to the cloud, bring them down, process everything. If you're doing it as a Font Awesome thing, you've got one font you're downloading. So one I think it's WOTT file, one true type font. You've got your H.T.M.L. in your C.S.S. So in theory, it's closer to three maybe more like five or six things including some behind the scenes C.S.S. stuff. It's way fewer assets you have to download. So you're making fewer round trips up to the server and all of the icons that are going to draw on the screen, they're all just text as far as the browser concerned. It's drawing a font. It's just looking at H.T.M.L. tags in the web page figuring out whatever the character you asked for in the C.S.S. file and that's what's going to load up on the website so it… Yes, so it can cause a speed improvement.
There was a concern brought up on one of the Font Awesome support websites or message boards where someone asked well what about performance of loading all of these different kind of crazy nonstandard icons that are fonts on to the site. How does that affect performance? And the responses for the latest version of Font Awesome five it was something the effect of up to about 1,000 icons can be loaded on a webpage and you don't see any performance that. When you go above 1,000 icons on one webpage, you might start to see a little bit of a performance difference here and there. And honestly, I cannot think of a real world situation where I would have 1,000 icons on one web page anyway.
So I felt like unless I'm doing something really, really crazy with maybe a really large scale. X and Y coordinate system and drawing a bunch of dots on the screen to represent where things go or some very, very large scale multiplayer web based video game, I couldn't think of a way that I actually have that many icons on the screen anyway. The most I could come up with this a couple of hundred. To that end, the ColdFusion app near a C.M.S. uses Font Awesome in their admin screens to draw the different edit buttons and save buttons and things in mirror. So I took that information and this concern about well if you have over 1,000 icons on a web page, it might slow it down. So I just logged into a couple of my mirror C.M.S. websites and said, Okay well, how many icons does this need to drop a pretty good size website on the screen?”
I went into my admin for South of Shasta dot com and just did a finger in the wind count okay well how many things are here. And even on a really busy screen with lots of options turned on, I only had some were in the neighborhood of 250 maybe 300 icons there. So for a real world pro quality ColdFusion app near C.M.S. that gets used by a lot of people. It's nowhere near hitting that possible performance issue. And it wasn't even a big issue in the documentation. The doc said something like you might start to see a little bit of a weird performance thing if you go above 1,000 icons. It wasn't a seriously watch what you do and don't go about 1,000 of the problem. It was like maybe a two thousand and you know after thousand to be weird, but you should be fine so.
Yeah performance really isn't an issue with it. If anything, it's probably faster than downloading a bunch of PNGs. And even if it's the same speed for whatever reason, it's less work for your designers. The designers I know don't want to draw the same delete icon nine times. They wanna draw fun things. They wanna do more company branding and come up with a new color scheme for this fall's website change and work on new logo designs and work on the big more interesting things that add to their portfolio and make the day more fun. So this way, we just get a lot of grunt work out of the way for everybody and just turn it into a couple of lines of C.S.S.
Michaela: So I think if you're also concerned about the load speed you can… Can you just pick the icons you want to subsets in the pro version?
Nola: In the pro version, I think you can yeah. That's not true in the free versions. Most of my experience has been with the free versions and they've been fine that way. The other thing to remember too is icons and fonts and you're downloading a C.S.I. It's basically C.S.S. that you're downloading C.S.S. files to cached on the first page it. So if you're in an admin stream admins are usually only loaded up by a couple of people at any given time, right. You've got one admin manage your webmaster is one maybe two or three people.
So on the first time that they load the website up maybe it's a little bit slow down when the big file. On the front end lets you have lots of users going to a website. C.S.S. files get cached. So it might be a little bit slow on the first page it but that C.S.S. file doesn't get read downloaded on every page. It's downloaded once, cached, and you're done. So if it is a concern and the 60 bucks needs to C.D.N. or yeah, use the custom versions to get smaller chunks of the icons and customize it that way but…
Michaela: Can you make your own icons are you going to stock with the 1,015 icons depending on the versions that they give you?
Nolan: You know I haven't looked into that in Font Awesome. I guess in theory, you could make your own icon because it’s just a font. My experience has been more I would… Usually if I need something, it's on the website already there. And if it's not, you can sort of ask them. “Hey can you add this icon to the next version?” And if you like that sort of feedback on the forums it is what it is that. There are also some really neat features you can do in Font Awesome where you can do what they call staff icons. So you can actually take two icons and draw them right on top of each other.
So if I really need something custom sometimes, I've gone back and done that and said, “Okay well like I need I kind of looks like this. They don't have that, but they have half it me have the other half that I can smash those on top of each other or maybe turn the background of one of them green and turn the other one blue or something like that. And get close enough to what I need. And you can also rotate the icons 360 degrees to wherever you want and get a couple of different really easy customizations that way that sort of solve that problem in a bit of a quicker way my thinking.
Michaela: So do you have a little demo you could briefly show us five zero one showing on video on our YouTube channel and I’ll just describe it for people who are listening on the audio.
Nolan: sure
Michaela: So we like those old days of cricket matches in England via the radio or football matches.
Nolan: Sure people that are…
Michaela: Play by play account.
Nolan: For folks that are listening too, all of the demo that I'm gonna show. If you just go to my get up page to get about. So Github.com/Nolan Erck. There's a presentation out there called Font Awesome preseno. You can look at the slides from when I give a talk on the set of a conferences and all of the demos that are gonna go over here are also in that slide deck. You can just go there for free and grab that later on if you like. So now let me share my screen.
Michaela: Great and we’ll put a link to that your GitHub to show notes on here are attacks on you in the chat when you're right there yeah.
Nolan: There you are and then okay. I'm gonna share my screen it will take a look at this sometime or stuff share. Okay, so here's a basic… Just an example of what some of the Fonts Awesome icons look like or rather what regular icons look like. You have to look them different sizes.
Michaela: So yeah they look pretty professional. You’ve got trash cans and save. Any basically any operation you want to do in your app that's probably an icon for it. And you can‘t see it from this demo. But in their website, they've got like… They make it easy to find the icon you want.
Nolan: Yeah so here's the…
Michaela: Category and you can search for 2,481 awesome icons.
Nolan: Yeah and you can so you might which ones are free and which ones are pro only which ones are in the business category or writing for code and all kinds of different things.
Michaela: Yeah and there's some of them are dark and some are like greyed out on the side
Nolan: Some of that is of the different themes that you can pick from. You see how these three are all the same just like on and these two and I never over them they say these are from the pro version and the first one is like on there. So this is the free version you get with the free Font Awesome. And if you like these other two variations on it, they come in the pro version.
Michaela: Aha that’s what the grey colors. But I think in the pro version, you can have heavy font or light font or I feel they called it they have different variants as well.
Nolan: They do. They've got a couple different themes regular light and solid regular and light I think of the different things that you're thinking of.
Michaela: Yeah, there you go you know they know that.
Nolan: Yes a fantasy is really easy to start using. You can use their CD and link which is just this line of H.T.M.L. right here. We include a Java Script file and just start with that. You can also go to fontawesome.com, click the download button that'll send you the big zip file down, put all of that stuff in some folder on your website and then you add this line of JavaScript that just links to the thing you need to start using it. There are a couple of other ways to do it to sort of streamline which pieces are loaded and which pieces are not loaded on Font Awesome. But if you just want to start checking it out and figure out how things work either do it this way or just download the CD and use the CD and link like that and you're all set.
Michaela: So it's basically add one line to your code and you've got it installed. You may I guess you stick that in your application CFC or…
Nolan: So yeah you'll… So while going to be on a ColdFusion app but this like in the site header or footer. Or if it's like a framework one app or a call box out put this in your layout. And then just on after you don't have to worry about it ever again. It will be loaded for the entire site.
Michaela: So show us how you in your demo using some of these.
Nolan: Okay, so here's how you use it. Usually, people use the I tag in H.T.M.L. I used to be for italics, but since you do all the italics now with C.S.S. The I tag is basically dead and doesn't serve a purpose. So a lot of people have sort of adopted the I tag as I contact and that's what people [inaudible] [23:17] Font Awesome. So you have an I tag and you just add some C.S.S. to say class equals FAS for Font Awesome. And that sort of turns on the Font Awesome stuff and you put a second class next to it. In this case, I'm using F.A. dash cam or dash retro. Let’s just go to the Font Awesome classes and turn on the retro camera icon and that's what you wanna use on the screen itself. The first one FAS that's the Font Awesome style tag. I could also use FAR for Font Awesome regular theme or there's a light theme.
And a brand's theme of icons as well and that's where you get into which items are in the free version and which version which items are in the pro version only. So in this case, I'm using the free version to just say FAS, FA camera retro and that will give you an icon like this on your page. And I'm running this in Google Chrome right now. So everything I'm showing you is the live real working H.T.M.L. It’s just part of my slide deck to have everything in one spot. But this is live real code drawing that icon on the screen is being done with Font awesome. You can see here it is actually created in SPG for that camera icon right there. I did not have to actually paste any of this into my site. All I did was that I class equals FAS, FA camera retro, and Font Awesome does all of the other hard work creating [inaudible] [24:38] for me.
Michaela: And basically it's overriding the meaning of the I tag.
Nolan: Basically yeah. But that's not a Font Awesome trick. That's just a C.S.S. thing. You can technically overwrite any H.T.M.L. tag you want with C.S.S. They're just choosing to use the I tag because it's a dead tag and it won't break anything else. I could do that without Font Awesome.
Michaela: Hope someone's told the I tag’s parents that they’re dying.
Nolan: Well there's still the EM tag for emphasis if you really need a tag to do your italicized stuff.
Michaela: yeah, yeah
Nolan: So we haven't lost anything yet in H.T.M.L. You can also change the size of the icons by just adding a third [crosstalk] [25:20]
Michaela: Is it rather the B tag dead as well?
Nolan: right seriously
Michaela: And do people [crosstalk]
Nolan: [Crosstalk] [25:27] and the B tag will be for… They'll be a bullet point library that comes out and works out. I think we have 2,400 different types of bullet points you can add to your ordered lists and will B class sequels and then something to your bullets.
Michaela: There you go.
Nolan: And actually Font Awesome does that too. You can change bullet points in the style as well. I think I have a demo of that coming up. So if you wanna change the size of an icon, you do the same C.S.S. stuff we did before; class equals FAS. FA-cam retro and then you add a third specifier on there. FA small, large, or two X and that drives the same icon in three different sizes. You can do extra small, small and large and there are different sizes of the fonts that gets… the font gets grown… It grows or shrinks based on which value you give it and the icons will grow and shrink accordingly. You can all see it is a FA2X, FA3X, 4X all the way up to ten and that we use two and two m's there are ten AMS and it will grow and shrink the font accordingly.
Michaela: fabulous!
Nolan: Yeah, you can change the color of any icon you want.
Michaela: Just what happens if you pump up the browser zoom here? I'm assuming your icon gets bigger. Is that true?
Nolan: The icon gets bigger. It's not doing it a lot right now because I'm in zoom and the under the screen sure thing. But yeah if I zoom in, it's growing a little bit in size not…
Michaela: I notice the icons at the bottom right. Are those little arrows that you’ve got there made with [inaudible]?
Nolan: You know those are all sort of the slide presentation software I'm using. This one here is made in [crosstalk] [27:09] in Font Awesome.
Michaela: So how come that doesn't resize when you zoom in on the browser?
Nolan: I think we're just seeing a side effect of either the C.S.S., the slide deck presentation that I'm using, or the screen share app that we're using now to record the webcast. It does grow and shrink under normal use.
Michaela: okay
Nolan: And it's all vector based. So if you do zoom in or make the icon really large in size, you don't have any of the pixilation effect that you would if it were like a bitmap or a JPEG. It can shrink and scale very, very nicely to any resolution that you need.
Michaela: excellent!
Nolan: And here I've got the exact same icon that we had before using the exact same H.T.M.L. to draw it on the screen. But above that, I've got a little bit of C.S.S. So just give it a different color. And you can see all I've done here is the wrapping around the icon has an idea of emergency C.S.S. is emergency and change its color to red. And I can overwrite whatever that default kind of blue/gray color is that Font Awesome comes in.
Michaela: Now does this mean if the use of prints the web page with these icons in it, they print really sharp as opposed to sometimes when you print graphic based icons they can look a little pixilated.
Nolan: It should print with the same quality as any other scalable pictographic thing on your web page; so yes.
Michaela: Yeah, so that could be important to some people who have reports and things.
Nolan: true
Michaela: cool!
Nolan: Yeah, you can do fix with icons. Like so right can have… Here I've got icons with… I don't have the code example on the slide; my apologies. But you can have the… with the icons it's exactly the same. So you can get everything to line up very nicely vertically like this with the exact same amount of white space or the same left aligned margins for the items. It's really easy to do that sort of stuff out of the box. I can rotate the icons. Here I have an Apple icon turned 90 degrees to the right. Here I have it turned 111 degrees to the right. And then here, it's completely flipped upside down 180 degrees and all of my…
Michaela: You’re gonna have Steve Jobs turning in his grave.
Nolan: Yes, oh wait! I got an even bigger grave turner for him coming up I think in the next couple of slides. You do the same thing. You do your… in this case F.A.B. is the theme I'm using and it turns on the brand's component of Font Awesome since Apple look it was a company brand. You use F.A.B to turn that on and I just say FA Apple I get the Apple logo and on the part that is making it rotate is this data dash FA transform. I just tell it how many degrees I want to rotate the icon.
Michaela: And because this is all H.T.M.L. code, you could be emitting this from your ColdFusion code. In other words where you've got the Apple brand for the name of the icon there. It could be coming out of a variable in ColdFusion.
Nolan: Yeah it could be coming in variable. It could be coming in your CF include. You can have a custom tag called C.F. Apple icon that draws this for you on the screen. You can absolutely mix any of this that you want inside any piece of ColdFusion code you have that generates output to the browser. This would all work exactly the same inside those files. In fact and again this is what C.M.S. does for part of their admin screens. They use Font Awesome in those files and that's very much a large scale ColdFusion application.
So this does absolutely work inside C.F.M.L. with no configuration needed. You don't have to go in to CF admin, you don't have to change a setting in your application C.F.C. file. You don't have to do anything. It's just like loading another JavaScript file or another dot C.S.S. file that you get from a designer. You put it in the appropriate folder on your site, include the script tag that we looked at earlier and you're done. It absolutely works.
Michaela: So 30 second install.
Nolan: Yeah, at most. It's really easy. You can also do we talked earlier about what if you need a custom icon that's not in there. This is a trick that works pretty well for a lot of that sort of thing. They have a neat thing in Font Awesome called ‘masking icons’. So here on the left, I have a pencil icon using the same sort of H.T.M.L. that we talked about earlier. I've got FA pencil and 4X just to make it larger in size.
Next to that, I have the comment icon showing this comment bubble on the screen. And here in the starting sample, I'm drawing both the pencil icon and the comment icon and I'm using this data; FA mask attribute. And it's just masking the edit icon with the comment bubble behind it and it can see it inverted the colors for me automatically and combine the two together there. So I get a very nice composite of these two icons by [crosstalk] [31:48]
Michaela: So it’s just overlapping one on top of the other.
Nolan: Yeah and it's flipping the color of the first icon so that you can see both of the icons so you over here it's kind of the light gray color in here look to the background color of dark blue.
Michaela: Yeah so it's an intelligent overlapping.
Nolan: Yeah, it is. I didn't do any C.S.S. trickery behind the scenes to make that happen. That's all pure Font Awesome behavior out of the box. Just by doing this FA mask, it figures the rest out for me automatically.
Michaela: And do you only need to have two icons there or?
Nolan: That's a good question. I've never tried to mask more than two icons. But that’ll be an interesting demo. I’ll give… remind me to do that later. I’ll write up a blog entry about that and try it out. You can also combine the earlier rotate attribute that we looked at. And rather than having the pencil icon sort of leaning to the right like this, we could rotate the pencil sideways or upside down or whatever and you can play with the color scheme to clean the icons. And between all of those sorts of behaviors you can get a lot of really custom looking… really unique subtle icons in your web apps if you need to do something particularly unique that doesn't have an icon that you can use in the Font Awesome box directly.
Michaela: That is cool. So you can have… because you control where this thing displays I guess if you had a U.I. the needed it, you could move the icon around on the display or.
Nolan: Yeah exactly like you would move text around on a site using C.S.S. Like position equals absolute and then use top and left or whatever to move it around. The same thing will work here.
Michaela: They have an icon for thumbs up in there I think.
Nolan: they might
Michaela: Do they have an icon for giving the middle finger or?
Nolan: [Crosstalk] [33:35]
Michaela: I saw it earlier. There was a thumb.
Nolan: okay
Michaela: Yeah, it's like an icon on Facebook.
Nolan: Oh yeah! Okay it's probably [inaudible] [33:45] it's called like or something; let’s see.
Michaela: Yeah, it could be called that. Can’t you just put it… Oh! You got two fingers up.
Nolan: I think I’m using the wrong search button. Let me try…
Michaela: I think you wanna search down there. It's in the middle, so.
Nolan: There we go.
Michaela: Here's a bunch for thumbs icons.
Nolan: And those [crosstalk] [34:08] and the third one is on the [inaudible].
Michaela: And we have a thumbs down icon and then we have [crosstalk] found a thumb tack icon.
Nolan: So thumb tack. Let’s see if…
Michaela: And then what about fingers?
Nolan: [Crosstalk] [34:21]. Those are all [crosstalk] fingers.
Michaela: Yes, there is a give the finger icon and a point sideways icon.
Nolan: yep
Michaela: Actually just to clarify I think that's the index finger not the middle so.
Nolan: I think you're right.
Michaela: yeah so
Nolan: Yeah, there's all kinds of different icons and you can even take that from the hand pointing straight up and use the rotate and turn it sideways if you do for different things and whatever. Yeah it's a really, really useful library in that regard.
Michaela: That would be the trunk finger icon.
Nolan: Exactly we talked to me to get the jokingly about the B. tag being used for bulleted lists. We can actually make custom bulleted lists in Font Awesome. I have an unordered list. But the class on the URL tag of FAUL; Font Awesome Unordered List. And in my LI items, I do have a spare and with the class of FALI for a list item and that turns on the list stuff inside Font Awesome. And then in there it is the same tag that I used before. In this case, I have FA check square and that strong these little check boxes with square boxes with check marks on them for each of my four bulleted list items.
Michaela: Now let me ask a stupid question from a programmer whose fingers might be a little fat. What happens if you mistype the name of the icon? Do you get an error?
Nolan: No it's just that… It's like C.S.S. where if it can't find that class, it just skips it. So you just want the icon to appear on the screen.
Michaela: Okay, so that's a little bit of an issue because, how would you know you'd mistyped it? Yeah.
Nolan: That's a good point. I don't know how you would know. I guess just look… expecting to see the icon there and…
Michaela: Yeah but if you've got hundreds of icons on the screen, you're really gonna miss one icon.
Nolan: that's true
Michaela: It’ll be easy to not notice.
Nolan: That's a good question.
Michaela: so
Nolan: No, I’m not sure what people would do in that case.
Michaela: I mean I would like a debug mode in Font Awesome that kind of picked up that kind of thing.
Nolan: That's a good idea.
Michaela: yeah
Nolan: To know about some of these things and see what I can do later. Maybe we need a Font Awesome linter that goes through all of your code and looks for…
Michaela: There you go.
Nolan: [Crosstalk] [36:36] names that don't exist in the C.S.S. file [crosstalk]
Michaela: And I'm guessing the same issue exists with C.S.S. itself, right. If you managed… if the cat lands on the keyboard and you don't notice and you've screwed up some of your stuff. You’re not gonna get an error in your C.S.S., right?
Nolan: No, I don't think you… No, you don't get an error. You just get… it just doesn't know what to do with that class. So it skips it and doesn't apply whatever the thing is.
Michaela: So there also could do… needs to be something that will link to your C.S.S. code.
Nolan: That's true. Well, I know there's a C.S.S. thing that will look for unused C.S.S. classes in your dot C.S.S. files called [crosstalk] [37:19]
Michaela: Okay, so that might…
Nolan: I journal an article on this. Yeah C.S.S. relics or C.S.S. junk or something like that. I just saw an article about this pop up maybe three or four days ago. I'll have to check that out and see if it can go the other direction as well and find out if you have a class in here that doesn't exist in your C.S.S. file. That's a good idea. Or some other tips we can show real quickly here. Here we go.
So rather than just rotating the Apple icon 90 degrees or 180 degrees, you can actually have it spin over and over again. By just adding F.A. spin to H.T.M.L. and there it goes and it spins. A nice little circle for you. I can also do F.A. pulse which is a similar effect that you can see it's rather than doing a smooth 360 degree rotation which is what F.A. spin does. FA pulse takes that circle, breaks it up into I think seven different points, and it just rotates it among those seven different key frame points if you will and gives the rotation with a slightly different sort of effect to it.
Michaela: We're seeing the Apple icon rotating slowly or in a frenzied way here.
Nolan: And that works for any icon in the entire Font Awesome library. They all rotate at that speed around the center. There are one or two icons that are still a little bit off center and have a little bit of a wobble effect when you rotate them. But they're working to fix those in newer revisions. So they should all works nice and smooth like that. And here we can get even more crazy with things and combine a bunch of ideas into one. So here I have an icon for the angular JavaScript library and I'm asking that with a cop. So that one is here class equals F.A. angular. And I'm masking that with another instance of the F.A. angular icon.
So I have two of them on top of each other. One is sort of the light grey and one of them is the dark blue color because they're masked on top of each other. Flip the color from one so it's visible to the other one and there are those on the screen. And I used the F.A. transform property just to shrink when I come down a little bit and position it down to the right just a hair so you can see the two icons next to each other and get the sort of reverse shadow effect. And I can do it exact same thing on a second icon. And all I’ve done to the second one is I've added the F.A. spin [inaudible] [39:42] and that's going to rotate that second set around while the first set stays right where it’s at.
Michaela: next
Nolan: And all here. So really easy little animation effects that you can do with tiny little bits of C.S.S. And I'm not even writing the C.S.S. I'm just adding classes to my H.T.M.L. output. So I'm just in pure H.T.M.L. here. The only C.S.S. I've ever had to write is this little tiny bit of a style block at the top of this demo where all they did was change the color and the font size to make things a little bit bigger and easier to see in this demo. There's no [crosstalk]
Michaela: How’s the documentation for Font Awesome?
Nolan: The basic stuff is pretty good. I’ll go here. I’ll put on the website back up. To get started, it's pretty useful. There's several nice demos on here of how you can start using it and some of the different features in Version four and Version five. There's a intro and the like with some web font, information about web fonts, and how to use it on desktops. There is some information on how to do advanced things in here as well. If you wanna get really advanced, the documentation starts to fall off a little bit in some cases like you can see, they're still working on angular integration and Ruby integration. Some of the documentation for doing angular specific stuff doesn't exist yet because those kind of pieces are still a work in progress.
There are also forums on Stack Overflow that are pretty good. And I wanna say there's a blog as well somewhere that I'm just blanking on at the moment. This is pretty good to the how to use. It’s laid out in a very similar style to the boot strap documentation for folks that are familiar with that. You've got a bunch of high level topics over on the left and you just find the thing that you need. How do I use Font Awesome with no J.S. or with ColdFusion or whatever the thing is? And click on the item you want. Here's intro to what S.P.D.s do in JavaScript and here's how to do basic stuff with Font Awesome. Gives you some real basic samples. You can see right there is the same camera retro example that I showed earlier. Here the docs are pretty good.
It starts to fall off when you need to contact… Here's a blog. I knew there was a blog somewhere. Yeah blog.fontawesome.com has a bit more information on there and the ‘Contact Us’ section is going to open up an email app. It’s just the email link basically for there and that's where support starts to fall off. If you're at the point where you're really, really stuck on something. You think it's a big crazy bug and you need to talk to the Font Awesome folks themselves, that's what the pay version really is the most beneficial way to go. They basically talk to people that buy the pro version.
Michaela: Well that makes sense. They'd got millions of people using this as I understand.
Nolan: Exactly yeah. I get the feeling from reading some of the earlier versions of the website that they just weren't prepared for how popular this got when it first came out. It really took off like thing musters. And they had a lot of folks that wanted to check it out which is great. But that meant the first version of support on the website basically just said, “Look I don't have time for all these questions. I'm sorry. There’s a stuck over form over here. Please talk on stuck overflow and good luck.”
And I was just… there was just a band with that. He wasn't trying to be rude. It was just there were so many people checking out this app. It was flooding him with a lot of stuff. So that's when they entered version four and five and said, “All right we're gonna split this up now. The free version is still there. If you wanna use it, great. If you need support or these other fancier features, here's the pro version, you do a subscription. That wil cover overhead to answer your questions and move forward with things. So that's how they went about that.
Michael: And do you know if it’s one developer behind it or what's the…?
Nolan: It was one developer and I'm not sure what they're up to now.
Michaela: yeah
Nolan: That was one main person whose name is escaping me at the moment. And I don't think it's a terribly large outfit. If he's got help, it's not a ton of other people. It's still a pretty small tightknit set up.
Michaela: Right and it's used on 100 million websites around the world; it says so.
Nolan: Yeah that's a lot of questions for somebody to answer.
Michaela: Yeah, it is. Cool! Well anything else on this demo or should we?
Nolan: Let’s see. There's other stuff people can grab if they wanna look at the things about process support and information about other docs and what have you. They can just go to my get help link and check out more details there. For folks that are traveling to New Orleans, I'm giving a longer version of this talk at the Jazz con conference in March… March twenty second and third. I think that's it. We'll hear what…
Michaela: excellent!
Nolan: March 21st through 23rd in New Orleans. I'll be giving a longer version of this talk there with more demos and more details and things.
Michaela: Yeah that looks like a interesting conference. It’s got like about 60 speakers, angular reacts, few JavaScript frameworks, H.T.M.L.5, C.S.S.3; all kinds of stuff and it's only 250 attendees. So you're a pretty high chance of bumping into a shitload of speakers in the corridor.
Nolan: That's true.
Michaela: It's like a 20 percent speaker to attendee ratio. So and then I've heard the New Orleans has one or two other things you can do in the town.
Nolan: Yeah I don't think you'll be terribly bored there after hours at the conference. I heard they've got a couple of clubs and maybe a band or two to check out.
Michaela: Yeah a band or two; yeah. And I noticed Ray Camden's gonna be speaking at it too because he lives in Baton Rouge. So just down the street from New Orleans.
Nolan: Yeah there are several speakers at the conference that I typically run into at the more ColdFusion centric conferences. Rick Cameron will be there. He’s of course done a lot of ColdFusion work over the years. Simon McDonald is one of the presenter who speaking there. I don't know if he's done ColdFusion directly, but I have seen him speak at places like N.C. Defcon before and a lot of ColdFusion folks go to that conference. Jessica Kennedy is another great speaker. I'm a huge fan of her talks at different conferences. And she speaks at places like N.C. Defcon and C.F. Objective pretty regularly.
And she's speaking at Just con as well on what she's gonna talk on micro spa architecture. That's a really good content there for folks that are building modern ColdFusion sites where you do in your back and A.P.I. in ColdFusion. You're hooking it up to a modern front end like a few J.S. app or an angular app. There's a lot of great content there for folks opposition. The Font Awesome stuff that I showed would work well in those environments. It works fine in mobile applications. It works fine in bootstrap, and in modern C.F.M.L. We have a front end. It also works in kind of more of the traditional older style ColdFusion app. So if you just have everything being generated on the server side, you can have your Font Awesome stuff up there as well and it all render out on the screen just like the demos I showed here.
Michaela: So what do you see the pros and cons of using Font Awesome.
Nolan: Pros and cons? Well not a ton of what I consider cons to it. If you download the whole thing to start using it on your website, it is a 30 megabyte download. So maybe just make sure you've got a decent bandwidth and space on your server to put it on there. There is a little bit of extra overhead including the Font Awesome all dot J.S. file in your site. That file by itself is a 700 K. So if you're not willing to go to the trouble of buying the pro version and try to optimize things down, there could be a bit of a bloater performance hit on the first page to your site loads.
I personally I think it's worth the tradeoff though. Because I save so much grunt work with the designers and I get so much more flexibility and adding great color theme in things to my site. And just I cut down on a lot of the busy work and get to move forward on not just the development of things but also the designer into things to all of the more fun and interesting work. Because I feel like it's worth the trade off in a lot of cases. The pro version [crosstalk] [47:59] thing and some people don't like software. So I guess that might be the other catch if you go the program.
Michaela: So also you end up with a better UX [48:12] for you uses.
Nolan: exactly
Michaela: You know that’s probably the most important. You know site runs faster, you've got a better UX. And you can develop faster because you're not waiting for graphic files to be made or …
Nolan: exactly
Michaela: And then also the… I don't know quite well the right technical word for this is you don't get pixilation.
Nolan: Yeah, you're right. It's a very scalable font. So there's no pixilation if you zoom up in resolution quite a bit. It's all got nice smooth anti-aliasing and everything looks like it should because it's a scalable vector graphic. There's no [crosstalk] [48:48] sort of thing.
Michaela: And it's… What's the word? I mean mobile ready or… What’s the word?
Nolan: responsive
Michaela: Thank you, yes responsive; responsive ready. I think that's how we phrase that.
Nolan: Response ready and mobile ready. Yeah people know what you mean.
Michaela: Yeah, so anything else you wanna tell us about Font Awesome and ColdFusion before we move to some of the questions?
Nolan: Not offhand. I think that's pretty good intro for folks to start using it. It really is as easy to start using as I mentioned. You download the files, include that one script line of code in your site header or footer, and you're off to the races. You don't have to get your entire website. If you have like one page in your admin screen, you wanna try using it on and see if it works. It'll completely work as a starting point that way and you can slowly sort of add it to the rest of your site as you move forward if you want. I really like it. It's one of my go to libraries now when I start a new project. I just grab Font Awesome and just drop it in.
Michaela: Yeah and those columns, they only apply really to the free version. Because you don't have to download the stuff if you're just using it five as C.D.'s and you get on a pro version.
Nolan: that's true
Michaela: And you don't get that. You can tweak without overhead in the pro version and reduce it if you needed to, so cool stuff. So ColdFusion alive; ColdFusion based podcast. Why are you proud to use ColdFusion right now?
Nolan: I think I gave the same answer last time. I just it's just…
Michaela: Yeah, but you might have a different one. It's Wednesday now. I [crosstalk] [50:26] on a Thursday afternoon before.
Nolan: That’s true. I'm a consultant for a living. So clients often call me and say, “Here's the problem we have. We need an app to do X, Y, Z. What do you think we should do?” And I do try to be as objective as possible and look at the problem. And look at okay, what really is the right way to go about solving this issue? I try to put personal biases aside. So if there really are supposed to use this technology, I'll try to steer them toward that technology. And nine times out of ten for what I'll call a typical web app, ColdFusion just gets me more done out of the box.
It just works. It’s Windows, Mac, and Linux compatible, so don't even have to worry about what kind of server they're running on. I get more done per line of code. There's less grunt work in the code. There's less silly older things that I just don't have to deal with like there are in some other languages out there. It really works. The fact that the Adobe version is supported by a big legit company makes it easy to get support from them and get questions answered. I know the product isn't going anywhere anytime soon. It's… I just I get more done with it out of the box for most projects. That's why I'm proud to use ColdFusion.
Michaela: So what would it take to make ColdFusion even more alive this year?
Nolan: That's a good question. I actually was at the Adobe office a couple of weeks ago talking to some of the Cold Fusion team about that sort of thing. I think what we could use are from the developer end. They're working on some stuff now to give it more language features that exist in other languages that don't exist in C.F. And so we're getting more of that in the new flavors of ColdFusion coming out soon. Like a true null operator. More things like member functions and other more O.O. centric features are coming in there. And I think developers will like that a lot. From the business standpoint, I think it needs more… what I'll call killer features. So things like the C.F. document tag is great or CF H.T.M.L. to P.D.F. is the newer version of it.
That tag is amazing because it will take any web page and turn it into a P.D.F. file. And yeah, you can do that in other languages. P.H.P. and whatever has P.D.F. libraries, but those are all written by third parties outside of Adobe. They're trying to shoehorn that functionality into a P.H.P. app. And they're sort of guessing on what they think the P.D.F. format does in a few spots. So those libraries work. But the more complex the web page gets, the quicker those libraries start to sort of peter out and you start to see the cracks in the armor if you will. Because Adobe makes ColdFusion and P.D.F., the integration there tends to be a little bit better, things work little bit more smoothly there.
So I think from the business side, we need more features like that that are more the killer features. Things like look you can do this in ColdFusion with one line of code and it's something that in another server side tool takes you 20 and 30 lines of code or cannot be done at all. So things like that will help it moving forward quite a bit. And we're getting a lot of good language improvements in the next version of ColdFusion coming out later this year.
I’ve seen them as demos of a few of those. I like those. Personally, I don't know that that's enough for the business folks that cut the checks for servers to want to upgrade. That's just my guess. But yeah, I'd like to see more big killer features CF P.D.F., CF document, the integration with things like Microsoft Exchange and other features like that just make it really easy to do. Kind of connect into some third party outfit and get a lot of stuff done in one or two lines of code.
Michaela: Well if someone was trying to convince their boss to upgrade ColdFusion. Apart from the new features, you’re just kind of making sure your thing is secure. If you're running C.F. 9 or 10 you’re… that ColdFusion is end of life. You shouldn’t think of running apps on that version.
Nolan: That's true too. [Crosstalk] [54:23] you make sure you're up to date and running a supported version of the product. So Adobe will answer your questions and… yeah.
Michaela: Right because I was talking to Charlie Arehart yesterday and he said there hasn't been a day zero exploit on the supported versions of ColdFusion for over four years maybe five years. Just compare that to some other languages. They get day zero exploits more than that.
Nolan: Yeah, that’s true.
Michaela: I’ll have to look up the stats on that so. So I know you're speaking in all these conferences. What are you looking forward to at the Into the Box Conference?
Nolan: Into the Box… So last year at Into the Box, I spoke last year and started to check out the whole conference. And honestly, I think Into the Box 2017 was the best ColdFusion conference I’d attended in at least three or four years. The content was all modern C.F. development cutting edge things. It was all tailored for people that are writing C.F.M.L. for their job. But they wanna be able to write things with all the cool bells and whistles that like the note folks have and the other tools that what we consider modern web development.
And Into the Box 2017 was just… it was two or three days of that kind of content the whole time. It was great. I left there feeling really excited about a lot of the stuff in the ColdFusion land. Not that you don't get that content at other conferences, it just it's more of a mix of other conferences appears advanced modern C.F. stuff. And then there's also bits of if you're not using a framework yet, here's how to do X, Y, and Z thing and I give a lot of those talks myself too.
I'm not bashing people that need that information. But for folks that are looking to do 2018 level modern web development, Into the Box was amazing for that last year and I'm hoping to get a lot more about the same this year from Into the Box. We’ll get more tuned up content that's a stated for that kind of environment. I think we'll see more of that there. That's just the world that the orders folks tend to live in a lot. So I'm really…
Michaela: Yeah, I found it very inspiring.
Nolan: Exactly, you were there too.
Michaela: I was there too. It's easy to talk to the speakers and don't forget the Mary actually band…
Nolan: of course
Michaela: … turned up for the special events. So it was a lot of fun as well as a lot of cool technical stuff and inspiring to see what folks are getting up to so great. Well if people wanna find you online, what are the best ways to do that Nolan?
Nolan: They can find me at South of Shasta.com; that's my consulting website. And also on Twitter as @South of Shasta. And I'm on GitHub as Nolan Erck; E-R-C-K.
Michaela: Excellent! Well really appreciate you coming on the C.F. Alive Podcast and good luck with your talks this year.
Nolan: Thank you very much. Always fun to talk with you on this.