HTML5 client routes work great on the client, but when deep linking into a site or pressing refresh in the browser, HTML5 client side routes have a nasty habit of turning into server HTTP requests. Requests to routes that the server is likely not configured for. In this post I look at why HTML5 client routes require server cooperation to handle and how to set them up on IIS and/or ASP.NET Core.

Flexbox is a relatively new CSS based technology that makes it much easier to create structured layouts with HTML and CSS. Based on a containership hierarchy, Flexbox combines the structured features of tables with the free form layout capabilities of arbitrary HTML elements that make it possible to create complex , yet flexible HTML designs much more easily that was otherwise possible. My article in CoDe Magazine describes the reasons for Flexbox, the basics of operation and few practical examples you can use today to put flexbox to use.

I ran into nasty problem with PRE tag overflow behavior, which caused content of PRE tags to not respect the boundaries of the container even when overflow rules were set. It turns out the problem was due to Flexbox and the min-width setting that is set differently than standard DOM Block mode rendering.

When using Font-Awesome on IIS (and other Web Servers) you might find that the server is not serving the .WOFF2 or .WOFF file that is requested by Chrome for the FontAwesome font files. Although Fontawesome works fine regardless, you'll want to address the 404 error by serving the preferred file. Here's how.

HTML5 has a proliferation of INPUT types and when you need to style these types in an application the list can get quite long. You can cut down on the size of the list and simplify remembering which INPUT types you don't want styled as text, by using the CSS :not() selector. This post shows how.

Last week I posted about a small jquery-resizable plug-in I'd built. Many questions came in about how to handle table column resizing using this plug-in and in this post I demonstrate how with a little extra work, you can also create resizable table columns using the jquery-resizable plugin.

I recently had a need for a simple resize component and couldn't find a lightweight implementation. I ended up creating a small jquery-resizable plug-in. In this post I discuss a few use cases for resizables and show the jquery-resizable plug-in, how it works and how it's implemented.

JavaScript frameworks have moved front and center in the mainstream in the last year and a half or so. When building modern Web applications, the bar has been raised significantly by what is possible in large part due to the more accessible mainstream frameworks that are available today to build rich client and mobile Web applications. In this post I'll explore why JavaScript frameworks have become so popular so quickly and how it effects the future of Web development. This two part series addresses the current state in this post, and the new crop of V2 frameworks arriving later this year in the Part 2.

You ever run into a Web site that messes with your user input when you don't want it to while using your phone? You know, capitalize the first letter when you're trying to enter a username, or email address, or auto-correct text while typing a part number. As a mobile Web developer it's easy to forget about these automatic behaviors, when you don't want them as auto correction and fixup is the default behavior. To provide the best user experience sometimes we need to be agressive about turning enhancement functionality off. In this post I talk about auto-fixup behaviors for mobile browsers and how to turn them off in your applications. Your users will thank you for paying attention to this small detail.

Ran into some issues with fixed headers again in one of my mobile applications where on an iPad it appeared the content wouldn't scroll properly. I've run into this issue a few times and it turns out it's related to positional layout and specifically problematic on iPad Safari browsers. In this post I'll discuss the problem and the relatively simple workarounds.

Spruce up your boring checkboxes and radio buttons with custom FontAwesome symbols using a little bit of CSS. If you're tired of boring checkboxes and radio buttons, or you simply want a more consistent look of these controls across browsers and controls check out FontAwesome to provide you with customizable checks and boxes to use for selection boxes. In this post I'll show how to use pure CSS to set up FontAwesome checkboxes and radios and talk about a few gotchas I ran into along the way.

A few years back I wrote about a jquery-watch plugin I wrote that can monitor CSS property and Attribute changes and let you get notified if one of the monitored properties are changed. Unfortunately the plugin broke a while back as browser and jQuery dropped some older APIs. In this post I describe an update to the jquery-watch plugin using the newer and more widely supported MutationObserver API that brings high performance DOM node monitoring.

The Mobile Web has come a long way to provide the abillity to create rich UI and interactive, immersive and smooth Web based mobile applications. But there are still big gaps between mobile device features and what's available to Web developers when interacting with mobile devices. In this post I cover and contrast what's wrong with mobile Web development today and where I hope we are going, going forward.

When dealing with HTML based list data, filtering that data based on search text is a nice UI feature that's very useful for quickly finding what you're looking for. In this post I show you how to can create this nice UI effect with a few lines of jQuery code, and then provide a jQuery plug-in that simplifies the process further.

CSS Transitions are a nice way to replace jQuery animations with smoother counterparts. Some transitions however, like height and width transitions can be tricky to handle with pure CSS code due to container sizing issues. In this post I show how create create transitions to mimic most of jQuery's slideUp() and slideDown() functions using CSS and small jQuery plug-in.

The 'Modern' version of Internet Explorer in Windows 8/8.1 is a full screen version Internet Explorer with a custom shell around it. This version of IE has a couple of pretty annoying quirks that affect Web pages significantly.

Popping up the native SMS app from a mobile HTML Web page is a nice feature that allows you to pre-fill info into a text for sending by a user of your mobile site. The syntax is a bit tricky due to some device inconsistencies, but here's how to do it.

SessionStorage and LocalStorage provide easy client side storage for Web applications. In this post I describe a specific scenario for caching list display data and state for a server rendered HTML application using sessionState. See how you can make a server rendered HTML application more user friendly and faster caching content on the client and redisplaying it when the user returns to a page he navigated from.

The new HTML5 Input types make it easier to display special formatted input types like dates and email addresses. Browsers that support them display a nice UI for editing and can validate values. However, support currently is limited and date formatting especially is complex as it involves using an ISO date format that doesn't fall back nicely to non-supporting browsers.

HTML5 allows for multiple files to be uploaded from a single file input control. Here's how you can use it and capture files in ASP.NET.

Want to get your CHM files to display content in HTML5 and CSS rather than the stock IE7 quirks more rendering used by default? This blog post describes how you can take advantage of newer HTML and CSS specs in your CHM files.

The default WebForms templates in Visual Studio still use the XHTML doctype headers by default. HTML5 doctype headers are easier to use and read and with HTML5 support now becoming mainstream and backward compatible with older browsers its time to switch those doctype headers. This post demonstrates how to change the default VS templates or create new templates altogether. With HTML becoming more prominent and the new headers being easier to read and smaller in size, it's

The HTML 5 input controls enhancements seem like a nice feature - until you look a little closer and realize that that validation and styling these control enhancement use are likely going to interfere with your existing application logic and styling. Here are are some thoughts on the subject.