blog.base2.io

Getting Started with JSCS and WebStorm

2015-12-30T00:00:00-05:00

JSCS is my new favorite javascript tool. It helps keep all the javascript files looking the way I want it (and my team wants it). You can read more details about it at their site, but for the purposes of this blog post I'm going to show you how to get it setup with WebStorm or other JetBrains IDEs.

Installing/Setup JSCS

First we need to install JSCS using nodejs.

npm install -g jscs

Then we add a jscs config file (.jscsrc) to your project root directory. This is just a .json file. There are many settings you can set in this config file, but there are some convenient presets for you to use. To keep things simple we're just going to use the AirBnB preset. Add this to your .jscsrc file:

{
  "preset": "airbnb"
}

From here you can setup your build to run your code against these settings. We use gulp so I'll just show a quick example on how to set that up.

var gulp = require('gulp');
var jscs = require('gulp-jscs');

gulp.task('lint', function() {
 return gulp.src('src/**/*.js')
   .pipe(jscs())
   .pipe(jscs.reporter());
});

Running gulp lint will run jscs and show you if there are any issues.

WebStorm Settings

Now here's the main part of the post... Get WebStorm setup to format and lint your code based on the jscs config settings. Most of these steps can be done in JetBrain's other IDEs. For example, my screenshots are from IntelliJ, but I'll refer to it as WebStorm for the purposes of this post.

First let's setup WebStorm's javascript JSCS settings so it'll show us the errors in the editor. Open Settings and go to Languages & Frameworks > Javascript > Code Quality Tools > JSCS. Then you'll want to enable the checkbox and set the node interpreter and jscs package location. By default JSCS will look for the default config file in the root of your project. You can leave this selected but optionally if you need to select a config file in another location you can do so by selecting the second option. The Code style preset can be set from this window, but we've basically already done that by creating our .jscsrc file and setting the preset as airbnb there.

This should start working once you hit ok and you'll see any format/style issues with your projects javascript files. You can manually clean them up, but I prefer to make my IDE do the work for me. I found a neat way to import your jscs config into WebStorm's code style settings. Lets set that up now.

Open Settings and go to Editor > Code Style > Javascript. Then select the Manage... button.

This will open another window, select Import.

This opens yet another window, select JSCS config file and click OK

This will open a Select Path dialog window. Just find your project's root directory and select the .jscsrc file located in the root. Then click OK.

You can select to update the scheme you had selected, or create a new scheme. We'll create a new scheme called JSCS. Optionally you could also select a Code Style Preset from this window as well. Last click OK.

Now you can close the Code Style Schemes dialog. Your javascript code style settings will be as close as possible to your settings in the .jscs config file. Now for the really cool part, the IDE will try to format your javascript based on these setting as you code. You can also take a whole file or section and run Reformat Code (my shortcut is opt + cmd + L) and it will try to clean up that code based on these settings. This is great and will help format your code, but there are some JSCS things this will not fix.

JSCS has the ability to fix a lot of those issues though and you can run the command line

jscs /my/project/root --fix
jscs myfilename.js --fix

Or WebStorm has an option to fix JSCS issues in line via context menu on the problem area. Here's a visual example of what that looks like:

This is a little tricky to get this to popup, but if you click on the red squiggly and look for the red light bulb, you have an option to "Fix the current file with JSCS". This basically does the command line example above, but its a nice in editor feature. After doing this to a few files I was was cleaning up it felt tricky and cumbersome to keep doing it this way and I thought to myself "There must be a shortcut to make this happen?" And so I found one, but you have to manually set it.

Add JSCS Shortcut

Open Settings and select Keymap. Search for JSCS. Then select the Fix JSCS Problems and push the edit (green pencil) button. I set mine to opt + cmd + S which was unused, but feel free to set it to something else that makes sense to you and/or your team.

Now whenever you see JSCS errors just use the shortcut key and it'll clean those babies right up!

June is for Shortcuts

2015-06-01T00:00:00-04:00

Keyboard shortcuts are a great way to improve your overall efficiency with your computer, but they can be difficult to commit to memory all at once. This month we will suggest a new shortcut each day that we find helpful in our day-to-day lives as front-end web developers. By learning a new shortcut each day you will be well on your way to living a mouse-free life.

Preface

I do much of my day-to-day work on a Windows 7 machine using WebStorm, Visual Studio 2013, and Google Docs. As such, this list of keyboard shortcuts may not be as helpful to users of different platforms and software, though there are generally similar shortcuts available on those systems.

6/1 Move windows in Windows

I find the ability to manipulate the position of windows via the keyboard in Windows 7 as one of the greatest features the OS offers - yet many users somehow overlook this simple set of shortcuts. By holding the Windows key and using your keyboard arrow keys you'll no longer need your mouse to move the active window.

Key combination	Result
`win` + `left-arrow`	Split left
`win` + `right-arrow`	Split right
`win` + `up-arrow`	Maximize
`win` + `down-arrow`	Minimize

Also, if you have multiple monitors, you can move the window from monitor to monitor by continuing to click the left or right arrow key while holding down the Windows key.

6/2: Move that cursor

Until you learn these simple cursor management shortcuts you likely won't realize how much time you've wasted using your mouse to move the cursor and select words in word documents. Once these are committed to muscle memory you'll be able to type and edit documents like a pro.

You likely already know that the arrow keys can be used to move the cursor, and you may know that holding the shift key while arrowing allows you to select a character at a time. From there you simply need to remember that the ctrl key can be used as a modifier to do things in larger chunks.

Left Key combination	Result
`left-arrow`	move cursor left
`ctrl` + `left-arrow`	move cursor left to the beginning of the word
`home`	move cursor left to the beginning of the line
`ctrl` + `home`	move cursor to the beginning of the document (super-duper left)
`shift` + key combo	select text between cursor start and end point

Right Key combination	Result
`right-arrow`	move cursor right
`ctrl` + `right-arrow`	move cursor right to the end of the word
`end`	move cursor right to the end of the line
`ctrl` + `end`	move cursor to the end of the document (super-duper right)
`shift` + key combo	select text between cursor start and end point

6/3: Google Docs - Shortcut for everything

Have you ever been working in a Google Doc and wanted to add a numeric list (ctrl + shift + 7), a bulleted list (ctrl + shift + 8), or perhaps center the text (ctrl + shift + E)? You likely reached for your mouse and visually scanned the format bar for these features because it's too difficult to remember the individual shortcuts (or there isn't a shortcut at all as in the case of changing the font). Well, you're in luck. There's a single magical shortcut that does it all.

Key combination	Result
`alt` + `/`	search the menu within Google Docs

This simple key combination allows you to search the menu options. So, if you want to change the font to "Courier New" you can hit alt + /, type "cour", and hit enter.

Generally the individual shortcut for each feature is still faster, but a shortcut that you can remember is better than one you cannot. Plus, when you use the alt + / key combination it will show you the shortcut combination to the right of the option before you apply it - so you have a way to learn the more granular ones over time. If you'd like to learn all of the shortcut keys available in Google Docs there's a shortcut for that too: ctrl + /.

6/4: Super pasting powers

Often times adding shift to a keyboard shortcut changes or enhances the shortcut. Most people know that ctrl + v will paste whatever was copied to the clipboard, but many applications offer an enhanced paste with ctrl + shift + v.

Key combination	Result
`ctrl` + `shift` + `v`	Paste without formatting (Google Docs / Microsoft Word), Select from clipboard (Web Storm, Visual Studio)

In Google Docs and Microsoft Word using ctrl + shift + v acts as "paste special". This allows you to paste the clipboard contents in the document's format rather than the originally copied format. For example, if you copy bold Comic Sans text from a web page, and then paste into your Arial Google Doc with ctrl + v, it will paste in bold Comic Sans (which you clearly don't want because you're not a monster); however, if you were to paste with ctrl + shift + v it will paste the text content from the website in the matching Arial font style and size.

In IDEs, such as Web Storm and Visual Studio, ctrl + shift + v allows you to paste previously copied text. In Web Storm ctrl + shift + v will provide a window to select which of the previously copied texts to paste.

Visual Studio will progressively paste the next most recently copied item with each ctrl + shift + v click (while holding ctrl + shift). In both applications ctrl + v will paste the most recently copied text.

Copy this post (ctrl + c) and give it a try!

6/5: Lock it down

Before heading out of the office for lunch (or just going to the bathroom) you should probably lock your computer. Rather than reaching for your mouse and meandering over to the start button, learn this simple shortcut.

Key combination	Result
`win` + `l`	Lock screen (in Windows)

win + l (l for lock) will immediately lock your Windows screen.

Now you can go to the bathroom with the peace of mind that nobody will replace you desktop background.

6/6: Show me the Desktop

It's the weekend and you want to see that pretty desktop image of yours rather than all of the work-related applications and windows. Windows 7 has the nifty little feature that allows you to minimize everything and go straight to your desktop by clicking on the very bottom right of the screen, but that approach is for mouse-lovers, who we are not.

Key combination	Result
`win` + `d`	Show desktop (and minimize all windows) in Windows

win + d (d for desktop) will take you straight to your desktop without ever glancing at your mouse. If you want to bring all of your applications back up simply hit win + d again.

6/7: One-handed Browser Tab Management

At times you may find yourself browsing the web and you think of something different that you want to search for. Many people may click the "add tab" button toward the top of the browser, but that would require touching the mouse and moving it several millimeters up. With just your left hand you can quickly open a new tab and start typing your search.

Key combination	Result
`ctrl` + `t`	Create new tab
`ctrl` + `w`	Close tab or application (Browsers, Windows Explorer, and many other applications)
`ctrl` + `shift` + `t`	Re-open closed tab
`ctrl` + `tab`	Switch to next tab to the right
`ctrl` + `shift` + `tab`	Switch to next tab to the left

ctrl + t will open a new tab in most browsers, and will place the focus in the address bar so that you can immediately begin typing your search (at least in Chrome, which is the browser you should be using). When you're done with the tab you can close it with ctrl + w (w for close?).

ctrl + tab will allow you to quickly switch to the tab to the right. Adding shift to the close or move right shortcuts will reverse their behavior thereby re-opening the closed tab or moving to the tab on the left (oh the magic of the shift key).

Now you're able to create, switch, and remove browser tabs all with just your left hand, which frees your right hand to throw your mouse across the room.

6/8: Spreadsheet Column/Row Selection

It's Monday and you're back to work. If you find yourself modifying spreadsheets for even a portion of the day then it's worthwhile learning some common shortcuts. Today we'll go over how to select columns and rows without using the mouse.

Key combination	Result
`ctrl` + `space`	Select column (Google Spreadsheet, Microsoft Excel)
`shift` + `space`	Select row (Google Spreadsheet, Microsoft Excel)

In both Google Spreadsheets and Microsoft Excel you can use ctrl + space to select the column of the active cell (ctrl for Column). This is helpful when you want to clear the contents of the column (by clicking delete), draw your attention to the column, or act on the column in some other way (we'll go over column insertion and removal in a future post). You can then use shift and arrow keys to select more columns.

If rows are more your thing then you can use shift + space to select a row (shift for "Sooo not a column").

6/9: Spreadsheet Column/Row Insert and Delete

With yesterday's shortcut you now know how to select a column or row in a spreadsheet. Now it's time to learn how to do two of the most popular spreadsheet actions: insertion and deletion.

Sadly this is an area where Microsoft Excel and Google Spreadsheet shortcuts differ. We'll go over Excel shortcuts first.

Excel Key combination	Result
`ctrl` + `+`	Add column(s) or row(s) above or to the left of the selected column(s) or row(s)
`ctrl` + `-`	Remove selected column(s) or row(s)

In Excel you first must select the column(s) or row(s) that you wish to act on. Then you can use ctrl + + to add columns or rows or ctrl + - to remove columns or rows. When adding columns or rows it inserts the same number of columns or rows that you have selected either left of the selected columns or above the selected rows.

Google Spreadsheet Key combination	Result
`alt` + `i` + `c`	Add column(s) to the left of the selected column(s)
`alt` + `i` + `r`	Add row(s) above the selected row(s)
`alt` + `e` + `d`	Remove selected column(s) or row(s)

Since the column and row shortcuts found in Excel are already browser shortcuts used to zoom in and out (note: if you accidentally zoomed in or out you can use ctrl + 0 to return to 100%), Google had to come up with different, less obvious, shortcuts. It is not necessary to select the column or row before using the insertion shortcuts, but by selecting more than one column or row the insertion action will insert the number that is selected.

The insertion shortcuts are alt + i + c for "Insert Column" and alt + i + r for "Insert Row". Column and row deletion is alt + e + d for "Edit Delete".

6/10: Jump to the Address Bar

All too often users shift their mouse to the top of the screen simply to place their cursor in the browser address bar. Cut that bad habit with this simple shortcut.

Key combination	Result
`alt` + `d`	Place cursor in address bar (all browsers and Windows Explorer)

When in a browser or Windows folder (Windows Explorer) pressing alt + d will place focus in the address bar, and highlight the contents of the address bar so that you can immediately begin typing. This is also helpful when you want to copy the address of the page you are on via ctrl + c.

Pro tip: Add a ? at the beginning of you address bar to force a Google search rather than it potentially being treated as a url as is the case when you search for "asp.net".

6/11: Switch Active Windows

This one is an oldie and a goodie. Many people already know and use this shortcut without even thinking about it, but for anybody who doesn't already know how to switch between applications this shortcut is a life changer.

Key combination	Result
`alt` + `tab`	Switch between open applications and windows

If you have multiple applications open you can switch between them with alt + tab rather than clicking on the taskbar icons with your mouse. Using this keyboard combination will switch you to the most recently used application. If you press the combination again it will switch you back. If you press alt + tab but keep holding down the alt key you will see a list of the applications to switch between, and while holding alt it will switch the selected application for each press of the tab key.

6/12: Back and Forward Navigation

When browsing the web you will inevitably need to navigate backward - whether it's to get back to your search results or to return to an embarrassingly cute picture that you stumbled upon. You're in luck - there's a shortcut for that.

Key combination	Result
`alt` + `left-arrow`	Navigate back in browsers and Windows Explorer
`alt` + `right-arrow`	Navigate forward in browsers and Windows Explorer

Using alt and you're left and right arrow keys you can navigate your browser history like a pro. This also works with Windows Explorer so you can quickly open folders and navigate back all day. Note that backspace and shift + backspace will also navigate backward / forward assuming you're focus isn't in an input field, but the alt key approach is convenient because it always works.

6/13: Facebook Stream Navigation

I'm sure you don't use Facebook at work, but now that it's the weekend it's fair game. There's a better way to scroll through your stream than using the mouse or arrow keys.

Key combination	Result
`j`	Scroll to next post (Facebook, Google+, various other sites)
`k`	Scroll to previous post (Facebook, Google+, various other sites)

Using the j key you can scroll down your social stream while sipping on your weekend margarita. If you skipped past something interesting click k. Be careful that you don't have focus in an input field otherwise you're going to have a pretty funny status update (jjjjjkjkjjk).

6/14: Browser Refresh

Web developers refresh their browser approximately 1337 times a day, but even the average user occasionally needs to refresh.

Key combination	Result
`ctrl` + `r`	Refresh the browser
`ctrl` + `shift` + `r`	Refresh the browser ignoring cache (Chrome, Firefox)

ctrl + r will refresh the browser as if you clicked the browser refresh button. Chrome and Firefox also provide ctrl + shift + r, which will reload the page and all of the assets rather than relying on cached data. This comes in handy when you're a web developer troubleshooting a problem.

Note that F5 and shift + F5 perform the same refresh and refresh ignoring cache actions, but they're a bit more of a finger stretch.

6/15: Folder and File Browsing

The most common (and slowest) way to browse folders and files is to double click on My Computer, and then begin clicking and scrolling folders. Using a few keyboard shortcuts will get you where you want to be in a snap.

Key combination	Result
`win` + `e`	Opens Windows Explorer (the equivalent of double clicking "My Computer")
`win` + `r`	Opens the Run window

If you like starting at "My Computer" (labeled as just "Computer" in Windows 7) then win + e is your new best friend. It opens the Computer directory up immediately so that you can begin to navigate the folders.

Folders can be navigated quickly by arrowing down/up to the folder you wish to open and then clicking enter. If you're staring at a long list of folders then you can jump quickly to the folder you want by beginning to type the name of the folder. If you've opened a folder by accident you can use the navigate back shortcut that we learned previously (alt + left-arrow). When you're done navigating you can close the folder with ctrl + w as we learned in One-handed Browser Tab Management.

If you prefer to start at a different folder than Computer you can use the run command win + r and then type the folder you want to jump to (such as c:/windows), and the click enter.

6/16: Rename Folder or File

Yesterday you learned how to navigate folders and files without a mouse, but if you wanted to rename one of those folders or files you would still need to right click with your mouse. No more! Today we learn the simple shortcut that allows for renaming.

Key combination	Result
`F2`	Rename file in Windows Explorer, edit cell in Microsoft Excel

Yes, the function keys in the great north of your keyboard do have a purpose. When browsing files and folders clicking F2 will put the selected folder or file in rename mode with the full name already selected. Therefore if you want to fully rename the folder or file you can just start typing. If, instead, you only wanted to modify the name then after hitting F2 hit arrow-right to remove the highlight.

6/17: New Browser Window

Occasionally you want a new browser window rather than a new tab - especially if you plan to split screen or you are using multiple monitors. Before you drag that new tab out of the window learn this shortcut.

Key combination	Result
`ctrl` + `n`	Open new window (Browsers, Windows Explorer, varios applications)
`ctrl` + `shift` + `n`	Open new icognito window (Chrome)

Use ctrl + n to open a new window (n for New window). This shortcut works similarly in various other applications. For instance, ctrl + n will create a new document in Word and a new tab in Sublime Text.

If you're feeling a little sneakier you open a new Icognito window in Chrome via ctrl + shift + n. Icognito mode allows your to browse without storing history, cookies, etc. This is helpful if you're doing web development or if you're buying your significant other a surprise gift.

6/18: Find What You're Looking For

When you're looking for a specific term on a web page or document the application's search functionality can be a savior, but ironically the search functionality can be difficult to find. Stop searching for the search so that you can begin searching with these shortcuts.

Key combination	Result
`ctrl` + `f`	Opens find in most applications and Windows Explorer
`F3`	Find next in most applications
`shift` + `F3`	Find previous in most applications

Next time there is a term you want to search for simply press ctrl + f to be placed in the application's search form. You can then generally begin typing your search (you may need to hit enter to submit it). If there are multiple results you can go to the next result with F3, and if you accidentally pass what you were looking for you can search backward with shift + F3.

6/19: Start with the Win Key

The Windows 7 Start menu is fairly useful, but most people don't know the shortcuts to take full advantage of it.

Key combination	Result
`win`	Opens the start menu
`win` and then `up-arrow`	Move selection up to "All Programs"
`win` and then `down-arrow`	Move selection to the top item
`win` and then `tab`	Move selection to next section (right column, shutdown, left column)
`win` and then type	Search applications and files

Pressing the win key will open the Start menu. From there you can immediately start typing to search for and open applications. For instance, if you want to open Google Chrome you can generally hit win, type "ch", and hit enter (you may need to type more than just "ch" depending on your installed applications and how recently you've opened Chrome in this manner).

Once the Start menu is open you can also use the arrow keys, tab, and enter to navigate. The arrow keys will move up and down the current column, tab will move you between the sections (right column, shutdown, left column), and enter will open the currently selected item.

So hit win and give it a try!

6/20: Create New Folder and More

If you organizing a lot of files, such as vacation images, you may find the need to create one or more folders. Use this simple shortcut that you've already seen before instead of using the mouse's right-click context menu.

Key combination	Result
`ctrl` + `shift` + `n`	Create new folder (Windows Explorer)

Like many shortcuts, ctrl + shift + n acts differently depending on where it is used. We learned in the New Browser Window post that it opens a new Incognito window in Google Chrome. When used in Windows Explorer, ctrl + shift + n creates a new folder with the name highlighted so that you can immediately begin typing to rename the folder. With this shortcut you can quickly create multiple folders without ever lifting your hands off of the keyboard.

Also remember that many other shortcuts that you likely are familiar with work within Windows Explorer.

Key combination	Result
`ctrl` + `a`	Select all file(s) and folder(s)
`ctrl` + `c`	Copy selected file(s) and folder(s)
`ctrl` + `x`	Cut selected file(s) and folder(s)
`ctrl` + `v`	Paste copied or cut file(s) and folder(s)
`ctrl` + `z`	Undo (delete, paste, rename, etc.)
`delete`	Delete selected file(s) or folder(s)

6/21: Undo / Redo

Today is Father's Day so we'll keep this one short and sweet. We're all prone to make mistakes (especially fathers suffering from sleep deprivation). That's why it's worth mastering the art of undo and redo.

Key combination	Result
`ctrl` + `z`	Undo
`ctrl` + `shift` + `z`	Redo
`ctrl` + `y`	Redo (additional shortcut option)

If you make a mistake in a word document, browser field, Windows Explorer, or almost any other application ctrl + z will reverse the mistake. Think Z for Zorro cutting through your mistake. Most applications keep a list of changes so that you can undo multiple times.

If after an undo you realize that the change was valid and you want to undo the undo (aka redo) use the power of the shift key to reverse the shortcut (ctrl + shift + z).

You can also access the redo functionality with ctrl + y as in whY does this shortcut exist?

6/22: Print Screen and Window Capture

Occasionally you want to take a screenshot so that you can share what you're looking at with another person, but is there a shortcut for that?

Key combination	Result
`print screen`	Capture full screen onto clipboard
`alt` + `print screen`	Capture selected window onto clipboard

Pressing print screen will seem like it didn't do anything, but it tells Windows to take a screenshot of the full screen and add it to your clipboard. Once added to your clipboard you can use ctrl + v to paste it into an email, word document, or any other application that supports images. Just want to capture the current window rather than the full screen? Add alt to the mix.

Tip: If you'd like to capture something smaller than the active window you can use Windows 7's "Snipping Tool". Open it using the Start Menu shortcuts you learned in Start with the Win Key.

6/23: Gmail Shortcuts

Gmail has a wealth of shortcuts, but you have to opt-in to use them. We'll review some of the most useful shortcuts to coax you into opting-in.

With Gmail shortcuts turned on the following shortcuts (and many more) are now available to you:

Key combination	Result
`up-arrow` / `down-arrow`	Move the focus up / down the inbox list
`c`	Compose new email
`x`	Check / uncheck the focused inbox item
`enter`	Open the focused inbox item
`l`	Label the opened or checked email(s)
`e`	Archive the opened or checked email(s)
`#`	Delete the opened or checked email(s)
`ctrl` + `k`	Insert link
`?`	Show all shortcuts

To opt-in to Gmail shortcuts:

Open the desktop version of Gmail (on your computer not a mobile device).
Click the gear icon in the upper right corner, and select Settings.
Within the Keyboard shortcuts section select Keyboard shortcuts on.
Click Save Changes at the bottom of the screen.

6/24: Submit Post When Enter Doesn't Work

On many websites, such as Facebook, pressing enter will add a newline rather than submit your post. This is helpful when you're typing up your status, but how can you submit that status for the world to see without condescending to use the mouse to click the Post button?

Key combination	Result
`ctrl` + `enter`	Submit / send post (Facebook, Gmail)
`alt` + `enter`	Newline (Excel, Google Spreadsheet)

Clicking ctrl + enter when typing a Facebook post submits that post. It's like telling Facebook "This is my final answer". This shortcut also works in Gmail to send an email that you are composing.

On the flipside, if you're in a field that uses the enter key to submit the entry (such as Excel cells), you can generally use alt + enter to create a newline.

6/25: Jump to Website Search Box

Have you ever wondered if there is a shortcut that immediately places your cursor in a website's search box? Probably not, but after learning this shortcut you'll never risk wondering.

Key combination	Result
`/`	Place cursor in search box (Gmail, Facebook, Twitter, Google+, etc.)

When you are within Gmail, Facebook, Twitter, Google+, and many other websites pressing the / (front slash) key will place your cursor in the search box so that you can search mouse-free. Since the front slash shares the key with the ? you can remember this shortcut by thinking, "How can I find what I'm looking for ?".

6/26: Gmail Bullets and Indentation

Numeric and bulleted lists are a clean and concise way to communicate a list of items, but Gmail hides the options within the formatting bar. Learn these shortcuts to be a top lister.

Key combination	Result
`ctrl` + `shift` + `7`	Add numeric list
`ctrl` + `shift` + `8`	Add bulleted list
`ctrl` + `]`	Indent line or selection
`ctrl` + `[`	Unindent line or selection
`shift` + `enter`	Add new line without bullet

ctrl + shift + 7 will get you started with a numeric list. If bullets are more your thing than swap the 7 for an 8. ctrl + ] can be used to indent a line, and ctrl + [ will unident it. Think of the braces as really flat arrows pointing in the direction you want the list to be indented. If you've ever wondered how to add a new line between bullets without adding a new bullet you simply need to add shift to the enter for more power.

Learning these shortcuts will help you create bulleted lists both in Gmail and Google Docs.

6/27: Browser Bookmarks

Want to add the current website as a bookmark? There's a shortcut to make that bookmark star turn yellow.

Key combination	Result
`ctrl` + `d`	Add current page to bookmarks (Chrome, Firefox, IE)
`ctrl` + `shift` + `b`	Toggle bookmark bar open/close (Chrome, Firefox, IE)

To bookmark the current page press ctrl + d (try it now!). Think D as in "Doubt I'll remember this website if I don't bookmark it".

If you'd like to see your bookmark bar (or hide it) ctrl + shift + b is the way to do it.

6/28: Slack Channel Selector

We use Slack for our company's internal communications. It's what you would get if AIM and IRC had a much cuter baby. It provides multiple channels (like chat rooms) to have conversations, but having to click on the channel you want to view is silly when there is a shortcut for that.

Key combination	Result
`ctrl` + `k`	Opens channel selection window in Slack

With ctrl + k you can jump between Slack conversations without lifting your fingers off of the keyboard.

6/29: Chrome Dev Tools

The Chrome Dev Tools is an indispensable tool for web developers, but even non-developers can use it to get a better understanding of what may be going wrong with a web page that they are viewing. Here is a list of shortcuts that I use on a daily basis.

Key combination	Result
`F12`	Open Chrome Dev Tools (to last used tab)
`ctrl` + `shift` + `j`	Open Chrome Dev Tools (to Console tab)
`esc`	Toggle Console open / closed
`ctrl` + `o`	Navigate to source file
`ctrl` + `g`	Go to line number
`ctrl` + `b`	Add breakpoint (when in source file)
`F8`	Resume from breakpoint while debugging
`F10`	Step over next function while debugging
`F11`	Step into next function while debugging
`ctrl` + `l`	Clear console

The average user may only care to know how to open the Chrome Dev Tools (F12), which is great, but if you're a web developer you should commit to memorizing all of these shortcuts to make your working life a little bit easier.

6/30: A Shortcut for Shortcuts

We've covered a lot of shortcuts this month, but there are plenty of others out there. Perhaps one of the best shortcuts to learn is one that tells you what other shortcuts are available.

Key combination	Result
`?`	Lists the available shortcuts for many website applications (Gmail, Facebook, Twitter, Google+, etc.)

Many of the websites that you use every day provide a list of supported shortcuts when you press the ? key (outside of an input box). This single shortcut can make you a shortcut expert in Gmail, Facebook, Twitter, Google+, and many other websites.

Conclusion

Over these past 30 days we've discussed many keyboard shortcuts. You may had already known some, but hopefully you found many new and helpful. If so, then please bookmark this blog (ctrl + d), and share it with others!

Share These Shortcuts by Using These Shortcuts

alt + d to jump to the address bar
ctrl + c to copy the address
ctrl + t to create a new tab
type: facebook.com enter to navigate to Facebook
p to post a new status
Type a flattering description of how helpful this was
ctrl + v to paste the address
enter to share your new-found shortcut knowledge

Bonus Shortcut (now with more mouse)

When browsing the web you can open a link in a new tab by holding ctrl while clicking the link with your mouse (yes, even I use the mouse occasionally).

Solidified Shortcut Sheet

Key combination	Result
`win` + `left-arrow`	Split left
`win` + `right-arrow`	Split right
`win` + `up-arrow`	Maximize
`win` + `down-arrow`	Minimize
`left-arrow`	move cursor left
`ctrl` + `left-arrow`	move cursor left to the beginning of the word
`home`	move cursor left to the beginning of the line
`ctrl` + `home`	move cursor to the beginning of the document (super-duper left)
`shift` + key combo	select text between cursor start and end point
`right-arrow`	move cursor right
`ctrl` + `right-arrow`	move cursor right to the end of the word
`end`	move cursor right to the end of the line
`ctrl` + `end`	move cursor to the end of the document (super-duper right)
`shift` + key combo	select text between cursor start and end point
`alt` + `/`	search the menu within Google Docs
`ctrl` + `shift` + `v`	Paste without formatting (Google Docs / Microsoft Word), Select from clipboard (Web Storm, Visual Studio)
`win` + `l`	Lock screen (in Windows)
`win` + `d`	Show desktop (and minimize all windows) in Windows
`ctrl` + `t`	Create new tab
`ctrl` + `w`	Close tab or application (Browsers, Windows Explorer, and many other applications)
`ctrl` + `shift` + `t`	Re-open closed tab
`ctrl` + `tab`	Switch to next tab to the right
`ctrl` + `shift` + `tab`	Switch to next tab to the left
`ctrl` + `space`	Select column (Google Spreadsheet, Microsoft Excel)
`shift` + `space`	Select row (Google Spreadsheet, Microsoft Excel)
`ctrl` + `+`	Add column(s) or row(s) above or to the left of the selected column(s) or row(s)
`ctrl` + `-`	Remove selected column(s) or row(s)
`alt` + `i` + `c`	Add column(s) to the left of the selected column(s)
`alt` + `i` + `r`	Add row(s) above the selected row(s)
`alt` + `e` + `d`	Remove selected column(s) or row(s)
`alt` + `d`	Place cursor in address bar (all browsers and Windows Explorer)
`alt` + `tab`	Switch between open applications and windows
`alt` + `left-arrow`	Navigate back in browsers and Windows Explorer
`alt` + `right-arrow`	Navigate forward in browsers and Windows Explorer
`j`	Scroll to next post (Facebook, Google+, various other sites)
`k`	Scroll to previous post (Facebook, Google+, various other sites)
`ctrl` + `r`	Refresh the browser
`ctrl` + `shift` + `r`	Refresh the browser ignoring cache (Chrome, Firefox)
`win` + `e`	Opens Windows Explorer (the equivalent of double clicking "My Computer")
`win` + `r`	Opens the Run window
`F2`	Rename file in Windows Explorer, edit cell in Microsoft Excel
`ctrl` + `n`	Open new window (Browsers, Windows Explorer, varios applications)
`ctrl` + `shift` + `n`	Open new icognito window (Chrome)
`ctrl` + `f`	Opens find in most applications and Windows Explorer
`F3`	Find next in most applications
`shift` + `F3`	Find previous in most applications
`win`	Opens the start menu
`win` and then `up-arrow`	Move selection up to "All Programs"
`win` and then `down-arrow`	Move selection to the top item
`win` and then `tab`	Move selection to next section (right column, shutdown, left column)
`win` and then type	Search applications and files
`ctrl` + `shift` + `n`	Create new folder (Windows Explorer)
`ctrl` + `a`	Select all file(s) and folder(s)
`ctrl` + `c`	Copy selected file(s) and folder(s)
`ctrl` + `x`	Cut selected file(s) and folder(s)
`ctrl` + `v`	Paste copied or cut file(s) and folder(s)
`ctrl` + `z`	Undo (delete, paste, rename, etc.)
`delete`	Delete selected file(s) or folder(s)
`ctrl` + `z`	Undo
`ctrl` + `shift` + `z`	Redo
`ctrl` + `y`	Redo (additional shortcut option)
`print screen`	Capture full screen onto clipboard
`alt` + `print screen`	Capture selected window onto clipboard
`up-arrow` / `down-arrow`	Move the focus up / down the inbox list
`c`	Compose new email
`x`	Check / uncheck the focused inbox item
`enter`	Open the focused inbox item
`l`	Label the opened or checked email(s)
`e`	Archive the opened or checked email(s)
`#`	Delete the opened or checked email(s)
`ctrl` + `k`	Insert link
`ctrl` + `enter`	Submit / send post (Facebook, Gmail)
`alt` + `enter`	Newline (Excel, Google Spreadsheet)
`/`	Place cursor in search box (Gmail, Facebook, Twitter, Google+, etc.)
`ctrl` + `shift` + `7`	Add numeric list
`ctrl` + `shift` + `8`	Add bulleted list
`ctrl` + `]`	Indent line or selection
`ctrl` + `[`	Unindent line or selection
`shift` + `enter`	Add new line without bullet
`ctrl` + `d`	Add current page to bookmarks (Chrome, Firefox, IE)
`ctrl` + `shift` + `b`	Toggle bookmark bar open/close (Chrome, Firefox, IE)
`ctrl` + `k`	Opens channel selection window in Slack
`F12`	Open Chrome Dev Tools (to last used tab)
`ctrl` + `shift` + `j`	Open Chrome Dev Tools (to Console tab)
`esc`	Toggle Console open / closed
`ctrl` + `o`	Navigate to source file
`ctrl` + `g`	Go to line number
`ctrl` + `b`	Add breakpoint (when in source file)
`F8`	Resume from breakpoint while debugging
`F10`	Step over next function while debugging
`F11`	Step into next function while debugging
`ctrl` + `l`	Clear console
`?`	Lists the available shortcuts for many website applications (Gmail, Facebook, Twitter, Google+, etc.)

Regex - Replace with Groups

2015-05-13T00:00:00-04:00

I was recently confronted with a situation that required me to search and replace my code in a way that the left and right of my search needed to be replaced, but the middle needed to remain the same. Could this be done with a single search and replace?

The Problem

For reasons that I do not care to detail here, I found myself needing to replace every instance of my Visual Studio solution where a template line matching

template: require('Project/DynamicComponentName/DynamicComponentName.html')

is replaced with a templateUrl

templateUrl: 'Project/DynamicComponentName/DynamicComponentName.html'

In this example the DynamicComponentName is different in every instance.

Rather than manually identifying every template line and make the necessary changes I wanted to do a single search and replace and be done with it. Regex felt like the right answer, but how?

Regex Groups

Regex, or regular expressions, is a very powerful (read as: "complicated to use and understand") pattern matching grammar. It provides for more advanced searching capabilities than a standard text-base search. Luckily Visual Studio provides for searching via Regex (screenshot is of Visual Studio 2013).

With Use Regular Expressions selected in Visual Studio we can take advantage of regex, including its group capturing via parentheses.

In the Find what we can place the following regex query

template: require\('Project/(.*)'\)

This tells Visual Studio to match everything that directly matches template: require(Project/<any number of characters>)'. Note that the require's parentheses needed to be escaped with \ because the parentheses are part of the regex syntax. You can use the http://www.regexr.com/ online tool to test the regex matcher on your own.

Now if we place the following in the Replace with field we'll be able to place the contents captured by the (.*) capture group using the $ syntax.

templateUrl: 'Project$1'

The contents of the capture group will be placed in the $1 slot. If you had more than one capture group then you would simply increment the $ ($1, $2, etc) based on the order that the capture groups appeared in the search term.

Now hit Replace for each instance and you're good to go.

In my situation I really wanted to use Replace All, but Visual Studio 2013 seems to have an issue with Replace All using regex. Using Replace All results in Visual Studio stating that it cannot find any matches. Silly Visual Studio.

Git Configured

2015-05-06T00:00:00-04:00

Git configurations are like snowflakes - no two are exactly the same. At least that's what we found to be true at Base Two. Each developer had his own ignores, aliases, and other tricks, which worked fine in isolation, but became troublesome when we tried to describe to one another how to interact with Git in the console. To restore sanity we have begun to standardize our Git configurations.

The standardization of our Git configuration files is part of our larger effort to document our overall development standards. In addition to configuration files we're outlining our overall Git workflow and commit messaging standards, but I digress.

The two primary divergents in our configurations were aliases and ignore files.

Alias all the things

If you're working with Git from the command line (that's what all the cool kids do) your fingers are going to get tired without aliases. Who has the time to type git status when you could accomplish the same thing with git s? That's 5 fewer characters!

Honestly, though, aliases are a great way to make Git on the command line manageable. Here is the global .gitconfig file that contains the aliases that we use:

Ignore some of the things

Source control is great for keeping your code safe, but mixed with all of that code are IDE files, merge files, build artifacts, and plenty of other files you'd prefer to not have pollute your repository. That's where .gitignore files come into play. You likely already have one or more gitignore files in your repository, but did you know that you can create a global ignore file? This is a great place to configure all of the common files you'd like to ignore, which is especially appreciated when you wish to contribute to an open source project (the other people on the project likely don't care about your Visual Studio Resharper user settings file).

To create a global ignore file simply add excludesfile = ~/.gitignore to the [core] section of your global .gitconfig file (see above), and then create a .gitignore file as a peer to the .gitconfig. Here is the ignore file that we recommend:

Web Development Project Puzzle Pieces

2014-08-04T00:00:00-04:00

Web development can be like trying to complete a puzzle that has had its pieces dumped into a box with multiple other puzzles. There are so many puzzle pieces that it can be difficult to even know what picture you should end up with at the end.

While every project is it's own puzzle, there are a lot of common pieces out there. Here's a walk-through of how we got some of our favorite pieces (Angular, Rails, Vagrant, and more) to fit together.

What Pieces Do We Have?

Below is the list of technologies we use in this example. For your reference I'm on a 64 bit version of Windows 7. Be aware that if you're using something else your results may vary.

RubyGems (2.3.0): Ruby's package system.
Rails-api (0.2.1): A lightweight version of Rails to provide API capabilities without the extra pieces that Rails brings to the table.
Vagrant (1.4.3) with VirtualBox (4.3.14): Allows for the configuration of reproducible and portable virtual machines.
Puppet: Provisioner for Vagrant.
Angular (1.2.16): Front-end JavaScript framework.
Git (1.9.0): Distributed source control.
npm (1.4.14): We use this for the installation of some of the other tools.
Yeoman (1.2.0): Web scaffolding tool that we use to scaffold angular via the angular generator.
Grunt (0.1.13): The build system that comes with Yeoman.
Bower (1.3.8): The package manager that comes with Yeoman.

Generate the Rails App

There are many ways that we can begin to put this puzzle together. We're going to start by generating the Rails app. For this example we'll use my_app as our application's name.

In your terminal (I use Console2) navigate to the location you'd like your application's root folder to be placed in. If you don't already have rails-api installed then do that now.

gem install rails-api

Generate your Rails app with the following

rails-api new my_app

Now let's make a few changes to what was auto-generated for us. cd my_app and remove the /test/ directory because we'll be using rspec for testing instead.

Open your Gemfile and update it to include the gems that you'll need. Here's what we used, but you'll want to upgrade to the latest packages for your application.

We also need to change our database.yml file because we'll be using PostgreSQL rather than SQLite.

Vagrant and Puppet

Now that our bare-bones Rails-api app is created we’ll setup Vagrant. Vagrant will allow us to provision and run a virtual machine in a consistent way. This will remove the “it worked on my machine” problem that often plagues developers.

We’ll use the rails-dev-box as our base since it has many of the features we’ll need. You can clone the repository from here: https://github.com/rails/rails-dev-box

Now copy the Vagrantfile and the /puppet/ directory from the rails-dev-box into the root of your application (as a peer to your Rails /app/ directory). Open the Vagrantfile in your favorite text editor (I use Sublime Text 2), and change the config.vm.hostname from ‘rails-dev-box’ to the name of your app. This will make it a little less confusing when you’re in your VM.

Now open the /puppet/manifests/default.pp puppet manifest file. This file contains a lot of optional configurations that we will not be using. Make the following changes to the file:

Change $ar_databases values to your application name rather than activerecord_unittest. Example: $ar_databases = ['my_app_dev', 'my_app_test']
Remove the SQLite and MySQL sections because we’ll be using PostgreSQL
Add the following Puppet modules (which can be installed on Windows by first downloading the tar.gz file, extracting it, copying the resulting folder into the app's /puppet/modules/ directory, and then renaming the folder to it's module name :
- nodejs: https://forge.puppetlabs.com/puppetlabs/nodejs
- stdlib: https://forge.puppetlabs.com/puppetlabs/stdlib
- apt: https://forge.puppetlabs.com/puppetlabs/apt
This version of Ubuntu’s npm is out of date so we need to make an adjustment to the /puppet/modules/nodejs/manifests/init.pp file. You'll need to set $manage_repo = true.
Within the default.pp file replace the nodejs section with include nodejs
Add the puppet-yeoman module from https://github.com/nickhartjes/puppet-yeoman by
- Cloning the repository
- Copy the init.pp file into the /puppet/modules/yeoman/manifests/init.pp directory.
- Remove “curl” from the yeomanPackages because it already exists in our default.pp.
- Change require => Exec['apt-get update'] to require => Class['apt_get_update']
- Add a call to the module at the bottom of the default.pp file with include yeoman
Add the angular generator for yeoman by adding the following to the bottom of your default.pp file:

Navigate to the root of your Rails directory in your console and start vagrant with the vagrant up command.
Now access your VM via ssh

vagrant ssh
> cd /vagrant/

Update the bundle, and rake the database

    > bundle update
    > rake db:create

Angular!

Now we'll add a basic angular structure to our application.

Create an /angular/ directory within your rails directory (as a peer to the /app/ directory).

    > mkdir angular && cd angular

Run the angular generator (within your Vagrant VM) and answer the questions to match your needs (I answered yes to all).

    > yo angular my_app

If you ran into any errors during the generation you may need to run the bower install and npm install manually.

    > bower install
    > sudo npm install

Now adjust your Gruntfile.js within the /angular/ directory so that dist places the build files in the rails /public/ directory.

Also add the following to the connect section (replacing the livereload section) so that your files are proxied during development.

Build the angular assets with Grunt (from within the /angular/ directory)!

    > grunt build

If you see an error dealing with lodash it is likely the result of long file paths. The latest stable version of npm does not support a fix for this. You’ll need to run npm and grunt from your local development machine rather than Vagrant.

Done! - Frame that puzzle (with Git)

You've successfully created your bare structure for web development. It may feel like you just put all the pieces of the puzzle together to find that the picture is blank, but at least now you have a canvas to paint a your cat pictures on. Let keep that canvas safe by storing it on Git.

Initialize the git repository from the root Rails directory (this can be done within the console of your local development machine).

> git init

Add the following to the .gitignore file:

/.vagrant   #this contains your local vm box info which is not needed by the team

ASP.NET vNext TL;DR

2014-05-12T00:00:00-04:00

Scott Hanselman just wrote a blog entry about what's next for ASP.NET (vNext). The article has pretty pictures and is worth a read, but if you're too busy to read it here are the things that stood out to me.

packages.config, nuspec, and project files (csproj) merged into a unified view of project dependencies expressed as project.json
The ability to patch open source libraries with a simple override folder
“No-compile compile” - i.e. The ability to update a C# class and refresh the browser to see the change without needing to recompile the project
ASP.NET MVC and Web API unified into a single programming model
Dependency injection out of the box

Using Heroku Multi Build Packs to Deploy a Yeoman/Bower/Grunt Application on Rails

2014-03-14T00:00:00-04:00

At Base Two, we expect our developers be familiar working with multiple layers of the web stack. Many of us got our feet wet building Rails applications and have recently been having a lot of fun building single page javascript and mobile applications with Yeoman, Grunt and Bower.

Thick Client === Happy Clients

First some background on us. We are a technology company that builds web, mobile, desktop and embedded solutions for clients big and small. We have worked to get our startup clients from the incubator to seed-stage funding and have helped our large corporate clients like AEP communicate better by converting processes typically carried out in excel spreadsheet into rich web experiences (and on Internet Explorer 8, no less!).

When we first began our work with AEP, we had just been contracted to do some shadow IT for one of the company's business units. Our first question in our first meeting was, "We know you do a lot of .NET here, but would you mind if we gave Ruby on Rails a go?". It should have been a red flag that there were no internal IT representatives in the room, but we weren't about to look a gift horse in the mouth. The business unit signed off on our project and gave us the go-ahead to write a Rails application.

We decided that -- given the project's requirements -- a thick javascript client with a Rails JSON API made a lot of sense. We were comfortable developing BDD Rails applications quickly and felt like a clear separation of the front and back-end would allow developers to work better in parallel.

Three months later, when our client's IT department stepped in to mandate that the project be completed in .NET, we had a single page javascript application and knew what the JSON endpoints were supposed to look like. Over the next 6 months, we swapped the Rails services for .NET and continued adding features to our thick client application. All of this to say, thick clients + JSON APIs are a really flexible way to do development and, while they aren't the answer to every problem, they rock, we have fun building them and in this particular case, they saved our client a lot of time and money.

Automating Front-end Workflow

Last fall, I viewed a slide deck from Addy Osmani that completely blew my mind. The name of that deck was "Automating Front-end Workflow", and it has completely changed the way I do development.

In particular, we have adopted Yeoman for scaffolding new applications, Grunt for automating tasks (minifying scripts, compiling SASS and Coffeescript, running static code analysis, unit and end to end tests, and even removing unused CSS rules) and Bower for managing dependencies. Scaffolding, previewing, testing and building a new AngularJS with Yeoman is as simple as:

At this point, if we wanted, we could begin test-driving the front-end with mock services while another developer begins writing Rails/PHP/.NET/Go/etc.

Build Artifacts in Version Control !== Best Practice

So, here's where the dream died a little for me. We use Heroku for hosting our Rails applications and deploy to Heroku with Git. When Heroku receives the push, it recognizes and builds our Rails application just fine, but does nothing to the subdirectory containing our javascript application.

Our build workflow looked like this:

After merging changes into master checkout new branch called build
Run grunt build (target is ./public in the Rails root directory)
Commit changes
Push to remote
Issue pull request to master
Merge changes
Push master to Heroku

I get worn out just reading that list.

If the threat of extra work isn't compelling enough to convince you that this isn't the right way to be doing things, how about this: build artifacts simply do not belong in source control. If only Heroku could recognize our Rails application and also know to fetch our front-end dependencies and run our Grunt tasks.

Automating Multiple Builds on Heroku

I'd like to say that I got fed up with the above build process and went searching for a better way, but that would be--at best--a half-truth. A few months ago, we got an email from an Advocate at Heroku named Christopher Lauer asking if he could chat with us about ways to improve our Heroku experience. I had no idea they did this kind of thing and was thrilled to get a forum to ask questions about the platform.

This is where Christopher turned me on to the idea of using multiple build packs. I had no idea what buildpacks were, so I started poking around. From the documentation:

When you git push heroku, Heroku’s slug compiler prepares your code for execution by the Heroku dyno manager. At the heart of the slug compiler is a collection of scripts called a buildpack.

Ok, so buildpacks are the steps Heroku uses to build my application once it recognizes that I'm using Ruby/Node/etc. So how do I tell Heroku that it should stop trying to recognize my environment and instead let me call the shots? It's a simple environment variable. So, if I want Heroku to look for a Ruby/Rails application, I would configure it to use the ruby buildpack:

If, instead, I would like it to run a package.json and install dependencies like Compass and Grunt, I would configure it like this:

But this doesn't yet solve my problem. Enter, multi build packs.

Now, when you push to Heroku, the service will first look for a package.json and Gruntfile in the root (I point the Gruntfile to the Gruntfile in my subdirectory with grunt-hub) before bundling and spinning up a Rails server.

Wrapping up

$ git rm -rf /public

Removing my build artifacts from Github was a triumphant moment. Concurrently developing for the front and back-end feels humane.

I'm sure that there were likely some holes in this document and more than a few logical jumps. I'll keep an eye on the comments and plan on linking a few resources below.

Buildpack Documentation
Heroku Multi Build Pack
Angular + Rails + Yeoman = Angrailman? - the directory structure we chose for combining Rails and Angular

Wireframes for Developers

2014-03-09T00:00:00-05:00

Wireframes are a great way to visually communicate the expected user behavior of an application to your team and your client. So, is this post for an information architect to better understand what developers are looking for, or for developers wanting to create wireframes for their clients? Well, the answer is both.

On smaller teams, where the developer is the one gathering the requirements, wireframes can help to demonstrate to the client that the team understands the overall solution. Wireframes also can save everybody a lot of time by identifying usability issues upfront - before the application is coded.

Larger teams may have a dedicated information architect who acts as a liaison between the client and the development team. In this case the wireframes are the primary artifact for the developers to understand the requirements of the application. Therefore it is important that the edge cases that developers look for are accounted for in the wireframes.

Know Your Tool

There are a lot of good wireframing tools available online. The one we use is Balsamiq Mockups. It is reasonably priced, easy to use, and contains the basic functionality needed to create wireframes without a lot of extra fluff. Depending on your teams needs this tool may or may not work for you. Regardless of your wireframing tool, I recommend that you take some time to learn your tool.

Shortcuts - Does the application have shortcuts that will help you wireframe with ease?
Templating - Is there a way to template common items so that changes can be made in one place rather than copying and pasting?
Presentation - How can the final wireframes be demonstrated? Export to pdf, png, or live presentation mode?

Know Your Resolution

Are you creating a website, desktop app, or mobile app? Your wireframes should be sized based on the lowest resolution the application will support. If you are targeting multiple platforms then it will be necessary to create different sets of wireframes. For instance, you may need to have a set that is based on a mobile device, and another set at 1024x768 for a web browser.

Data Matters

In most cases lorem ipsum is not going to cut it. Developers may not read your annotations (and they probably won’t), but they will expect the data on the screen to be consistent. Your example data and wireframes should tell a story. If you show John Doe selected in a list then John Doe should be selected in the detail view as well. Also, you shouldn’t simply copy and paste a bunch on “John Doe” items to populate the list. Doing this could lead the developer to think that each person should be listed multiple times.

To make example data easier and more fun to create go out to imdb and use the cast of one of your favorite shows. It’s especially helpful if you use a tv show or movie that works with your type of application. For instance, if the application is for a business then Mad Men may work. A To-do app could be Breaking Bad. However, be aware that your show selection may say more about yourself then you care to share, and not all shows are client-safe.

Think Like a User

The most important player in this game is the user. So it’s important to think like one. Mentally navigate the application like a user. Log in, go to the home screen, and think “What do I want to do now?”. You can get all of the client’s features in the application, but if the user doesn’t know how to intuitively navigate to those features it’s a loss cause.

Think Like a Developer

Developers think in edge cases. They don’t question if the glass is half full or half empty - they ask, “What if there is no glass? What if there is no table for the glass to sit on?”. It’s important to show the happy path in your wireframes so that everybody knows how it works, but it’s also important to show how the application should react when things go wrong. What happens if required data is not entered, the user forgets his or her password, or there are no results to show in a list?

Think Like an Application

Unlike your wireframes, the application you’re designing is not static. The screen size may be different, and the result list may be large or small. Your wireframes should visually describe how the application should adjust to handle these differences. Where can scrolling occur? Do certain portions of the screen stretch as more space is available? Should text truncate with an ellipsis when it is too long to fit?

Autocomplete and the Three Algorithms

2014-02-25T00:00:00-05:00

A lot of our projects have some form of autocomplete functionality baked into them; but recently we had a client ask for something a little more mistake proof. A lot of users in this particular application will be searching for something based on the sound of a word and not really know the exact spelling.

In talking over examples of how the new autocomplete should match, the product owner sent us in the direction of a possible solution he'd had some experience with in the past: the Soundex algorithm.

This one is too cold

To give a little more context, this particular application is hosted on Heroku and uses a PostgreSQL database for persistent storage. Given that, we started by seeing what PostgreSQL can do for us. As it turns out, it's got support for Soundex right out of the box.

The Soundex system is a method of matching similar-sounding names by converting them to the same code. It was initially used by the United States Census in 1880, 1900, and 1910. Note that Soundex is not very useful for non-English names.

That might be exactly what another application needed, but we aren't dealing with people's names, we're dealing with brand names. Time to break out our SQL-fu and see how the results hold up.

First things first, you'll need to have the fuzzystrmatch module installed on PostgreSQL database. You can do that by dropping into the PSQL console and running: CREATE EXTENSION fuzzystrmatch;. Now in a query you can run something a query to get some results:

Looking those over for our data-set, we aren't getting at all the results we'd want. Time to start looking at other options…

This one is too hot

A little farther down that page of PostgreSQL documentation is the Levenshtein distance algorithm.

This function calculates the Levenshtein distance between two strings.

That sounds promising, let's give that a try. The Levenshtein function comes packaged in the fuzzystrmatch module with Soundex, so no need to go back into the PSQL console, instead we'll start with a query:

It wasn't immediately clear how Levenstein was sorting the results. But further investigations revealed that output of the function is the edit distance between the two strings; which is to say: how many changes you need to make to the get from one string to the other.

Once again, the results from this aren't really what we're looking for, so it's back to the drawing board…

This one is just right

After a broader search, we came upon the pg_trgm module that adds Trigram similarity to PostgreSQL.

A trigram is a group of three consecutive characters taken from a string. We can measure the similarity of two strings by counting the number of trigrams they share. This simple idea turns out to be very effective for measuring the similarity of words in many natural languages.

That sounds much more promising, let's get to the query and see what results we get. Similar to the other two algorithms, we'll have to add the module to PostgreSQL first by running CREATE EXTENSION pg_trgm; in the PSQL console. From there, we can hop back to the query interface:

We've got results that match up to our use case. A search for "hazienda" matches first to the brand named "Hacienda", and then to some other sensible results. Perfect!

Now we just need to step back into our Rails API server and get this query running. That should be easy, right?

The bears came home, and they were upset

Perhaps incorrectly, our first instinct was to try and avoid reinventing the wheel. So we did some searching for reputable gems that wrap the pg_trgm module's Trigram search functionality and came across textacular and pg_search.

If you couldn't tell from the section header, some things went wrong here, but before we get into that let me say that both of these gems are awesome. They've got test coverage, quality metrics, semantic versioning, multiple contributors, etc. In short, they've got all the indicators of healthy, vibrant repositories.

That said, let's talk about what went wrong. Of the two gems, textacular is much more straightforward (though not as feature rich) and has all the functionality we want. The fuzzy_search finder it adds is perfect, we should just be able to call from our Brand model like Brand.fuzzy_search(name: 'hazienda').limit(10) and we should get our Trigram similarity matches.

The catch is, textacular adds in a WHERE clause that was incompatible with our use case. The clause they put in makes sure the fuzzy search term is a substring in the column before running the similarity match. This is probably a performance optimization for large tables and complex combination queries, but for our purposes the raw query was fast enough and the substring match killed our ability to catch spelling mistakes.

Goldilocks made her own porridge

In the end, we decided to roll our own. Following one of the wonderful model refactoring patterns from Code Climate (#4), we extracted it as a query object:

Link Roundup #4

2013-12-14T00:00:00-05:00

Libaries

Talks

Articles

Tools

Link Roundup #3

2013-12-07T00:00:00-05:00

Libaries

elabs/pundit

Talks

Articles

Tools

Unleash Ruby

Link Roundup #2

2013-11-30T00:00:00-05:00

Libaries

Talks

Super VanJS 2013: Steven Luscher - Developing User Interfaces With Facebook's React

Articles

Tools

Link Roundup #1

2013-11-23T00:00:00-05:00

The first in a (hopefully weekly) recurring post where we collect interesting links from the week.

Libaries

Articles

Tools

Conditionally Mock $httpBackend

2013-10-29T00:00:00-04:00

I recently followed this awesome blog post to mock $httpBackend for my end-to-end tests. The problem I immediately ran into is that, while mock data is fine for my e2e tests, I want to connect to a local backend when developing and get real data.

Conditionally inject e2e-mocks

The Burnside Digital blog post suggests including the following script in your application's index.html.

Karma's end-to-end tests open your application in an iFrame. To conditionally inject the mocked $httpBackend, we can check to see if we are in an iFrame and only include e2e-mocks if we are.

Now, when developing, you can work with your development server and when testing you can use mocked data.

Karma + Circle CI

2013-10-18T00:00:00-04:00

Update: I recently discovered a much smarter way to be doing this. Here it is:

Circle CI is an awesome, affordable continuous integration solution. I am currently using it in an Angular + Rails project, scaffolded with Yeoman, following a workflow similar to this.

Here's the problem I ran into: Circle was automatically recognizing and running my rspec tests, but not my angular app's (located at rails_root/angular) karma tests.

Circle.yml

Boom. The npm/bower package management is a little time-consuming, but this runs both my rspec and karma tests.

Startup Magnet Poetry

2013-08-23T00:00:00-04:00

This morning during our weekly meeting, I came up with an idea to facilitate our twenty percent time / new product brainstorming. We often find ourselves explaining our ideas by comparing them to existing products or services. StumbleUpon + LinkedIn. Google Glass meets Nike+ meets Yelp, etc.

Magnets, How Do They Work?

I spent a couple hours this afternoon and got a working proof of concept! It was such a rewarding thing to go from concept to finished product so quickly!

Desperately Seeking Contributions

I think this could be a fun, valuable thing. If you feel the same way, please fork and contribute!

Seeding with progress

2012-11-30T00:00:00-05:00

If you're doing database seeding in a rails app through seeds.rb you might be interested in this snippet, especially if you're using CSV files to help you do it.

Mo Rows, Mo Problems

A couple of our recent projects have had rather large CSV files that need to be seeded. Running a rake db:seed command takes an agonizing couple of minutes (several of the files have tens of thousands of rows). To help soothe our neurotic impulses to kill the process midway through we decided to have a bit of fun sprucing up the console feedback while the seeding is underway.

We started out with a simple puts "Seeding Models...", but that really doesn't tell you anything about how many more models need to be seeded. We decided to take a page out of the UNIX playbook and give the user a bit more information.

The UNIX way

There's a nifty utility named wget in UNIX that will let you download things given a URL. It gives you a nice visual representation of the progress in the console using a text-based progress bar that looks like this:

vagrant@lucid64:~$ wget https://www.google.com/images/srpr/logo3w.png
--2012-12-01 04:59:29--  https://www.google.com/images/srpr/logo3w.png
Resolving www.google.com... 173.194.75.99, 173.194.75.147, 173.194.75.106, ...
Connecting to www.google.com|173.194.75.99|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 7007 (6.8K) [image/png]
Saving to: `logo3w.png'

100%[=========================================================================>] 7,007       --.-K/s   in 0.007s

2012-12-01 04:59:29 (958 KB/s) - `logo3w.png' saved [7007/7007]

With a bit of digging, we found the \r special character for the print method, which allows you to do some UNIX-style magic in updating what you've already printed to the console. The \r character will clear the current line of the display in the console.

Running a rake db:seed will now give you live progress updates:

vagrant@lucid64:/vagrant$ rake db:seed
Seeding Genre:
100.00% [=====================================================================>]

Ah, much better!

Vagrants and Chefs and Librarians... oh my!

2012-05-01T00:00:00-04:00

Update: Thanks to SDude, zibuki, bilke, and Anthony Goddard for helping to keep this post up-to-date and working.

For those of you out there doing development, you've probably run into some or all of the following problems:

Your development environment doesn't mirror your production environment.
It's difficult or impossible to keep everyone's development environment consistent in multi-developer projects.
You can never remember how to get all the configuration nuances right for whatever dependencies your project requires.
It takes real, significant amounts of time to get yourself ready to go when starting or switching projects.
The dependencies of one project might conflict with another project.

These issues kill your productivity with time-consuming and difficult-to-isolate issues that have nothing to do with the problem you actually want to solve. To get around these issues and give ourselves some other advantages (more on that later) we're using a gem called Vagrant to create a portable development environment.

A Vagrant's life

Vagrant is essentially a command-line wrapper on top of Oracle's VirtualBox. This lets you initialize, suspend, resume, and destroy virtual machines right from your terminal easily. Getting started is as easy as:

For a more detailed setup guide, check the Getting Started documentation for Vagrant.

So with a nice, fresh virtual machine to play with, we can go ahead and setup all the things we need in our development environment. We can even do our best to mirror our production environment so we can avoid all those "it worked on my machine" issues.

But we're still left with a problem, this virtual machine isn't portable. If someone else joins the project, they'll have to go through whatever manual setup steps we did to get the dependencies installed on their own Vagrant box.

Not to worry though, Vagrant has the perfect solution for you: Provisioning. Provisioning allows you to automate the setup of your development environment using either Puppet or Chef. Based on our research, Chef seemed like the right way to go.

The Chef and the Librarian

Chef is a provisioning tool, and as you might expect it makes it possible to automatically configure a machine (virtual or otherwise) into a specific state. In keeping with the culinary metaphor Chef has recipes which represent a specific configuration (e.g.: setting up an Apache server). Recipes are organized into cookbooks, which are really just containers for all those configuration options.

There's a mountain of technical detail involved in Chef, it can be used to mainain an entire cloud infrastructure. To keep things simple, and within our abilities, we're going to be focusing on a use of Chef called Chef Solo.

When you looked at the Vagrant Getting Started documentation for Provisioning you might have noticed the following use of Chef Solo to provision their sample box:

This kind of usage is great for a "Hello World" example, but not so great for showing you how to use Chef Solo to provision in a more realistic context. We ran into some stumbling blocks with Chef Solo: How do we manage the cookbooks and recipes properly? Should we install them in the user directory? The project directory? How do we ensure everyone is using the same version?

At some point in our search for sanity in that process we ran across a great gem called Librarian that aims to solve this exact problem. To setup Librarian for our project we need to run the following commands:

What you're doing there is ignoring a few folders in git and initializing the project for Librarian. Part of that initialization is to create a Cheffile which serves as your way to define what cookbooks/recipes you need in a clean and portable way.

To set the stage a bit, let's say we're starting a Ruby on Rails project and we know we're going to need the following things:

An up-to-date system (through aptitude)
Ruby (through rvm)
Git (through git-core)

Not the most complicated set of requirements, but sufficient for getting this project off the ground. Let's take a look at a Cheffile that gets us the recipes we need:

After we've set that, we simply run librarian-chef install to have Librarian pull down all those cookbooks and install them into our project. Now we just need to setup Vagrant to provision our environment:

Pretty straight-forward stuff there, we're just telling Vagrant to provision using Chef Solo, telling it where to find our cookbooks, and which recipes to use. After we've got those changes in place, we run vagrant up to have Vagrant initialize and provision our virtual machine.

At this point, you should be able to vagrant ssh into your box and run ruby -v to confirm that everything went as planned. Vagrant will also yell at you during the provisioning phase if something about the process didn't go according to plan.

The finale

So what have we really accomplished here? Well, we've created a simple, automated, and portable way for you to setup all the dependencies for your project without cluttering your system. No more "works on my system", no more cross-contamination from projects. And if you're on Windows now, no more "only supported on *nix" frustrations. Let's take a look at what a new developer coming onto the project would need to do to get setup:

Take a moment to look at that...

Four. Commands.

Four commands and you've checkout out the project from version control and setup a clean, fully provisioned, and isolated virtual machine to do your development in.

As you can see, Vagrant, Chef, and Librarian make a seriously powerful addition to your development arsenal. As such, there's a lot more things you can do with them; here's some links to get you started:

Vagrant Documentation -- more detail on how you can use Vagrant to setup virtual development environments.
Chef Solo Wiki -- more detail on how you can use Chef Solo to provision your Vagrant box.
Librarian README -- more detail on how you can use Librarian to manage your chef cookbooks and recipes.
Opscode's cookbooks -- the company behind Chef maintains this repository of cookbooks.

Now, with more Jekyll

2012-04-30T00:00:00-04:00

We've let our blog languish for a long time now -- while talking about the reasons behind that, one thing that kept coming up is that it didn't seem like it was part of our normal workflow. In an attempt to remedy some of that, we've switched over from Blogger to Jekyll (via Github Pages). Below are a few of the advantages we've found so far:

Complete control over the presentation.
Familiar (git style) workflow (branch, write, test, merge, push).
Dead-simple local testing with jekyll --server.
Free, reliable hosting on Github.

So far, the experience has been great. We're actually excited about writing new posts now. And hey, we've posted again so that's good... right?

Open For Business!

2011-08-26T00:00:00-04:00

We are proud to announce that Base Two Interactive, a creative digital agency based in Columbus, Ohio, co-founded by former Clutch Interactive employees Andrew Miller and Zack Brown, has officially opened for business. Our team has delivered innovative digital content for agencies, local businesses, and multinational companies, including McGraw-Hill, Home Depot, Wendy’s, Cardinal Health, Limited Brands, Donatos, The Ohio State University, Resource Interactive, and Mills James.

Developing interactive experiences is our passion. We leverage Flash, Flex, AIR, and HTML5 to deliver engaging content for the web and desktop, tablets and mobile devices, kiosks and digital signage. Our attention to detail and deep understanding of software architecture and best practices enables us to consistently deliver for our clients.

We take a lot of pride in our work. We also take a lot of pride in where we work. Our offices are located at ~~1158 Corrugated Way~~ (our new location is 21 E. 5th Ave #102, Columbus, OH 43201), in the brand-new tech wing of the Columbus Idea Foundry, our business development partner. The Columbus Idea Foundry is Columbus’s own community workshop, DIY learning center, creative space, and small business incubator. We are very excited to have the opportunity to collaborate with The Columbus Idea Foundry and its member businesses.

We are always looking for opportunities to make creative, interactive content. If you would like to contact us, send us an email at info@base2.io or call us at (614) 636-0003.