Strategies for loading scripts in your HTML page

As developers we know that loading scripts makes our page render slowly. The problem with scripts is that they can call document.write(), which will potentially modify the DOM. That is why browsers must fetch the script and execute it right away, while the rest waits. One technique to cope with that is to move all your scripts to the end of your <body>. By doing this you let the browser render the entire HTML page along with the CSS styles first and then execute the scripts. This is only possible, of course, if your scripts do not make any changes to the DOM by calling document.write().

Continue Reading…

ISTA 2014

ISTA 2014I had the chance to speak at one of biggest IT conferences in Bulgaria – ISTA. It is an annual conference devoted to innovation in software development and test automation. It gathers people from different parts of the world, both speakers and attendees, and gives them inspiration about the best development and test techniques. I am very glad I had the opportunity to participate as a speaker for the first time this year, because I had amazing experience. Continue Reading…

Beware of nested scopes in AngularJS

AngularJS uses scopes as a glue between the view (i.e. the HTML page) and the controller. A scope is nothing more but a simple JavaScript object, where you can set different properties on. When the logic in your controller is executed, you can inject the scope and set properties to it. Afterwards, the corresponding view will be able to bind these properties to its HTML elements. However, when one uses scopes to bind data to form elements (f.x., text boxes), there can be some unexpected issues that I will try to explain in the following post.
Continue Reading…

Bundling AngularJS HTML pages with ASP.NET

image_6Bundling and minification are two well-known techniques used to improve the load time of your website. These are especially important for sites that use extensively JavaScript to offer better user experience. There are plenty of tools to help you do bundling and minification of JavaScript and CSS files. If you are a .NET developer you are probably very used to live inside Visual Studio and expect it to offer you everything you might think of. In ASP.NET 4.5 you can use a bundling API to define how your files will be grouped and sent to the client. The following example demonstrates the usage of this API.

Then in your page (either an ASP.NET page or a MVC view) you would invoke the rendering of these bundles by calling Scripts.Render(“~/bundles/jquery”) and Styles.Render(“~/bundles/css”). Continue Reading…

From XMLHttpRequest to promises

Promises made, promises keptOnce upon a time there was XMLHttpRequest. It was firstly invented by Microsoft, but very quickly became popular and other big companies like Google and Mozilla also adopted it. Now it is a W3C standard and all (relatively new) browsers support it. The idea behind XMLHttpRequest is to do a request to a server without doing a full page load. This can enable small portions of the HTML page to be updated dynamically and lead to better user experience. Furthermore, the term AJAX appeared, which stands for Asynchronous JavaScript and XML (note, there are some discussions whether the X stands for XML or XMLHttpRequest, but this is outside the scope of this post). Although AJAX was initially meant for XML communication, it can be used for other data types, f.x. JSON). Continue Reading…