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 »

Determine where an element belongs in a jQuery selection

jQuery By . Updated October 29, 2013

Using jQuery to find a specific element in a selection is straightforward — probably one of the earliest things most of us used jQuery to help with, whether using :first, :last, :eq(), or maybe :odd/:even.

However, sometimes you need to be able to do the opposite and find where a given element fits within a given selection. In other words, you might want to ask jQuery whether or not something is :first or :odd, and doing that is a bit less obvious than the other way around.
Click here to read the rest of this post »

Why you should be nice to technical recruiters

General By . Updated September 5, 2013

Consider this quote from Greg Baugues’ post, Autoworkers of Our Generation:

No one’s got it better than developers right now. When the most frequent complaint you hear is “I wish recruiters would stop spamming me with six-figure job offers,” life’s gotten pretty good.

That’s an understatement.

What other comparable profession can you enter with no formal education and no certification today? Sure, being a good software developer takes a certain disposition and we must spend countless hours keeping pace with new technology, but the bar to entry is incredibly low compared to the potential reward.

I don’t agree with Greg’s premise that automation will replace us. The promise of that sort of automation has been present for decades, yet there’s only more manual work than ever. Often, full-time programmers are still needed to configure and support systems that promised automation so simple that non-technical users could “program” them. See also: The Expert System.

However, I couldn’t agree more with the overall sentiment of his post:

Don’t get too comfortable. Don’t get locked into a language. Don’t burn bridges for short term gain. Keep your tools sharp. Learn soft skills. Build an audience. Save some money. Network. Read.

It’s an obscenely good time to be a developer. Enjoy it while it lasts.

Nothing this good lasts forever

In my opinion, what Greg got most right is that nothing this good lasts forever. The current climate reminds me all too much of the hubris we saw in the late 90s, and who could forget the oversupply of developers sidelined after that ride came to an abrupt end.

Whether new talent sees how great we have it and floods the market, a bubble pops, the economy sours again, or Greg turns out to be correct about automation, you can bet that conditions won’t always be this favorable for us.

So, don’t be a jerk

What to do? Be kind, even when you don’t have to be. Treat people how you’d like to be treated if you were on the other end of this unbalanced equation. Don’t take for granted that we’ll always have this amazing position in the job market.

A recruiter that seems annoying today may just be your lifeline in the future. Do you want them to remember you as the jerk that went out of your way to broadcast a negative message, write a snarky post, or build an entire site shaming them for daring to vie for a few seconds of your attention?

The big change in Bootstrap 3 that no one’s talking about

CSS, Performance By . Updated August 21, 2013

As you probably already know if you’ve seen any tech news this week, Twitter Bootstrap 3 came out of RC and was officially released this past Monday. There are a plethora of changes in the new version, but the two most visible changes are a “mobile first” responsive grid and a new flat graphical style, ala Windows 8.

The flat styling has been especially controversial. If you didn’t need to differentiate a site with distinctive design (e.g. internal admin sites), you could usually get away with using previous versions of Bootstrap without any stylistic modification, but not so much with Bootstrap 3.

Unfortunately for those uses, the default styling in Bootstrap 3 is fairly bland until you customize it a bit or augment it with a full theme. Bootswatch and WrapBootstrap are two great resources to accomplish the latter. To simply bring Bootstrap 3 most of the way back to Bootstrap 2.3.2′s look and feel, there’s also an official theme you can apply.

So, I think the brouhaha over flat vs. gradient defaults is overblown. More importantly, that change has had an interesting side-effect that seems to have been mostly overlooked this week: Performance.

Click here to read the rest of this post »

Get the lowdown on Visual Studio 2013 and Web Essentials

General By . Posted July 1, 2013

Build 2013 has been a bit of a whirlwind. Trying to process announcements about everything from Windows 8.1 to Project Spark over the course of just a few hours of keynotes was pretty overwhelming. One of the things that didn’t get a ton of exposure on stage is what’s coming for ASP.NET developers in Visual Studio 2013, paired with Web Essentials.

Visual Studio 2012 with Mads Kristensen’s Web Essentials extension is already a great web development environment. If you’re working on ASP.NET sites, Visual Studio is the only game in town, but I even know non-developers who use the free Express version for editing static HTML sites because it works well for them.

Not perfect

However, there have been features in newer editors like WebStorm and Sublime Text that I did miss in Visual Studio.

Intelligent auto-completion of attribute name and values based on what you’ve used previously, for example, is a really great feature when you’re working with frameworks that are driven by data- attributes.

LiveReload is another feature that’s popular in other editors, but not supported as well on Windows or in Visual Studio. It’s not always useful on more complex pages, but can speed you up significantly in the right situations.

More than just catching up

Visual Studio 2013 has both of those features now, along with better “surround with”, better keyboard navigation through HTML documents, reliable HTML code formatting that doesn’t wreck your markup, SignalR-based Browser Link (i.e. LiveReload++), and more.

After using Visual Studio 2013 and Web Essentials for a few days, I don’t see myself needing or wanting to use those other editors very much in the future.

I could go on, but Mads had a great breakout session at Build covering the new capabilities in both Visual Studio 2013 and Web Essentials, and why ongoing improvements may begin coming more quickly. The “one more thing” moment came when he switched the Web Essentials Github repo from private to public, live on the stage:

mads-open-sourcing-web-essentials

If that leaves you wanting more, Hanselman also did an episode of Hanselminutes with Mads, talking about these new features and improvements.

Try it for yourself

Like Visual Studio 2012 before, VS2013 supports round-tripping with older projects. So, you can start using Visual Studio 2013 with your real projects right away. Give it a try today.

VS2013 preview: http://www.microsoft.com/visualstudio/eng/2013-preview

Web Essentials 2013: http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361