Tallan Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

Posts Tagged "JavaScript"

Simplify Your Mobile Presence With Progressive Web Apps

The biggest thing we take for granted in the current mobile-dominated web is that everything “just works”, no matter what size or type of device you’re on. But what’s the real impact of that expectation?
For customers, the frustration of needing to switch devices can be more than enough to turn them away from a certain product. For product owners, there’s an expectation that everything needs to be created in parallel to be desktop-friendly, tablet-friendly, mobile-friendly, and to have an equal native mobile app for every platform, which can quickly add up in cost. And for developers, there’s the fact that now you have to actually make all those versions of the same app, across completely different technologies for web and native, and have them work similarly enough to not raise any eyebrows.
But luckily, there’s a new way of doing things,…

StaticDynamicInference

Synthetic Type Inference in JavaScript

TypeScript is Microsoft’s Open Source solution to the dynamic nature of JavaScript. It served the job of making code safer and more maintainable, but a lot of people find it bulky and cumbersome to use. By enabling a new compiler flag in VS Code, you can get IntelliSense, static type information, and code completion for free. And the best part is, you can keep writing vanilla JavaScript!

 
To start, you can add a file called “jsconfig.json” to the root of your project. You’ll need to add some compiler options, and set “allowSyntheticDefaultImports” to true.

 
This allows the VSCode precompiler to get type information about your variables and functions, presenting you with handy information when you hover over a symbol.

 
You can get type information about primitives, or even more complex objects.

 
And your es6 class declarations too!

 
The synthetic type inference is smart and can…

Bidirectional Communication Between Directives and Controllers in Angular

In Angular, it’s very easy for a directive to call into a controller. Working in the other direction – that is, calling a directive function from the controller – is not quite as intuitive. In this blog post, I’ll show you an easy way for your controllers to call functions defined in your directives.
First, calling a controller function from a directive is straightforward. You simply define a “callback” function in the controller and pass it to the directive (using the ‘&’ symbol in the isolated scope definition). It’s then trivial for the directive to invoke the function, which calls into the controller. To put things in .NET terms, this is akin to a user control (the directive) raising an event, which the user control’s host (the controller) can handle.
For example, you may want your directive to call your controller when the…

WCF-WebHttp and custom JSON error messages

I’m currently working on a solution that exposes a BizTalk Orchestration as a RESTful webservice using WCF-WebHttp.  Upon successful processing of the message, the service returns binary data for the client to download.  However, if the processing fails, I wanted the service to return application/json data with an error message that would be suitable for consumers – I did not want Stack Traces or other internal details to be provided that could potentially be used by malicious consumers.  Further, I wanted to ensure this information was sent in the same session.
Initially, I created a schema with my sanitized error information, set the Fault Operation Message Message Type to that schema, and enabled “Include exception details in faults.”  While this did end up including my custom error message, it also included the extra information I was trying to avoid.  It also…

Sending Key Events to a WPF Web Browser (And Injecting Javascript)

Recently I had the need to send KeyDown events to the WPF WebBrowser and after many failed attempts I finally figured out a good (or at least a working) solution. It should be noted that this solution does not trigger browser key events but rather triggers javascript key events, such as those bound by addEventListener. The technique utilizes javascript injection, so it could also be used to call any existing javascript method.

Kendo UI Window IE8 Error

While working on my most recent project using the Kendo UI Library I came across the following error when trying to inject html from a partial view into a Kendo UI Window.
SCRIPT5007: Unable to get property ‘top’ of undefined or null reference kendo.all.min.js, line 26 character 30328
This error would only occur in IE8 and not IE10, Chrome, or Mozilla.

Visibility: hidden vs. Display: none

During a recent project I kept coming up against strange issues with layout. It was in a windows 8 store app, and therefore using some advanced CSS3 techniques, so I assumed I was just having issues with those. The DOM explorer is quite different from the web developer tools I am used to.  I came to realize though that during the course of development, some of our error messages were getting set with Javascript to visibility: hidden instead of display:none like I was expecting. This led to a conversation which revealed that there is some confusion about the two. Here I’ll point out the differences, just so we’re all on the same page. This concept is particularly confusing to developers who know jQuery, because jQuery uses .hide as a function to set things to display:none. When we’re writing in plain…

Use SP.SOD.executeFunc(a,b,c) to load the SharePoint JavaScript libraries when needed

A couple weeks ago, I was building a stock quote for a master page that required two images stored in /Style Library/Custom/; the images represented the typical stock quote arrows. In order to provide the JavaScript code with the correct location of the site collection’s root I was using the following directly in my code block:

var imgArrow = <asp:Literal runat=”server” Text=”<%$SPUrl:~sitecollection/

Style Library/Custom/images/stockup.png%>” />;

While I had originally thought this was a kludgey solution to begin with, it was getting the job done every single time.
However, a problem arose a few days after when I began refactoring the code. I had moved all of the js code from the master page itself into a separate js file, leaving only a static reference to the script on the master. The following code should be put within the ScriptManager control.

<asp:ScriptReference…

JavascriptHelper–Managing JS files for ASP.NET MVC

After working several years with the Castle Monorail MVC framework, I decided to try ASP.NET MVC to see if it had caught up to Monorail. The transition seemed to go rather smoothly, but one area where I was surprised to find how clumsily it was handled, was the management of JavaScript files. Basically, if some part of a page, say a helper or partial page, needed a particular JS file, you had one of two choices.
The first option is to have the part itself would write the script tag. This allows the part to operate as a “black box” – just drop it in and it works – But it means that there will be script tags loading file scattered throughout the page, and that the part needs to know your folder structure where you keep your JavaScript files. And…

Calling an ASP.Net web service using jQuery and JSON.

Let’s say you have a webpage where you need to call a service but cannot perform a post back.  Recently I was on a client engagement where we needed to improve page performance by dynamically loading a navigation tree with a potential for several thousand links.  We implemented a solution that would load each branch as the user clicked on the expanding icon by calling a web service via ajax and passing the required links back to the page and render them client side.  This saved immensely on the load time for the page and improved the user experience
This kind of solution can be applied to several situations such as complex data processing, dynamic loading, or combining them all into a seamless form submission process that would clear the form on post backs.
We can accomplish this process simply by grabbing…

\\\