Posts related to: HTML
Making Html Input Controls Truly ReadOnly
A discussion of how to show readonly controls in user interface and ensuring that they are not UI activated. This post discusses readonly and disabled behavior and how you can make readonly behave better if you choose to use it over disabled.
Inline Confirmations in JavaScript UI
Confirmation dialogs or modal popups can be annoying in HTML applications. What if you could instead use an inline UI to confirm an operation? In this post I describe a simple way you can use an inline UI to confirm an operation that can be easily implemented with a few lines of code and a couple of binding directives.
Preventing iOS Textbox Auto Zooming and ViewPort Sizing
If you've build mobile Web applications that need to run on iOS Safari and on an iPhone you might have run into the problem of input fields 'auto-zooming' the display when the input field and popup keyboard get focus. The view zooms and doesn't return back to the unzoomed even after exiting the input field. In this post I describe why this happens in some scenarios, and a couple of ways you can work around this annoying iOS Web browser behavior.
Async Event Methods and preventDefault() in JavaScript
When using async events, it's important to understand how events work when called asynchronously. Specifically if you need to interact with the event context for things like preventDefault(), cancelBubble() or returning values that determine completion state, you need to be careful as these may have no effect if called after an `await` call.
UpperCase Styling via CSS and text-transform
I learned something new today: there's a CSS `text-transform` style property that can be used to transform text automatically to upper, lower or capitalized case. No JavaScript contortions and it just works. In all my years doing Web dev I've not run into this property before, so I'm posting it here for others to find as well...
A Button Only Date Picker and JavaScript Date Control Binding
The native date picker in HTML is a bit of a pain to work with as it's overly simplistic in features and how you have to assign and retrieve values from it. It also isn't customizable so if you need to build custom behavior like a button date popup that doesn't show the input control, you're out of luck. In this post I discuss the challenges of the HTML date picker control, provide small component to make binding values easier, and provide an example on how to create a button only date picker both with plain JavaScript and as a small Vue component.
HTML Table Cell Overflow Handling
HTML table column wrapping and truncating doesn't work like other HTML elements. Specifically if you want to keep table column content from wrapping via `overflow` or `white-space` wrapping settings you'll find that tables just laugh in your face. Here's a quick post that describes table wrapping and text truncation issues and the hacky workaround.
Use CSS.escape() to escape QuerySelectorAll()
-to-escape-QuerySelectorAll()/Escape.png)
Ran into an issue recently where a querySelector operation was failing in document link navigation when navigating hashes. There are a few issues at work when using Hash navigation but one issue i didn't expect to run into was a naming conflict of a hash tag that interfered with CSS operators. Turns out there's an easy solution around with with CSS.escape - if you can make the connection. In this post I talk about the problem how it might show up and how to fix it.
Using the brightness() CSS Filter to generically highlight Content
-to-generically-highlight-Content/Toolbar-Highlight.gif)
Filters are not new in CSS, but their often overlooked for providing some useful generic behaviors for things like hover styling or nice background effects. In this post I discuss how to use the brightness() filter to create a generic button hover behavior and also briefly discuss the newish `backdrop-filter` property.
Fixing Adsense Injecting 'height: auto !important' into scrolled Containers
Ran into a weird issue today with AdSense in one of my older Web sites. I noticed that the site was not using the custom scrolling in containers that I've been using for years. Turns out Google's AdSense on this page is injecting some extra styling that changes the scroll behavior - and the way the entire page works. Here's what the problem is and how you can work around it.
Live Reloading Server And Client Side ASP.NET Core Apps with BrowserSync
Client side live reloading is one of the most compelling features of client side JavaScript development. Instant updates of any code changes in the browser are a huge productivity booster - WYSIWYG on steroids. Unfortunately for ASP.NET Core server side code and MVC apps there aren't any comparable easy solutions. In this post I show how I use Browser Sync and `dotnet watch` in combination to provide live reloading for both server and client side changes.
Back to Basics: Non-Navigating Links for JavaScript Handling
When you're creating HTML Anchor links that are non-navigating and handled via script code or through some JavaScript framework, what's the best way to handle the `HREF` navigation link in the HTML? In this back to basics post I look at a few different approaches and what works best.
Creating an HTML Packager
Recently I needed to add the ability to save HTML documents in Markdown Monster. Saving raw rendered Markdown is not really sufficient and so I set out to create an HTML packager that can package an HTML Web endpoint into a self-contained local package either as a single self-contained file, or an HTML document with all dependencies localized. In this post I discuss why this is needed and how to implement and use this library to capture HTML output in a few different ways.
Web Code is a solved Problem: How about fixing Web UI next?
These days most of the focus in Web development is on code - JavaScript code in particular. By comparison, the Web UI - HTML and CSS and the browser DOM and support features - feels like it has been stuck in the mud and stagnating for a long time. We now have all the advanced coding tools to do cool stuff, but it seems that HTML and the Web Browser's feature set are really what is holding us back. In this post I look at what's ailing Web UI and try to ruffle some feathers into discussion of how we can affect more rapid change in Web UI features.
Flexing your HTML Layout Muscles with Flexbox
Flexbox is a 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.