Markdown Monster
Posts related to: HTML5
Handling HTML5 Client Route Fallbacks in ASP.NET Core
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.
Code Magazine Article: Flexing your HTML Layout Muscles with Flexbox
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.
Flexbox Containers, PRE tags and managing Overflow
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.
FontAwesome Fonts and Mime Types in IIS and other Web Servers
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.
Styling all Text Elements with the CSS :not Filter
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.
jQuery-resizable and Table Column Resizing
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.
A small jQuery Resizable Plug-in
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.
The Rise of JavaScript Frameworks - Part 1: Today
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.
Turn off HTML Input Auto Fixups for Mobile Devices
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.
IPad Scroll Issues with Fixed Content
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.
Using FontAwesome Fonts for HTML Radio Buttons and Checkboxes
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 jquery-watch Plug-in for watching CSS styles and Attributes
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 broken Promise of the Mobile Web
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.
Filtering List Data with a jQuery-searchFilter Plugin
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.
Using CSS Transitions to SlideUp and SlideDown
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.