How to avoid screwing up a software project

Run Programmer, Run

When developing a new application, mostly when it's being done personally and alone, can sometimes be a very complicated process. you'll need to handle a whole bunch of other stuff than just coding (marketing, server setups even investors hunt) and it can sometimes lead you to a software neglection.
Don't let it happen, run/compile your application every few days, keep it living in your head.

Sometimes you'll start work on some big shiny feature (e.g. adding a kewl Google maps integration), but stop because you hit a technical bump ("What? no maps for Israel?"), or don’t have the time to finish it ("Need to finish this Company profile by tomorrow") and The source code is left in unfinished state.
You can’t do anything with any of your code until this is fixed, and the longer you leave it, the more you’ll forget and the harder it will be to get started again.
This is called a "broken build", and is a big landmine because it impacts other peoples ability to work (And your ability to continue as well).

TIP #1: You started something? finish it before moving on to something else.
TIP #2: Stay in touch with your software.

"I Sure could use a time machine right now...."

Know these times when you wished you had a time machine? well, it can happen in the process of developing and application too.
People make mistakes, Always. When people make mistakes in the kitchen, the food comes out really bad and you call the local pizza delivery services and solve the problem. When a programmer makes a mistake or is doing a system wide change... you'll need a ready to use Plan B around.
Source Control is the software world equivalent of a time machine, you can go back to a certain version of your application and rollback any changes made to your code and application, and by that, maybe reversing a very serious threat to your code.
If you haven’t taken the plunge with revision control yet, I highly recommend looking at some of the free SVN or GIT hosting services post.

TIP #3: Save yourself, use a source control service.

"Look at this cooooooolll JQuery accordation!"

Features are fun, Javascript magic is amazing, but you'll need to focus on what's really important
Focusing on things like validation, cool eye candies or extra functions is a great way to build up a large complex code base that doesn’t do anything useful yet.
Focus on the core functionality of your software first — your main features should be complete before you start thinking about WOW stuff.
Wasting trying to think of the perfect name, designing a logo or an icon, choosing the perfect open-source license and making a website won’t get you any closer to having a working application.

TIP #4: Core functionality first, fun - later.

Throw your code away and start from scratch - The Netscape mistake

As Netscape famously discovered a few years ago, throwing away existing code to start afresh is almost never a good idea. Resist the urge and make a series of small, manageable code re-factoring instead.

TIP #5: Never sink your own boat, pickup a bucket and start pulling out water

Pull yourself together before you sit down

"mmm, Rails? or maybe Adobe Air? or maybe... maybe we'll do the cool gears thing?"
Before doing anything ask yourself a simple question - "What are you actually trying to achieve?", Spend some time with a pen and some paper coming up with a really clear vision of what you’re trying to create — e.g. screen mock-ups, basic core functionality (yes, again) and if there is a process you are trying to imitate, go through it too.

TIP #6:  If you don’t know what you’re doing from the beginning, you’ll have no chance of finishing it.

Get the right men for the job

You maybe a coding genius, a super-programmer (Mike it's you) or other superior programming entity. but unless you are a really something no one had ever seen before, you don't know anything there is to know about every aspect of developing a new software and a products.
If you can't tell the difference between red and green, get a designer to work for you. if you don't have a clue in CSS or DB infrastructure, get someone who know this art to do it.

TIP #7: Do what you know, not what you don't know.

Marketing is Important, but when it's time

Tell people about your product when you have something to show, open a product twitter account when you have something to say, don't rush yourself forward and try to stick the product or create a hype when you can't back it up by at least screenshots or an actual product on the best scenario.

TIP #8: Invite people in when you have something to offer them to eat.

The difference between a lie and a promise

Users don't mind waiting for features, they mind finding out you promised them something and didn't deliver.
Stand up to your words, and update your users about development progress and new features on the way, as long as you really intend to do it and not just saying to make them download or register.

TIP #9: Users are like your mother, lie to them, and they'll know.

CSS Frameworks Tutorials and getting started guides

First thing, it helps.
Exactly the same as in Server side languages and client side languages, frameworks are a great improvement (in most cases) to a regular off the board development.
There are a lot of CSS frameworks these days, Noupe guide to CSS framework gathers the best of the guides and tutorials for each of the major frameworks.
I personally tried to use several of them and i guess the 960 CSS framework proven to be the easiest to handle (for me, and i usually don't do CSS).

Noupe: 15+ Incredibly Useful Mac Apps For Freelance Web Designers

Noupe: 15+ Incredibly Useful Mac Apps For Freelance Web Designers . <== This is a great blog, don't dare not to subscribe to their RSS Feed.

1. Espresso

---

Extremely powerful web development tool, created by the minds behind CSSEdit. Providing a powerful editing, sleek projects, live preview, real publishing and synchronization tools.
Espresso features an immensely powerful rule-based syntax engine, CoreSyntax, that transforms your text documents into semantic structure. Espresso has an extensible Navigator that’s best compared to the CSSEdit styles list.

2. CSSEdit

---

CSSEdit’s unique focus is on style sheets, it offers a wide range of features for any level of expertise. Starting out? Selector Builder, advanced visual editors, Live Preview, intelligent source environment and a powerful X-Ray web page inspector for an unbeatable CSS debugging suite.

3. Pixelmator

---

Pixelmator, the beautifully designed, easy-to-use, fast and powerful image editor for Mac OS X has everything you need to create, edit and enhance your images. Pixelmator is a layer-based image editor. You can quickly create layers from your photos, other pictures, from selections or even your iSight. Pixelmator can add a layer to your composition directly from your Mac’s little camera. With Pixelmator’s powerful, pixel-accurate collection of selection tools you can quickly and easily select any part of your images to edit and apply special effects to portions of your pictures.

4. Coda

---

Panic Coda is a great all-in-one Web development environment tool, keeping many of your commonly used tools in separate tabs. Tools include: text-editor, css editor, file transfer, svn, terminal & smart Spelling. All of the usual languages are supported and styled appropriately including: CSS, HTML, Javascript, Java, Perl, PHP, Python, Ruby, SQL, XML, and straight text.

5. Lineform

---

Lineform is an ideal Mac app for vector art, diagrams and illustrations. Lineform has all of the most popular tools, including everything from freeform gradients to compositing effects, enabling you to create the designs you want without getting in your way with superfluous “features” you don’t need.

6. Fontcase

---

Fontcase is a font management application that provides an elegant and powerful workflow to help you organise the fonts you have installed on your system. Designed to be an iTunes for your fonts, Fontcase has a powerful tagging system, which is designed to let you control your fonts like you control your music.

7. Deep- Image Search

---

Deep calculates the range of colors used in each of your images by analyzing the pixels and calculating the most popular colors. This is what makes the palettes in Deep powerful, you can find images that have similar colors, which is great when you are looking for the perfect picture to go on your web site. In fact, just drag any image on to Deep and it will find and rank all the images on your computer that are similar.

8. Cyberduck

---

Cyberduck is an open source FTP, SFTP, WebDAV, Mosso Cloud Files and Amazon S3 browser for the Mac. It features an easy to use interface with quickly accessible bookmarks.

9. Flow

---

Flow is another file transfer coming in style. Flow brings the best of the Mac to your server’s files and folders. Put simply, Flow makes working remotely every bit as intuitive and natural as working locally with the Finder. With Flow, you can edit files directly on your server, connect to (FTP, SFTP, Amazon S3, WebDAV, and MobileMe iDisk servers), Quickly Upload Without UI and many other features.

10. Sequel Pro

---

Sequel Pro is a Mac OS X MySQL Database Management app. Sequel Pro gives you direct access to your MySQL databases on local and remote servers with support for importing and exporting data from popular files including SQL, CSV and XML.

11. Things

---

Task management has never been this easy. Organize your to-dos with Projects and Areas of Responsibility. Features include: A smart Today list automatically gathers all you need to look at, Repeating To Dos, Every list can easily be filtered and sorted by due date, iPhone Sync and many other features.

12. xscope

---

xScope is a powerful set of tools that are ideal for measuring, aligning and inspecting on-screen graphics and layouts. Quickly available via the Mac OS X menu bar, xScope’s flexible tools float above desktop windows and UI elements making measuring a breeze.

13. KeyCue

---

KeyCue gives you an instant overview of the overall functionality of any application, plus lets you automatically start working more efficiently by making use of menu shortcuts.

14. TextExpander

---

TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings, code snippets and images.

15. OnTheJob

---

On The Job has a lot of power under the hood but maintains it’s reputation as the easiest to use time and expense tracking solution available for Mac OS X. On The Job offers flexible invoice creation. Create invoices for specific date ranges, covering a single job, or spanning multiple jobs.

Other Mac Apps you will find interesting

- TextMate

- Billings

- Littlesnapper

- MAMP

- Inkscape

- Picturesque

- Layers

UML for Rails applications

UML is a Graphical language for visualizing, specifying and constructing the artifacts of a software-intensive system. The Unified Modeling Language offers a standard way to write a system's blueprints, including conceptual components such as business processes and system functions as well as concrete things such as programming language statements, database schemas, and reusable software components.[1] UML combines the best practice from data modeling concepts such as entity relationship diagrams, business modeling (work flow), object modeling and component modeling. It can be used with all processes, throughout the software development life cycle, and across different implementation technologies.
As the strategic value of software increases for many companies, the industry looks for techniques to automate the production of software and to improve quality and reduce cost and time-to-market.
These techniques include component technology, visual programming, patterns and frameworks. Businesses also seek techniques to manage the complexity of systems as they increase in scope and scale. In particular, they recognize the need to solve recurring architectural problems, such as physical distribution, concurrency, replication, security, load balancing and fault tolerance. Additionally, the development for the World Wide Web, while making some things simpler, has exacerbated these architectural problems. The Unified Modeling Language (UML) was designed to respond to these needs and to supply the programmers and the project managers with a visual application state and layout.
There isn't a clear why to implement the usage of UML for rails development, but here are the tools i did find.

• RailsRoad is a RailRoad is a class diagrams generator for Ruby on Rails applications. It's a Ruby script that loads the application classes and analyzes its properties (attributes, methods) and relationships (inheritance, model associations like has_many, etc.) The output is a graph description in the DOT language, suitable to be handled with tools like Graphviz. Last tested on old rails versions!
• A visual paradigm plugin for generating ruby (yap, not rails)
• ruby-uml, couldn't find any documentations.
  
• The generate_from_uml plugin does the oppsite and enerates rails models from a UML schema, i didn't see how advanced relations are handled though (:has_many :through for example)

Web Base SQL schema design

This amazing online SQL design (ERD) tool called wwwsqldesigner, is a great solution for those of us who get too troubled by designing simple apps database layouts. (NOTE: you should always hire a professional DBA)

Checkout the Homepage on GoogleCode, and Live demo.

CSS Sprites: onilne sprite generator

The CSS sprites technique is basically a technique that reduces the CSS requests when dealing with background images.
Example: Lets say you have 2 selectors in your CSS,

div#first
{
  background: url(first_bg.png);
}  

div#second
{
  background: url(second_bg.png);
}

when loading your CSS file will preform 2 requests, one for each image you specified as background, so when dealing with a complete design, you are probably talking about 40-50+ image requests as such.

CSS sprites solves this problem by loading only one image, that contains all the images you will use on your site within, and displaying the correct image by playing with a combination of a background offset (background-position CSS attribute) and the size of the element.
This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.
Examples and full explanation can be found here at the CSS Tricks.com - CSS Sprites: HowTo or here at the List Apart: Image Slicing's kiss of death article.

Today, i found a Sprite image generator that actually generates this Sprite image file from a zip file you upload and containing all the images, and produces the image as said before, but also the output CSS statements.
very useful.

All Browsers Online Preview

Great tool, shows you how your website looks in many browsers and OS's, including screen shots.
Visit at browsershots.org

An alternative to MochaUI: a JQuery based virtual desktop

I am personally using mochaUI is my current projects, and it was one of the main reasons a started working with MooTools at all, but this alternative to a web based desktop implementation is also something to pay attention too.
Although MochaUI is far more feature-packed, i think that this basic JQuery implementaion can be a good start for starting off a new web based desktop application (Add some plugins, and ding! ready).

Which fonts are the best for web usage?

A great article from sitepoint, about 8 definitive web font stacks for a better and cleaner web typography .

Printer Friendly Pages

CSS is a great new tool for web designers. Now it is more widely supported, and browser-makers are sticking to the
W3C standards, we can begin to explore the possibilities it has offered us since the 90s but that we could not make
use of.
CSS allows you to separate your design from your markup, making maintenance infinitely easier, and your site more
likely to work in different devices, both of which are definite pluses. It also, however, allows you to tell a page to
display a different way depending upon what device is being used to render it.
This is achieved using the "media" attribute of the "<link>" or "<style>" tags, like so:
There are several media types available to you - all, aural, braille, handheld, print, projection, screen, tty, tv - and a
list of available media types with more detail is available from W3C (where you can find out more about media
groups, as well).
With such a range of options, you can, if you like, create one HTML document that will display exactly as you like
depending entirely upon which device is being used to view it. You can hide large images from PDAs, you can specify
seperate font styling for overhead projectors - you can write your site so that it works well with the technology at the <link media="screen" href="style.css" type="text/css">
<style media="screen" type="text/css">
user's disposal. And one very useful side effect of this is that you can specify an entire print style without the need
for copies of every page of your content, like the following, that will use the "normal.css" style sheet for screens, and
the "printer.css" style sheet when printing.

 <link media="screen" href="normal.css" type="text/css"> 
 <link media="print" href="printer.css" type="text/css">

For print styling, there are a lot of factors to consider. Are many users going to want to print out your header? No.
But do you want your logo on the page? Yes. Is the navigation worth printing? No. Each item on a web page serves a
purpose, and on paper, that may not be worth much.
It is best, then, to start at the beginning. With an unstyled HTML document. Pick a page to start working on, and
remove all styles from it. With an unformatted page in front of you, it should be pretty easy to see what needs styling
and how, but don't rush in. There's a lot to think about.

FONTS
Fonts are very different on the web to print. Sans-serif fonts are, allegedly, the best to use on the web. Serif fonts
are, apparently, better on paper. So first things first, set your font to a serif font you like (personally, I like Georgia
for Windows). As with picking all fonts, make sure you provide alternatives for those without the first-choice font.
Font sizing is a bit different on paper too. It's usually best just to leave this to the default, but if you want to specify a
font, make sure you run plenty of tests to make sure it's easily legible.

* { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 12pt; 
} 

LINKS
Links are not going to be a lot of use on paper, by their very nature. But that does not make them useless.

a { 
    color:#000000; 
    text-decoration: underline; 
} 
 
a:after { 
    content: " ( "attr(href)" )";
}

The above, if added to a printer style sheet, will make all links black and underlined, and add the address of the link
in brackets afterwards, meaning that if a user did want to visit any site linked to from that page at a later date, they
can.

SPACING
In print, margins and spacings are as important as with the web. There is no harm in adding in a little space
between words and lines, and a decent gap around the edges, if it will make a print-version easier to read.

HIDE USELESS STUFF
You can hide elements in this style sheet easily enough, using display none. This will save some space on the paper,
and reduce useless junk on the page, something the user will be very grateful for. Elements worth hiding are usually
form elements, some images, marquees, and flash content. If you are unsure, print the page and then work through
that page deciding what is useful and what is not.

body { 
    padding: 10%; 
    line-height: 1.2; 
    word-spacing: 1px; 
} 

COLORS
Print colors will show up very differently to screen colors, especially as a high proportion still have black and
white printers. Even those who don't will be grateful to you if you keep the proportion of color to a minimum,
simply because of the expense.
Highlight and emphasize things using italics, underlining, boldness and size in your print style sheet. Remove all references to colors where you can, save to set colors to black.

PAGE ADDRESS
You may want to add the address of the page itself to the page, and hide it, except when the page is printed, so that
the user can return to your page later if they wish.

TELL THE USER
A user may see a page without a "printer friendly" link and print anyway, but they may be put off. Try and add a note
to your page explaining that the page they are now viewing is printer friendly, and encouraging them to print it.

Top 10 Design mistakes on the web

a great article about Do's and Don'ts on web design