Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

60 Not To Be Missed Web Development Articles - June 2008 Web Builder Zone

DZone's Guide to

60 Not To Be Missed Web Development Articles - June 2008 Web Builder Zone

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

June was a bumper month with a huge amount of awesome articles and tutorials posted across the web. Below is a list of ... not to be missed articles from around the web that relates to web development. This month we cover topics such as Ajax, RIA, CSS, JavaScript, PHP, various tutorials and much, much more. Enjoy!

Web designers should do their own HTML/CSS

The web is a world of constraints, the materials of HTML and CSS flex and give in ways that encourage particular styles. And being able to understand and bend within that scope is what makes a design feel native. Designers who work directly with the materials rather than through simulated environments like Photoshop are at a distinct advantage for making that happen.

Using Snort: Part 1: Installation and configuration

Web sites are the most vulnerable, and therefore the most hacked, bits of technology on the Internet. Enter Snort, a free and open source Network Intrusion Prevention System (NIPS) and Network Intrusion Detection System (NIDS) tool for managing and preventing intrusions to your Web sites, applications, and Internet-enabled programs. Learn how Snort can protect your sites, as well as analyze what's really going on with your networks. By the time you're done, you'll be ready for some of the more advanced intrusion detections that Snort offers, and for optimizing your site and network based on the information that Snort provides.

XML Forms Generator

This standards-based, data-driven Eclipse plug-in generates forms that adhere to the XForms 1.0 standard, using as a starting point either Web Service Description Language (WSDL) documents or XML instance documents having optional XML Schema backing models. The generated forms adhere to the XHTML and XForms 1.0 standards and can be viewed in popular XHTML and XForms renderers.

The Next-Gen Web: HTML5 - Will We Ever See A Real Standard?

Last week we looked at how some browsers and plug-ins were adopting storage-related API's that are a part of the new HTML5 draft specification. While Gears, Opera and Webkit have implemented structured storage API's, the remainder of the HTML5 spec currently remains mostly unimplemented and also in a state of flux. HTML5 is a super-sized effort to bring all the browsers under a single, standard markup language and set of API's - but with Microsoft, Adobe and others racing ahead with their own next-gen web technologies, will we ever see a real HTML5 standard?

Writing an Interface Style Guide

Take a look at any CSS-based website design gallery, and you'll see it's obvious that beautiful interfaces are being designed and developed in amazing quantities. I frequently look to these sites for inspiration and, beyond a nice design and beautiful code, there's usually something common about these sites: they're new. Unfortunately, it's also common that beautiful interfaces don't stay beautiful. An interface's design disintegration can be frustrating to deal with, especially for the designer and developer of that interface; it can be particularly frustrating for the designer and developer who can no longer access the site to fix the issues.

Saving the Spark: Developing Creative Ideas

Ideas. They're at the heart of every creative process. However, almost no really good ideas are flashes of inspiration. They may start that way—a single glimmer of something special—but in order to work, they need to be honed. Like a really good cheese, they need to mature. Indeed, the "flash of inspiration" idea—the Eureka moment—is only part of a longer process that, if ignored, will see most ideas simply fizzle out.

JavaScript Fading Tooltips (Only 2KB)

This is a lightweight (2kb) JavaScript tooltip script that is created by Leigeber, a web development blog having nice JavaScript resources. The tooltip script has a fading animation whose alpha & speed can be set easily.

Same DOM errors, different browser interpretations

In this article I will explore the DOM, look at some common kinds of errors that are found in the DOM and how different debugging tools can be used to find such DOM errors and make sure that the DOM is interpreted consistently across browsers. Along the way, I'll introduce Opera Dragonfly, the new kid on the web development debugging block, and show how it performs.

Why we skip Photoshop

When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup. Here are a few reasons why we skip photoshop...

ensure - Ensure Javascripts/HTML/CSS loaded on-demand when needed

Ensure is a tiny javascript library that provides a handy function ensure which allows you to load Javascript, HTML, CSS on-demand and then execute your code. Ensure ensures that relevent Javascript and HTML snippets are already in the browser DOM before executing your code that uses them.

IBM Database Connectivity for JavaScript

IBM® Database Connectivity for JavaScript™ is middleware that enables Web clients to directly access server-side relational data without compromising enterprise security. On the client, IBM Database Connectivity for JavaScript consists of a JavaScript API and library that can be used by Web applications without special browser plug-ins. On the server, the IBM Database Connectivity for JavaScript gateway, written in PHP, is an adaptor layer that mediates between IBM Database Connectivity for JavaScript and relational databases and provides functions such as operation forwarding and security. Web 2.0 applications can thus use IBM Database Connectivity for JavaScript to access relational data as a first-class construct instead of through ad hoc protocols.

Putting the CSS Friendly Control Adapters to work

The CSS Friendly Control Adapters 1.0 override the default HTML generated by the ASP.NET Web controls to provide a more standards-based approach to presentation via CSS. I will show you how to use the Menu control in your ASP.NET applications. I begin with an examination of setting up the environment for using the CSS Friendly Control Adapters in your applications.

Which is the Hottest Java Web Framework? Or Maybe Not Java?

I haven't sat down in a long time and actually tried to determine a trend in the Java web framework arena. The uncountable number of "easy to use" Java web frameworks that are out now adays is too many to even start to pay attention to. Struts 1 came out at a perfect time in history... where your only choice was either hand-coding everything or Struts... and most people went with Struts.

Debugging: A Beginner's guide

Everyday the forums see probably hundreds of topics posted where the problem is a fairly simple error. These generally fall in 4 categories:

  • Syntactical/parse errors
  • Fatal errors, warnings and notices
  • Database errors
  • Logical errors

As a beginner, it can be difficult to find and solve these errors. By tackling each of these in turn, I hope to teach you some methods of finding and solving them. So we'll get started with syntactical errors on page 2.

Rollin' With Google App Engine, 80's Style

Building a web application with Google App Engine is quick and easy, and you have the power of the google distributed content delivery network and the 'BigTable' database at your disposal. So what's it good for?

Block Quotes and Pull Quotes: Examples and Good Practices

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.

Taming the Beast (a.k.a. how to test AJAX applications) : Part 1

This is the first in a two part blog series titled 'Taming the Beast: How to test AJAX applications". In this part we discuss some philosophies around web application testing and how it should be done the 'right' way. In part 2, we walk through a real example of designing a test strategy for an AJAX application by going 'beyond the GUI.'

Module Pattern Provides No Privacy...at least not in JavaScript(TM)

The module pattern has been discussed many times and has shown how ECMAScript has the ability to encapsulate data as "private" variables by using closures. Today, in a comment on my blog, a reader, haysmark, points out that Mozilla's JavaScript(TM), the implementation in Firefox, has a second argument extension to eval that allows external code to spy on otherwise private variables.

Coding standards: What are they and why should you use them?

Over the last few years, front-end web development has grown from a semi-straightforward approach (that is, individual HTML pages sprinkled with Flash and JavaScript) to a much more complex application-based design (that is, Ajax, Flex, and Adobe AIR applications). The level of complexity is similar to what desktop software developers have been dealing with for years. Yet with this complexity, many front-end developers still look at web development as it was in the old days and often do not take the time (or don't know how) to implement coding standards within their applications.

2008 Design Trends

About a year ago, I compiled a huge list of artistic sites. It seems like the trend has carried on in 2008 and is growing stronger (thank God the glossy style is gone). So what's hot now? Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds (glossy gradients are not "in" this year). Another trend to be on the lookout for are the vintage and retro styles which I've posted earlier this year. Here is a list of 82 sites picked from Best Web Gallery that show the current design trends.

Minify CSS/JS ant revisited using YUI compressor

I have revisited adding Yui compressor into my work's ant build script to minify JS and CSS scripts. The current jar was yuicompressor-2.3.5.jar . It took a lot of playing around but I finally stumbled on how to get it to work. Here is the snippet for the yuicompressor. I had to jump through a couple hoops like overriding the current js/css scripts with the optimized js/css scripts. I'll release a full working copy in a zip, you can run against your webroot. We achieved an average 18% compression rate for all our js/css files.

30 Free Website Icons, Blog Icons, Symbol Icons

Looking for free blog icons or website icons? I created 30 free icons for anyone needing small pixel icons: 15 16x16 icons and 15 matching 10x10 icons. Download them all or by each size via the ZIP files within today's post.

30 More Free Blog Icons, Website Icons, Symbol Icons

Since my previous free blog icons giveaway has been so popular, I decided to create more - this time 30 free icons in a monochrome, silvery metal color scheme that will blend well with a wide range of blog theme colors. Like before, these small pixel icons include: 15 16x16 icons and 15 matching 10x10 icons. Download them all or by each size via the ZIP files within today's post.

How To: Resizeable Background Image

My friend Richard recently came to me with a simple CSS question:

"Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline <img> tag."

Wow, that's a tall order. My first thought was... uhm, No. But of course this is just the kind of challenge I enjoy, so I set about to thinkin'. Ultimately, I found a pretty good solution and we turned it into a pretty neat little project. First, check out the finished project, then I'll show you how it was done...

HTML 5 vs. XHTML 2: An Article Roundup and Poll

Much like CSS3, widespread adoption for the next-gen web languages is a distant mirage. Still, it is important to stay educated on these things and even participate in these early stages while things are still malleable. Rather than re-hash everything here, here is a roundup of articles talking about the two major new "competing" formats. There is also a new poll in the sidebar where you can cast your vote as to which one you prefer at this point, or if you just don't care.

Faux Absolute Positioning

There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it's time to share the technique with the rest of the world and see how we can work together to improve it. I'm calling it "faux absolute positioning" after the faux columns technique that simulates the presence of a column.

Web development with Wicket, Part 1: The state of Wicket

Wicket is a lightweight, component-oriented framework that does much to bring the easy, intuitive interfaces found in desktop applications to Java Web development. In this series Nathan Hamblen introduces key aspects of Wicket that differentiate it from other Web application frameworks. If you're new to Wicket, this series will serve as an accessible and engaging introduction; if you're already using the framework you'll have fun with the well-crafted, hands-on exercises. This first article investigates Wicket's virtual state, demonstrating the many ways Wicket accommodates both stateless and stateful Web application development.

The pursuit of APIness (part 1)

Say you need to upload a set of 100 pictures on Flickr everyday. Not so difficult: you login to your Flickr account and start to manually upload the pictures. After a few days though, you start to feel a bit weird about having to spend all this time to manually upload files at an era where computers, after all, are supposed to replace us for repetitive tasks. Say your daily sets of 100 files are prepared in advance: wouldn't it be great if your computer could upload them to Flickr on its own?

The pursuit of APIness (part 2)

Last week we looked at web forms and we observed what was happening under the hood in terms of requests and data transferred; as an example, we tried to emulate a specific web form through a PHP script which sent a request to the web server and parsed the result to extract relevant information. The conclusion was: it's possible, but it's not clean. This week we'll see how transparent automation can be.

Programmatically Setting Control Adapters for URL Rewriting and AJAX

Anyone who has spent time developing URL rewriters will know that these do not always play nicely with AJAX components. This is because the HtmlForm element written out by .NET uses the actual URL for post-backs, and not the page's virtual URL that you are trying to preserve. This article discusses how this can be resolved cleanly, and also shows how control adapters may be set programmatically using Reflection. This is useful for creating plug & play components such as URL rewriters in order to minimise the amount of configuration required.

Preloading Images with jQuery

Just the other day I was chatting with a colleague about how to go about pre-loading images before rendering a cool JavaScript-driven animation; Scott Jehl from the Filament Group wrote in to tell us about a jQuery plug-in that they use for just that purpose:

jsTree: jQuery-based JavaScript tree component

Ivan Bozhanov walked us through his jQuery-based tree component recently. The state of trees out there is interesting. YUI! has a nice, stable tree control but Dojo's once feature-rich tree has been replaced with a fairly basic tree (i.e., doesn't appear to have in-line editing and drag-and-drop still seems flakey; Dojo guys, correct me if I'm wrong) at the moment and jQuery UI lacks an official tree component (though a few tree plug-ins are out there); as you might expect, Ext JS has a nice tree component. Let me highlight a few areas where jsTree stands out. First, it has some basic features that many trees out there lack

The Wheres and Whens of Users' Expectations

Recently, a designer asked us where users expect to find the sign-in box on a web page. Some sites put it on the left and some put it on the right. Has our research shown that one position is better than alternative positions?

A question like this brings up a bigger question of designing for the user's expectations. On the one hand, users, being neither new to the planet nor new to technology, have developed expectations on where certain things should appear. Designing to those expectations can reduce the user's cognitive load and let them focus on their task.

International Address Fields in Web Forms

As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn't come as much of a surprise that one of the most common questions I get asked about Web form design is: "How do I deal with international addresses?"

Migrating from WCAG 1.0 to WCAG 2.0

This document has been prepared to help HTML developers and others who are familiar with the Web Content Accessibility Guidelines Version 1.0 (WCAG 1.0) to map their current knowledge and practices with the WCAG 2.0 W3C Candidate Recommendation of 30 April 2008.

More CSS Performance Testing (pt 3)

This is now the 3rd part of my current adventures in looking into CSS performance and how it performs in various states across various browsers.

JavaScript creator ponders past, future

Brendan Eich created JavaScript, the popular scripting language being used to liven up Internet applications. Coupled with XML, JavaScript has become part of the AJAX (Asynchronous JavaScript and XML) technique popular in Web development. InfoWorld recently met with Eich to talk about JavaScript: where it has been and where it is headed. Eich, who serves as chief technology officer at Mozilla, also commented on other languages and about working with Microsoft in developing standards.

30 Essential PDF Documents Every Designer Should Download

Well it took me a lot longer than I had originally expected but I was able to track down the original links to more than thirty PDF documents that I have collected over the past couple of years. I have personally archived every one of these files due to the high quality of content. No matter what you call them; ebook, white paper, or resource they all contain information that no designer should go without

jQuery Resources - 8 essential sites

The use of javascript has been a contentious issue in the world of web development over the past few years; too much animation can give off a 'tacky' feel, whereas complete static sites just seem a little 'under-done'. With the rise of the equally contentious concept of web2.0, the use of javascript/ajax has come back to the forefront. However, instead of bloated javascript code encroaching into your (x)html, we are now treated to fancy javascript libraries from which we can call lines. No longer are pages flying about all over the place, smooth transitions and sleek drop-downs are on the menu. Today we are looking at the lovely jQuery library, and without further delay - Top jQuery Resources.

User-Centered Design and Usability: Its Role in a Project

The role of the User-Centered Design (UCD) process is vital to the success of site and/or application development yet it remains something of a foreign concept. It is also frequently bundled in with "Usability" and tacked on to the end of a project instead of taking its proper place as the underlying foundation. So, what is User-Centered Design and how should it be applied?

15 Tools to Help You Develop Faster Web Pages

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you're concerned about your web pages' speed or want to make sure you're in tip-top shape before starting or launching a project, here's a few useful, free tools to help you create and sustain high-performance web applications.

Using jQuery and CodeIgniter for a AJAX Login

One of the most problem when the people starts coding is the needed of another to see what to do. The user guide of CodeIgniter is one of the best, okay the best, I've ever read, but sometimes the newbies needs more. Now it's my time and I'll try to explain how to do a little AJAX Login.

CSS Resources - 8 Frameworks

Well, I guess I'm going to work backwords. There are three layers to the frontend; behaviour, presentation and markup. We've done behaviour so we're onto presentational now. CSS Frameworks have been all the buzz lately, we've had ones that use python ways of code then regenerate it as css, ones that are specifically for forms and an awesome one which is just for styling print!

23+ Impressive Tools for Faster Javascript/Ajax Development

Javascript applications are still one of the most complex issues when it comes to web-development. Many tools and applications could make your developing life pretty fast and simple. Today we wanted to share with you a wide range of tools and applications that could really help you build, test and debug Javascript and Ajax applications. Let us know your experience with the tools listed here or others that are not.

Introduction to the Google Web Toolkit

At the Google Developer Day conference 2008 in Sydney, Lars Rasmussen, the head of engineering for Google Australia gave an overview of the Google Web Toolkit (GWT) with his presentation "AJAX with Google Web Toolkit".

Web Service to dojo.data Store in 4 Easy Steps

A very useful feature of Dojo is the dojox.data.ServiceStore data store. It allows you to layer a dojo.data API on top of any web service, opening up a world of uses from your own client-side components. Kris Zyp briefly mentioned the topic in his recent article on JsonRestStore, and the past couple of weeks have seen a bunch of refinements to the component to get it ready for next month's Dojo 1.2 release. Let's take a quick look at how to make it work with the web service of your choice.

Rich Internet Applications: VM Runtimes or Browser Standards?

A great deal of commentary followed Apple's announcement that it would use the Sproutcore JavaScript framework for its upcoming online offerings. Most of the debate centers around the question of whether a virtual machine-based environment or reliance on browser standards are preferable when developing rich Web apps.

Microformats and jQuery

I've been reading a book on Microformats, written by John Allsop. I'm not very far into the book yet, but so far it sounds very interesting. I've read a fair bit about Microformats in many blog posts, and the microformats website itself is very informative. While I understand and appreciate that microformats are important for the greater good of the internet infrastructure, as a business owner and manager of the development team, I've been struggling to find a business proposition as to why we should start using them in our website development.

How to bridge PHP and Java on Windows IIS

In a previous tutorial it was shown how to set up the php/java bridge on Windows using the Apache webserever. In this tutorial you learn how to do the same using Windows IIS web server. Though this is a beginners tutorial you are expected to have some familiarity with IIS. Notice that the version of the PHPJava bridge
used is the older version 3.2.1. Though not the latest version this is the most Windows friendly software. It contains a dll file that surpasses the one distributed in PHP 5. There is also documentation to be found and you can ask questions about usage on the mailing list.

How to bridge PHP and Java on Windows with Apache Tomcat

Want to run PHP and access Java? Here's how to do it on Windows XP using Apace and Apache Tomcat. Apache Tomcat is a Servlet container developed at the Apache Software Foundation (ASF). Tomcat implements the Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems, and provides a "pure Java" HTTP web server environment for Java code to run. Tomcat should not be confused with the Apache web server, which is a C implementation of a HTTP web server; these two HTTP web servers are not bundled together. Apache Tomcat includes tools for configuration and management, but can also be configured by editing configuration files that are normally XML-formatted.

AJAX on Rails 2.1 Tutorial

Ajax enables you to retrieve data for a web page without having to refresh the contents of the entire page. In the basic web architecture, the user clicks a link or submits a form. The form is submitted to the server, which then sends back a response. The response is then displayed for the user on a new page.

MooTools and Rails CSRF Protection

"Cross site request forgery" is also known as CSRF, XSRF or just request forgery (more at wikipedia and sans.org). It's a method of attack toward web applications- Rails 2.0 introduced a defence and Rails 2.1 enabled that defence by default. Call form_for...

Some new CSS features in Firefox 3

Our developer documentation already has a list of the new CSS features in Firefox 3. I'd like to talk in some more detail about some of the more interesting or useful ones.

Update: A New And Improved jQuery Script to Automatically Preload images from CSS

When we first launched the lab, we released a jQuery plugin that automatically preloads all images referenced in CSS files. We've found the script to be incredibly helpful in developing snappy applications where images are always ready when we need them. This post describes a significant update to the script which will make it even easier to integrate in existing projects.

How To Write Modular CSS, Round 1: The Preparation

Welcome to the first installment of How To Write Modular CSS. In this round, we're going to cover what's probably the most important piece of this entire discussion: preparation. As with just about everything in life, designing and coding for the web is wrought with multiple methodologies — some good, most bad. This of course is my interpretation of the most useful methods, but while its based on a lot of experience, I am certain there are better ways and potentially even errors and a lot of it will be recycled information. The goal is here though is less to be revolutionary, and more to teach efficiency, productivity, and method. Most of all, I hope you'll tear down everything you find here, rewrite it, talk to me about it if you think it's crap, or ask questions if you don't understand. Better code is bred from collaboration and reinvention.

CSS Editors Reviewed

We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it's time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding.

Ultimate multi-column liquid layouts (em and pixel widths)

My Perfect multi-column liquid layouts that use percentage widths have been very popular and many people have emailed me asking for versions using pixel and em widths, well they are finally finished. I have also included an additional 'blog style' design.

This series of layouts use pixel and em widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info

CSS: Simple Rules for Better Organization and More Efficiency

"Organization is not everything, but without organization, everything is nothing," one of my teachers used to say, and right he is. Almost everything benefits from organization, and so does work with CSS - especially when working with many people. During the years I took special care of organizational standards mainly for HTML and CSS (German readers might know the coding guidelines I created for GMX and Aperto), and there should be enough "proof of concept".

XHTML 2 vs. HTML 5

Rewind a little more than 10 years to December 18, 1997. Internet Explorer 4 had been released 3 months earlier. The Mozilla Foundation had not yet formed, and their Firefox web browser was years away from public release. There was no XMLHttpRequest... there wasn't even XML. On that day, over a decade ago, HTML 4.0 was published as a W3C recommendation.

10 Examples of Beautiful CSS Typography and how they did it...

Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS.

Cutting Use of Zend_Log in Half

As part of the framework we use at work, we borrow what we feel are the best components out there and logging is a key part of that. Logging should be simple to setup, easy to use and should minimize work on the developer. After all, you are going to do a lot of logging, right? We use Zend_Log exclusively and while I like it when coupled with Zend_Registry you've always got the following two lines of code

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}