Setting the value of a datetime-local input with JavaScript

JavaScript, Mobile, UI By . Updated February 28, 2015

While they haven’t gained much traction on the desktop, HTML5’s new input types are great when you’re developing for mobile. Whether you use them in a mobile-friendly website or a hybrid app built with Cordova, most mobile devices will complement those regular HTML inputs with task-appropriate keyboard layouts or even show native interfaces in some cases.

Though these new inputs are pretty handy, they do still have a few rough edges. In fact, I ran into a very frustrating issue while trying set the value of a datetime-local input just today.

In this post, I’ll show you the correct syntax to set the value of a datetime-local input, and how to set it to the current date and time, while correctly accounting for the user’s time zone.
Click here to read the rest of this post »

Hear me jabber about myself on The Hello World Podcast

General By . Posted January 6, 2015

hello-world-podcast-logoDuring his adventure around the world, my friend Shawn Wildermuth recently found a few minutes to have me on his podcast: The Hello World Podcast.

It’s a fun podcast if you haven’t listened to it before. Instead of having guests pontificate on current events and specific technologies, it’s all about how people first got started with computers and programming. For me, it all began with a first-generation Radio Shack TRS-80 Color Computer that I’ve mentioned here before, but I don’t think I’ve ever talked about what I did to it within about a year that nearly gave my parents a heart attack. You’ll have to listen to the podcast to learn about that (and hear Shawn make the same sound mother did in 1982 when she saw my handiwork).

More seriously, Shawn pressed me to think of the one thing I would have done differently if I could do it all over again. After coming up with a passable answer, I realized what my real answer to that question is and that it applies to everyone in technology, not just me. If you’re reading this, that probably means you too.

A few weeks with the Microsoft Band

Band, General, Reviews By . Posted December 9, 2014
microsoft-band-on-charging-stand-sm

My Band on the clever charging stand that @idlehandsdev designed.

I was lucky enough to get my hands on a Microsoft Band from the first batch that sold out so quickly a few weeks ago. I’ve been wearing it daily since then, using it to track my sleep, measure and analyse workout sessions, and even to buy the odd Americano at Starbucks.

Since then, lots of people have asked me how I like the Band and how well it works. So, here’s a quick rundown of my experience with it thus far, including the time it went dead in the middle of a workout.

I’m writing this with the assumption that you know what the Band is and basically what it does. If not, have a look at the official Microsoft Band website first.
Click here to read the rest of this post »

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 »