Yesterday, I had an interview on JavaScript. As a React developer, I do not have practical experience with these questions. But, the interview questions are interesting to know.
What is the value of this in global scope? I have not really tried it before. I gave an answer. Maybe, it points to the window object. It turns out to be correct.…
The article explains how to serve a Webpack bundle from a Koa server. Webpack is used for preparing client bundles composed of JavaScript, styles and assets. Koa is a node server, very similar to express. The article shows how to use webpack-dev-middleware in Koa request processing pipeline with the help of koa2-connect package.
The webpack-dev-middleware package provides the client bundle over a server endpoint.…
Meteor is a JavaScript framework built on top of NodeJS to create web applications and mobile apps based on Cordova. Bootstrap is a popular stylesheet theme maintained by core developers from Twitter. This article explains how to customise Bootstrap within a Meteor application.
Bootstrap styles are written in Less. Less is similar to SASS. It allows to reuse variables and styles.…
FancyBox is a jQuery plugin which is used to open text, photos, etc as a modal dialog. The post explains how to integrate it with an ASP.NET MVC application.
The plugin is available as a Nuget package. The Nuget package has a stylesheet, images and sprites in the Content folder and javascript in the Scripts folder.
Include the styles and scripts.…
AngularJS allows to define async functions. An example is the $http service. HTTP service calls an API and returns a response as a promise.
$http.get(url)
.then(function(res){
// handle the response
}, function(res){
// handle the error
});
Retrieve the result from the Promise object using then function. The function has two arguments: onSuccess callback and onFailure callback.
The $q service in AngularJS creates a promise using the defer function.…
Google Maps Javascript API is very easy to use. In this article, we display a map with location markers.
Get an API Key for Google Maps. Use the API Key in the script tag.
<script src="https://maps.googleapis.com/maps/api/js?key=AIz.....zvT9Y"> </script>
Create a map object with few options. Map options include an initial zoom and center location. Specify location using LatLng object having latitude and longitude.…
Knockout provides an elegant way of updating the user interface using Javascript View models. Javascript has an inheritance model. With that, we can create a hierarchy of classes. Consider the following HTML with Knockout bindings.
<div id="main">
<div data-bind="text: name"></div>
<div data-bind="text: detail"></div>
</div>
We use a simple Model class. Load it with data. And bind it to the HTML.
var model = new Model(); model.load();…
Knockout is a UI framework for building single page apps. In Knockout, observable and observableArray are two basic functions. Observable enables two-way binding between the UI and the data in View Model.
ObservableArray stores a collection of View Models. When a View Model is added or removed from the array, the bindings are re-evaluated. And the UI is re-rendered. Most of the array operations are supported.…
Knockout.js is a good framework for building single page applications. But, it has a few drawbacks. But before going over the drawbacks, we will discuss the problem that it solves.
With Knockout.js, we create a View Model. Then bind the View Model to the HTML elements. Whenever the data within the View Model changes, the framework updates the view or HTML elements.…
I have posted earlier on moving items from one ListBox to another. We use jQuery to do that. Listbox posts only the selected values to the server. In our case, we are not making any selections. But rather moving the Listbox options. We need a way for the server to know that the options have changed. So, I have come up with a solution in this post.…