Using btn-block with Bootstrap 3 dropdown button groups

Bootstrap, CSS, UI By . Posted October 8, 2014

bootstrap-btn-block-with-split-dropdown-sm

I recently found myself wanting to combine Bootstrap 3’s full-width btn-block button with its split button dropdown component in the same button group (as seen in the screenshot above). As it turned out, it wasn’t as straightforward as you might expect. So, I want to briefly share the solution I found to make that work.
Click here to read the rest of this post »

Fix “addthis_config not defined” when using async AddThis

JavaScript, Performance By . Posted August 21, 2014

I recently decided to pony up for AddThis Pro. Spread across up to five sites, that’s not very much to pay for a wide variety of well-designed social widgets. Certainly much less than what my time would be worth to reinvent them from scratch.

However, I’m always wary of bogging the site’s performance down with poorly implemented sharing buttons, counters, toolbars, etc. I tried Buffer’s Digg Digg plugin for a little while last year, but it had a noticeable impact on page jankiness and load times even with the deferred initialization option enabled.

With performance in mind, I was happy to discover that AddThis supports loading the bulk of its client-side code asynchronously. However, I was less happy to find that it didn’t seem to work when I followed the instructions on their site, resulting in a JavaScript error and no AddThis widgets at all.

In this post, I’ll cover why you should consider using asynchronous scripts, how to fix the addthis_config not defined error, and an alternate way of asynchronously including the AddThis scripts that I think may be a better approach than the one AddThis recommends.
Click here to read the rest of this post »

IIS performance tip: Cache in on consistent casing

ASP.NET, Performance By . Updated June 11, 2014

In Spring 2011, at what would sadly become the final installment of Microsoft’s MIX conference, I attended a great talk called 50 Performance Tricks to Make Your HTML5 Web Sites Faster. I was skeptical about the session due to the linkbait title, but Jason Weber from the IE team proceeded to present one of the most comprehensive talks about web performance I’ve seen crammed into a single hour.

Standardize on File Capitalization Convention

A video of the presentation is still available online as I’m writing this. Streaming seems to be broken, but the full video downloads still work fine. Even three years later, it’s still well worth spending a few minutes to watch his presentation if you’re developing for the web and care about performance.

Out of all the points that Jason covered in his talk, the tip at about 21 minutes into the presentation stood out to me the most: Standardize on File Capitalization Convention.
Click here to read the rest of this post »

Canonical URLs in IIS without breaking localhost debugging

ASP.NET, Azure, Visual Studio By . Posted April 30, 2014

It’s important that public-facing websites respond to requests for both domain.tld and www.domain.tld. You can’t control what your users will type into their browsers and you never know which form of your site’s URL people will use in links that they share in email, social media, and links on their own sites. Of course, you want to be sure that your website responds even if they don’t use your preferred version of your URL.

However, it’s nearly as important that all of those requests are redirected to just one address for SEO purposes. This is known as choosing and enforcing a canonical URL. If you don’t enforce a canonical URL and a search engine indexes duplicate copies of your content, you risk diluting the authority that backlinks have given your content and you even risk incurring the dreaded duplicate content penalty. Both will impact how your content fares in search result rankings.

Though rel="canonical" and improvements to search engine algorithms have helped reduce unwarranted penalties related to this mistake, the risk of unnecessarily falling behind in the rankings is too great to ignore.

To solve that problem, many websites running on IIS make use of its built-in rewrite module to enforce a canonical domain name. Unfortunately, the most obvious way to accomplish that ends up causing trouble when you want to work with the site locally.

Click here to read the rest of this post »

The five minute contact form tweak that saves me hours

ASP.NET, Express.js, JavaScript, Node.js By . Updated March 19, 2014

Operating a website used by predominantly non-technical users can be an eye-opening experience when the time comes to support those users. It’s easy to forget how much of the nomenclature and technical understanding that we take for granted is just unintelligible jargon to others. In fact about 10% of people surveyed this year even guessed that HTML was an STD.

A particularly poignant example I dealt with recently was a user telling me they were using “Google” to browse the Internet on their desktop PC. You’d think that probably means they were using Google Chrome as their browser, right? Nope. They were using Internet Explorer with Google’s website set as their home page.

Unfortunately, assisting the most helpless users with technical issues still requires that they communicate details about their platform and browser to you at least semi-accurately. The broader problem is bigger than anyone can solve in a thousand words, but in this post I want to show you one small improvement I’ve made on my public-facing contact forms to help cut down on confusion with this specific aspect of helping non-technical users.
Click here to read the rest of this post »

A cleaner way to use setTimeout and anonymous callbacks

JavaScript By . Posted February 13, 2014

The most common syntax for using an anonymous function with JavaScript’s setTimeout has never sat well with me. For a quick, non-reusable bit of code that needs to run after some interval, you’ll often see something like this:

setTimeout(function() {
// Do something here.
}, DELAY);

That works, but the placement of the closing curly brace makes the delay awkward to scan for and the code’s overall structure unnecessarily difficult to parse at a glance. That effect is exacerbated when the body of the anonymous function is more than just a line or two of code.

In this post, I want to briefly show you an simple alternative that I think is more readable and maintainable.

Click here to read the rest of this post »

Button click handlers, AJAX, and premature submission

AJAX, JavaScript By . Updated February 1, 2014

When you begin moving from server-side web development to a client-side approach to driving your user interfaces, a common first experiment is to enhance an existing button with some JavaScript that runs when the button is clicked. For example, clicking a button that should request and display the current time from a server is basically the “hello world” of AJAX.

Unfortunately, that common learning progression is prone to a confusing outcome when you’re working with buttons within form elements. The problem is that you need to take into account that the browser’s form submission mechanism is not interrupted by client-side JavaScript by default.

Click here to read the rest of this post »

Why malware in Chrome extensions was inevitable

General By . Posted January 22, 2014

Chrome’s extension marketplace has been taking it on the chin lately due to the ever-increasing number of popular extensions choosing to sell out and become burdened with adware or even full-on malware. Lowell at How-To Geek wrote a good article digging into the details of a few examples.

This storm has been brewing for some time though. Chrome extensions have flirted with the distinction between ad-supported freeware and something less honest for years. However, the situation has finally built to a critical mass that Google could not ignore.

Coupled with silent automatic updates, this outcome was almost guaranteed by the combination of three forces at work in the Chrome extension marketplace (and sadly, most other app/addon stores):

  1. In the eyes of most consumers, app stores have managed to marginalize the value of quality software down to somewhere between free and $0.99 (or a whopping $1.49 if you include the Windows Store).
  2. Quality software costs a significant amount of money to develop. Sure, a good developer might technically be able to build something like that from scratch, but they still pay the opportunity cost of working for free all that time. Even programmers need to eat.
  3. Supporting software can be a soul-crushing chore for one person. As you build a large user base of non-technical users, what begins as a labor of love can quickly become a nightmare. Being quasi-responsible for supporting software that you don’t get paid to support is simply untenable.

With no prospect of charging even pennies for these extensions, despite the burden of ongoing development and supporting thousands of users, it’s easy to understand why extension owners are accepting these lucrative deals. I’d like to think I wouldn’t take the money myself, but some of the deals I’ve seen mentioned would not be easy to turn down.

In the short term, this particular situation with Chrome extensions is probably solvable with a more granular permissions model, better curation, and notification when extensions are automatically updated.

In the long term, what’s fundamentally missing is a way for developers to make these projects financially viable without resorting to selling out their users. At this point, I think we’ve definitely determined that developers hoping a $0.99 app hits the app store lottery jackpot is not sustainable for anyone involved.

I don’t know what the answer to that larger problem is. Do you?

How to Chromecast video in a popup window

General By . Posted January 7, 2014

For whatever reason, some websites just love to open video players in tiny popup windows that make regular browser features and extensions difficult to access. Judging from the success of streaming sites like YouTube, Netflix, and Hulu that play video without popups, that approach is obviously not necessary, but sites using these popups don’t seem to be going away anytime soon.

The ESPN3 website is a good example of a site that uses unnecessary popups. Here’s the popup window that shows up when you watch any of the content there, for example:

espn3-popup-window-sm

It’s great that ESPN makes it simple to stream video from so many events, but the interface can be frustrating sometimes. This stripped down popup window definitely lacks some of the features that you’d expect from a regular tab.

Particularly, the buttons that extensions, like Google Cast, add to the right of the address bar are missing in the minimal popup window:

That icon indicates third-party cookies are blocked. You should enable this if you haven't.

That icon indicates third-party cookies are blocked. Enable this if you haven’t.

Since the ESPN3 video opens in a bare bones popup window, the Google Cast extension button to send it to a Chromecast device is missing. So, how to stream this video to a Chromecast?
Click here to read the rest of this post »

Spoiled by Windows

Windows 8 By . Posted December 10, 2013

Recently, I read a post about how easy it is to clutter a Mac’s menu bar with various status indicators and icons. When watching people give presentations on MacBooks with a real-world payload of software installed, you do almost begin to expect to see ridiculous menu bars like this one:

mac-status-menu-icons

Reading that post definitely brought back memories of the two years that I used my now-mothballed MacBook Air. Not only was my menu bar littered with icons, but there was even one nondescript update app’s icon that I never was able to eliminate from my menu bar.

Frankly, it was beginning to remind me IE with too many toolbars installed.

ie-too-many-toolbars

Now that OS X can finally maximize windows, there’s room for this!

Dealing with that situation on my Mac was particularly annoying because I was already accustomed to a better way of handling those icons.

Click here to read the rest of this post »

s