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.

Your First Sinatra Apps

Sinatra is a DSL (domain-specific-language) for building websites, web services, and web apps in Ruby. A DSL is usually dedicated to solving a particular type of problem. SQL (structured query language) is another example of a DSL. SQL is used to facilitate interaction with relational database systems.

Sinatra is not a Framework like Rails. It doesn’t come with a pre-fabricated file structure or even a project folder. Sinatra is a lean language and is being used by companies like GitHub, Heroku, BBC, ThoughtBot, and Songbird.

The two main approaches to building Sinatra apps are classic and modular. In classic mode you just require Sinatra and start defining end-points. Classic applications are often single-file, standalone apps that are run directly from the command line or with a minimal rackup file. In modular mode you explicitly subclass Sinatra and build your app within that scope. You would take a modular approach if you wanted to build many small apps within a parent app. Think about mixins in Ruby, they’re just little modules(blocks of code) you can use throughout your app or you can have an entire app of just interacting mixins!

So why not use Sinatra for all of your apps and be done with it? Every technology has it’s place. Sinatra is usually reserved for smaller apps. If you want to build the next WordPress you could theoretically do it in Sinatra but using Rails would be more appropropriate. Why not just learn Rails from the outset? Same reason you probably shouldn’t try learning JavaScript as your first programming language. Learning Ruby is more practical and gives you a fundamental grasp of using a language to communicate with a machine. I’m so glad I learned Ruby before tackling other languages. Sinatra is less robust and is great warm-up for learning Rails.

So how do you install Sinatra? Easy! Type gem install sinatra anywhere in your command line. You should also install the Thin web server by typing gem install thin. Why Thin you ask? Thin is a Ruby web server that glues together 3 of the best Ruby libraries in web history:

  • the Mongrel parser, the root of Mongrel speed and security
  • Event Machine, a network I/O library with extremely high scalability, performance and stability
  • Rack, a minimal interface between webservers and Ruby frameworks

Which makes it, the most secure, stable, fast and extensible Ruby web server bundled in an easy to use gem for your own pleasure.

Let’s build our first “Hello World!” App! Jump back to your command line and make a directory for your sinatra app:

Open the folder in your text editor (sublime . ) and type the following:

Now make sure the file is saved and type ruby server.rb back in your command line. By default the application will listen on port 4567 so go ahead and open your web-browser and navigate to http://localhost:4567/ Your sinatra app should respond and you should see “Hello, world!” in the top left of your browser window. Congrats! Your first Sinatra App!

So what’s this sorcery? Sinatra separates the developer from middleware called Rack. No, nothing to do with Tyga’s hit single ‘Rack City.’ Rack provides a minimal interface between web-servers (e.g. Thin) that support DSL’s. Sinatra is going to use Rack to talk to Thin (our web-server). Essentially Sinatra speaks Italian, Rack speaks Italian and German, and Thin speaks German. We have to use Rack as our translator.

Sinatra DSL syntax is typically expressed in the form: verb ‘route’ do. We’re instructing our application to respond to HTTP GET requests to the path ‘/’; our apps response (behavior) is inside of the block. So when a server (Thin) hollers atcha app, your app responds: “Hello, world!” This block is appropriately named a method call. In Sinatra, a route is an HTTP method paired with a URL-matching pattern. Each route is associated with a block:

In Sinatra Routes are matched in the order they are defined. The first route that matches the request is invoked. This means, if you have another get ‘/’ do request beneath your Hello World request, the Hello World will be the only one triggered for this ‘/’ request.

rock-paper-scissors

Now let’s put some of what we learned to use and build a simple Rock Paper Scissors web-app! In your command line control-c out of your server connection and rename your server.rb file to game.rb (mv server.rb  game.rb). before we start processing routes we have to set up a before block with plain text responses and a hash with all viable moves:

This code will be stored in memory before our route is processed. Let’s set up our route and set a player_throw:

The most important thing to understand in this program is the params hash, the rest of the code in our block will be basic ruby. You’ll be using params in pretty much every Rails and Sinatra program you write. The params hash stores querystring data. What the heck is querystring? A very simplistic explanation is, it’s the last piece of data in any URL (Uniform Resource Locator). A more accurate definition is: A querystring is a set of characters input to a computer or Web browser and sent to a query program to recover specific information from a database. On the Internet, a querystring (also called an HTTP querystring) is part of the set of characters automatically input in the address bar of a dynamic Web site. For example, consider the following URL:

:www.bookfinder4u.com/search_author/Ernest_Hemingway.html?sort=date

The querystring in this example consists of one field or variable, technically called a key in this context (the word “sort”), followed by an equals sign (=), followed by the value for that key (the word “date”). A querystring may contain several key-value pairs. When there is more than one key-value pair, they are typically separated by ampersands (&). So params is just a Hash with key value pairs. And we use this hash to pass along information from one request(page) to another. This will make more sense as we finish building our first web game.

The only thing left to tackle that might seem unfamiliar is the ‘halt’ command. It’s pretty simple, processing will stop immediately once the halt command is called. The player_throw will essentially be fixed and placed at the end of your URL. The computer_throw is random (.sample). Yall should be able to work your way through the rest of the logic.

So that’s our basic game! Let’s test it. Jump back into your command line and type ruby game.rb to establish connection with your server. Once you’re connected open your browser and navigate to http://localhost:4567/throw/rock or http://localhost:4567/throw/scissors or http://localhost:4567/throw/paper . Notice how we (the player) is inputing the throw in our URL, and the computer (the program) is generating it’s own throw and comparing it with ours. Keep refreshing your browser and you’ll see different results. What do you think you can do to set off halt 403? Just type anything besides our three set inputs at the end of our URL.

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!

Why learning to code can be so difficult, oh because it’s so easy!

I actually wrote this around 3-months ago, forgot to post it, and just now read through it and decided it might be a worthwhile read for the struggling developer. As I move ever deeper into my programming career I still believe that programming is simple and should be approached with a simple open mind.

If you’re like me, you started learning to program later in life than the average bear. You were searching for something that would be both intellectually stimulating and creative… very difficult parameters for any standard career to meet. But the field of programming is such an outlier relative to anything else out there in the ‘real world’ abyss.

Being a decent programmer has very little to do with learning the syntax of a language and very lot to do with solving problems. You hear this mantra from almost every potential employer, “we’re looking for problem solvers.” The only problem is very few people posses this very fundamental skill. Why? We all have to solve small problems growing up. You have a flat tire and no cell phone reception… problem! You lose your house keys and phone while out getting hammered… problem! You’re kind-of ex-girlfriend sees you hooking up with another girl at a soccer game… you get my point. Maybe we’re just better suited for solving immediate pressing problems than having to sit down for hours and break an encryption app into it’s components.

I’m 10-weeks into my programming career and every day is still very challenging and requires laser like focus for extended periods of time if you want to keep up with the pace. My fellow classmates, some of the most intelligent people I’ve ever encountered seem to struggle in one way or another. The first 5-weeks of training seemed un-bearable at times. Objects as classes, methods defining behavior, instance variables defining state, dependencies, readable and writable attributes, testing methods, throwing pry bindings all over the place…. and on and on it goes with seemingly no end until you slap into the git wall and start encountering merge conflicts and failed pull requests. If you told me I would have a fundamental grasp of what I just listed 10-weeks ago, I would probably optimistically nod and doubt the possibility. But as with most things, when you apply yourself, and I mean really apply yourself good things happen.

What I’ve learned from myself and the brilliant people I’m surrounded with on a daily basis is, you have to slow down to go fast. Solving programming related issues doesn’t always come down to high IQ. Most often newbs like me spend hours upon hours on a small component of our applications only to see a more experienced programer implement something so simple you feel insulted by it. Deep down you know for a fact you could have come up with the same solution and frankly there was nothing complicated about it. It was just a different way to approach the problem. I’ve noticed that 9 out of 10 times when I can’t seem to solve a problem it’s not because I don’t have or posses the tools it’s because I don’t take those extra 5min to draw out the problem and each step on a piece of paper or just pseudo code it. This is where slowing down to go fast comes into the picture. A newbs instinct when confronted with a problem is to start typing things up without really understanding where they’re heading. Sometimes it works, which may only lead to developing a terrible habits. A more patient focused individual will sit down draw/sketch out the problem or at least one of the components and then start actually writing code.

Amazingly the fine folks at Turing warn the newbs countless times about the hurdles they are inevitably going to encounter and yet very few actually listen. Granted some people have a better ability to hold on to process and evaluate information. They’re just better thinkers, less cloudy in the head but even they’re not immune to tricky problems. Inevitably every seemingly complex problem I’ve solved turned out to be relatively simple, I just didn’t bother to incrementally take a linear step-by-step approach to solving it. I’ve since improved greatly. It’s a peculiar skill to acquire. Programming is easy it’s just not what most people are used to doing.

Humans are used to communicating with other conscious humans, not with algorithmic machines. We could easily tell a human to go to the supermarket and pick up a list of groceries but imagine telling that to a machine with it’s own language and operating system? What takes a few sentences for humans takes maybe a hundred lines for a machine. And being able to break down the steps of going to the grocery store choosing certain items in specific locations, putting those items in the cart, taking them out, putting them on the register table, waiting for them to be scanned, bagging them, paying for them, walking out of the store to the car, opening the car… you get where this is going. And that’s not even a fraction of all of the commands you have to tell your machine in order for it to properly execute. But when you think through it you realize how easy these commands are. Does it take time? Yes! But it’ll take far more time if you don’t think through the whole process in very tiny detailed increments. The newb out of the gate will skip and not think through the detailed algorithm, the master will. That’s why hard coding something that works, even if it’s 100 lines, is far better than 15 pretty lines of janky-ness. The 100 lines will easily be refactored into less than 15.

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.

Sur-Fian-Do

I took up surfing around 4-years ago, which means I’m a novice to the sport. At the time I was living in NYC and day-trading full-time, I was stressed and not really happy with my situation. Since then I’ve taken 5 surf trips to Costa Rica and 2 to Nicaragua. Yes, I’m addicted and can’t imagine my life without surfing. Similar to learning how to code, learning how to surf is tremendously challenging and discouraging at first. You’re perpetually losing the war but manage to sneak in a winning battle every now and then. And every little battle you win is oh so sweet.

One experience from my trip really strikes a nerve. I was surfing this rock-bottom left point break. Epic day! Water temp had to be close to 90F. The surface resembled glass, kinda like a Van Gogh painting. I could see tropical fish swimming around my legs, swore I saw Nemo chilling chewing on some kelp. The color of the water was dark-teal but every time a wave would crash it would change to a light baby-blue. It seemed more like the Caribbean than Nicaragua. I was surfing in Gatorade and it was so fucking gnarly.

The swell was coming in hard and even though the waves were mooshy, they were still overhead and pretty powerful. Did I mention the whole sea bed is covered with rocks and poisonous urchins? As a surfer you have no choice but to accept certain risks: sharks, urchins, drowning, and worst of all ear-sunburn(horrible!). I made a classic rookie mistake that day. I didn’t paddle hard enough for the first wave of the set, so the wave dragged me right to the breaking zone without me actually getting on it. This meant that by the time I turned around to paddle back to the lineup there were another 5+ overhead monsters ready to punish me. Remember that rock bottom I mentioned, well it gets pretty shallow as the waves push you closer to shore and you really don’t want to make friends with the spiky urchins.

That day I was riding a board that I could barely duck-dive, so getting myself and the board underneath each wave just physically wore me out. After the first few tries I decided to ditch my board and duck-dive underneath the sets without it. I was relying on the leash to keep my board tethered, poor decision. I dived underneath the following wave but it was so powerful it ripped my leash and dragged my board to the rocky shore. So now I’m a floating duck in the impact zone. I can’t paddle to shore because of the rocks and I can’t paddle out to the boat that brought us there because the push-pull of the crashing waves is too strong. The boat can’t just come get me, the waves would toss it like a rag doll. My fellow surfers can’t just paddle up and help, nor would I want them taking such a risk. It took me a few seconds to evaluate all of this and realize how alone and accountable I was.

I’m exhausted and gasping for air after every duck-dive. I don’t have the energy to swim out of the impact zone so all I can really do is sit there, take it, and wait for a lull. I remind myself how important it is to stay calm and patient. I have enough experience in the water to not panic, even though my body is sensing very imminent danger. I take a long super deep inhalation, slow deep-exhalation, and inhale before my next duck-dive. Even though my mind starts having unpleasant thoughts, I trust my myself, I believe that as long as I stay calm and act in a way I know to be safe I’ll be ok. Yes it feels as though I can’t hold my breath for the next duck-dive. My body might give-in to the thirst for oxygen, open-up, and start inhaling buckets of saltwater. But that’s bull-shit, my adrenaline is so high there has to be plenty survival reserve in the tank.

The ocean calmed down and I was able to slowly tread to a safe place for the boat to come scoop me up. I borrowed that board I just lost, so I felt compelled to go find it. After we spotted the board, the boat dude dropped me off near shore in a safe sandy area. Surprisingly the board was in ok shape, just one missing fin (out of 3). To be honest I wasn’t sure if I should paddle back. My flight was scheduled for the next morning and this was my last day to surf the best waves of my life. I also didn’t want to leave on such a bad note. Of course I was tremendously grateful to be alive but at no point did I ever even for a sec question whether I was going to surf again. Surfing is my love, my joy, my passion! If anything, my control of the situation proved how much of a surfer I am. So you’re damn right I paddled back out. I thanked the ocean for taking it easy on me, put the situation behind me, and had the time of my life.

Database Structure

We learned how to design and model a database with this nifty database schema tool. First understand that this tool creates a crude abstraction of what a table and its relationships would look like inside a database. If you’re using ActiveRecord (Object Relational Mapper) like me, you’re essentially creating tables (Objects) that contain columns (Attributes) and drawing relationships between rows (Instances-Of-Object) in those tables. 3 very common relationships are: one-to-one, one-to-many, many-to-many.

one-to-one

Screen Shot 2015-06-05 at 3.28.12 PM

Check out the 2-tables above. Each have their own unique ID or primary-key. Let’s assume 1-student has_one address, and that 1-address belongs_to 1-student, that’s a one-to-one relationship. Their needs to be a link set-up between the students-table and the addresses-table. We draw this link by creating a foreign-key (student_id) in the addresses-table. Convention tells us that foreign-keys usually live in the table that “belongs_to” another table.

one-to-many

Screen Shot 2015-06-05 at 3.38.57 PM

1-student can take many courses, this establishes a one-to-many relationship. A course belongs_to a student and a student has_many courses. In Object Orientated Programming lingo: a single instance of a course belongs_to a single instance of a student, and a single instance of a student has_many courses.

many-to-many

Screen Shot 2015-06-05 at 3.53.09 PM

Many-to-many relationships could get pretty complex. If we throw student enrollments into the mix. 1-student can enroll in many courses, meaning 1-student has_many enrollments therefore establishing a one-to-many relationship between the students-table and enrollments-table. Great! But what about establishing the relationship between enrollments and courses? Doesn’t a single enrollment have a course to be enrolled in? And here’s where it begins to get fuzzy.

Screen Shot 2015-06-05 at 3.58.52 PM

As shown above, we could create a foreign-key (course_id) inside of our enrollments-table, but as we create more tables in our database and form more relationships we’re going to encounter many problems, problems that are outside the scope of this post. But here’s what our database would look like if we introduce a teachers-table.

Screen Shot 2015-06-05 at 5.10.47 PM

A teacher belongs_to enrollments and courses, therefore both have a teacher_id as a foreign key. Look at how sloppy this is beginning to look imagine how sloppy this is going to get when we inevitably start adding more tables like: schools, advisors, sports-teams etc… We need to take a step back and re-think the structure of our database. Things started getting messy when we introduced enrollments. Since we can logically infer that enrollments is going to contain courses, we can turn enrollments into a join table.

Screen Shot 2015-06-05 at 5.21.17 PM

Now doesn’t that look a whole lot sexier? Now students can have many courses through enrollments and courses can have many students through enrollments. Enrollments belong to students and also belong to courses, sticking to ActiveRecord convention. As long as we set up this relationship in our app, ActiveRecord will allow us to take an instance of a student and access her courses through enrollments. How about teachers you ask.

Screen Shot 2015-06-06 at 1.41.07 PM

This way enrollments ties students and courses together. Join tables are your friend, use them wisely.

Accelerated Learning

The first week of Module-2 at Turing is pretty stressful. You’re bombarded with information the whole week. One student said it best, “I feel like the instructor just took a dump in my brain.” The first module at Turing emphasizes logic and problem solving. The second is geared more toward understanding the web and the applications that live on the web. The first Ruby framework you begin learning is Sinatra and then transition into the mother of all Ruby frameworks, Rails! Over the course of intermission week we were given a simple tutorial that taught us how to build our first Sinatra app called Task Manager.

Day-1 we were doing a bunch of HTML and CSS work, getting comfortable with styling our Task Manager before we move on to more back-end type stuff. Our homework was to style our Task Manager using bootstrap or foundation. I chose a free bootstrap template and really enjoyed doing some front-end work for a change. Below is a screen-shot of my homepage.

Screen Shot 2015-05-22 at 2.46.19 PMDay-2 introduced CRUD (Create, Read, Update, Destroy). If you think about it, from the users perspective most applications have CRUD functionality. We also discussed ‘How The Internet Works.’ In a nutshell, the internet is just a shit load of servers passing around information to other servers. When I say ‘servers,’ I mean computers just like the one you’re using. Our personal computers might run OSX or Windows, some of these servers run Ubuntu or Fedora. The software we might run is Safari, Microsoft Word and iTunes. Examples of software a server might run is Apache, Thin and Rack. Everyone who uses the internet essentially relies on remote servers that are dispersed all over the world! You can even turn your personal computer into a server if you like.

Day-3 we learned about model testing, which is really no different than regular Ruby unit testing. We also briefly covered Nokogiri. Nokogiri is some cool shit. It gives you the ability to extract and parse raw HTML from any web-page. This can be very powerful if a particular app you like doesn’t offer an API because you can extract their data and deliver that data on your platform. You can also use Nokogiri to target specific data by using that data’s CSS selector. So if you would like to extract all <li> elements from a page, you would just: page.css(‘li’). Capybara is used for feature testing. Feature testing allows you to test how a user interacts with your web-app. You can write a test that says: visit “homepage”, fill out a form, hit submit, redirect to “index page” and expect the index page to have the submitted content. After you’ve written the test, the code implementation becomes much easier because you know exactly what features you want your app to have. Now you’re just left with writing the code to get that test to pass. This is called test driven development and anyone who calls themself a developer uses this method. Our homework was to work through an SQL tutorial.

Day-4 was by far the toughest. Databases are the foundation of all web applications and being a back-end developer entails working with them extensively. Databases allow us to store, sort, calculate, and retrieve data. First we learned SQL (Structured Query Language). SQL is a programming language that allows us to interact with a database like PostgreSQL, MySQL, Oracle, MS SQL Server, and SQLite. If you’re interested, here’s a very basic hand holding tutorial. Next on the list was Sequel. Sequel is an ORM (Object Relational Mapper). In plain english, Sequel converts rows in your database into objects. Since Ruby is an Object Orientated Language, a Rubyist can quickly take these objects and manipulate them using basic ruby methods. Our Task Manager was initially set-up to use YAML:: Store in place of a database. YAML::Store allows you to store and access data in a text file. We converted Task Manager to use Sequel as our database language and SQlite3 as our database. This was super challenging because all of our controller methods and tests had to be configured. The class was super chaotic as everyone scrambled to bring their app back to life.

Day-5 well that’s today! Fridays are chill days filled with student hosted lightning talks, guest speakers, personal project work, blogging, electives, and student led study groups. Here’s a list of the lightning talk topics for today:

  • Code like it’s 1999
  • Animation with Snap.js!
  • China’s Great Firewall
  • Imposter Syndrome
  • Stuff, Things & the Internet of Things
  • The Illusion of Free Will
  • Ruby Warrior (Debugging and Refactoring)
  • Learning how to Learn!
  • Wine 101

All of them were entertaining and informative as usual. At Turing we not only learn how to code and collaborate but we also strive to improve our public speaking skills.

Deja Vu

Intermission week. My family is in town. I just completed my last week of module-1. Even though I was far more prepared for the final assessment I was still a bit anxious. How hilariously upsetting would it be if I couldn’t pass the final assessment after just repeating module-1, and after having passed it the first time! Fortunately my worries were quelled, I’m moving ahead.

I learned so much more about Ruby this module, and programming in General. I completed every single challenge and solo project without relying on others. I gained a better grasp of the Ruby Object Model, which will only aid me in learning other programming languages. I even re-built Enigma without one initialize method or instance variable, all class methods, teaching myself a functional way of programming in the process. Building Sales Engine again helped me understand the inner workings of databases, and will surely help me with Active Record in Rails. Last module I barely had time to complete any morning mini-challenges. These are small Ruby challenges, assigned almost every morning for all Turing students to tackle with their Posses. Posses usually consist of 1-person from each module and Posse time is every morning from 8:30-9. This module I was able to complete several! I even had time to start this blog which I been meaning to do forever!

One of my fellow classmates has been meaning to start a blog for the longest time but hesitates because he feels he doesn’t have anything of substance to write about. I had the same dilemma starting out. Why write just for the sake of writing, right? Wrong! Unless you’re a gifted writer or seasoned blogger, you’re best work will come over time it’s likely not going to be your first few posts. You have to get comfortable with consistently writing. As with anything, you need a little time and practice to get good results. You can just practice writing blog posts and never publicly post them, but that’s so unlike a techy person. Mark Zuckerberg admitted how many mistakes Facebook has made to get to where they are, and it’s a very long list. But he also explains how important it is to make those mistakes and learn from them as quickly as possible. The more you expose yourself, whether it be blogging or public speaking or whatever, the faster you’ll be able to find your style of doing things (comfort zone) and what works. And let’s be honest, unless you’re a famous person it’s going to take some time for anyone to catch on to your blog and start following. Having a bunch of blog posts in inventory is also a good idea for SEO purposes, more on that in later posts.

These past 5 posts have been more personal and less educational. My goal was to blog about my experience at Turing so as to help others considering this exciting but very challenging path. Module-1 is arguably the most important module at Turing, especially for inexperienced aspiring developers. Coming into it with no experience is very tough and there’s more to learn than you can imagine. I hope I’ve shed some light on the process. Module-2 is less logically intensive. We’re going to learn web frameworks like Sinatra and Rails. I’m super excited to build web-apps. I just recently completed my first very simple app in Sinatra and launched the bad boy on Heroku, I welcome you to check it out! It’s not much but it’s my first web-baby. In essence, the internet is about sharing knowledge and information. In future posts I would like to get a tad more technical and educate you guys/gals about what I’ve learned. So… less self-reflective rant and more solid information!