Skip to main content

Posts

Showing posts with the label HTML5

My first book titled 'Kendo UI Mobile' is here!!

The title says it all. I had posted a couple of entries on Kendo UI earlier and was approached by Packt publishing to write on 'Kendo UI Mobile'. Writing a book was both a personal and a professional goal that I had set for myself. Today I have realized it and I feel accomplished. For almost everyone, first things are very special. Be it their first job, paycheck, girlfriend\boyfriend, marriage, first kid and anything that happens for the first time in their life. This is my baby and I'm going to celebrate my win today. If you are planning to build a mobile website or an app using Kendo UI Mobile, this book should get you up and running. Here's the link to the page, from where you can learn about the book and buy it - http://www.packtpub.com/kendo-user-interface-mobile/book

Para - Para - Parallax

I was listening to ColdPlay while developing a Parallax scrolling application and hence the title. Anyway, I was very much intrigued by the parallax scrolling model and wanted to try my hand on building one. The idea here was to show images of different transparency levels in such a way that when the user scrolls, one image would blend over the previous one. Take a look at the application here .

WebRTC experiment - Recognizing hand gestures

I have created a web application that recognizes hand gestures using WebRTC's getUserMedia API. Here's how it works: when you launch the application the browser will prompt you for the permission to access the camera. Click on 'Accept',and then swipe your hand from right to left and vice versa. You would see that the next image  (or the previous image if you swipe from left to right) in the gallery slides through. You can access the application here . Please note, I have tested this application on Chrome only and not on other browsers. Also, I have used five images in this demo and it is obvious that no image would be shown if you swipe from right to left when the last image is being shown or when you swipe from left to right when the first image is shown. I have codenamed this application as 'Gesto' and hence the name in the URL of the application.

CSS FlexBox layout

Today I was trying to understand the FlexBox layout introduced in CSS and was impressed with what a few CSS properties can do to help you solve layout issues. The standard itself has gone through some iterations, but I believe the current one is stabilised and is not likely change completely. Anyway, the layout proposed here helps you align the elements in the DOM tree horizontally and vertically. It also helps you reorder these elements.

Uploading chunks of a large file using XHR2

I was having a conversation with my college friend about the enhancements in XHR2 and I was showing him how one can  upload a file to the server using plain Ajax . He asked me whether I can upload a large file to the server such as a video file. I tried doing that but was bumped when the server reported with 400 error telling me that the 'POST size has exceeded maximum limit'. This got me thinking whether I can upload chunks of a large file to the server. I referred to the FileSystem API and came across the slice method that allows you to get a fragment of a file.

Using Source binding and templates in KendoUI

Yesterday I explored the MVVM design pattern in Kendo UI that allows the model data to be separated from the view. Also, whenever data in one of them changes it is reflected in the other. Today I was exploring various data bindings that can be used and one that caught my attention was the source binding. The source binding allows you to set the HTML content of the target element by rendering a Kendo template with a View-Model value. For example, say you have a combo box (select tag) and you want to populate it with data (option tags), then instead of writing several option tags you can define a template and provide source binding for the same. This will show a list of options from the ViewModel.

Using Model-View ViewModel design pattern in Kendo UI

Kendo UI is completely new to me and I got introduced to it when Brandon Satrom left Microsoft and joined the Kendo UI team. I had interacted with him when I was working on jQuery ‘Pinify’ plugin . Kendo UI is a HTML5, jQuery based framework for building both web and mobile applications. It not only provides a set of UI widgets and other data visualization components but also a framework for data binding, animation and drag-and-drop. Whilst I was looking into the framework I stumbled upon the Mode-View ViewModel (MVVM) design pattern built into it.

CSS media queries in JavaScript

I like the media queries feature added to CSS 3, that allows web application developers or designers to define styling sheets for a range of output devices. A media query consists of a media type and one or more expressions that limits the style sheet scope. I was wondering if JavaScript can be used to update the elements in page, say changing the source attribute of an image based on the device width. Turns out there is a function matchMedia which accepts a media query string as input and returns the result.

Using HTML5's FullScreen API

I've been looking into ways in which a web application can be made more user friendly and HTML5 does include some powerful features such as PageVisibility, Navigation Timing, etc,. that can be used to provide good user experience. Today I was looking into FullScreen API that allows you show any of the elements in the DOM in Full-Screen mode. Suppose you have a HTML5 video embedded in a page and would like to play that video in full-screen mode then it is now possible with the FullScreen API. Similarly say if you have an image element, it can also be shown in full screen mode.

Pushing HTML5 Video content over ColdFusion WebSockets

I’ve been playing with the WebSocket feature introduced in ColdFusion 10 for some time now. I was trying out pushing images over a ColdFusion WebSocket channel and it worked just fine. But this time I wanted to put WebSockets to test and wanted to push large data at regular intervals. I thought maybe I can push video data over WebSockets and it turned out that there is no direct way to stream video data to many clients. I came across the function - drawImage that can be used to draw an Image or Video on a HTML5 Canvas. Once an image is drawn on the Canvas, it’s base64 encoded data can be obtained by calling the toDataURL function on the Canvas object.  This data can then be transferred over a ColdFusion WebSocket to all subscribers who can then use this  data to draw the image(video frame) on a Canvas.

Content flow in CSS3 regions

Today I was reading about CSS3 and I stumbled upon CSS3 regions . I was completely flabbergasted with what I saw and learnt today. Imagine that you’re trying to build a website for a magazine containing multiple columns (say 3). It would be arduous to fix the textual content on a particular column and then move the rest of the text to other columns. Now with Content Flow mechanism, the extra content can be moved to other columns in the layout with ease. There are just a couple of properties that you need to define in the styling sheet and you’re done. But this is not it. When you resize the browser window, the content automatically flows to other regions depending on the browser size.

ColdFusion 10: Using filterCriteria in WebSockets for subscribing and publishing

Yesterday Ben Nadel asked me a question on Twitter, on using filterCriteria when publishing a message on a web socket channel from server side. The method ‘wspublish’ allows you to perform a server side push to a client who has subscribed to a channel. It takes three parameters – channelName, message and filterCriteria. I always assumed that the values present in subscriberInfo and publisherInfo can be compared in Channel Listener functions (canSendMessage, beforePublish etc) before the message can be received by the client. Although this technique is available, what I found after having a discussion with a fellow developer ( Awdhesh ), is that I can specify simple conditions when subscribing or publishing.

WebSocket authentication in ColdFusion 10

I was looking into ways in which users can be authenticated before they start to receive or send messages over a WebSocket channel in ColdFusion. I found that there are two ways in which this can be done. The first approach is to call the ' authenticate'  method on the socket object. The other way is to use cflogin to authenticate the user. The authentication level can be taken a step further in various channel listener functions. By implementing these listener functions, some sort business logic can be devised wherein the logged in user with certain credentials can be allowed to subscribe or publish to a channel.

HTML5 WebSockets in ColdFusion 10 - Workflow diagram

The HTML5 Web Sockets represent the next evolution of web communications. A WebSocket is a full duplex, bidirectional communication channel that operates over a single TCP socket. It has become a standard for building real time web applications. In ColdFusion 10, a messaging layer has been provided that implements the Web Socket protocol. It enables you to build applications that are based on publisher/subscriber model and applications that are based on subscriber model wherein a push from a server is possible.

ColdFusion 10: Geo-location on a Google map created with CFMAP tag

In ColdFusion 10, you can now show the users location on a Google map created with the CFMAP tag. The CFMAP and CFMAPITEM tags now have a boolean attribute showuser . When set to true the browser would ask for the users permission and then display users geo-location on the map. This is now supported in most of the modern browsers. In cases where the browser doesn’t support Geo-location API then the values provided in centeraddress or centerlatitude\centerlongitude attributes will be used to add a marker in the Google map.

Now Showing - ColdFusion Zeus

After more than 20 months of research, planning, development and keeping  you all in suspense about the next version of ColdFusion, code named  Zeus; I'm finally proud to announce the release of the public beta version of none else than ColdFusion Zeus. You are free to download it here and report bugs here . This release comes with tonnes of new features and enhancements. It not only focuses on HTML5 features but also provides rich features such as RESTful WebServices, Closures, Java Integration, Security enhancements and many more. I wanted to create a picture that depicted all the new features in ColdFusion 10, like I did when public beta of  CFBuilder 2 was released. But I couldn't since its a massive release and capturing everything in one single picture was not possible at all. However, I managed to create an app (like a movie clip) and hence the title 'Now Showing - ColdFusion Zeus'. You can access the app here . Click on the chapters and learn what's

Using HTML5's Navigation Timing API to measure Page Load speed

To measure the time taken for a page to load one can use the Date object in the head section and calculate the time taken for the page to load in window.onload function. However, it calculates the time taken for the page to load after the first bit of JavaScript in the head is executed. This doesn't indicate the time taken by the web server to serve the requested page. The Navigation Timing API introduced in HTML5 provides data that can be used to measure the performance of a website. The API provides a PerformanceTiming interface which contains several attributes that can be used to get end-to-end latency data.

Using HTML5's PageVisibility API

Today I stumbled upon the PageVisibility API introduced in HTML5, which gives developers an opportunity to improve the performance of a web page and to better the user experience. Whenever a user opens a new tab or navigates to another tab, the behavior of the current page from which user navigated can be controlled using this API. Consider a webmail client that is trying to look for new mails every two seconds, if a user opens a new tab or minimizes the browser window then retrieving mails every two seconds would expend resources, whilst the user is not actively viewing the page. Here the PageVisibilty API would come handy and would allow developers to alter the behavior of the web page.

Building resposive Web applications with HTML5 Web Workers

One of the key aspects of building web applications that deliver great user experience is to build applications that are highly responsive. Browser vendors are trying to improve the speed of their JavaScript engines and are enabling the web applications to perform well. Since JavaScript was introduced, there has been no way to execute the code outside of the browser UI thread i.e. it has remained single threaded. The Web Workers API introduced in HTML5 enables web applications to run scripts in the background, independent of the UI thread. The performance of a web application can be greatly improved by using Web Workers since each worker would spawn its own thread. These threads can be used to perform computationally intensive tasks in the background without affecting the performance of the entire application.

An odd behavior with localStorage events in HTML5

Today I was looking into web storage (localStorage) feature introduced in HTML5. Most of the modern browsers provide means through which key/value pairs can be securely stored and retrieved for later use. Browser cookies can indeed be used for the storage of persistent data but are limited in capacity. Also with cookies, the data is transmitted in every HTTP request thereby making the web applications run slow. Unlike cookies, in local storage there is no limit on the size of the data and it is never transmitted to the web server unless an attempt is made to send it manually. Whenever the data in the storage area changes a ' storage ' event is fired. This event is fired whenever the methods setItem(), removeItem(), or clear() are called on the localStorage object. However, when I tried to use these methods to update the localStorage area, the storage event never fired: The methods setItem and clear did change the storage area and I confirmed this by referring to the resour