Planning, Podcasts, and Purchases: The One About Design

I've decided to take a more structured approach to how I'm building my latest project. It's easy to get excited about a new project and want to run rather than crawl or walk your way into it. But I've had a few lessons over the last couple of years that I imagine most (aspiring) code monkeys programmers go through.

1. Planning is better than refactoring x factorial times (yes, that would be a large number).
2. Refactoring is better than scrapping the project (there are exceptions).
3. Having an overall idea of UX from the beginning is helpful to steer the project.

So with that said, I decided to start thinking about this project from a top level view. I wanted to plan out the UX somewhat with some sketches. Using a pen and doodling on legal pads and napkins really forced me to think about what I wanted. The trend these days is toward simplicity. Skeuomorphic designs are transitioning to more flat designs. Microsoft is probably my favorite example of that.

At the same time, I have been listening to a lot of podcasts since the summer. I haven't been a podcast listener before, but at some point over the summer I decided that I was no longer going to be listening to music or NPR. Car time meant learning time. And thus I feasted on episodic backlogs of some shows. One in particular is a fantastic listen. For starters, it's entertaining. But it has some really excellent tips that span languages and paradigms. I'm referring to The Windows Developer Show by the Lowdermilks (Ryan and Travis - if they ever read this, I went alphabetical with your names...it could have just as easily have been Travis and his co-host Baby Man).

The brothers both work at Microsoft in different programs. Ryan's a Developer Platform Evangelist, or the guy you go to if he's your area rep to learn about / ask for stuff. The local DPE here in Denver is awesome (go Jerry Nixon!) and based on what you hear on the show, Ryan sounds just as passionate about helping out his developer community. Travis is on the team that works on Visual Studio and he does UX. So you have a nice blend of design inspired views mixed with development views. And, of course, both cross over. At the end of every show, they do a developer tip of the week (Ryan) and a Designer tip of the week (Travis). Going through the older shows and working my way up to present, I came across a design tip that I found fantastic: UI Stencils. 

If you haven't seen this site and you do anything related to development, check this site out. I had seen it before but it had drifted to the back of my mind as "not for me." I was so wrong. Developers are able to accomplish a ton in a short period of time with some of the web frameworks and libraries that are out there now. Working with Rails lately has certainly shown me how productive I can be late at night even when I'm not all there. But a lot of us (read: me) need to put more thought and effort into the designs we're putting out there. My office doesn't have an in-house designer. The developers all do it. And that's fine and we get the job done, but I know we'd have a much more modern, sleek, and interesting interface if we had someone that was actually a designer. Perhaps our three-man development team should read Travis' book.

So enter UI Stencils and their awesome-sauce. They sell tools to help make designs. I bought this sketchpad and a couple of these browser stickies. And I'm hooked. Talk about awesome. It has been a wonderful experience to force myself to think about things in pen and paper because it's unforgiving. I'm sure not everyone will agree with that, but forcing myself away from the keyboard and actually drawing out how I think it should work saves me time. I can draw a column setup and play around with where I want something on a piece of paper much faster than I can get that layout perfect on a web page even with Bootstrap or Foundation.

I've done mockups in html before with a framework, and it works. But I find I obsess more about whether I got the pixels lined up instead of whether the UX is well done. The pen and paper allows me to abstract the concerns away. It makes me think "is this intuitive" instead of "what css class will make it do that thing?" 

As if it weren't awesome enough that I'm getting mental exercise benefit out of this, it turns out that the folks at UI Stencils are freaking awesome. 

Often when I order food online, I'll ask for something random in the notes section. Ya know, that section that's really for comments about your order. Like "leave off the blue cheese." Instead, when I order Chipotle online I say "make with love." And for some reason, at almost every Chipotle that gets that request, they draw a heart on the burrito's foil wrapper. I like that. It's fun customer service and engenders customer affection. I've asked Domino's to draw a dinosaur on the box before. And my pizza showed up with a T-Rex in sharpie on it. It was awesome.

I have a two-year-old son who currently happens to be obsessed with three things:

1. Dinosaurs. His first love. He often turns on Walking with Dinosaurs and then ushers Mom and Dad out of the room so he can run around the living room roaring. It's fantastic.
2. Penguins. Or as he calls them, cheep cheeps. He has a stuffed baby emperor penguin that his aunt gave him and he takes that thing everywhere. He absolutely adores it.
3. Cats. Or neee-ooows. He's taken to pretending he has a cat that lives in his pocket lately. In fact, this past weekend he gave me one to live in my pocket. I have always wanted a cat that goes with me everywhere. Thanks to my son, I now have one.

When I placed my order with UI Stencils, I was feeling rather silly. My wife was giving me this as an anniversary present and I thought it would be interesting to ask a bunch of design driven persons if they would draw something on the package for me. In the notes section, I put the following:

Can y'all draw a special picture on the box for my son? He loves dinosaurs, penguins, and cats... Just sayin', that'd be awesome.

At the time I thought when the package arrived, if they did something like that, then my son would be excited to open the package with me and get to keep his special part of it - the picture. When the package arrived, I couldn't help but burst into that silly, joyous laughter you get when someone or something just makes you feel fantastic. Someone was nice enough to draw all three pictures.

The Package

Naturally, I couldn't wait to show my son.

Happy Progeny

And a discussion about the pictures.

Neeow

Needless to say, I'm absolutely going to go around recommending them to anyone in the dev/design world. I can't wait to place my next order. These guys are fantastic and the quality of the products they sent out is wonderful too. The sketchpads and stickies are on paper that has weight to it. It doesn't feel cheap and it's a joy to write on.

So since you made it this far, take a minute and go check out their site. Some of the videos on the product pages showing how to use them are pretty fun time lapses. There's definitely a lot of value as a developer to step back and look at a project from a design point of view. And I think in the future, I'm going to approach more projects this way. Thanks to the Lowdermilks and UI Stencils for changing the way I think about the process.

Ruby on Rails - I'm kind of late to the game

Recently I started a new side project. This one I'm going to finish all the way through. Like many people who enjoy programming as a profession and hobby, I tend to start a lot of projects where I learn something and move on. The project tends to serve its purpose and then I'm able to tackle something bigger or that is more interesting to me at the moment.

This idea is different. I want to use it on the regular. And I'm sure others will too. So naturally I was ready to roll instantly and hit the ground running. Normally I work on a project with another person, +Clint Shuman, but he hasn't been as available lately since his wife recently gave birth to their son.

Lately I've been approaching all problems the same way: nail, meet hammer. I decided when approaching this one to try building a couple of things in two frameworks - django and rails. Rails has scaffolding, which is a lot of code I'm probably going to replace, but I can get pieces up and going with CRUD almost instantly. This is really handy when I'm just trying to establish relationships and see how things are going to work. Django is still quick with class-based views (CBV), but there's just something about how rails works that is nice.

I told Clint I was learning rails and the first thing he said was "Traitor." I admit to feeling that way somewhat. Python is a fantastic language. I can't help but wish I could combine the rails framework with Python. And Django is completely open-ended. Implement any app any way you want. Sure, there are conventions, but Python is certainly configuration first. Rails is pretty much the opposite. In fact, the saying that goes along with the framework is "Convention over configuration." Since I don't know the language very well this doesn't bother me. Forcing me to do something a certain way is fine because I probably don't understand fully what's happening right now. It will be interesting to see how much I like this notion the longer I spend working with the framework.

But for a beginner, Django can be difficult. The tutorials that are out there are ok, but not fantastic. It always seems like reading helper information on Django expects you to know a lot already. And that's just not realistic. Rails has been around for ten years now and is widely used because it became the popular thing to do. The plethora of tutorial and screencasts for it makes the prospect of learning it much easier.

Still...I miss Python at night. I'll come home soon, Python. For now, I have a project I want to see completely through to finish. That is, hosted and live for everyone. And I'm going to do the whole thing in Rails.

WYSIWYG Editor in Windows Forms Applications - Leveraging TinyMCE

Recently I was tasked with working on creating a version 2.0 application for an internal tool we use at work. We have a team that creates web content for our clients and this application allows them to compose that web content. In the redesign, we decided it would be fantastic if people could use a simplified HTML editor to generate content for the prompts and various information we output on the web pages. Currently, individuals are required to know (read: ask others for help) the HTML and it makes for a frustrating experience in using something that doesn't actually expose the HTML to the end user. Those who are using the app shouldn't be required to understand block elements or how to open a link in a new window. It should be painless and inputting that content should be fast.

Rather than forcing someone to use HTML tags, they should be able to highlight and toggle as if they were using a text editor. Well, I got as far as making the three buttons for bold, italic, and underline and realized I was reinventing the wheel. I had just added TinyMCE to our text areas for custom text our clients entered in our development environment. It was incredibly easy to use and it has a permissive license.

TinyMCE Sample - http://www.tinymce.com/

Naturally, there had to be a way to implement TinyMCE inside a Windows form and save a lot of time creating monotonous string handling code. And of course there was.

I recognize I'm writing this tutorial when there are others that offer help (one I used for help) on getting this set up. The one I used for help is pretty much the information that's here. That was the only other tutorial I found that was worth while. If you get tired of reading my outline of the solution, go read that one. If you want to continue with me, then go get TinyMCE. I actually downloaded it and stored it to a local resource, but you could always just use the CDN if you want. I'd recommend local.

Once you have that done, let's start a visual studio project. I'll use Visual Basic for this example but the C# code is almost identical (add curly braces, stir, and call me in the morning).

There are only 3 real pieces to this entire thing.

1. Web browser control pointed at your local HTML file with the JavaScript stuff all in it
2. A method to set the content inside the TinyMCE editor
3. A method to get the content out of the TinyMCE editor

Best part? The heavy lifting is all JavaScript in the HTML page. For those that found this page via a search engine, the short version is make a method in the JavaScript for getting and setting the content of TinyMCE. Then use your big boy programming language (just kidding, I love you JavaScript) to access that information. The reason you need the get and set methods is because you're probably going to be doing something with the content that's being filled in or displayed. 

In my case, I'm pulling html content out of a database and shoving it in TinyMCE so non-technical folks can easily create styling for text. Once they're done, I invoke the get and then store the result back into the database.

Ok, enough with details. Let's see the code you'll need to produce.

HTML

Replace the bold lettering with what you need.

<script type="text/javascript" src="file:///yourpath/tinymce/tinymce.min.js"></script>

<script type="text/javascript">

    function GetContent() {

        return tinymce.get('tinyMceEditor').getContent();

    }

    function SetContent(htmlContent) {

        tinymce.get('tinyMceEditor').setContent(htmlContent);

    }

    tinymce.init({ whole host of options });

</script>

<body>

  <form method="post">

  <textarea name="tinyMceEditor" cols="1" rows="1" style="width:100%; height: 100%"></textarea>

  </form>

</body>

That's pretty much it. You'd do well to add your usual html tags to it so it is recognized as html. But yeah. That's all the html it took to get working. The cool part is setting up the other set of code for this.

Drop a web browser control on a form, tell it to navigate to your html doc. Awesome, TinyMCE loads right? So that's fantastic. But let's add the two methods it takes to get and set content. Which are crazy simple.

Public Sub SetTinyMceContent(ByVal htmlContent As String)
        Dim contents() As Object = {htmlContent}
        TinyMceBrowser.Document.InvokeScript("SetContent", contents)
End Sub

In case it's not apparent, the TinyMceBrowser object is my browser control. Now the get content method.

Public Sub GetTinyMceContent()
        Dim html As Object = TinyMceBrowser.Document.InvokeScript("GetContent")
        Dim content As String = html.ToString()
End Sub

That's it. Now obviously you probably want the Get as a function that returns a value unless it's just going to run off and perform its procedure. But that's really all it takes. I have more code in these methods to perform stuff related to our database, but these two lines in each method are where the magic is happening.

Ta da. Short. Sweet. Simple tutorial on how to bring some slick JavaScript text editor action to your Windows applications.

Initial Impressions of Light Table IDE

Light Table is a programming integrated development environment (IDE). But it's a little different compared to what is currently out there. The author, +Chris Granger, has focused on what we are creating rather than getting to the creation. If that concept doesn't quite make sense in your head, don't worry. It's visual. Think real-time flow of your program. If you want to watch how a value changes as it moves through your program you can see it in real-time. Bret Victor gave a great talk on the idea called Inventing on Principle. Light Table extends this concept and the roadmap for development has a lot of nifty fun features of programmers.

I love UX/UI. Especially when it makes stuff easier/faster/better. Light Table is basically IDE porn.

I don't think I can really describe it better than that, but I'll try to explain some things I like and where it has some room for improvement. I have been using it as a primary editor for VB.Net, Python (Django), and a little JavaScript for nearly a week. VB.Net is my day job, the others are for projects at home. For the most part I work in Sublime Text 2, which is a fantastic editor. If you haven't checked it out before the go grab it and start playing. It's extensible, built in Python, and has tons of plugins available. And yes, I write VB in it. It supports VB Script which is good enough. I switch back and forth between Visual Studio and Sublime Text 2 depending on what I'm working on.

1. Light Table Welcome Screen

So clearly minimalism is heavily at play here. I'm a fan of minimalism, so this works for me. What you see at the top are tabs. They're unobtrusive. You'll notice I'm in full screen mode here, or as I like to call it: Stop messaging me on Google Talk mode. You can hit ctrl + enter and it pops up the command prompt so you can be handsfree. Which I like. Granger is a fan of VIM so there are vim bindings that can be enabled. But I like his theory that the future of editing code can't always just be that the vim, emacs, etc style of only text visualization is the answer forever. 

2. Command Bar via ctrl + enter

The UI is clean and simple. After all, you don't need a ton of features to get your work done. The workspace tab allows you to bring files into the "workspace" which is kind of like open folder for Sublime Text 2. What's different is that you can add files or folders to this workspace from all over the place. Then those files all show up on the quick open stuff under navigation which we'll get to.

3. Light Table Workspace

So any of those files on the left, or if you have multiple folders can be removed from the workspace without affecting your files on disk. Handy feature. But also, you can just add another folder or files to the workspace. And everything is available to open. Double-clicking any of the files on the left will open them for editing in the current tabset on the right. Tabsets are like groups of tabs. You can subdivide so you can have multiple tabsets each with multiple tabs.

From there we can move on to the navigate tab. It basically shows you all files in all folders. Let's look at a django project.

4. Light Table Navigate

One of the great things about more and more programs is the support for fuzzy search. This makes using command bars and file openers incredibly easy but it also makes search in general better regarding programming languages. You may have 10 methods with Get as the beginning like GetMyFoo, GetNewBars, etc. But if you want GetMyFoo, you can just search for Foo. Fuzzy search will find it. That concept can be expanded on drastically in practice and in different concepts (command bar for instance, file names, settings, and your code itself) and you get some pretty awesome results. I've loved that in Sublime Text 2 and I'm loving using it in Light Table.

The default them is also pleasant for code. It's not terribly high contrast but I find it's easy on my eyes in a dark room. And let's be honest. We program in the dark a lot. But my other favorite monokai is on there and switching is a command and a few keystrokes away so I don't mind switching back and forth.

5. Light Table Default Theme

If you watch the videos you'll see some of the wonderful things Light Table can do, but I think the best thing going for it right now is the incredibly responsive development. I'm not sure if +Chris Granger is working solo or if he has assembled a team, but I watched the repo on GitHub for issue tracking and I'm getting a lot of mail which is Q&A and feature suggestions and bug fixes. I love that part of it. I'm actually learning more about the editor just by watching the "issues" emails come across.

I think that's all I'll go into for now. I'm using it as the IDE of choice for a Django project at the moment and it'll be interesting to see what ultimately I like and dislike at the end of that. Code Mirror's underlying editor has a few bugs with the syntax in VB, but I have a feeling some of the features the community requests will be easy to address once the plugin system is live, which is forthcoming in 0.5. I'm already wondering if I can build out some Django tools for the editor, even though I'm not sure what that would look like. It supports virtualenvs for python, although I haven't tried it. Django work means I'm not really doing eval much unless I'm just quickly testing pieces of a function.

I'll post again once I have had the opportunity to really spend a lot of hours in it. For now, I really enjoy it. I miss some of the conveniences of Sublime Text 2, but they're not anything that can't be resolved. And for an alpha...this product has definitely caught my attention. I look at it and all I can think is how amazing this is going to be.

Windows 8: Good, Bad, and the In Between

I'm just going to admit it up front: I am a complete sucker for a good UI. UX is important as well but if you give me a really ugly UI and say "But the UX is amazing!" I'm less likely to be interested. Love it, hate it, whatever, the new Windows style of interface is attractive. Live tiles are a clever method for content consumption that is far more interesting than a straight feed reader. Even though that's basically the purpose.

Sure you can put whatever you want there, but essentially it's a feed. The ease of programming for the Windows 8 style of application is also welcome. Granted, I really don't know anything about XAML. I can mostly read what's going on but I'm currently having to read up on what it is I want to do if I'm not going to be dropping things in from the toolbox. But it's fun. And you get Visual Studio.

I like Eclipse a lot. My Java class and C class both had me using Eclipse (IDE was optional but Eclipse was a natural choice) and I found myself productive in it and all that. But when it came to playing with Android, the experience felt extremely clunky. I know there are many that will disagree, and that's fine. Preference is subjective. Visual Studio feels streamlined. When I drive a car, gadgets are fun but I really only care if they enhance my driving experience. I don't need a million buttons to do things. I don't have to have volume control on my steering wheel, but it's handy. I don't need extensive configuration. My car's purpose is a point A to point B type of thing for me and I like to feel the drive. I feel the same about the tools I use to fulfill my role of code monkey.

Visual Studio deploys easily between tests for Desktop (windows 8 store), Tablet, and Phone. The simulators are clean for tablet and phone. And you don't have to wait for what feels like an eternity for them to boot. That's my favorite part.

As for the operating system itself, I don't understand all the complaints. Granted, I'm an individual that hits the windows key and then immediately begins typing to get my desired program. I don't like having to run through context menus to find it. So for me to use Windows 8, I had almost no learning curve. Yes to get to my wireless settings I have to go through the charm bar. So what? Hide the stuff I don't need to see all the time. I'm fine with that. I spend most of my time on the desktop. I really don't see the Start menu dash unless I'm doing a search to find the program I want.

This isn't some sort of colossal failure or a war on users. Why is it we idolize the screens we see on Star Trek and such and then when we're presented with something that moves more toward that direction we reject it?

I've never been a fan of the ribbon for Office, but I actually like it for Windows Explorer. New folder? Boom. Dedicated icon for that. Search filtering. Dedicated icons. I feel like it's an improvement. It adds a little bulk to the top of the window but it isn't an unwelcome feature.

Windows 8 really shines with touch interaction though. I like the paradigm shift. The choice of blending tablet with desktop is nice because you can grab a tablet PC (that is, one running Windows 8, not WindowsRT) and have it on the couch while you're watching television, but then snap it in to whatever docking method your particular hardware supports and you're back to your usual mouse and keyboard. Love that.