Mark Miller

September 2014 - Posts

  • Creating the Ultimate Developer’s Keyboard–Part 5

    Here’s what we’ve done so far:

    Part 1 - the challenge, hardware, and the prototype.
    Part 2 - first features - paired delimiters.
    Part 3 – keyboard arrives, layout, keys labels, feature binding, plus new related features.
    Part 4 – smarter brace keys, recent edits navigation, section navigation, and the pizza key.

    Also, from a big picture perspective, we’ve taken a rough idea for making important features more accessible and we’ve taken a step in that direction, using off the shelf hardware. And while this post will likely be the last in this particular series, you can be assured that I’m thinking about taking this to the next level, with a full keyboard designed for developers everywhere (maybe a kickstarter campaign is in our future).

    Super Sibling Nav Returns

    One of my favorite features ever built in a CodeRush Feature Workshop was Super Sibling Nav. This navigation feature allows you to move up/down through neighboring methods or properties, maintaining relative cursor position as you move up and down. This is not something you need often, but when you need it (for example, examining or changing similar parts of adjacent methods), it can save a lot of time and keep your brain focused on what’s important. The problem with this feature was always the shortcut binding. What key can we bind it to that is easy to remember and easy to hit? After we built the feature we tried Ctrl+Alt+Page Up/Down. However that binding never really took off with me.

    For me the good news is that I’ve dedicated two keys for this feature:

    SuperSiblingNavKeys

    If you want to use this feature too, download and install CR_SuperSiblingNav.

    We’ll add the bindings for this later.

    Repositioning the Pizza Key

    In Part 4 we added the Pizza key. And while the key we replaced was a good one, I didn’t like its position on the keyboard. The Pizza key was likely a key that would be pressed once per day at most, and it was right next to a key that was used frequently. Also, the Pizza functionality is visually disruptive, ultimately replacing the code with pictures of yummy food. Not the thing you want to see when you’re deep in focus. So I moved it to the upper right, and moved the Run Last Test key to the upper left, and moved the the Fields key to the right where the Pizza key used to be. The new layout looks like this:

    NewPizzaKeyPosition2

    This repositioning required the following changes:

    • I needed to update the Layout options page to reflect the new keyboard layout.
    • I needed to update the Pizza, Field, and Last Test Run shortcuts so they were using the new key positions.

    All the Bindings

    Instead of talking you through setting up each of the bindings, instead I’ll document the functionality we have created (and we’re binding to) in the table below:

    Key Feature
    Pizza  It’s the Pizza key. Brings up the Nom Nom window that allows you to quickly choose from several built-in vendors of programmer’s fuel. You can also click the Find buttons to find a pizza vendor location near you. There’s also an option to go straight to the order page skipping the window altogether (if you check this option, hold down the Shift key the next time you hit the Pizza key to bring the window back).
    Transporter The Transport key. This key brings up the “Jump to” menu, which allows you select a target location for the jump, such as method overrides, interface implementors, ancestor classes, etc., depending upon where you are in the code.
    CodeRush The CodeRush key. This key brings up a Code/Refactor menu, that shows available refactorings, code declarations, and code modification wizards. The contents of this menu depend upon where you are in the code.
    ArrowPlusEnter The arrow keys and the Enter key. These keys let you navigate through the Code/Refactor and the “Jump to” menus quickly without having to move your hand away from the keyboard.

    The Enter key has an additional binding if the editor has focus (and no menus are active). It adds a new line beneath the current line regardless of the caret position on the current line (it’s the equivalent of pressing the End key followed by Enter).
    Fields Navigates through all the field declaration sections in the active class. This is useful to quickly get the caret to the fields declaration section. This feature drops a marker so you can quickly get back to where you started with Escape.
    AltKey + Fields Navigates through all the const declaration sections in the active class.
    Properties Navigates through all the property declaration sections in the active class.
    AltKey + Properties Navigates through all the event declaration sections in the active class.
    Methods Navigates through all the method declaration sections in the active class.
    AltKey + Methods Navigates through all the constructor declaration sections in the active class.
    PreviousReferenceNextReference Navigates through all the references (inside the solution) of the active type, member, declaration, or string at the caret.
    CamelCaseNavPreviousCamelCaseNavNext Camel Case Navigation – navigates to the next uppercase character inside a camel case identifier.
    SelectionIncrease Extends the selection by a logical block (for each time it is pressed).
    MinusKey Shrinks a previously-extended selection.
    SwapAnchorWithActive Swap the selection’s anchor and active positions (useful for extending either side of a selection).
    SelectToMarker Select from the caret position to the topmost marker in the file.
    SpacerNodeUp
    NodePreviousFirstChildNodeRight
    Structure Navigation keys.

    NodeUp takes you to the parent node.

    FirstChild takes you to the first child node.
    NodePrevious and NodeRight take you between adjacent sibling nodes.
    AltKey + FirstChild Takes you to the last child node.
    ShiftKey + NodePrevious Extends the selection to include the node preceding the start of the selection.
    ShiftKey + NodeRight Extends the selection to include the node immediately following the end of the selection.
    ClipboardHistory Brings up the Clipboard History.
    LeftBraceRightBrace
    OpenParenRightParen
    OpenBracketCloseBracket
    DoubleQuotesDoubleQuotes
    LeftAngleBracketRightAngle
    Paired Delimiter Keys. These keys insert the specified paired delimiters and position the caret in the desired location. For more details on this feature, see part 2 and part 3 of this series.

    If a selection exists, the selection is wrapped in the delimiters. Otherwise the delimiters are inserted at the caret. Caret position is determined by which of the two key pairs is pressed.

    Pressing the left (opening) key means the caret goes to the left if there is a selection. If there is not a selection pressing the left key means the caret will go between the delimiters (with a TextField between so you can get outside the delimiters by pressing Enter).

    Pressing the right (closing) key will position the caret to the right of the delimiters after insertion.

    Additionally, the brace keys LeftBrace & RightBrace can be used to add or remove redundant brace delimiters around child statements of a parenting block (such as if, for, while, etc.). Just place the caret at the start of the child statement, or place the caret after the opening redundant brace and then press one of these keys.
    DropMarker Drop a navigation marker.
    Escape

    Cancels CodeRush menus (if they are up) and also collects any markers that have been dropped.

    SwapMarkerWithCaret Swap the caret position with the last marker (and dropping a marker before jumping to the last position). This effectively allows you to work in two places at once, quickly switching back and forth between locations.
    SuperSiblingNavNextSuperSiblingNavPrevious Navigate up and down between sibling members, maintaining the relative cursor position or selection between adjacent members.
    NextViewEditPreviousViewEdits Navigate back and forward through previous edit points in the code.
    BrowseRecentFiles Browse recently-opened file history
    QuickNav Find Any Symbol
    CtrlKey + QuickNav Find Any Member
    AltKey + QuickNav Find Any Type – a filtered version of Find Any Symbol.
    GotoDefinition Go to Declaration (press Escape to jump back)
    Options CodeRush Options
    ShiftKey + Options Visual Studio Options
    CtrlKey + Options Project Properties (for the active project)
    RunLastTests Run Last Test

    You can see most of these shortcuts in action in STL Tech Talk episode 23.

    Source & Settings Files

    You can get all the shortcut bindings here. These should be copied to the CodeRush Settings folder.

    Source code to the x-keys engine plug-in (for CodeRush in Visual Studio) is here.

    Source code to the new features plug-in we built in this series is here.

    Note: Before compiling the source code to the two plug-ins, specify the build output folder to match your CodeRush plug-ins folder.

    You can open the settings and plug-in folders in Windows Explorer quickly by right-clicking the orange banner in the CodeRush About box and choosing the desired folder to open. After the DLLs have been built and the settings have been copied, restart Visual Studio.

    Wrapping It Up

    So this has been an interesting exploration. The custom keyboard is useful, and some of the new features are arguably essential. However, it’s not perfect. And I really want it to be perfect. Taking this to the next level, ideas to consider for my next attempt may include:

    1. A custom hardware solution with Cherry MX keys.
    2. Groups of keys dedicated to navigation, code generation, refactoring, and selection, placed to the right and left of the standard 88-key arrangement, with the ability to snap in securely on either side make a single solid keyboard, or float apart separately for more optimal positioning.
    3. Ergonomic and standard layouts.
    4. Possibly a group of keys dedicated to context-based operations (e.g., code entry, debugging, form layout & design) with embedded OLED screens that change content based on context.
    5. Other neat/fun ideas.

    Keyboard2

    Thanks for reading. Let me know what you think.

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners