DevGrow http://devgrow.com Just another WordPress weblog Wed, 10 Mar 2010 05:30:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Google Apps Marketplace: The New Gold Rushhttp://devgrow.com/new-google-gold-rush/ http://devgrow.com/new-google-gold-rush/#comments Wed, 10 Mar 2010 05:14:42 +0000 Monji http://devgrow.com/?p=300 A new and exciting opportunity was announced today and it’s certainly worth sharing. Google has unveiled a new marketplace for Google Apps, appropriately named (you guessed it) the Google Apps Marketplace. There are more than 2 million businesses with over 25 million users currently using Google Apps, many of whom are willing to spend money for a useful app, as they’re already paying Google for using the base service.

What are Google Apps?

Want to use Gmail or Google Docs for your business, on your own domain? Google Apps allows you to do that, so you can use Gmail with your own domain or even manage your website with Google Sites. I’m using the standard/free edition for several of my domains, including this one.

Why is this a Great Opportunity?

Unlike the Android or iPhone app stores, your market for Google Apps will consist primarily of businesses, ranging from smaller startups to huge corporations. Instead of just targeting consumers, you now have the opportunity to create useful products for businesses (B2B). This is especially good news if you already have a Software as a Service (SaaS) application that is used by several businesses already.

Another plus point of the Google Apps Marketplace is that Google is only taking a 20% share of your revenue, less than the 30% of the Android market and iPhone app store. The biggest benefit, in my opinion, is that you’re able to charge a company on a per year and per user basis, generating recurring revenue from a single customer. Paired with the market you’re dealing with, this could make for a very profitable gig. Like the other app stores, there is an initial one-time fee of $99 that lets you push out an unlimited number of apps.

Marketplace Specifics

While Google Apps is a cloud-based service, you don’t have to use App Engine to run your product – it can be hosted anywhere. When a user installs your application, it is fully integrated into their Google Apps, appearing in the Google Apps Dashboard and in the universal Google Apps menu (up top). Authentication is handled with OpenId and OAuth is used to secure the data.

If you’re a web developer who has been looking for a new project to take on (and don’t have the time to learn Cocoa), this is probably the ideal time to look into the Google Apps Marketplace.

No related posts.

]]> http://devgrow.com/new-google-gold-rush/feed/ 0 Freelance Project Quote Estimatorhttp://devgrow.com/freelance-project-quote-estimator/ http://devgrow.com/freelance-project-quote-estimator/#comments Fri, 05 Mar 2010 03:55:20 +0000 Monji http://devgrow.com/?p=270 While playing around with JQuery UI’s slider widgets, I decided to throw together a quick freelance project estimator. This is not based on science or statistics, so use it with your own judgement. The ‘Client Information’ bits shouldn’t be taken too seriously either, I added that in to emphasize that the type of client can often dictate quotes too. By the way, I apologize but the first two sliders can be a little fidgety, likely the result of my poor scripting.

Disclaimer: This is not meant to be accurate, use it at your own risk!

No related posts.

]]> http://devgrow.com/freelance-project-quote-estimator/feed/ 0 35 Great Logo Designs You Can Buy Right Nowhttp://devgrow.com/35-great-logo-designs-you-can-buy-right-now/ http://devgrow.com/35-great-logo-designs-you-can-buy-right-now/#comments Mon, 01 Mar 2010 03:56:20 +0000 Monji http://devgrow.com/?p=189 I know I’m a little late, but I’ve recently discovered BrandStack, a brilliant website that allows designers to sell their brands, which are comprised of a logo and domain name. I’ve got my eyes on a couple of logos that I may scoop up for a new project, however I couldn’t help but notice the massive amount of talent showcased there.

Here are 35 praiseworthy designs that you can buy right now, some with domain names:

Conclusion

That wraps up the long list of some of the noteworthy logos for sale on BrandStack. A note about the last two – while their logos are pretty good, I added them to the list mainly for the great potential their domain names have. Also, kudos to LogoGuppy, who has the most logos on this list and an excellent portfolio! A big thanks to the designers themselves too for their hard work, best of luck selling these great brands!

If you have any experience with the whole buying process at BrandStack, I’d love to hear your thoughts, since I’m in the market for a logo myself.

No related posts.

]]> http://devgrow.com/35-great-logo-designs-you-can-buy-right-now/feed/ 8 Tools to Help You Focus and Increase Productivityhttp://devgrow.com/tools-to-help-you-focus-and-increase-productivity/ http://devgrow.com/tools-to-help-you-focus-and-increase-productivity/#comments Wed, 24 Feb 2010 06:06:25 +0000 Monji http://devgrow.com/?p=144 Let’s face it, we are all a little ADHD (some of us more than others). We take on more than we can humanly handle and like to push ourselves to the limit. While this great for things like sports or academia, it can lead to a lot of problems when dealing with web development and design.

Thankfully, several great people and companies have recognized this issue and have created tools to help us regain our focus and increase our productivity. Here are a few I recommend:

1. RescueTime (Windows, OS X)

RecueTimeIf you follow Hacker News you’re probably already familiar with this company/product. RecueTime is an incredible tool that helps you monitor what you spend your time on and lets you voluntarily block distracting websites for a set amount of time. You can also use it to track how much time you spend doing productive work too, so you can kill two birds with one product. I use this myself and I highly recommend it. It’s available for both Windows and Mac, so try it out.

2. Pomodoro Desktop & Technique (OS X)

The Pomodoro Technique involves the following five steps:

  1. Select a task
  2. Set a Pomodoro (timer) for 25 mins
  3. Work on task until timer rings, put check next to item on your list
  4. Take a 5 min break and repeat cycle
  5. Take a longer break after every 4 tasks

Pomodoro DesktopYou can find more information about this technique on the website. Pomodoro Desktop is an app for Mac OS X that allows you to add your tasks, keep track of time spent on them and notifies you when your timer runs out. It also has Twitter integration, which can automatically let your followers know you’ve started a task, completed it or are taking a break, complete with task name (optional of course).

Don’t have a Mac? There’s a Pomodoro Chrome extension called ChromoDoro, so check that out too.

3. Evernote (web, mobile, etc.)

EvernoteEvernote is another popular web app (with many mobile forms, including an iPhone app) that lets you capture your notes and tasks by multiple means, including taking a picture or leaving a voice memo, and then organizes them automatically. All your notes are stored online, so you can access them using the mobile apps or any computer with internet access.

4. Concentrate (OS X)

ConcentrateSimilar to RescueTime, Concentrate helps you focus by eliminating distractions. You can set tasks (ie Study) and assign various actions to it, from launching certain apps to quitting others, or even setting your chat status. When you’re ready to start the task, hit the “concentrate” button and all other distractions disappear.

5. Checkvist (web)

CheckvistAnother great web app that lets you make hierarchal task lists and share them with your coworkers. Working with others is a fast way to increase productivity, and using an app like Checkvist can help structure and organize the workflow between you and your coworkers. While I do like and recommend this app, you can achieve the same effect with Google docs or Etherpad.

6. Freedom (OS X)

FreedomDesperate times call for desperate measures, and Freedom is just that. This app that will completely disable your internet connection for a set time limit (anything less than 8 hours). Start the app and you’re asked how long you’d like to disable the internet for, and if you would like to block all web access or optionally allow the local network.

7. WorkRave (Windows, Linux)

WorkraveI’m not sure how well this program is being maintained (last update was 120+ days ago) but nonetheless it’s very useful. While it can be beneficial to use programs like RescueTime and Concentrate to increase productivity, it is just as important to take breaks every now and then to regain your energy and focus. This is where WorkRave comes in, reminding you periodically to take breaks and even suggests exercises. You can also set a daily work limit, after which WorkRave will rightfully tell you to get off your computer and do something else!

8. Caffeine (OS X)

CaffeineThis is an extremely simple but useful app – click the menu icon once to stop your Mac from going to sleep, starting your screensaver or decrease screen brightness, or click it again to restore normal operation. This is useful for those times you’re reading something long, or watching a (productive) movie.

9. Spirited Away (OS X)

Spirited AwayThis app constantly checks each running application and automatically hides those that are not being used after a certain amount of time, allowing you to completely focus on whatever you are spending your time on. Similar apps in this category:

  • Think – Allows you to focus on a single app by dimming background around it
  • Isolator – Nearly the same as Think, however this app makes everything behind your current app blurry

10. TimeOut (OS X)

TimeOutJust like WorkRave, TimeOut tells you to take a break from your work and can optionally prevent you from skipping it by blocking access to anything else on the screen until the break runs out. Outside of the normal app settings where you can adjust break times and restrictions, TimeOut also supports some major customizations by using AppleScripts, Automator workflows and custom applications before and after breaks (see TimeOut Extras).

Conclusion

Remember, taking breaks frequently can also help increase your overall productivity and help you regain focus. Ultimately your productivity is in your hands (and mind), so while these apps can help the process it is up to you to carry out the changes.

Did I miss an app or tool that you use to increase productivity? Please share it in the comments below and I will add it to the list.

No related posts.

]]> http://devgrow.com/tools-to-help-you-focus-and-increase-productivity/feed/ 0 Best Bet CSS Practiceshttp://devgrow.com/best-bet-css-practices/ http://devgrow.com/best-bet-css-practices/#comments Sat, 20 Feb 2010 00:42:30 +0000 Monji http://devgrow.com/?p=101 Best Bet CSS PracticesCSS is powerful in styling HTML documents and making things look the way you want. When writing CSS, there are a few factors to consider that can impact the way you write your code and structure your files. The following are some best bet practices to clean, effective styling with CSS.

Organizing Your Files

Your file structure can largely depend on the number of documents you will be dealing with and how well you want to organize them.  For a small site, having a single style.css file in the root directory can suffice.  For a larger site that requires complex styling, especially blogs such as Jason Santa Maria and Dustin Curtis, it can be very helpful to split up your CSS into multiple files.  This can help increase load times by allowing you to load only the CSS that you will use on a single page but make life easier for you, giving you the ability to quickly find relevant styles and easily make changes.

Pick a directory and file structure you’re comfortable with, and one that gives you options.  My preferred structure is:

  • css
    • reset.css
    • grid.css
    • layout.css
    • section-name.css
  • images
  • js
  • index.php
  • header.php
  • etc..

There are obviously many ways to go about structuring your files, just try to maintain consistency with whichever format do end up using.

The Reset

Resetting your CSS should be the first thing you do when styling your website.  Doing this puts you on a level playing field with all browsers, removing all unnecessary margins, padding and default styling.  You can reset the common styles yourself or save time by using an existing reset file, such as:

A best bet is to start with one of the existing CSS resets and add your own base styles to it over time, creating a simple framework to build your styles on.

Formatting Your Code

Like with any other form of coding, semantics and proper formatting can go a long way in providing organization and increased readability.  This is especially important with CSS, where you will often find yourself returning to your code to make small adjustments and corrections as you tweak your design.  A great resource that lists most of the many ways to format CSS can be found at CSSTricks.com.  I found myself agreeing with the author, Chris Coyer, in using single-line format with indenting for longer CSS stylesheets and more descriptive, multi-line format with indenting for shorter stylesheets.

An example of the single-line format with indenting:

/*** @Content ***/
#content { width: 900px; margin: 0 auto; border: 2px solid #ccc; }
	#content ul { padding: 0 0 0 20px; list-style-type: square; }
		#content ul li { padding: 0 0 0 30px; }
	#content strong { color: #ff0000; background: #fff; }
	#content em { font-weight: bold; color: #aaa; }
		#content em span { color: #444; }

An example of the same styles in multi-line format with indenting:

/*** @Content ***/
#content {
	width: 900px;
	margin: 0 auto;
	border: 2px solid #ccc;
	}
	#content ul {
		padding: 0 0 0 20px;
		list-style-type: square;
		}
		#content ul li {
			padding: 0 0 0 30px;
			}
	#content strong {
		color: #ff0000;
		background: #fff;
		}
	#content em {
		font-weight: bold;
		color: #aaa;
		}
		#content em span {
			color: #444;
			}

As you can see, while the multi-line format is easier to read, it does take up a lot more space than the alternative.

Commenting

This one is a no-brainer for most developers, however many designers seem to overlook this simple but useful advice. Commenting frequently helps keep your code organized and will save you time when you inevitably revisit it, allowing you to easily find your way around. A best bet practice is to take this advice to the next level, using a numerical hierarchy and a simple table of contents for your styles:

/************************
  Table of Contents:
  1. Reset
  2. Layout Structuring
      2.1. Body
      2.2. Sidebar
      2.3. Footer
  3. Widgets
      3.1. Flickr Widget
************************/

/*** @ 1. Reset ***/

/*** @ 2. Layout Structuring ***/

/*** @ etc. ***/

Loading Your Styles

The CSS styles you write can be stored in an individual file or embedded in the HTML itself.  The best bet practice is certainly to load an external stylesheet that has all of your styles within it, allowing you to reuse the same stylesheet in multiple documents.  This reduces code redundancy and allows you to change a style and see it reflected in all documents that load that particular stylesheet.

You can load a single stylesheet by linking to the file in your HTML header:

You can also import multiple stylesheets at once too:

1
2
3
4

<style type="text/css">
	@import url(/css/reset.css);
	@import url(/css/layout.css);
</style>

A best bet in loading multiple CSS files is to use a PHP or JavaScript compressor to pack them into one file. This allows you to maintain your internal organization by having multiple files while reducing HTTP requests for the visitor, who probably doesn’t care too much about how well organized your code is and would rather have a faster website. Some resources on how to compress your CSS code:

Conclusion

CSS is a major part of making your website look the way you want, taking the time to make sure your code is well organized and follows the best bet practices can make life easier for you in the long run. Keep your code clean and organized, comment frequently and compress your files to keep not only your visitors happy but your whole design process painless and dare I say… fun!

No related posts.

]]> http://devgrow.com/best-bet-css-practices/feed/ 10 From Developer to Designer: 5 Steps to Successful Designhttp://devgrow.com/from-developer-to-designer-5-steps-to-successful-design/ http://devgrow.com/from-developer-to-designer-5-steps-to-successful-design/#comments Tue, 16 Feb 2010 11:22:28 +0000 Monji http://devgrow.com/?p=50 5 Steps to Successful DesignOne of the pitfalls many developers face is their inability to make a great design for the product they code, either for lack of time, ability or interest.  While design certainly isn’t everything, it is one of the bigger factors that can help make or break your business.  To be a successful, self-reliant and cost-effective developer, having a basic understanding of design will be a crucial asset.

“I’m not artistic!”

This is the biggest excuse I hear from my programmer colleagues.  As much as we’d like to think so, being artistic is not an intrinsic ability, it is a learned skill that people must develop with a lot of time and diligence.  While it may be easier to tell yourself you’re not artistic and offset the responsibility to a contractor or friend, understanding what looks good, why it looks good and how to apply that knowledge has multiple benefits:

  • Quality Control – Screen the work you receive from contractors
  • User Experience – As the developer of the product, you have an understanding of why people will want to use it – applying this logic to your design will create a great user experience
  • Cost-Effectiveness – Even if you end up outsourcing the bulk of your design work, use your design skills to create your marketing material (banner ads), letterheads and business cards
  • Self-Reliance – While it is absolutely necessary to depend on others at one point or another, being able to develop and design your own product just feels good and allows you to maintain full control

Convinced?  Achieving great design can be just as rewarding as programming, and just as beneficial for your product.  Follow these steps and learn how to create successful design:

1. Draw in Your Spare Time

Take out a blank sheet of paper, pick up a pencil or pen, and draw the first still object you lay your eyes on (or anything else you’d like).  While it’s true you don’t have to be able to draw to make a great looking website, drawing is the single fastest way to improve your overall artistic abilities with relative ease.  What you draw and how you well you draw doesn’t matter yet – your goal is to learn the art of observation and imitation.  Web design often relies on taking bits and pieces of what we see around the web and applying it to something with your own style.  Play with shading, realism, cartoons or whatever keeps your interest level high – remember the key is practice and persistence.

2. Absorb Inspiration

Find great design and learn from it.  A good place to start is an established CSS gallery or design blog, such as CSS Remix and Smashing Magazine.  Spend time looking through multiple sites and resources, take notes (mental or real) and try to find trends and similarities between the sites.  To be featured on a high profile site they must be doing something right, so try to learn as much as you can from their examples.  Your goal in this step is to understand what information the site is trying to deliver to you and what artistic and design trends they use to do so.

3. Learn From Tutorials

The Tuts+ network is a great resource and provides tutorials for everything from Photoshop to After Effects.  Take something you found to be very cool in one of the inspirational sites you’ve previously encountered and find a tutorial for making it (or something similar).  This will not only allow you to apply that technique to your own project but also teach you a multitude of other skills you’ll use in getting to the end result.

4. Practice What You Learn

Take a Photoshop tutorial and follow along with it in Photoshop, or even try to improve on the end result.  Find an incredible looking site and try to rebuild it in Photoshop, just to see if you can.  All good developers have one thing in common: experience, and this is what you’re trying to achieve with by practicing these design skills.  Start small by designing a button or logo, then move on to a complete mockup of a fake product (or your real one if you’d like).  Just like in programming you will undoubtedly go through multiple iterations of your work, hopefully improving on each one.

5. Apply Logic

Just like you would in programming, use your smarts when designing a website.  Keep in your mind the end goals, who your website is aimed at (target audience) and how to portray what you have to say in such a way that you engage your audience.  Web design can be fun and colorful but it can also be smart and targeted, and your goal is the latter of the two.

Conclusion

The point of this article is not for you to stop outsourcing your design work, or drop your designer cofounder in favor of doing it yourself.  Rather it is to help you better understand that you are capable and if you have time, take small steps to make yourself a better designer.  Follow the above steps, find more inspirational resources and keep practicing what you learn and you’ll be on your way to better design in no time.  Also, subscribe to our feed for more articles, resources and tutorials posted every week!

No related posts.

]]> http://devgrow.com/from-developer-to-designer-5-steps-to-successful-design/feed/ 0 The Rebirthhttp://devgrow.com/the-rebirth/ http://devgrow.com/the-rebirth/#comments Mon, 15 Feb 2010 03:57:06 +0000 Monji http://localhost/devgrow/?p=1 Welcome to the all new DevGrow.  What first started out as a experimental social network for entrepreneurs and investors and ended up as a blog for the same audience, we are back to focus on what we know best – the design, development and growth of your website. Whether it’s a new blog about the iPad or the next Farmville, our goal is to help you better understand and appreciate the web by providing resources on:

  • Graphic design
  • HTML and CSS tutorials
  • Web design and creative inspiration
  • Icon packs and other freebies
  • Tips on freelancing and creative direction

The goal will be to focus on quality rather than quantity, so expect to see a few good posts a week rather than a continuous barrage of sub-par material.  I will try my best to maintain consistency, however I rely on constant feedback in the comments from you guys to keep the quality high.  So bookmark the site, subscribe to the RSS feed and join me in this exploration of all things design and creativity.

No related posts.

]]> http://devgrow.com/the-rebirth/feed/ 0