Keyboard Shortcuts with Javascript

To easily bind any keyboard shortcut, even the most complex, to your JavaScript callback, I’ve created a little library called Golden Key. It needs another round of testing and some code review before I release it on NPM and Bower, but then I know it will be useful for some of my ongoing and future projects. Since learning Vim, I’m really addicted to keyboard shortcuts!

Golden Key Features:

  • Bind multiple keyboard shortcuts at once by creating an events hash. (Inspired by the event handling in ‘views’ when using Backbone JS, as demonstrated in the fourth section of this article.)
  • Configure the timing of key sequences. (Meaning how long the user can pause between keys.)
  • Use both sequences and modified keys to build custom shortcuts. (Meaning your shortcuts can involve hitting several keys in a row, or hitting several keys at the same time.)
  • Optionally bind a callback to catch and parse all keys pressed, in addition to binding specific keyboard shortcuts.

Coming Soon:

  • Unbind events as needed
  • Bind combinations of keys including modified keys (Example: Using a leader key combination that involves a modifier, followed by another combination.)
  • Bind keyboard shortcuts to specific elements on the page, or blacklist certain elements (inputs for example) from triggering the keyboard shortcuts.

Testing Javascript With Capybara, Rspec, and Selenium

How to set up RSpec feature tests of your javascript with RSpec, Capybara, and the Selenium Webdriver.

Note: I’m working with Rails 3.2.14. It should work pretty much the same way for Rails 4+ applications.

This is especially useful if you’re writing a Backbone.js, Angular, or Ember application and have a lot of content that is loaded dynamically by javascript.

Continue reading

Cute Art Online

My talented sister has just launched Pink Jellyfish Designs; a showcase of her cute and beautiful artwork and cute crafts.

copyright Grace Nonemaker

copyright Grace Nonemaker


Please note that she (Grace Nonemaker) retains copyright of this image and all other images/designs on her site.

I especially love the cupcake themed painting and plushie.

She pretty much does the same non-digital artwork stuff that I’ve done, but better. Worth checking out!

Happy Cupcake Alpha

Just finished the first draft of my very own little front-end framework, which I am calling Happy Cupcake.

Screen Shot 2014-03-08 at 12.34.36 PM

It was inspired by the latest version of Twitter Bootstrap, which is a great framework but very over-used these days. I’m planning on expanding my framework to include features for easily setting up image galleries, and taking some ideas from other front end frameworks (such as Foundation and Gumby).

Current Features:

  • CSS Reset
  • Form Styles
  • Responsive Grid
  • Responsive Navbar
  • Tabs
  • Modal Widget

Technologies:

CSS grid without a table

Making a grid with pure CSS positioning is just too easy – nobody should ever have to resort to using a table to create a basic grid layout.

I just finished a demo with two approaches, which were painted using some #BADA55 CSS colors:

In the jsfiddle version I had to add font-size: 0px; to the parent div to completely fix the spacing issues caused by inline-block. Oddly enough, in my initial version (an html page that can be opened locally in the browser), this wasn’t necessary. The full version with separate files for html and css is posted on github, along with some of my other css and html demos.

Layout Without Hacks?

While both of the approaches shown above avoid using tables for layout, both also involve using a hack. With inline-block, you have to eliminate whitespace from the HTML and use font-size: 0px; on the parent element. With float, the clear-fix hack is required to keep the parent element from collapsing.

Once browsers start supporting the flexbox model, it will be GREAT to finally have layout without hacks.

Finished App Academy

I’m pleased to have finished App Academy, and honored to be staying on as a Teaching Assistant for the next cohort of Student Software Engineers. The transition from student to teacher happened suddenly, so I have been quite busy even though my cohort “graduated” a week or so ago. While things have been quiet on this blog, I posted a storm of entries during App Academy that can be read on “App Academy Hacker”.

While I don’t see myself teaching in the long-term, it is a fantastic opportunity to continue learning and work with intelligent, highly skilled people. My first priority is to be around people who hold themselves to the highest standards, and that is essential for anyone attempting or teaching at App Academy.

I hope to start blogging here again. My first tidbit to share after so long;

I just wrote up a template for generating a Rails App with RSpec and FactoryGirl set up. I may tweak this to get the last piece to happen automatically, instead of outputting a reminder to the user, but aside from that it works like magic!

The template section of the Generators Rails Guide made setting this up as easy as pie. Glad a student pointed this feature out to me!

Preparing for App Academy

I can hardly contain my excitement about attending App Academy.
Ok- I guess I can’t contain it:

YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY!

In preparation I have started a Tumblr Blog titled “Hacking at App Academy”, which I will use for all App Academy related posts, including my continued preparation and studying.
screenshot of App Academy Blog
I have about 7 solid days left to hack, and then I’ll be either packing boxes, saying ‘Goodbyes’, or on the road. I will make the most of the time that is left.

Consider the blog at Flarnie.com on hold for the moment: I’m going on an adventure!

Can we assume JavaScript?

Because 98% or more of the typical site’s users will have javascript enabled, it may be tempting to “assume javascript”. One can hope that the day will come, as it has for CSS (Cascading Style Sheets), when there is no need to worry that any user will be left out when you choose to use javascript. In anticipation of that day, I have reviewed the latest data for javascript use, but there are still enough users to justify including fallback content, or at least a “noscript” element with a message. After all, for a large and popular site 1-2% of their user base could mean hundreds or thousands of users!
Continue reading