HTML5 Archives - Falafel Software Blog

Is an 80 Character Code Line Length Still Relevant?

By | C#, CSS, JavaScript, TypeScript, Visual Studio | No Comments

If you’ve spent any time reading about coding standards on the internet, you’ve probably come across the suggestion to limit lines of code to 80 characters and wondered if it’s still relevant today. The advise to limit lines to 80 characters is often connected to the historical limit of 80 characters in terminal windows. But what if your team is not subject to this constraint? Are there still any benefits to adopting this limitation? I tried living with it for a while and here are my takeaways. Growing pains Indentation When I first set out to try this style out,…

Read More

Kendo UI Customization with CSS

By | CSS, HTML5, Kendo UI | One Comment

I’ve been using Kendo UI for many years now and I continue to be impressed with the many ways it can be extended and customized. Recently, I had a client request a Kendo Grid customization that at first glance seemed like it might require some code changes, but in the end, it could all be done purely with CSS. Here is the scenario as a CSS customization example: by default, the Kendo Grid shows the sort icon immediately after the header text and when using the column menu with a filter applied, it highlights the border around the column menu…

Read More

Loading Components on Demand – An Introduction to Angular 2

By | Angular 2, Google, HTML5, JavaScript, Microsoft, News, Web | One Comment

This is post 11 of 11 in the series “An Introduction to Angular 2” Background Components are the building blocks of any Angular 2 application. We usually create our components and then define where and how they are included. A component is loaded using either an HTML tag (following the component’s selector) or by using a router outlet if we have routing in place (You can read more about Routing in a previous post). In many cases, we find ourselves needing to load components dynamically (on demand) by following a certain criteria or state that is not represented by route. Cases when we don’t…

Read More

Working with HTTP – An Introduction to Angular 2

By | Angular 2, HTML5, JavaScript, Microsoft, News, Web | No Comments

This is post 9 of 11 in the series “An Introduction to Angular 2” In a previous article, we discussed RxJs and how we can use it with Angular2. In this post, we will take a closer look at HTTP and some of the key differences in using HTTP with Angular 2 vs Angular 1. Background jQuery came up with a very intuitive way of dealing with HTTP requests (XMLHttpRequest (XHR) and JSONP). It introduced a $.ajax() method which takes a request configuration and returns a promise. Many JavaScript frameworks followed the path of jQuery and Angular 1 was no different. While similar…

Read More

Language Options – An Introduction to Angular2

By | Angular 2, CSS, HTML5, JavaScript, Microsoft, News, Web | One Comment

This is post 2 of 11 in the series “An Introduction to Angular 2” Before you start developing an Angular2 application, there are a few selections that you have to make. One of those choices is the programming language that you want to use with Angular2. While Angular2 is a JavaScript framework at heart, there are nevertheless, a few options to choose from. In this column, we are going to look at the options and examine the differences in syntax, to help you make that choice. Background The JavaScript language specification standard is called ECMAScript, or ES.ECMAScript is standardized by the ECMA International standards organization and…

Read More

Kendo Grid Multi-Level Headers

By | HTML5, Kendo UI | No Comments

One thing I really like about using Kendo UI is the frequency of updates and the number of new or improved features in each release. I don’t always have the time to read all of the release notes, so it is a nice surprise when I discover something I didn’t know about. This isn’t a brand-new feature, but a new discovery for me this week has been multi-column headers. I remember having the requirement a few years ago to build a grid with group headers that spanned more than one column. It was certainly possible, but it took more templating…

Read More

Ionic and Material Design, what’s the story?

By | Android, AngularJS, Cordova, CSS, HTML5, Ionic, iOS, JavaScript, Mobile, News | 4 Comments

Ionic is considered one of the most advanced HTML5 Mobile App Development Framework for building hybrid mobile applications. Ionic Apps are based on AngularJS and Cordova, and the framework’s components allow developers to create great looking mobile apps that could match their native counterparts. While Ionic equally supports iOS and Android, the development experience (and issues) slightly diverge between the two platforms. In this article, we are going to focus on Ionic and Material Design. Background Ionic 1.0 was released in May 2015. Since its inception, the platform incorporated the concept of Platform Continuity which translates into Platform-specific styles. This means that developers focus on building beautiful apps which…

Read More

Using Azure DocumentDB with Cordova Tools in Visual Studio (or any JS client)

By | ASP.NET, Azure, Cordova, HTML5, iOS, JavaScript, Microsoft, Mobile, Multi-Device, News, node.js, Tools, Visual Studio, Web | 4 Comments

Abstract A few weeks ago, I set on a mission to learn more about Azure DocumentDB. My end goal was to use Azure DocumentDB with a JavaScript client application specifically with a Cordova app built with the new Tools for Apache Cordova or TACO which the team introduced a while ago. Background In April 2015, Microsoft officially released DocumentDB, its cloud, document oriented, NoSQL database (It was in preview since 2014). Azure DocumentDB, a new player in the NoSQL market, is built to work within the Azure Cloud ecosystem much like SQL Azure, SQL Storage, Azure search, etc. You would use DocumentDB…

Read More

Using Application Insights with Cordova Apps in Visual Studio

By | Azure, Cordova, CSS, Fun, HTML5, iOS, JavaScript, Mobile, News, Tools, Visual Studio | 3 Comments

Abstract When developing a mobile application, native or hybrid, we require a certain way to monitor and track different activities and events in the application. Developers need to detect issues, solve problems and continuously improve the application code. Marketers, on the other hand, want different kind of metrics. For instance, they want to know how many people are using the application on a daily basis, what features they are using and how they are interacting with the application. Background Application Insights is a set of services that provide actionable insight into a production application. It monitors your application to detect issues,…

Read More

The Hazards of Shared Kendo DataSources

By | HTML5, JavaScript, Kendo UI, News | One Comment

Kendo DataSources are a foundational component of many of Kendo’s widgets and indeed of many data-driven applications. The Kendo docs point out that they are shareable, but their example only shares them among different widgets. Sharing them among multiple observable ViewModels, however, is fraught with pitfalls, many of which I have recently felt the displeasure of stumbling into. As usual, diagnosing the problem led to some interesting insights on how Kendo bindings work, so let’s take a look together. Initial Setup In this first JSBin, I’ve configured a DataSource and then used it in a ViewModel which is then bound…

Read More

Sitefinity Asynchronous Search with WebAPI

By | .NET, ASP.NET, C#, Fun, HTML5, JavaScript, Kendo UI, Sitefinity, Telerik, Web, Web API | One Comment

Overview Sitefinity CMS features a powerful internal Search Engine that allows your site visitors to search your content and find what they are looking for. The Search Engine is built on top of the .NET port of the infamous Lunene Engine which powers an unlimited number of websites today. Unlike the solid Search Engine behind it, the Search Widget which Sitefinity offers is not as mature. It provides the options to set up a basic search page and returns the results in a form of a list. Perhaps that will be satisfactory in most cases, but what if your requirements exceed…

Read More

Custom Skin for Kendo UI DataViz Components

By | Fun, HTML5, JavaScript, Kendo UI, Mobile, MVVM, News, SPA, Web | One Comment

Kendo UI DataViz is a collection of components targeting data visualization such as charts, gauges and diagrams. These elements are indispensable in any application that deals with data aggregation and data presentation. When you develop an application, it is seldom that you are satisfied with the default theme (or the other themes) that Kendo UI offers because oftentimes you need to make your application look and behave like the original mockups that the designers put together. Just like other popular presentation frameworks, Kendo UI offers a Theme Builder that allows you to create your “unique” and custom theme. With a bit of…

Read More

Falafel Partners with New Venture Software to Provide Additional Custom Development Support

By | .NET, MVC, News | No Comments

Falafel is very happy to announce that we have formalized a partnership with New Venture Software, a boutique custom software development and consulting company. The partnership between Falafel and New Venture Software is built on a long history that started back in 2006. Moving forward, we are now able to extend our capabilities around .NET, MVC, WPF, HTML5, iOS development Objective C and Swift as we work side-by-side on select customer projects as needed.

Read More
Google Polymer and Web Components

Creating Web Components with Google Polymer

By | JavaScript | 3 Comments

Google Polymer is more than just a polyfill for Web Components. It has an ambitious agenda for pushing the Web Components specifications forward and lead the web development community in that area. In this post, we will explore what Google Polymer has to offer: polyfills, a framework, and pre-built elements. Although the polyfills portion will go away once browsers catch up to the Web Components spec, what is left behind is an interesting framework and suite of components.

Read More

Chrome Developer Tools: FalafelCON Notes and Resources

By | FalafelCON, Web | One Comment

FalafelCON 2014 was an excellent weekend and it was fun presenting on Chrome Developer Tools and walking through all the ways DevTools allows you to inspect, debug, and tune your web sites. If you attended the talk, you know that we spent all of our time in Dev Tools with very few slides, but here is the outline and notes for the talk along with resources that you can use to review all the topics and steps we covered: The Web Developers Toolbox – Chrome Dev Tools Outline

Read More

Multi-Device Hybrid Apps… Custom Plugins

By | .NET, iOS, JavaScript, Microsoft, Mobile, Multi-Device, News, Tools | 8 Comments

Abstract If you are starting a project and ready to add a few Cordova API plugins, you have many choices to choose from. If you’ve tried to add a custom plugin to your Multi-Device Hybrid app, you might have noticed there is no easy way to do that. In this post I will show you how that can be done. Background Cordova has moved into a modular design starting with version 3. For example, to call the device.version API, you need to include the Device plugin into your project. It also supports two different ways to add and remove plugins, depending…

Read More

Running Cordova Multi-Device Hybrid App from Visual Studio On an iOS Device

By | .NET, C#, iOS, JavaScript, Kendo UI, Microsoft, Mobile, Multi-Device, News | 4 Comments

Abstract In a previous post we looked at how we can build and deploy a Multi-Device Hybrid App from Visual Studio to an Android device. It was a fairly simple process and within a few minutes we managed to get the app running on the device. If you’ve done any cross-platform development before, you would agree that building and deploying an app to an iOS device is not trivial. If you are an avid Windows user like me, it gets more intriguing. In this column, we will examine the different challenges and how we can build the app and deploy it…

Read More

Multi-Device Hybrid Apps… Where are the iOS and Windows Simulators?

By | .NET, C#, iOS, JavaScript, Kendo UI, Microsoft, Mobile | 2 Comments

In a previous post we have discussed how we can build and run the multi-device hybrid apps in a simulator for Android and we also demonstrated how we can build and deploy the application to a physical device. If you’ve recently upgraded your Visual Studio 2013 to Update 2, you might have noticed that there is no way for you to simulate the application in iOS whether in an iPad or an iPhone. The current version of Cordova tooling in Visual Studio claims to support multiple platforms which is a fact. In this column I will show you how you can add…

Read More

HTTP GET array param to ASP.NET MVC with Kendo DataSource

By | .NET, ASP.NET, JavaScript, Kendo UI, MVC | No Comments

This post is inspired by a recent conversation with one of my colleagues here. He had the following requirements: ASP.NET MVC controller (not Web API) Kendo DataSource reading with HTTP GET Controller action accepts a list of values So, something like this:

This is an awkward little corner case. Change any one of the requirements and everything will work just fine. Fresh out of the box, Web API understands sending multiple values in the query string (at least, with the right controller action method signature). MVC controllers understand arrays if they’re posted in the body of the request,…

Read More