Game and Web Developer

Design. Code. Graphics.

[nejuf]

Ruby vs Python

Having completed a great EdX.org class using Python, I was able to make a lot of comparisons between Ruby and Python. I initially planned to list some pros and cons for both languages, but what could be a "con" in one usage or context could be a "pro" in another. So, I will instead present my likes and dislikes about both languages, which is more true to my goal of determining which language is better for the efficiency of development and the reliability of the end product.

Ruby Likes

Everything is an Object

Object-oriented programming is easy to understand, extend, and divide. Ruby embraces OOP and makes everything, including classes and data types an object. This makes some very elegant solutions possible, such as automatically converting a Fixnum into a Bignum when the integer value becomes too large to store in 64 bits (on a 64-bit system).

Implicit Method Invocation

In programming, we call methods a lot. We want our program to do lots of stuff, after all! Often those invocations are simple and take zero or one parameters. Ruby has a great integration of implicit method invocation.

def myMethod(a=nil,b=nil,options=nil) ... end myMethod # same as myMethod() myMethod 1, 2, {'color' => '#ffffff'} # same as myMethod(1, 2, {'color' => '#ffffff'}) myMethod 1, 2, 'color' => '#ffffff', 'type' => 'easy' # same as myMethod 1, 2, {'color' => '#ffffff', 'type' => 'easy'}

Notice how Ruby even wraps up all key-value pairs at the end of the argument list into a hash; that's slick.

Introspection/Reflection

Ruby's facilities for introspection and reflection are great! Pretty much any sort of meta-programming you want to do can be done, and the core library makes it pretty easy. For example, here's how to get a list of methods available to strings.

'some string'.methods #=>[:<=>, :==, :===, :eql?, :hash, :casecmp, :+, :*, :%, :[], :[]=, :insert, :le ngth, :size, :bytesize, :empty?, :=~, :match, :succ, :succ!, :next, :next!, :upt o, :index, :rindex, :replace, :clear, :chr, :getbyte, :setbyte, :byteslice, :to_ i, :to_f, :to_s, :to_str, :inspect, :dump, :upcase, :downcase, :capitalize, :swa pcase, :upcase!, :downcase!, :capitalize!, :swapcase!, :hex, :oct, :split, :line s, :bytes, :chars, :codepoints, :reverse, :reverse!, :concat, :<<, :prepend, :cr ypt, :intern, :to_sym, :ord, :include?, :start_with?, :end_with?, :scan, :ljust, :rjust, :center, :sub, :gsub, :chop, :chomp, :strip, :lstrip, :rstrip, :sub!, : gsub!, :chop!, :chomp!, :strip!, :lstrip!, :rstrip!, :tr, :tr_s, :delete, :squee ze, :count, :tr!, :tr_s!, :delete!, :squeeze!, :each_line, :each_byte, :each_cha r, :each_codepoint, :sum, :slice, :slice!, :partition, :rpartition, :encoding, : force_encoding, :valid_encoding?, :ascii_only?, :unpack, :encode, :encode!, :to_ r, :to_c, :mine, :>, :>=, :<, :<=, :between?, :testMethod, :nil?, :!~, :class, : singleton_class, :clone, :dup, :initialize_dup, :initialize_clone, :taint, :tain ted?, :untaint, :untrust, :untrusted?, :trust, :freeze, :frozen?, :methods, :sin gleton_methods, :protected_methods, :private_methods, :public_methods, :instance _variables, :instance_variable_get, :instance_variable_set, :instance_variable_d efined?, :instance_of?, :kind_of?, :is_a?, :tap, :send, :public_send, :respond_t o?, :respond_to_missing?, :extend, :display, :method, :public_method, :define_si ngleton_method, :object_id, :to_enum, :enum_for, :equal?, :!, :!=, :instance_eva l, :instance_exec, :__send__, :__id__]

That's a lot of useful methods!

The best part of Ruby having great introspection and reflection is that we can develop awesome tools like Pry, which make development so much easier to find out what's happening at runtime and actually fix the bugs, rather than spend all your time trying to reproduce and then track them down.

Ruby Dislikes

Duck Typing

Ruby is duck-typed, and so is Python, but in Ruby, it's more extreme. In Ruby, any variable can be any value and any method can return any value. Static-typing is more tedious to write, but is less ambiguous, easier to debug, and can be more performant. Development tools can also take advantage of static-typing to provide better highlighting, documentation, references, and optimizations.

Hash-Rocket

Key-value pairs in Ruby are declared using the "hash-rocket"(=>) syntax, which looks like this:

my_obj = { :my_sym => 1, "my str" => 2, 42 => 3 } #ruby

In other languages, like JavaScript and Python, a colon is used between key-value pairs:

myObj = { "my str": 2, 42: 3 } #python, no symbol type

Ruby does have a similar syntax, but it requires that only symbols be used as keys:

my_obj = { my_sym: 1, my_sym2: 2 } #ruby

The only benefit I see to the hash-rocket is that it makes searching slightly easier, but mostly I find it annoying and tedious to type.

No Switch Statement Fallthrough

In switch statements, sometimes you want the code to execute for multiple matches; this is known as "fallthrough". In languages like JavaScript, the code for all matches are executed, unless there is an explicit "break;". Ruby implicitly breaks after executing the code for any match. There is also no way to optionally fallthrough, like with a "continue" in Perl.

Python Likes

Off-side Rule / Indentation Matters

My favorite thing about Python is the off-side rule, which means that indentation is used to denote code blocks such as method definitions or the body of a loop. Using "end" in Ruby is like having to put closing tags in HTML; it's more to type and is prone to errors.

Btw, check out HAML if you're still losing time writing HTML.

Introspection/Reflection

Like Ruby, Python is an interpreted language, so they both have great potential for introspection and reflection. Python's facilities for meta-programming and monkey-patching aren't as good as Ruby's so introspection and reflection are harder to do in Python, but it's still pretty good. For example, to get the methods on an object, use "#dir".

dir('some string') #=>['__add__', '__class__', '__contains__', '__delattr__', '__doc__', '__eq__', '__ format__', '__ge__', '__getattribute__', '__getitem__', '__getnewargs__', '__get slice__', '__gt__', '__hash__', '__init__', '__le__', '__len__', '__lt__', '__mo d__', '__mul__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__rmod__', '__rmul__', '__setattr__', '__sizeof__', '__str__', '__subclasshook __', '_formatter_field_name_split', '_formatter_parser', 'capitalize', 'center', 'count', 'decode', 'encode', 'endswith', 'expandtabs', 'find', 'format', 'index ', 'isalnum', 'isalpha', 'isdigit', 'islower', 'isspace', 'istitle', 'isupper', 'join', 'ljust', 'lower', 'lstrip', 'partition', 'replace', 'rfind', 'rindex', ' rjust', 'rpartition', 'rsplit', 'rstrip', 'split', 'splitlines', 'startswith', ' strip', 'swapcase', 'title', 'translate', 'upper', 'zfill']

Bracket Slice Notation

Python has great syntax for slicing elements from arrays and strings. It's short, simple, powerful, and unambiguous. Take a look at the examples below; basically you can declare a range using ":" and select backwards through the array using negative numbers.

test = "abcde" test[0:2] # "ab" test[:2] # "ab" test[1:2] # "b" test[1:] # "bcde" test[:] # "abcde" # a new string instance with the same contents test[-2] # "d" # moving backwards from end of string test[:-2] # "abc" test[-2:] # "de"

Generators

Generators are functions/expressions that yield(think return) a series of items. They're most commonly used to iterate over elements that, all together, would take up a lot of memory, but can be handled just fine individually. The concept of generators in Python can be a little hard to understand at first, but in the end they can be quite handy and succinct. Ruby has similar functionality through block yields, but I'm not sure that it provides the same performance benefits as Python's generators.

Built-in Assert

Python has a special "assert" keyword that raises an AssertionError whenever the passed-in expression evaluates to False. I know it's small, and the same effect can be achieved in Ruby, using raise ... unless. But assertions are a way for the programmer to communicate their intentions and to guard against common mistakes. Making assertions part of the core of the language makes it easier to justify using them.

Python Dislikes

Everything is an Object, Kinda...

Like with Ruby, everything is an object in Python. However, that's somewhat of a stretch in Python since the data type objects are immutable, unlike other objects in Python. Ever use one of the super-convenient String methods provided by Rails? Stuff like that isn't possible in Python and greatly hinders things like meta-programming and the development of debugging tools like Pry.

Immutable Strings

Strings are immutable in python, so once they're created, you can't change them. String manipulation is very common in programming, and for example if you wanted to replace a single character at a given index in a string, you'd have to do something like this.

myText = "Hallo World" myText = myText[:1] + 'e' + text[2:] #=> "Hello World"

Thank goodness for that bracket slice notation!

In Ruby, the String instance is mutable, and it will just create a new string in memory so you can just do:

my_text = 'Hallo World' my_text[1] = 'e' #=> my_text == 'Hello World'

Tuple Declaration Syntax

In Python, parentheses are used to declare a tuple(i.e. immutable/fixed array), whereas square brackets are used to define a list(i.e. mutable/dynamic array). Parentheses also used for logical grouping and method invocation, so parentheses usage is quite overloaded. So much so, that to declare a tuple with a single element, you have to use an extra comma so it doesn't treat it as a logical grouping, like so:

myTuple = (4) #=>4 #it's not actually a tuple, it's just the number 4 type(myTuple) #=>(type 'int') myTuple = (4,) #=>(4,) #now that looks like a tuple type(myTuple) #=>(type 'tuple')

Inefficient Syntax Elements

As I mentioned earlier, one of my favorite things about Python is the off-side rule, which means that it's unnecessary to use a trailing colon to denote the start of a code block. It's there to raise an error if the programmer fails to indent properly on the following line, but the same is not true for subsequent lines and the keywords(e.g def, while if) could be used for that same check. Overall, I think that requiring it just makes the code more prone to errors.

def myLoop: i = 0 while i < 10: if i % 2: print i i += 1

While using words for logical operators like "and" and "not" makes programming more accessible at the very early stages of programming, it ultimately becomes harder/slower to write and read than your standard symbols like "&&" and "!". In Python you have to use words, but Ruby supports both styles, which leave the words option available for beginners and DSLs.

Required parentheses for method invocation reduces ambiguity, but since methods are invoked very frequently, the code becomes less readable, and they can get tedious to write.

"True", "False", and "None" are built-in constants in Python and must have that exact capitalization. That gets really old, really fast.

No Switch Statement!

In Python, there is no switch statement syntax! This means selection control has to be done with more complex if-else chains and loops.

The Winner?

Both Ruby and Python are interpreted languages and Ruby makes the most of it, which enables other libraries like Rails and Pry to make the most of it as well. Ruby has much stronger core and standard libraries, which greatly reduces the complexity of your own code. The reduced complexity combined with overall easier debugging, makes Ruby a lot more efficient for development. I'd still rather write Python than JavaScript, though.

[nejuf]

Ruby's Singleton Class

An often overlooked feature of Ruby the singleton class (aka: Eigenclass, metaclass, & virtual class). This is not be confused with the Singleton programming paradigm. The singleton class is used in Ruby to define methods on a single Object instance, rather than the normal class.

The singleton class can be accessed using Object#singleton_class and the methods using Object#singleton_methods.

There are several ways to define a singleton class method.

def my_object.my_method puts "I'm a singleton method!" end class << my_object def my_method puts "I'm a singleton method!" end end

Of course, since a Class is also an Object, it too has a singleton class.

class MyClass def my_method puts "I'm a singleton method, too!" end end MyClass.singleton_methods #=> [:my_method]

So, that's where the definitions of a class are stored, cool!

So what's the use of adding singleton methods to an instance? Well, the most common use is probably for overriding methods from the instance's class.

class MyClass def do_something puts 'okay' end end excited_object = MyClass.new def excited_object.do_something puts "Okay!" end excited_object.do_something #=> 'Okay!'

I recently found a perfect reason to use the singleton class in a Rails app. I used it to create an extension system for a model. This model needed to have a lot of different functionality, but not at all times. For example, sometimes it needs an email address, sometimes an associated user, sometimes a GPS tracker, etcetera. Having all the attributes on every instance of the model would make for slow queries and wasted storage space. Having inherited models makes for nice grouping and better querying, but sacrifices flexibility and ultimately becomes unfeasible for handling all the possible combinations (i.e. user with email, email with GPS, user with email and GPS, and so on). The singleton class is perfect as it lets me define characteristics in a manner that is very similar to the normal class approach, with things like associations and validations.

Below is a simplified example of a Resource model with a User extension. Note that I'm using Mongoid/MongoDB (ergo the use of 'field'), which is particularly well suited for a wildly changing data structure like this with no schema.

class Resource field :name, type: String field :extensions, type: Array, default: [] after_initialize :init_extensions def add_extension(extension_key) case extension_key when :user self.extend(UserMod) else raise "Unknown resource extension: #{extension_key}" end self.extensions << extension_key if self.extensions.exclude?(extension_key) self.init_class if self.respond_to?(:init_class) self.apply_defaults self end # run as after_initialize def init_extensions # Set singleton class name. Needed for associations to determine inverse relation names and such. class << self def self.name self.superclass.name end end self.extensions.each do |extension_key| add_extension(extension_key) end end module UserMod def init_class class << self field :nickname, type: String belongs_to :user validates_presence_of :user end end def name self.nickname || self[:name] || self.user.full_name end end end

I write the extensions as modules (e.g. UserMod) so that they can be used between extendable models. I store the keys for determining the extensions of the object in an array and apply them to the model on initialization. Note that when I apply the extension, I am extending the instance itself self.extend(UserMod). This way the methods of the module (e.g. #name) will be added to the Resource instance's singleton class and then calling #init_class opens up the singleton class and applies the Rails model stuff such as associations and validations.

Unfortunately, there are times when singleton classes, and inheritance for this matter, are overlooked. So watch out for implementations in libraries that make references specifically to your model instance's class. One example is in Active Support. The below method creates callback methods for an Active Record model, such as #_validate_callbacks and #_save_callback? .

def __define_runner(symbol) #:nodoc: runner_method = "_run_#{symbol}_callbacks" unless private_method_defined?(runner_method) class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1 def #{runner_method}(key = nil, &blk) self.class.__run_callback(key, :#{symbol}, self, &blk) end private :#{runner_method} RUBY_EVAL end end

As you can see, it uses self.class which will completely miss out on callbacks declared in singleton class. Below is my solution for this particular problem.

AS_CALLBACKS = [:build, :create, :destroy, :save, :touch, :update, :upsert, :validation, :validate] # :find and :initialize omitted from the list because we use that to set up the extensions themselves and wouldn't be useful in extensions anyways since they are added after creation # Active Support doesn't take into account validations on the singleton class, # so here we copy over the class validations to the singleton, and use that for validation. # *See the Active Support __define_runner method below for more info. AS_CALLBACKS.each do |callback| define_method("_run_#{callback}_callbacks") do |key = nil, &blk| singleton_callbacks = self.singleton_class.send("_#{callback}_callbacks") class_callbacks = self.class.send("_#{callback}_callbacks") # Must be careful not to cast the ActiveSupport::Callbacks::CallbackChain as an Array class_callbacks.each do |cb| singleton_callbacks << cb if singleton_callbacks.exclude?(cb) # since self.singleton_class is an object, pushing the callbacks onto the local variable updates the object itself end self.singleton_class.__run_callback(key, callback, self, &blk) end end

I copy over any callbacks that the class has which the singleton class doesn't. Then the callbacks are run according the singleton class rather than the class.

Because of their low visibility, singleton classes are not always the easiest to use. However, they are vital for achieving the flexibility of having definitions on the instance level.

[nejuf]

ERB Alternative: Haml

This weekend I picked up Haml and converted most of my view templates for FantaC from ERB to Haml. Haml is intended to be an alternative to ERB that requires much less coding.

HTML is not a pleasant language to code in because you have to use angle brackets (< >) and closing tags(<div></div>). In Haml, indentation is used to delimit and nest code, so closing tags aren't needed, and the opening tag simply starts with % rather than being enclosed in angle brackets.

Additionally, Haml supports CSS selectors, so this:

<div class="thumbnail thumbnail-character pagination-centered pop-out-shadow">

becomes this:

%div.thumbnail.thumbnail-character.pagination-centered.pop-out-shadow

or because div elements are so common, they are assumed and can be omitted in the presence of a class or id, it can be even shorter:

.thumbnail.thumbnail-character.pagination-centered.pop-out-shadow

Because of all of the above, Haml is much faster to write than HTML and requires less space.

I converted about half of my templates by hand, until I got a good feel for Haml. I converted the rest using the Sublime plugin sublime-html-to-haml. It does a slick job though watch out if you have multi-line Ruby code as it may cause errors when Haml multi-line pipes are used.

Overall, I'd say there's little reason not to use Haml. It's a heck of a lot faster and easier to read than ERB, and ERB can be used inside Haml using the :erb filter.

[nejuf]

Node JS Chat Server on Amazon EC2

I built and deployed a basic TCP chat server today using NodeJS and Amazon EC2. I had done similar before using Socket.IO, but this time I decided to do it with just Node and it's built-in Net library.

First of all, it should be noted that Node changed the way it implements streams (i.e. readable/writeable/duplex), in v0.10. These changes are incompatible with previous versions of Node, so be mindful when looking at older resources or tutorials.

For deploying to Amazon EC2, this tutorial can help you get through most of it, even though it's old. If you get your server running, but can't seem to connect to it, check your Amazon Security Groups. You likely need to specify a rule to allow any IP (i.e. 0.0.0.0) source for TCP connections on the port your chat server is running.

For the time being, you can access my chat server using telnet like so in the command-line.

telnet 54.201.112.102 8080

When you start your Node server on your host, you may be wondering, how do I keep it running? All it takes is for a single bug or error to crash the application and end your server process. There are a number of solutions to this such, but one super slick one for Node is Forever. Just install it using the Node Package Manager (npm), and start it like so:

forever start my_chat_server.js

If you app crashes, it will automatically be restarted and all of yours console and server logs are automatically stored in log files. Forever is great!

[nejuf]

CoLoLiPoEx

Today I was introduced to the Big O. The Big Omega function is used to determine efficiency of an algorithm or process as the number of inputs increases. Say for example you have a match-making site, and you need to compare every user with every other user, to determine their compatibility score. The basic steps to perform this operation may be to retrieve and parse the data for all users, and then calculate a compatibility score between all unique pairs of users. If you're doing benchmarking, you may find that because data retrieval (database/cloud) and parsing are slow processes, they're taking up a lot more time than calculating the compatibility scores. So, your intuition might be to optimize data retrieval or parsing, but because of scaling, that is probably not the best area to optimize.

You see, as your user base grows, the amount of time it takes to retrieve or parse data will increase directly with the number of users. However, the calculation of the compatibility scores will take much, much more time because adding just one user adds as many new compatibility checks as there are existing users.

n(n-1)/2 # Say "n" number of users num_data_retrievals = n num_compatibility_checks = n(n-1)/2 #unique pairs total_time_data = num_data_retrievals * 100 seconds #=> 100 users -> 10,000 seconds #=> 1,000 users -> 100,000 seconds total_time_comp_checks = num_compatibility_checks * 1 second #=> 100 users -> 4,950 seconds #=> 1,000 users -> 499,500 seconds!

In the above example, even though retrieving the data is 100 times slower than performing a compatibility check, the total operation takes up much less time than performing the compatibility checks as the user count increases to 1,000.

In Big O notation, the data retrieval operation would be written as O(n) and the compatibility checking would be O(n^2). The former is a linear, and the latter is polynomial (i.e. quadratic in this case). Since, O(n^2) is so much bigger than O(n), as n becomes very large, we say that O(n^2) crushes or dominates O(n). Meaning that O(n) doesn't really matter relative to O(n^2), so focus your optimizations on the quadratic operation.

Linear and polynomial are time complexities, and there are others as well. Some other common ones include exponential O(2^n), logarithmic O(log n), and constant O(1). In regards to time complexity, constant is the fastest and exponential is the slowest. Below is the order of increasing complexity.

Constant->Logarithmic->Linear->Polynomial->Exponential

To remember the order, use a mnemonic: CoLoLiPoEx

[nejuf]

App Academy W9D5 - Projects 10/10

Today was the last day for working on our projects, so we had a demonstration day for them. Representatives from some local tech companies gave presentations and checked out our projects.

My project was a fantasy league for fictional game, film, and book characters. Players can compete with others to earn the most gold by selecting the best team of characters for a battle. With fantasy sports, events happen over long spans of time: a day, a week, or even several months. However, that doesn't make for a very engaging experience. Since my game is not tied to real-life events, I can make battles occur every hour, or even every ten minutes, to keep the players engaged.

I'm in the process of prepping my project for deployment, and will post a link when it's ready.

[Update] Here's a link! fantac.net

This also marks the end of my core time at App Academy. It's been a challenging experience, but I feel I learned more in these past nine weeks, than I did in three years of college. Now, begins my search for a great team to join.

[nejuf]

App Academy W9D4 - Projects 9/10

I'm busy working on my project, so just a quick post today.

We learned about some popular design patterns for Rails apps. The standard is MVC which correspond directly to models, views, and controllers in Rails. However, views tend to become very large and complex. It's somewhat unavoidable because there's a lot of information we wish to show, which affects the layout of the page, which affects the styling of the page.

Because of this, some developers use an MVCP(or MVP), adding a "Presenter" component. The purpose of the presenter is to perform the bulk of the logic for building views, and let views stick to being more like templates. The presenter works with the models to take its database-like information and convert it into viewable formats. For example, converting dates, currency, and names are common operations of the presenter. It can also do a lot of the work of assembling and structuring data from model associations.

[nejuf]

App Academy W9D3 - Projects 8/10

Today we learned about caching with Redis. Redis is a key-value store, while normal SQL databases use a data store. Key-value stores have numerous shortcomings for persistent data storage, so they're most useful for caching data that is frequently requested, but slow to generate.

For example, a query that gathers statistics from all the posts on a site would likely take a very long time. A user would not like to wait several minutes for statistics to load. So to fix this, we can run the query every hour or so, and just update the cache with the result once it's generated. The user would then receive the cached statistics almost instantly. The data could be somewhat inaccurate, but this is not likely to be a problem.

To use Redis with your Rails, you can use the redis-rails gem. In your config/application.rb file, at this line.

config.cache_store = :redis_store

This changes the Rails default cache store from MemCache to Redis. Then, in your app, all you have to do is call the read/write methods of Rails.cache

Rails.cache.write("most_popular_posts", popular_posts_array) Rails.cache.read("most_popular_posts") #=>popular_posts_array

So, if for example, you've completed the lengthy process for finding the most popular posts on the site, you can write the array into the cache. Any attempts to read the cache will return that calculated result.

Another handy trick is to "fetch" instead of read/write.

Rails.cache.fetch("most_popular_posts", expires_in: 1.day) do #Perform lengthy task return Post.get_most_popular end

With fetch, the cache will execute the code block and save the returned value as the cached value, whenever the cache has not yet been set, or the specified duration of time has passed since the cache was last calculated. This is good for making sure your cache never returns data that is too old.

[nejuf]

App Academy W9D2 - Projects 7/10

Today we learned about delayed jobs and social media features. Sometimes we want a task to happen at some point in the future, and sometimes we just want an operation to be performed any time other than now, to avoid giving the user a slow experience. An example may be sending a welcome email after the user signs up.

For Rails, there's a Delayed Job Active Record gem that can be used to make the process simple. First you generate the delayed job generations and migrations which creates a table in the database for queued jobs.

rails generate delayed_job:active_record rake db:migrate

Then, on an ActiveRecord instance just call the "delay" method.

@user.delay.sendEmail(:welcome)

In the above example, the sendEmail method would be called on a free worker, once one becomes available.

In regards to social media, I want to mention the Facebook Graph API Explorer. When I first used the Facebook API several years back, figuring out what information was available and how to access it was challenging. The API Explorer makes it easy and fast to find and verify Facebook information.

[nejuf]

App Academy W9D1 - Projects 6/10

Today we learned about jQuery UI. It's most popular features are its interaction widgets.

The Draggable widget lets users click on DOM elements and move them around on the screen. Using it is simple: grab a DOM element using a jQuery selector, then call draggable on it.

$(".drag").draggable();

As an argument, draggable can take an options hash to set things like "opacity" and "snap."

The Droppable widget takes dragging a step further and triggers events when a draggable element is released on top of a droppable element (aka. target).

$(".drop").droppable();

Like-wise, droppable also takes an options hash that's mainly used to specify which draggable objects are accepted in the droppable element.

The Sortable widget combines drag-and-drop to create a collection of elements that can be dragged and inserted between two other elements.

$(".sort").sortable();

sortable also takes an options hash. The "containment" option is particularly useful as it lets you specify a bounding box for the items.

There are numerous other useful widgets, so I encourage you to check them out.

[nejuf]

App Academy W8D5 - Projects 5/10

Today we learned about using Kaminari for pagination. When you have a large amount of data to show the user, it may not be feasible to show all of it at once. A gigantic list is bad UI, and it may be slow to send over a single large chunk of data. Pagination solves both of these problems.

In a Rails app, Kaminari lets you specify page scopes for a model. Then, when the controller receives a request at say, the Photo index, you can pull out records for a specific page, rather than Photo.all.

if params[:page] @photos = Photo.page(params[:page]) else @photos = Photo.all end

Kaminari pagination can also be used to add "infinite" scrolling to a web page. It's simply a matter of using jQuery to listen for the user to scroll to the bottom of the page, and then load in the next page of elements. Below is a basic listener for detecting when the user scrolls near the bottom of the page.

$(window).scroll( function() { if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { alert("at bottom of page"); } });

[nejuf]

App Academy W8D4 - Projects 4/10

Today we learned about implementing file uploading into Rails apps using PaperClip and FilePicker. To better support file uploads, it is a good idea to use a separate server and service for file storage, than the server of your application. This separation will yield better performance and is much more scalable. For this, we used Amazon Web Services (AWS) Simple Storage Service (S3). It's definitely the most popular, and likely the best pick for storage services.

Here's ThoughtBot's PaperClip gem. The basic usage is that you create a Rails model such as a "Photo" and add an attachment using "has_attached_file", possibly "image" in this case. Once the file is uploaded, you'll then be able to access by getting the URL like below.

Photo.first.image.url Photo.first.image.url(:small)

The latter call will retrieve a smaller version of the file, such as a thumbnail. This is a common example, but you can set up any style you want.

If you want to use AWS S3 for file storage, you can use the AWS SDK gem.

FilePicker is more complex than PaperClip, but also offers a greater range of features. The most notable feature is drag-and-drop files for upload, but some others include photo editing and a greater tie-in with services like AWS S3. You can start using it in a Rails app with this gem by the creators of FilePicker.

[nejuf]

App Academy W8D3 - Projects 3/10

Today we learned about Twitter Bootstrap. It's basically a CSS and JavaScript framework for web applications. It makes it easier to create an attractive and consistent style and user-interface. The biggest advantage is the use of a 12-column grid. This lets us declare content to take up any number of 1-12 columns in horizontal space, and the content will be reorganized automatically for different web page sizes. This makes Bootstrap super mobile-friendly and responsive.

Bootstrap can be added to your site just by using the core CSS and JavaScript files, but for Rails applications we can get finer control. There are many Rails gems available for adding Bootstrap generation to your project. The TwitterBootstrapRails gem and BootstrapSass are the most popular. However, those utilize older versions of Bootstrap or Rails. BootstrapSass3 and BootstrapRails are a little more up-to-date.

[nejuf]

App Academy W8D2 - Projects 2/10

Today we learned about advanced user authentication and authorization. Devise is a Rails gem that uses Warden to provide many different authentication features. Just some of these features include database authentication (user sign-up/sign-in/sign-out), email confirmation, password recovery, account locking, and suspicious sign-in monitoring. It is greatly recommended that you use Devise to generate user-based models, because of the quantity of configuration involved. Here is an example:

rails generate devise:install rails generate devise User

The first line sets up the Devise initializers, and the second creates a User model (user.rb) and associated migration (...devise_create_users.rb).

Devise also works well with OmniAuth, which is a library that attempts to standardize authentication via third-party providers. This lets us enable users to log into our site using services like Facebook, Twitter, and Google. Additionally, it let's us gain authorization to post to those services on the user's behalf.

Another library that can be combined with Devise is CanCan. This library provides a means of authorizing users. This lets us add common user classes such as Admin or Moderator, but also lets us easily verify that a user has the appropriate permissions according to the requested action. For example, we can restrict a user to only being able to edit posts they have authored.

[nejuf]

App Academy W8D1 - Projects 1/10

Today we learned about Node.js and created a basic chatting app. Node is a C-based library for executing asynchronous JavaScript code, primarily on the server. That being said, Node.js still uses a single-thread and is event-driven.

Our chat app uses Node to set up a server, and Socket IO to create a socket connection. Most modern browsers now have WebSocket capabilities, but older ones don't. Socket IO handles this behind the scenes, using options such as Flash or long polling, so cross-browser support is a breeze. Additionally, Socket IO makes it easy to group sockets together into "rooms," so it works particularly well for chat rooms.

In order to enable other machines to access the chat through our local server, we used Ngrok. Ngrok creates a tunnel to a port on our local server as well as a public URL. Traffic that comes into the URL is logged and forwarded to our server. Useful for both the tunneling and the debugging potential.

[nejuf]

App Academy W7D5 - JavaScript 10/10

Today we did one more project to practice Backbone. We created a news reader application that stores and shows RSS feeds. It's a single-page app that uses models to represent RSS URIs(i.e. feeds) and feed entries(e.g. blog posts, new headlines, etc.).

Normally, Backbone Models are created on the client-side that correspond directly to Rails Models on the server-side. This means that when we tell a Backbone Collection or Model to "fetch" it's data, it sends an Ajax request to the server and expects to receive back the model's saved attributes as a JSON object. This works great, but sometimes we want more than just the Model's attributes. Sometimes we also want the objects associated with a Rails Model. For example, what if we have a Post model that "has_many" Comments?

One option is to send a separate request for the associated Comments, which can be retrieved by using the Post's id. This adds to the server load slightly, but the main problem is that it adds to the complexity on the client-side, since there would then be two asynchronous events to manage.

Another option is to manually insert the Comments information via the Rails Controller, after the JSON response has been built for the Post. This could work fine, but there's an easier way, less error-prone way to do it.

The solution is to use the "include" option of the Rails render function, like so:

@posts = Post.includes(:comments).all render json: @posts, include: :comments

This will automatically include the Comments of the Post in the JSON response. The first line fetches all of the Posts in the database, along with their comments. This eager loading lets us query the database just once or twice, whereas without it, there would be an N+1 loading problem when the Comments are fetched when converting to JSON.

Using either of the latter two solutions, you will need to override the #parse method of your Backbone Model for posts. In it, you will need to separate the Comments from the other attributes, create the Comments Collection/Models, and return just the attributes for the Post model. It may look like so:

//In assets/javascripts/models/post.js parse: function(serverAttributes, options) { if( serverAttributes.hasOwnProperty("comments") ) { var comments = serverAttributes.comments; delete serverAttributes.comments; if(!this.comments){ this.comments = new MyApp.Collections.Comments([], { post: this }); } this.comments.set(comments); } return serverAttributes },

This works well, and if the "this.comments" already has an outdated collection of comments, then "this.comments.set(comments)" will smart-update the collection, updating attributes, adding whole new models, and removing ones not found in the comments JSON object.

If you want to get more complex with your JSON responses (like in building an API) and include lots of different nested resources, you may want to check out RABL.

[nejuf]

App Academy W7D4 - JavaScript 9/10

Today we continued even further with Backbone JS. In addition to having an a client-side MVC as I mentioned previously, Backbone also has a powerful browser history feature. This allows us to cause the browser to create history entries for different parts of our app.

The process can be started once all of the Routers have been created. Starting it is just one line.

Backbone.history.start();

This performs basic setup, normalizes routes, and takes into account browser capabilities. The last action is particularly significant. HTML5 introduced the pushState/replaceState feature, which is the preferred method for modifying the url and history without performing a new page request. This however is not supported by older browsers. For older browsers it hash-based URL fragments. Backbone handling this compatibility is a major boon.

All that it takes to create history entries is to navigate the application using:

Backbone.history.navigate("help/troubleshooting", {});

The first parameter of the navigate function is the URL fragment you wish the app to change to, and the second is an object for options such as "trigger" or "replace."

There is also a #navigate method on the Backbone::Router class, but this is just for convenience and ultimately calls Backbone.history.navigate().