So, I’m Building a Web App (Part Three: CheckBoxList(For) the Best)

After dealing with the dropdown fiasco in part two of my struggle to build a working ASP.NET MVC app, I worked on getting project functionality in place instead of continuing with the unsatisfactory method of adding and removing people from subgroups.

The thing is, though, that I knew the dropdown wasn’t a good fix.  Using the dropdown meant that a person could only be added or removed from one group at a time, and I had slung it together so that different views were needed for addition and removal.  It was pretty much the epitome of bad UX–clunky, frustrating, and there was absolutely no need for it to be as difficult as it was.

I got projects and stuff working, but the problem I ran into after that was that my code was super ugly.  It’d turned into spaghetti all over the place, tons of logic in the controllers, everything was a mess.  I wanted to go back and turn the dropdowns into checkboxes, but I was afraid to touch anything because I’d cobbled everything together in such a delicate fashion.  (That’s what happens when you’re learning and don’t really know what you’re doing, I guess.)

So, naturally, I decided I’d just start over again.  Open up a new project in Visual Studio and just start over.  Y’know.  I only have to present this project to potential employers in a week and a half, no big deal.

This was the third time that I’d written up the add/remove functionality and it went so much easier this time.  MVC has a lot of HTML helpers, but it lacks one to make model-based checkbox lists.  So some absolute angels wrote an extension called CheckBoxList(For), which you can find at http://mvccbl.com/ or, y’know, just install through NuGet Package Manager in Visual Studio, like a normal person.  It makes checkbox lists almost stupid easy, and I had my functionality up and running in a couple hours.  The first time I attempted to make it work, it took me a couple weeks.

I can’t stop playing with it.  The checkboxes are such a better experience than the dropdown, and since I need another checkbox list to add groups and members to projects, I’m actually looking forward to using CheckBoxList(For) again.  That’s right, a MVC extension has actually got me excited about checkboxes!

…in other, unrelated news, I had a dream about jQuery last night.  Sometimes I wonder what I’m doing with my life.

 

How I Won my Coding Bootcamp by Ponyrolling

If you’ve been on the internet for longer than ten minutes, you are probably familiar with Rickrolling–tricking someone into listening to the earbug that is Rick Astley’s Never Gonna Give You Up under the guise of sending them legitimate information.  Before Rickrolling, there was Duckrolling, which is where you’d get sent this stupid wheeled duck instead of Rick Astley.  Either way, *rolling is bait-and-switch, you expect one thing and get another.  For example, I won my bootcamp by ponyrolling.

It all started three weeks into the program.  We had whiteboard tabletops, and I drew this on the table:

My Little Pony: Coding is Magic

It was pretty funny, the instructor took a photo of it, I took a photo of it, everyone laughed.  So a week later, I drew another pony while we were talking about data structures.  And I drew a couple ponies when we talked about exception handling.  And it got to be a thing that I was making ponies out of programming concepts and computer languages.  Just a quirky little thing, right?  Ponies on whiteboards.  Nothing extravagant.

We were assigned final projects with a week to go: make a portfolio website using ASP.NET MVC, hook it up to a database, do some other stuff, it has to have this, this, and this other thing.  By the middle of the week, a classmate had told me that I had to put a pony on it, because of the whiteboard ponies.  So I brought in my Macbook, opened up Photoshop and made a good version of that original C# pony:

C# Pony

Originally, I just had C# Pony hanging out on the home index view as a way to take up space.  I was going to remove her and put in another image later, but people would walk by and comment on the pony, and then they were upset when I said I wasn’t going to keep her there.  So I tweaked the stylesheet to make the site purple, and kept the pony, because so many people said they really liked the pony.

I got done with the site pretty quickly, and decided to make another pony.  Since the site was done in C# + HTML and drew project information and image URLs from a database, I decided that C# Pony’s companion would be SQL Pony:

SQL Pony

People were getting a pretty good laugh out of the ponies, which made me happy.  I really like My Little Pony, although I’m not completely sure why.  At least part of it is nostalgia value, having watched the cartoons and played with the toys growing up.  The newest incarnation of My Little Pony, Friendship is Magic, is actually a really good cartoon, if you can get over the characters being colorful small horses.  Plus the main character reminds me a lot of myself (Twilight Sparkle is a total nerd unicorn who special talent is being a total nerd), and her friend Pinkie Pie is a dead ringer for my dear friend Terri (in personality, of course, Terri is a real person and not a pony).  I don’t really have a large problem with being an adult who likes a little kid cartoon, either, although it’s also not as though I go to parties and introduce myself to people by comparing myself to Twilight Sparkle the nerd unicorn.

Moving on.  People were getting a pretty good laugh out of the ponies, and I liked that.  I like it when I can make other people laugh, especially when it’s over something small and silly.  I also don’t particularly mind making a fool of myself for a joke, so long as I’m sure people are going to laugh and not just silently wonder if I need to be institutionalized.

That Saturday evening, a little more than 24 hours before the project was due, it came to me:  it’s not enough to have two ponies.  If my bootcamp pals wanted ponies, then by all means, I would give them ponies.  I would give them so many ponies. 

Just as I had finished reading about session data and writing up some very basic code that switched the CSS the site used based on a session variable, my classmate Stephanie posted something on my Facebook wall.  She was at Plato’s Closet, which is a kind of resale clothes shop, and she had found a marvelously pink My Little Pony sweater, in my size, for $8:

pony sweater

Just as I was about to ask her to get it for me and I’d pay her back, she asked if I wanted her to get it for me and I could pay her back.  Of course I wanted it, because it was the perfect accompaniment for my plan to unleash so many ponies on my unsuspecting classmates.

I spent most of Sunday at Panera, eating an almost sickeningly sweet carrot cake muffin, drawing ponies and giggling to myself in the corner.  Late in the afternoon, I had a stylesheet that my eight-year-old self and her collection of My Little Ponies would have been immensely proud of.  I just still felt as though it was missing something

Only one of my classmates knew of my daring plan.  When I confessed on Facebook Messenger that I felt as though my utterly ridiculous style change was not ridiculous enough, this happened:

Him: My recommendation: have the ponies dance by tilting them left and right with 2 stunning frames of animation.
Me: …oh my god
Me:  You’re a genius.
Me:  That idea was too much for Visual Studio, apparently, because it’s crashed.
Him:  You should be able to do it with the same CSS animation tools I used for blinky text.
Me:  It’s perfect.
Me:  You don’t know why it’s perfect because you are not looking at the pony extravaganza right now, but trust me, it’s perfect.
Him:  I’m helping!
Me:  You’ve just saved Christmas.

It ended up being more a gentle rocking motion than the original vision of “two stunning frames of animation”, but that actually ended up as a good thing.  The effect is mesmerizing.  He also suggested making the cursor into a pony, which is surprisingly easy to do with CSS3.  I remember back in the day when loading up a horrible, hard-to-use custom cursor on your Geocities page required a ton of JavaScript, but now all you have to do is something like this in your stylesheet:
body {
cursor: url("Other_Images/ponycursor.png"), auto;
}

So I had a custom pony cursor, dancing ponies, a rainbow gradient header background, fluffy clouds for the body background, I had a very girly cursive font courtesy of Google Fonts… and the majority of my content was the same.  For all intents and purposes, I had taken a very boring, adult website and overloaded it with pink/purple/rainbow/ colors and so many ponies.

Stephanie brought my awesome new pony sweater to class on Monday morning, and I parted with $8.  I put the sweater on and waited until just before lunch to present my masterpiece.

I got my laptop plugged into the projected and started.  The site begins looking like this:

site with normal stylesheet (boring!)

I clicked through the pages, pretending like nothing was wrong and like I also wasn’t wearing a pink fuzzy pony sweater.  A couple people who had seen the site that Friday were disappointed that the ponies were removed.  Good.

The project page has all of my bootcamp projects laid out in little display boxes.  There is actually a box for the ponies, and, because I have the projects being sorted alphabetically on the back end, they ended up right next to box for the portfolio project.  So I could laugh it off, haha, yeah, I put the ponies on here for you guys, you can find the ponies on Github.  (You can, for the record, find the ponies on my Github.)  I clicked into the detail view for the portfolio project to show off the jQuery lightbox (Fancybox) I’d used to scroll through the screenshots for the project… I had included one of the second stylesheet.

Down at the bottom of the page, tucked under the copyright information in the footer, are three small icons.  Clicking an icon fires an AJAX post to the server that resets the session variable; when the post is successful, some jQuery takes care of scrolling back to the top of the page and refreshing the browser window.  Some Razor at the top of the layout partial view for the site loads the session variable and uses it to determine which stylesheet to apply, so clicking the second icon flips it from the above image to looking like this:

moderate pony stylesheet

There were some laughs, oh, I got them good, haha, the site is purple and there’s ponies!  I clicked through all the pages on this, too, just to show that it was the same site with a different stylesheet.

But wait.  There are three icons at the bottom of the page.

I toyed with my sweater a little.  The thing about being an adult who likes My Little Pony, I said, not quite looking at anything, is that you really have to own up to it.  It’s not just a casual thing, you kind of have to really go big or go home… so I decided to go big.

Are you ready for Super Bonkers Pony Mode?

Are you really ready for Super Bonkers Pony Mode?

Because here it is:

super bonkers pony mode

The ponies in the header sway gently back and forth.  Constantly.  The cursor is a tiny pony (unfortunately, Windows screenshots don’t pick up the cursor).  The only thing it doesn’t do is play the My Little Pony theme song, because I absolutely hate websites that auto-play music… but I’m kind of thinking that maybe it should do that.  I was also hoping to get some things to sparkle, but the jQuery plugin I found to make DOM elements sparkle didn’t work, and I ran out of time to futz with it.

The reaction to Super Bonkers Pony Mode was outstanding.  I wish I could have taken a photo.  There was so much laughter.  It was everything I had hoped it would be.

On my peer review form, under the question, “What could be improved?  How?”  someone wrote:

Nothing.  She won, it’s over.

…and that, ladies and gents, is the story of how I won my coding bootcamp by ponyrolling.  Please hire me, I’m funny.

Global Day of Coderetreat CLE 2015

Largely on a whim, some of my classmates and I signed up to attend Global Day of Coderetreat Cleveland last Saturday at LeanDog.  The community outreach director for our bootcamp said it would be a “great educational opportunity,” and the description on the event page was vague enough not to scare us off… so we thought, “why not?”

I found out what I was in for two nights before, when I told a friend what I was doing the following day and he started enthusing about how much I was going to learn because I had signed up for an entire day of pair programming.  No wonder the e-mail calling it a “great educational opportunity” had also closed with, “go forth and be brave!”…

It’s not that I hate other people or anything.  Far from it, I enjoy people.  Really.  It’s just that I am a tremendous introvert and the thought of pairing all day with six different pair partners all of whom are complete strangers and also much more experienced programmers made me kind of not really want to go.  However, I put on my brave pants that morning and drove downtown to the boat… and, thankfully, three of my classmates put on their brave pants too, so I wasn’t being an awkward newbie turtle all by myself.

Global Day of Coderetreat has a fairly simple premise: pairs are given 45 minutes to code up Conway’s Game of Life.  Since this isn’t actually something that is doable in 45 minutes, the goal isn’t to make a working program–rather, it’s to practice coding, pairing, and (in this case, I’m not sure if it is a global thing or not) test-driven development.

TDD was something totally new to my classmates and I.  No big deal, just turning the event from “scary” to “downright terrifying”.  Nevertheless, my intrepid classmate Stephanie and I trio-d up with an experienced test dev named… oh… darnit, I’ve forgotten his name.  I’m terrible with names, I should’ve written it down… anyway, he was absolutely excellent to us and walked us through installing Nunit and got us thinking about how to test the smallest solutions we could think of.  I was feeling pretty good when it was time to switch, and with every pairing, I got just the tiniest bit more confident that I actually knew what I was doing, until I wound up passing a Microsoft Surface back and forth with a guy named Jeremiah and actually writing tests without having to take too much direction.  Yes!

Everyone at the event was super nice and I learned a ton (so, the e-mail was right).  Another classmate, Ray, and I even got to trio up with a Ruby dev to see problem-solving done in a different language.  (Maybe I should learn Ruby.  Everyone is telling me to….) No one made fun of us for being newbs (at least, not to our faces, haha) and I’m even thinking that I might try to code the Game of Life on my own at some point, just to see if I can do it.  The event was definitely worth going to and I’m excited to go to the next Coderetreat in January, or, if I can’t make that, Global Day of Coderetreat next year!

Learn more about Global Day of Coderetreat >> here.

So, I’m Building A Web App (Part Two: Dropdown Fiasco)

In Part One, I introduced you guys to my personal project, a web app for leaders of small groups.  Now I want to provide you with gruesome details of how I snottily cried over attempting to make a dropdown list.

If you google “DropDownListFor MVC” or some variant thereof, you will actually get a half-billion search results from Stack Overflow, etc where people are wondering why their dropdown menu doesn’t work.  It turns out that making effective dropdown lists in ASP.NET MVC is really tough!  Like, really tough.  When I set out to change my text box to a dropdown, I thought, how hard can it actually be?  I’ve made dropdowns in HTML like, at least a dozen times. 

I don’t even remember what all I tried before blinding grasping the solution, but to be honest, I struggled with it for over a week.  Here’s my final word on how to make it work:

Step One:  Use a viewmodel.

Using a viewmodel makes life with dropdowns so much easier.  Actually, they make life in MVC much easier all over, because you can easily deal with “extra” data that you know you’ll need to include in your view, plus you won’t have superfluous data hanging around.  For me, this meant a viewmodel class that looks like this:
public class PersonGroupingViewModel
{
[Key]
public int PersonId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set;}
public virtual IList Memberships { get; set; }
public SelectList AllGroups { get; set; }
public int SelectedGroupId { get; set; }
}

I needed the ID of my Person object, the person’s first and last name, the list of groups they were a member of, and finally–here’s the important part for the dropdown–a SelectList of all the groups in the database and an int to store the ID of the selected group.

Step Two: Create a view that is strongly-typed to your viewmodel. 

You need your view to be strongly-typed to your viewmodel so that you can easily access the data fields in the viewmodel.  This part is kind of a no-brainer.

Step Three:  Populate your viewmodel in your controller and pass it off to the view.

Step three involved spinning up up a new instance of my viewmodel class and passing it off to the view instead of the domain model.  I also had to spin up a new SelectList with all of the groups available and make sure it was included in the viewmodel so that the dropdown would work.  I did it in the controller it shouldn’t matter if you do it in the default constructor for the viewmodel class:

SelectList allthegroups = new SelectList(db.Groups, "GroupId", "Name");

There are about eleven million constructors for SelectList objects, but the one I’m using here is SelectList(IEnumerable, String, String), which specifies list items and also assigns the data value field (GroupId) and data text field (Name).  This allows me to display the group names in the dropdown, but post the group ID back to the controller.  Set it to the appropriate property in the viewmodel (viewmodel.AllGroups = allthegroups;)  and off you go!

Step Four: Actually put that dropdown sucker in the view.

Now for the fun part!  This is where the magic happens:

<div class="form-group">
<label>Choose Group:</label>
@Html.DropDownListFor(model => model.SelectedGroupId, Model.AllGroups, "Select A Group")
</div>

DropDownListFor is an HTML helper than can be used with a strongly-typed model (in this case, the viewmodel).  What’s happening here is that the selected group will post back the value as SelectedGroupId, the dropdown will populate from the model SelectList named AllGroups, and the default selected value will just be a string called “Select A Group”.

Step Five: In the POST action, grab that sweet ID you got back from the dropdown and get to work.

I just grabbed the entire viewmodel back in the controller POST action and processed out the individual bits. Here’s the code to look up the person and group in the database, and perform the necessary person-into-group finagling:

int PersonId = viewmodel.PersonId;
int GroupId = viewmodel.SelectedGroupId;
Person person = db.People.Find(PersonId);
Group group = db.Groups.Find(GroupId);

group.Members.Add(person);
db.SaveChanges();

I cast off my viewmodel and spin a new one to pass back to the view, because in my app, a person can belong to more than one group.  This makes the group we just added show up on that view under a section called “Memberships”, and the person can then be added to another group.  It’s not the prettiest thing in the world and also not the best UX, but it’s good enough for now and will be revisited later.  The important part is that it works!

Stay tuned for part three, in which I tackle checkbox lists and cry about UX design.