Programming Blog » code

Avast Free Antivirus 5.0 Adds Behavior Monitor, Heuristics Engine, and Improved Performance [Downloads]

Facebook-Web-Design — Wed, 20 Jan 2010 08:46:47 +0000

Windows only: The newest version of the popular Avast Antivirus is finally available for download. It’s lighter, faster, and more feature-filled than ever, bringing a new behavior shield, heuristics engine, and code emulator to keep you protected at all times.

Apart from its far easier-to-navigate interface, Avast has a few new features that make it hard to turn down. Its new code emulator can emulate a suspicious executable’s code, isolated, for use in its new heuristics engine, designed to detect malware that would otherwise be undetectable with normal definitions—in other words, spotting malware by learning what the code does. If you use the pro version, you also get their new sandboxing feature for even further protection.

Apart from the new features, Avast has also lowered scanning times as well as the resources necessary to scan and update—a common issue with antivirus programs that are always running in the background. If you’re already an Avast lover (and many of you are), you can either wait for the program to update itself in the near future or go download 5.0 straight from Avast. If you’ve tried Avast and turned it down before, it may be worth another look—you may find that its former cons (such as the difficult-to-use GUI and resource use) are now more up to your standards.

Avast Antivirus is a free download, Windows only.

Avast Antivirus [via Download Squad]

Go to Source

40 Valuable Tools and Resources For Web Designers

Facebook-Web-Design — Tue, 19 Jan 2010 02:17:01 +0000

Web development can be tricky and time-consuming. To be more effective and productive, we, designers and developers, can integrate useful tools in our daily routine. Also, handy resources can be very valuable as they can help us enhance communication with clients and other developers as well as improve the quality of our work. We are permanently looking for new tools, techniques, resources and services that can improve your workflow and increase your productivity.

In this post we present a couple of extremely useful and valuable tools and resources that we found over the last months. Please make sure to follow us on Twitter for a stream of useful resources, tools and design-related articles.

Getting Inspired: Interesting Redesign Projects

Boarding Pass / Fail
A boarding pass redesign project by Tyler Thompson, the Creative Director at Squarespace. How would you design a boarding pass? The result is very impressive.

You’re killing me, Zappos
Andrew Wilkinson’s attempt to redesign Zappos.

Dollar ReDe$ign Project
An attempt to rebrand the US Dollar, rebuild financial confidence and revive our failing economy. Created by Richard Smith.

Useful Front-End and Back-End Tools

ie-css3.js
CSS3 pseudo selector emulation for Internet Explorer 5-8. ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE. An alternative is Offspring.js.

CorMVC
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.

Typograph
A typographic tool that generates CSS for beautiful web typography, according to traditional scale and vertical rhythm.

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

JavaScript Frameworks Playground: jsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

jslib
Mozilla gives a great flexibility and power to Javascript. This popular client side scripting language can be used to create application level logic and services for cross platform application development.
Goal: jslib has a simple goal, “Make life easier for Mozilla Application Development by creating logical, easy to use API’s for general purpose routines that lend themselves to living in library code.”

PHP debug tools
A set of useful PHP debugging tools for debugging script trace, errors and database queries.

The Automatic CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications. Tired of using BBCode due to the current landscape of deficient or insecure HTML filters? Have a WYSIWYG editor but never been able to use it? Looking for high-quality, standards-compliant, open-source components for that application you’re building? HTML Purifier is for you!

InAppSettingsKit
InAppSettingsKit is an open source solution to to easily add in-app settings to your iPhone apps. It uses a hybrid approach by maintaining the Settings.app pane. So the user has the choice where to change the settings.

Dabr
Dabr is a PHP web interface to the Twitter API for mobile devices.

SproutCore
SproutCore: JavaScript HTML5 Application Framework

Your Bookmarklets, On Steroids
Quix is an extensible bookmarklet, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet, so, basically, it’s like a command line for your browser.

IxEdit
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

minibuilder
Flash MiniBuilder is a lightweight IDE created for developing programs written in ActionScript 3.

Real-time HTML Editor
Type HTML in the textarea above, and it will magically appear in the frame below.

Unicode code converter v7.0.1
Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.

Detect Mobile Browser
Open source mobile phone detection script.

Show {if}
A script for a better targeting of site visitors.

typeQuery
typeQuery, change website typography with jQuery.

Gipetto’s wordpress.tmbundle
A WordPress focused TextMate bundle to rule all WordPress Textmate bundles.

Graudit
Graudit is a simple script and signature sets that allows you to find potential security flaws in source code using the GNU utility grep. It’s comparable to other static analysis applications like RATS, SWAAT and flaw-finder while keeping the technical requirements to a minimum and being very flexible.

WordPress Plugin Maker
This plugin is made for developers or WordPress users who love Cut and Paste and hate FTP . If you have ever been in a pinch where you wanted to create a quick WordPress plugin to do something but didn’t have FTP info or weren’t at your terminal you can use this plugin to be a life saver.

Web development and deployment tools
Free online-based IDE for professional web-development.

Create diagrams online Real time collaboration
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

UKI – Simple UI Kit for complex web apps
Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane.

snap{css}: an open-source CSS editor for Windows
snap{css} is an extremely light-weight, notepad-like application that allows css designers to easily edit their code in a familiar environment while having quick acccess to helpful features such as our beautify and collapse functions.

jQuery Browser Plugin
A jQuery plugin extending browser detection capabilities.

jsPDF
jsPDF generates PDF documents using pure JavaScript

Grid System Generator
Grid System Generator includes generated grids, tutorials and resources.

User Agent Switcher Firefox Extension
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser. It is designed for Firefox, Flock, Seamonkey and Songbird, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Useful Resources For Web Developers

ASCII Table – The Pronunciation Guide
The ASCII Symbols Pronunciation Guide

Five Awesome On-Screen Rulers
They’re not the sexiest programs in the world, but for many designers, on-screen rulers are must-haves. Here are five of the best- including the one I can’t live without. All free.

Using HTML Symbol Entities

Editorial Style Guides
This page provides a list of resources available for the web designer or developer who needs to create an editorial style guide for writing web site copy.

Open standards Web design with CSS, XHTML, Java servlets and Javascript
Code Style answers key questions for Web developers. Which Web fonts are most common? How to use media dependent style sheets? Make more robust, accessible Websites with open standards technology.

20+ Must have documents for Designers and Developers
In this post, you would find a list of over 20 free PDF files covering aspects of Web Development as well as Graphic design. These include cheat sheet for web developers, client questionnaires for Graphic and Web design, helpful checklists as well as some useful resources for designers and developers. All of these are available in PDF format as they are easy to print. I have a number of them hanging around in my work area and find them quite useful. It would be great if you have any helpful documents to share.

45 Incredibly Useful Web Design Checklists and Questionnaires
45 checklists to make your design process easier and more organized. Consider using these checklists as a jumping off point for creating your own customized list, based on your own needs.

PowerPoint Search Engine with detailed thumbnail results
SlideFinder: a search engine for slides and presentations.

Web Development for the iPhone: HTML & CSS Support
Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari supports some HTML5 elements, even though the HTML5 specifications have not been finalized.

GrepDocs.com – all your docs are belong to us – PHP, Perl, CSS, HTML, Java, JavaScript, MySQL, Ruby, Python, and more
GrepDocs: a search engine for programming documentation

Last Click (= a bit of fun)

ASCII Fire Animation with JavaScript
This is when JavaScript is abused: ASCII Fire with JavaScript.

256b.htm (D)HTML Competition
256b.htm Competition: create a website in just 256 bytes

Browser Pong
This is definitely the best use of pop-ups for a long time. If you haven’t seen this, you must see it. It will make your day. Press “P’ for start.

Go to Source

5 Great IDEs to Start Coding in the Cloud

Facebook-Web-Design — Tue, 12 Jan 2010 06:47:39 +0000

Cloud computing has started proceeding beyond the hype stage and into the beginning of mainstream adoption. Gartner had included cloud computing in their list of Top 10 Strategic Technologies for 2009. They also reported that worldwide cloud services revenue is on pace to surpass $56.3 billion in 2009. As we have just begun 2010, a survey of CIOs and CTOs of various leading companies conducted by Logicalis deduced that cloud computing will dominate focus in 2010. ChromeOS from Google, is a nice model which illustrates the daily use of cloud computing. It is trying to shift the appliance domain to cloud computing and indicates a charm in the field expressed by Google.

In this roundup, we will review some online Integrated Development Environments (IDEs) which are great examples of cloud programming. These solutions can [nearly] replace your desktop IDEs and code editors.

CodeRun

CodeRun Studio

CodeRun Studio is a free cross browser, open source IDE, which permits you to build web applications in your browser. It is a fully featured IDE which gives you the ability to run and test your code online. With the support of PHP, AJAX and ASP.NET, CodeRun Studio also enables you to instantly compile and deploy your code on CodeRun Cloud, another service from the folks behind CodeRun (which is free for a 14 day trial).

In addition, the open source library on the CodeRun website has a plenty of code examples of different programs. As an open source project, anyone can download it form codeplex.

CodeRun Open Source Library

Supported languages and databases: CodeRun has support for C# / ASP.NET, C# / WPF, C# / Silverlight, PHP, Javascript, HTML and CSS. Database support includes SQL Server 2005 and Amazon SimpleDB.
Syntax highlighting
Project templates: The IDE already has project templates for previously mentioned languages to get you started and save you from unnecessary copy/paste[ing].
Compiler: Server sided compiler to compile your code right from the browser.
Debugger: CodeRun features a powerful online debugger. You can use your browser to debug the code, add breakpoints, inspect the call stack and add watch items.
Project Collaboration: You can share your code with hyperlinks on some popular social networking websites like Twitter and Facebook. You can send the unique URL to any other programmer and he will be able to view a separate, fully editable view of your code. CodeRun also features integrated Meebo chat rooms for group chatting.
Code completion only works for C# / ASP.NET, C# / WPF, C# / Silverlight.

CodeRun Features

Security

CodeRun promises that your code will never be shared with anyone. You will be the sole administrator to decide what code should be public and what should be private. While in team collaboration mode you can set read/write permissions for different users.

Bespin

Bespin is an open source project from Mozilla Labs. The project is an extensible code editor using HTML 5 technology. It is available with the hosted version as well as one that can be installed on your own servers. Developers can integrate Bespin’s embedded code editor in their own apps.

Like other Mozilla projects, it is also powered by developers around the globe via extensions and plugins. Mozilla’s cloud is used to store files. While using this IDE you can view the output of your code in browser. The code editor is a bit complex and will take some time for you to get comfortable. To use Bespin, one should be familiar with command lines.

Features

Time Machine: This feature allows you to look back over the history of a file to see (visually) how it changed over time.
Snippets: Inspired by Textmate feature.
Real time collaboration: Bespin features a real time collaboration mode. Users can work on the same file, at the same time, and the file will be updated for the other users in real time — with no page refresh.
Fast: The IDE can handle large files, which might have several thousands of lines of code, with a very fast performance.
Themes: Different themes are available to change to look of the code editor.

Prerequisite

Bespin requires an HTML 5 property, called canvas, to run in the browser — so it will not work in Internet Explorer as IE doesn’t support this property. The browsers supported by Bespin are Mozilla Firefox, Apple Safari, Opera and Chrome.

“]

PHPanywhere

PHPanywhere is a free web based code editor which enables programmers to code their projects in browsers. It enables users to write PHP code in the browser and save in their own space using an FTP connection. The web application has a fully integrated FTP explorer which let you create, delete and browse through your web space. It also allows you to change file permissions of files and folders.

PHPanywhere doesn’t install a single file on your computer and runs directly from your browser. The IDE still lacks the debug feature and can’t compile your written code.

Syntax highlighting
Smart indentation
Your action log
Tabs view for viewing multiple files at once
Skins (different color schemes for editor’s layout)
Scheme (different color schemes for syntax highlighting)

Security

With the release of version three, PHPanywhere uses SSL to connect with users’ FTP. This new feature has enhanced the security of this web app. Unlike Bespin, PHPanywhere can’t be installed on your own web server and you can only use it by accessing PHPanywhere.net

PHPanywhere SSL FTP

Ecoder

Ecoder is a JavaScript based online code editor which has a fully featured file browser, syntax highlighter and tabbed interface to open multiple files at once. The keyboard shortcuts feature gives the feel of a locally installed application. The code editor has support for all major browsers except Internet Explorer 6. Ecoder is also an open source project, so one can download it from its source code repository at sourceforge and install it on its own web space.

NotaPad

NotaPad is a very simple web based code editor based upon the CodeTextArea widget. NotaPad is in very early stages of its development as the version of code editor is 0.1 alpha. The supported features are keyboard shortcuts, bookmark and export. The export feature allows users to write code in the editor and with a single click, the written code can be downloaded to the local space of the user. The bookmark feature is a very nice feature which gives the options of bookmarking different lines of code. The option is pretty useful when you are working with a large amount of code with hundreds of lines and you want to remember some lines for revision.

Final Thoughts

We have covered some prominent online code editors which intend to increment productivity of developers. There is no need for installation and the developer can get to coding instantly. With these IDEs, a great deal of time and fatigue in setting up a development environment can be avoided. The idea of sharing and collaborating with a fellow coder, sitting in another continent, is exciting and amazing as well. The current IDEs are not complete replacements for desktop IDEs quite yet. This is due to the present state of cloud computing, but it is improving. We may see an IDE equipped with a rich set of features, like Eclipse, working in a cloud computing environment. This is also the goal of Eclipse E4.

If we have missed one of your favorite online code editors, please share it with us by leaving a comment below.

Go to Source

jQuery Lesson Series: How To Use JSON with Twitter and Flickr API

Facebook-Web-Design — Sun, 10 Jan 2010 08:55:31 +0000

In this post I want to illustrate how to use jQuery getJSON() method to load JSON data using an HTTP GET request. I prepared two examples, easy to understand if you are a jQuery beginner. The first example is a simple Twitter search and the second one is a simple Flickr search.

For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.

Using getJSON() to implement a Twitter Search

In this first example I used getJSON() to implement a simple Twitter Search that returns five results for page. Try to add something into input field below (for example, apple) and press the Search button to display search results:

This kind of search is really easy to implement just using some lines of JavaScript code. Add a link to jQuery into the tag of the HTML page:

In the tag add this code:

is the

that will contain the search results.

Then add this JavaScript code into the tag, after the link to jQuery:

$(document).ready(function(){
var url="http://search.twitter.com/search.json?rpp=5&callback=?&q=";
var query;
  $("#twitterButton").click(function(){
  $("#results").html('');
    query=$("#twitterQuery").val();
    $.getJSON(url+query,function(json){
      $.each(json.results,function(i,tweet){
         $("#results").append('
         '+tweet.text+'
         From:
         @'+tweet.from_user+'
         ');
      });
    });
  });
});

The previous code is really simple to understand. The url var contains the string http://search.twitter.com/search.json?rpp=5&callback=?&q= for the Twitter API call. rpp is the number of tweets to return per page (it’s optional). For a full reference guide to the Twitter API take a look at the official documentation. $("#results").append()> appends search results into the layer with id results.

Using getJSON() to implement a Flickr Search

This second example is similar to the previous one. I implemented a simple Flickr search using getJSON(). Try to add something into input field below (for example, wave) and press the Search button to display search results:

This kind of search is really simple to implement. Add a link to jQuery into the tag of the HTML page:

In the tag add this code:

Then add this JavaScript code into the tag, after the link to jQuery:

$(document).ready(function(){
var url="http://api.flickr.com/services/feeds/photos_public.gne?
              &tagmode=any&format=json&jsoncallback=?&tags=";
var query;
$("#flickrButton").click(function(){
$("#results").html('');
  query=$("#flickrQuery").val();
      $.getJSON(url+query,
        function(data){
          $.each(data.items, function(i,item){
            $("").attr("src", item.media.m).appendTo("#results");
            if ( i == 3 ) return false;
          });
       });
    });
});

The code above is really similar to the code you seen in the previous example. The url var contains the string http://api.flickr.com/services/feeds/photos_public.gne?&tagmode=any&format=json&jsoncallback=?&tags= for the Flickr API calls. $("#results").append() appends search results into the layer with id results. The if statement if (i==3) return false; limits the search results to 4. You can change that number as you prefer.

That’s all! Leave your comment if you have suggestions to improve the code.

Go to Source

MyBikeNumber.com

Facebook-Web-Design — Sat, 09 Jan 2010 03:40:12 +0000

MyBikeNumber is a free service to register your bicycle and components world-wide or search for these. Your registered bicycle gets a code, which you can stick on your bicycle. This can be read with a mobile device.
Go to Source

View Source; How important was it, is it, and will it be?

Facebook-Web-Design — Fri, 08 Jan 2010 12:15:17 +0000

Alex Russell has pontificated on the notion that View Source is not only good and important, but that it may be under attack.

Do you feel that view source added to the popularity of the Web? or that it was just a nice to have that is neither here nor there? Other technologies have tried to bolt it on (e.g. in Flex you can opt-in to view source) but opt-in to a developer flips a bit of “hmm no I will keep this to myself” for various reasons.

I personally feel like the ability to view source fit in perfectly with the culture of the Web, and was especially important early on. I am willing to bet that we have all learned from the notion of view source.

However, it is also true that in some ways our front ends are getting a lot more complex and by the time you run a compressor through, or a tool like GWT/Cappuccino/insert others there isn’t much to learn. Of course, on the back end all the code is hidden and we have found ways to learn there (big thanks to open source and communities that have sprung up).

The notion of view source is under attack. How hard to we try to fight it? How do we fight it?

Keep reading Alex’s post which has some good stuff such as:

To understand the importance of view-source, consider how people learn. Some evidence exists that even trained software engineers chose to work with copy-and-pasted example code. Participants in the linked study even expressed guilt over it the copy-paste-tweak method of learning, but guilt didn’t change the dynamic: a blank slate and abstract documentation doesn’t facilitate learning nearly as well as poking at an example and feeling out the edges and possibilities by doing. View-source provides a powerful catalyst to creating a culture of shared learning and learning-by-doing, which in turn helps formulate a mental model of the relationship between input and output faster. Web developers get started by taking some code, pasting it into a file, loading it in a browser and switching between editor and browser between even the most minor changes. This is a stark contrast with other types of development, notably those that impose a compilation step on development, in which the process of seeing what what done requires an intermediate action. In other words, immediacy of output helps build an understanding of how the system will behave, and ctrl-r becomes a seductive and productive way for developers to accelerate their learning in the copy-paste-tweak loop. The only required equipment is a text editor and a web browser, tools that are completely free.

Go to Source

Job Board 75% Coupon Code

Facebook-Web-Design — Fri, 08 Jan 2010 04:13:35 +0000

I just wanted to update you the new coupon code on Design Jobs on the Wall. Enter coupon code "promo" on your first job post to get a 75% discount. Some of the potential employers who have posted on the wall include: Fi, The Brick, CTV, Fanshawe College, Hallmark Channel, Peace Corps, eHarmony, TechSmith Corporation, cPanel Inc., Washington Post Digital, Lime Wire LLC, MTV Networks, and more.

Go to Source

JavaScript Frameworks Playground: jsFiddle

Facebook-Web-Design — Thu, 07 Jan 2010 02:09:38 +0000

jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

It presents an interface which is divided into 4 pieces:

HTML editor
CSS editor
JavaScript editor
and the output

You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla). Also, if there is, you can add a complimentary framework like jQuery UI or MooTools More.

A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too.

It is an almost perfect platform for trying & sharing your JavaScript code without the need of a website.

What would be better is the ability to select multiple JS frameworks at the same time (also having a server-side file & an editable database would make it a complete playground).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Go to Source

Mashable’s Social Media Marketing & Web Event Guide

Facebook-Web-Design — Tue, 05 Jan 2010 06:38:02 +0000

It’s a brand new week, which means it’s time for Mashable’s guide to upcoming social media and web events, parties, and conferences. For more upcoming event listings, check out Mashable’s Events section.

Is your event not on this list? Contact us at least one month before your event and let’s establish a media partnership.

Mashable’s Weekly Social Media and Marketing Event Guide is proudly supported by Eventbrite, the Web’s Event Marketplace.

January 11, 2010, Nashville, TN: The Social Media conference that comes to you. Social Fresh is a one day, case study rich conference targeted for marketers. Social Fresh Nashville will have 30+ speakers including Jason Falls of Social Media Explorer, Gavin Baker of Ruby Tuesday, and John Andrews of Collective Bias (formerly of Walmart). Save 15% when using code mashable.

January 12, 2010, New York, NY: PluggedIn is an exclusive deal making gathering, bringing together handpicked digital media founders, gatekeepers and investors to candidly interact in a laid back setting and unlock the full value of doing business together. PluggedIn is a polar opposite to your typical overcrowded, loud and ineffective conference. We keep it to a closed circle of in-the-know executives and offer a casual, off the record environment. Our objective is to cultivate substantive and concrete dialogue between a select group of decision makers and help make things happen. Use registration code mashable to get 25% off.

January 13, 2010, New York, NY: Social Integration – Harmonizing Social Channels into the Marketing, Communications, & Service Platform – Case Studies & Roundtables is a conference that will demonstrate case studies of how leading brands are integrating social media and social networking into and across the enterprise. We will approach the topic from the communicator/marketer’s perspective but technology, customer service, and operations professionals are welcome to participate. Use promo code MASH for a discounted rate of $155 at www.bdionline.com/socialintegration.html.

January 14, 2010, Century City, CA: The first-ever Schmoozd event, a new Social Media Mixer event in Los Angeles, will be held at the Xbar. X bar’s environment is the perfect place to network – a lounge designed with spots for hanging out as well as socializing and action. Whether closing the deal or sharing ideas, X bar’s renowned design, cuisine and location means X marks the spot. For more information, please visit www.schmoozd.com. Mashable readers get 50% off when registering via this link.

January 14-16, 2010, Sedona, AZ: Join us at #SMML for a Social Media Mastermind Conference. We are going to get personal. As you seek to glean more information about social media, how it works and how you can use it to gain more customers. You’ll see more results in 2 days than you will have in six months working alone! If you are ready to be energized, engage with your audience, work with the best and take home real solutions in developing your own social media strategy, then join us. Speakers include: Robin Harris, Raliegh Pinskey, Frances Flynn Thorsen, Shannon Evans and more. Use event code SMMLBiz to save 15% on your registration fee.

January 20-22, 2010, Washington DC: Social Media for Defense and Government is a unique forum on the embracement, implementation and utilization of new media platforms that meet the Governments goals of transparency that allow for more efficient internal and external communication. As the public develops their use of online tools for their personal, career and business development goals, DoD & Gov’t have made it their mission to reach the public via these new forms of media. The forum will provide insight into technologies including Twitter and Facebook as well as advanced elements such as the Governments general information page, blogs, and closed social media suite. Mashable readers get an exclusive 20% discount off the standard pricing with special code IUS_MASH_SMTM_#1 when registering!

January 23, 2010, Virginia Beach, VA: Social Media @ The Beach is a place for anyone looking to “get their feet wet” and explore social media. It’s an interactive conference with the laid-back atmosphere of a meet-up. The January event will focus on two main goals: boosting personal social networking skills and developing professional social media marketing strategies. The event is open to everyone, drawing community members of all ages, backgrounds and levels of social media experience. Enter mashable for the discount code to receive 15% off ticket price.

January 26, 2010, San Francisco, CA: Vator.tv, a leading platform for entrepreneurs and innovators to broadcast themselves, and provider of news and information through VatorNews, and Girls in Tech, a social network enterprise focused on education and empowerment of influential women in technology, are hosting the Catalyst Competition to find five women-led startups across any stage to present at the Catalyst Conference. Ten finalists will be selected by their peers through an online competition. Join the competition today and get the vote out.

January 27-28, 2010, Amsterdam, Netherlands: Enterprise Social 2.0: RIP or ROI? This senior executive event will bring together decision makers from the top Fortune companies to discuss innovative strategies on how to maximize business performance through social media engagement. The event will include keynote speeches, best-practice presentations as well as interactive discussion sessions. Use promo-code MASH14 for a €100 (Euros) discount for the 2 day conference registration fee.

January 28, 2010, San Francisco, CA: The ARF Industry Leader Forum — Putting Listening to Work is an interactive event to help advertisers, agencies, media and research companies determine how to use social media and digital behavior for their listening strategies. Learn how to use listening, evaluate listening applications, develop a listening strategy, integrate it into your existing research program, create an action plan and apply insights garnered. Attendees will receive The ARF Foundations Series – Listening tool, an $895 value, featuring 25 case studies and 30+ company reviews how listening is used for consumer insight, customer service, new product development, reputation management, competitive benchmarking, and breaking into new applications like media planning, targeting and predictive modeling. Speakers include: Jeremiah Owyang, digital media strategy superstar and blogger and Partner, Customer Strategy, Altimeter Group, Toyota Motor Sales, Saatchi and Saatchi Wellness and LinkedIn. Mashable readers can use promo code ARFMASH to save $100.

January 28-29, 2010, Bilbao, Spain: The biggest Search Engines: Search Marketing and Online Marketing Event starts the new year in the north of Spain: Bilbao the TIC city! SC Bilbao will offer 9 professionals workshops, 8 Conferences and the glorious Closed Party! 2 days of learning and networking at “Palacio Euskalduna” . Come and share with Google, Yahoo, Microsoft, SEMPO and the best Internet experts. There’s a special 30% discount on Conferences for all Mashable readers using the promotional code: ILOVESEARCH.

February 1-5, 2010, New York, London, Berlin, Toronto, San Francisco, São Paulo: Social Media Week’s second annual conference will take place between February 1st – 5th, 2010 simultaneously in New York City, Berlin, London, San Francisco, Toronto and São Paulo. The five day conference will explore the profound impact that social media has on culture, business communications and society at large. The week-long conference is designed as a series of localized events, which city partners are responsible for organizing. Over the course of the week and in each city, programs will span a variety of formats, ranging from talks, presentations and panel discussions, to interactive workshops, seminars, networking events and drinks receptions. RSVP here.

February 4, 2010, San Francisco, CA: Vator, a leading platform for innovators and entrepreneurs to broadcast themselves, is holding its inaugural Vator Splash competition to find 10 promising early-stage startups to present at the Vator Splash event. Enter the competition today and join other onstage presenters, such as Zynga CEO Mark Pincus, Smule CEO Jeff Smith, August Capital VC Howard Hartenbaum and Google Ventures VC Bill Maris. Buy your 25% discount ticket today using the code: VatorMashable

February 8, 2010, Tampa, FL: The Social Media conference that comes to you. Social Fresh is a one day, case study rich conference targeted for marketers. Social Fresh Tampa will have 30+ speakers including Chris Barger of GM, Maggie Fox of Social Media Group, and John Andrews of Collective Bias (formerly of Walmart). Get 15% off if using code mashable.

February 8-10, 2010, Philadelphia, PA: The 9th Annual ePharma Summit is the most innovative digital marketing event for pharma. Year after year, hundreds of marketing professionals from leading pharmaceutical companies attend ePharma for incomparable access to insider information for optimizing their brand strategy and perfecting consumer relationships. Join us next February to collaborate with industry leading industry minds and perfect your digital strategy by pursuing true e-marketing innovation. The 2010 event is packed with fresh case studies, hands-on workshops, hot topic debates, facilitated roundtable discussions, and live audience polling sessions. Register with Priority Code XP1506MASH to save 15% off standard registration!

February 8-11, 2010, Washington, DC: Attend the Advanced Learning Institute’s Forum on Social Media for Government: How To Engage Your Employees And Citizens By Using The Latest Web 2.0 Technologies To Drive Communication Results, to learn how to capture the power of social media in your organization, along with helpful tools, tips and techniques to get started. Hear practical advice, firsthand, from leading government agencies and organizations such as: CIA; IRS; U.S. Army Public Affairs; National Wildlife Federation; U.S. Department of Agriculture; City of Raleigh, NC; U.S. Navy; Morris County, NJ; U.S. Department of State Roanoke Public Libraries, VA; Court Services & Offender Supervision Agency; Department for International Development, Government of the United Kingdom; NOAA; National Institutes of Health; U.S. Department of Health & Human Services; National Defense University; City of Richmond, VA; Porter Novelli; Booz Allen Hamilton, and more. Mention Mashable when registering to save $200.

February 9-13, 2010, San Francisco, CA: Macworld 2010 is a five-day event that educates, entertains and immerses attendees in the Apple products community. A comprehensive expo hall offers access to hundreds of Mac products and services, paired with expert advice, demonstrations and instruction. Macworld conference programs feature industry leading minds, presenting cutting edge product training on the topics attendees most want to see. From Mac Power Users to creative professionals to first-time users to Enterprise computing professionals, Macworld has the conference content, special presentations and exhibit hall attractions that create what has been called “Mecca for Mac Users”. Get 15% off as a Mashable reader.

February 10, 2010, New York City: The Online Community Unconference East is a gathering of online community professionals – managers, developers, business people, tool providers, investors – to discuss experience and strategies in the development and growth of online communities. As we have found with our past events, the best source of information on all of these challenges is other knowledgeable practitioners. Mashable readers are entitled to a discount by registering here with code mashable.

February 15, 2010, Barcelona, Spain: The Mobile Premier Awards recognize the year’s best in Mobile Startup Innovation and are the largest open, global startup competition in the mobile industry. The awards are the point of reference in startup premiers during the Mobile World Congress and are organized in collaboration with some of the main networks in the industry. Participation to the awards is free and open to any startup with a mobile angle. Sign up at www.mobilepremierawards.com and take your chance to walk the red carpet in Barcelona!

February 17, 2010, Atlanta, GA: Startup Riot is an annual event that focuses on giving fifty startups an opportunity to present, in three minutes, to a large audience of investors, corporate business development and M&A representatives, and other interested parties. Attendees are pre-screened so the room is never filled with service providers, job hunters, or others who are not the target audience. Selected presenting entrepreneurs pay nothing to attend. In 2010 we will move to a bigger venue for the event and the always popular after-party. Also new in 2010 are prizes for presenters and attendees. We are currently accepting applications to attend and present.

February 19-21, 2010, Los Angeles, CA: SCALE 8X is the 8th Annual Southern California Linux Expo. As the premier community run Linux / Open Source conference, it will feature tutorial sessions designed to show users of all skill levels what Open Source can do and how to do it. Whatever your interest is in Open Source, SCALE 8x will have something for you. Mashable’s readers can receive 40% off registration with the promo code MASH8.

February 22-24, 2010, New York City: From authoring, editing, and layout to distribution and consumption, new technologies are changing all aspects of publishing. TOC will help you navigate these changes and understand how to apply them to your business or organization for a more profitable future in publishing. You’ll also have the opportunity to participate in conversations that are shaping that future as often as they are describing it. The fourth annual O’Reilly TOC Conference is your opportunity to join those inventing the future of publishing. Register now and save at: en.oreilly.com/toc2010/public/register. Save an additional 15% when you use the Discount Code: toc10mas.

February 22–25, 2010 San Diego, CA: Online Marketing Summit, the premier educational event for marketing professionals, is coming to San Diego this February. Join your marketing peers as they share ideas, hear from expert practitioners, and learn best practices in the areas of: Social Media, Search, Email, Analytics, and more – in a completely vendor free environment! Register now and receive 25% off using discount code MASHABLE.

February 23-26, 2010, San Jose, CA: At FAST ‘10, explore new directions in the design, implementation, evaluation, and deployment of storage systems. Learn from leaders in the storage industry, beginning Tuesday, February 23, with ground-breaking file and storage tutorials by industry leaders such as Brent Welch, Marc Unangst, Michael Condict, and more. This year’s innovative 3-day technical program includes 21 technical papers, as well as two keynote addresses, Work-in-Progress Reports (WiPs), and a Poster Session. Don’t miss this unique opportunity to meet with premier storage system researchers and industry practitioners from around the globe. Register by February 8 and save! Mashable readers get $100 off using code FASTMASH10.

March 1-4, 2010, Ottawa, ON: Attend the Advanced Learning Institute’s Forum on Social Media for Government: How To Engage Your Employees And Citizens By Using The Latest Web 2.0 Technologies To Drive Communication Results, to learn how to capture the power of social media in your organization, along with helpful tools, tips and techniques to get started. Hear practical advice, firsthand, from leading government agencies and organizations such as: ON Ministry of Health & Long-Term Care; Parks Canada; Communications Community Office; City of Ottawa, ON; Public Safety Canada; Indian & Northern Affairs Canada; Toronto Police Service, ON; Canadian Forces Aerospace Warfare Centre; Human Resources & Skills Development Canada; Northern Lights Canada; Atlantic Canada Opportunities Agency; Canada Mortgage & Housing Corporation; Royal Bank of Canada; Genome Alberta; Business Development Bank of Canada; Thornley Fallis Communications; Centre of Excellence for Public Sector Marketing, & more. Mention Mashable when registering to save $200.

March 2-4, 2010, Santa Clara, CA: Search Marketing Expo – SMX West content is so compelling, you’ll want to implement what you’ve learned before leaving the conference. Over 50 super-charged sessions on PPC, SEO, local search, search-friendly design, and social media marketing will help you flourish today, tomorrow and in the future. Whether you’re new to search or have years of experience, employed at a Fortune 500 company or run your own business or agency, you’ll be a more effective, innovative and inspired internet marketer after attending SMX East. Featured keynote – Microsoft CEO Steve Ballmer. Get 3 jam-packed days of content for only $1145 if you register by January 30th and use discount code smx100mashable. For more info visit smxwest.com

March 4-5, 2010, Chicago, IL: At SOHO’s 2-Day, “The Co-Alignment of the Corporate and Personal Brand,” a Strategy Framework, develop your exclusive copy of “The Draft,” SOHO’s 16-page social communications policy workbook for businesses and corporations. The focus in 2010 is co-aligning the corporate brand with internal and external communications. SOHO brings to you presentations, case studies and Town Hall meetings with Chris Brogan and Dan Schawbel, and other experienced practitioners. For more information and to register, please visit Sohobiztube.com. Use discount code MashableChi for a 20% discount on a 2-day “The Draft” ticket.

March 15-16, 2010, London, UK: At Social Media World Forum, learn from social networks, brands, advertisers and analysts. Hear from leading social networks on their strategy, revenue models and how they are approaching the future. Worldwide case studies from global brands and corporations on their use of social media. Examine the current market conditions, future forecasts and predictions from leading analysts. Mention you are a Mashable reader to receive 15% discount.

March 19, 2010, London, UK: Justmeans’ Social Media and Stakeholder Engagement Conference will bring together the top minds in sustainability, marketing, innovation and technology. This executive forum will explore how technology can enable sustainable business by involving stakeholders in the value creation process and will showcase examples of success and failure in this rapidly evolving market. Use this link for a 10% registration discount.

March 23-24, 2010, Berlin, Germany: Learn, discuss and explore the challenges and commercial opportunities that exist within the mobile internet ecosystem and make the most of best-practice perspectives over a two day period offering a programme packed with case studies, roundtable discussions, industry snapshots, masterclasses and fishbowl sessions. Significant discount for Mobile Operators, Online/Mobile Communities, and Content providers! Go to www.iir-mobileinternet.com/mashable for more information.

March 24-25, 2010, San Francisco, CA: EyeforTravel’s Social Media Strategies for Travel conference goes beyond the ‘what is social media?’ debates (that were so 2008!) and examines the strategic importance of social media to travel brands. The 2 day conference will share leading case studies, hits, tips and advice from top travel companies including JetBlue, Hilton, Virgin America and more. Use the discount MASHABLE to save $100 on the registration fee!

March 30-April 1, 2010, San Jose, CA: Become Location Enabled at Where 2.0. Now in its sixth year, Where 2.0 is one of the world’s foremost events dedicated to exploring the emerging technologies in the geospatial industry. At Where 2.0, we expose the tools pushing the boundaries of the location frontier. Join us and meet the people behind the mashups, the people behind the platforms, and the people looking ahead to the future of geospatial. Find out what’s viable now, what’s lurking just below the radar and how to gain a competitive edge. Register now and save 15% at en.oreilly.com/where2010. Use code whr10mash.

May 17-19, 2010, Charlotte, NC: Search Exchange is a 3-day action packed internet marketing conference offering insights into social media marketing, search engine optimization, online reputation management, and pay per click advertising. Learn and network with industry professionals and business owners from around the world. Mashable readers save 10% using code mash10 during registration.

May 25-27, 2010, The Sage Gateshead, UK: Thinking Digital is overtly inspired by the TED and PopTech conferences in America. We attract more than 30 of the world’s most innovative, creative, insightful and/or accomplished people to come to Hall Two of the Sage Gateshead, United Kingdom annually and talk about their work, inspirations, insights and ideas. Our venue and speakers thereby attract a wonderfully eclectic mix of people from around Northern England, Europe and the world. Mashable readers save 25% using code tdc_mashable here.

June 29-30, 2010, London, UK: The 2nd annual Cloud Computing and Enterprise 2.0 World Forum is the perfect event to learn and discuss the future development and integration of cloud and enterprise 2.0 services and products. Building on the success of the 2009 show, this two day conference and exhibition will provide a focused platform for the global cloud computing and enterprise social media industry. The 2010 show will include a free-to-attend exhibition with scenario based workshop area and key service providers demonstrating their products.

The Mashable Weekly Social Media and Marketing Event Guide is proudly supported by Eventbrite, the Web’s Event Marketplace.

Eventbrite is an online events marketplace where tens of thousands of individuals, businesses and organizations of all sizes manage, promote and sell tickets to their events. Make your event a success on Eventbrite.

Reviews: Facebook, Google, LinkedIn, Mashable, Twitter, linux

Tags: conferences, Events, mashable

Go to Source

Three Days in Seattle

Facebook-Web-Design — Tue, 05 Jan 2010 05:41:49 +0000

Three, count ‘em, three days of design, code, and content. That’s what we’ve got lined up for you in beautiful Seattle, Washington. Including a special one-day workshop on HTML5 and CSS3, led by Jeremy Keith and Dan Cederholm (pictured above, extolling the virtues of caffeine and CSS).

The complete schedule for An Event Apart Seattle 2010—including A Day Apart with Jeremy Keith and Dan Cederholm—is now available online for your listening and dancing pleasure.

Photo: Warren Parsons.

Go to Source

Getting Started with jQuery

Facebook-Web-Design — Tue, 05 Jan 2010 05:11:08 +0000

The web development scene is moving forward at a lightning-fast pace, and it’s imperative that developers continue to keep their skills fresh. If you’ve been involved in front-end design or development in any form over the past five years or so, then it’s very likely that you’ve experimented at some point with one of the popular JavaScript libraries, many of which have become quite prominent and are now used on a number of large commercial websites.

In this article, I’ll be introducing and laying the groundwork for advanced JavaScript development with one of the most popular JavaScript libraries available: jQuery.

Although there are many beginning tutorials online that can provide a great starting point for jQuery development, in this article I’m hoping to go beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library. Of course, much of this information–outside of the syntax and other jQuery-specific details–will be applicable to any JavaScript library.

Why a JavaScript library?

To quote the official jQuery slogan: "Write less, do more." The role of a web developer is to create code that determines what will result from a user’s interaction with a web page. Web developers should not have to spend hours debugging browser quirks. Instead, they should be free to deal solely with the actions and the results. This is where a JavaScript library comes into play.

Overcoming browser differences

Different browsers handle DOM manipulation, transparency effects, and animation in different ways, requiring, in some cases, reams of code just to create a simple effect. Using a JavaScript library allows you to completely bypass all of those challenges, giving you access to an API (Application Programming Interface) that deals directly with the tasks you actually want to accomplish. All the challenges and issues common to JavaScript dealt with behind the scenes, allowing you to integrate functionality without wondering whether or not it will work in a particular browser.

Unobtrusive JavaScript

Another impelling reason to use a JavaScript library is that all libraries allow you to include JavaScript in your pages unobtrusively, thus keeping your behavior layer (the JavaScript) separate from the content and presentation layers (the XHTML and CSS).

Accomplishing complex tasks with ease

Finally, a very powerful feature of any JavaScript library is its ability to manipulate any element or set of elements on a web page with just one line of code. Take, for example, the following HTML:


  
    Text Here
    Text Here
    Text Here
    Text Here
    Text Here

Let’s say you wanted to use JavaScript to change the background color of the first list item element (

) in the unordered list above. Using pure JavaScript, your code would look something like this:

var myListCollection = document.getElementsByTagName("ul");
  for (var i = 0; i < myListCollection.length; i++) {
    if (myListCollection[i].className === "list") {
      myListCollection[i].childNodes[0].style.backgroundColor = "blue";
    }
  }

Using jQuery, you can accomplish the same thing with just one, easy-to-maintain line of code:

$("ul.list li:first-child").css("background-color, "blue");

Understand CSS concepts

One area that is imperative to powerful jQuery development, is strong knowledge of CSS. The reason for this is because jQuery often utilizes CSS-based syntax to manipulate DOM elements. Here are some concepts that you should be quite familiar with before diving into extensive jQuery development:

Type selectors
Class selectors
ID selectors
Descendant Selectors
Child Selectors
Attribute Selectors
CSS Specificity
The Cascade & Inheritance

Most of the above CSS concepts should already be very familiar to any modern-day front-end developer, since any CSS layout would utilize these. jQuery not only incorporates the basic selectors (type, class, and ID), but it also uses descendant and child selectors, which aren’t supported by all currently-used browsers. But with jQuery, due to its built-in browser normalization, all selectors are supported equally.

Understanding that jQuery incorporates CSS syntax when accessing elements will greatly enhance your ability to quickly and easily create powerful JavaScript applications with jQuery.

Understand JavaScript concepts

In order to make full use of jQuery, it is a good idea to learn certain JavaScript concepts. Sure, you can do a ton of stuff in jQuery without knowing much about some of the concepts listed below, but you’ll have a bigger advantage in your jQuery development if you take the time to understand a few fundamentals, including:

Object creation
Properties of objects
Object literals
Functions as methods
Anonymous functions
Closures

Again, it is not necessary to fully understand any of the above concepts in order to start working with jQuery, but your abilities with jQuery’s API will increase greatly if you understand one or more of the above concepts.

Object-Oriented JavaScript: An Introduction to Core Concepts
Object-Oriented Javascript at Webreference.com

The jQuery source code

Before getting started with any jQuery development, you’ll first have to download the latest version of the jQuery library and include it in your pages:

The above line of HTML should appear before any actual jQuery code, otherwise you’ll get errors.

Alternatively, instead of hosting the source code yourself, you could link directly to the most recent version on the Google Ajax Libraries API which can save you some server resources. (read more ways to offload website features).

jQuery syntax

Now that you have an overview of the benefits of jQuery, along with some understanding of concepts involved, let’s take a look at some syntax to get us started with this powerful library.

The jQuery wrapper

The jQuery wrapper is the function that is at the core of all jQuery commands. I used it earlier in one of the examples above. Here it is again:

$("li a");

The $ symbol is an alias for the jQuery function, so the above line of code could alternatively be written:

jQuery("li a");

But, for obvious reasons (e.g. to keep your code terse), you’ll rarely see that syntax.

The jQuery function shown in the above two examples returns an object containing an array of the DOM elements specified inside the parentheses (in this case, all anchor tags that are nested inside of

tags). Of course, in both examples above, we haven’t specified an action; all we’re doing is returning those DOM elements, which does nothing. In the next section, we’ll add methods that will act on the group of elements we’re targeting.

jQuery commands

jQuery’s API includes easy access to effects and other actions via built-in methods that would normally take dozens of lines of code to accomplish in a cross-browser fashion with pure JavaScript. For example, let’s add a "fade out" method to the code from the previous examples:

$("li a").fadeOut();

The above line of code "fades out" all anchor tags on the page that are nested inside of

tags. If we want to fade the anchors back in again, we just use the fadeIn() method:

$("li a").fadeIn();

Chaining commands

jQuery also allows developers to chain commands, stringing one after another. So, we could combine the previous two examples, as follows:

$("li a").fadeOut().fadeIn();

The above code will fade out all anchor tags nested within list items, then immediately fade them back in. The number of chained items is infinite (or within reasonably set limits), allowing for numerous commands to work on the same group of elements, each happening in succession.

That’s just a small sampling of what’s possible with jQuery, and how easy it is to accomplish tasks that would normally take many lines of code, and a lot of browser testing. Although you’ll still do browser testing when running jQuery code, the results will virtually always be the same: cross-browser, unobtrusive JavaScript that’s easy to write and easy to maintain.

Running code when the DOM is ready

Earlier we touched on the concept of unobtrusive JavaScript, and how jQuery is written to allow your scripts to remain separate from content and presentation. So far, the code examples we’ve discussed would run fine as long as they were included at the bottom of an HTML page. If, on the other hand, they were included in the head of the document, they would fail to work because, at that point, the document tree has not yet rendered.

jQuery allows us to run our code only when the DOM is ready. This is done by means of the $(document).ready handler. The beauty of this handler is that it doesn’t make the code wait until the entire page finishes loading, as would be the case with a typical window.onload event. With the (document).ready handler, your code will run as soon as the DOM tree is finished rendering, before all images and other media have finished loading, thus minimizing load time.

Let’s try running our previous code example when the DOM is ready:

$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

The above code tells jQuery to run an anonymous function when the document tree is done rendering. The anonymous function contains the code we saw previously, which faded our anchors out, then immediately faded them back in again. This code could be included in the of the document, near the bottom of the page, or anywhere else, and it would run exactly the same way.

The "ready" event is just one of the many events available through jQuery’s API. Others include click, dblclick, load, blur, keydown, submit, and more.

Conclusion

jQuery is capable of so much more, and I’ve only just begun demonstrating its power and simplicity. But I think this suffices to provide a good overview, with some syntax basics, thus preparing beginning jQuery developers for easy-to-write and practical JavaScript code.

About the Author

Louis Lazaris is a writer and freelance web developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. Follow Louis on Twitter or contact him through this form.

Go to Source

Five Quick New Year Resolutions for Designers and Developers

Facebook-Web-Design — Mon, 04 Jan 2010 14:45:24 +0000

It’s the time of year when we all make promises to make ourselves better people. Pledges to improve our health or organise our lives. So here are five quick resolutions we should all make as designers or developers.

Clean up your code

Look through your code and clean it up. Remember, Google is watching and will favour sites with cleaner code. Get rid of those unnecessary tags. Add in attributes such as alt tags. Combine sections from multiple plages into include files.

Get Analytics

It only takes five minutes to get analytics code into your site. It will give you a wealth of information. You can use more than one system in tandem to see which one you feel works best. And remember to exclude your own visits.

Learn the basics of jQuery, CSS3 and HTML5

A javascript library such as jQuery will save you time and give your websites nice features with less effort. CSS3 and HTML5 are already supported in some browsers, using them now will give you a head start when they become more widely supported.

Build your social networks

Get accounts on popular social networks such as Facebook and Twitter. Even if you don’t use them tomorrow, you may lose your chance to grab your username. But start using them to market yourself and build your brand.

Make a video

Making a video has never been easier. Talk to the camera or off camera. Use screencasting software to share your skills, or make a video to promote yourself. Use your phone, your digicam or your camcorder. Use a videosharing site like YouTube or Vimeo if you want it to get noticed.

Go to Source

Create Complex Layouts with a Fast and Simple UI Kit

Facebook-Web-Design — Wed, 30 Dec 2009 13:05:09 +0000

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane. Google wave layout can be coded in 100 lines using uki code.

Uki doesn’t want to be a Jack-of-all-trades. It only does layout but it does it well. You won’t find any ajax or data storage layer code here. Uki uses progressive rendering and can render 30k+ lists and tables most instantly. Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks exactly the same in all of them.

Requirements: -
Demo: http://ukijs.org/functional/wave.html
License: MIT License

Social Hosting, Good Parenting Are Keys to Open Source Success

Facebook-Web-Design — Tue, 29 Dec 2009 21:50:17 +0000

It’s often said that you can’t kill an open source project.

The logic behind that maxim is that, as long as the source code is out there and freely available, someone will always show up to work on it, add to it, improve it. Indeed, that’s often the motivation behind releasing a project under an open source license.

One example is tr.im, the URL shortening service that shut down temporarily, but whose code is now open source. Another is OpenTape, a clone of the popular (and long gone) Muxtape music streaming app. Both released into the wild after the original developers became overwhelmed in the hopes that someone, anyone, would keep those projects alive. Whether or not the community actually forms around the release is irrelevant. The point is that it could.

But what do you do when an ostensibly open source project lacks support from its creators, and it becomes nearly impossible for the community to contribute? That’s the question programmer Jeff Atwood raised in a blog post Tuesday regarding John Gruber’s Markdown software.

Markdown is a text-to-HTML conversion tool which allows you to write web code using an easy-to-understand plain text format. Markdown text is then converted to structurally valid XHTML (or HTML). Markdown is used all over the web — it’s even understood by the content fields and comment forms within most popular blogging platforms, including WordPress and Movable Type. It’s been ported to Python, Ruby, PHP and other popular languages.

However, the original Perl script has remained largely unchanged since its release in 2004. In his post, Atwood takes Gruber to task for what Atwood calls “bad parenting,” an indictment of Markdown’s lack of bug fixes, updates and improvements.

Markdown was released under a BSD-style open source license, meaning the community can do pretty much whatever it likes with the code, so long as it respects the copyright notices and naming rules. Indeed, many ports of Markdown enjoy rather widespread support with numerous contributors and an aggregate community of active developers that the original Markdown lacks.

So while the various implementations of Markdown have regular fixes and updates, Gruber’s original code lacks such activity. What’s the difference? Atwood lays some of the blame at Gruber’s feet, citing what Atwood calls “passive-aggressive interaction with the community,” and quotes one of Gruber’s famously bristly e-mails (Gruber also writes the famously bristly blog, Daring Fireball) that shows the author discouraging changes. Single programmers rarely have that sort of influence. Which isn’t to say we disagree with Atwood’s assessment, just that Gruber is an extreme example and that it shouldn’t matter either way.

The bigger reason Markdown’s original Perl source doesn’t see bug fixes and maintenance releases seems to lie more its hosting situation than any other single problem Atwood raises. Without a way to easily contribute to your project, your potential users can’t improve your code.

The Perl source of Markdown is hosted as static download on Gruber’s website. Download the zip file and you’ve got a copy of Markdown you can use, modify and even redistribute according to the terms of the license.

But you don’t have a copy that’s easy to patch, and there’s no simple way to contribute back to the project, short of sending code directly to Gruber or to the support mailing list.

If the Markdown source code lived somewhere like GitHub, BitBucket, Google Code or any of the other free, open source code repository hosts, it would be infinitely easier for the community to contribute. To be fair, none of those sites existed when Markdown was released, but moving the code wouldn’t be hard — it’s a single archive with a license and readme text file.

A good project hosting service allows the community to contribute in ways that it just can’t when the code is static download.

Markdown isn’t alone in this respect. Django programmers were very excited to get their hands on the EveryBlock source code when it was finally released. However, since the EveryBlock code is, like Markdown, a static download, there isn’t and easy way for the community to contribute.

I have been using the EveryBlock code in a personal project for some time, and I’ve found at least a dozen bugs and several oversights and contradictions in the documentation. None of these stumbling blocks have stopped me from using the code, but it would be nice if I could contribute patches so others don’t also have to bang their heads against a wall for days on end trying to make the code work.

Yet a static hosting environment prevents that. There’s no easy way for me or anyone else to contribute to the code, update the documentation, add helpful links to a wiki, ask a question and get it answered. As a result, the whole community around the project suffers.

While it’s true I could put the codebase into a version control system and host my own copy, but not only does that feel wrong, it shouldn’t be necessary. The “you can always fork it” motto of open source has proved one of its least helpful tenets, leading to a proliferation of nearly identical code forks that are difficult to keep track of and work with.

We understand that the people who release open source code might not have time to work on it, or might simply lose interest in it over time, but that’s precisely why version control systems exist — to take the burden off the developer and let the contributions of the community pick up the slack in an open, organized manner.

Does a project still need an maintainer and someone to check in code, run tests, merge branches and so on? Sure, but that need not be a single person. Sizable open source projects — take Firefox for example — have dozens of committers and (in theory) no one person winds up feeling overwhelmed.

While in this particular case, it could be argued that Markdown doesn’t need further development. We use it everyday without issue. But the larger issue remains for other projects. Without active development, particularly bug fixes and maintenance releases, your open source project will rarely be successful.

Get your code into a decent version control system and make it easy for other users to do what you don’t have to — make your code better.

Photo by gerhard3/CC BY-NC-SA 2.0

See Also:

Go to Source

Mashable’s Weekly Guide to Social Media Events

Facebook-Web-Design — Mon, 28 Dec 2009 17:06:22 +0000

Is your event not on this list? Contact us at least one month before your event and let’s establish a media partnership.

Mashable’s Weekly Social Media and Marketing Event Guide is proudly supported by Eventbrite, the Web’s Event Marketplace.

January 28, 2010, San Francisco, CA: The ARF Industry Leader Forum — Putting Listening to Work is an interactive event to help advertisers, agencies, media and research companies determine how to use social media and digital behavior for their listening strategies. Learn how to use listening, evaluate listening applications, develop a listening strategy, integrate it into your existing research program, create an action plan and apply insights garnered. Attendees will receive The ARF Foundations Series – Listening tool, an $895 value, featuring 25 case studies and 30+ company reviews how listening is used for consumer insight, customer service, new product development, reputation management, competitive benchmarking, and breaking into new applications like media planning, targeting and predictive modeling. Speakers include: Jeremiah Owyang, digital media strategy superstar and blogger and Partner, Customer Strategy, Altimeter Group, Toyota Motor Sales, Saatchi and Saatchi Wellness and LinkedIn. Mashable readers can use promo code ARFMASH to save $100.

March 24-25, San Francisco, CA: EyeforTravel’s Social Media Strategies for Travel conference goes beyond the ‘what is social media?’ debates (that were so 2008!) and examines the strategic importance of social media to travel brands. The 2 day conference will share leading case studies, hits, tips and advice from top travel companies including JetBlue, Hilton, Virgin America and more. Use the discount MASHABLE to save $100 on the registration fee!

The Mashable Weekly Social Media and Marketing Event Guide is proudly supported by Eventbrite, the Web’s Event Marketplace.

Tags: conferences, Events, mashable

Go to Source

10 Awesome Uses of Augmented Reality Marketing

Facebook-Web-Design — Sat, 26 Dec 2009 19:10:10 +0000

Visuals are an important part of advertising, so it’s not surprising that so many companies have jumped on the augmented reality bandwagon, offering tools that visualize their products in a magical and memorable way.

Here we take a look at some pretty amazing promotional uses of this new tech that work with common webcams, giving everyone a chance to experience augmented reality — a trend that will be big in 2010.

1. BMW Z4

This BMW interpretation ties in with a TV ad that sees artist Robin Rhode using the Z4 as a giant paintbrush (think big-scale finger-painting with the car’s tyres). Downloading the software, printing out the 3D symbol and holding it up to your webcam will allow you to see your own miniature Z4 on your screen, which you can then drive around using keyboard commands, creating your own Rhode-esque car painting.

2. TOPPS 3D LIVE Trading Cards

Taking the trading card into the 21st century, the Topps “3D LIVE” range offers baseball (and now also football) stars that leap from the special cards onto your desk, as viewed via webcam. As well as creating miniature holographic representations of the players — a neat enough trick that would impress most kids — the concept is taken a step further with the angle that you can control the player’s signature moves via your keyboard.

3. Transformers: Revenge of the Fallen

As well as augmented reality, this example uses clever face-tracking technology to stick the original 3D CGI head of Optimus Prime atop your own visage. The campaign to promote “Transformers: Revenge of the Fallen” also includes a hidden holographic message from Bumblebee, again developed using the original 3D model of the robot that appeared in the movie, suggesting CGI films may be ripe for more AR apps in the future.

4. Doritos Sweet Chilli Chips

What we like about Doritos’ take on the tech for the Brazilian market is that the webcam code is printed on the back of the chip packet, adding value to something normally disposable. Perhaps this also means less chip bags littering the streets. Holding up the code on the Sweet Chilli chips packets initiates the appearance of a little cartoon character, which can then be used in an extended online game.

5. USPS Priority Mail Virtual Box Simulator

Erring on the functional side of promotion, the USPS Priority Mail Virtual Box Simulator is a wickedly clever use of the tech that lets users compare the size of an item they need sent to the size of boxes available from the postal service, by seeing how well their item fits inside a transparent box. Although not particularly high octane excitement, it does illustrate the practical use of AR which is yet to be fully explored.

6. Star Trek

These kind of applications work particularly well with a techie audience, or in this instance a Trekkie one. The front cover of certain versions of the Star Trek movie on DVD and Blu-ray doubles as a webcam code to initiate the “cadet orientation” program. It offers a holographic tour around the USS Enterprise (that appears as a hovering apparition on your screen), incorporating a look at the bridge, and best of all, a trigger to fire the ship’s weapons, complete with sound effects.

7. Wrigley’s 5 Gum

Created for the launch of Wrigley’s “5″ chewing gum in France (although the site is also available in English) this interactive example of AR sees five symbols (each representing one of the five gum flavors) becoming a different track that only plays when the webcam can “see” it. The desktop DJ experience is probably best explained by watching the demo video above, populated appropriately by masticating teens.

8. Ray-Ban

Although many items of apparel can be bought online, sunglasses are one of those tricky products that you really need to try on to ensure you look more chic than geek. Ray-Ban’s Virtual Mirror (ably demonstrated here by YouTuber NickHearne) lets you virtually try on glasses (after a quick bit of face-mapping). The software lets you move your head around to see how the shades look from different angles. Depending on the opacity of the glass, you can even see your eyes through some of the shades. Seeing this app in action makes us think this could be where the real commercial future of AR lies.

9. Lost Valentinos

John Mayer, Eminem and Julian Perretta are three other musicians that have dabbled with AR as a way of making their music videos more compelling, but this effort from the Lost Valentinos — with each printable code representing a member of the band to be arranged as you see fit — is a great example of how to keep it tight. In addition, the band’s site doubles as a video gallery for fans to share how they interacted with the AR by uploaded webcam video clips.

10. Always Infinity

This time round we’ve saved the worst for last. How best to promote feminine hygiene products? With an augmented reality white bunny of course. We think the world can do without this irrelevant foray into the AR arena that assumes a female audience will be blown away by an incredibly basic application of the tech.

Reviews: Blu

Tags: Augmented Reality, awesome, business, MARKETING

Go to Source

F*ck This Weather

Facebook-Web-Design — Tue, 22 Dec 2009 16:11:09 +0000

Fuck This Weather provides fast, easy access to weather by zip code or city. This service provides current conditions, a five-day forecast, and – where available -radar imagery.
Go to Source

A Font & Style Testing Bookmarklet: FontFriend

Facebook-Web-Design — Mon, 21 Dec 2009 19:05:05 +0000

FontFriend is a bookmarklet for easily & instantly changing the fonts + styles used on a website without code editing or refreshing.

Once clicked, it overlays a menu with web fonts, font-variants, weights, text-transform properties, size/height entries & an element selector to target specific elements.

At this point, every clicked property instantly updates the selected element.

The overlay screen also has an @font-face support which makes it possible to test non-standard fonts by simply drag'n dropping them.

To sum up, the bookmarklet is very functional for any web designer by removing the standard code editing + refreshing process.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: bookmarklet

No related posts.

Go to Source

Cleaner Code with CSS3 Selectors

Facebook-Web-Design — Mon, 21 Dec 2009 18:30:16 +0000

Cleaner Code with CSS3 Selectors. Learn how CSS3 selectors can be used to get some of the junk out of our front and back-end code.
Go to Source

Google’s Favorite Place | Using QR Codes for Business

Facebook-Web-Design — Sat, 19 Dec 2009 20:26:33 +0000

We have been hearing about QR Codes since early this year, but leaves you wondering how it can be used on a more practical and efficient means. Now with Google’s Favorite Place the possibilities are more tangible. First, how does Google’s Favorite Place works? This is based on how customer’s interact with business online. If you are not listed then, how can your customers find you? Imagine, if your competitor is there and you are not, then your competitor will have an edge. The QR Codes enable people to simply find a business, so whether you are a coffee shop, restaurant, flower shop, whether small, medium or large company, this tool can really help you. This is a great tool to help us all find reviews, ratings, locations of any business near our areas.

What are QR Codes?

This unique bar code on the lower right of the sticker (known as a QR code) lets customers – and potential customers – instantly learn more about a business, by visiting a mobile version of the business’ Place Page on any supported phone.

Here’s more on how it works and what you can do with it:

Make sure your phone can scan a QR code with its camera, either with an application that you download or via software that’s already installed on your phone. To find out what application to use for your phone, we recommend doing a Google search for the model of your phone along with “QR reader”.
When you see a QR code, use your phone’s application to scan it. If you’re scanning a QR code on one of the window decals that we’ve sent to thousands of U.S. businesses, you’ll quickly be taken to that business’ mobile Place Page on Google, where you can:
- Read reviews to see what other users think about the business
- Find a coupon that the business has posted to their Place Page
- Star the business to remember to check it out later, or to remember to visit again
- Leave a review right after you leave the business. What’s a better time to write what you think, than when you’ve just visited?

Here is a quick tour on how Google can help your customer’s locate you.

Go to Source

HipChat

Facebook-Web-Design — Sat, 19 Dec 2009 11:10:03 +0000

HipChat brings better-than-enterprise instant messaging to your organization. Email is slow, meetings get sidetracked, and regular IM doesn’t work well for groups. HipChat helps you share text, code, and files for instant decision making. Get more done with chat rooms, file sharing, and searchable chat history. It’s a more productive and fun way to work.
Go to Source

Squade – Code Together

Facebook-Web-Design — Fri, 18 Dec 2009 18:06:39 +0000

Squad is a web-based collaborative code editor. We make it simple to open, edit and share code in real time.

http://squadedit.com/

Go to Source

Fully Utilize Google Analytics Reporting Power

Facebook-Web-Design — Fri, 18 Dec 2009 16:25:03 +0000

You probably use Google Analytics on a regular basis, for basic stats tracking the performance of your website. Like most Google Analytics users, you probably don’t venture far from the comfort of the reports shown on the dashboard. That’s all the analytical information you need, you may be thinking … or is it?

Did you know that Google Analytics can generate up to 85 different reports that will help you analyze all possible data about your website traffic. Not only does it track visitors to your site or the number of page views, it can be used to see which content gets the most visits, time on site per visit, which ads are driving the most visitors to your site, it track the performances of your marketing campaigns.

In basic explanation of how GA works is that a javascript code snippet is embedded on each page of your website. The js code collects and tracks the visits. After a week or less you can check the progress by:

Sign in to Google Analytics.
From the Analytics Settings page, find the profile for which you would like to retrieve the tracking code. Please note that tracking code is profile-specific.
From that profile’s Settings column, click Edit.
At the top right of the Main Website Profile Information box, click Check Status.
Your tracking code can be copied and pasted from the text box in the Instructions for adding tracking section.

Once you’re logged in you can see the information about your traffic. There are many things to look at but, the main ones to look at is the “traffic sources.” This isn’t the only thing but for this article, say you want to know how your visitor is finding you on the internet. There are 3 traffic source that GA shows:

Direct – visitor arrives directly
Refferal – visitor arrives from another site – usually this is from a link from a site – you will see a url or a text link poultry seasoning or Red Wine Glass
Search Engines – visitor arrives via search engines for a search query like – restaurant consultants Chicago - Kitchen Makeover

There are more to see, this is just one of the many features that Google Analytics offers, have fun.

Comments

Go to Source

20+ Tools for Quick and Clean Code Development

Facebook-Web-Design — Tue, 15 Dec 2009 11:35:42 +0000

Developing websites is much more than just a pretty face, and depending on what typed of features you’d like to implement on the site, there’s a lot of coding that goes into it. Many times designers turn to a WYSIWYG tool, however tools of that sort are more limited to advanced code. Being able to code a site using a variety of tools lets you simplify the coding process while you take a big bite out of saving time.

Below we’ve hand picked 20+ Tools for Quick & Clean Code Development that will help you code much faster and in an efficient manner.

AJAX

MiniAjax

MiniAjax is pretty much a large collection of downloadable AJAX scripts, for customization on your site. Most of these scripts are configurable, and guide you through the implementation.

Clean AJAX

Clean AJAX provides a high level interface to work with the AJAX technology. It’s created to solve problems found in AJAX applications. This tool will save you time and help you fix and tidy up your code.

Rialto

The Rich Internet Application Toolkit (Rialto) is an ajax-based cross browser library with lots of widgets. Rialto gives you quick and easy access to rich internet application development. As a developer, you’ll virtually need no understanding of DHTML, Ajax or DOM code.

ThinWire

ThinWire is mostly driven by an open source development framework that allows you to build applications for the web that have usable and interactive user interfaces. You’ll be able to complete projects at a fraction of the time, all while handling the view-layer of your Java EE (J2EE) applications.

AjaxDaddy

AjaxDaddy is a resource site filled with useful and time-saving AJAX scripts for your website. You can find anything from slide shows to customized feeds.

JavaScript

jQuery UI

With jQuery UI you’ll be able to design custom user interfaces for a number of web applications utilizing the jQuery library. This nifty tool lets you substantially cut-back on the amount of code you would need to write. You should also scroll to the demo page for some nice examples.

Venkman JavaScript Debugger

Venkman happens to be Mozilla’s JavaScript debugger, and it is a fully servicing debugging environment. It comes with numerous features and specialized options for the inspection of how well your script interacts and performs.

SproutCore

SproutCore is a framework that helps you build applications in JavaScript with little amounts of code. Best of all you won’t need any plugins, and they will work with any of the modern-browsers.

SimpleJS

SimpleJS is a lightweight JavaScript library that gives developers useful JavaScript functions when working with AJAX.

CSS

List-O-Matic

List-O-Matic lets you create CSS-styled navigation menus based on list items.

Blue Print CSS

Blueprint CSS, a framework that helps you save time by cutting down your CSS development time. You’ll be backed by a solid CSS foundation letting you build your project, organized grid, and more.

CSS Compressor

CSS Compressor allows you to easily compress your CSS code to increase loading speed and save on bandwidth. There are different levels of compression for you to choose from, this depends on the size of your code, and your desired load time.

Clean CSS

Clean CSS optimizes and formats your code and makes it much cleaner and more organized. Your CSS will be clutter-free.

CSS Color Chart

The CSS Color Chart page contains a neutral colors chart and a general-purpose color chart. The colors are compatible with CSS and HTML. You can copy in which ever format you desire, all you need to do is hit the toggle button and it will convert from Hex to RGB and back. This is ideal for designers that practice color-theory in depth, and use a lot of colors in their layouts.

HTML

BBEdit

BBEdit is an HTML and text editor for the Mac OS X. It was specifically designed for web designers and coders that want efficient editing, and text manipulation.

XHTML Markup Generator

Markup Generator is a simple and effective tool that takes the slicing out of having to slice your own work from the very beginning. You’ll be able to produce standard XHTML markup along with a CSS frame that’ll let you style your elements.

HTML CheatSheet

This is a pretty extensive and easy to read cheatsheet for HTML code.

HTML Entity Character Lookup

With this app you’ll quickly find an entity or tag based on how it looks. Save time by not having to visit another site to lookup a tag, or needing to remember its function.

PHP

CakePHP

CakePHP is a solid development framework for PHP that empowers you with a useful architecture for developing, and maintaining your apps.

XDebug

Xdebug is an extension for PHP that helps you debug scripts. Useful features include warnings, and error messages that are displayed after activation. If there’s a script that fails to prperly work, Xdebug will print an error message, along with function names, parameter values, source files, and line more.

SimpleTest

PHP_CodeSniffer is a PHP 5 script that vigorously detects conformance to a predefined PHP coding standard. It’s specially helpful on large projects, and for keeping uniform coding styles.

Pixy: PHP Security Scanner

Pixy is a Java program that performs automatic scans of PHP 4 source code, aimed to detect XSS and SQL injection vulnerabilities. Pixy takes a PHP program as input and creates a report that lists possible vulnerable points in the program, along with additional information for understanding the vulnerability.

About the Author

Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. Connect with him via Twitter, and through his Blog.

Go to Source

Tierra’s Audio Playlist Manager

Facebook-Web-Design — Sun, 13 Dec 2009 12:16:38 +0000

Author: Tierra Innovation

Tierra’s Audio Playlist Manager offers extensive flexibility when embedding mp3 audio into your posts or templates. Features include:

Embed single/multiple audio file(s) on a post page or template
Embed single/multiple audio playlist(s) on a post page or template
Build your own XSPF compatible player and link our XML to it

We provide customizable short code that can be pasted into any page / post, as well as code to embed into your template. For example code and samples, visit our Audio Playlist Manager page.

Go to Source

WordPress 2.9 Changes to Post Thumbnails

Facebook-Web-Design — Sun, 13 Dec 2009 12:16:28 +0000

The world of WordPress Development is constantly changing. As well it should. No surprise there. Several days ago, I posted an article how to add the post thumbnail feature on your themes for the upcoming WordPress 2.9, which is currently in Beta.

Previously, the code for themes was:
.
It has changed to:
.

The entry in functions.php is still the same. This code activates post thumbnails feature. In case you’ve forgotten, it’s:

if ( function_exists( ‘add_theme_support’ ) )
add_theme_support( ‘post-thumbnails’ );

Lastly, Technosailor talks about the changes for WordPress 2.9. Great read.

Go to Source

MooTools Gets a Plugin Repo, Makes Finding the Right Code Easier

Facebook-Web-Design — Fri, 11 Dec 2009 17:05:04 +0000

Plugins are a fact of life when it comes to JavaScript libraries. These user-contributed code snippets provide tremendous features & functionality and save developers time by not having to re-invent the wheel. The hard part, though, is trying to filter out which ones are actually useful and compatible with your current library. Finding the right plugin can at times be a crap shoot. The MooTools team is trying to solve this issue for their community. Yesterday, the MooTools team launched the official MooTools plugin repository called MooTools Forge which aims to simplify finding the right MooTools plugin for your project.

For people trying to find plugins, we wanted a simple interface with visual focus on what’s available. Going through lists of plugins whose names are not always that intuitive or descriptive is both boring and inefficient. You might find yourself opening dozens of tabs just to see what the plugin can potentially offer. We want to try and put all the information you need to make a choice right in one place.

Focus has been given to making it easy see a demo, download plugins, and understanding how plugins actually work along with integration with GitHub to allow developers to easily manage their code.

Check out the video below for an overview of the MooTools Forge:

Go to Source

Top 15+ Best Practices for Writing Super Readable Code

Facebook-Web-Design — Wed, 09 Dec 2009 08:42:40 +0000

Code readability is a universal subject in the world of computer programming. It’s one of the first things we learn as developers. Readable and maintainable code is something to be proud of in a finished product. We can share it with others, contribute to other projects, and reuse code from applications we wrote months or even years ago.

This article will detail the fifteen most important best practices when writing readable code.

1. Commenting & Documentation

IDE’s (Integrated Development Environment) have come a long way in the past few years. This made commenting your code more useful than ever. Following certain standards in your comments allow IDE’s and other tools to utilize them in different ways.

Take this example:

The comments I added at the function definition can be previewed whenever I use that function, even from other files.

Here is another example where I call a function from a third party library:

In these particular examples, the type of commenting (or documentation) used is based on PHPDoc and the IDE is Aptana.

2. Consistent Indentation

I assume you already know that you should indent your code. However, it’s also worth noting that it is a good idea to keep your indentation style consistent.

There are more than one way of indenting code.

Style 1:

function foo() {
	if ($maybe) {
		do_it_now();
		again();
	} else {
		abort_mission();
	}
	finalize();
}

Style 2:

function foo()
{
	if ($maybe)
	{
		do_it_now();
		again();
	}
	else
	{
		abort_mission();
	}
	finalize();
}

Style 3:

function foo()
{	if ($maybe)
	{	do_it_now();
		again();
	}
	else
	{	abort_mission();
	}
	finalize();
}

I used to code in style #2 but recently switched to #1. But that is only a matter of preference. There is no “best” style that everyone should be following. Actually, the best style, is a consistent style. If you are part of a team or if you are contributing code to a project, you should follow the existing style that is being used in that project.

The indentation styles are not always completely distinct from each other. Sometimes they mix different rules. For example, in PEAR Coding Standards, the opening bracket “{” goes on the same line as control structures, but they go to the next line after function definitions.

PEAR Style:

function foo()
{                     // placed on the next line
    if ($maybe) {     // placed on the same line
        do_it_now();
        again();
    } else {
        abort_mission();
    }
    finalize();
}

Also note that they are using four spaces instead of tabs for indentations.

Here is a Wikipedia article with samples of different indent styles.

3. Avoid Obvious Comments

Commenting the code is great; however, it can be overdone or just be plain redundant. Take this example:

// get the country code
$country_code = get_country_code($_SERVER['REMOTE_ADDR']);

// if country code is US
if ($country_code == 'US') {

	// display the form input for state
	echo form_input_state();
}

When the text is that obvious, it’s really not productive to repeat it within comments.

If you really must comment on that code, you can just combine it to a single line instead:

// display state selection for US users
$country_code = get_country_code($_SERVER['REMOTE_ADDR']);
if ($country_code == 'US') {
	echo form_input_state();
}

4. Code Grouping

More often than not, certain tasks take a few lines of code. It is a good idea to keep these tasks within separate blocks of code, with some spaces between them.

Here is a simplified example:


// get list of forums
$forums = array();
$r = mysql_query("SELECT id, name, description FROM forums");
while ($d = mysql_fetch_assoc($r)) {
	$forums []= $d;
}

// load the templates
load_template('header');
load_template('forum_list',$forums);
load_template('footer');

Adding a line of comment at the beginning of each block of code also emphasizes the visual separation.

5. Consistent Naming Scheme

PHP itself is sometimes guilty of not following consistent naming schemes:

strpos() vs. str_split()
imagetypes() vs. image_type_to_extension()

First of all, the names should have word boundaries. There are two popular options:

camelCase: First letter of each word is capitalized, except the first word.
underscores: Underscores between words, like: mysql_real_escape_string().

Having different options creates a situation similar to the indent styles, as I mentioned earlier. If an existing project follows a certain convention, you should go with that. Also, some language platforms tend to use a certain naming scheme. For instance, in Java, most code will be using camelCase names, while in PHP, most code will use underscores.

These can be also mixed. Some people prefer to use underscores for procedural functions, and class names, but use camelCase for class method names:

class Foo_Bar {

	public function someDummyMethod() {

	}

}

function procedural_function_name() {

}

So again, there is no obvious “best” style, besides just being consistent.

6. DRY Principle

DRY stands for Don’t Repeat Yourself. Also known as DIE: Duplication is Evil.

The principle states:

“Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”

The purpose for most applications (or computers in general) is to automate repetitive tasks. This principle should be maintained in all code, even web applications. The same piece of code should not be repeated over and over again.

For example, most web applications consist of many pages. It’s highly likely that these pages will contain common elements. Headers and footers are usually best candidates for this. It’s not a good idea to keep copy pasting these headers and footers into every page. Here is Jeffrey Way explaining how to create templates in CodeIgniter.

$this->load->view('includes/header');

$this->load->view($main_content);

$this->load->view('includes/footer');

7. Avoid Deep Nesting

Too many levels of nesting can make code harder to read and follow.

function do_stuff() {

// ...

	if (is_writable($folder)) {

		if ($fp = fopen($file_path,'w')) {

			if ($stuff = get_some_stuff()) {

				if (fwrite($fp,$stuff)) {

					// ...

				} else {
					return false;
				}
			} else {
				return false;
			}
		} else {
			return false;
		}
	} else {
		return false;
	}
}

For the sake of readability, it is usually possible to make changes to your code to reduce the level of nesting:

function do_stuff() {

// ...

	if (!is_writable($folder)) {
		return false;
	}

	if (!$fp = fopen($file_path,'w')) {
		return false;
	}

	if (!$stuff = get_some_stuff()) {
		return false;
	}

	if (fwrite($fp,$stuff)) {
		// ...
	} else {
		return false;
	}
}

8. Limit Line Length

Our eyes are more comfortable with reading tall and narrow columns of text. That’s the reason newspaper articles look like this:

It is a good practice to avoid writing very long lines of code.


// bad
$my_email->set_from('test@email.com')->add_to('programming@gmail.com')->set_subject('Methods Chained')->set_body('Some long message')->send();

// good
$my_email
	->set_from('test@email.com')
	->add_to('programming@gmail.com')
	->set_subject('Methods Chained')
	->set_body('Some long message')
	->send();

// bad
$query = "SELECT id, username, first_name, last_name, status FROM users LEFT JOIN user_posts USING(users.id, user_posts.user_id) WHERE post_id = '123'";

// good
$query = "SELECT id, username, first_name, last_name, status
	FROM users
	LEFT JOIN user_posts USING(users.id, user_posts.user_id)
	WHERE post_id = '123'";

If you follow the “Avoid Deep Nesting” suggestion, that will also help the line lengths to stay at a reasonable size.

Also, if anyone is going to read the code from a terminal window, such as VI users, it is a good idea to to limit the line length to around 80 characters.

9. File and Folder Organization

Technically, you could write an entire application code into a single file. But that could be a nightmare to read and maintain.

During my first programming projects, I knew about the idea of creating “include files”. However I was still not even remotely organized. I created an “inc” folder, with 2 files in it: db.php and functions.php. As the applications grew, the functions file also became huge and unmaintainable.

One of the best approaches is to either use a framework or imitate their folder structure. Here is what CodeIgniter looks like:

10. Consistent Temporary Names

Normally, the variables should be descriptive and contain one or more words. But, this doesn’t necessarily apply to temporary variables. They can be as short as a single character.

It is a good practice to use consistent names for your temporary variables that have the same kind of role. Here are a few examples that I tend use in my code:


// $i for loop counters
for ($i = 0; $i < 100; $i++) {

	// $j for the nested loop counters
	for ($j = 0; $j  $v) {

}

// $q, $r and $d for mysql
$q = "SELECT * FROM table";
$r = mysql_query($q);
while ($d = mysql_fetch_assocr($r)) {

}

// $fp for file pointers
$fp = fopen('file.txt','w');

11. Capitalize SQL Special Words

Database interaction is a big part of most web applications. If you are writing raw SQL queries, it is a good idea to keep them readable as well.

Even though SQL special words and function names are case insensitive, it is common practice to capitalize them to distinguish them from your table and column names.

SELECT id, username FROM user;

UPDATE user SET last_login = NOW()
WHERE id = '123'

SELECT id, username FROM user u
LEFT JOIN user_address ua ON(u.id = ua.user_id)
WHERE ua.state = 'NY'
GROUP BY u.id
ORDER BY u.username
LIMIT 0,20

12. Separation of Code and Data

This is another principle that applies to almost all programming languages in all environments. In the case of web development, the “data” usually implies HTML output.

When PHP first came out many years ago, it was mainly seen as a template engine. It was common to have big HTML files with a few lines of PHP code in between. However, things have changed over the years and websites became more and more dynamic and functional. The code is now a huge part of web applications, and it is no longer a good practice to combine it with the HTML.

You can either apply the principle to your application by yourself, or you can use a third party tool (template engines, frameworks or CMS’s) and follow their conventions.

Popular PHP Frameworks:

Popular Template Engines:

13. Alternate Syntax Inside Templates

You may choose not to use a fancy template engine, and just go with plain inline PHP in your template files. This does not necessarily violate the “Separation of Code and Data,” as long as the inline code is directly related to the output, and is readable. In this case you should consider using the alternate syntax for control structures.

Here is an example:


	
		Hello, username; ?> 

		
	
		 |
		
	


My Message Board



	

		title; ?>

		Forums as $forum): ?>

			

				
					id, $forum->title) ?>
					(Threads->count(); ?> threads)
				

				
					description; ?>

This lets you avoid lots of curly braces. Also, the code looks and feels similar to the way HTML is structured and indented.

14. Object Oriented vs. Procedural

Object oriented programming can help you create well structured code. But that does not mean you need to abandon procedural programming completely. Actually creating a mix of both styles can be good.

Objects should be used for representing data, usually residing in a database.

class User {

	public $username;
	public $first_name;
	public $last_name;
	public $email;

	public function __construct() {
		// ...
	}

	public function create() {
		// ...
	}

	public function save() {
		// ...
	}

	public function delete() {
		// ...
	}

}

Procedural functions may be used for specific tasks that can be performed independently.

function capitalize($string) {

	$ret = strtoupper($string[0]);
	$ret .= strtolower(substr($string,1));
	return $ret;

}

15. Read Open Source Code

Open Source projects are almost always built with collaboration between many developers. These projects need to maintain a good level of code readability so that the team can work together as efficiently as possible. Therefore, it is a good idea to sometimes browse through the source code of these projects to observe what these developers are doing.

16. Code Refactoring

Refactoring means to make changes to the code without changing any of its functionality. You can think of it like a “clean up,” for the sake of improving readability and quality.

This doesn’t include bug fixes or addition of any new functionality. You may refactor code that you have written the day before, while it’s still fresh in your head, so that it is more readable and reusable when you may potentially look at it two months from now. Therefore, usually the motto is: “refactor early, refactor often.”

You may apply any of the “best practices” of code readability during the refactoring process.

I hope you enjoyed this article! Any that I missed? Let me know via the comments.

Go to Source

Speed Tracer: Google announces new tools and more thanks to the GWT team

Facebook-Web-Design — Wed, 09 Dec 2009 07:05:50 +0000

Here is Speed Tracer, the new tool to aid us Web developers in our quest for great applications:

Ben and I are at Google Campfire One with a Who’s Who from the Web developer space. When I first met the GWT team they were talking about revolutionary new Web tools that they wanted to create, and I have a feeling that they will be talking about what they have come up with.

David Glazer (Engineering Director) and Andrew Bowers (GWT PM) are kicking off the build up with the obligatory ra-ra for HTML5 and the great new browsers we have to build “modern Web applications”.

Next, Andrew gets into the world of development and deployment of Web apps and the productivity and performance improvements.

First up, productivity. Andrew is discussing AdWords which uses GWT in places. AdWords uses a UiBinder a declarative approach to building GUIs:

PLAIN TEXT

HTML:

style/>
… insert HTML or widgets …
….>
“closeWidget”>Close</g>

</g>

</ui>

AboutDialog.java:

PLAIN TEXT

JAVA:

@UiHandler(“closeWidget”)
void onClick(ClickEvent e) {
hide();
}

After the demo he talks about the Developer Plugin and support for multiple browsers.

Matt Mastracci, founder of Dotspots, is now “by the fire” ready to talk to us about how they use GWT. First up he shows a GWT application that compiles down and uses it as a Firefox add-on. They have also used the same code that they incorporate in a Chrome Extension and other areas. GWT 2.0 contains a new “developer mode” and Matt shows it in action as he hits Eclipse from the browser to quickly iterate. No need to recompile…. (since GWT is a compiler). Of course, using JS itself allows you to make a change and reload

Bruce Johnson, co-creator of GWT, is now “fired up” to talk about the deployment stage. How does the GWT compiler do its job? It can Prune dead code, Devirtualize, Inline, Eval, and Obfuscate.

Developer guided code splitting is next up which cuts down the initial download and only grabs what it needs.

Someone from MediaBeacon shows a rich app (which looks exactly like how I envision a GWT app as a demo of code splitting…. going from 1.5MB to 100k in 16 lines of code.

Now Kelly Norton (awesome guy) is up on stage with a “Web Workers” ice hockey jersey. He has the new tool, Speed Tracer! It monitors apps in real time, shows hidden browser events, and gives advice through hints.

Kelly has fired up Google Calendar to show a demo. I love the “Sluggishness” activity bar showing work in real time. The graph view is nice, and seeing the events is fantastic. E.g. script eval, script parse, paints, parse HTML, DOM layout, CSS style calculation. You can see it!

Speed Tracer itself is a Web application deployed as a Chrome Extension. One nice feature is that you can export a trace and send it over to someone via email and they can manipulate and play with the view on that data. It is a GWT app itself, and it looks not-like you think of a GWT app. Very nice indeed.

That’s a wrap, thanks for the new tool Kelly, Bruce, Andrew and team!

Go to Source

22 Latest Exceptional WordPress Hacks

Facebook-Web-Design — Tue, 08 Dec 2009 13:50:09 +0000

WordPress needs no introduction among designers and writers. It’s usually known as a synonym for blogging. Now days every other WordPress blogs look more or less similar, to stand uniquely out from the rest, you need to tweak it a little bit by using quality hacks.

As you all known that the new version v2.8 is arrived and most of you already updated your WordPress to v2.8. So, now there is a need of new working hacks which is compatible with latest version.

Of Course, WordPress Codex is always the best place to learn about WordPress and its tweaks. But unfortunately, it’s too much for a simple WordPress user. This the only reason we compiled this fairly comprehensive list of the Exceptional WordPress Hacks to unleash the power of your favorite blogging engine.

One of the greatest things about blogging is the immediate feedback a blogger can get from his or her readers. Still it’s often possible that your readers don’t give you a wink about their likes and dislikes. Unfortunately, there is no way for you to find out about visitors thinking towards your blog or its design. It’s always essential to play safe and give others what they like. Out of many solutions the inspirational one is only promising and optimistic way to achieve desired changes. This article focuses on organized collection of some of the Most Wanted WordPress Hacks which will definitely make your blogging life easier.

You may be interested in the following tips and tricks related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

General WordPress Related Hacks

01. How to Speed Up Your Blog’s Loading Speed

WordPress, by default, comes uncompressed and sends the uncompressed HTML to the visitor’s browser. With one line of code added to your header, you can compress WordPress’s output by up to 75%. By using zlib compression technology, you can harness the power of PHP and reduce your blog’s load speed!

First, place the following code in a file and call it “test.php” and then upload it to the root of your blog directory:

Make sure that “zlib” is enabled by your hosting provider.

Second, place the following code in your header (above the DOCTYPE):

You’re done! Check Port80Software.com to ensure you are compressing your output.

Source Link

02. Allow More Time For Slow Servers to Upgrade WordPress

WordPress auto download/install is a very nice feature, but sometimes a few problems can appear. One of them is that WordPress don’t manage to download the new version. This happens on slow servers. Here is how to solve it.

To apply this hack, you’ll have to edit one of WordPress core files. Keep in mind that it is never recommended. This hack should be applied only if you have problems while auto-upgrading WordPress.

Open the wp-admin/includes/files.php file and go to line 448. You’ll see the following:

$response = wp_remote_get($url, array('timeout' => 60));

To allow more downloading time, simply change the 60 with a greater value, as for example:

$response = wp_remote_get($url, array('timeout' => 120));

it’s all done!!

Source Link

Pages Related Hacks

03. How to Get All Custom Fields From a Page or a Post

Sometimes you may need to get all custom fields from a specific post or page. Apply following function that do the job.

function all_my_customs($id = 0){
  //if we want to run this function on a page of our choosing them the next section is skipped.
  //if not it grabs the ID of the current page and uses it from now on.
  if ($id == 0) :
    global $wp_query;
    $content_array = $wp_query->get_queried_object();
    $id = $content_array->ID;
  endif;

  //knocks the first 3 elements off the array as they are WP entries and i dont want them.
  $first_array = array_slice(get_post_custom_keys($id), 3);

  //first loop puts everything into an array, but its badly composed
  foreach ($first_array as $key => $value) :
    $second_array[$value] =  get_post_meta($id, $value, FALSE);

    //so the second loop puts the data into a associative array
    foreach($second_array as $second_key => $second_value) :
      $result[$second_key] = $second_value[0];
    endforeach;
  endforeach;

  //and returns the array.
  return $result;
}

Once done, you can use the function like this:

$result = all_my_customs();
echo $result['my_meta_key'];

Source Link

04. How to Show Parent Page Title Regardless of What Subpage You Are On

This hack is useful for peoples who working with WordPress as a CMS and wanting to be easily able to display parent page title on a subpage.

Nothing hard at all: Just paste the following code where you’d like to display the parent page title:

post_parent) {
  $parent_title = get_the_title($post->post_parent);
  echo $parent_title;
} else {
  wp_title('');
}
?>

That’s all! Quick and easy!!

Source Link

05. Display Guest Author Name in The Front Page and Individual Posts

The first thing we need to do is to set a wordpress if statement to get the custom filed value. This way it will only show up when the custom file value is assigned. Open up your “index.php” and “single.php” and paste the following code where you want the author name to show up. It could be after date or after comments. For example after this code:

ID, 'guest_author_name', true) ) { ?>
// check to see if custom field guest author name exists
ID, "guest_author_name", $single = true); ?>

Once we put the if statement we just call it on whichever post we want the guest author name to show up. The guest author name should show up on the front page and for specified post only.

Source Link

Post Related Hacks

06. How to Display Content in Multiple Columns

Printed magazines often display text in columns, so why blogs shouldn’t be able to do the same? here you can find out how to easily and automatically display your post content in columns.

This code is powerful but definitely easy to implement. Just paste it on your functions.php file and it will automatically output your post content in columns.
Your post content will be splitted on

tags.

function my_multi_col($content){
  $columns = explode('', $content);

  $i = 0;

    foreach ($columns as $column){
    if (($i % 2) == 0){
      $return .= '' . "\n";
      if ($i > 1){
        $return .= "";
      } else{
        $return .= '' . "\n ";
      }
      $return .= $column;
      $return .= '';
      $i++;
    }

    if(isset($columns[1])){
      $content = wpautop($return);
    }else{
      $content = wpautop($content);
    }
  echo $content;
  }
}
add_filter('the_content', 'my_multi_col');

Don’t forget to add the following styles to your style.css file :

.content_right, .content_left{
  float:left;
  width:45%;
}

.content_left{
  padding-right:5%;
}

Source Link

07. How to Show WordPress Post Attachments

Since WordPress 2.5, attachments management in WordPress have been improved and is now very powerful. Today, we’re going to show you a simple code snippet that you can use in your WordPress theme to display post attachments.

To achieve this recipe, just paste the following code anywhere in your post.php file and attachments will be displayed.

$args = array(
  'post_type' => 'attachment',
  'numberposts' => null,
  'post_status' => null,
  'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
  foreach ($attachments as $attachment) {
    echo apply_filters('the_title', $attachment->post_title);
    the_attachment_link($attachment->ID, false);
  }
}

Source Link

08. How to Set Post Expiration Date/Time on Your WordPress Blog

Sometimes (for example, if you’re running a contest), you want to be able to publish a post and then automatically stop displaying it after a certain date. This may seem quite hard to do but in fact is not, using the power of custom fields.

Edit your theme and replace your current WordPress loop with this “hacked” loop:


    $expirationtime = get_post_custom_values('expiration');
    if (is_array($expirationtime)) {
      $expirestring = implode($expirationtime);
    }

    $secondsbetween = strtotime($expirestring)-time();
    if ( $secondsbetween > 0 ) {
      // For example...
      the_title();
      the_excerpt();
    }
  endwhile;
endif;
?>

To create a post set to expire at a certain date and time, just create a custom field. Specify expiration as a key and your date and time as a value (with the format mm/dd/yyyy 00:00:00). The post will not show up after the time on that stamp.

Note that this code does not remove or unpublish your post, but just prevents it from being displayed in the loop.

Source Link

09. How to Style Posts Individually

Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID.

To apply this trick, just open your single.php file, find the loop and replace it with the following:



 id="post-">

The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add:

.hentry
.sticky
.category-tutorials
.tag-wordpress

With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category.

The other important piece of this code is id=”post-“. By displaying the ID of the post here, we’re able to style a particular post. As an example:

#post-876{
	background:#ccc;
}

Source Link

10. Display Content only to Registered Users in Your WordPress Blog

As you probably know, WordPress lets you decide whether to allow readers to create accounts and sign in to your blog. If you want to increase your blog’s registered readers or would just like to reward existing readers, why not keep some content private, just for them?

To achieve this hack, we’ll use a shortcode. The first step is to create it. Open your functions.php file and paste the following code:

function member_check_shortcode($atts, $content = null) {
  if (is_user_logged_in() && !is_null($content) && !is_feed()) {
    return $content;
  } else {
    return 'Sorry, this part is only available to our members. Click here to become a member!';
  }

add_shortcode('member', 'member_check_shortcode');

Once that’s done, you can add the following to your posts to create a section or text (or any other content) that will be displayed only to registered users:

[member]
This text will be displayed only to registered users.
[/member]

That’s it. Registered users will see the text contained in the shortcode, while unregistered users will see a message asking them to register.

Source Link

Comment Page Related Hacks

11. How to Disable Comments in Old Posts via PHP

In many situations like when you’re giving some alert to your readers or warning, and you don’t want to hear any feedback. Or you simply don’t want to have any comments, pingbacks, or trackbacks for respective event. For such situation you really want to know how to disable comments, pingbacks, and trackbacks via PHP in your WordPress blog.

The first step is to create it. Open your functions.php file and paste the following code:

post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) {
    $posts[0]->comment_status = 'closed';
    $posts[0]->ping_status    = 'closed';
  }
  return $posts;
}
add_filter( 'the_posts', 'close_comments' );
?>

You can run this script as a plugin, through your theme’s functions.php, or through a custom user-functions.php file. Simply set the desired number of days by changing the number “30” to whatever you would like. As is, this script will close comments, pingbacks and trackbacks on all articles posted more than 30 days ago.

Source Link

12. How to Display Registered Users Comment Count on Your Blog

If your blog is private or have lots of registered users, it may be interesting to be able to display the number of comments posted by registered users. This is the purpose of this code.

Simply paste the following code where you’d like the count to be displayed. Re-arrange the code as desired.

 0';
$comment_counts = (array) $wpdb->get_results("
    SELECT user_id, COUNT( * ) AS total
    FROM {$wpdb->comments}
    {$where}
    GROUP BY user_id
  ", object);
foreach ( $comment_counts as $count ) {
  $user = get_userdata($count->user_id);
  echo 'User ' . $user->display_name . ' comment count is ' . $count->total . '';
}
?>

That’s it! This will get approved comment count for each registered user.

Source Link

13. Separating Trackbacks From Comments in WordPress 2.7+

Separating your trackbacks and comments requires a minimal amount of coding work to set up. First, you’ll want to make a backup of your comments.php file just in case something goes wrong. Next, follow these steps:

Access your comments.php file and locate the following code:

Immediately after the above code, you’ll want to place this code:

Next, you’ll want to scroll down a little bit and locate the following code:

Immediately before the above code, you’ll want to place this code:

This will filter out all of the trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display the trackbacks and pingbacks. Now, Almost immediately below the code from last step you should find this code:

Immediately before the above code, you’ll want to place this code:

Trackbacks

Once you’ve got the comments successfully separated from the trackbacks, there are a couple additional tweaks you may want to do to clean up how things look (it really depends on preference I suppose). The first is to clean up your trackbacks/pingbacks by only displaying the title instead of an excerpt and everything else. In order to do this, you’ll need to find the following code in your comments.php file:

Now replace that code with the following:

Lastly, you’ll need to add the following code to your functions.php file (which can be created if you don’t already have one):

That should clean up the trackbacks/pingbacks section and you can also apply the same changes if you use a plugin to display tweetbacks.

The other thing you may want to do is fix the comment count to only show actual comments, filtering out the trackbacks/pingbacks which are included in your comment count by default. Simply add the following code to your functions.php file (which again can be created if you don’t already have one):

So there you go. Now you have succesfully separated trackbacks from comments!

Source Link

Images Related Hacks

14. Automatically Resize Pictures on Your WordPress Blog

You know it, a picture is worth a thousand words. But pictures means that you have to resize it, which is alwyas boring.
Happilly, a very cool script called TimThumb can resize pictures for you. The function below create a WordPress shortcode that will make Timthumb use even easier.

function imageresizer( $atts, $content = null ) {
  return '<img src="/timthumb/timthumb.php?src='.$content.'&w=590" alt="" />';
}

add_shortcode('img', 'imageresizer');

Then, you can use the following syntax to add an automatically resized image to your blog post:

[img]http://www.yoursite.com/yourimage.jpg[/img]

Source Link

Social Networking and Email Related Hacks

15. How to Create a Tweetmeme “Retweeet” Shortcode

Twitter is one of the best way to get quality traffic to your blog. In order to help people sharing your articles on Twitter, you should definitely implement a Tweetmeme button, which display how many time time people RT’d your blog posts.

Just paste the function below into your functions.php file.

function tweetmeme(){
  return '<div class="tweetmeme"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>';
}
add_shortcode('tweet', 'tweetmeme');

Once you saved the file, you’ll be able to display the Tweetmeme “retweet” button anywhere on your posts. In WordPress editor, make sure you are in HTML mode and insert the following:

[tweet]

When your post will be published, the shortcode will be replaced by the TweetMeme button.

Source Link

16. Send Article to a Friend by Email

In order to create more traffic on your blog, it can be a good idea to let your readers send your posts to their friends by email.

To apply this recipe to your blog, simply paste the following function into your functions.php file, and that’s all. Hard to do something simpler!

function direct_email($text="Send by email"){
  global $post;
  $title = htmlspecialchars($post->post_title);
  $subject = 'Sur '.htmlspecialchars(get_bloginfo('name')).' : '.$title;
  $body = 'I recommend this page : '.$title.'. You can read it on : '.get_permalink($post->ID);
  $link = '<a rel="nofollow" href="mailto:?subject='.rawurlencode($subject).'&amp;body='.rawurlencode($body).'" title="'.$text.' : '.$title.'">'.$text.'</a>';
  return $link;
}

Source Link

Author Related Hacks

17. Automatically Insert Author Bio on Each Post

When you’re owning a multi-writers blog, it is important to show who wrote the post. In case of guest bloggers, it is also a nice way to give credit.

Simply insert the following lines of code into your functions.php file, and that’s all. Author bio will be automatically displayed after each post.

function get_author_bio ($content=''){
  global $post;

  $post_author_name=get_the_author_meta("display_name");
  $post_author_description=get_the_author_meta("description");
  $html="<div class='clearfix' id='about_author'>\n";
  $html.="<img width='80' height='80' class='avatar' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5(get_the_author_email()). "&default=".urlencode($GLOBALS['defaultgravatar'])."&size=80&r=PG' alt='PG'/>\n";
  $html.="<div class='author_text'>\n";
  $html.="<h4>Author: <span>".$post_author_name."</span></h4>\n";
  $html.= $post_author_description."\n";
  $html.="</div>\n";
  $html.="<div class='clear'></div>\n";
  $content .= $html;
  }

  return $content;
}

add_filter('the_content', 'get_author_bio');

Source Link

Feeds Related Hacks

18. How to Fetch and Display RSS Feeds

Do you know that WordPress have a built-in RSS reader? And you can use this feed to utilize in many ways. Here we’ll tell how to import and display feeds in wordPress 2.8 and beyond.

Simply paste the following code where you want the feed to be displayed. Don’t forget to define feed url at line 4.

get_item_quantity(7); // specify number of items
  $items = $feed->get_items(0, $limit); // create an array of items

}
if ($limit == 0) echo 'The feed is either empty or unavailable.';
else foreach ($items as $item) : ?>

  
    
      get_title(); ?>
    
  
  
    get_description(), 0, 200); ?>
    [...]

Source Link

Category and Tags Related Hacks

19. How to Change Excerpt Length Depending of the Category

Do you ever wished to be able to modify the excerpt length based on which category you are on, without modifying your theme files? If yes, we’re pretty sure you’ll be happy with this hack.

No need to modify your theme files. Simply paste the code into your functions.php file. Don’t forget to change the category ID on line 3!

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
  if(in_category(14)) {
    return 13;
  } else {
    return 60;
  }
}

Source Link

20. Create a Function to Get Tags Related to Category

First, here is the function you have to paste in your functions.php file:

function get_category_tags($args) {
  global $wpdb;
  $tags = $wpdb->get_results
  ("
    SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
    FROM
      wp_posts as p1
      LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
      LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
      LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,
      wp_posts as p2
      LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
      LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
      LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
    WHERE
      t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
      t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
      AND p1.ID = p2.ID
    ORDER by tag_name
  ");
  $count = 0;
  foreach ($tags as $tag) {
    $tags[$count]->tag_link = get_tag_link($tag->tag_id);
    $count++;
  }
  return $tags;
}

Once you have pasted the function, you can use it in your theme:

$args = array('categories' => '12,13,14');
$tags = get_category_tags($args);

Source Link

Plugin Related Hacks

21. How to Create an Anti-IE6 Plugin

With this amazing code created by Nathan Rice, you’ll be able to serve IE6 users the default WordPress theme. After all, those idiots don’t deserve anything better

Just paste the following in a new file and save it as ie6.php. Upload it to your wp-content/plugins directory and activate it on your WordPress dashboard.

Source Link

22. How to Check if a Plugin is Active or Not

When working with lots and lots of plugins, it can be useful for developers to be able to check if a particular WordPress plugin is active or not. If you want to check if a WordPress plugin is active, just use the is_plugin_active() function. The function takes a single parameter, which is the path to the plugin, as shown in below:

Source Link

Other Resources

Find Something Missing?

Please feel free to share any hack that you think would be a great addition in this collection and that has not been listed already.

Go to Source

Google Analytics Adds Goodies for Data Geeks

Facebook-Web-Design — Tue, 08 Dec 2009 01:08:13 +0000

On the consumer side of things, Google has just released a bevy of new features like Google Goggles and real-time search. But the search giant hasn’t forgotten about its business users. For you they offer up a holiday present.

Now Google Analytics users can add annotations to dates in order to better document spikes in traffic, use custom variables in advanced segments and view them in custom reports, and even use a super simple analytics tracking code wizard for setting up specialized situations.

Google also took to their Analytics blog to announce that a new version of the Analytics API is coming soon and will support advanced segmentation.

Annotate Your Graphs

The majority of Google Analytics users will get the most value out of annotations, especially since the notes can be used to designate why there were peaks or dips in traffic, campaign launches and other information to help team members process traffic data.

To use the annotations, simply click the tab below the date on the graph. The tab will expand to include a date field and text entry box for your note, which will be attributed to you once you save. You can also save your note as private or edit previous annotations.

As the post points out, the use cases for annotations are manifold:

“Annotations can become your central repository, or logbook, for all online marketing and website design actions within your business. So even if you have multiple marketing teams, agencies, or webmasters, or if you have employee churn or other disruptions, you can always see which events may have caused conversions to increase or decrease.”

Go Custom: Advanced Tools for Tracking

If slicing and dicing data is your thing, the refreshed Google Analytics also offers up custom variables in advanced segments plus specialized variables in custom reports. This means that “if you’ve created a Custom Variable such as ‘Logged-In Member,’ you can also create an advanced segment based on that variable and see it across all of your reports.”

Should comprehensive traffic tracking be more your style, look no further than the new tracking code set-up wizard. The wizard will automatically generate the right tracking code for your site profiles, so you can more easily track cross-domains, multiple sub-domains, mobile sites and the like.

On the whole, the new Google Analytics features are perfect for data-crunchers and Web site admins looking to better understand their site metrics.

http://analytics.blogspot.com/2009/12/holiday-bonus-more-great-features.html

Reviews: Google, Google Analytics

Tags: Google, google analytics

Go to Source

JavaScript Gaining Traction with Game Developers

Facebook-Web-Design — Mon, 07 Dec 2009 15:05:19 +0000

We received an email from Joesph Huckaby about his new JS-based game rendering engine and I have to admit that when I first read about it, I was a little skeptical about it mainly because I’ve been disappointed with many that I’ve seen in the past. As I dug into his site, Effectgames.com, my whole opinion changed as I saw some very robust demos that clearly demonstrated the capabilities of this engine.

The games are powered by the “Effect Engine”, Joseph’s JavaScript/DHTML library that provides the framework for displaying and animating all the graphics, playing all the sounds & music, handling the keyboard & mouse, and sprite collision detection. It can smoothly render multiple layers of parallax scrolling tiles and sprites using pure DHTML. HTML 5 Audio is used where supported (currently Safari on Mac OS X 10.5 only, 10.6 and Firefox coming soon), and 3rd party extensions used elsewhere. All modern browsers and platforms are supported, including IE 6+, Firefox 3+, Safari 3+, Chrome 1+, and Opera 9+.

The team has also created a suite of online tools to allow developers to prepare and design their game online including managing graphics & audio, creating levels for their games and manipulating graphics in real-time using non-destructive filters (scaling, rotation, and a number of other transforms).

Developers can build their games locally on their Macs or PCs, and don’t have to upload any code until they are ready to publish. Once ready, developers can compile their code automatically using Google Closure, and receive a unique URL and embed code to share the game on their own site, blog, or anywhere they want.

In looking through the documentation, it looks like the whole API is very well laid out clearly documenting the breadth of methods available and the Getting Started guide is very comprehensive.

I didn’t find anything that discussed licensing or a potential pricing model so that’s something that you may want to look into before diving into this but from what I’ve seen, the engine looks very promising.

Go to Source

Eight Robust Tools To Simplify Developer’s Worklife

Facebook-Web-Design — Sun, 06 Dec 2009 20:10:13 +0000

This is one of the useful list of its kind where you can find the must have online web apps that may be very helpful for you when you want to get your work. I hope developers and programmers will like this list, but you can also use them and will love them whether you are an office worker, a manager, a supervisor, a student, a home user, etc. Most of them are not very well-known, but they are really amazing in respect to their features. This is the list of Eight Robust Tools To Simplify Developer’s Worklife. Just take a look at them and share your thought’s here.

You are welcome to share more useful web apps that will be helpful for our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter as well.

Colorhat

Colorhat is currently a time management and time tracking software. Whether you are a developer, designer, teacher, student, engineer, or just a person who wants to keep track of your training sessions or hobbies, You can use Colorhat.

Snipplr

Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers.

Adobe BrowserLab

An easier and faster solution for cross-browser testing. You can preview and test your web pages on leading browser and operating systems. This will help you get your results in real time, from virtually any computer connected to the internet.

CodeRun Studio

CodeRun Studio is a cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser.

net2ftp

net2ftp is a web based FTP client. It is mainly aimed at managing websites using a browser. Edit code, upload/download files, copy/move/delete directories recursively, rename files and directories — without installing any software.

PHPanywhere

PHPanywhere is a new online service that’s changing the way people develop on the web. They enable users to develop and maintain their php/html projects online using any standard web browser.

MailCounter

The MailCounter badge gives visitors to your blog an easy way to share your content via email. In fact, this is the fastest and easiest way to email an article. Every time an email is sent this way the badge will auto-update and show you the live number of times someone clicked the email link.

Friendpaste

A fast service where you can copy/paste your code, recipe, anything else and give the link to your friend. You can select your preferred languages and possibility to edit pastes. This service support for a large number of syntaxes that you would need.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Digging into WordPress Review, and Free Copies: Winners Announced!

Facebook-Web-Design — Sat, 05 Dec 2009 23:45:22 +0000

A couple weeks ago, I received an email from Chris Coyier, of CSS-Tricks, containing a review copy of his recently released “Digging into WordPress” e-book. Expecting it to be more of a mini-book, I nonchalantly told him that I’d post a review that Friday; little did I know that this was a full-fledged book, packed full of knowledge.

Update: Winners Announced

Congratulations to the following three readers who were randomly selected!

If your name is listed above, please contact nettuts@tutsplus.com to claim your prize!

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

Those of you who read CSS-Tricks will be well aware that Chris writes in a very easy-to-understand fashion. Rather than flooding each article with high-level jargon that only the most knowledgeable of us can understand, he instead dumbs each article down to the fundamentals – even to the point of being honest enough to convey when he doesn’t quite understand the reasoning behind some line of code.

As a result, he’s built a wonderful community and reputation for himself in the last few years. This book, co-written with Jeff Starr, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

The 400 page ebook covers everything from navigating the admin panel, to creating a comments form, to even more advanced topics like plugin development. And though it’s generally good practice to point out a few negatives in one’s review, it’s difficult to do so when a book is such a pleasure to read.

Heart of a Teacher

Chris and Jeff, in this book, have proven that they have the hearts of teachers. Even for intermediate to advanced WordPressers, there’s something to be learned — and at $27, the purchase is a no-brainer!

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

“There is much to learn about the World’s most popular publishing platform.
From your first steps of learning about WordPress all the way through
maintaining a site throughout the years, this book is packed with truly
practical information.”

Lots of Code Samples

“We go into depth about the anatomy of a WordPress theme. How they work, and how
to write the code you need to do the things you want. This means real code that
you can sink your teeth into, as well as copy and paste. Beyond theme
building, we introduce many tricks your functions.php file can pull off and show
you ways to increase performance and security through HTAccess.”

What About the Free Copies!?

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!

Go to Source

Quick and Easy Ways to Spice Up The Thesis WordPress Theme

Facebook-Web-Design — Sat, 05 Dec 2009 17:11:33 +0000

9 code snippets that you can easily implement in your Thesis wordpress theme to make your site stand out.

Go to Source

Motorola ‘La Jolla’ Coming? [Source Code Reveals Low-End Motorola Android Phone Coming]

Facebook-Web-Design — Fri, 04 Dec 2009 23:23:01 +0000

The folks over at AndroidandMe have done some investigating into the source code for the Motorola CLIQ Android phone and have found some interesting things, mainly references in the code to other phones, including a low-end ‘La Jolla’ handset.

(…)
Read the rest of Motorola ‘La Jolla’ Coming? [Source Code Reveals Low-End Motorola Android Phone Coming]

Go to Source

Code Snippets sharing best sites on the web

Facebook-Web-Design — Fri, 04 Dec 2009 00:36:16 +0000

Code snippets sharing services is the best way to manage and share codes and snippets with others easily , it helps developers to speed up their work by archiving and saving it in one place .

Go to Source

The End of Days for “View Source”?

Facebook-Web-Design — Thu, 03 Dec 2009 16:50:04 +0000

“View Source is your friend”, we’ve learned countless times as web developers. It’s something special about web development that we can seamlessly lift the covers on anything we see and find out how the sausage is made. And it gets even better with great tools to interrogate the system in real-time. This capability has helped us evolve practices and patterns, and contributed to the production of many a fine browser extension and Greasemonkey script.

Our friend might sadly be going the way of the blink tag. View Source has always worked because the standard development model is to put up some static Javascript files on a server somewhere and serve them out. That model is changing though; performance is a very hot topic right now, and View Source is playing victim to that trend.

Google’s Let’s Make the Web Faster initiative is a case in point. Here is a multi-pronged attack on the performance issue, involving new protocols (SPDY), tools (PageSpeed), browser improvements (Chrome), on-demand loading (Closure), and – most pertinent – compression techniques (Closure again). And we ain’t seen nothing yet; there’s every reason to believe Google will soon be putting its money where its mouth is, by rewarding faster sites with higher rankings. (I guess I was alone in assuming they always did that.) While performance should always be a consideration for site owners, a dangling SEO carrot would no doubt convert the best of intentions into the most concrete of actions.

Site owners can’t (much) control factors such as browser choice and browser efficiency, but they can get their own performance-fu in order, and code compression is low-hanging fruit. Looking at the top 20-ranked sites, filtering only English-language sites, I found the very top guys (Google, Facebook, Yahoo, YouTube, Windows Live) predominately using Javascript compression, with the others not using it much, if at all. I expect most of them to be using it in the next 12-24 months.

In addition to compression, there is also obfuscation. With Javascript being used for more complex tasks and replacing desktop functionality, more companies will be wondering about all that intellectual property sitting in plain view. (And let’s not mention the security-by-obscurity fans, who will also go this route, however flawed their thinking.)

Is it all bad? No. There’s a much healthier respect for plain old semantic HTML these days, which means HTML documents should be View Sourcier now than ever before. (CSS, not so much, with compression also likely to grow.) If I had to choose between one or the other, I’d take clear HTML over clear Javascript. Also, we will probably find the majority of sites in the long tail won’t feel the need to do anything about their code (but the ones who do make efforts are probably the ones with the most interesting things to look at). Also, the aforementioned tools, which do things like XHR sniffing, will help us to understand from a “black box” perspective even if we can’t peer into the code. Hopefully, there will also be more attention paid towards Javascript beautifiers as well, to make sense of compressed code.

I can’t speculate on the waning of View Source without mentioning the tremendous counter-balancing act played out by Open Source. From the get-go, open source has played a vital role in Ajax, with individuals and companies releasing code for all sorts of reasons. Most of this is library and framework code, rather than production-ready applications, so we might lose something there, but we still have much to gain from the ever-growing corpus of code that’s out there, free to be studied and incorporated into our own applications.

Go to Source

New Google Analytics Code For Better Load Times

Facebook-Web-Design — Thu, 03 Dec 2009 06:20:04 +0000

Google Analytics has recently announced a new asynchronous tracking code that can "optionally" be replaced with the old one.

The new code does not block the website while it loads which will improve the loading times.

It also aims to provide more accurate results as it can be installed inside tags (rather than before the tag) and will be able to collect data from visitors that quit the webpage before it loads fully. This way, "any possible tracking errors from dependencies when the JavaScript not being fully loaded" are also eliminated.

More information can be found in the official announcement & the "Asynchronous Tracking Usage Guide".

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Google Analytics

Go to Source

New Asynchronous Script Stops Google Analytics From Slowing Down Your Site

Facebook-Web-Design — Wed, 02 Dec 2009 19:10:04 +0000

Google Analytics is one of the more popular ways to keep track of your site’s visitors. With the ability to track, compare and compile all sorts of statistics about who’s visiting your site, Google Analytics is hard to beat.

Unfortunately, all that statistical goodness has a price — the JavaScript Google Analytics uses to track your visitors can slow down your page load times. Traditionally, the delayed page load problem was solved by placing the Google Analytics JavaScript code at the bottom of your pages (just before the closing tag).

However, Google is now offering a second possible solution — a new Google Analytics script that loads asynchronously.

The asynchronous script means browsers will load the ga.js script file separately from the rest of your page, minimizing the impact on page rendering.

The net result is that you can move your Analytics code back up to the head tags of your pages and it won’t slow down your pages. Or rather it will, but it won’t be noticeable to users. In our testing, the new script loaded in between 80ms-120ms, whereas the old script loaded in 40ms-60ms.

The new script is definitely slower, but because it loads separately from the rest of your code visitors will see all your content before the new script kicks in, even if it’s at the top of the page.

In our testing, the overall page load time for the new script in the head tags was almost exactly the same as for the old script at the bottom of your page.

So why would you want to switch to the new script? The primary reason is that some advanced features of Google Analytics, like JavaScript event tracking, require the script to be embedded in the page’s head tags. If you’ve been wanting to use any of the customization and advanced features that require Google Analytics’ code to reside in the page header, but haven’t wanted to sacrifice page load times to get it, well, now you have your solution.

The new script and some new embed code can be found on Google Code. Keep in mind that the new script is still a beta, which means you might want to hold off using it on production sites.

See Also:

Go to Source

10 Useful Code Snippets And Plugins To Spice Up WordPress Avatar

Facebook-Web-Design — Wed, 02 Dec 2009 14:33:24 +0000

This entry provides us 10 most useful code snippets and wordpress plugins that help us control, customize our avatar in wordpress better.

Go to Source

Winners for Billings Mac Applications Contest

Facebook-Web-Design — Wed, 02 Dec 2009 14:10:34 +0000

First of all, we’d like to thank all readers who had participated in the Billings Mac application contest. It’s an upsetting task considering the fact that we can only choose 3 winners out of more than 250 interested commentators.

Anyway, we have good news for participants who did not make it, or readers who came to know about the contest after it’s closed. If you are still interested in getting Billing application, you can now buy it at a discounted rate.

Billings Promo code for Hongkiat readers

By applying the promo code “hongkiat15“, you will get a 15% off the original price, courtesy of Ryan Cash from Billings. The promo code will expire on 21st December 2009. So there’s about 20 days to act.

Winners of Billings

Here are the winners for Billings. You’ll be getting your licensed copy of Billings real soon.

thenine (#7)
yesterdayhero (#149)
Thomas Bishop (#226)

Once again, congratulations and stay tuned for more contests on hongkiat.com

Go to Source

HTTP Headers for Dummies

Facebook-Web-Design — Wed, 02 Dec 2009 14:06:43 +0000

Whether you’re a programmer or not, you have seen it everywhere on the web. At this moment your browsers address bar shows something that starts with “http://”. Even your first Hello World script sent HTTP headers without you realizing it. In this article we are going to learn about the basics of HTTP headers and how we can use them in our web applications.

What are HTTP Headers?

HTTP stands for “Hypertext Transfer Protocol”. The entire World Wide Web uses this protocol. It was established in the early 1990’s. Almost everything you see in your browser is transmitted to your computer over HTTP. For example, when you opened this article page, your browser probably have sent over 40 HTTP requests and received HTTP responses for each.

HTTP headers are the core part of these HTTP requests and responses, and they carry information about the client browser, the requested page, the server and more.

Example

When you type a url in your address bar, your browser sends an HTTP request and it may look like this:

GET /tutorials/other/top-20-mysql-best-practices/ HTTP/1.1
Host: net.tutsplus.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120
Pragma: no-cache
Cache-Control: no-cache

First line is the “Request Line” which contains some basic info on the request. And the rest are the HTTP headers.

After that request, your browser receives an HTTP response that may look like this:

HTTP/1.x 200 OK
Transfer-Encoding: chunked
Date: Sat, 28 Nov 2009 04:36:25 GMT
Server: LiteSpeed
Connection: close
X-Powered-By: W3 Total Cache/0.8
Pragma: public
Expires: Sat, 28 Nov 2009 05:36:25 GMT
Etag: "pub1259380237;gz"
Cache-Control: max-age=3600, public
Content-Type: text/html; charset=UTF-8
Last-Modified: Sat, 28 Nov 2009 03:50:37 GMT
X-Pingback: http://net.tutsplus.com/xmlrpc.php
Content-Encoding: gzip
Vary: Accept-Encoding, Cookie, User-Agent

The first line is the “Status Line”, followed by “HTTP headers”, until the blank line. After that, the “content” starts (in this case, an HTML output).

When you look at the source code of a web page in your browser, you will only see the HTML portion and not the HTTP headers, even though they actually have been transmitted together as you see above.

These HTTP requests are also sent and received for other things, such as images, CSS files, JavaScript files etc. That is why I said earlier that your browser has sent at least 40 or more HTTP requests as you loaded just this article page.

Now, let’s start reviewing the structure in more detail.

How to See HTTP Headers

I use the following Firefox extensions to analyze HTTP headers:

Firebug

Live HTTP Headers

In PHP:

getallheaders() gets the request headers. You can also use the $_SERVER array.
headers_list() gets the response headers.

Further in the article, we will see some code examples in PHP.

HTTP Request Structure

The first line of the HTTP request is called the request line and consists of 3 parts:

The “method” indicates what kind of request this is. Most common methods are GET, POST and HEAD.
The “path” is generally the part of the url that comes after the host (domain). For example, when requesting “http://net.tutsplus.com/tutorials/other/top-20-mysql-best-practices/” , the path portion is “/tutorials/other/top-20-mysql-best-practices/”.
The “protocol” part contains “HTTP” and the version, which is usually 1.1 in modern browsers.

The remainder of the request contains HTTP headers as “Name: Value” pairs on each line. These contain various information about the HTTP request and your browser. For example, the “User-Agent” line provides information on the browser version and the Operating System you are using. “Accept-Encoding” tells the server if your browser can accept compressed output like gzip.

You may have noticed that the cookie data is also transmitted inside an HTTP header. And if there was a referring url, that would have been in the header too.

Most of these headers are optional. This HTTP request could have been as small as this:

GET /tutorials/other/top-20-mysql-best-practices/ HTTP/1.1
Host: net.tutsplus.com

And you would still get a valid response from the web server.

Request Methods

The three most commonly used request methods are: GET, POST and HEAD. You’re probably already familiar with the first two, from writing html forms.

GET: Retrieve a Document

This is the main method used for retrieving html, images, JavaScript, CSS, etc. Most data that loads in your browser was requested using this method.

For example, when loading a Nettuts+ article, the very first line of the HTTP request looks like so:

GET /tutorials/other/top-20-mysql-best-practices/ HTTP/1.1
...

Once the html loads, the browser will start sending GET request for images, that may look like this:

GET /wp-content/themes/tuts_theme/images/header_bg_tall.png HTTP/1.1
...

Web forms can be set to use the method GET. Here is an example.



First Name:
 

Last Name:

When that form is submitted, the HTTP request begins like this:

GET /foo.php?first_name=John&last_name=Doe&action=Submit HTTP/1.1
...

You can see that each form input was added into the query string.

POST: Send Data to the Server

Even though you can send data to the server using GET and the query string, in many cases POST will be preferable. Sending large amounts of data using GET is not practical and has limitations.

POST requests are most commonly sent by web forms. Let’s change the previous form example to a POST method.



First Name:  

Last Name:

Submitting that form creates an HTTP request like this:

POST /foo.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost/test.php
Content-Type: application/x-www-form-urlencoded
Content-Length: 43

first_name=John&last_name=Doe&action=Submit

There are three important things to note here:

The path in the first line is simply /foo.php and there is no query string anymore.
Content-Type and Content-Lenght headers have been added, which provide information about the data being sent.
All the data is in now sent after the headers, with the same format as the query string.

POST method requests can also be made via AJAX, applications, cURL, etc. And all file upload forms are required to use the POST method.

HEAD: Retrieve Header Information

HEAD is identical to GET, except the server does not return the content in the HTTP response. When you send a HEAD request, it means that you are only interested in the response code and the HTTP headers, not the document itself.

“When you send a HEAD request, it means that you are only interested in the response code and the HTTP headers, not the document itself.”

With this method the browser can check if a document has been modified, for caching purposes. It can also check if the document exists at all.

For example, if you have a lot of links on your website, you can periodically send HEAD requests to all of them to check for broken links. This will work much faster than using GET.

HTTP Response Structure

After the browser sends the HTTP request, the server responds with an HTTP response. Excluding the content, it looks like this:

The first piece of data is the protocol. This is again usually HTTP/1.x or HTTP/1.1 on modern servers.

The next part is the status code followed by a short message. Code 200 means that our GET request was successful and the server will return the contents of the requested document, right after the headers.

We all have seen “404″ pages. This number actually comes from the status code part of the HTTP response. If the GET request would be made for a path that the server cannot find, it would respond with a 404 instead of 200.

The rest of the response contains headers just like the HTTP request. These values can contain information about the server software, when the page/file was last modified, the mime type etc…

Again, most of those headers are actually optional.

HTTP Status Codes

200’s are used for successful requests.
300’s are for redirections.
400’s are used if there was a problem with the request.
500’s are used if there was a problem with the server.

200 OK

As mentioned before, this status code is sent in response to a successful request.

206 Partial Content

If an application requests only a range of the requested file, the 206 code is returned.

It’s most commonly used with download managers that can stop and resume a download, or split the download into pieces.

404 Not Found

When the requested page or file was not found, a 404 response code is sent by the server.

401 Unauthorized

Password protected web pages send this code. If you don’t enter a login correctly, you may see the following in your browser.

Note that this only applies to HTTP password protected pages, that pop up login prompts like this:

403 Forbidden

If you are not allowed to access a page, this code may be sent to your browser. This often happens when you try to open a url for a folder, that contains no index page. If the server settings do not allow the display of the folder contents, you will get a 403 error.

For example, on my local server I created an images folder. Inside this folder I put an .htaccess file with this line: “Options -Indexes”. Now when I try to open http://localhost/images/ – I see this:

There are other ways in which access can be blocked, and 403 can be sent. For example, you can block by IP address, with the help of some htaccess directives.

order allow,deny
deny from 192.168.44.201
deny from 224.39.163.12
deny from 172.16.7.92
allow from all

302 (or 307) Moved Temporarily & 301 Moved Permanently

These two codes are used for redirecting a browser. For example, when you use a url shortening service, such as bit.ly, that’s exactly how they forward the people who click on their links.

Both 302 and 301 are handled very similarly by the browser, but they can have different meanings to search engine spiders. For instance, if your website is down for maintenance, you may redirect to another location using 302. The search engine spider will continue checking your page later in the future. But if you redirect using 301, it will tell the spider that your website has moved to that location permanently. To give you a better idea: http://www.nettuts.com redirects to http://net.tutsplus.com/ using a 301 code instead of 302.

500 Internal Server Error

This code is usually seen when a web script crashes. Most CGI scripts do not output errors directly to the browser, unlike PHP. If there is any fatal errors, they will just send a 500 status code. And the programmer then needs to search the server error logs to find the error messages.

Complete List

You can find the complete list of HTTP status codes with their explanations here.

HTTP Headers in HTTP Requests

Now, we’ll review some of the most common HTTP headers found in HTTP requests.

Almost all of these headers can be found in the $_SERVER array in PHP. You can also use the getallheaders() function to retrieve all headers at once.

Host

An HTTP Request is sent to a specific IP Addresses. But since most servers are capable of hosting multiple websites under the same IP, they must know which domain name the browser is looking for.

Host: net.tutsplus.com

This is basically the host name, including the domain and the subdomain.

In PHP, it can be found as $_SERVER['HTTP_HOST'] or $_SERVER['SERVER_NAME'].

User-Agent

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)

This header can carry several pieces of information such as:

Browser name and version.
Operating System name and version.
Default language.

This is how websites can collect certain general information about their surfers’ systems. For example, they can detect if the surfer is using a cell phone browser and redirect them to a mobile version of their website which works better with low resolutions.

In PHP, it can be found with: $_SERVER['HTTP_USER_AGENT'].

if ( strstr($_SERVER['HTTP_USER_AGENT'],'MSIE 6') ) {
	echo "Please stop using IE6!";
}

Accept-Language

Accept-Language: en-us,en;q=0.5

This header displays the default language setting of the user. If a website has different language versions, it can redirect a new surfer based on this data.

It can carry multiple languages, separated by commas. The first one is the preferred language, and each other listed language can carry a “q” value, which is an estimate of the user’s preference for the language (min. 0 max. 1).

In PHP, it can be found as: $_SERVER["HTTP_ACCEPT_LANGUAGE"].

if (substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2) == 'fr') {
	header('Location: http://french.mydomain.com');
}

Accept-Encoding

Accept-Encoding: gzip,deflate

Most modern browsers support gzip, and will send this in the header. The web server then can send the HTML output in a compressed format. This can reduce the size by up to 80% to save bandwidth and time.

In PHP, it can be found as: $_SERVER["HTTP_ACCEPT_ENCODING"]. However, when you use the ob_gzhandler() callback function, it will check this value automatically, so you don’t need to.

// enables output buffering
// and all output is compressed if the browser supports it
ob_start('ob_gzhandler');

If-Modified-Since

If a web document is already cached in your browser, and you visit it again, your browser can check if the document has been updated by sending this:

If-Modified-Since: Sat, 28 Nov 2009 06:38:19 GMT

If it was not modified since that date, the server will send a “304 Not Modified” response code, and no content – and the browser will load the content from the cache.

In PHP, it can be found as: $_SERVER['HTTP_IF_MODIFIED_SINCE'].

// assume $last_modify_time was the last the output was updated

// did the browser send If-Modified-Since header?
if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {

	// if the browser cache matches the modify time
	if ($last_modify_time == strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {

		// send a 304 header, and no content
		header("HTTP/1.1 304 Not Modified");
		exit;
	}

}

There is also an HTTP header named Etag, which can be used to make sure the cache is current. We’ll talk about this shortly.

Cookie

As the name suggests, this sends the cookies stored in your browser for that domain.

Cookie: PHPSESSID=r2t5uvjq435r4q7ib3vtdjq120; foo=bar

These are name=value pairs separated by semicolons. Cookies can also contain the session id.

In PHP, individual cookies can be accessed with the $_COOKIE array. You can directly access the session variables using the $_SESSION array, and if you need the session id, you can use the session_id() function instead of the cookie.

echo $_COOKIE['foo'];
// output: bar
echo $_COOKIE['PHPSESSID'];
// output: r2t5uvjq435r4q7ib3vtdjq120
session_start();
echo session_id();
// output: r2t5uvjq435r4q7ib3vtdjq120

Referer

As the name suggests, this HTTP header contains the referring url.

For example, if I visit the Nettuts+ homepage, and click on an article link, this header is sent to my browser:

Referer: http://net.tutsplus.com/

In PHP, it can be found as $_SERVER['HTTP_REFERER'].

if (isset($_SERVER['HTTP_REFERER'])) {

	$url_info = parse_url($_SERVER['HTTP_REFERER']);

	// is the surfer coming from Google?
	if ($url_info['host'] == 'www.google.com') {

		parse_str($url_info['query'], $vars);

		echo "You searched on Google for this keyword: ". $vars['q'];

	}

}
// if the referring url was:
// http://www.google.com/search?source=ig&hl=en&rlz=&=&q=http+headers&aq=f&oq=&aqi=g-p1g9
// the output will be:
// You searched on Google for this keyword: http headers

You may have noticed the word “referrer” is misspelled as “referer”. Unfortunately it made into the official HTTP specifications like that and got stuck.

Authorization

When a web page asks for authorization, the browser opens a login window. When you enter a username and password in this window, the browser sends another HTTP request, but this time it contains this header.

Authorization: Basic bXl1c2VyOm15cGFzcw==

The data inside the header is base64 encoded. For example, base64_decode(’bXl1c2VyOm15cGFzcw==’) would return ‘myuser:mypass’

In PHP, these values can be found as $_SERVER['PHP_AUTH_USER'] and $_SERVER['PHP_AUTH_PW'].

More on this when we talk about the WWW-Authenticate header.

HTTP Headers in HTTP Responses

Now we are going to look at some of the most common HTTP headers found in HTTP responses.

In PHP, you can set response headers using the header() function. PHP already sends certain headers automatically, for loading the content and setting cookies etc… You can see the headers that are sent, or will be sent, with the headers_list() function. You can check if the headers have been sent already, with the headers_sent() function.

Cache-Control

Definition from w3.org: “The Cache-Control general-header field is used to specify directives which MUST be obeyed by all caching mechanisms along the request/response chain.” These “caching mechanisms” include gateways and proxies that your ISP may be using.

Example:

Cache-Control: max-age=3600, public

“public” means that the response may be cached by anyone. “max-age” indicates how many seconds the cache is valid for. Allowing your website to be cached can reduce server load and bandwidth, and also improve load times at the browser.

Caching can also be prevented by using the “no-cache” directive.

Cache-Control: no-cache

For more detailed info, see w3.org.

Content-Type

This header indicates the “mime-type” of the document. The browser then decides how to interpret the contents based on this. For example, an html page (or a PHP script with html output) may return this:

Content-Type: text/html; charset=UTF-8

“text” is the type and “html” is the subtype of the document. The header can also contain more info such as charset.

For a gif image, this may be sent.

Content-Type: image/gif

The browser can decide to use an external application or browser extension based on the mime-type. For example this will cause the Adobe Reader to be loaded:

Content-Type: application/pdf

When loading directly, Apache can usually detect the mime-type of a document and send the appropriate header. Also most browsers have some amount fault tolerance and auto-detection of the mime-types, in case the headers are wrong or not present.

You can find a list of common mime types here.

In PHP, you can use the finfo_file() function to detect the mime type of a file.

Content-Disposition

This header instructs the browser to open a file download box, instead of trying to parse the content. Example:

Content-Disposition: attachment; filename="download.zip"

That will cause the browser to do this:

Note that the appropriate Content-Type header should also be sent along with this:

Content-Type: application/zip
Content-Disposition: attachment; filename="download.zip"

Content-Length

When content is going to be transmitted to the browser, the server can indicate the size of it (in bytes) using this header.

Content-Length: 89123

This is especially useful for file downloads. That’s how the browser can determine the progress of the download.

For example, here is a dummy script I wrote, which simulates a slow download.

// it's a zip file
header('Content-Type: application/zip');
// 1 million bytes (about 1megabyte)
header('Content-Length: 1000000');
// load a download dialogue, and save it as download.zip
header('Content-Disposition: attachment; filename="download.zip"');

// 1000 times 1000 bytes of data
for ($i = 0; $i < 1000; $i++) {
	echo str_repeat(".",1000);

	// sleep to slow down the download
	usleep(50000);
}

The result is:

Now I am going to comment out the Content-Length header

// it's a zip file
header('Content-Type: application/zip');
// the browser won't know the size
// header('Content-Length: 1000000');
// load a download dialogue, and save it as download.zip
header('Content-Disposition: attachment; filename="download.zip"');

// 1000 times 1000 bytes of data
for ($i = 0; $i < 1000; $i++) {
	echo str_repeat(".",1000);

	// sleep to slow down the download
	usleep(50000);
}

Now the result is:

The browser can only tell you how many bytes have been downloaded, but it does not know the total amount. And the progress bar is not showing the progress.

Etag

This is another header that is used for caching purposes. It looks like this:

Etag: "pub1259380237;gz"

The web server may send this header with every document it serves. The value can be based on the last modify date, file size or even the checksum value of a file. The browser then saves this value as it caches the document. Next time the browser requests the same file, it sends this in the HTTP request:

If-None-Match: "pub1259380237;gz"

If the Etag value of the document matches that, the server will send a 304 code instead of 200, and no content. The browser will load the contents from its cache.

Last-Modified

As the name suggests, this header indicates the last modify date of the document, in GMT format:

Last-Modified: Sat, 28 Nov 2009 03:50:37 GMT

$modify_time = filemtime($file);

header("Last-Modified: " . gmdate("D, d M Y H:i:s", $modify_time) . " GMT");

It offers another way for the browser to cache a document. The browser may send this in the HTTP request:

If-Modified-Since: Sat, 28 Nov 2009 06:38:19 GMT

We already talked about this earlier in the “If-Modified-Since” section.

Location

This header is used for redirections. If the response code is 301 or 302, the server must also send this header. For example, when you go to http://www.nettuts.com your browser will receive this:

HTTP/1.x 301 Moved Permanently
...
Location: http://net.tutsplus.com/
...

In PHP, you can redirect a surfer like so:

header('Location: http://net.tutsplus.com/');

By default, that will send a 302 response code. If you want to send 301 instead:

header('Location: http://net.tutsplus.com/', true, 301);

Set-Cookie

When a website wants to set or update a cookie in your browser, it will use this header.

Set-Cookie: skin=noskin; path=/; domain=.amazon.com; expires=Sun, 29-Nov-2009 21:42:28 GMT
Set-Cookie: session-id=120-7333518-8165026; path=/; domain=.amazon.com; expires=Sat Feb 27 08:00:00 2010 GMT

Each cookie is sent as a separate header. Note that the cookies set via JavaScript do not go through HTTP headers.

In PHP, you can set cookies using the setcookie() function, and PHP sends the appropriate HTTP headers.

setcookie("TestCookie", "foobar");

Which causes this header to be sent:

Set-Cookie: TestCookie=foobar

If the expiration date is not specified, the cookie is deleted when the browser window is closed.

WWW-Authenticate

A website may send this header to authenticate a user through HTTP. When the browser sees this header, it will open up a login dialogue window.

WWW-Authenticate: Basic realm="Restricted Area"

Which looks like this:

There is a section in the PHP manual, that has code samples on how to do this in PHP.

if (!isset($_SERVER['PHP_AUTH_USER'])) {
    header('WWW-Authenticate: Basic realm="My Realm"');
    header('HTTP/1.0 401 Unauthorized');
    echo 'Text to send if user hits Cancel button';
    exit;
} else {
    echo "

Hello {$_SERVER['PHP_AUTH_USER']}.

";
    echo "

You entered {$_SERVER['PHP_AUTH_PW']} as your password.

";
}

Content-Encoding

This header is usually set when the returned content is compressed.

Content-Encoding: gzip

In PHP, if you use the ob_gzhandler() callback function, it will be set automatically for you.

Conclusion

Thanks for reading. I hope this article was a good starting point to learn about HTTP Headers. Please leave your comments and questions below, and I will try to respond as much as I can.

Go to Source

Digging into WordPress Review, and Free Copies!

Facebook-Web-Design — Tue, 01 Dec 2009 07:20:20 +0000

“Written by WordPress veterans Chris Coyier and Jeff Starr, Digging into WordPress is 400+ jam-packed pages of everything you need to get the most out of WordPress. WordPress is great right out of the box, but unless you want an ordinary vanilla blog, it is essential to understand the full potential of WordPress and have the right tools to get the job done.”

As a result, he’s built a wonderful community, and has built a great reputation for himself in the last few years. This book, co-written with Jeff Star, is no different: straight-forward, easy-to-understand, and simple.

Simple Learning

Thanks to the use of fun, and helpful illustrations, even those who are brand new to WordPress will be able to dig their heals in — with minimal confusion.

Heart of a Teacher

“Digging into WordPress is perfect for WordPress users in the beginner to intermediate range, but contains plenty of great information for the advanced user as well. If you have any level of experience working with web design or WordPress, this book is written to help you take WordPress to the next level.”

400 Pages of Practical Information

Lots of Code Samples

What About the Free Copies!?

Chris has generously offered to give away a few copies to our community. To enter, simply leave a comment, and be sure to check back on Friday to see if you were randomly chosen!

Go to Source

Interesting html FORM Validators for web developers

Facebook-Web-Design — Sun, 29 Nov 2009 17:55:24 +0000

This post illustrates how to use some interesting HTML Form validators to check FORM fields writing only some lines of HTML and JavaScript code. All these proposal are lightweight, cross-browser and simple to use and customize in your web projects in few minutes.

DIRECT LINK »
Go to Source

Thumboo

Facebook-Web-Design — Fri, 27 Nov 2009 04:05:58 +0000

With Thumboo, you can display high-quality website thumbnails on your site with our easy to drop-in php or java code. Just enter the URL of the page you want to generate, choose a size and copy & paste the code.
Go to Source

Photocase.com Discount Code available just for November 27th

Facebook-Web-Design — Thu, 26 Nov 2009 19:50:17 +0000

Photocase.com (royalty free stock photography)offers through CrazyLeaf Design Blog a 20% discount on a credit package purchase. The discount is available only for 1 day, November 27th.

The Discount Code

The code is : schwarz

Usage : enter the code during the checkout process.

Result : save 20% off a credit package purchase

Photocase.com discount code : schwarz. Usage : enter the code during the checkout process. Result : save 20% off a credit package purchase/

Thousands of themes and templates on ThemeForest

Want to advertise here ? Contact us

Related posts

You might also like these similar articles:

Go to Source

Parse XML with jQuery without a plugin

Facebook-Web-Design — Tue, 24 Nov 2009 23:13:28 +0000

A few days ago I found a jQuery Plugin called jParse that allows you to quickly and easily parse XML. While this is a great plugin and does exactly as it says, I personally try not to use too many plugins in my JavaScript Programing. So I decided to write a tutorial to show you how easy it actually is to Parse XML via jQuery.

Lets first take a look at the XML file we are going to Parse. The XML document is saved as cd_catalog.xml.

 version="1.0" encoding="utf-8" ?>
>
   type="physcial">
    >Maggie May>
    >Rod Stewart>
    >UK>
    >Pickwick>
    >8.50>
    >1990>
  >
   type="physical">
    >When a man loves a woman>
    >Percy Sledge>
    >USA>
    >Atlantic>
    >8.70>
    >1987>
  >
   type="digital">
    >Big Willie style>
    >Will Smith>
    >USA>
    >Columbia>
    >9.90>
    >1997>
  >
>

As you see this is a simple XML document of a CD Catalog. If you have never seen an XML document before I suggest you read up on it. Now lets look at the jQuery Code we will use to extract the data. I am going to post the full code and then explain what each line does. If you don’t care what each line does then feel free to copy and paste and augment the code. Anyway here is the code.

$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: "cd_catalog.xml",
    dataType: "xml",
    success: function(xml){
                  $(xml).find("CD").each(function(){
                        $("#CD").append($(this).find("ARTIST").text() + "
");
                  });
               }
  });
});

The output of the jQuery code would look something like this:

1
2
3

Rod Stewart

Percy Sledge

Will Smith

So now that you see the code let me explain. First you must call the $.Ajax Get Request in order to actually get the XML file. (On a side note you may also use jQuery’s $.get function to retrieve the XML document.) Click here if you don’t understand the $.Ajax Get Request. When you successfully get the cd_catalog.xml file you must call a function to process the XML. Then on Line 7 in the jQuery code $(xml).find(”CD”).each(function() is how you actually process the XML data. First you must use the .find to search all “CD” tags in the XML document then use the .each to loop through every “CD” tag that is in the XML document. Now that we are looping through the all “CD” tags, we can output the Artist Name by using the following code on line 8 $(”#CD”).append($(this).find(”ARTIST”).text() + “br/”);. We must first Append data to the div with the ID CD in the HTML document. The data that we will append to the div is as follows: $(this).find(”ARTIST”).text(). What we do here is find the tag “ARTIST” within the “CD” Node and get the text within the “ARTIST” tag. As you see its pretty simple to Parse an XML document with jQuery. But there is one more topic I want to cover and that is XML tag Attributes.

In the XML document above you can see that in the “CD” tag we have an attribute called “type”. To access an attribute you can use the code below after line 7 in the above jQuery code.

1	$(this).attr("type")

And that is it for this tutorial. I hope it will help you on your quest to become a jQuery guru. If you have any questions please don’t hesitate to comment below.

Go to Source

META Refresh vs. Javascript Refresh

Facebook-Web-Design — Tue, 24 Nov 2009 14:25:04 +0000

A few days back I was perusing the ESPN.com source code when I found the following snippet of code:

I understand what the code was supposed to do but was confused as to why they’d use javascript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

Use of meta refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser’s “back” button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).

So there you have it. Use javascript as your primary means for automatic page refreshes and a META tag as your fallback.

Download PDF

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

META Refresh vs. Javascript Refresh

Go to Source

10 Online Tools and Apps to Help Optimize and Format CSS

BlogPoster — Fri, 20 Nov 2009 19:35:33 +0000

Why would you ever need to optimize (or optimise, which ever spelling you prefer) or reFormat your CSS? Optimizing your CSS will not only allow your web page to load quicker, it also increases the durabilty and resilience of your site when there is a spike in visitors (i.e. the Digg effect) and, for me, the most important part is that it gives you more readable code.

Some of these tools are fairly basic, offering optimization and formatting without many options or user control, which are fine for coders with limited knowledge. For the CSS pros, there are some advanced tools and apps that will allow you to choose the level of compression and also offer many options regarding your optimized CSS. You can choose to eliminate unused selectors and properties, unwanted whitespace, tabs, comments and you can even change the longhand declaration to shorthand notations.

No one who codes there CSS has complete confidence that it is perfectly formatted, this is were these tools come in and help.
Please note, these tools are not CSS validation or error checkers, if you are looking for that try the The W3C CSS Validation Service.

flumpCakes Online CSS Optimiser/Optimizer

This feature rich tool takes your CSS file and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. Here is a full list of what it can do:

Removes comments
Removes white space (such as excess spaces)
Converts RGB values to Hex (they’re smaller)
Converts Hex values in the format #RRBBGG to #RGB.
Changes zero values with a size specified to 0. (0px would change to 0)
Changes values such as border: 1px 2px 1px 2px; to border: 1px 2px;
Converts multiple background, font, margin, padding, list attributes into a single attribute
Converts multiple border values into single attributes
Option to convert absolute values (PX & PT) into relative values (EM)
Groups style attributes and values which appear mutliple times into a single style

This tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.

Styleneat – CSS Organizer

Styleneat organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas making it easier to see how they relate to each other.
With this tool you have the option of sorting the properties alphabetically, sorting the selectors alphabetically and you have the choice of multi or single line formatting.

Clean CSS – Optmize and Format your CSS

CleanCSS is a CSS optimizer and formatter with a reasonable amount of options, that takes your CSS code and makes it cleaner and more concise.

CSS Compressor – Online Code Compressor

CSS Compressor, obviously compresses the CSS to reduce the code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Code Beautifier – CSS Formatter and Optimiser

This tool is based on the popular open-source CSS parser and optimizer, CSS Tidy. Code Beautifier offers the most options compared to all of the tools in this article.
You can sort and merge selectors and properties, compress colors and font-weights, choose between lower and uppercase formatting and even has the option to discard invalid properties.

CSS SuperScrub

CSS SuperScrub can significantly reduce the size and complexity of your CSS by stripping out unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
There are limited options with this tool, which is no bad thing, it works exactly as intended: It scrubs your CSS.

Online CSS Optimiser

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

CSS Compressor – CSS Drive

Use this utility to compress your CSS and increase the loading speed of a web page and save a little on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.
It also has the option of an Advanced Mode that gives you more compression options.

CSS Analyser

The CSS Analyser is a small utilty that allows you to check the validity of your CSS against the W3C's validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.

CSS Redundancy Checker

CSS Redundancy Checker is a simple tool with one simple, yet useful function. It is a tool that finds CSS selectors that aren't used by any of your HTML files and any that are redundant it removes.

CSS Code Formatter and Optimizer – CSS Portal

Yet another code formatter and optimizer, basic, but one that is worth mentioning and trying.

You might also like…

CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »

Go to Source

Programming Blog » code

Avast Free Antivirus 5.0 Adds Behavior Monitor, Heuristics Engine, and Improved Performance [Downloads]

40 Valuable Tools and Resources For Web Designers

Getting Inspired: Interesting Redesign Projects

Useful Front-End and Back-End Tools

Useful Resources For Web Developers

Last Click (= a bit of fun)

5 Great IDEs to Start Coding in the Cloud

Security

Features

Prerequisite

Security

Final Thoughts

jQuery Lesson Series: How To Use JSON with Twitter and Flickr API

Using getJSON() to implement a Twitter Search

Using getJSON() to implement a Flickr Search

MyBikeNumber.com

View Source; How important was it, is it, and will it be?

Job Board 75% Coupon Code

JavaScript Frameworks Playground: jsFiddle

Related posts

Mashable’s Social Media Marketing & Web Event Guide

Three Days in Seattle

Getting Started with jQuery

Why a JavaScript library?

Overcoming browser differences

Unobtrusive JavaScript

Accomplishing complex tasks with ease

Further reading

Understand CSS concepts

Understand JavaScript concepts

The jQuery source code

jQuery syntax

The jQuery wrapper

jQuery commands

Chaining commands

Running code when the DOM is ready

Further reading

Conclusion

Further reading

Related Content

About the Author

Five Quick New Year Resolutions for Designers and Developers

Clean up your code

Get Analytics

Learn the basics of jQuery, CSS3 and HTML5

Build your social networks

Make a video

Create Complex Layouts with a Fast and Simple UI Kit

Related Posts

Sponsors

Social Hosting, Good Parenting Are Keys to Open Source Success

Mashable’s Weekly Guide to Social Media Events

10 Awesome Uses of Augmented Reality Marketing

F*ck This Weather

A Font & Style Testing Bookmarklet: FontFriend

Related posts

Cleaner Code with CSS3 Selectors

Google’s Favorite Place | Using QR Codes for Business

HipChat

Squade – Code Together

Fully Utilize Google Analytics Reporting Power

20+ Tools for Quick and Clean Code Development

AJAX

MiniAjax

Clean AJAX

Rialto

ThinWire

AjaxDaddy

JavaScript

jQuery UI

Venkman JavaScript Debugger

SproutCore

SimpleJS

CSS

List-O-Matic

Blue Print CSS

CSS Compressor

Clean CSS

CSS Color Chart

"; } else{ $return .= '
' . "\n
"; } $return .= $column; $return .= '
'; $i++; } if(isset($columns[1])){ $content = wpautop($return); }else{ $content = wpautop($content); } echo $content; } } add_filter('the_content', 'my_multi_col');