Coding Adventures

y83Je1OC6Wc

A friend of mine called me up recently to ask me how to get started with programming. I’ve gotten these requests more and more as the demand for programmers rises. I’m going to compile a list of resources to help anyone get started with what I feel are the basis for what anyone who wants to program will need. This list is by no means comprehensive and while this will get you started you should not feel like you can go from knowing nothing to building the next Facebook simply by following this guide. It will, however, give you a solid foundation with which you can build and grow to the point where you could potentially build something like Facebook or Instagram on your own or working with a small team.

Which Language Should I Learn?

This depends entirely on what you are trying to do. Some people want to make their work life more efficient by writing small programs to automate their daily tasks while others may want to create websites and web applications. For the first I suggest Python. It is easy to pick up for beginners, it forces good code formatting, and it can be extended to do a large amount of things including creating large websites and applications (Instagram runs on Django which is a web framework built on Python). If you really want to write web applications or create interactive websites I would recommend learning Ruby on Rails. I have written web applications in both languages and I am far more effective in Rails thanks to their mantra of “Convention over Configuration”. I’ll be writing a post about why I feel Rails is better than Django later. Pick your language based on your goals and read the online books I have linked below. They will help you set up your computer and teach you how to create very simple programs for you to have a good base of understanding for programming.

Great Starters Guides

Code Editor

You’ll need a program to actually write the code. I personally suggest Sublime Text 3. It is free, light-weight, and can edit any type of programming file. It has a lot of neat extensions and themes so you can customize it to fit your needs.

Learn Git

Once you have picked your language of choice, no matter what it is, you’ll want to learn Git. Git is a tool to help you version your project and files. Versioning is similar to saving but gives you specific moments to return to. Let’s say you are working on a Word document. You start writing a lot, hit save, then you write a bunch more but decide you hate all that and want to return to where it was when you hit save initially. You could hit CTRL+Z a bunch but it would be nicer if you could point to a specific version of the file and say “I want to start from there again.” With Git you can do that. You make commits, marking moments in time, with messages about the changes made. If you ever want to go back you can simply rollback to any previous commit undoing your current changes. This is useful when you have a working program and then start to do some complicated work only to find you have totally screwed up the project. Just roll back to when it was working and start again.

Github

While you can use versioning locally for your small projects you really start to see its true power when you make your software available for others to review and help; this is known as open-source software. Create an account on Github and they will guide you in pushing your local git versioned projects into projects that anyone can see and help you with. Don’t be afraid of others seeing what you might consider “bad code”. The point of doing this is so others can help you learn and progress. When you have a larger project others can write features and submit bug fixes for your code as well. Once you have a firm grasp of whatever language you have chosen you can even write code for other open source projects to help them with their features and bugs.

Conclusion

Everyone should learn a little bit of programming just like everyone learns a little bit of math. Obviously we can go very deep into mathematics and we can do the same with programming but everyone should have a grasp of the basics and have a foundation even if you don’t do it professionally. I hope this guide was useful and let me know if you have any questions or concerns in the comments below.

rails

Rails 5

As has become tradition, a new full version release of Rails is coming just two years after the release of Rails 4. This new version progresses the platform by bumping the underlying minimum Ruby version and adds a slew of neat features to keep Rails feeling fresh and new.

Ruby 2.2.2

Ruby 2.2.2 is required in Rails 5 because Rails 5 will take advantage of the new Symbol Garbage Collection found in Ruby 2.2. There is also rumor of Rails 5 using the Incremental Garbage Collection found in Ruby 2.2. They have decided to use Ruby 2.2.2 since Ruby 2.2 had a major security vulnerability that is patched in 2.2.2.

https://github.com/rails/rails/pull/19257 Ruby 2.2.1 PR

https://github.com/rails/rails/commit/32f7491808d2c4e097ed7b3ee875e4d1cea8c442 Ruby 2.2.2 Commit

Rails API

Many Rails developers these days are finding themselves using Javascript Frameworks more and more. Whether DHH likes that or not it’s a fact of life. Before Rails 5 developers turned to the ruby-api gem which helps create a minimalist Rails application specifically for use as an API. This functionality is now going to be wrapped up and packaged with Rails 5 so no need for another gem. Just use the command rails new <application name> --api and Rails will create your new API app all on its own!

Here are a couple of tutorials for you Backbone and Ember users.

https://github.com/rails/rails/pull/19832

Turbolinks 3

Turbolinks has been a part of Rails since Rails 4 but is getting a major update to hopefully make developers happier about using it. Turbolinks has been criticized for having major usability problems but the concept of only loading portions of the DOM that change is a sound idea. Many Javascript Frameworks take advantage of this idea specifically React.js. Turbolinks will fetch the body content of your page without worrying about rerendering the CSS and Javascript. You can opt-in to specify which parts of the page should be changed if you’d like as well. They also added a progress bar by default to help the user see things are happening behind the scenes, but with the increased speed you hopefully won’t need that.

https://github.com/rails/turbolinks

Action Cable

Action Cable is the feature I am most excited about. Simpler web sockets for Rails. Anytime anyone says web sockets to me I cringe a little just because of how complicated they can be to set up. Many have tried to make the problem easier and Action Cable is Rails’ way of giving it a try.

https://github.com/rails/actioncable

Rake or Rails

The beginner’s dillema, do I use rake db:migrate or rails db:migrate, is it rake test or rails test? Doesn’t matter anymore, it’s all rails. From Rails 5 on the rails command can be used to run rake commands. Simple change but a nice one.

https://github.com/rails/rails/issues/18878

Integration Tests

Rails 5 is beginning a push to deprecate Controller tests all together in favor of Integration tests. As part of that they are deprecating assigns() and assert_template in controller tests. Aaron Patterson has a great keynote from Railsconf where he outlines the speed improvements made to the Rails testing environment and why Integration tests will be the way to go.

https://github.com/rails/rails/pull/19058

Update

I gave this presentation to the SLC.rb user group July 28th, 2015 and here are the slides from that presentation in case anyone is interested.

Rails 5

A lot of other under the hood improvements are expected to be made but I think I covered a lot of the major upcoming features. Let me know if you have any questions or which Rails feature you are most excited about by leaving a comment below.

rails

One of the great strengths of Rails is the ability to create layouts that house various views of content. You create a layout with a basic HTML structure and then simply drop in your new content based on the view you are rendering. One of the simplest layouts is one that just renders the view that takes up the whole page and this is accomplished by the auto generated
app/views/layouts/application.html.erb.

The highlighted line is the important one. That <%= yield %> tells Ruby on Rails that whatever view you load just drop it right there. That’s great! Now we have a simple base layout that houses our imports and basic structure and CSS and we simply drop in our own content inside of this.

Let’s say we want to take it a step further. What if we want a left and a right side bar which is unique to each of our views? We just need to change our basic layout a little bit to add those columns and then update our view template code to take advantage of our new structure.

Yield Sections

app/views/layouts/application.html.erb

app/views/MODEL/new.html.erb

Following the suggestion of Obie Fernandez and Kevin Faustino in their book The Rails 4 Way, I have placed the two named structures of the layout first. It makes it easy to distinguish what the smaller sections will contain before getting to the meat of the content. Everything that isn’t labeled as content_for will be dropped in that unnamed yield in the layout.

Render Partials

That’s all well and good but what if you don’t want a specific set of sidebar content for every single view. Maybe a shared partial for the right bar will work great. In that case you’ll need to use the render method in your template to generate the template for you. Here is the example from above but using a shared right side bar template.

app/views/layouts/application.html.erb

app/views/shared/_right.html.erb

Render Partials with Variables

You can even pass in variables to your partials. Let’s say our right side bar takes advantage of some user data. We just pass the user variable to the render with a comma and a hash type variable being passed.

app/views/layouts/application.html.erb

app/views/shared/_right.html.erb

Pretty cool, right? I hope this introduction to layouts and partials was helpful. If there are any problems with my examples or if you have any questions please feel free to leave a comment below.

gitlab_0

GitHub is great for open source projects and if you haven’t been there to see what’s going on you’re missing out.  They offer free git hosting for all of your open source projects.  Their UI is great for tracking issues, commits, users, updates, and so much more.  But let’s say you want to use all of that great UI on a project you don’t want open source.  That’s when you’ll need to pay GitHub for a few private repositories.  Or maybe you want to create an organization for you and your developers to create private projects and manage larger applications across many repositories.  You’ll need to pay for that too.  Below are the price lists for both personal repositories and for organizations.

organizationpricing

Those prices can get pretty steep.  Luckily for you there is an open source solution to GitHub called GitLab.  It runs on Ruby and you can set it up all by yourself by following these GitLab Installation Instructions.  That assumes you have a server ready to serve and work for you.  If you don’t you can quickly set up a great Amazon EC2 instance and install GitLab in one click.  There are a couple of caveats in getting things set up with the EC2.  Once it is installed you’ll log in using the account user@example.com and the password is contained in your EC2 log.  Once logged in change your password to something other than the auto created one.  You’ll then need to make some changes to your config files.  SSH into your EC2 instance and update the URL contained in ~/apps/gitlab/htdocs/config/gitlab.yml.  Follow the instructions at the top of that file.  Then you’ll need to set up your email service.  To do that follow the instructions here and then restart the services as described at the bottom of that section.  Now you’re all set!  Placing this in a free Amazon instance will give you a server for a year for free and then after will only cost ~$15 per month.  Much cheaper than GitHub and you have complete control to create groups, private repositories, even public repositories!

That’s all there is to it.  I’ve started using it for my personal projects that I want a UI for issue tracking and other users to join me with and not make public.  If you have any great advice for using GitLab feel free to share in the comments below.

Screenshot from 2014-03-27 14:23:55

Recently we started dumping some data from the database into a shared spreadsheet on Google Docs.  With all of this data it would be helpful to visualize it in some way.  After searching the net it seems there isn’t really a good way to create a chart that is dynamic with what data is in the spreadsheet.  What I want is to have my graph update every time a new row is added to the sheet without having to edit the graph directly.  The solution was to write a custom Google Apps Script to do just that.

To add a Google Apps Script to a document open the document and click Tools -> Script editor…  This opens up a page for editing scripts.  If a prompt appears for what type of script you want to do just select Blank.  Now you just need to paste in this code below.

To make this work for you just change the tabName variable to whatever your tab is that you want to use the graph in, change the start row and start column of where your data begins and what column to end reading.  You don’t need to specify an endRow because we will just be reading all of the data until there is no more.  After that you can customize where the graph will be located, how wide it is, and the titles of the axis.

You’ll see that this method will get called anytime the document is edited or opened by someone who can edit.  Viewers who cannot edit will not trigger the event even on open.  That’s all there is to it.  dynamic Google spreadsheet graphs are now just a click away and once you have it set up you’ll never have to touch it again.

If you have any other Google Apps Scripts tips leave them below in the comments.

square

AngularJS has a ton of built in directives and functions to make your app come alive very quickly.  One thing I noticed it was lacking was a built in on-enter event.  For example, if a user is in an input field when they hit enter I want it to do something, maybe not necessarily submit the form.  Luckily, AngularJS gives you the ability to create your own directives and add them into your app.  Below is a simple directive that you can add to your app that allows you to add ng-enter to elements in your partials.  Pass it a function and watch as you hit enter and that function is executed flawlessly.

That’s it.  Now just add ng-enter="myFunction()" to any element in your partial that detects keystrokes. This has helped me a ton and added a lot of easy functionality to an already great AngularJS system.  If you have any other great directives or AngularJS tips please leave them below in the comments.

typeahead

Twitter Typeahead.js has been updated and there are a lot of changes.  I’m going to give a an explanation for a few of their examples and explain the key features and changes that they have made.  For those looking to upgrade to this new version it will require a rewrite of your current Typeahead.js methods so please be aware of that.  The biggest changes are outlined in their changelog.

The most important change in 0.10.0 is that typeahead.js was broken up into 2 individual components: Bloodhound and jQuery#typeahead. Bloodhound is an feature-rich suggestion engine. jQuery#typeahead is a jQuery plugin that turns input controls into typeaheads.

Let’s head to the examples.

The most basic of basic.  Here we have a static list of local data.  Bloodhound needs to be initialized with your data and you can see it handles splitting data up by white space with their tokenizers.  This makes things a lot easier because in previous versions you needed to make sure the tokens to be searched through were already split up by white space.  The Bloodhound object is then initialized and the typeahead object is created.  This is a lot more code but it makes the search more robust as we will see with a more advanced example using prefetch and remote data.

Here we see a very similar example to the one above except that we are getting our data from a URL.  The prefetch variable works to get a set of data and cache it locally.  Even if the page is reloaded that data stays with the user’s browser until it expires or is removed.  As the user begins their search it will have that data ready and on hand but if there is no data to be found in the prefetch Typeahead.js has another URL, stored in the remote variable, that it can make a query to and get data back about what the user is searching for.  These two in conjunction work fantastically well for supplying the user with a set of data that has the speed of being static but can be dynamic by querying the URL for more data as the user goes.  Again we initialize the Bloodhound object and add it to the typeahead initialization.  We are again using the Handlebars template rendering engine to make the search results look great so that hasn’t changed.

The changes are drastic but not hard.  This is a major update to Twitter Typeahead.js and because of that there is deprecation.  My other posts are still useful for older versions but may not apply to versions going forward.  I hope this was helpful in getting you up to speed with the latest version of Twitter Typeahead.js.  If you have any questions or comments feel free to leave them below.