Programming | Webdesigner Depot

5 Jan
Zurb’s newest offering for developers: Foundation
Programming, Web Design, Web Development
Tweet View Comments

Zurb has a long history of providing awesome web apps and resources for designers and developers. Their apps include Notable, Axe, Enroll, and Spur, among others.
Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.
Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.
Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project. Read more
9 Dec
An awesome HTML5 interactive music video
HTML 5, Interviews, Programming
Tweet View Comments

Designers and developers are pushing the envelope with what’s possible in interactive design on a continuous basis. And awesome new examples come out all the time.
One of the newest examples is an interactive music video for Evelyn, by ABBY.
It’s a fantastic site that gives you the opportunity to mix different instruments and vocal styles together, while the song is playing, for a completely custom experience.
We asked the developers how they created such an awesome interactive video, and got their tips for working on projects of this type. Read more
22 Jul
40 useful APIs for web designers and developers
Code, Programming, Resources
Tweet View Comments

An application programming interface (API) is a set of rules and specifications that software programs can follow to communicate or ‘interface’ with each other.
As developers are well aware, there are hundreds of APIs out there for doing almost anything you could imagine online. Some are better than others, and some are definitely more useful than others.
Below are forty of the most useful APIs out there. The included APIs will let you do everything from shortening a URL to displaying a book preview on your site to interacting with your Twitter account, and everything in between.
Please share with us which APIs have you found most useful and feel free to recommend others that we may have missed… Read more
17 May
The secret power of bookmarklets
Code, How to, Programming
Tweet View Comments
Bookmarklets are special links that users can add to their browser’s favorites.
These special links include code (i.e. not just a target URL), and they trigger various kinds of useful functionality, allowing you to modify and extend any web page.
Once you begin using and building your own, you will no longer see web pages as static elements that you have no control over.
With bookmarklets, you have the power to bend any web page to your needs. Read more
10 Mar
Web Culture: Grid-based Layout Designs
CSS, Code, Programming
Tweet View Comments
The semantic web has brought on a new generation of Internet technology. As designers and developers work together to redefine the rules of the web, the number of open-source projects and third-party APIs continues to grow.
The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected.
Both sides provide interesting arguments. These ideas have become part of a unique web culture characterized by influential design rules and open-source projects.
The grid isn’t a master key to perfect design. However, math has proven that certain design specifications provide the best ratios for page elements and layouts. If you’ve heard about any of this before, you may be familiar with the many options that grid-based layouts offer designers. Read more
16 Nov
What Every Web Developer Should Know About Front-End Performance
Code, Programming, Web Development
Tweet View Comments
Too often as developers, we ignore a crucial last step before launching a website: optimizing for performance.
Most developers now recognize that organized, valid code ensures maintainability and compatibility.
Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.
Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.
This article introduces best practices of front-end performance. Read more
9 Nov
Developing Efficient, Streamlined CSS
CSS, Code, Programming
Tweet View Comments
CSS can be compared to a sculptor’s tool set; like sculptors at work, we designers use CSS to create structured layouts of websites.
Over the years, this process has become more organized; rules have been put in place to create best practices of coding.
In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.
Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.
As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit. Read more
1 Nov
Twenty Ten’s Front-End Code: 5 Things it Gets Right
Code, Programming, WordPress
Tweet View Comments

By now most bloggers using WordPress should have upgraded to the latest version of WordPress which is officially at version 3.0.1.
Along with updates to the core framework, when version 3.0 was released the WordPress team also added a new default theme, replacing the now obsolete Kubrick. The new theme, as most of you are probably aware, is called Twenty Ten.
Not to sound too corny here, but from the first moment I laid eyes on Twenty Ten, I fell in love with it. But I’m not talking about theme’s visual design (which is pretty humdrum); I’m talking about the front-end code, which has seen a number of improvements over the previous default theme.
In this article, I’ll discuss some of these improvements that I feel are worthy of examination and imitation.
And keep in mind that this is not a discussion of the features of the theme itself; this is a discussion of the structure and organization of the HTML and CSS and how it provides an excellent model to follow for front-end developers. Read more
30 Sep
A Case for Coding Your Wireframes
Code, Programming, Web Development
Tweet View Comments
Working as a designer day after day can be laborious. Luckily, the field has expanded, and so the process has become simpler. Many free tools and resources are out there.
Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.
They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.
Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.
In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process. Read more
31 Mar
Fight Div-itis and Class-itis With the 960 Grid System
CSS, Code, Programming
Tweet View Comments

Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy.
But they can also generate a surprising number of superfluous elements.
The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?
Creating cleaner code means going beyond the framework and thinking about what it really represents.
Read more
15 Mar
CSS Bugs and Inconsistencies in Firefox 3.x
Code, Firefox, Programming
Tweet View Comments

There aren’t many articles covering incompatibilities, or CSS differences in Firefox alone — and for good reason.
Firefox has always done an excellent good job of supporting both CSS and JavaScript in a standards-compliant manner without too many awkward bugs.
There are, however, a few CSS properties and selectors that aren’t supported by one or more of the versions released since version 3.0., which I will cover here.
This article will cover bugs, inconsistencies, and nonsupport. So, if you’re having trouble with a CSS property or selector in Firefox and it’s not listed here, then you’ll probably have to rethink your layout and reconsider what the culprit might be. Read more
5 Feb
How to Plan for the Absence of JavaScript
Code, How to, Programming
Tweet View Comments

Though the methods used to gather website traffic statistics call into question the validity of the stats themselves, the fact is that some of your website’s visitors will have JavaScript disabled.
You could divide your traffic sources into four broad categories:
Search engines, mobile visitors, visitors using screen readers and visitors who have JavaScript turned off.
When planning your information architecture and design, you must figure out how to deal with these special groups.
I have assembled a few recent real-world scenarios to find clarity on the issue. Read more
18 Jan
CSS Transitions 101
CSS, Code, Programming
Tweet View Comments

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary.
A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. No transitions.
This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully.
Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple.
What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them. Read more
14 Dec
Solutions to 5 Common Ajax Problems
Ajax, Programming, Web Development
Tweet View Comments

The modern web developer who does not consider Ajax when planning or building their websites is potentially missing out on a powerful tool to enhance usability.
There are however, challenges in implementing Ajax functionality on a web page.
In this article we’ll discuss solutions to five of the most common challenges that a developer faces when using Ajax to enhance the content on their website.
Although there is a lot more to discuss and research on all five topics, this post should give beginners and intermediate Ajax developers some solid tips on implementing Ajax functionality in a more user-friendly and accessible manner.
Read more
20 May
10 Best CSS Practices to Improve Your Code
CSS, Code, Programming
Tweet View Comments

It’s really easy to find yourself wondering how your CSS got to be such a mess.
Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.
Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.
Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache. Read more
5 Feb
Is Google Chrome The New IE 6 For Web Designers?
CSS, Code, Programming, Validation
Tweet View Comments

Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.
The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.
No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.
Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.
Read more
14 Jan
6 Reasons Why Designers Should Code
Accessibility, Programming, SEO
Tweet View Comments

I know, I know…none of us creative types want anything to do with coding past the very basic HTML/CSS we need to know to get our designs to the developers.
Doing development is something for those programming grunts, those code jockeys, those geeks.
Why should we enter the trenches of development when it’s so nice up here with the Photoshop brushes, afternoon tea, and MacPros?   Because you’ll be a better designer for it.
Skeptical? Read on and discover 6 reasons why designers should code… Read more
20 Dec
Quick and Easy WordPress Development on a Mac with MAMP
Code, Programming, WordPress
Tweet View Comments

Ready for some WordPress development on your Mac? First, you need to be running Apache, MySQL, and PHP.
Although Mac OS X comes with Apache and PHP, you don’t want Apple’s automatic software update to break your development environment by changing your working versions of PHP and Apache. Plus, do you really want to spend time tweaking MySQL?
In this guide, I will show you how to quickly install and configure a working WordPress environment including Apache, PHP, and MySql. Read more
2 Dec
20 Excellent Free Rich-Text Editors
Programming, Rich Text Editors
Tweet View Comments

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (“what you see is what you get”) editors.
There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.
In this article, we present 20 exceptional (and free) rich-text editors. Read more
11 Nov
How Ajax Works
Ajax, Code, Programming
Tweet View Comments

In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, and then a new page will load with the results.
Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly. With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.
With an HTTP request, a web page can make a request to, and get a response from a web server, without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background. Read more