Just launched new Municode Library mobile web app

http://www.municode.com/Library

Thank you

Font Awesome icons disappear in Chrome on Android (sometimes)

A fix worked for us. Check it out in the GitHub issue comments.

https://github.com/FortAwesome/Font-Awesome/issues/470

One db query to get 100 items is better than 100 queries to get 1 item

Performance Test:

Which is more performant: Query the db 100 times for 1 item, or query the db 1 time for 100 items then use LINQ to get the item?

Note: The Linq collection is not optimized for the query, that is, it’s not a hashSet or Dictionary and we are not querying using the object’s hash and no equal is overriden etc

Each test is using VS debugging after a stop and start, unless otherwise noted


Long Beach, 16115: 15 ordinances total, 8 newords
Test 1: Query once, Use Linq to filter: {00:00:08.6428642}
Test 2: Multiple queries, no linq collection: {00:00:01.1371137}
Test 3: same as test 1: {00:00:00.7710771}
Test 4: same as test 2: {00:00:01.1221122}
Test 5: same as test 1: {00:00:00.8830883}
Test 6: cleared sql cache, same as test 2: {00:00:01.3811381}
Test 7: cleared sql cache, same as test 1: {00:00:01.6191619}
Test 8: same as test 1 (no clear cache): {00:00:00.9060906}
Test 9: same as test 2: {00:00:01.4201420}
Test 10: same as test 2: {00:00:01.1301130}
Test 11: same as test 1: {00:00:00.7780778}
Test 12: same as test 1: {00:00:00.7950795}
Test 13: same as test 2: {00:00:01.1041104}
Test 14: same as test 13, no app restart: {00:00:00.7680768}
Test 15: same as test 1: {00:00:00.8468306}
Test 16: same as test 15, no app restart: {00:00:00.0519896}

Just realized test 1 is skewed bc I had breakpoints set


Cook County, IL : 13805 - 46 ordinances total, 5 newords
Test 1: Query once: {00:00:00.7390739}
Test 2: Multiple queries: {00:00:00.8680868}
Test 3: same as Test 2, no app restart: {00:00:00.2420242}
Test 4: same as Test 3, clear sql cache: {00:00:00.6570657}

Conclusion: after first time db is hit execution path is cached. While cached, query once is faster. The more newords there are the longer multiple queries will take. When queries are run back to back without test app restart the cached linq approach performs magnitudes better.

So: Worth it? Yeah buddy!

In college I heard about a tradeoff that is always true: space vs time. Here again it’s true. The Linq collection will add to the memory footprint but by not hitting the db repeatedly queries are faster.

http://gorban.org/post/32873465932/software-architecture-cheat-sheet

Must read for all software developers. Print the pdf and put it on your wall!

What is a web developer to do with new devices coming out with a crazy amount of pixels? Nothing!

As a web developer, I mainly measure everything in pixels. So when I hear of new mobile devices coming out with desktop monitor-like pixels, I assume that means the browsing experience will also be like a desktop monitor, but on a much, much, much, smaller physical screen. When I got my Nexus 7 from work, I was surprised to see that wasn’t the case.

This is actually a good thing for web developers.

I am in no way an expert and am not about to explain hardware pixels, device independent pixels, density, and so forth. Here are a few links that shed light on why mobile devices with supposed high screen resolutions look similar to “standard” mobile devices in a web browser:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html http://www.quirksmode.org/m/tests/widthtest_vpdevice.html http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

Basically, mobile devices have a hardware resolution, which is the screen width. What they report to web browsers are different figures. For one, the device-width is usually smaller. In the retina iPhone’s case, it’s actually 1/2. Then there’s the viewport, which browsers usually report larger than their device-width.

That’s why when building a mobile site, it’s good to have the meta tag <meta name="viewport" content="width=device-width"> so the viewport matches the device width. Just remember device-width is not equal to the actual hardware device width (the one that’s reported on all the spec sheets as screen resolution). That’s where device pixel ratio comes in.

Read those linked articles for more details!

How to add a heading to Twitter Bootsrap navbar

I’m glad this was simple:

        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav pull-right">
                    <li><button class="btn"><i class="icon-remove-circle"></i></button></li>
                </ul>
                <h4 style="text-align:center;">Search</h4>
            </div>
        </div>

Result:

http://stackoverflow.com/questions/6941425/weird-behaviour-in-android-browser-when-selecting-fields

In Android 2.3 and below, touch events are propagated through overlays to the elements behind them. Lame. Developing for the mobile web makes me dislike Android fragmentation even more.

How to create a Twitter Bootstrap mobile top menu with buttons

HTML:

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li><button class="btn"><i class="icon-home"></i></button></li>
        </ul>
        <ul class="nav pull-right">
                <li><button class="btn"><i class="icon-search"></i></button></li>
        </ul>
    </div>
</div>

Result:

Finally found a case where Bing beats google

System.Web.Optimization missing even after installing Framework 4.5 and MVC4

System.Web.Optimization is only available via a nuget package at the moment - Microsoft ASP.NET Web Optimization Framework.

More details: http://stackoverflow.com/questions/12202516/is-system-web-optimization-part-of-net-framework-4-5?lq=1

Even though my app was working locally without installing, I had to install it so I don’t get an IIS System.Web.Optimization assembly missing error when pushing to dev or production servers (which don’t have visual studio 2012 installed, but do have .NET 4.5 and ASP.NET 4). After installing the nuget package, System.Web.Optimization dll shows up in my bin folder.