Script Junkie | Script Articles

Lockdown Pt. 3: Are Our Applications Secure Yet?
In this article, we are going to test to see if our security controls work. Any time you are securing an application you need to confirm that your security checks are working. This testing should occur early and often throughout your development proc... More...
by Tim Kulp

jWorldmaps: The Anatomy of a jQuery Mapping Plugin
Ever want to know how to write a jQuery plugin? For some of you, the answer may be yes, because learning anything new and cool is what drives you. For others, the answer may well be no, because learning in the abstract isn’t as important as solving t... More...
by G Andrew Duthie

Building Mobile JavaScript WebApps With Backbone.js & jQuery: Part I
In Part 1, I'll be covering a complete run-down of Backbone 0.5.2's models, views, collections and routers but also taking you through options for correctly namespacing your Backbone application. I'll also give you some tips including what scaffoldin... More...
by Addy Osmani

Lockdown Pt 2– Sanitization and Data Security
In this second lockdown article, we will continue to address simple solutions for improving our application’s security in this article as we examine Data Sanitization and Data Security. At the end of this article you will be able to clean data coming... More...
by Tim Kulp

CSS3 Animation With jQuery Fallbacks
In this article, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported.
by Addy Osmani

Lockdown Pt 1– Assessing and Securing Legacy Client-side Applications
Welcome to Lockdown. In this three part series, we will examine how to build security into a legacy application without rewriting the entire system.
by Tim Kulp

Managing Application Resources with the Flyweight Pattern
In design patterns, the flyweight is considered one of the most useful classical solutions for code that's repetitive, slow and inefficient - for example: situations where we might create large numbers of similar objects.
by Addy Osmani

MVVM and jQuery: Designing Maintainable, Fast and Versatile Sites
Choosing a right design pattern to follow when building such web applications is key for designing maintainable, fast and versatile sites. In this post, I would like to suggest an MVVM design approach for building pure client-side web applications wi... More...
by Saar Yahalom

JavaScript Attack/Defend
No one intentionally builds insecure software but often a lack of security knowledge leads developers to build vulnerabilities into their applications. In this article we are going to examine two web security attacks, how they are executed and how to... More...
by Tim Kulp

How, When, And Why Script Loaders Are Appropriate
Script loaders are all the rage these days. Every time someone releases a new one, it's met with both excitement and groans of 'so-and-so already did that' on the Twittersphere. It is indicative of the need we have, and the complexity of the problem.
by Alex Sexton

Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability
Design patterns are an invaluable tool for modern JavaScript developers, providing us with generalized reusable solutions to commonly occurring problems in application design that we can apply to our own problems.
by Addy Osmani

The Ins and Outs of Script Concatenation
Efficient script management is all about that sweet spot where we can both manage our JavaScript codebase as a cleanly-structured source tree, and serve it with the right balance of file count and file size (before network compression, by the way).
by Cristophe Porteneuve

Introduction to Complex UIs Using jQuery UI
Building a web application with jQuery makes the task easier. Similarly, building a web application with a complex UI is made easier with jQuery’s sister project jQuery UI. With jQuery UI we have a collection of interactions, widgets and a theme buil... More...
by Ralph Whitbeck

Extending Your jQuery Application with Amplify.js
appendTo has recently released a set of JavaScript components that can assist with common problems in front-end development. The library was developed to "Amplify" your current jQuery skills and provide some missing components that are impo... More...
by Elijah Manor, Andrew Wirick

Building Cross-Platform Apps Using jQuery Mobile
jQuery Mobile introduces a cross-platform and cross-device framework for developing mobile applications. Just as jQuery changed the way we wrote JavaScript , jQuery Mobile will change the way we build mobile web applications.
by Nick Riggs

How to Build Asteroids with the Impact HTML5 Game Engine
Over the past couple years or so there has been a dramatic rise in the number of HTML5 games around on the Web, thanks in no small part to the HTML5 gaming engines that are making their development much easier.
by Rob Hawkes

Creating Responsive Applications Using jQuery Deferred and Promises
Today we’re going to explore the concept of deferreds - an important feature found in JavaScript toolkits such as dojo and MochiKit, which recently also made its debut to popular JavaScript library jQuery.
by Julian Aubourg, Addy Osmani

Automating JavaScript Testing with QUnit
QUnit was born May 2008, out of the testrunner embedded into the jQuery core repository. It got its own name and documentation and a new home for the code.
by Jörn Zaefferer

Plugin to Data Binding with jQuery
Today’s internet browser is a powerful application engine running the software of tomorrow. Data is flowing to the browser from all directions (online, local storage, etc…) with robust options for storage and retrieval. Unfortunately, JavaScript stil... More...
by Tim Kulp

Improving User Experience: Preload Images
With the increasing trend towards building desktop-like experiences, the number of images being included into web sites is growing dramatically. Just think about all of those dialogs, tabs, tooltips, sliders or calendar controls which are necessary t... More...
by Jan Lehmann

IndexedDB – The Store In Your Browser
If you use your web apps as much as your desktop applications, I am sure you hate the part where you have to be online to get them to work. Well, the HTML5 set of standards may have a solution.
by Parasuraman Narasimhan

Test Driven Development: Top-Down or Bottom-Up?
Test-Driven Development is a programming process where unit tests are used to specify the behavior of the system prior to writing the actual implementation. TDD for JavaScript has been covered on ScriptJunkie previously by Elijah Manor. In this artic... More...
by Christian Johansen

Planning, Cheating and Faking Your Way Through JavaScript Tests
Good unit tests are focused, fast and isolated. Unfortunately, the code to test sometimes depends on other code that may comprise performance and/or isolation. In this article we will explore some of those cases, and how we can deal with them by plan... More...
by Christian Johansen

Unit Testing 101: Are You Testing Your JavaScript?
Of course you are testing your code. Nobody writes any significant amount of code and drops it into production without ever running it. What I want to challenge you on in this article is how you are doing your testing. If you are not already automati... More...
by Christian Johansen

Cross-domain Ajax: Implementation and Considerations
No Ajax features would be possible without the XmlHttpRequest (XHR) object that Web browsers started supporting about a decade ago. By using a script created instance of the XHR object, you can bypass the classic browser-led machinery that connects y... More...
by Dino Esposito

(pre)Maturely Optimize Your JavaScript
One of the most quoted maxims in programming comes from Donald Knuth in his famous paper “Structured Programming With Go To Statements”: Premature optimization is the root of all evil.
by Kyle Simpson

Internet Explorer 9 RC – Now with More Surprises!
I love surprises and I especially love seeing the web developer community’s reaction when they’re caught by surprise after the IE team releases new updates to Internet Explorer 9. With the release of the IE9 Release Candidate today, I’m expecting a n... More...
by Rey Bango

How to Write Maintainable OO JavaScript Code
Writing maintainable Object-Oriented (OO) JavaScript will save you money and make you popular. Don't believe me? Odds are that either you or someone else will come back and work with your code. Making that as painless an experience as possible will s... More...
by Ara Pehlivanian

Using the Dojo Toolkit with Microsoft’s WCF
For .NET developers, the Microsoft Windows Communication Foundation (WCF) is an excellent resource for creating service-based Web applications. Defining web services is relatively easy using WCF; using Visual Studio .NET, you can set up a solution wi... More...
by SitePen

Building Reusable Widgets with YUI 3
Using prepackaged widgets is a great way to speed up website development, but what happens when a widget you need isn't available out of the box and you have to create it yourself? YUI 3's extensible widget infrastructure eases many of the headaches... More...
by Ryan Grove

MooTools Class Creation and Organization
As web applications aim to become more dynamic, responsive, and feature-filled, they will inevitably need to include more JavaScript. As the amount of code increases, there is also an increase in the need to keep that code organized, extendable, and... More...
by David Walsh

Partial Application in JavaScript
Unless you've used a functional programming language such as ML or Haskell, concepts such as partial application and currying may be foreign to you. Since JavaScript supports first-class functions, once you understand these concepts, you can put them... More...
by Ben Alman

Namespacing in JavaScript
Global variables should be reserved for objects that have system-wide relevance and they should be named to avoid ambiguity and minimize the risk of naming collisions. In practice this means you should avoid creating global objects unless they are ab... More...
by Angus Croll

Using Geolocation in the Browser and with Hosted Services
If there is one thing that changed immensely in the last few years then it is that our users are not sitting in their own house in front of a stationary box any longer but are more and more using their systems on the go.
by Christian Heilman

Functional vs. Object-Oriented JavaScript Development
I won’t go too far from the truth if I state that JavaScript is such a flexible language that it can be used to write code that follows two radically different programming paradigms—functional programming and object-oriented programming (OOP).
by Dino Esposito

Ajax, ASP.Net MVC and Progressive Enhancement
Visitors to the web sites and applications we build are increasingly demanding an intuitive and responsive user interface. As developers it’s our responsibility to provide this for them. However we also need to bear in mind other users of... More...
by Andy Butland

Managing JavaScript Objects
You've read all the blog posts and books, and have sat through Douglas Crockford's hours of lectures, so you now know all there is to know about JavaScript objects. You're familiar with the various forms of inheritance, how prototypes work, and scopi... More...
by Nicholas Zakas

Sandboxed Natives: Have Your Cake and Eat It, Too
Sandboxed natives, named after Dean Edwards' post on sandboxing JavaScript, are JavaScript natives that can be augmented without affecting those on the global/window object. Although not explicitly tested, sandboxed natives should also be compatible... More...
by John-David Dalton

A New Beginning: Internet Explorer 9 Beta has Arrived!
Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup,... More...
by Rey Bango

Alternative Client-Side Storage using Sessvars.js
I was on a project where I needed a really flexible persistent data storage mechanism. Normally, this would be fairly easily handled via server-side data persistence code but in this case, each page of the app was basically a single-page XHR app in t... More...
by Rey Bango

LABjs & RequireJS: Loading JavaScript Resources the Fun Way
Updated 8/23: JavaScript resource loading has many different concerns that bear on how it is approached. An increasing number of sites and applications are relying on complex systems of JavaScript resources and many developers are hoping for easier,... More...
by James Burke, Kyle Simpson

Fixing Common Browser Issues: Dealing With Key Events
Key handling is often an after-thought in most web applications, so today we're going to shed some light on how to properly handle key events in your application. We'll cover what the key events are (keydown, keypress, and keyup), what they tell us,... More...
by Ben Lowery

Progressive Enhancement - Don't Jump Into the River without Testing the Depth First
Web development is still more like wild, wild web development. Innovation happens by pushing the boundaries of technologies and hacking and playing around with systems until we find a way to make things work we want them to.
by Christian Heilman

Using Web Storage on the Client-Side
With the new Web Storage specification we now have new, beefed-up options with localStorage and sessionStorage, which utilize the same syntax but have different use cases, and the total storage space available is (at least) 5 MB!
by Robert Nyman

Prototypes and Inheritance in JavaScript
Forget everything you know about object-oriented programming. Instead, I want you to think about race cars. Yes – race cars.
by Scott Allen

jQuery, A Designer's Perspective
There are oodles of sites extolling the benefits of jQuery. From how lightweight it is to its support of CSS3 selectors to its simplicity. But for me, one of the things that made jQuery instantly stand out from other frameworks was its documentation.
by Emily Lewis

Internet Explorer Developer Tools: HTML
In one of my previous posts, I introduced the built in, Internet Explorer Developer Tools that come with Internet Explorer 8. Today, I want to take a deeper dive into the HTML Tab and what you can do with it.
by Pete LePage

An Introduction to the Internet Explorer Developer Tools
One the coolest features of Internet Explorer 8 that most developers don’t know about are the built-in developer tools. Think Firebug, except for Internet Explorer, and built by the IE Team, so you don’t have to download anything, install it, or enab... More...
by Pete LePage

Cross-Document Messaging and RPC
Even though we, for security reasons, most often do not wish pages from different domains to be able to communicate, sometimes we do. And then, we discover that there is no 'proper' way to do so - the current standards and the current technologies ar... More...
by Sean Kinsey

Html Forms, Ajax, ASP.NET MVC and You
Over the Web, most of the time clients interact with the Web server in two ways: posting the content of a HTML form and placing a GET request for the content pointed by a given URL. Both types of requests are usually handled by the Web browser and re... More...
by Dino Esposito

Shape Up Your Buttons with jQuery UI
A graphical user interface wouldn’t be the same without buttons. On the Web, browsers offer a default rendering for push buttons and other types of buttons. By using CSS styles, you can modify the visual rendering of buttons but each button remains o... More...
by Dino Esposito

Web Accessibility and WAI-ARIA Primer
There isn’t a lot of data currently available that quantifies how many websites today are truly accessible. There have been some reports, however, that suggest the percentage of inaccessible web sites is alarmingly high. I’ve even seen figures as hig... More...
by Emily Lewis

Optimizations For Improving Page Load Times
The issue at hand today is simply this: what are the weightiest optimizations that can be implemented when constructing web pages? This area of web development is best categorized as load-time optimizations. This article is going to examine the most... More...
by Cody Lindley

Cross-Browser Event Handling Using Plain ole JavaScript
Cross browser event handling is not a trivial task. Fortunately, most of the popular Javascript libraries abstract this process away. But what's hidden behind the scenes is a wonderful bouquet of cross-browser inconsistencies, together with workaroun... More...
by Juriy Zaytsev

Building and Maintaining Large JavaScript Applications
Just because JavaScript is simultaneously more flexible and faster than some of the established languages, doesn’t mean that you can’t have an established structure in your JavaScript apps. In fact, it means you get to decide your favorite way of cre... More...
by Alex Sexton

Introduction to the Reactive Extensions to JavaScript
Since I began in the industry (professionally anyways), I’ve been using JavaScript to knock out some pretty interesting solutions. Over the years, many people have tried to abstract over the language, taking such approaches as taking a statically typ... More...
by Matthew Podwysocki

Introduction to Stateful Plugins and the Widget Factory
The jQuery UI Widget Factory is a separate component of the jQuery UI Library that provides an easy, object oriented way to create stateful jQuery plugins. Plugins created using the Widget Factory can be simple or very robust as evidenced by the offi... More...
by Doug Neiner

History and Back Button Support
Developing interactive websites is great for usability, but one common pitfall of modern websites is the lack of History and Back button support when JavaScript libraries and AJAX techniques are used.
by Elijah Manor

Intro to Error Handling in Ajax Apps
Let’s face it. You’re most likely already doing some sort of Ajax in your current web application, and if you aren’t using Ajax, your clients probably want you to starting using it very soon. This article aims to explore the Ajax support in the jQuer... More...
by Elijah Manor

Use Cases for JavaScript Closures
Understanding the theory behind closures in JavaScript is important but being able to apply them in practice is just as paramount. In this article, I'd like to show you some of the examples of closures in practice. Most of these represent actual use... More...
by Juriy Zaytsev

Style in jQuery Plugins and Why it Matters
Most plugin authors are web designers or developers who have created some cool functionality that they want to share with others. Unfortunately, many plugin authors haven't spent enough time examining other people's code to see what really works and... More...
by Ben Alman

Doing the Right Thing - How to Use HTML, CSS and JavaScript in an Accessible Manner
In this article we will discuss some of the misconceptions about accessible web design and show how you can build a dynamic web search without sacrificing the usability or the universal access of your site.
by Christian Heilman

Integrating jQuery UI and ASP.NET MVC
In this article, I’ll show how to modify the standard project template of ASP.NET MVC 2 applications to incorporate jQuery UI functionalities. The final result is the skeleton of an ASP.NET MVC application whose front-end implements a jQuery UI tabst... More...
by Dino Esposito

How to Create Your Own jQuery Plugin
If you have never created a jQuery plugin, it takes just a few simple steps to get started. By following a handful of guidelines, you can develop a plugin that behaves and feels like a native jQuery method.
by Elijah Manor

Modal Dialog Boxes in jQuery UI
Of all the typical features of a Windows desktop application, the one that the new Web developer will likely miss most is a modal dialog box. In this article, I’ll review the technical issues related to creating such windows in a Web scenario and the... More...
by Dino Esposito

Using CSS Classes as Flags with jQuery
As you progress beyond using jQuery to add simple functionality and begin creating applications that take full advantage of JavaScript in the browser, a new set of challenges accompanies that additional complexity. One of those challenges is tracking... More...
by Dave Ward

Date Management Tools in jQuery UI
Even though we still lack a standard solution for dealing with dates in Web input forms, at least we can rely on a large number of proposals from a variety of sources within the community. Whether you simply need a basic date picker or are looking fo... More...
by Dino Esposito

Building a Data-Driven Tabstrip with jQuery UI
In this article, I’ll discuss how to build a tabstrip dynamically using information retrieved from a remote source. The remote data source—a Web service, for example—provides a block of configuration data read from a database or an XML file.
by Dino Esposito

Building a Data-Driven Accordion with jQuery UI
Collapsible panels are a frequent feature in modern, cutting-edge Web sites. They allow you to display a short highlight—the header—and keep other text hidden and available on demand. Many JavaScript libraries, including the AJAX Control Toolkit, now... More...
by Dino Esposito

jQuery Test-Driven Development
Many of you may be familiar with unit testing in other languages, such as .NET, Ruby, and Java, but this practice isn’t as frequently used in the JavaScript world. Because more client code is being placed on the browser to support richer UI experienc... More...
by Elijah Manor

Custom jQuery Events and Selector Filters
jQuery supports a wide variety of built-in events and selectors. But despite the rich functionality that jQuery provides, you eventually come to a spot where you need an event or a selector that isn’t supported natively. The good news is that jQuery... More...
by Elijah Manor

Six Things Every jQuery Developer Should Know
This article is not intended to be a beginner's guide to jQuery development. Instead, it examines some of the more nuanced situations you encounter during jQuery development.
by Elijah Manor

Creating an HTML-based Tab Strip with jQuery UI
Creating complex and compelling user interfaces for the Web has never been easy, and it probably never will be. A complex Web user interface requires enough work on the underlying HTML to compose the graphics you want and enough JavaScript glue code... More...
by Dino Esposito

How to Debug Your jQuery Code
In the past 10 years, more and more Web development has moved off the server and migrated to the browser, making a user's experience more responsive. Unfortunately, this transition hasn't been very pleasant for developers...
by Elijah Manor

Go Beyond HTML Forms With AJAX
Beyond the hype of improved user experience, more interactivity, reduced page flickering, quicker data transfer and all the other improvements AJAX promises, the key change that AJAX brought to the table is that it allows you total control over the s... More...
by Dino Esposito

Network

Content

Resources

MSDN Magazine Blog