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 »

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 »

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 »

Improving client-side development in Visual Studio

ASP.NET, CSS, JavaScript By . Updated July 28, 2010

For several years now, I have been consistently impressed with how Microsoft’s developer division gathers feedback and proactively responds. Nearly every time that I’ve participated in a survey or otherwise provided feedback (solicited or not), someone has followed up with me about my specific concerns. In my experience with how other large companies gather feedback, that’s not common.

So, when I answered a recent survey about ASP.NET development in Visual Studio 2010, I wasn’t surprised when I received a follow-up email from a friendly fellow at Microsoft named Xinyang. In the optional comments section, I had mentioned my concern that CSS and JavaScript editing are becoming second class citizens in Visual Studio. In response, Xinyang asked me to provide more detail on that comment.

As I composed a lengthy email reply to him, it occurred to me that a post here would be a much more effective way to refine my feedback and potentially gather more responses from you at the same time.

So, here are a few of my ideas for improving client-side development in Visual Studio 2010, separated into CSS and JavaScript specific feedback. Xinyang and some of his colleagues will be reading this and your comments, so if you agree, disagree, or have other ideas yourself, be sure to chime in.

Click here to read the rest of this post »

Do you know about this undocumented Google CDN feature?

CSS, jQuery, UI By . Updated February 25, 2010

By now, you probably already know that Google hosts jQuery on its AJAX APIs CDN, free of charge. As I’ve discussed here in the past, I’m a big fan of using their CDN to achieve decreased latency, increased parallelism, and better caching.

If you’ve explored the AJAX APIs documentation a bit, you may know that jQuery UI is also hosted on Google’s CDN. Unfortunately, since jQuery UI plugins depend on a ThemeRoller theme, using a CDN for jQuery UI isn’t as easy as with jQuery itself.

Or, is it?

Click here to read the rest of this post »

11 keystrokes that made my jQuery selector run 10x faster

ASP.NET, CSS, JavaScript, jQuery, Performance By . Updated June 30, 2010

As an ASP.NET developer working on the client-side, one problem you’ll encounter is how to reference the HTML elements that ASP.NET web controls generate. All too often, you find yourself wasting time trying to reference TextBox1, when the element is actually rendered as ctl00_panel1_wizard1_TextBox1.

Much has been written about this, including a post of my own, so I won’t go into detail about many of the workarounds. Instead, I want to take a closer look at the performance drawbacks of one popular solution: the [attribute$=value] selector.

By specifying id as the attribute in this selector, you can avoid ASP.NET’s ClientID issues completely. No matter what the framework prefixes your rendered elements with, they still “end with” the ID you specify at design time. This makes the “ends with” selector a convenient alternative to injecting a control’s ClientID property via angle-brackets.

However, are we trading performance for this convenience? If so, how much?

When Craig Shoemaker asked that question while interviewing me for an upcoming episode of Polymorphic Podcast, I realized I didn’t know the answer as clearly as I’d like. So, I decided to do a bit of benchmarking.

In this post, I’ll share the results of that benchmarking, and show you one way to significantly improve the performance of this convenient selector.

Click here to read the rest of this post »

How to easily enhance your existing tables with simple CSS

AJAX, ASP.NET, CSS, jQuery, UI By . Updated October 15, 2008

In two of my recent posts, I demonstrated using ASP.NET AJAX in conjunction with jQuery or ASP.NET AJAX 4.0’s templating features to generate client side tables from JSON data. However, what I neglected to show you was how to make them look even remotely presentable.

In this post, we’ll continue where those posts left off. I’m going to show you how you can improve the table’s presentation in three steps:

  • Setting basic styles for the page and table.
  • Improving the table header by using strong contrast.
  • Adding subtle gridlines to the table body.

Click here to read the rest of this post »

4 ASP.NET AJAX JavaScript UI methods you should learn

AJAX, ASP.NET, CSS, JavaScript, UI By . Updated January 29, 2008

Wrapping up my series on some of ASP.NET AJAX’s less utilized client side functionality, this post will take a closer look at some of ASP.NET AJAX’s JavaScript UI helper functions. These methods are great because they abstract away most of the tedious work that comes with supporting cross browser compatibility, leaving us with a nice, consistent API.

Specifically, I’m going to show you examples of using addCssClass, getBounds, getLocation, and setLocation to accomplish a few client side UI tasks.

Click here to read the rest of this post »

How to improve ASP.NET AJAX error handling

AJAX, ASP.NET, CSS, UI By . Updated August 29, 2007

AJAX error message on the ASP.NET forums

If you’ve done much ASP.NET AJAX development, you’re no doubt familiar with JavaScript alert errors similar to the one pictured above. This particular one occurs on the official ASP.NET forums in FireFox, if you try to navigate away from viewing a user profile before the Recommended Reading panels asynchronously load.

Not only is the error message of “…” completely meaningless, but it blocks your intended navigation away from the page until you’ve dismissed the alert window. Hopefully, someone at Telligent will read this, because the ASP.NET AJAX framework gives us an easy way to replace the annoying JavaScript alerts and vastly improve the usability of our applications.

Click here to read the rest of this post »

User availability check usability improvements

AJAX, ASP.NET, CSS, UI By . Updated October 15, 2008

This is a follow-up post, building on the foundation laid in ASP.NET AJAX username availability check. In this post, I assume you’ve read and understood the first post.

After originally implementing AJAX username availability checking in my applications, I noticed an edge case scenario that replayed itself too often to ignore. The availability check could potentially take longer than a particularly fast user would need to complete the form. To avoid any trouble in that scenario, I wanted to add a progress indicator to the checking process and disable the submit button’s until an available username was selected.

Click here to read the rest of this post »