Adding a Desktop Mobile Toggle Button

The goal of a Bootstrap site is to deliver a mobile view that is so easily navigable that it never leaves the user yearning for a tiny shrunk down desktop experience on their phone. Still, despite a developers best intentions, some users just want what they want. And we should give it to them. We’re not designing sites so that we may enforce our will on others, but to provide content that users find easy to view, and some users have different preferences than others.

Luckily, we can easily provide both worlds, and default to a responsive view with the hopes that they will find it so convincing they’ll never need the desktop view.

Here’s a little snippet of code that I like to put on websites. You can see it in action on: http://kylemitofsky.com/

Add two toggles to your page.

<!-- Desktop / Mobile Footer -->
<div id="DesktopMobileFooter" class='h_center'>
    <hr/>
    <div class="MobileToggle">
        View <a id="DesktopSite" href="#" >Desktop</a> | <strong>Mobile</strong> Site
    </div>
    <div class="MobileToggle" style="display:none;">
        View <strong>Desktop</strong> | <a id="MobileSite" href="#" >Mobile</a> Site
    </div>
</div>

Then add the following JavaScript:

$(".MobileToggle a").click(function () {
    var viewport = ($(this).attr('id') === "MobileSite") ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
    $(".MobileToggle").toggle();
    return false;
});

How To Deselect A Radio Button

Sometimes radio buttons can be quite frustrating as a user when you need to deselect having answered a question.

Here’s a quick way to temporarily allow a page to deselect radio buttons by pressing Ctrl + Click

  1. Navigate to any page that has radiobuttons. Here’s an example of one:
  2. Click F12 to open up the developer tools
  3. Navigate to the Console Pane
  4. Copy and paste in the following code into the editor:

    document.addEventListener('click', function(e){
     if (e.ctrlKey == true && 
         e.target.tagName == 'INPUT' && 
         e.target.type == "radio" && 
         e.target.checked == true) {
         e.target.checked = false;
     }
    });
  5. Click Run Script (or hit Enter)
  6. Now, to deselect a radio button just go back to the page and hold down Ctrl and click with your mouse.

Instructions

This screenshot should match your current browser, but if it doesn’t - here’s an album of screenshots for different browsers

Note: Of course, by the time you’re opening up the developer tools, you can just edit the HTML directly, but this is a little more reusable.

Pulling Your Website Up By Your Twitter Bootstraps

Hello Boston Code Camp!

Here are some resources to supplement my talk on Bootstrap 3 talk titled:
Pulling Your Website Up By Your Twitter Bootstraps

Here are some powerpoint slides:


Here is a working version of the website from the presentation:
http://kylemitofsky.com/BootstrapPresentation/

The entire code sample was published to GitHub here:
https://github.com/KyleMit/BootstrapPresentation

You can get Bootstrap here (and also read their great documentation):
http://getbootstrap.com/

You can style Bootstrap here:
http://bootswatch.com/

I’m really excited that every step of the demo can is actually a commit into the GitHub repository. I wrote an article about using using revision control to demo live coding changes, but here’s the meat of it. If you fork the repository on github and open it up it powershell, then you can step through every commit with these commands:

git config --local alias.child-sha "!git rev-list HEAD..master | tail -n 1"
git config --local alias.initial-commit "!git rev-list --all | tail -n 1"

git checkout master
git checkout $(git initial-commit)
git checkout $(git child-sha)

How to Pivot a DataTable in .NET

So I would have thought this problem would have already been solved by the Internets at large. As it turns out, I couldn’t find a very simple method to solve this relatively simple task. So here’s my attempt

Here’s a dead simple pivot table.

Let’s say I have a table that looks like this:

Person Age Sport
Susan 22 Tennis
Bob 29 Soccer
Terry 16 Basketball

And I want to pivot it to to look like this:

Person Susan Bob Terry
Age 22 29 16
Sport Tennis Soccer Basketball

Here’s How

Private Function PivotTable(oldTable As DataTable, 
                            Optional pivotColumnOrdinal As Integer = 0
                           ) As DataTable
    Dim newTable As New DataTable
    Dim dr As DataRow

    ' add pivot column name
    newTable.Columns.Add(oldTable.Columns(pivotColumnOrdinal).ColumnName)

    ' add pivot column values in each row as column headers to new Table
    For Each row In oldTable.Rows
        newTable.Columns.Add(row(pivotColumnOrdinal))
    Next

    ' loop through columns
    For col = 0 To oldTable.Columns.Count - 1
        'pivot column doen't get it's own row (it is already a header)
        If col = pivotColumnOrdinal Then Continue For

        ' each column becomes a new row
        dr = newTable.NewRow()

        ' add the Column Name in the first Column
        dr(0) = oldTable.Columns(col).ColumnName

        ' add data from every row to the pivoted row
        For row = 0 To oldTable.Rows.Count - 1
            dr(row + 1) = oldTable.Rows(row)(col)
        Next

        'add the DataRow to the new table
        newTable.Rows.Add(dr)
    Next

    Return newTable
End Function

Then just call like this:

Dim newTable = PivotTable(oldTable, 0)

And that’s that.

Stepping through a Code Demo

One challenge to delivering coding presentations is the trade-off between:

  • Showing actual real code that developers can get their head around
  •       VS
  • The time it costs to actually write it in front of them (debugging missing commas included).

Here are some of the ways I’ve seen to side step this issue in previous coding presentations I’ve attended:

  • Start with the full app. Study relevant sections.
  • Start with the full app, but mostly commented out. Uncomment section by section.
  • Start with a blank app and a notepad document with all the code you’ll eventually want. Copy and paste code section by section.
  • Start with the full app and use Unit Tests to step into relevant code.

Here is one more that I will be trying out:

  • Utilize revision control software to have each state of the code base represented by a different commit. Then step through the commits.

If executed well, I really like this last one. It avoids having too much information. Especially if content is new, it can disrupt the noise to signal ratio if attendees are thrown into a world with too much code. It also helps reduce copy and paste errors that might occur and the overall time it takes to update the code base. The beautiful thing is that each state of the code base has a known success. There is never the possibility that you have forgotten to uncomment that one critical line.

You can easily step back through the entire code base to rehearse. What’s more - so can participants when they get home. When have you ever left a coding presentation having been able to re-create every single step performed by the presenter?

Stepping Through Commits

Since this option definitely has the highest startup cost, I’ll detail some of the items along my learning curve.

I’ll preface this by saying that I’m using GitHub as my RCS of choice.

Also, I’ve never stepped through each revision in an entire codebase before!

It’s not something that is covered by most of the use cases for revision control. Of course, it’s a perfectly acceptable use, just not one that you’re likely to need when developing software.

The easiest way to change your working copy to a specific version is to use:

git checkout <revision>

Where <revision> is anything that identifies a revision

  • We can do this with the SHA of any particular commit.
  • Or we can step back through previous commits by using HEAD~n where n is the number of commits we want to step back

The problem is what we want to do is step forward through revisions. While the ~1 selects the parent of the current revision, there is no native function to select its child.

Note: This is partly because of the way that a Directed Acyclic Graph (DAG) works. Each commit knows who it’s parent is, but not which children might be attached to it.
Git History
For example, [B] knows it was branched off [A], but does not know who it’s child is (in fact has two children!)

Part of this complexity can be avoided as I’m looking to have a relatively straight forward linear revision history.

Child Selector

From the answer to what is the opposite of git diff HEAD~1?:

You can checkout the next branch like this:

git checkout $(git rev-list HEAD..master | tail -n 1)
In case you’re new to Git/Shell, let’s break this down a little.

The inner expression git rev-list will show a list of revisions. By specifying any two revision id’s joined by two periods, we’ll get a list of all the SHAs in between them.

So, for the following revision history:

     HEAD
      ↓
 A -- B -- C -- D -- E (master)

The command:

git rev-list HEAD..master

Will Return (with the most recent first):

E
D
C

Then by using the pipe operator in powershell, we can grab the last value by piping in | tail -n 1

So this command:

git rev-list HEAD..master | tail -n 1

Will just return the commit we want:

C

In order to make this into a one liner, we’ll need to wrap the query so we can pass the output into our checkout command. We can use the $( ) SubExpression operator to return a vector value, giving us the original equation.

Adding an Alias

If we’re using this a lot, it might look prettier to alias the query.
We can add a new command called child-sha to our local config file like this:

git config --local alias.child-sha "!git rev-list HEAD..master | tail -n 1"

Note: The exclamation point is important! Without it, git will only execute git specific commands. Adding it allows git to use powershell commands as well like | tail -n 1

Then we can checkout the next commit like this:

git checkout $(git child-sha)

Other Considerations

You’ll be seeing a lot of this dialog:
Reload Warning

To avoid this, go to:
Tools > Options > Environment > Documents > Detect when a file is changed
And make sure Auto-load changes is checked:
Auto Load Changes

Conclusion:

That’s about it. I’ll add my presentation here when it’s finished so you can see a little more concrete of an example.
Let me know if you give it a shot and have any experiences (good or bad).