HTML5 Archives - Falafel Software Blog

Is an 80 Character Code Line Length Still Relevant?

By | C#, CSS, JavaScript, TypeScript, Visual Studio | One Comment

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

Working with HTTP – An Introduction to Angular 2

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

This is post 8 of 9 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

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

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

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

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

Encapsulating HTML with Shadow DOM

By | Web | No Comments

Encapsulation is a very welcomed feature for HTML. This has been made possible with the introduction of Shadow DOM. Conflicts will be reduced tremendously and 3rd party libraries will play nicely with each other. In this post, I would like to focus on Shadow DOM and what it can do.

Read More

Best Adobe Brackets IDE Extensions

By | Web | 7 Comments

I’m a big fan of Sublime Text, but the project has become stagnant and fragmented when version 3 was introduced. Its neglect and lack of vision for version 3 stunted its potential. However, the upside is that this forced web developers to pay attention to other, more modern IDE’s, such Atom and Brackets. Brackets has been around for awhile. It is open source, backed by Adobe, and has an active community. The great thing about these modern IDE’s is that they are light and geared towards web development. Things like live HTML development and JavaScript debugging are built right in. Brackets is built…

Read More

Behold, the Kendo Checkbox

By | JavaScript, Kendo UI | One Comment

Telerik’s Kendo UI offers an extensive collection of UI widgets for your HTML5 applications. One widget that seems to be missing is a Kendo Checkbox. Technically, we don’t really need one because we can use Kendo’s MVVM binding on any HTML element, including inputs with type=”checkbox” so we can bind the enabled, checked, and label values. But there is certainly a place for a checkbox widget that is styled the same and offers the ease of Kendo’s declarative initialization. We are going to use a combination of Kendo’s Widget.extend() and CSS to create a custom Kendo Checkbox that has a custom look to match our application.

Read More

Geolocation Tracking in Kendo UI Mobile and Google Maps

By | Kendo UI | One Comment

There are many posts out there about getting the current geolocation of a user via HTML5. However, in this post, I would like to show you how you can track a user’s geolocation. After all, what good is getting the current location of a user if they are mobile and on the move?? So here we go… Geolocation API The geolocation API is exposed in JavaScript using the navigator object. It is supported on all mobile devices running HTML5 browsers, which is almost all of them now. This means you can comfortably use it and even have a fallback if needed:…

Read More

Dude, Where’s My Data? Kendo, DataSources, Wrapping, and You.

By | News | 3 Comments

When working with Kendo DataSources, it is very easy to accidentally disconnect your original data from the data in the DataSource. Understanding the causes will let you prevent this from happening and keep all references to your data pointing to the same place. Observable Wrapping Example 1

This example illustrates a classic case of disconnected data. After binding the grid to the data variable, changes to the data variable are not reflected in the grid. The reason for this is that DataSources wrap their data in an ObservableArray of ObservableObjects. These two classes allow bindings to be aware of…

Read More