Happy Thursday to all you XAML-lovers out there! I'm back from the trenches with a new initiative aimed at teaching you how to use both new and existing controls from the Telerik RadControls for Silverlight and RadControls for WPF control suites. Starting today, every Thursday you'll be able to find a fresh batch of videos and sample projects highlighting a different control in a little series we're calling XAMLflix. The best part is that since we share a common codebase and API between our Silverlight and WPF suites you only have to learn how to use these controls once and can carry those skills over between frameworks. Pretty neat, right?

Say Hello, RadChartView

For anyone who has been with us for a bit, RadChartView actually first appeared in our Q3 2011 release with a beta tag stuck to it. Since then we've received a lot of feedback and wanted to use this as the pilot control for this new video content series, especially considering RadChartView goes official in our upcoming Q1 2012 release!

Rather than just direct you to the demos, while they are quite nice to look at, I wanted to give you a brief introduction to this new control with five videos meant to get you up and running. Without further delay, here's what we've got for today:

• Introducing RadChartView - A brief walkthrough how you can get up and running with nothing more than the Visual Studio designer and our designer widget for creating pre-defined charts. A must for anyone brand new to RadChartView! (Download the Project)
• Using RadCartesianChart - Walking through creating a new RadCartesianChart, including setting the chart Grid, picking out both horizontal and vertical axis, as well as defining a chart series and hooking it up to data. (Download the Project)
• Using RadPolarChart - Same as above, except this time with RadPolarChart! (Download the Project)
• Using the Pan and Zoom Behavior - Starting with a RadCertesianChart, see how quickly you can enable as well as customize the Pan and Zoom behavior.  (Download the Project)
• Using the TrackBall Behavior - After a quick review of the new RadCartesianChart, see how 5 lines of XAML can add the TrackBall behavior to your charts and how quickly you can customize how data is displayed. (Download the Project)

So grab a cup of coffee and take these videos and their sample projects for a spin. And courtesy of our shared API and codebase the projects are replicated between Silverlight and WPF, so regardless of which framework you are on you can see how these work.

Stay tuned for the next installment of XAMLflix next week!

@EvanHutnick

In preparing for the upcoming major release of Telerik JustCode we published our first internal build for this year. Besides focusing on performance and memory footprint improvements we’ve listened to the users’ voice and implemented some of the features you’ve asked us for.

New In Test Runner

We continued to improve our support for MbUnit and NUnit testing frameworks. Now we support the NUnit TheoryAttribute, and for MbUnit you will find support for:

• TestFixtureAttribute
• RowAttribute
• StaticTestFactoryAttribute
• DynamicTestFactoryAttribute

Added New Filters In ToDo Navigator

After user’s request we added two more useful filters to the “Filter by” menu in the ToDo Navigator – “Current File” and “Current Project”:

Naming Conventions

With the latest build of JustCode you can now easily set naming conventions for all your code elements. Expect more on this topic in separate blog post that is to follow this one. Stay tuned!

Linq Conversions

Now you can use two new JustCode’s refactorings:

• Convert Linq To Foreach:

 

• Convert Linq to Extension Method Syntax:

 

New Option In JustCode’s Code Style Options

We’ve added option (in JC Options\Code Style\C#\Using Directives) to put System.* namespaces on top when using refactoring "Organize and Add Missing Usings":

 

New In Formatter

• Implemented wrapping and unwrapping for anonymous class initializer:

Initial state:

Formatted state:

• Implemented wrapping and unwrapping for array arguments:

Initial state:

\

Formatted state:

• Implemented wrapping and unwrapping for assignments:

Initial state:

Formatted state:

• Implemented wrapping and unwrapping for LINQ clauses:

Initial state:

Formatted state:

Also you will find that we’ve improved code block formatter for object initializer, anonymous types and array initializer. The formatting results when using typing assistance are improved as well.

New Quick-Fixes

Now we have quick-fixes that will help you fix cases when there is a mismatch between return expression type and the member type:

• Quick-Fix: "Change Method Type" for return type - method type mismatch:

 

• Quick-Fix: "Change Member Type" for return type - member type mismatch:

 

• Quick-Fix: "Return Default Value" for return; in members that must return a value:

And this is not all - we fixed many issues thanks to your valuable feedback. We’d love if you give the latest internal build a try and let us know what you think!

Happy coding!
The JustCode team

In our latest experimental build we have improved the tooltips in the JavaScript source view. Normally, inspecting a value should not change the current state in any way. For that reason, we never included parentheses in the automatic detection and selection of a value to prevent function calls. Now you can control this behaviour: if you hold the shift key while hovering over the JavaScript source, parentheses will be included.

For example, for a code fragment of ele.getElementsByTagName('ul')[0], you normally get a generic tooltip for the [0] array when hovering over the square bracket.

With shift, the automatic selection will also include the parentheses and you will now get a tooltip relating to the evaluated selection — in this case, the first ul element in the ele object.

Additionally you can select any text, hold down the shift key, and get a tooltip with the according evaluated value.


Selection now also works over several lines.

We have also added a new tooltip for all JavaScript inspections. For properties of type object we show the according class. If you now hover over the class name of any Element, Function, Date, RegExp, Error and Exception, you will get a tooltip with a pretty-printed representation. This also works on top of an other tooltip:

If you hover the pretty-printed tooltip of an element, the according node in the document gets scrolled into view and highlighted.

This is all available on experimental now. Take a look and tell us what you think!

Today we release MooTools Core 1.4.3 which is a small maintenance release. Upgrading from 1.4.2 should not cause any backward incompatibilities. We recommend that all users upgrade to 1.4.3 as soon as possible.

Fixes

• #2109: IE7/8 getProperty returns functions
• #2110: Documentation: Request.JSON’s behaviour of onFailure
• #2117: Document conflicts between Array and Elements methods
• #2121: Missing Fx.options.frameSkip documentation.
• #2126: Re-add undocumented from argument to Element.fade
• #2127: Element.js memory leaks
• #2146: Add Element.NativeEvents to docs
• #2150: Add Fx.isPaused() method
• #2152: Packaging issue. Build header and Core.js yml header collide
• #2155: Add special note to Element.empty
• #2163: IE7 Crash with Mootools Core 1.4.2
• #2164: Cannot set numerical 0 values to form fields.
• #2169: Array#filter should store this[i] in a variable before calling the callback.
• #2170: propertychange on an input[type=radio] with this.checked fires standard onChange
• #2176: uid remnant which prevented proper cleaning of elements and their storage
• #2182: element.erase( ‘html’ ) sets content to text ‘undefined’

Known Issues

• #2129: < IE9 sets width/height attribute once, and doesn’t update on other loads
• #2130: Object.each doesn’t address IE DontEnum bugs like Object.extend and others
• #2160: Fx.Tween/Fx.Morph problem with ‘%’ unit
• #2168: Fixes 2129.
• #2175: IE Leak: Array.flatten
• #2178: IE doesn’t set value when creating element if css attributes are used
• #2183: Incorrect event.key from some keypress events in Firefox
• #2184: IE9 on Windows Server throws exception; can’t continue
• #2185: Fix #2184: IE9 on Windows Server throws exception; can’t continue
• #2188: Fixes #2178 - A input field should keep its value even when the type property is changed (in IE)
• #2189: Uncaught TypeError: Property ‘id’ of object # is not a function
• #2193: Element clone storage again
• #2194: Function#bind ES5 bug when bound function is called as part of a new expression
• #2196: it’s better for getStyle method always returns style value with px unit
• #2199: Browser.version always returns the same for Android 2-4
• … and more

These issues will be fixed subsequently prior to release of the next maintenance release, 1.4.4.

Contribute

These fixes and improvements would not have happened if you didn’t submit an issue (ticket) to the MooTools Core Issues, or reporting your problems in the MooTools User Group. Send us your (MooTools) issues (or feature requests) so that your favorite JavaScript framework keeps getting better.

Get it!

• Download MooTools Core 1.4.3; Build MooTools Core 1.4.3
• Fork / clone MooTools Core 1.4.3 from GitHub, and build it yourself with Packager.
• Google CDN (will be updated soon)
• Browse the Documentation for Core & More.

Just a brief update on bugfixes this time, as there are mostly larger tasks still in the works.

Bugfixes

For a complete list of tasks accomplished during the last working week, use this bugzilla query.

C U again next time.

The chart component for the Telerik Extensions for ASP.NET MVC is a rapidly expanding MVC component. Not only are we adding many new features, but we’re also increasing the available chart types. With the introduction of Q3 2011 we were able to start using two new chart types - Scatter and Scatter Line. Both types allow you to plot points anywhere on your chart area, as long as you provide each point with X and Y values. Let’s take a look at how you can implement these chart types, as well as take use of some new features introduced in Q3 2011 SP1.

Scattered Data Everywhere

As a starting point we can take a look at the scatter chart type and what awesome things we can do. One of the more important items with a chart is of course the data – why else would we have a chart? In an effort to include some short and sweet, but relevant, data I decided to go on Amazon.com and look up the Rating and Price of some DVD movies. Most of these ended up being a movie and its sequel, and we haven’t gone into genres yet, but I tried to get some variation in the titles! This can let me plot out Price against Rating, letting me see what movie gives me the most bang for my buck (after all, I want to be wise with my spending). So, what do we need to include in terms of the M portion of ASP.NET MVC? Title, Rating, and Price sound good to me:

public class MovieData {     public string Title { get; set; }     public double Rating { get; set; }     public double Price { get; set; } }

I named this Model “MovieData”, which might not have me leaving with any awards for naming models, but it is still appropriate.

For this particular blog post I decided that I wanted to utilize Ajax binding with my chart, although you can definitely use server binding if you so prefer. So for the sake of me not forgetting to actually create some data (believe me, it’s happened too often ;)) let’s go ahead and just create a quick method in our controller that creates our list of movies. Now some of you might cringe at the idea of creating my list right in the controller, but this is for the sake of simplicity in this post, so put out those torches and lay down the pitchforks :) Here’s what this method looks like:

private List<MovieData> BuildMovieData() {     List<MovieData> movies = new List<MovieData>();     movies.Add(new MovieData { Title = "Kung Fu Panda", Rating = 4.5, Price = 6.99 });     movies.Add(new MovieData { Title = "Kung Fu Panda 2", Rating = 4.5, Price = 14.99 });     movies.Add(new MovieData { Title = "Tron", Rating = 4.5, Price = 14.99 });     movies.Add(new MovieData { Title = "Tron: Legacy", Rating = 4.0, Price = 18.15 });     movies.Add(new MovieData { Title = "Harry Potter and the Deathly Hallows - Part 1", Rating = 4.0, Price = 7.47 });     movies.Add(new MovieData { Title = "Harry Potter and the Deathly Hallows - Part 2", Rating = 3.0, Price = 14.99 });     movies.Add(new MovieData { Title = "The Girl with the Dragon Tattoo", Rating = 4.0, Price = 11.99 });       return movies; }

So all this is doing is returning a list of our movies. While we’re in the controller, let’s create the ActionResult that will be used as our Ajax binding select, which will just return the Json representation of our data:

public ActionResult _SelectMovies() {     return Json(BuildMovieData()); }

Now that we’re done with our Model and Controller, all we have left is the View. Let’s just create a basic chart without any series for now:

@(Html.Telerik().Chart<MovieData>()         .Name("ScatterChart")         .Title("DVD Price vs. Rating")         .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectMovies", "Chart")) )

So we’ve set up our data binding, given our chart a name and a title. A good warm-up, but let’s actually create our scatter chart by defining our series:

@(Html.Telerik().Chart<MovieData>()         .Name("ScatterChart")         .Title("DVD Price vs. Rating")         .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectMovies", "Chart"))         .Series(series =>         {             series.Scatter("Price", "Rating");         }) )

What you might notice here is that the strings I’m passing into the series are fields that I have defined in my Model, which is the way we let the scatter chart series know where to look for data. Here, the first parameter represents my X value – the DVD price – and the second parameter is my desired Y value – the DVD rating. I’ll show you what we can do with the Title (the last remaining property) later. If I were to run this as-is, we get the following:

While yes, our data is represented, there’s a whole lot missing to make this a bit more intuitive. A couple of things stick out right away. Does the Legend provide a lot of help here? Do we actually need to have the half step markers for the Rating? Can we quickly glance at which axis represents what? Sure, one axis goes from 1 to 5, but what if we were looking at the bargain bin and had a rating which could be as high as 20 (can’t be specific enough with rating nowadays)? Let’s tweak some things around in our code to make this chart look better.

First, we can fix the issues I pointed out regarding both the X and Y axis by utilizing the XAxis and YAxis functions:

@(Html.Telerik().Chart<MovieData>()         .Name("ScatterChart")         .Title("DVD Price vs. Rating")         .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectMovies", "Chart"))         .Series(series =>         {             series.Scatter("Price", "Rating");         })         .XAxis(x => x             .Title(title => title.Text("Price"))             .Labels(labels => labels.Format("${0}")).Max(20))         .YAxis(y => y.Title(title => title.Text("Rating")).Max(5)) )

What I have done here for each of them is defined the title text, which was introduced in Q3 2011 SP1, which gives our users some context as to what they’re viewing. Additionally, since the X-axis does deal with price I took the liberty of formatting the labels to include a “$” sign in front of every label. Finally I set max values for each axis, since I know that my rating can go between 0 and 5 I set 5 as the maximum for the Y axis while the X axis got a 20 since none of the titles went over $20. Refreshing our page in our browser (or reloading it completely) gives us this chart:

Still a few things we can change, but we’re getting there. In terms of immediate looks let’s just disable the Legend

@(Html.Telerik().Chart<MovieData>()         .Name("ScatterChart")         .Title("DVD Price vs. Rating")         .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectMovies", "Chart"))         .Series(series =>         {             series.Scatter("Price", "Rating");         })         .XAxis(x => x             .Title(title => title.Text("Price"))             .Labels(labels => labels.Format("${0}")).Max(20))         .YAxis(y => y.Title(title => title.Text("Rating")).Max(5))         .Legend(false) )

Much better! This chart is coming along nicely.

Now, remember how I promised you I’d use the Title field? I know almost all of you were on the edge of your seats wondering what fun adventures I had in store for this field ;) Well, I want to add some interactivity to the chart so let’s take use of tooltips and have them give us the title of the movie! This gives us a nice context as to which point represents what movie. To do this let’s create a template for our tooltips:

.Tooltip(tooltip => tooltip     .Visible(true)     .Template("<#= dataItem.Title #>"))

Keep in mind that these are all client-side templates, and we utilize the “<#= … #>” syntax to indicate the beginning and end of our template. Also, using dataItem in our template allows us to grab fields from our Model, so I just used dataItem.Title to render the title in each tooltip. We could also plug in some HTML and let the Tooltip be bold:

.Tooltip(tooltip => tooltip     .Visible(true)     .Template("<#= '<strong>' + dataItem.Title + '</strong>'#>"))

Since we already used double quotes to define the string of our template we’ll just use single quotes around our strong tags. Now when we refresh our page we get to find out what each point in our chart represents:

There we have it! A quick and easy implementation of the Scatter chart which allows us to see which movies provide us with the best rating per cost ratio.

Line Them Up

We of course want to take a look at the scatter line chart, which gives us the ability to have our scatter points connected via a line. With the previous example this would look really weird, but we could utilize another Model and approach it in a similar way as with our scatter chart. Sales per year works pretty well, so let’s create a Model that has year and sales fields. So, we have our Model:

public class YearData {     public double Year { get; set; }     public double Sales { get; set; } }

Then we have our data creation function in our controller (again, still your torches and pitch forks :)):

private List<YearData> BuildYearData() {     List<YearData> sales = new List<YearData>();     sales.Add(new YearData { Year = 2007, Sales = 10000 });     sales.Add(new YearData { Year = 2008, Sales = 15000 });     sales.Add(new YearData { Year = 2009, Sales = 30000 });     sales.Add(new YearData { Year = 2010, Sales = 100000 });     sales.Add(new YearData { Year = 2011, Sales = 500000 });       return sales; }

Return this to our View as Json via our ActionResult so that we can use Ajax Binding:

public ActionResult _SelectSales() {     return Json(BuildYearData()); }

Then we have the following chart declaration:

@(Html.Telerik().Chart<YearData>()         .Name("ScatterLineChart")         .Title("Sales per Year")         .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectSales", "Chart"))         .Series(series =>         {             series.ScatterLine("Year", "Sales");         })         .XAxis(x => x             .Title(title => title.Text("Year")))         .YAxis(y => y             .Title(title => title.Text("Rating"))             .Labels(labels => labels.Format("${0}")))         .Legend(false)         .Tooltip(tooltip => tooltip             .Visible(true)             .Template("<#= '<strong>Year: </strong>' + dataItem.Year + ', <strong>Sales: </strong>$' + dataItem.Sales #>")) )

As we can see it’s pretty identical to what we had with the scatter chart type. The main difference is that in the series we use ScatterLine(“x”, “y”) instead of Scatter(“x”, “y”). We’re still passing the field names related to our desired X and Y values. We also removed the Max values from both the X and Y axis. Finally we expanded on the tooltip a little bit so we can use both the Year and Sales fields from our data item, allowing each point to have a detailed tooltip.

Final Notes

If you’re interested in more examples related to both the scatter and scatter line chart types I highly recommend checking out our demos

• Scatter Demo
• Scatter Line Demo

There are also several configuration options for defining the shape of the scatter points, as well as their style, which you can find more information about in our series documentation article.
Have you had a chance to utilize these chart types, or do you have good ideas for other sources of data? Feel free to share in the comments below!

About the author Carl Bergenhem

Carl Bergenhem is an Enterprise Solutions Consultant at Telerik specializing in the ASP.NET AJAX and ASP.NET MVC products. He has always been interested in web development and has played around with various web technologies since he was a child. In his free time Carl enjoys soccer, running and playing his guitar.

Hello everyone,

Today, we begin a new and exciting video series on Telerik’s RadCharts for Windows Phone 7. What is RadCharts you may ask? RadChart is intuitive and easy-to-use charts designed for the mobile environment. RadChart offers 20 chart series out-of-the-box and is designed for super-fast loading and real-time updates.  The control’s intuitive object model and public API allow complex charts to be easily setup either in XAML or through code-behind.

Now that we know what RadChart is, let’s take a look at the roadmap for the series.

The Roadmap for the series:

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn about RadChart for Windows Phone 7. If you want a specific topic covered then please leave it in the comments below.

In order to fully understand the capabilities of the RadChart, we will start with the basics:

• How to create bar charts and the differences among them (Horizontal, Vertical, Stacked, etc) (source code)
• How to create line charts and the differences among them (Line, Spline, Area, Stacked Area)
• How to create pie, scatter and polar area charts

Then move into exciting new Chart Features such as:

• Live feed, Performance, Zoom and Pan and much much more.

And finally finish up with Dashboards

• How to use the chart with the gauge control with sales or customer data.
• Understanding the benefits of using the RadBulletGraph for financial data

 

Part 1: Creating Bar Charts and the differences amongst them.

In this part, we are creating the following 5 charts from scratch:

Bar Chart – One of the most common charts is the bar chart. The RadChart is easily able to visualize data points as bars. Each bar can have a different style which can encode arbitrary information or simply differentiate a bar from the others.

Bar Charts – Vertical: The bar series can be displayed vertically in both directions based on the values of the underlying data, notice how the vertical axis expands to provide negative values.

Bar Charts – Horizontal: The bar series can also be displayed horizontally in both directions with negative values extending to the left and positive values extending to the right.

Bar Charts – Stacked Vertical: This bar series can be stacked on each other with the CombineMode property of the axes. Since some bars can be shorter and also be behind other bars, the combine mode allows such cases to be avoided by arranging the bars as a stack.

Bar Charts – Stacked Horizontal: The stack combine mode also works for horizontally plotted series.

Wrap-Up
Go ahead and check out these videos now and leave any comments or suggestions below.

Also, keep watching the Telerik blogs as we are planning on releasing more chart videos for Windows Phone 7 shortly. You can also download a trial right now.

@mbcrump

Click through to see a video of Sencha Animator animations playing in an Apple iBook.

Like everybody else on the US west coast, this morning we woke up in a world where Apple is poised to transform the way we consume textbooks. One of the compelling features of this new and exciting medium is the ability to easily publish interactive books through iBook Author.

iBook Author lets you embed interactive content in your books to create more engaging experiences for learners, and our first thought here at the Sencha HQ was to try using Sencha Animator to create that interactive content.

So after a few minutes of fiddling, we found a fairly straightforward way to embed an Animator project in an iBook.

Step 1: Preparation in Animator

Open a Sencha Animator project you’d like to place inside your iBook. Take a screenshot of the stage area to create a “cover” for the animation, and rename it “Default.png”. This cover image will be used to show the animation in the page when inactive. Make sure it’s the same size as the stage.

Sencha Animator Rocking Boat project. See the animation and our original article, Rocking the Boat of Flash with CSS3 Animations.

Export the project as you normally would, then place your Default.png inside the output folder.

Step 2: A Little Hacking…

Now comes the tricky part: you need an “info.plist” descriptor file in your output folder, so we provided one ready for you in our project file available to download at the bottom of this article.

Edit the info.plist file to enter the dimensions of your animation, then the BundleName to match the export folder’s name (e.g. myExportFolder), and finally add the extension “.wdgt” to the folder.

If you’re working in Mac OS X, the icon of the folder will change to that of a Dashboard widget. If you’re on Windows or Linux, you can create a widget but you will need Mac OS X Lion in order to complete the process, since iBook Author only runs on that version of Apple’s operating system.

Finishing Up in iBook Author iBook Author and Sencha Animator in action. Download the project files below to get started.

Now that you have an animation file ready, you just need to add an HTML widget to your book, and drag the .wdgt file in the widget’s properties as we show in the screenshot.

Now you’re ready to export your book and enjoy the results of your work! Of course, you’ll need the new iBooks Author app and Sencha Animator on your Mac. Download our demo Sencha Animator iBook project below to get started.

• Download Animator->iBooks Project File
• Start your 30-day trial of Sencha Animator 1.1
• Download iBooks Author from Apple (Available for free on the Mac App Store)

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

Dojo has long provided support for declaring widgets and specifying other information directly in HTML. This support makes it extremely quick and easy to get an application started. You can start instantiating widgets by adding attributes to HTML elements before even writing any code. This is not only a very convenient tool, but using a declarative approach to binding widgets to elements can be viewed as cleaner and more organized than using the imperative mechanics of JavaScript. Widgets declared in markup have an encapsulated construction, avoiding instantiation that requires spanning and synchronizing HTML and code manually.

However, the use of Dojo’s declarative tools has been avoided by some because it uses custom attributes that are outside the HTML specification. While this approach works in every browser on the market and is implicitly allowed, it does not validate against the HTML4 validators. Now, the new HTML5 specification provides a namespace for custom attributes. The data-* attributes are available for libraries and authors to use for their own purposes and extensions while still having validating markup. The HTML5 specification further recommends that library use a sub-namespace for their custom attributes to avoid conflicts with other code. All of the Dojo custom attributes begin with data-dojo-. Let’s look at the new Dojo attributes.

data-dojo-config

The data-dojo-config attribute replaces the djConfig attribute on the dojo.js script element to allow for declaration of Dojo’s configuration properties. Here we can specify settings like parseOnLoad, and isDebug. For example, we can load dojo.js with configuration information:

<script src="dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>

data-dojo-* for widgets

The new data-dojo-type attribute replaces the dojoType attribute to specify the widget class to instantiate a target element. We can add the data-dojo-type to an HTML tag and the Dojo parser will create a widget on that element. This works in conjunction with the new data-dojo-props which replaces the attribute-to-property mapping previously used by the Dojo parser. We can also use the new data-dojo-id to create a new globally rooted variable to reference the new widget. For example, to declare a widget:

	<div data-dojo-type="dijit.Dialog" data-dojo-props='title:"My Dialog",
		onFocus:function(){ /* a focus event handler */ }'
		data-dojo-id="myDialog">
	</div>

This will create a new dijit.Dialog widget, with the title property and onFocus handler set. It will make the widget available from the myDialog global variable. Remember to have parseOnLoad set to true or explicitly execute dojo.parser() (from dojo/parser) after the page is loaded to ensure the widget gets instantiated.

Within widget templates, we can also use the new data-dojo-attach-event and data-dojo-attach-point as replacement for dojoAttachEvent and dojoAttachPoint to register attach points and attach event handlers. And finally, we can also use a data-dojo-event to define the event to register for <script type="dojo/method"> scripts.

When to go Declarative

Even when leveraging the new HTML5-valid custom attributes, there are still pros and cons to declaring widgets within HTML instead of with JavaScript. Declaring JavaScript components from within HTML introduces semantic impurity since the HTML is no longer purely semantic markup, but includes tight coupling to particular visual components. The declarative approach also incurs extra CPU cycles because dojo.parse() must traverse the DOM tree to find elements with Dojo custom attributes. Programmatic instantiation avoids unnecessary cycles and preserves semantic purity of HTML. However, markup-based widget declaration still has a powerful advantage by allowing us to define and create a widget in a single place, facilitating rapid application development and progressive enhancement with minimal effort.

Dojo still provides backward compatibility with the old custom attributes, but the new data-dojo-* attributes leverage the new HTML5 specification to provide fast and efficient declaration of widgets and configuration with clean and validating syntax.

Related posts:

1. HTML Widget Prototyping with the Dojo Toolkit
2. Dojo Charting: Event Support Has Landed!
3. Dijit: Prepackaged

SitePen offers beginner, intermediate, and advanced Dojo Toolkit workshops to make your development team as skilled and efficient as possible when creating dynamic, responsive web applications. Sign up today!

In my previous post[1], I introduced using CSS media queries in JavaScript both through a custom implementation and using the CSSOM Views matchMedia() method. Media queries are incredibly useful, both in CSS and JavaScript, and so I continued with my research to see how best to take advantage of this capability. As it turns out, the matchMedia() method has a few interesting quirks that I didn’t realize when I wrote the first part of this series.

matchMedia() and its quirks

Recall that matchMedia() returns a MediaQueryList object that allows you to determine whether or not the given media type matches the current state of the browser. This is done using the matches property, which returns a boolean. As it turns out, matches is a getter, which requeries the state of the browser each time it’s called:

var mql = window.matchMedia("screen and (max-width:600px)");
console.log(mql.matches);

//resize the browser

console.log(mql.matches);  //requeries

This is actually really useful, because it allows you to keep a reference to a MediaQueryList object and repeatedly check the state of the query against the page.

Chrome and Safari have a weird behavior, though. The initial value for matches is always correct but doesn’t get updated by default unless the page has a media block defined with the same query and at least one rule (hat tip: Rob Flaherty[2]. For instance, in order for a MediaQueryList representing “screen and (max-width:600px)” to update appropriately (including firing events), you must have something like this in your CSS:

@media screen and (max-width:600px) {
    .foo { }
}

There needs to be at least one rule in the media block, but it doesn’t matter if that rule is empty. As long as this exists on the page then the MediaQueryList will be updated appropriately and any listeners added via addListener() will fire when appropriate. Without this media block on the page, the MediaQueryList acts like a snapshot of the page state at its creation time.[3]

You can fix this by adding a new rule using JavaScript:

var style = document.createElement("style");
style.appendChild(document.createTextNode("@media screen and (max-width:600px) { .foo {} }"));
document.head.appendChild(style);    //WebKit supports document.head

Of course, you would need to do that for every media query being accessed using matchMedia(), which is a bit of a pain.

There is also a strange quirk in Firefox’s implementation. In theory, you should be able to assign a handler for when the query state changes and not keep a reference to the MediaQueryList object, such as:

//doesn't quite work in Firefox
window.matchMedia("screen and (max-width:600px)").addListener(function(mql) {
     console.log("Changed!");
});

When this pattern is used in Firefox, the listener may never actually be called even though the media query has become valid. In my tests, it would fire between 0 and 3 times, and then never again. The Firefox team has acknowledged this is a bug[4] and should hopefully be fixed soon. In the meantime, you need to keep the MediaQueryList reference around to ensure your listeners fire:

//fix for Firefox
var mql = window.matchMedia("screen and (max-width:600px)");
mql.addListener(function(mql) {
     console.log("Changed!");
});

The listener here will continue to be called as long as there is a reference to the mql object.

More on listeners

My initial description of the media query listeners in my previous post was incomplete due to a misunderstanding on my part. The listeners are actually trigger in two instances:

1. When the media query initially becomes valid. So in the previous example, when the screen becomes 600 pixels wide or less.
2. When the media query initially becomes invalid. For example, when the screen becomes wider than 600 pixels.

This behavior is why the MediaQueryList object is passed into the listener, so you can check matches to determine if the media query just became valid or not. For example:

mql.addListener(function(mql) {
    if (mql.matches) {
        console.log("Matches now!");
    } else {
        console.log("Doesn't match now!");
    }
});

Using code like this, you can monitor when a web application moves into and out of certain states, allowing you to alter the behavior accordingly.

To polyfill or not?

When I first looked at matchMedia(), I did so with the intent of creating a polyfill. Paul Irish[5] implemented a polyfill using a technique similar to the one I described in my last post (and gave me credit for it, thanks Paul!). Paul Hayes then forked[6] his work to create a polyfill with rudimentary listener support based on a very ingenuous use of CSS transitions to detect changes. However, as it relies on CSS transitions, the listener support is limited to browsers with CSS transition support. That, coupled with the fact that calling matches doesn’t requery the browser state, and the bugs in both Firefox and WebKit, led me to believe that building a polyfill wasn’t the right approach. After all, how can you polyfill appropriately when there are such obvious bugs in the real implementations that need fixing?

My approach was to create a facade to wrap this behavior in an API where I could smooth out the issues. Of course, I chose to implement the API as a YUI Gallery module[7] called gallery-media. The API is very simple and consists of two methods. The first is Y.Media.matches(), which takes a media query string and returns true if the media matches and false if not. No need to keep track of any objects, just get the info:

var matches = Y.Media.matches("screen and (max-width:600px)");

The second method is Y.Media.on(), which allows you to specify a media query and a listener to call when the media query becomes valid or invalid. The listener is passed an object with matches and media properties to give you information about the media query. For example:

var handle = Y.Media.on("screen and (max-width:600px)", function(mq) {
    console.log(mq.media + ":" + mq.matches);
});

//detach later
handle.detach();

Instead of using CSS transitions to monitor for changes, I use a simple onresize event handler. On the desktop, the size of the browser window is the main thing that will change (as opposed to mobile devices, where the orientation may also change), so I made this simplifying assumption for older browsers. The API uses the native matchMedia() functionality where available and patches up the differences in WebKit and Chrome so that you get consistent behavior.

Conclusion

CSS media queries in JavaScript are a bit more complicated than I first expected, but still quite useful. I don’t think it’s appropriate to polyfill matchMedia() giving the strange bugs that are still abound, effectively preventing you from even using the native code the same way across browsers. A facade, on the other hand, insulates you from the bugs and changes that are likely to occur going forward. Now go forth and use CSS media queries to their potential…in JavaScript.

References

1. CSS media queries in JavaScript, Part 1 by me
2. Rob Flaherty’s tweet
3. matchMedia() MediaQueryList not updating
4. matchMedia() listeners lost
5. matchMedia polyfill by Paul Irish
6. matchMedia polyfill by Paul Hayes
7. YUI 3 Gallery Media module by me

Now let me post a couple of code snippets that are lying around here already for a while. For the uber geeks out there you might yawn seeing them, but there are a lot of people who are searching for this stuff over and over, including myself. So let me post some small useful snippets that have went through my fingers lately.
Reading on, you will see snippets that help you with 1) detecting if a variable is a real array 2) how to convert it into a proper array 3) how to mimic a x = [3..25] kinda thing that other languages offer 4) how to easily pad a string with leading chararacter (i.e. zeros) and finally 5) how to create a unique function for arrays.

isArray()

There are a lot of ways to check for a variable being an array, but the safest one and also most promoted and secure one is

1
Object.prototype.toString.call(arg) == '[object Array]';

Some examples from the console demostrate well how to use it and that it really works :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
>>> arr = 1 // That's a simple integer, of course.
>>> Object.prototype.toString.call(arr) == '[object Array]';
false
>>> arr = '1' // Just a string.
>>> Object.prototype.toString.call(arr) == '[object Array]';
false
>>> arr = '[1,2,3]' // Also a string.
>>> Object.prototype.toString.call(arr) == '[object Array]';
false
>>> arr = {x:1, y:2} // That's an object, no array either!
>>> Object.prototype.toString.call(arr) == '[object Array]';
false
>>> arr = [1,2,3] // An array, so it should be true.
>>> Object.prototype.toString.call(arr) == '[object Array]';
true Convert arguments to an array

One of the pains JavaScript developers have to fight with which will get solved with future versions (fortunately) is that the arguments object looks like an array, e.g. it has the property length but you can’t work with it as if it was an array, e.g. here:

1
2
3
4
5
6
>>> function f() { console.log(arguments.length) }
>>> f(1,2,3)
3 // arguments.length works
>>> function f() { arguments.slice() }
>>> f(1,2)
TypeError: arguments.slice is not a function // slice() is not available :(

But their is a workaround until the language handles it. It is

1
2
3
4
>>> function f() { var realArray = [].slice.call(arguments, 0);
      console.log(realArray.slice()) }
>>> f(1,2,3)
[1, 2, 3] // slice throws no error, hurray! Range function, or mimic “x = [3..25]“

Sometimes you need just a plain array with a set of numbers of a certain range, i.e. when generating a set of chars, like all upper case characters. But there is no “x = [1..5]” in JavaScript yet(!). But I needed one, and it’s easy to make one, as you can see:

1
2
3
4
5
6
7
8
9
>> var chars = [];
>>> for (var i=65; chars.push(i) && i<90; i++){};
[65, 66, 67, 68, 69, 70, ... 85, 86, 87, 88, 89, 90]
>>> // Let's print them.
>>> chars.forEach(function(c){
      console.log(String.fromCharCode(c)) })
A
...
Z Padding a string

Sometimes you want to pad numbers with zeros e.g. to align them on the console. Here is how I did that:

1
2
3
4
5
6
>>> ('00' + 3).slice(-3)
"003"
>>> ('00' + 42).slice(-3)
"042"
>>> ('00' + 103).slice(-3)
"103"

The -3 is the number*-1 of characters my string shall have in the end. I am adding two zeros at the beginning, because I am sure that a number is never an empty string. And after the string concatenation I just take only the last three characters. Simple but works nice without any kind of IFs or complex logic.

array.unique()

PHP has a hell lot of array functions, a bit wild – yeah. But sometimes you wished you had them all too. A unique() function is one of those that I just needed lately again, so here is a simple one:

1
2
3
4
5
6
7
8
9
10
>>> function unique(arrayData){
      return arrayData.filter(function(val, idx, arr){
        return arr.slice(0, idx).indexOf(val)==-1 })
    }
>>> unique([1,2,3,4,1,2,1,3])
[1, 2, 3, 4]
>>> unique([1,2,3,4,1,2,1,3,5])
[1, 2, 3, 4, 5]
>>> unique(['a', 'a', 'b', 'B'])
["a", "b", "B"]

So have fun, hope something was useful.

2012 is already here and it is time to look forward to the first major release for this year – Q1 2012. As always, this release will be full of great new features that will make your applications even more professional. These features will be no surprise to anyone, just take a look at some of the most voted features in our Public Issue Tracker:

 

In order of appearance in the list, the features that we plan to introduce in Q1 2012 are:

- Printing support for RadScheduler and RadGridView. This feature will allow you to directly pass your RadScheduler/RadGridView instance to the printer. You will no longer have to export RadGridView to other formats (Excel, PDF, etc.) in order to print it. You will be also provided with a set of options that will allow for customizing the look of these two controls before processing this look to the printer.
- RadTimePicker control. Highly demanded, this control will come as a nice addition to your fill-in forms. Now the end-user will not only be to pick a date from the RadDateTimePicker, but it will also be able to pick the time from the drop-down of RadTimePicker.

This is what we will deliver for you in mid-February. February? That’s right. Our release cycle will be shifted with a month, so you will get the listed innovations even sooner than expected.

Happy coding!

SAN FRANCISCO--(BUSINESS WIRE)--jQ.Mobi ( www.jqmobi.com ), a new open source mobile development framework makes its public debut today. jQ.Mobi is a mobile-optimized, HTML5 rewrite of the ubiquitous jQuery framework which is used on over 50% of all ...

Your web application’s performance is an important part of your users’ experience. WaveMaker makes it easy to build applications, but you may not have discovered all the ways you can improve your application’s performance.

Please join us next week on Wednesday, January 25th at 10:00am PST for Taking Control of Your WaveMaker Application Performance.

In this webinar we will cover:

- How to measure your application’s load and response times
- Which key factors can affect your performance
- How you can improve your application’s performance

We will examine and discuss measurement tools you should know about, application design considerations, server call optimization to minimize performance impact, and the component loading system.

Presenter: Ed Callahan – Senior Member of Technical Staff

Register at https://vmware.webex.com/vmware/onstage/g.php?d=925737607&t=a

I wanted to share my thoughts on my progress learning Ext JS 4.1 as a developer new to Sencha. As an application developer I have used many different development environments and application frameworks throughout my career and whenever I learn something new I compare back to my experience. Overall I have been very impressed with Sencha frameworks as they provide a professional foundation to build an application atop.

Interpreted

The single hardest shift for me is embracing the interpreted nature of JavaScript within the Ext JS framework in general. While not new to interpreted systems, I personally expect compiler emitted errors/warnings/flags, syntax auto-completion, and strong typing for member variables, return types and assignments. Having come most recently from Java, I find that being shown errors and autocompletion as I type is a great productivity enhancement but these benefits are tied to the nature of a strongly typed and compiled language. The general lack of these facilities in working with JavaScript is really the first hurdle in moving to web technology. Truth is, as I got more comfortable with the interpreted nature of the the language, I quickly found myself enjoying the advantages:

• JavaScript’s flexibility is a double edged sword. The language’s freedom is a joy but you must use best practices to avoid common pitfalls.
• Modern browsers offer developers great insight into application behavior at runtime. I have found the Chrome developer Console and Debugger JavaScript tools to be invaluable.
• Ext JS uses JavaScript as a meta-language to provide deeper OOP/MVC/Class Loading/Mixin support is very elegant for larger scale application development. These facilities exist in very few frameworks and really differentiate Ext JS and Touch. The ability to extend components or leverage a clean MVC pattern within an application make it very developer friendly as a framework.
• Leveraging JavaScript object literals and JSON for data/component instantiation is very productive. The ability to load components remotely, define UI as objects at runtime, and leverage client layout templating is very powerful. The syntax of larger object literals using xtype takes some getting used to. I found myself formatting my code more than normal to avoid the dreaded missing comma errors deep within an object literal.
• Using the Eclipse VJET Plugin was a great productivity boost for JavaScript and Ext JS development. The plugin provides auto-completion for JavaScript and there are several open source syntaxes for Ext JS. Being able to see instances, warnings/errors, and in-context return types is a very pleasant addition based on my past experience. VJET VJET+ExtJS

Ext JS “Standard Library”

Ext JS provides a foundational set of helper classes and methods to make building applications easier. I found that the Ext.Array, Ext.Date, Ext.String, Ext.Object, Ext.Loader classes make working with data very easy and generally simplify building applications. Every application will use these common libraries and having them included and integrated into the framework is great.

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

Ext.require( [ 'widget.*' , 'layout.*' , 'Ext.data.*' ] ); 
Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) { console.log( name ); });
Ext.Object.getSize( { age:23 , height:6, name:"Ted" } );  //3

Containers

Ext JS provides a rich set of containers (Ext.window.Window, Ext.panel.Panel, Ext.container.Container, Ext.grid.Panel, etc.) to allow developers to easily create nested views and more complex application logic. In Ext JS, containers’ layout behavior is programmatic and allows you to set the behavior of a container at runtime to ‘vbox’, ‘hbox’, or any of the Ext.layout.container types. Additionally you can set sizes dynamically by assigning values to the ‘flex’ property on items within a container.

Xtype

Ext JS provides a loosely typed data format called Xtype to allow you to pass trees of containers and controls as a single object. It is a very, very powerful technique and really makes building lots of UI components at all at once easy. In Flex and Android I used declarative XML for component initialization and layout but these are closely tied into compiler workflow. In an interpreted system, you want to leverage a format that is rapidly parsed and supports remote loading. As Xtype is a JavaScript Object Literal, it is parsed at the speed of the JavaScript engine in use. On both mobile and desktop targets, this is very fast. While you can create components independently, using xtype for component generation is much more productive once you get the hang of it. Here are 3 xtypes passed within an Array:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript .imp {font-weight: bold; color: red;} .javascript .kw1 {color: #000066; font-weight: bold;} .javascript .kw2 {color: #003366; font-weight: bold;} .javascript .kw3 {color: #000066;} .javascript .co1 {color: #006600; font-style: italic;} .javascript .co2 {color: #009966; font-style: italic;} .javascript .coMULTI {color: #006600; font-style: italic;} .javascript .es0 {color: #000099; font-weight: bold;} .javascript .br0 {color: #009900;} .javascript .sy0 {color: #339933;} .javascript .st0 {color: #3366CC;} .javascript .nu0 {color: #CC0000;} .javascript .me1 {color: #660066;} .javascript span.xtra { display:block; }

[ { xtype: 'container', html:'First Item', flex:1 } ,
{ xtype: 'splitter' } ,
{ xtype: 'container', html:'Second Item', flex:1, maintainFlex:true } ]

If this were assigned to a container’s ‘item’ property, it would render a split view. I found this very simple and elegant, compared to the complexity in other frameworks.

Styling

I have styled components in several frameworks. In Ext JS, abstracting style properties as runtime loaded CSS for all components is very powerful. Better still, generating CSS from the provided SASS/Compass source formats makes building a global style change quite easy. In both Flex and Android, style is baked in at compile-time and is less flexible than a runtime interpreted model. While I now feel comfortable generating a base color change in Ext JS, it will take me some time to absorb the finer details of CSS styling of the components. This is easily one of the more complex areas of the framework and will take me time to fully understand.

Hello Sencha

Given this is my first real post on Ext JS on Sencha.com, I thought it would be good to post the simplest example possible. The example creates a window with an image inside. Feel free to paste into a local html file and open in a browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Sencha</title>
    <!--styles-->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">
    <!--extjs 4.0.2-->
    <script type="text/javascript" src="http://cdn.sencha.io/extjs/4.1.0.b1/ext-all.js"></script>
    <!--app-->
    <script type="text/javascript">
      //define the application
      Ext.application({
        launch: function() {
          //create a window
          var win = Ext.create( 'Ext.window.Window' , {
            title: 'Hello Sencha',
            height: 285,
            width: 250,
            layout: 'fit',
            //add an image to the window by an xtype object
            items: {
              xtype: 'image',
              src: 'http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png'
            },
            listeners:{
              beforehide: function( com, owner, opt ){
                alert('hiding win');
              }
            }
          });
          //show the window
          win.show();
        }
      });
    </script>
  </head>
  <body></body>
</html>

I will continue to document my journey learning Ext JS and Touch frameworks as I go. There is clearly a lot to learn and hopefully sharing my experience will help others new to Sencha. More to follow.

.right, .alignright { float: right; margin: 0 0 10px 10px; } .left, .alignleft { float: left; margin: 0 10px 10px 0; }

NFL.com’s Ryan Cannon (@rcanine) joined us at YUIConf 2011 to share the story of why NFL.com chose YUI over jQuery, how they migrated a large codebase from Prototype to YUI 3 on a tight schedule, and how they use YUI to create websites and mobile apps for one of the world’s most popular sports leagues.

Links

• View in HD on YouTube
• Slides
• Full YUIConf 2011 Playlist on YouTube

Welcome to 2012 – The Year of Dojo!  We are expecting an amazing year! Make SitePen your one stop shop for all of your web application needs; Dojo workshops, JavaScript support and web app development.  Together, with SitePen, you will meet your 2012 goals!  When you’re happy, so are we.

Learn Dojo - We are dedicated to providing you with the highest quality Dojo Toolkit workshops in the industry.  Whether you want to learn the basics of Dojo or sharpen your Dojo skills, we have a workshop just for you.  All of our Dojo Workshops are taught by our Dojo experts.  We promise you won’t be subjected to listening to some trainer who can’t live without his slides.  Wondering if our Dojo Workshops will cover Dojo 1.7?  The answer is yes!

Ready to learn Dojo?  Check out our full list of 2012 workshop dates and locations.  Sign up for any of our 2012 Dojo Workshops by January 31, 2012 with promo code IHEARTDOJO and get 10% off!

Here to help - Did you know we also have support plans to fit every size and every need?  No matter which support plan you choose, our expert engineers will help you by answering questions, resolving bugs, and solving problems. We offer no-hassle ways to get in touch with your SitePen Support team, which means no waiting on hold, or having to explain your issue over and over again until you get to the right person.  With us, you always have access to the right people. If your project runs in to a critical issue, our expert SitePen engineers will jump in to help you quickly get back on track. Oh, and yes, all of our support plans include support for dGrid and Dojo 1.7! Having a SitePen Support plan is preparing for possibilities.  Even football teams have backup quarterbacks.

From 2 support hours to 200 support hours, SitePen has a support plan to fit your needs.  Take a look!

Perfect match of design and development - We are your one stop shop for your next project, including mobile web applications! Our expert team will take your web application from concept to launch.  We’ve mastered the front end and are here to help you build powerful, simple, and usable web apps, every single time.

Whether you need a traditional web application, mobile web application or installable mobile web app store application, SitePen can help!

Still not sure how we can help you?  Contact us today! (You can even call us if you want.)  Celebrate 2012 – The Year of Dojo!

Related posts:

1. We’ve (unofficially) declared 2012 as the Year of Dojo!
2. SitePen. Dojo Skills. Seattle.
3. Dojo. Dontcha know? SitePen. Dojo. Minnesota.

SitePen offers beginner, intermediate, and advanced Dojo Toolkit workshops to make your development team as skilled and efficient as possible when creating dynamic, responsive web applications. Sign up today!

I’m not really sure what I was expecting from The Tangled Web: A Guide to Securing Modern Web Applications. Having learned more about web security in the past year, I suppose I was hoping for a more in-depth treatment of common web application security issues. In my mind, I pictured a chapter on Cross-Site Scripting attacks and mitigation steps, a chapter on Cross-Site Request Forgery and what to do about it, etc. Instead, the book tackles the security problem with an exhaustive and dry examination of all the technologies that make up the web. Though interesting technically, it’s very easy to get lost in these details and end up at the other end unsure of how the description relates to real-world security issues.

For instance, the author goes into how a URL is parsed and the differences between how different browsers parse URLs. That’s interesting information, but I’m still not sure what type of attacks I should look out due to these issues and how to address them if they do occur. The same treatments are given to HTTP itself, HTML, CSS, JavaScript, and other parts of web application stack.

One of the most frustrating aspects of this book is how browser names are frequently thrown around without version numbers. Saying “Internet Explorer” does something leaves me wondering if that was one of the many issues fixed in Internet Explorer 9 and 10 or not. While it’s fine to leave off version numbers when discussing Chrome, Internet Explorer just has far too many differences to make this useful.

I found the code examples to be incredibly terse, and in some cases missing completely. Case in point, a discussion of the sandbox attribute for <iframe> doesn’t have a single code example showing its proper usage. Certainly property usage is part of ensuring security. Other sections of the book suffer from the same code-terseness to its detriment. A lot of the topics could stand more actual examples.

Which brings me to my overall issue with the book: it reads more like it was written by a researcher for a researcher. This really isn’t a book to help you solidify your web application security. In fact, I’m not sure I picked up any new techniques from reading the book at all. My head is now filled with trivia knowledge about web browsers that I’m unable to practically apply to my work, which is frustrating. The only attempt the author makes at giving actionable advice is on the “checklist” at the end of each chapter. The checklist contains way-too-terse descriptions of how to mitigate certain attacks…but without practical code examples, the bullet points are quite lost.

This book seems mostly targeted at amateur security professional who need a good brain dump on all the various flaws in internet protocols and technologies in order to get their feet wet. It’s definitely not for web developers looking to improve their web application security, making the subtitle, “A Guide to Securing Modern Web Applications”, a complete misnomer. If anything, it’s a guide through current web technologies showing you that the internet is a mess and leaving you to wonder how to fix it.

I really, really wanted to like this book, but unfortunately, I just didn’t find it practical enough to recommend it as guide for most web developers. If you don’t understand security issues at all, then this is probably a good book to pick up, but otherwise, you’ll need to go elsewhere to find practical advice.

Shim was developed within the Boston Globe’s media lab as a way to study how Web sites look on various devices and browsers. A laptop intercepts all wifi traffic – this is redirected to a custom node.js server – which inserts a javascript, or “shim,” at the head of each web page that is visited.

The shim, once loaded in a device’s browser, opens and maintains a socket connection to the server, according to to Shim’s developers. Shim was written in 2011 by Chris Marstall, Creative Technologist at the Boston Globe. The software has been open sourced. Write the Shim originators on git.hub:

Whenever a new page is requested, the page’s URL is broadcast to all connected browsers, which then redirect themselves to that URL, keeping all devices in sync. Shim info is available on git.hub.

Welcome to the weekly blog post. This time it's a short one, as we want to refer to and feature community achievements - in individual blog posts. One of those is the LIBERATED project by Derrell Lipman. Check it out to get to know about exciting new ways of client-server communication, with a corresponding, transparent programming model.

There are more individual posts about community projects and real-life app examples to be published in the future, so stay tuned.

Bugfixes

For a complete list of framework tasks accomplished during the last working week, use this bugzilla query.

C U.