webDU 2012

I was in Sydney earlier this week to speak at webDU. This year marked the 10th anniversary of this conference and I admit that I walked away impressed by the quality of the presentations that were delivered along with the professionalism of the organising staff.

Initially, I had planned to deliver a talk on responsive design. However, I was asked to cover for a missing speaker due to illness. My first talk entitled, “Make Awesome Web” covered a top 25 list of sites and tools I had curated on Make Awesome Web.

• Kendo UI
• Raphaël
• HTML5 Please
• CSS3 Please
• CSS3 Test
• 39 Ridiculous Things To Do With CSS3 Box Shadows
• Bootstrap, from Twitter
• HTML5 Boilerplate
• httpstat.us
• FitText
• OMG Text!
• Pretty Loaded
• BuiltWith
• HTML5 Progress Polyfill
• Bacon Ipsum
• PeopleMov.in
• NewZealand.com
• JS Bin
• Paper.js
• MicroJS
• PhoneGap
• CreateJS
• jsFiddle
• HTTP Archive
• The Noun Project
• Wheels of Steel
• Anatomy of a Mashup
• Mother-effing Text-Shadow
• Mother-effing HSL
• Mother-effing Animated GIF
• FOUT-B-Gone

This talk went very well. In retrospect, I probably should have given the presentation a better title. Something like “Johnny’s Crazy-Ass Brain-Dump of Awesome Sites and Tools” would have been much more appropriate.

Later in the night, I was a panelist in a BOF entitled, Building Native Apps with Web Frameworks, which featured a lively discussion about building applications for mobile devices with web development technologies. Of course, I spoke at-length about how we (at Telerik) approach this problem with Kendo UI. Our view is that many developers and companies want to build applications that look and feel native without having to resort to differing frameworks and unfamiliar languages. During our discussion, I made the point that of all the viable mobile platforms in existence (and soon-to-be-in existence), the Metro UX metaphor presented by Microsoft is the one that certainly disrupts the in-and-out push-button experience you see across iOS, Android, and Blackberry today. This certainly got a few questions raised. Of course, the reality is somewhat interesting this days with Apple and Google owning a great deal of developer and consumer mindshare in this space. Nevertheless, it’s one that a lot of folks are watching with great interest.

As I stated earlier, I had planned to deliver a talk on responsive design on the following day of the conference. Unfortunately, my son back in Melbourne was very sick and I received word from my wife that I needed to come home immediately. I was (therefore) unable to deliver my talk but I suppose that’s life as a parent.

On a side note, I was great to meet a number of the speakers and attendees at webDU. I was quite impressed by the level of expertise and experience at this conference. I truly hope to be invited back to speak next year and I look forward to seeing the list of talks on-offer at that time.

Kendo UI v1.0 Released!

Earlier today, we took the wraps off Kendo UI, a framework for creating interactive web applications with modern web standards. My colleague, Todd Anglin wrote about today’s release in a blog post where he highlights what’s new in Kendo UI, the breakdown of products (Kendo UI Web, Kendo UI DataViz, and Kendo UI Mobile – currently, a preview), and the official licensing that underpins it. The good news? Existing customers will have access to Kendo UI Web in both the Telerik Premium and Ultimate Collections.

There’s a lot to like in the v1.0 release. In addition to some of the new UI widgets, we’ve added an integrated ability to modify themes. We call this the ThemeBuilder.

The ThemeBuilder is a tool that lets you modify the Kendo themes with ease, so that they match the look and feel of your site or app. Through a series of mouse clicks, you can quickly customize the look and feel of the Kendo UI widgets. Once you’re done, the ThemeBuilder will generate LESS or CSS text, which you can then integrate into your web application.

It’s pretty freaking sweet.

We’ve also introduced two new aspects of the Kendo UI framework: globalization and validation.

Globalization is the process of designing and developing an application that works in multiple cultures. The culture defines specific information for the number formats, week and month names, date and time formats, etc. Kendo UI exposes the culture(cultureName) method, which allows you to select the culture script corresponding to the “culture name”. This method then uses the culture name to select culture from the culture scripts that you have included and then sets the current culture. You can check out a live demo of this in-action by visiting the Kendo UI demos.

The Validator in Kendo UI provides an easy mechanism of client-side validation to web developers. Built around the HTML5 form validation attributes, the Validator supports a variety of built-in validation rules, but also provides a convenient way for setting custom rules handling. A live demo of the Validator can be seen on the Kendo UI demos page.

There’s certainly a lot more to cover. Fortunately, we’ll be hosting a webinar that provides you with everything you need to know about Kendo UI to help you get started. Simply register, attend, and you’ll hear everything you need to know about building awesome web experiences with Kendo UI.

In the meantime, make sure to follow Kendo UI on Twitter, Facebook or Google+. Also, don’t forget to check out our forums. They’re a great way to provide feedback to the team.

Conditional Breakpoints in Internet Explorer F12 Developer Tools

Just a quick tip for folks using the F12 Developer Tools in Internet Explorer: You can specify conditional breakpoints in Breakpoints window.

Conditional breakpoints are useful because they will halt execution of the debugger when a condition is met. This can be optimal when dealing with situations where you don’t want to break each and every time a breakpoint is encountered. For example, if I’m only interested in halting execution within a for loop an evenly-divisible index, I can specify the following criteria by simply right-clicking a breakpoint and selecting “Condition…” in the dialog window that appears:

Setting a condition in this manner will visually update the breakpoint listed in the F12 Developer Tools. Breakpoints with conditions are indicated with the following icon:

For what it’s worth, you can also disable breakpoints just as easily. Simply right-click a breakpoint in the code window and select “Disable breakpoint”. Disabled breakpoints are indicated with the following icon:

Here’s what it might look like in the Breakpoints section of the F12 Developer Tools:

Hopefully, this will help you out when debugging script in the F12 Developer Tools of Internet Explorer.

Adding the Awesomesauce Flavor with IE9 Pinned Sites

Last week at MIX11, I delivered a mini-session presentation on pinned sites, covering both the technical and non-technical aspects of this ability in IE9. The purpose of this talk was three-fold: (1) educate folks on what IE9 pinned sites are and how they work; (2) show folks how easy it is to pin sites via meta tags and JavaScript APIs we provide in IE9; and (3) encourage folks to start pinning their sites today. Additionally, I wanted to share some of the data some of our partners have collected around their implementations. As it turns out, many sites are seeing very real benefits to implementing this feature. Overall, these partners are seeing that visitors who use IE9 are coming back to their sites more frequently and for longer periods of time.

Here’s a recording of my mini-session delivered at MIX11:

Here’s the slides from my presentation:

Adding the Awesomesauce Flavor with IE9 Pinned Sites

View more presentations from John Bristowe

Lots of great reasons to implement IE9 pinned sites. They’re great because they’re easy to implement, they don’t break the web, and they can deliver meaningful returns on your short investiment of time to incorporate them into your existing sites.

Outlining Elements with IE9 F12 Developer Tools

One feature of the F12 Developer Tools in IE9 that I like is its ability to outline elements on a page. You’ll find this option under the Tools menu (or Ctrl+O):

When selected, you’ll be presented with the following window:

Here, you can specify CSS selector expressions for the purpose of outlining elements on a page. Let’s say I’m reviewing the following page:

Let’s say I want to highlight all the DIV elements on my page. In the Outline Elements window, I specify the following:

Once applied, IE9 outlines all the elements that match this criteria:

Let’s take this a step further. I mentioned that this outlining capability is based on a selector, so we can specify some more power expressions that leverage pattern matching. For example, I’ll specify the universal selector and update:

As a result of this action, all elements are now outlined:

Let’s change this again. Here, I’ll have the F12 Developer Tools outline IMG elements that are child elements of any DIVs on this page:

Now I can get a better understanding – visually-speaking – of how my page is structured:

Nice!