DevEtc

[devetc-blog]

Fumbling My Way Through Devise and OmniAuth

I spent the better part of my morning working through a Rails Cast on getting Devise and OmniAuth to work to together, with the end goal of being able to log into a web app using your Twitter account. 

Overall, it was pretty straightforward, but there were definitely a few things taken for granted by Mr. Bates, that I had to find out through extensive googling: 

1) OAuth::Unauthorized (401 Unauthorized) issues

A) To resolve these, you should set the Calback URL within your Twitter app to http://127.0.0.1:3000/auth/twitter/callback. I found people suggesting other variation on this, but this particular formulation worked for me. 

B)  Your entry for your consumer key and consumer secret in   config/initializers/devise.rb  should look like this: 

config.omniauth :twitter, 'GjvORl6eEN5YGYMLqNTTPQ', 'v5K5m70tKqsPbS0VR2pUpbJ23kzd53wHicI0sjyErc'

2) Wrong Number of Arguments in Registrations Controller error

Check out this entry on stack overflow 

3) And if you are getting stuck at  https://api.twitter.com/oauth/authenticate, it probably means you had initially authorized access to your app then change its type: https://dev.twitter.com/issues/824

[devetc-blog]

Gob gets more interactive

I've been playing around with some more jQuery today. Whereas yesterday, you could simply click on the Aztec Tomb and Gob would appear today you can "pick a card"--the Ace of Gobs--then put it back. 

Not much, I know, but it's good for relearning some old jQuery and learning some new tricks as well. 

Pick a Card!

[devetc-blog]

Back in the Saddle!

So I stepped away from coding for a while. The first week of Dev Bootcamp hit me pretty hard, and I decided to stop. I spent the better part of the last two months thinking, "Maybe this code thing isn't for me." 

But after some serious thinking and soul searching, I've decided that I want to be in the startup and tech world, and I at least was to start my journey with some coding chops. 

So starting October 21 (the day after I turn 29), I'll be part of the Startup Institute's first Chicago class. Instead of the pure web dev route I was pursuing with Dev Bootcamp, at SIC I'll be focusing on Product & Design, which includes a lot of focus on JavaScript, HTML, and CSS but also looks at broader questions related to developing and improving products within the context of startups. 

To get back into the swing, I'm refamiliarizing myself with HTML, CSS, jQuery, and JavaScript. 

Here's my first mini-project: The Aztec Tomb!

[devetc-blog]

Really Google?

Like many people, I use Google Docs Spreadsheets to keep track of tabular data. I've never run into any real problems with it--or rather I should say I've systematically put my head in the sand when it comes to one pesky problem. 

For a long time, I have lazily endured having to add rows and columns to my spreadsheets one right click and select at a time. Today, I decided to change this situation an learn the key commands for inserting rows and columns.

My first thought was that Google's on documentation for its spreadsheet keyboard shortcuts would contain the answer. But alas, this was not so. A  quick Google search (should've used Bing!) for outside help directed me to a forum where some helpful users provided what I thought was the answer, particularly for me, a Windows, laptop user. However, upon attempting to use the suggested remedy, I found myself again frustrated.

Incredulous, that a spreadsheet program by one of the most advanced technology companies on the planet did not seem to contain any discernable way to use my laptop keyboard to quickly insert or delete rows or columns, I deiced to inform the good folks at Google that they should enhance their product to support such a feature. However, when I went to the Google Products suggestion page, the locus from which the almighty behemoth lends an ear to its billions of users, all I found was this.

Oh, a totally dynamic, user-friendly site for soliciting user feedback you say? Nope, just a static website, with no mechanism for inputting any kind of information whatsoever.

And the most recent discussion of this thorny issue on a product forums page, which dates to 2011, suggests the issue wouldn't be resolved anytime soon. Since we are in 2013, I'd say this is a fair assessment.

I hate you right now Google.

[devetc-blog]

Making a Personal Website

When I created DevEtc a few months ago, one of the first people I started following was Liz Abinante. Through her Tumblr, I found her personal site--a sort of living cover letter--which inspired me to create my own.

You can now check mine out at mattmawhinney.com!

All told, creating and publishing my website took about a week, and I found it to be a valuable learning experience. I won't go over all the details, just the stuff I think will be helpful if you want to do something similar.

Also, I won't include all the HTML, CSS, and jQuery I used to make the site in this post, but you can check it out on GitHub.

  Key Points

If you're totally new to programming and web design like me, I'd suggest starting with a template for your webpage, like this one. It's much easier to play around with the elements (colors, fonts, borders, etc.) in a template then to come up with all of these things on your own.

If you have a rough idea of what you want your webpage to do but don't know how to make it do what you want, Google around. There's probably some code out there you can tweak slightly to get the results you want.

Once you have a website built, getting it live at the domain you want is a bit of a tricky process. I'll discuss this more below.

  Making a Navbar with HTML & CSS

I started by working through the Web Fundamentals class at Codecademy. Then I borrowed this template for a resume web page.

Generally speaking, I just played around with the HTML and CSS until I got the page looking how I wanted.

To create my  horizontal navbar I used the following HTML and CSS:

 HTML

https://gist.github.com/mattmawhinney/5960802

CSS

https://gist.github.com/mattmawhinney/5961213

  Making a Drop Down Menu with jQuery

To make a drop down menu, I started by learning a little bit of jQuery through Codecademy again. (As best I can tell, jQuery is a toned down version of JavaScript, which focuses on making websites interactive, whereas JavaScript is a full-scale programming language.)

Then I Googled around for drop down menus using jQuery. It took a while, but I found this helpful post by Kevin Liew. Based on Kevin's post I modified my HTML and CSS files and created a jQuery file. 

HTML

https://gist.github.com/mattmawhinney/5968849

CSS

https://gist.github.com/mattmawhinney/5968872

jQuery

https://gist.github.com/mattmawhinney/5968908

One very important thing to note from the HTML file: Make sure that in the head section your script tag that links to the online jQuery library, no matter which one you choose to use, comes before your script tag for your own ".js" file. If you reverse the order, your jQuery functions won't work, and you will spend several hours hating yourself.

  Going Live

At some point, you'll probably want to move your HTML, CSS, and jQuery files from a local folder on your computer to a hosting site where they can be published to a domain name of your choosing.

I found this process to be long and needlessly frustrating. After searching around quite a bit, I ended up getting my domain through 1 and 1 and signing up for their Unlimited Hosting package. Don't use their MyWebsite option!

I used FileZilla to transfer my files to 1 and 1's server, and I will use it to transfer files for any updates I make to the site. 

I'd also suggest taking a look at Weebly.You can register your domain name through them, and  they have an elegant, user-friendly interface. What's different is you don't upload your files to a server like with 1 and 1, you just paste all of your code directly into their HTML editor.

[devetc-blog]

Engaging with the Open Source World: NewsBlur

Today, I became a supporter of open source software. By paying a $24 annual fee to become a "premium" user of NewsBlur, an RSS aggregator, reader, and commenting platform, I will be helping to fund the development of a product that I can not only use but, as I grow as a programmer, will also be able to contribute to or at least customize for my own use. 

 The best part--as I was repeatedly informed by NewsBlur's creator Samuel Clay--is that I will be helping to feed his bug-eyed beagle* Shiloh. 

As you may be aware, as of July 1, Google Reader will cease to exist, which has sent folks like myself in search of a new service where we can get all our news/blogs/etc. delivered in one convenient location.

One reason I chose NewsBlur over the freer, sleeker Feedly (Shiloh aside) is because it offers a little more in the way of creating conversations around content shared by the user community.

This post from the NewsBlur blog about an update to its iOS App got 5 comments. Yes, I know, 5 whole comments. Still, what's more important here is not the number of comments, but the integration of a reader with social elements. 

Apparently, this is what Google Reader used to do well, and what reddit, albeit it non-reader format--continues to do well. Digg will soon release its own reader that will look to incorporate social elements over time.  

Though I've liked reddit it for a while, the sheer size of some of the comment sections has always overwhelmed me. By contrast, the NewsBlur community is small, and by virtue of NewBlur's interface being a little user-unfriendly, I think it may stay small for sometime. 

In the end, any step towards moving my news and current events commentary away from Facebook is a win. 

*Author's Note: I was subsequently informed about the reason why Shiloh's eyes are so large: 

I still feel terrible, but I am glad to know Shiloh is doing well too!

[devetc-blog]

Got My Hack On...

For those of you who didn't know--a small minority I'm sure--last Saturday and Sunday were the first ever:

How two days can be a National Day of Civic Anything is a mystery to me, but I am learning many new things lately. 

To partake in this exercise in technologically aided and abetted civil society building, I headed to the The Lab in Miami's Wynwood district where there were groups working on projects related to public art, sustainability, and blogging. 

                                  /sustainableartblogging/ 

Since I'm still a coding n00b, I decided to participate to participate in the Code for America  Write-A-Thon helping to populate MiamiWiki.org. You can check out my contributions here and here. I'm not sure how many new entries all of the volunteers ended up adding over the two days. 

Unfortunately, I was not able to make it back for the second day to see the various group presentations. Nevertheless, I thought it was awesome getting together with so many uber-nerds who are interested both in technology and civil society. 

Next year, when I know a little more code, I hope to participate in one of the data related projects, either in the 305 or wherever I find myself after Dev Bootcamp. 

[devetc-blog]

Let's Git it On!

I found out about git a few months ago when I worked my way through Michael Hartl's Ruby of Rails Tutorial. Basically, git is away to track changes you've made to code you are working on and revert to early versions in case you A) Break something B) Decide you liked your old version or C) You just like to keep people on their toes. 

Since I started my prep period for DBC, I've largely been saving my files to Google Drive. It's helped me access my files when working between machines, but I think this is one of those things that would make an experience programer cringe. 

So today, I reacquainted myself with git and GitHub. 

[devetc-blog]

Pre-Assessment, Refactoring, Etc.

I'm about 10 days out from my DBC pre-assessment. Thanks to Kelmer Perez, a fellow member of the Dragonflies Cohort, I now know a little more about it. 

In advance of the pre-assessment, I'm starting to go back through the exercises I've already completed, and refactor some of my code. 

My first impression when I hear the word refactor is "the bad thing that happens to unruly members of society in a dystopian novel"

  Turns out refactoring has nothing to do with forcing you to watch ceaseless footage of violent images or hate your enemies for two minutes. No, it's about making your code simpler, less redundant, and more human-readable.

Right now, I'm working on this exercise that uses regular expressions to do various things to social security numbers found inside strings. I'm not entirely done with it yet. But here's part of my original version:

Now here's my version with some refactoring: 

I'll save you the trouble of reading through all of this code, which isn't entirely functional yet, and say that the biggest change I am making is to use the methods I am defining near the top of the page to do things inside of methods further down the page. This saves me from having to rewrite chunks of code each time I want to do something I've already done.

Pretty neat, right?!             

[devetc-blog]

First Post

Welcome to DevEtc! This is my second go round in the blogosphere, and I'm happy to be back.

Maybe you checked out my old blog http://febfourhundo.blogspot.com where my friend Sebastian (@SEhreiser) and I chronicled our efforts to spend $400 or less this past February. Maybe you didn't. 

Either way, DevEtc is a place where  I plan to record my experience of becoming a web developer over the next several months--and whatever else I feel like. 

                   Stay tuned for a post about cats who wear monocles. 

I intend the blog to be a reflective space where I can step back from the craziness of Dev Bootcamp (my intensive, 9-week coding nerd camp) to appreciate both the nuances of the coding that I am learning as well as the larger implications of the rapidly evolving technologies I hope to work with. Really, I just want it to be like this: 

                         I at 1:55 when they diss scientists. Yeah, fuck science! 

Now, I can't lay it down quite like ICP (sorry to disappoint all my juggalos out there), but I've been known to turn a fancy phrase or two. And, I'll periodically be including awesome screen shots like this:

From now until the middle of June, I am in the prep period for nerd camp learning about things like strings, methods, and infinite loops. I hope you'll follow along, and maybe together we'll even figure out how magnets work!