Posts related to: JavaScript
Lazy Loading the Mermaid Diagram Library
The Mermaid library is a large beast, and if you're using it selectively in your Web content you probably want to make sure you don't load it unless you actually need it, due to it's download footprint and load time. If you're loading Mermaid with server only code it's pretty straight forward, but if you use it on the client there you may want to delay loading the library until you actually need to display a diagram.
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.
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.
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.
Using Angular's Live Reload Web Server to Refresh Pages on a Phone
Live Reload is now common for client side application development and it has become ubiquitous for Web development. But setting up Live Reload to work on a phone is not quite so obvious. In this post I'll walk you through what you need to do to get Live Reload to work on a mobile device for more productive on-device execution.
A HighlightJs Copy Code Badge Component
In this post I describe a small, very specialized addon component for the HighlightJs Syntax highlighter that displays a badge that lets you copy the code snippet and displays the syntax language. The post covers how to use this simple component, and a look behind the scenes on how it works.
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.
Getting JavaScript Properties for Object Maps by Index or Name
Getting value out of maps that are treated like collections is always something I have to remind myself how to do properly. In this post I look at JavaScript object iteration and picking out values from a JavaScript object by property name or index.
Reversing Sort Order on DOM Elements using jQuery
When creating list content in Web pages, it's often quite useful to allow users to sort or reverse the order of items displayed. Creating client side sortable lists is easy to do and in this post Rick shows an easy way to make a list reversible using jQuery.
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 2: Tomorrow
JavaScript frameworks are undergoing a huge change for their V2 releases, going through the growing pains of providing a more modern platform and bridging new technologies. While the new frameworks promise improved performance and usability, there is also quite a bit of pain involved in respect to the build process and making the move to ES6.
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.
Angular Select List Value not binding with Static Values
Ran into a problem converting from Angular 1.3 to 1.4rc a couple of days ago. The issue is that the way ng-model bindings work has changed, in that Angular 1.4 and later uses exact type matching for value comparisons which results in behavior changes. In my case I ran into a problem with static list values binding to a non-string value which caused the binding to effectively not work at all. Here's what the problem is and how to work around it.
Mixing $http Promises and $q Promises for cached Data
When creating services it's often useful to return data from the $http service, or cached data that already exists. You can't however just return the cached data, but have to turn it into a promise so it matches the $http callback signature. Here's how to deal with this frequent scenario.