Coding and Design

Panic Coda

Panic Coda, a shareware web development app for Macs. It allows you to reduce the amount of clutter when it comes to applications such as an FTP client, CSS editor, a version control system, and more.

Firebug

Firebug is a free, open source in-browser web development application for Firefox. Notible features include: HTML and CSS editing that lets you swiftly debug, analyzing JavaScript, and a creative Document Object Model (DOM) inspection tool that aids you in quickly seeing how the elements of a web page relate to each other.

Blueprint: A CSS Framework

Blueprint lets you reduce the amount of CSS code you’re normally obligated to write by using common styles that developers regularly use such CSS reset and the embedding of images.

CSSTidy

Widely used as an opensource CSS parser and optimiser, CSSTidy is available as an executeable file (for Windows, Linux and OSX). This useful app allows you to quickly and effectively “tidy” up your CSS sheets without the necessary hassels.

Web Developer Firefox Extension

Web Developer is a Firefox extension that every developer should have, it’s sort of a tool box all in its own. It provides you with tools to conduct tests (including testing for broken images or links), testing layouts in multiple screen sizes, viewing cookie information, HTML, CSS sheets, and validating mark-up.

BB Edit

BBEdit is a full-featured text editor very similar to Textmate. The BBEdit product page even has a section for web developers to see the benefits of BBEdit. For those Mac users who think BBEdit is better than Textmate, it’s usually because BBEdit is a Cocoa application, and TextMate is a Unix application.

HTML Entity Character Lookup

This lookup app allows you to quickly find an entity or tag based on how it looks. For example, an < or a quick note.

Blue Print CSS Frameworks

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

ColorZilla

This an advanced Firefox add-on that includes features such as an Eyedropper, ColorPicker, Page Zoomer and much more.

Typetester

Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

CSSedit

CSSedit is developed by the same company that offers Espresso. CSSedit is mainly a text editor focused specifically on CSS (as you can tell by the name). Among several of the text editors available, this app is perfect for those designers who strive to produce sites and templates within an allotted time span.

Designers Toolbox

This app has an array of print and web document sizes that can easily come in handy to the designer on the go.

MAMP

MAMP allows you acquire your own local server and have it up and running within 5 minutes. The abbreviation MAMP stands for Mac, Apache, MySQL, and PHP-Perl-Python. Because it’s based on giving you the freedom to choose whichever sever side language you prefer. MAMP is pretty much your “One-Click-Solution for setting up your personal webserver”.

FileZilla

One of the best free FTP tools around. FileZilla provides unlimited uploads and downloads and supports resumption of transfers when your connection is broken. FileZilla comes in two flavors – full-featured FTP client, and FTP server. Both support FTP over open connections, SSL/TLS (FTPS) and SSH FTP.

KompoZer

KompoZer is a WYSIWYG Web-authoring system with built-in site management tools and CSS management system.

Clean AJAX

Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It can be plugged in any page or DHTML framework because it was designed in conformation with the separation of concerns principle, keeping focus on AJAX issues.

Sajax

Sajax is an open source tool to make programming websites using the Ajax framework — also known as XML HTTP Request or remote scripting — as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh.

JSUnit

JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript. It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs. Its development began in January 2001.

Stylish

This add-on is often considered for web site tweakers, however it can also be used to add or remove CSS and design elements on the fly, without even having to login to your web site.

Expresso

Expresso is a vastly growing popular text editor. It allows you to quickly organize, preview, find, and expand code. Preview your progress and easily publish websites with the click of a few buttons. However, it currently requires Leopard to operate.

Wufoo

Wufoo is an application that helps you build amazing online forms.

Aviary

Edit images, create mind-blowing effects, design logos, find colors, collaborate, and more.

CakePHP

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications

Task Management Apps

Base Camp

Basecamp works with a variety of iPhone apps, third-party billing/invoicing tools, mock-up review software, time tracking tools, widgets, and more. Today it’s one of the leading web-based project collaboration tool.

Versions

Because we don’t all have photographic memory and genius time management skills Versions was created. This software allows web designers, developers, and more to manage their client’s projects without dealing with all the said hassle’s. Don’t worry, if you’ve never worked with Subversion this app should be a breeze even to the most of novice users.

QuickSilver

QuickSilver can categorized as an extendable interface that enables you to quickly launch apps, manage contacts, shortcuts, music, images, and several other programs.

Backpack

Backpack is an easy intranet for your business. Store, share, discuss, and archive everything that’s essential for your team. Safe and secure.

Rescue Time

You can identify employees who are aren’t working very hard. You can identify employees who are under tasked, but are afraid to speak up about it. You can identify employees who are unmotivated. You can see how environment variables in the work place effect aggregate productivity. For example, when a team doubles in size, how does that change how people spend their time? How has productivity changed since you changed the layout of the office? What would happen if you instituted a “no email on Fridays” policy?

Tick

Tick is a simple and friendly time tracking application to help you stay on budget.

Punchy Time

PunchyTime is a simple time tracking tool for creatives (ad agencies, web-dev shops, etc). It makes it really easy for your team to enter time “as they work” instead of letting it all pile up till the end of the month (which is how billable hours get lost). The interface is quick, simple, and even a little fun. Get in, get out, get back to work.

Time Out

The human body isn’t built to sit in one position for endless hours, gripping a mouse or typing on the keyboard. Dejal Time Out is here to help. It will gently remind you to take a break on a regular basis. Time Out has two kinds of breaks: a “Normal” break, typically for 10 minutes after 50 minutes of work, so you can move about and relax, plus a “Micro” break: a very brief pause of typically 10 seconds every 10 minutes, so you can remember not to tense up too much for long periods.

Clocking It

Prove to your clients that you’ve spent ‘that much time’ on their projects. Time tracking can be simple or detailed. Enjoy flexible reporting, multiple ways to communication and an interactive gantt chart and scheduling.

Google Docs

We’ve met folks who still haven’t tried the Google Doc applications, and we don’t know why. Use their documents, spreadsheets, presentation and PDF utilities and organize them by user or topic. You can share everything or nothing with your team. Also integrates a chat feature.

Flow

Flow works as a visual workflow manager that allows you to have full control over the current project you may be working on. Visit the Flow site to get a much better feel of this workflow management software.

EverNote

EverNote easily lets you capture information within any given environment utilizing whichever device or platform you prefer, then it makes this information available and searchable any time you want, from virtually anywhere.

ProjectPier

Very similar to the popular Basecamp, this free, open source and self-hosted PHP application is perfect for managing tasks, projects and teams.

SlimTimer

From the SLIMTIMER you can create tasks and even share them with your coworkers and those you report to. Open the SLIMTIMER and click on a task to start the clock and click again when you’re finished. If you’ve completed the task click the checkbox to mark it off. Close the browser when you’re done.

TuDu List

Tudu Lists is a very simple application, which you can start using in seconds – but with some advantages over your home-made Excel todo list.

Finance, Billing, & Accounting

FreshBooks

Send, track and collect payments quickly. Great for teams, freelancers and service providers. So easy to use, FreshBooks saves you time and gets you paid faster. You’ll actually love invoicing.

Billing Manager

Intuit Billing Manager is the fast, easy, FREE way to manage your invoicing online. Use the Billing Manager web site to create customized, professional invoices, send them by email and track payment history and status — all on one place. Spend less time on your paperwork and more time on your customers.

Blinksale

Blinksale is perfect for anyone who needs to invoice clients for services or products sold. Blinksale is an excellent choice for attorneys, accountants, designers, IT professionals, software developers, journalists, contractors, engineers, architects, videographers, and more. Basically, if you need to send invoices, Blinksale can work for you

WORKetc

WORKetc provides serious business owners with all the software they need to build seriously successful businesses. We combine CRM, Projects, Billing, Timesheets and more with a powerful automation engine to help take your small business to the next level.

Billings

Billings great for the freelance web designer who has a stable and growing list of clients. It’s a productive invoicing tool that integrates the Mac interface with several useful features that’ll save you lots of wonderful time.

On The Job

On The Job is a complete application that lets you track time, expenses, and simple client invoicing so that you’re able to always remain organized. If you have clients that reside in other countries then you can take advantage of the multiple currency billing option.

Time59

Be more organized with less effort. Time59 keeps track of the work you do, gets your invoices out quickly, and manages client payments. Your Time59 account can be accessed from any internet connected computer… at home, at your office, or on the road.

Money3

Money3 is a great accounting program developed for Mac OS X users. It’s the latest in money management apps and offers a high-quality GUI and the ability to manage various types of accounts. You can also plan out and easily track your budgets.

LessAccounting

Send Invoices & Proposals. Send html and pdf, download pdfs. Zap proposal into invoices. Tracking expenses is easy with nightly bank data aggregation. Automatically import bank transactions, data entry is boring.

XE Currency Converter

XE is an easy-to-use tool that will show you the current conversion rate. Simply enter the amount, the currency you’re converting from, and the currency you’re converting to and it will show you an up-to-date calculation.

FreeAgent

Manage your projects and contacts, track the time you spend and create flexible timesheet reports. Create great looking invoices with no fuss. Email them to the client and easily track through to payment. FreeAgent makes sales tax reporting a snap, and you can easily customise it for your country.

Cashboard

Time tracking, invoicing, estimates, and online payments done your way. Cashboard does it all, and does it for free.

Bill My Clients

BillMyClients.com is a hassle-free way for businesses to quickly & easily create and print invoices and bills online.

LiteAccounting

LiteAccounting is an online application that gives you the tools you need to invoice and receive payment from your customers.

Xero

Xero is an online accounting system designed for small businesses and their advisors. It’s simple, smart and secure. Easy bank reconciliation keeps your accounts accurate and up to date. Automatic bank feeds get your transactions in to Xero without effort. At the heart of Xero is a full accrual accounting system which automates and simplifies your day-to-day bookkeeping.

]]>

As you’re in the process of designing a login form/area you might yourself face to face with a few vital questions: i.e. Will I display the name of the form as login, log in or sign in? How will I design the graphical aesthetics of the login (or log in/sign in) area? Where should the forgotten password link be displayed? What if I were to include a cancellation button? Should I use graphics and transparent properties that will match the overall design of my site? And so on..

No matter the question pertaining to your login form, there are always multiple solutions to your concerns. This is why we’ve done our research and collected 100 of the most beautiful sites with outstanding login forms for your inspiration.

Hopefully these sites will open up your mind to the endless and creative possibilities you can explore when designing this aspect of your site.

10 Super Creative Business Cards

If your thinking of getting a new business card to impress everyone, here is a little inspiration for you. This selection, from Abduzeedo, showcases the type of business cards that stand out from the crowd, they are certainly different and very creative.

10 Super Creative Business Cards

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

In this post you will find a thorough collection of all kinds of resources that will aid designers and developers working with Joomla-powered websites. This collection is intended to simplify your tasks and save you time when working with Joomla. This post covers essential resources related to Joomla— Themes, Extensions, Tutorials, Forums, Cheat Sheets and Useful Documents.

The Ultimate Joomla Toolbox: Themes, Extensions and Resources

Worlds Biggest Alarm Clock

This video shows one of the entries into the edge.ca’s “Worlds Biggest” contest, The Worlds Biggest Alarm Clock. This is awesome.
It was built by mounting a large air cylinder to the head of his bed and a valve controlled by a computer which is programmed to wake you up in the morning.

Worlds Biggest Alarm Clock

35 CSS-Lifesavers For Efficient Web Design

This post, from Smashing Magazine, 35 CSS-Lifesavers For Efficient Web Design will significantly improve your workflow and reduce your time and efforts for CSS-coding. Whether you’re writing, compiling, refining or experimenting with CSS code , these tools can help you get the job done faster and better than ever before. A must bookmark.

35 CSS-Lifesavers For Efficient Web Design

Twitter Guide Book – How To, Tips and Instructions

The Twitter Guide Book is the most comprehensive guide to Twitter you could ever find, it covers the basics as well as an indepth look at Twitter and business, sharing via Twitter and managing your Twitter stream. Is your Twitter getting out of control? This is the guide for you.

Twitter Guide Book – How To, Tips and Instructions

56 Light & Clean Website Designs Using A Minimalist Color Scheme

A selection of the best designed minamlist web designs, a great selection. Don’t you just love minamilism.

56 Light & Clean Website Designs Using A Minimalist Color Scheme

Ceiling Porn

Definetly not what you are thinking by the posts title, this is actually a showcase of the best designed ceilings. Some are remarkable, others seemingly impossible, have a look for yourselves.

Ceiling Porn

Even MSN.com isn’t IE6 compliant!

Judging by the above images, Microsoft ignored their own browser when it came to design. As you can see the new “Bing” search is hovering over the main navigation. Mom’s around the world are freaking out because they can’t click on their Hotmail.

Even MSN.com isn’t IE6 compliant!

14 Bizarre Japanese Toys

No one does weird toys like Japan does weird toys… from presidential action figures to toilet training tigers, this post has the strangest and most bizarre Japanese toys ever.

14 Bizarre Japanese Toys

The 15 Creepiest Vintage Ads Of All Time

What do murder, pedophilia, suicide and a baby tiger have in common? They have all been used to sell stuff in these amazingly disturbing vintage ads!
These are real, untouched advertisements from the good old days. It doesn’t matter if it’s lovely ladies or adorable clowns, somehow these old-time ad wizards found ways to traumatize us while pedaling everyday products.

The 15 Creepiest Vintage Ads Of All Time

By Paul Andrew (Speckyboy and speckyboy@twitter).

What Is XSS?

XSS stands for Cross Server Scripting, and is the most common technique for hacking into a website. Most of the tips we will be talking about today will be things designed to prevent XSS attacks on your server. XSS is when someone injects code into your website, and gets it to execute. This can be used for a variety of malicious purposes.

Here is an example of a simple XSS attack I was able to perform on my site. I noticed that my user name was contained inside a tag on my profile page. I changed my user name to this:

This caused an alert fired away every time someone opened my profile page. It would not have been difficult for me to import an external JavaScript file, or write one that did something more malicious.

List of common XSS exploits

Sanitizing Input

Most XSS attacks come from manipulating the input of a site. Input comes in two forms: Forms and GET variables. You need to take care to properly sanitize these inputs before doing anything else with them. Here are a few things you can do to make sure the input you receive is safe:

Use PHP’s addslashes Function

This is a very simple thing you can do that can help prevent attacks. Simply run all of your input through the addslashes method in PHP. The slashes help escape characters that could otherwise be dangerous.

Use the strip_tags Function

strip_tags() is another handy PHP function that can help sanitize input. You also have the option of allowing certain tags, so if you have a page where users should be allowed to use some HTML (for example, a blog post) you can still allow them to use some tags. However, be wary of allowing particularly dangerous tags, such as <script> or <iframe>.

Remove JavaScript From Input

By Using regular expressions, we can make sure that no JavaScript gets through to execute. While using strip tags to remove tags can take care of some JavaScript, it doesn’t handle instances where people may put a JavaScript event on another tag, such as an <a> tag. Below is a simple function that removes JavaScript from the input it is given, by using regular expressions:

function removeJavaScript($input){
  return  preg_replace('#]*>.*?#is','',$input);
}

Remove Flash From Input

Much like JavaScript, Flash can also be embedded via XSS and used for malicious purposes. Below is another function, which will strip Flash from the input given:

function removeFlash($input){
    return preg_replace("/<object[0-9 a-z_?*=\":\-\/\.#\,\\n\\r\\t]+/smi", "", $input);
}

Putting It All Together

Below is a handy function I’ve written that can handle all of the above methods of cleaning input. It also gives you the option of allowing JavaScript, Flash, or certain HTML tags:

function sanitizeInput($input,$allowedTags=””,$allowJavaScript=false,$allowFlash=false){
	$input  =  strip_tags($input,$allowedTags);
	if(!$allowJavaScript){
		$input = preg_replace('#]*>.*?#is','',$input);
	}

	if(!$allowFlash){
		$input = preg_replace("/<object[0-9 a-z_?*=\":\-\/\.#\,\\n\\r\\t]+/smi",
"", $input);
	}
	return $input;

}

Check The Referring Page

Web sites are able to send requests from any server to another, and this can be dangerous. One way of making sure input is coming from where it is supposed to is to use the $_SERVER array in PHP and check what the referring site is. You can also add unique keys to forms and some pages to make sure that the input you are receiving is coming from a reliable source.

NETTuts has a great tutorial on this: Secure Your Forms with Form Keys

Using Encryption

One of the biggest no-nos in all of web programming is storing sensitive information in plain text inside of a database. Things like passwords, social security numbers, and credit card numbers are very common pieces of data that should not be stored in a database.

It is doing a disservice to the users of your site, because if your database was ever to be compromised, you have put your users in addition to yourself, at risk.

PHP’s md5 and crypt functions are great tools for making sure your database is secure. Crypt allows you to use a salt variable, to help make encryption more secure, while md5 does not. Here is an example of how to encrypt passwords, and how to verify them when a user tries to log on, using the crypt function:

//encrypt the input
$input  = $_POST['password'];
$salt    =  “makeThisSecure”;
$safePassword  = crypt($input,salt);
//just re encrypt the password to check
$password_attempt = “password”;
if(crypt($password_attempt,$salt) == $safePassword){
	//log the user in
}

Using CAPTCHAs

If you have any kind of form that does not require a user to be logged in, using CAPTCHAs is a good way to prevent spam bots from inputing bogus information. There are a lot of good CAPTCHA scripts that are freely available, such as : www.phpcaptcha.org/, and here is a tutorial on how to create your own CAPTCHA

Have Secure Passwords

A number of hacking attempts come from people not having very strong passwords. Even Twitter fell victim to this not long ago (link to article). Make sure that your password has a good mix of letters, numbers, and symbols, and that it isn’t a word that can be found in the dictionary. This includes passwords that are common words, but are spelled in ‘leet speak’, for example drag0n.

If you take these steps, you should have a much more secure web application. It can sometimes be a hassle to update existing projects, but it is nothing compared to the headache you will suffer if you don’t, and become the victim of an attack. It is important that you don’t think of securing an application as an afterthought, but instead something that is part of your regular development process.

Setting up your office has to be perfect, it has got to be tailored to your professional and personal needs, it needs to get your creative and inspirational juices flowing, it has to have limited distractions, speedy access to all the tools of your trade and if possible, have all the coolest and latest gadgetry that you budget allows.

Could someone tell us why most cool workspaces seem to use MACs? Are Windows and Linux users not cool? Maybe its the MAC that makes the workspace cool.

All Systems Glow…

A cool glowing workstation from Hong Kong based photographer Mark aka Crouching Donkey.

View more and source

Geek Office Setup

Arthur Caranta’s geeky workstation, read his blog here: caranta.com.

View more and source

Elegant

This stylish and elegant setup is from Graeme Basson.

View more and source

MySpace

The workstation of freelance web designer and developer Lisa Risager.

View more and source

Home Office Upgraded

This sleek workstation is from m@rkos, he blogs here: medinaauto.blogspot.com.

View more and source

My Office

Cool, minimal and immaculate is the best way to describe this workstation from paszzz.

View more and source

My Workspace

There is a nature (maybe a jungle) theme going on here from student and freelance designer Chris Holder.

View more and source

Duncan's SOHO Makeover

This workstation from the creative Duncan Hopkins has been custom built by himself. View his professional work here: beyondbeyond.com/.

View more and source

Nuevo Sofa Naranja (and a Cool Workspaces)

The cool office from David Martinez Suarez.

View more and source

Mac Pro Monitors

The reason for all the monitors is that Mitch Haile is a software developer, view more images about this workstaion here: Office FAQ.

View more and source

My Workstation

I love this workstation, its simple yet feature rich, and simply love the flatscreen above the computer. This is from Geoff Harrison.

View more and source

Workspace

A lovely office setup from AtomicBunny.

View more and source

The Studio

A mood setting office and studio from musician sephtakular.

View more and source

My Computer Station

A great image of Jerome Slagle’s workstaion in the dark, I am not sure about the plasma ball, though.

View more and source

Brooklyn Home Office

This is the minmal workstation of Mackenzie Kosut, sleek office, nice view, Apple hardware everywhere, he must be loaded.

View more and source

By Paul Andrew (Speckyboy and speckyboy@twitter).

This week we feature some cool resources, ranging from jQuery, Wordpress, typography and we even have a Macbook that transforms into a speace ship, you have to see this!

Cute Free Twitter Icons For Your Blog

A Free Twitter Icon Set from Smashing Magazine, with 12 original and lovely icons in this set. All the icons included in the set have clean shapes and neutral colors that can be used for various contexts, from a “Tweet it” button for your blogs to desktop wallpapers. This set was designed by IconEden.

Cute Free Twitter Icons For Your Blog.

12 Bad-Ass Chess Sets

The game of chess takes cunning and intelligence and can sometimes be incredibly intense. But your standard Chess Set just doesn’t reflect the same intensity. If you prefer to play on a board that’s as mighty as your chess moves then check out these 12 Bad Ass Chess Sets.

12 Bad-Ass Chess Sets.

15 jQuery Plugins To Create A User Friendly Tooltip

A tooltip is a great way of showing a little bit of information when the user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. And when the tooltip is being used properly, it can improve your site’s user friendly level, and also save us a lot of spaces.
Have a look at these 15 jQuery plugins to create an user friendly tooltip from Web Design Booth.

15 jQuery Plugins To Create A User Friendly Tooltip.

27 Must-Have Starter Kits For Web Designers

Starter kits are great timesavers for web designers that are particularly useful for those who often create mock-ups for projects on daily basis. If you are a designer-come-programmer think of them as your library of code snippets.
So what’s a starter kit? It can vary – depending on what each designer routinely works with. For GUI designers, keeping a copy of form elements (buttons, checkboxes, tab, drop down menus, etc) helps speed up the process of creating screens and layouts; on the other hand, browser (IE, Firefox Safari) templates with web safe area keep web designers reminded how/where they should prioritize their contents. Experienced designers will usually customize and keep a personal version of there own starter kit.
This is an indispensible resource from Hongkiat.

27 Must-Have Starter Kits For Web Designers.

25 Excellent Typography Tools for the Serious Designer

Typography is an integral part of design. There are many tools out there that are available for working with type, in this article from Six Revisions, you will find a collection of the best free typography tools available. If you’re a web designer or developer, then these tools are going to save you some serious time and effort. Take time to work your way through this extensive list and give everything a go.

25 Excellent Typography Tools for the Serious Designer.

50 Inspiring Examples of Minimalism in Web Design

The sophisticated image of minimalism has always been a popular style of design. In webdesign a minimalist site is stripped naked of eye candy and fancy colours or effects, leaving the underlying structure exposed. The key to a beautiful minimalist site is a solid and structured layout, as well as focus on stylish and well designed typography. These 50 examples showcase some of the best minimal site designs out there on the web.

50 Inspiring Examples of Minimalism in Web Design.

MacBook transforms and … well just watch it's AWESOME!

Some French guy is working on his MacBook laptop when suddenly it begins to transform into a spaceship then flies away, this really is awesome.

What’s New in Firefox 3.5?

Mike Beltzner gives a tour of Firefox 3.5, the new web browser from Mozilla. If you are serious about your browser, you must view this.

The 1KB CSS Grid – A simple, lightweight approach

CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated. Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight, which can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting). This has to be worth a look at.

The 1KB CSS Grid – A simple, lightweight approach

10 WordPress 2.8 Features To Look Out For

It's a great achievement for WordPress 2.8 to be released so soon after 2.7. Named 'Baker', 2.8 adds plenty of new features, including syntax highlighting for theme/plugin editing, a theme installer, and a great revamped widgets interface and API. Could Wordpress get any better?
This is great round-up from Net Tuts.

10 WordPress 2.8 Features To Look Out For.

By Paul Andrew (Speckyboy and speckyboy@twitter).

All of these JavaScript cheat sheets are designed to act as reminders and as a comprehensive reference sheet, displaying the many Functions and Methods, Regular Expressions, XMLHttpRequest, Event Handlers… Basically, you will find, every aspect of Javascript and Ajax covered to aid you with development.
You will also find cheat sheets for all the major Javascript frameworks.

Ajax and Javscript Cheat Sheets

A brief tongue in cheek introduction to Ajax for newbies.
Download PDF: Whats Ajax Cheatsheet
Source: slash7.com.

This cheat sheet is very detailed an professional. A must have for Microsoft ASP.NET developers.
Download: Microsoft ASP.NET AJAX Cheat Sheet.
Source: aspnetresources.com.

Cheat Sheets for the YUI Library provide quick references to the key methods, properties, and syntax patterns of each component. When you find yourself elbow-deep in a coding problem, sometimes it’s quicker to turn to these rather than firing up a browser to review documentation and examples.
Download ZIP File: The Yahoo! User Interface Library (YUI).
Source: developer.yahoo.com.

This JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object.
Download PDF: JavaScript Cheat Sheet PDF.
Download PNG: JavaScript Cheat Sheet PNG.
Source: addedbytes.com.

A detailed HTML cheat sheet covering all aspects of Javascript development.
View HTML: JavaScript in one page.
Source: javascript.su.

View HTML: JavaScript Reference.
Source: javascript-reference.info.

Here is the syntax for a very powerful and very cryptic string pattern matching scheme in the client-side JavaScript of web browsers. You can use it to validate form entry, parse URLs, and many other things.
View HTML: Regular Expressions for client-side JavaScript.
Source: visibone.com.

An understandingly popular JavaScript Reference Card from Addison-Wesley’s.
Download PDF: Javascript Refererence Card.
Source: wps.aw.com.

After writing the JavaScript Bible (Wiley), part of the authors deal with the book publishers was that he was allowed to release a free chapter (JS/DOM Object Quick Reference) as a free PDF download.
Download PDF: JavaScript and Browser Objects Quick Reference.
Source: dannyg.com.

A free cheat sheet from the excellent visibone, Javascript DOM for Web Browsers.
Download JPG: Javascript DOM for Web Browsers.
Source: visibone.com.

Ajax and Ruby on Rails

A brief intro for developers wishing to develop Ajax with Ruby on Rails.
Download PDF: Ajax on Rails.
Source: slash7.com.

R.J.S. (Ruby JavaScript) is a templating tool, built in Ruby, to output JavaScript.
Download PDF: Ruby, Ajax and Javascript Cheat Sheet.
Source: slash7.com.

jQuery Cheat Sheets

View HTML: jQuery CheatSheet (from Snipplr.com).
Source: Snipplr.com.

An A-Z of all jQuery commands for quick reference.
View HTML: jQuery 1.1 Cheat Sheet – A to Z.
Source: n-bp.com.

This cheat sheet gives you a categorized A-Z of jQuery and Ajax commands specifically for jQuery 1.1.4.
Download PDF: Jquery-Cheat-Sheet 1.1.4.
Source: pablovos.com.

Same description as above, this time though specifically for jQuery 2.
Download PNG: jQuery Cheat-Sheet 1.2.
Source: cheat-sheets.org.

.
A colorful and easy to read jQuery cheat sheet from colorcharge.com.
Download PNG: jQuery 1.2 Cheat Sheet.
Source: colorcharge.com.

This is an official jQuery Visual Map, very useful.
Download PNG: jQuery Visual Map.
Source: jQuery.com.

Prototype Cheat Sheets

Probably the most comprehensive cheat sheet for the underused Prototype.
Download PDF: Prototype 1.6.0.2 Cheat Sheet.
Source: thinkweb2.com.

A comprehensively written Prototype cheat sheet detailing cheat sheet from snook, detailing all aspects of development.
Download PDF: Prototype 1.5.0 Cheat Sheet PDF.
Download PNG: Prototype 1.5.0 Cheat Sheet PNG.
Source: snook.ca.

Scriptaculous Cheat Sheets

A single page Scriptaculous cheat sheet covering combination effects.
Download PDF: A Field Guide to Scriptaculous PDF.
Source: slash7.com.

MooTools Cheat Sheets

This MooTools cheat sheet coverss documentation for Core, Native, Class, Element, Utilities and Request.
Download PDF (Standard): MooTools 1.2 Cheat Sheet Standard PDF.
Download PDF (Printer Friendly): MooTools 1.2 Cheat Sheet Pronter Friendly PDF.
Source: mediavrog.net.

This cheat sheet has been colour-coded to make it easier to find the info that you need.
Download PDF: Mootools r.83 Cheat Sheet PDF.
Download PNG: Mootools r.83 Cheat Sheet PNG.
Source: snook.ca.

By Paul Andrew (Speckyboy and speckyboy@twitter).

It’s surely an interesting adventure becoming aware of the infinite possibilities CSS has to offer. It’s important for developers to continue to learn and improve their coding techniques, it’s essential to a designers advancement in expanding their knowledge base. Have a look at a few essential techniques to enhance your styling:

Writing Clean, Semantic Code

An exceedingly overlooked aspect of constructing CSS style sheet involves the developers ability to write clean, semantic code (marking your code with corresponding tags, for example, h1, h2, br, ul, and so forth). You don’t need to be a CSS guru, but you should have firm knowledge of the basics. A vast majority of designers don’t realize that making use of valid code allows their pages to be more accessible to user agents, which in return gives people equal access to their information.

We live in a world where the web isn’t exclusively accessible through a computer’s browser, not since Internet users can gain quick access to the web with the stroke of a few keys on their Mobile devices. Therefore, your markup should adequately cooperate with a wide range of browsers and Mobile gadgets. Once you’re able to separate structure from presentation you immediately gain the ability to create a more accessible, valid, well structured page.

Properly Commenting on Your CSS Style Sheets

With every markup, it’s essentially important to keep your style sheet well cataloged (especially if your style sheet containes complex strings of code). Classifying sections of the style sheet works very well, but from time to time it also helps to write quick reminder or note.

Align Comments in Consecutive Lines

If your style sheet contains multiple lines of code with numerous trailing comments, you should align the comments so they will be easier to read. This will immensely extend the readability of your CSS.

color: #6C6C6C;    // See how aligning these comments
font-size: 10px;   // make them easier to read?

Getting to the Point

Don’t write more than necessary comments in order to convey the idea.  Avoid ASCII art, rude remarks, and anything else that can deviate the developer trying to read your code from the main idea.  Bottom line, keep the comments simple, direct, and effective.

Updating Your Comments

What would be the point of commenting on code if the comments are not changed once you’ve updated that string of code?  Both the code and comments must move in parallel motion, if not, the comments will make it difficult and confusing for developers who maintain your code.  If you use tools that automatically change your code, always remember to go back and change the comment on that specific code if applicable.

Using Sections to Organize Your Style Sheets

You’ll be astonished to find how helpful it is to organize your style sheets by section. To the more collective developer it may seem like common sense to do so, but sometimes the new designers/developers will only start to acknowledge these things towards the end of their style sheet where it rarely helps other developers. This will allow you to adequately maintain your code, and not to mention the facility of quickly finding what you’re looking for if a sudden change needs to be made.

Here’s what a well organized style-sheet would look like with and without sections:

Without any sections

body {font:16px helvetica, verdana, arial, sans-serif}
h1 {font-size:24px; margin:0 0 20px 0; color:#00f}
h2 {font-size:24px; margin:20px 0 0 0; color:#0f0}

#wrapper {width:960px; margin:0 auto}

#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}

#sidebar {float:left; width:320px; font-size:12px; line-height:18px; margin:20px 0}
#sidebar h2 {font-size:18px; border-bottom:1px solid #999}

Code placed within sections

/* ------------------------------
 		 layout
 ----------------------------- */
#wrapper {width:960px; margin:0 auto}

#sidebar {float:left; width:320px; margin:20px 0}

/* -----------------------------
 		Typography
----------------------------- */
body {font:16px helvetica, verdana, arial, sans-serif}

h1 {font-size:24px; margin:0 0 20px 0;}
h2 {font-size:24px; margin:20px 0 0 0; }

#nav li a {font-size:12px;}

#sidebar {font-size:12px; line-height:18px;}
#sidebar h2 {font-size:18px; }

Abusing the Amount of Times You Refresh a Page

I used to have a nasty habit of refreshing my browser after I changed every single selector or element. I would waste valuable loads of time by writing a line of code, surely knowing the exact effect it was going to have on the visual appereance on the site, but I’d still refresh the browser at any rate.

You’ll soon come to learn (if you haven’t already) that every bit of second or minute that a developer saves is time used on a more constructive apect of your design. Constantly taking a step back to reflect upon your design, and obsessively refreshing the browser just to see how things are going will significantly slow you down. If you wish to become more proficient with CSS, then you’ll need to learn to trust yourself. Try to gain your own trust that what you are coding is going to react the same as you’d expect it to, and try to considerably limit the amount of times you refresh your browser.

Indenting Your Code, the Smart Way

If you wish to make your code easier to read and understand, add indentation. Indenting makes your codes structure a lot clearer and more collected, you’ll easily be able to find large sections and otherwise hard to find strings of code.

One thing you must know is not to abuse the use of indentation, overly indenting your style sheets can cause great confusion and ruin the techniques you’ve used to organize your code. A large misconception when indenting is the use of double indention, honestly, this is simply a waste of space and time. Keep it simple, and your code will always fall into place.

Example of clear indentation:

#header { ... }
   #header h1 { ... }
   #header h2 { ... }
#content { ... }
   #content p { ... }
      #content p em { ... }
      #content p strong { ... }

Compressing Your Style-Sheet

It’s good practice to compress your CSS before deployment. It’s very important to keep in mind that Web browsers download style sheets in full. Of course, anything you do to reduce that inference will in good faith improve performance. If your writing style produces quite a bit of whitespace and/or comments, it may be in your best interest to compress your CSS before deployment.

The following is a small technique to keep our code intact but to compress it the same time. You’ll only need to add a few PHP lines at the very top of your CSS file and one final line at the very bottom. In a short description, here’s how it works: The user’s browser will request the stylesheet, then the server will read the lines located at the top and compress the file following our PHP code. The stylesheet will be compressed and outputted to the user’s browser.

The original codes and examples can be found here.

Concluding Our Styling Techniques

It’s vital to take advantage of as many techniques as possible in order for you not to hinder your skill set. I hope the techniques listed above, while a bit simple, have helped out. Being able to code in CSS is an incredible and gifted skill to have, but it is a skill which can be constantly refined over time. The faster and more disciplined you are with development side of design, the more time can be spent on trouble shooting and achieving the best possible design. Hopefully you’ll be able to incorporate some of these techniques into your style writing and it will make your life as a developer a bit smoother.

Horror seems to generates the most imaginative of posters. Have a look at the Saw posters, they are simple, but very creepy, certainly effective and they make you curious. Whereas the Cannibal Holocaust poster tells you exactly what you are going to get, gore, gore and lots of gore. Below you will see 29 amazing examples of the various types of horror movie posters.

Tales of Terror

Visit Source

Day of the Dead

Visit Source

Maniac

Visit Source

Chopping Mall

Visit Source

Beast of Blood

Visit Source

Evil Dead

Visit Source

30 Days of Night

Visit Source

Dead Alive

Visit Source

Dead Snow

Visit Source

Saw III

Visit Source

Apocalypse Now

Visit Source

Cannibal Holocaust

Visit Source

The Abandoned

Visit Source

Friday the 13th

Visit Source

Somethings Better Left Unseen

Visit Source

The Howling

Visit Source

Visceral

Visit Source

Hostel

Visit Source

Humpty Dumpty

Visit Source

Alphabet Killer

Visit Source

Flesh for Frankenstein

Visit Source

Saw

Visit Source

Snuff

Visit Source

30 Days of Night (2)

Visit Source

Happy Birthday To Me

Visit Source

House of the Dead

Visit Source

Skinwalkers

Visit Source

Autopsy

Visit Source

Nekromantic

Visit Source

By Paul Andrew (Speckyboy and speckyboy@twitter).

Setting Up a Style.php File

Creating a style.php is going to require a little bit more set-up than creating a regular CSS file. First, open up your root .htaccess file, and copy and paste this line into it:

AddType application/x-httpd-php .css 

(note: this may not be necessary for all servers, but it never hurts to be safe)

Now create a new file and name it style.php . At the top of your file, include this line of code(this MUST be the very first line of the document):

<?php Header ("Content-type: text/css");?> 

This ensures that the browser knows to parse this as a CSS file, not an HTML file.
You can now write CSS just like you would in a regular CSS file, and you can include PHP code the same way you would in a regular PHP file. Keep in mind that the PHP will be ‘writing’ the style sheet in the same manner that it writes HTML, so use the echo or print commands anytime you want to write something to the stylesheet.

Using Variables

One of the simplest and most useful features of using server-side scripting with CSS is the ability to use variables. Once you have a color palette for your site, you can save all of the color codes as variables, like so:

<?php
  $darkGray = “#333333”;
  $offWhite  =  “#F7F7F7”;
  $skyBlue   =  “#B9EBED “;
  $lightBrown = “#A65D29”;
  $darkBrown    =  “#704A2E “;
?>

Now, whenever you want to use one of these colors, you can call the variable, like so:

.contentBlock {background-color:<?=$darkBrown;?>; border: 2px solid <?=$lightBrown;?>;}

This has several advantages. First of all, if you ever need to change one of the colors, you can change it in one place, instead of several. This also makes writing code quicker and simpler, since you don’t have to constantly cut and paste hex codes. This also makes the file more readable, as it is easier to tell what color something is looking at $skyBlue instead of #B9EBED.

Generate Palettes With PHP

Now let’s try something a little trickier: creating a set of classes that cover a range of colors. We’ll take our dark brown and dark gray colors, and generate 10 classes, with each one containing a color that falls in between the two.
To begin, we will need to write two functions. One will convert a hex code into an array of RGB values, and the other will be able to convert an array of RGB values into a hex code.

Here the first function, which will handle both 3 digit and 6 digit hex codes:

function HexToRGB($hex){
  $hex = ereg_replace("#", "", $hex);
  $color = array();

 if(strlen($hex) == 3) {
  $color['red'] = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
  $color['green'] = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
  $color['blue'] = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1) );
 }
 else if(strlen($hex) == 6) {
  $color['red'] = hexdec(substr($hex, 0, 2));
  $color['green'] = hexdec(substr($hex, 2, 2));
  $color['blue'] = hexdec(substr($hex, 4, 2));
 }
 else{
  return false;
 }

  return $color;
}

And here is the second:

function RGBToHex($colorArray) {
  $hex = "#";
  $hex.= dechex($colorArray['red']);
  $hex.= dechex($colorArray['green']);
  $hex.= dechex($colorArray['blue']);
  return $hex;
}

These are what we call helper functions. These functions will be used in the next function we write, which will be a gradient creator. It will take three arguments: the hex code of the first and second colors, and the number of colors you want to find between them:

function GradientCreator($firstColor, $secondColor, $numOfColors){
  $firstRGB  = HexToRGB($firstColor);
  $secondRGB = HexToRGB($secondColor);

  //calculate the difference in each of the colors:
  $redDiff = ($firstRGB['red'] - $secondRGB['red'])/$numOfColors;
  $greenDiff = ($firstRGB['green'] - $secondRGB['green'])/$numOfColors;
  $blueDiff   = ($firstRGB['blue'] - $secondRGB['blue'])/$numOfColors;

  //iternate for the number of colors, create the hex codes in between:
  $output = array();
  for($i = 0; $i < $numOfColors; $i++){
    $redAdjust = $redDiff * $i ;
    $greenAdjust = $greenDiff * $i ;
    $blueAdjust   =  $blueDiff  * $i ;

    //build the new color in an RGB array format
    $newColor = array();
    $newColor['red'] = $firstRGB['red'] - $redAdjust;
    $newColor['green'] = $firstRGB['green'] - $greenAdjust;
    $newColor['blue']   = $firstRGB['blue'] - $blueAdjust;

    //add it to the output array
    $output[$i]  = RGBToHex($newColor);
  }
  return $output;
}

now we have an array of a range of colors we can use throughout our stylesheet. Here’s an example of how we can use them:

<?php $brownToGray  =  GradientCreator($darkBrown,$darkGray,10); ?>
.gradient0 {background-color:<?=$brownToGray[0];?>;}

you could even loop through the array to generate a bunch of classes quickly:

<?php
  foreach($brownToGray as $index => $color){
    echo “.gradient$index {background-color: $color;}\n”;
  }
?>

we would then have 10 classes we can use wherever. here’s what they would like if you applied one of each to li elements in a ul:

Get Styles From a Database

Another advantage of using PHP in your stylesheet is that you can store and retrieve values from a database. In this example, we will be using this for a theme system for user profiles. Let’s assume we have a database table called UserThemes with the Following variables:

UserID
MainColor
SecondaryColor
AccentColor.

When calling the stylesheet, pass the User_ID variable to it as a get variable, so your stylesheet link should look something like this:

<link rel='stylesheet' href='style.php?User_ID=<?=$User_ID;?>' type='text/css' media='screen' />

We can then query the database to get these variables when the page is loaded, and set variables appropriately:

<?php
  $query = “SELECT * FROM UserThemes WHERE User_ID = '{$_GET['User_ID']}'”;
  $result = mysql_query($query);
  while($row = mysql_fetch_assoc($result)){
    $MainColor = $row['MainColor'];
    $SecondaryColor = $row['SecondaryColor'];
    $AccentColor = $row['AccentColor'];
  }
?>

We can now use these variables in the stylesheet, and allow each user to have a unique look for their profile!

Other Uses

The list of things you can do by combining PHP and CSS is nearly endless. Some people have used dynamic style sheets to have random themes, or to have different themes for day and night, or for weekends and holidays. What other uses can you think of for combining PHP & CSS?