Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Posts Tagged "JavaScript"


Synthetic Type Inference in JavaScript

Aesa Kamar

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

Lenni Lobel

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

Dan Field

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)

Jordan Piscitelli

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

Nick Rubino

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

Karissa Wingate

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

Patrick Kelly

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.


JavascriptHelper–Managing JS files for ASP.NET MVC

James Curran

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.

Karl Schwirz

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…

Mobile Site Development becoming as important as Desktop.

Karl Schwirz

In recent years, the boom in mobile devices has caused more and more users to abandon their desktop internet browsers and opt for the ones sitting in their pocket. As a result, nearly 10% of 2011’s internet traffic was attributed to mobile device browsers. As more people are browsing the internet in this manner, it is important that currently standing websites, as well as newly developed ones, also include mobile friendly pages in their site.
Many companies have followed models put forth by sites such as www.amazon.com, with their widely known desktop interface for purchasing products. When the mobile markets started to pick up they developed a mobile site that operates in much the same way, but offers a friendlier user experience for those viewing it on a smartphone screen. This move to a mobile intuitive platform can generate an increase…