Encosia - ASP.NET, AJAX, jQuery, and more

Bring Less back to Visual Studio 2015 without gulp or grunt

CSS, Visual Studio By . Updated August 31, 2015

Back to the drawing board...

Microsoft recently announced the official release of Visual Studio 2015. It’s faster and offers some nice new features like the Roslyn API for Intellisense and refactorings, ES2015 syntax support, and (most importantly) finally reverts those ALL CAPS MENUS back to Title Casing.

However, you may notice another change if you’ve been using Web Essentials to transpile Less to CSS in Visual Studio 2013. One of the first things you may notice about Visual Studio 2015 is that Web Essentials 2015 has dropped that feature entirely.

That leaves you in an interesting predicament after upgrading to Visual Studio 2015. The official line is that you should update your project to use the new Task Runner Explorer along with grunt or gulp for tasks like Less compilation and CSS minification. That’s a bit of a speed bump though.

I’m a proponent of using task runners like grunt and gulp (In fact, I’ve been using grunt to build this site’s client-side assets for years), but it doesn’t make sense to invest in converting all of my existing projects over to the new paradigm immediately. That’s especially true of client projects, where I can’t move an entire team to a new toolchain and workflow overnight.

However, after using Visual Studio 2015 daily for several months, I would be an unhappy camper if I could only use Visual Studio 2013 and Web Essentials 2013 to maintain those existing projects.

So, in this post I want to show you the solution I’m using to keep Less compilation working in those existing projects, without Web Essentials or any other plugins.
Click here to read the rest of this post »

Making Angular’s $http work with Request.IsAjaxRequest()

AJAX, Angular, JavaScript By . Posted May 7, 2015

A question that I see come up often is why Angular’s $http AJAX methods seem to be incompatible with server-side features in popular frameworks like ASP.NET MVC, Express, Django, and Rails that modify their responses for AJAX-based requests.

Examples range from partial rendering techniques like Rails’ Turbolinks (aka UpdatePanel 2.0) to endpoints that respond with nothing but a JSON representation of the page’s content instead of rendering HTML at all. A wide range of these sort of server-side features in various frameworks and libraries work that way, so the discrepancy between the behavior in Angular vs. client-side libraries like jQuery can be puzzling.

In this post, I’ll briefly explain the mechanism that your server-side framework uses to detect AJAX requests, show you how to make a single Angular $http request compatible with that mechanism, expand that to automatically apply to all requests sent through any $http method, and then explain why Angular doesn’t seem to work right by default.

Click here to read the rest of this post »

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, Podcasts By . Updated May 10, 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 . Updated March 5, 2015

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 »