Foundation-Icons and Google Fonts

In the last post I outlined what the Asset Pipeline is, how it works, and why it’s important. This post I’ll explain web-fonts, icon-fonts, and how to get both to play nice on Heroku in your asset pipeline. I’m going to assume that you use Sass for your stylesheets and every one of those stylesheets have the .scss extension. So make sure you have the sass-rails gem in your Gemfile. Since Rails 3.1, new Rails projects will be already configured to use Sass. Let’s rock!

What are Web-Fonts?

Web-Fonts are fonts that don’t exist on your system, they exist on some server somewhere. They’re downloaded by a user’s browser while rendering a web-page, kinda like linking to a remote image that you don’t have saved in your local environment. Web-Fonts can slow your sites load time because they have to be requested from somewhere. Optionally you can usually download a web-font and add it to your project, if you want to maximize performance.

Integrate Web-Fonts into my app please

Google recently released this sweet Web-Font: Lily Script One. And I wanted to take it for a test drive. @import allows stylesheets to import other stylesheets, it’s basically a link. So google provides this link: @import url(http://fonts.googleapis.com/css?family=Lily+Script+One); The classic newbie(myself) mistake is to throw that to the top of the stylesheet you happen to be using for styling these icons, wrong! You want to throw that @import link into your scss manifest(applications.scss).

What are Icon-Fonts?

Icon-Fonts are just fonts! However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style your regular text which has made them very popular on the web. Icon-Fonts have so many awesome features like easy size, color, and shadow manipulation. You basically style these icons the same way you would style Text-Fonts. I’m going to show you how to add foundation-icon-fonts-3 to your asset pipeline, but will a little shimmy-ing this technique will work for any icon-font set.

First visit the foundation-icons link above and download the whole set. You’ll get a foundation-icons folder with a bunch of files and an svg sub-folder. Copy the whole foundation-icons folder and paste it inside the assets folder of your Rails project. Change the name of the folder to “Fonts”, Rails convention. Inside your Fonts folder add .scss to your foundation-icons.css. In fact, all of your .css files should have a .scss extension. This allows you to use both css and scss syntax(like nesting) inside your stylesheet and the Sass pre-compiler works its magic.

Next, open your fondation-icons.css.scss and notice how it’s @importing a bunch of other files with funky extensions (.eot .woff .ttf). For development this will work fine but for production this will not compile properly. We need to tweak the paths to look like this:

Don’t hold me to this, but what I believe is happening is this is creating relative-path url’s for each of the files. E.g. url(/assets/fonts/foundation-icons.eot). Last thing left to do is require this file in our stylesheet manifest(application.css.scss) like so:

Honestly, I figured this last part(*=require) wasn’t necessary. The Fonts folder is in the right place and the foundation-icons.css.scss file is importing everything it needs. I tried many many different ways to make these font-icons work both on my local server in development and in production. Foundation docs discuss nothing about integrating font-icons into your asset pipeline, even though they tout how compatible their framework is with Rails. What I’m doing works both locally and on Heroku, and I really don’t feel like digging deeper into the abyss.

Enter Font-Awesome!

In Rails projects the awesomeness of font-awesome is unmatched. All you need to do is add their gem, yeah they have a gem!, to your Rails gemfile and import their icons like so:

That’s it! That simple

Asset Pipeline

I once spent roughly 3.5 hours trying to figure out why my custom google font and foundation-icons-3 would not render in production on Heroku, and you know what? I learned a lot! Turns out there’s this thing called the asset pipeline, not the kind you’re offered at a rave or the world class Hawaiian reef break, and it determines whether your Rails app is worthy of style when you push it to your production server.

Turns out, the asset pipeline is one of the simplest and least understood rails features for developers. Instead of me just telling you how to make your custom web-font and font-icons work on Heroku, which I will in part-II, I rather compress the brain-drain I just experienced into something of value. Keep in mind this is just a high to mid-level overview, we’ll get into more tricky aspects in part-II.

What is the asset-pipeline?

Your Rails application has a folder called “assets”, assets are just all of your css, javascript, and image files. Think of it as everything that’s going to turn your plain ol HTML page into a stylish, interactive beauty. The asset pipeline serves 3 very important purposed: precompiling higher level languages, concatenating assets, and minifying files.

Precompiling

The only native language to most browsers is JavaScript, but browsers also have HTML and CSS parsers. These are lower level languages for the browser. Your stylesheets written in Sass and scripts written in CoffeeScript have to be pre-compiled(translated) into these lower level languages for the browser to properly render your pages.

preprocessor

Concatenating

Any file you create inside the assets folder essentially becomes part of the asset-pipeline, but you should stick to convention and add CSS files to the stylesheets folder and JS files to the javascripts folder. There’s 2 dominant files you need to pay attention to: application.js and application.css. These files are called Manifests, no relationship and not nearly as destructive as the Manifest Destiny. Essentially each of these files pull in(concatenate) all other files with like extensions. It’s actually the Sprockets Gem that’s doing this magic. For example, if you have 5 custom CSS files inside of Assets, the application.css is going to pull in all of those files and create one big file. How? The require_tree . directive, inside the Manifests is a command that says “get over here all you like files.” The require_self directive just says: “every bit of code inside this Manifest file is gonna join the party as well.” Why? Because concatenating things into one file for the server to hand to the client(browser) improves Performance! In the JS Manifest the directives begin with //= and in CSS with *= , they essentially do the same thing.

Concatenating-Puzzle

Minifying

Lastly, the asset-pipeline is responsible for minifying these Manifest files. Think of how much extra space and comments each one of your stylesheets and JavaScript files contain, and picture removing all of that, that’s what a minified file looks like. Long variable names are also chopped down. The functionality ends up unchanged, the code is just smooshed together like that house party I was at last week. Why minify? Performance!

minify-js-before-after

Awesome, but how does your application actually find these Manifest files? Magic! Along with link_tags inside your application layout: app/views/layouts/application.html.erb. Consider this file a universal default master file for all the views. It’s sorta like a Manifest file in the sense that it pulls all of the HTML from each one of your view files into itself by way of <%= yield %> (if you’re using erb as your templating language). We link stylesheets and scripts in the <head> of this file like this: <%= stylesheet_link_tag “application” %>. This points to the Manifest CSS file.

Sometimes just the order in which you require files might be incorrect, which causes certain files to override others. This is quite possibly the most important and overlooked section in Rails docs:

Directives are processed top to bottom, but the order in which files are included by require_tree is unspecified. You should not rely on any particular order among those. If you need to ensure some particular JavaScript ends up above some other in the concatenated file, require the prerequisite file first in the manifest. Note that the family of require directives prevents files from being included twice in the output.

 

In conclusion, you’re application layout file has a link pointing to your Manifest files. These Manifests should already be requiring all of your assets in the order in which you intend. Roughly 90% of problems I’ve seen people have with the asset pipeline come from improperly requiring files or frameworks from within their Manifests.

Sketch A Logo

My full-stack ambition has led me to Sketch. I always wanted to learn how to use photoshop or illustrator but never quiet had the time. I started using Sketch a few weeks ago after stumbling on this article. Sketch is a fairly new designer-centric application that’s really gaining popularity. Sketch is primarily focused on user interface design. Everything is already in vector, so you don’t have to worry about designing for multiple devices, and delivering assets is a breeze. It’s super lean and intuitive, the interface is bare bones and not nearly as cluttered as photoshop and illustrator. Programmers are notorious for opposing anything that has to do with design and with bloated adobe products you can’t really blame them. I argue that the wider your range of expertise the more valuable you are. And honestly making something like a neat logo, as I’ll demonstrate in this post, isn’t terribly difficult in Sketch!

Let me briefly discuss some of the awesome features in sketch that any full-stack developer would appreciate. If you’re wireframing in Sketch you don’t have to worry about your design translating to CSS. So all of the textures, gradients, shadows etc… are easily coded for. This is because all of the tools in sketch can only produce attributes that can be converted to CSS. With photoshop you can go crazy with all the options available and have a very hard time translating your outlandish design to CSS. If you’re familiar with Rails you know how many decisions are made for you so you don’t have to waste time, Rails confines you but in a very good way. Any design in Sketch can easily be exported to the web. Many designers use ~3 different apps for 3 different tasks: wireframing, UI design, and vector logo graphics. Sketch is a one stop shop for all 3 of these tasks. Lastly, familiarity with grid systems is essential to building responsive sites. Sketch has a customizable grid system. Most of the time you’ll probably be using the default 12-columns but sometimes you’ll want to fit more content on the page and go with 16-columns.

Screenshot 2015-08-07 15.39.40

These are the 2-logos I was able to sketch, with Sketch…. hi-hat! I’m currently a student at Turing so I figured why not redesign the school logo. Turing is mainly a back-end developer program so design excursions like this are usually side projects. So how does someone with zero experience with this software quickly build a neat vector logo? Designing like anything else is essentially problem solving, and the best approach is to break everything down into tiny manageable chunks, just like programming. I sketched some stuff in my notebook to kinda have an idea of what I wanted and took it from there.

I split the logo up into a bunch of pieces: circles, lines, and text. Creating and styling each element taught me a little bit more about the software and anything I got stuck on I would google or find the 1-person I know who uses it. The biggest challenge was getting text to neatly wrap around an oval or any shape for that matter, thankfully Sketch has something called “Text on Path.” Believe it or not the big-logo on the right consists of 22-peices, 19-peices for the one on the right! After building all of the components separately I chunked some of them together for the assembly process, and wa-lah!

Community

I’ve been pondering about community lately. According to Abraham Maslow, satisfying the need to belong is a prerequisite to developing self-esteem and confidence, which in turn is a prerequisite for self-actualization – the motive to realize one’s fullest potential. These higher order needs require a social context, which is why belonging supports self-esteem in Maslow’s Pyramid.

HeirarchyOfNeeds

The need to belong is driven by evolutionary factors. It is a powerful, fundamental, and extremely pervasive motivation. Belonging helps people in times of trouble. It provides a place to share good and bad news and to avoid loneliness and feeling unloved. It’s the place to get the information and the real interpersonal rewards that build confidence and self-esteem. Belonging’s powerful effect on productivity is well-studied and understood in business and industry forums all over the world.

Turing has a strong blossoming community of students, instructors, teachers assistance, alumni, and mentors. Even though I’m taking this module off, I still visit Turing a couple days a week to get work done and spend some time with the hommiez. I never go with the intention of pairing with anyone but somehow end up pairing anyway, learning a shit ton, and feeling super fortunate to have access to such a cool place. Big shout out to Jeff Casimir for not casting me out into the desert. Since so many people from the Turing community have helped me solve so many different problems, I figured instead of just thanking them I would praise through presentation. So let’s reminisce.

Before Trey Tomlinson, a tall Scandinavian looking dude who just landed a sweet job at CaptainU, came into the picture I wasn’t sure how to use RSpec to test a change to my test database. Here’s an example of how I tested a user successfully registering.

Screenshot 2015-07-31 12.36.00

I was just using the within block and setting an expectation of what should appear on the page, not really checking whether a new user was actually saved to the database. Here’s the Trey effect.

Screenshot 2015-07-31 12.34.39

Orion Osborn recently graduated from Turing and is now working for Invoca, pointed me to a great tutorial on Heroku on how to set-up paperclip with Amazon S3. He also patiently watched in horror/confusion when I showed him the dark side of sending AJAX requests. Turns out when your AJAX is set-up improperly and you’re trying to make any changes to your database from within a pry-session, your pry-session hangs and you can press Control-C all you want but unless you kill all of your Ruby processes (kill -9 ruby) that facker won’t let you out! Alan Smith, Turing grad works at LivingSocial, was fortunate enough to have witnessed this sorcery first hand and suggest killing all Ruby processes.

DJ Greenfield, recent grad with Zeus like hair, actually got the ball rolling on setting up that AJAX request so I’m not sure whether I should hug or kick him. He also helped me pimp out my images with JQuery for this dinner-dashy rails-app I’ve been working on. The basic idea of what I was trying to accomplish: When a user hovers over a category-image, I would like the opacity of the image to cut in half and the category name to appear as a link to that category’s-show-page. Seems simple enough right? F**k No! Along with DJ I had to recruit Justin Holmes (Former Dolphin trainer for the NASA Dolphin In Space Expedition and contestant on The Bachelor) for this delicate affair. I think we all learned more about JQuery and CSS inheritance in those couple hours than in the past few months! Everything works except the text(category-name-link) is inheriting its opacity from the image making the image and text fade upon hovering….. Brutal if you ask me, but I’ll move some divs around later on tonight and get it working. Once what’s in the computer behaves the way I want it to, I’ll write an educational blog post.

Even though Sally MacNicholas has to manage 2 kids, she still has the tenacity to produce the best API curious I’ve seen this module. She basically consumed Instagram’s API and reproduced the user dashboard page, it looks better than it looks on the real Instagram! She also took some headshots and cool pictures of Rob, Vanee, and I. I still haven’t received them, a-hem a-hem, but I have faith in Sally.

Robert Cornell, student at Turing, father of 2 teens, recently re-married, and co-founder of a tech-start-up is my friend and Turing lunch buddy. Tough to believe how he even has the time to do anything! Rob laid the guilt trip on real thick when he found out I was taking this module off! He’s since calmed down, maybe because I show up and have lunch with him from time to time. Maybe because he spent all of last week hyping up going out on Saturday and backed out 5-hours before game-time.

Regis is the new kid on the block who’s quickly made it to my list of top-five people at Turing I would do acid with. I feel like I become a smarter bohemian every time I speak to him. Our most recent conversation started with Node.js being single threaded, led to people resembling virtual machines, and ended with everything just being a box within yet another box.

Drew Reynolds is the go to for creative sass on the web, start-up knowledge, and a sick new techno/trance mix to pump out code to. When he posted a link to p5.js last week my mind was blown yet again. I’m totally into front-endy stuff and that library is just a treasure.

That rails app I was working on, I set it up in a way that forces an Admin to either add a new item to an existing category or create a new category for that item all from one form. In this form I had a dropdown menu that contained all of the existing categories and a “New Category” place holder. So I said to myself, wouldn’t it be sweet if you could click on “New Category” and have an input field magically appear? heck yeah it would. So Patrick Medaugh, myself and JavaScript’s bastard child JQuery went to work. An hour later, we made magic happen.

Screenshot 2015-07-31 21.40.42  Screenshot 2015-07-31 21.35.53

I started using Sketch a few weeks ago and I must say it’s pretty awesome. If you’re into graphical design UX/UI stuff I would highly recommend you check it out. I was struggling to figure out how to wrap text around curved lines or shapes. There’s not too many designers a part of the Turing community. Thankfully Cara Jo, a denver based web-designer happened to join the Turing community. I messaged her asking if she used Sketch and how I could get this darn text to hug stuff! Short story shorter, she helped me get it to work and I produced this masterpiece.

marz

Incredible isn’t is? So that’s a very brief case study of my past few weeks within the Turing community! If you’re not currently a part of a community Maslow thinks you should probably find one.