1. Google Docs – link

The Google document suite is just irreplaceable in our office, from sharing documents quickly and efficiently to editing them at the same time. This tool single handedly replaced Microsoft Office overnight for us, and besides the financial savings, it yields many other benefits that my company couldn’t live without.

2. Google Reader – link

The web is changing so fast, in the industry of web development there are new and important news every single day and you don’t want to be out of the loop. When a blog is posted and you are not subscribed to its RSS does that blog article still help you… no it doesn’t. So if you are not using RSS yet go ahead start, it will allow you to quickly skim through all the latest in any industry you want. Just go to your favorite websites and find their little RSS link. Google reader is honestly the best RSS reader by far, it allows you to keep track of everything, share with friends, and it just works.

3. Freedcamp – link

Project Management is an essential part of any business, keeping track of what’s happening and keeping everyone informed is a must. Freedcamp offers all of that for free in a beautiful package that anyone can start using today.

4. Wordpress – link

Whether you want to keep your customers informed or you want to make a simple website for your product with WordPress you can be up and running in hours (for beginners) or minutes (for experts). It has a theme/plugin that is right for you to help you do anything you may want to do!

5. Pandora – link

I know people may complain about adding a music streaming service in this list, but I can’t lie, I use Pandora 24/7 in the office and in my car and at home. It makes it easier to work, it makes everyone else happy… it’s a win win!

6. Alexa – link

There is no feeling like that of waking up and seeing that your Alexa world ranking dropped 10k overnight. Alexa does a terrific job of monitoring the internet and keeping records of which websites are doing good and which are not. It’s especially important for you as a web user or possibly a site owner to check your Alexa ranking once in a while.

7. WaveAccounting – link

WaveAccount is a beautiful FreshBooks replacement that like Freedcamp is absolutely free and awesome. WaveAccount will help you manage all those annoying things that accountants usually have to do for a bunch of money. It’s an amazing application, and its price tag is along enough to make you check it out right now.

8. Google Analytics – link

Knowing your audience is pretty much the first advice you will ever get from anyone in the Business industry. I have read countless books that start with some variation of “Know your audience”. With google analytics you can do just that by tracking the visitors of your website and seeing how your traffic is doing.

9. Beanstalkapp – link

You may have never heard of SVN, GIT, or Mercurial… that’s okay. What all of these Versioning systems allow you to do is keep a complete back up of your code/designs and so forth. You can see every step that was taking in modifying the Code and so forth. I promise you once in a while this is a Life Saver! Or if you just want to know who to blame for something that’s wrong with the code.

10. Gmail – link

The ultimate business user tool since 2005 (or at least that’s when i joined). Emailing has never been so powerful, fast, and free! We have thrown out Outlook a long time ago now, and haven’t missed it since.

We hope this list has been informative and helpful! Feel free to post comments with the applications you simply can’t live without!

Thanks

So without further ado here is my little trick that will automatically work for any situation!

$(document).ready(function(){
	$("input[type=text]:first").focus();
});

Pretty nifty little “plugin”. I’m sure you guys can use this in all kinds of situations!

Enjoy!

This year I have to say has really been the year to see progress in the field. Why is that, well because whether we like it or not everything is moving to the web. Of course the biggest reason for that is Google and their “It has to work in the browser” attitude. I was recently talking to a couple employees in google and they have confirmed my speculations that google is working hard to make everything play nice in the browser. So what does this mean? Well it means that HTML5 is now, even though we have to use all these Fallbacks for Internet Explorer we are still using the Video tag, and the Audio tag and all that good jazz. Of course all of this will be reflected in the upcoming release of 52framework which really supports it all. Another interesting observation is the drag and drop education our users have received. A few years ago we tried a drag and drop shopping cart and we managed to confuse the hell out of our users, but now they are more understanding of the concept. The upcoming release of the Enavu Networks free project management system uses a very good amount of drag and drop for its To-Do’s application. Why is drag and drop so important for the web, well it’s simple, we have been using dragging and dropping on our desktop for decades and now it’s finally making its way into our browser.

Other interesting developments in the web is the Virtual Desktop. I know I am a little biased on the subject because I have worked for AlwaysOnPC.com who actually offer your own virtual linux box that is accessible with every mobile device and browser. But besides my bias I just got an iPad and guess what, I keep accessing my iMac and MacBookPro with it. I also access my computer at work (dell something) with my iMac and use both screens on one window, it’s nice. Personally I really find this to be a huge move towards the real virtual desktop. With googles notebook that has no HardDrive the ability to access a computer equipped with everything you need is more and more important. So keep an eye for computers with less and less… and virtual solutions with more and more!

Have yourself a great 2011, by being in the Web Development Industry you are in the real center of things.

Sincerely,
Angel Grablev
(enavu president)

As developers, we’re often stuck in the middle deciding, which application to make, and often, what platform. Sometimes developers in the industry sometimes doesn’t have a choice, but to make the same application for different platforms. Often, companies hire different breed of programmers, such as iPhone developers, Android developers, Blackberry developers, etc.. but can we ask ourselves, is there a better way?

As a web developer, I could not help but to be intrigued by jQuery mobile.

“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

According to jQuery mobile, they’re building something grand here. With evolution of HTML5, powerful javascript framework such as jQuery, and smaller learning curve, there is a great potential with such framework.

1. Cross Platform for A-Grade phones

jQuery Mobile is still in alpha phase. Currently, only a handful of the A-Grade phones support it. However, the development has been steady, and they have handful more features coming out with the next release, as well as more support for others.

The question now becomes, should we support older phones? Unlike old computers, people carry phones around all the time. Phones wear and tear over time, such as battery life and etc. With mobile providers offering free phones upon activation and re-activation, we know for certain that people will continue to get better phones over time.  Why support it, when we know they will be gone in few years?

2. Customizable interface via HTML and CSS

The advantages of designing interface through html/css has many advantages. It’s not just html, we’re talking html5. with proper rounded corners and box shadows, your app will look amazing in phones with html5 support.

The customizable interface made by the jQuery mobile team is also amazing. From list views to buttons, they are easily customizable, themable, and user friendly.

3. jQuery mobile makes almost everything possible

If you are a jQuery programmer, you should know that almost everything is possible to do with just jQuery and a web browser. Inside jQuery mobile, there are events which makes development a lot easier. jQuery mobile also supports static header/footer navigations not found in Blackberry Widgets or Blackberry Java development, which makes it more appealing to Blackberry developers. Did I mention, everything is 100% customizable?

4. PhoneGap support

PhoneGap makes things possible so that apps developed in jQuery Mobile can be used as offline apps, and they are now being accepted in iPhone App store.

“PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.”

PhoneGap itself is pretty new, and it’s steadily evolving. Pretty soon, they will support better functionality for each individual OS, and with jQuery Mobile, it will be feasible to develop cross platform applications in the near future.

Closing Remarks

Though there are many positives to jQuery mobile, there are still few negatives. It’s still premature, not ready for production yet. They are to release version 1 sometime in January of 2011, and we’re hoping to see where this goes.

My Designer Shades Have Cookie Jars

(Mock Design Slice HTML CSS JavaScript/JQuery)

Okay the acronym MDSHCJ might be hard to remember, but My Designer Shades Have Cookie Jars is pretty darn catchy. As you can see in the title this stands for Mock Design Slice HTML CSS and JavaScript/JQuery. Let’s get started, I will go over each part of this development process so you can get an idea of how it all works and how it can help you make websites faster.

Mock Up

Mocking up, and planning a website is an important part of the creation of any kind of websites. Whether you are going to work with your client to come up with some rough sketches, or you are creating your own website. You need to sit down and figure out exactly what you want on the website. Whenever I am talking with designers who haven’t done this often I ask them to think about what the website does, what you are trying to get across, and what is the overall goal. If you can come up with a list of design elements and goals for the website creating a mock up will become extremely easy.

Start with understanding who your audience is, how often do they browse the internet, what is their skill level, what kind of website are they looking for. Then go into trying to figure out the main purposes of their visit, for example if it’s a store website the main purpose for them being there is to purchase items and pay for them. Knowing this information helps you understand what you need to make stand out and what should be placed where.

Design

Once you have created your Mock Up you are ready to move onto designing the website. Whether you use Photoshop, Fireworks, or Paint you need to start thinking about things like colors and patterns you want to use throughout your design to give it consistency and usability. Something I have found helpful when designing the website is to keep in mind you will be eventually slicing it and getting it ready for use. What this means is that staying mindful to the overall process can help you or whoever is going to slice the design to do everything in a much nicer manner. This could mean keep things in Folders, keep layers organized so that it’s easy to find elements. User rulers and slices so that the Coder can easily distinguish between the distances you used and the intentions you had. This is useful to you especially if you leave the design to marinate for a while and then come back to it, looking at all those rulers you added can remind you what you really had in mind. Also when creating the design comes the time when you need to pay attention to things like spacing, grids, colors, sizes and all the great stuff that comes with being a designer.

Slice

Slicing is one of those things that you can do a hundred different ways and you still might find ways to improve it. Personally i have found that with every next website i make it becomes easier and easier to know what exactly i will need. If you are not familiar with slicing it’s the part where you take a design and start generating the images you will need to create your website. Whether it’s a repeating background or a submit button this is where you create your jpgs, pngs, and gifs. Keep in mind that a lot of the things in your design can likely be recreating using clean and simple CSS, and even CSS3 which with the right amount of Progressive Enhancement can be very beneficial to you and your users.

HTML

The HTML is my favorite part of this process, because it is very precise and beautiful if you do it right. I first start by breaking down the components of my design. Header, footer, navigation, side column and so on. Once i have those down, i start filling them up with the smaller elements like Unordered Lists and Paragraphs with Lorem Ipsum. Something i like to do is use ID’s for the bigger elements like the header footer and main part of the website, and use classes within for the elements that i will be reusing. Use indentation of course to keep your code organized and easy to work with, and add little pretty HTML comments when you close a DIV or a UL, this will save you a lot of headaches when you come back to add/edit things in your website.

CSS

I find CSS to be an art, just like when a painter sits down and starts adding color to his painting. With CSS i like to start by styling the Main elements as mentioned above, i keep an area in my stylesheet just for those big elements that go on every page. Then once i start adding page specific styling i create a new section with a CSS comment to distinguish between my pages. Now don’t worry too much about whether an element will be used across the board or in a single page, i have had to take elements out of the specific page code into the general code. With css i also like to use indentation to specify that the styling for the element belongs to the element above it.

JavaScript/jQuery

JavaScript and jQuery/MooTools/YUI and so on should be the last thing you add to your website. They are the interactive part of your website, they are what the user can do with the page. If you kept in mind that you will be using JavaScript for your HTML elements when you were writing the code for your page this should be a breeze as all the elements have the correct classes and ID’s for you to easily manipulate and have your final interactive website ready.

Conclusion

The process i have described might not be what works best for you, but if you can understand why i follow those steps, and why this works for me i think you will have a much better idea as to how to optimize your process. For example once you write your HTML you can use the CSS GENERATOR and get the CSS corresponding to your code. Also having the images once you are writing the HTML and the CSS helps with sizing things correctly, and especially with Dreamweaver you can always click browse when you are adding an img src or a css background and directly select the correct image!  Now go out and make a few websites, have fun and happy coding.

So we begin with our div. Let’s call it div_center.

<div class="div_center">
 Our text can go in here.
</div><!--div_center-->

The only little problem with the pure CSS method is that we need to know the exact width of the element and a good estimation of the height. So we will need to set a width and a height, then add our padding and add those together. You can set the height to Auto and then just not fully center it Vertically. But here is the actual trick. You position the element fixed, then you add a position left of 50% and a position top of 50%. This doesn’t exactly do it just yet, now we take the width divide it by two and the resulting number we use as a negative margin left. Same thing for the height, divide and use as negative margin top. Here is a css example:

.div_center {
	width:490px;
	height:390px;
	padding:5px;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-200px;
}
/* alternatively */
.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:35%;
	margin-left:-250px;
}
/* or if you have a better idea of the height,
assuming the elements height will be around 500px,
you want to use a higher value */

.div_center {
	width:490px;
	height:auto;
	padding:5px;
	position:fixed;
	left:50%;
	top:5%;
	margin-left:-250px;
	margin-top:-250px;
}

So now that you know how you can easily do this with pure CSS, it’s even easier with jQuery.

Since you have already grasped the concept from above, here is the jquery:

$(".center_me").css({'margin-top':$(this).height()/-2, 'margin-left':$(this).width()/-2,"position":"fixed","left":"50%","top":"50%"});

Now all you have to worry about is making your element pretty, jquery will take care of everything else!

Hope this helps!

In the first part of this series we discussed the ways we can help our users to use our forms, today we are going to review how to create forms from the perspective of a Web Developer. I would like to state that this is only one way to accomplish this and there are alternative ways.

Preface

Using tables is something I do not like to do unless i am truly forced to by the circumstances (like tabular data). Tables is something you definitely can do without tables, all you need is some good clean html and css. Let’s create a clean and simple form using pure html and css. And discuss other possible techniques.

Semantic Form Type 1

First let us lay down the HTML ground work on which we can start building our form.

<form class="form" >
    <fieldset>
		<legend>Semantic Form</legend>
        <div>
        	<label>First Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Last Name:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Address:</label>
            <input type="text" class="field" />
        </div>
        <div>
        	<label>Phone:</label>
            <input type="text" class="field phone" />
        </div>
        <div>
        	<input type="submit" value="submit" />
        </div>
    </fieldset>
</form>

In the code above you will notice I use div’s to horizontally separate the fields. You can use unordered/ordered lists, paragraphs or any other block element.

Now let’s style the simple form.

.form { width:250px; margin:50px auto;} /* set a width for our form, and center it with some spacing above */
.form fieldset {border-top:1px solid #ccc;} /* just for styling the top of the fieldset */
.form fieldset legend {font-size:1.2em; font-weight:600; padding:0px 5px 0px 0px;} /* add some styling to form header */
.form div {clear:both; padding:10px 0px;} /*clear the floated label and input */
.form label {display:block; float:left; width:46%;} /* position the labels to the left */
.form input.field {float:left; margin-left:3%; width:47%;} /* position the input */

Keep in mind the above code has had a Eric Meyer reset which removed all margins paddings and borders. As you can see i have added a comment for what each line does in the CSS.

That was easy, simple clean form that just works!

The Other Possible Methods

The method above is one of many possible solutions. I have seen people use Unordered Lists instead of my div’s and others use paragraphs they are all block level elements so they will work just fine. In my demo you will notice the labels float to the left of our input fields, you can also create forms with the text being above each field, all you have to do is remove the float and display the label block! Vuala you have a whole new style in 2 steps!

You can also easily create this into a two column form by simply adding a new fieldset that has its own set width and is floated, it’s as simple as that!

What’s Next

In our next installment of Web Forms we will talk about validation, the good, the bad and the ugly! Stay tuned for a series that will truly talk about every single aspects of Web Forms!

Sprites might seem like a complicated subject, and i won’t lie to you they can get confusing at times especially if you decide to make them complicated. Today i wanted to go over the simplest and fastest method there is.

Let’s define a sprite so it’s easier to understand the method. Sprites are a way for you to use a single image and display it in multiple ways. Here is a little graphic to illustrate it.

As you can see we have an element like an anchor. We usually use an anchor because on hover (cross-browser) we can switch the background position to top and have the bottom of our sprite show up, this usually contains a hover effect of a link. Let’s look at some sample code.

So here is the information you need to know from the styling above. We make the anchor display block so that we can set a custom width and height, otherwise our width and height won’t apply. We set our background with position top center and make it not repeat although that should be unnecessary since we are specifying the exact height and width of our sprite. Then the trick is adding the hover effect that changes only the background position to the bottom.

So why is google releasing a library of web fonts, well it’s quite simple actually. Google promotes the newest web technologies because they are a web company. I am assuming not too far from now they will have a wide selection of fonts to use in Google Docs (the Microsoft Word web alternative). Google is a web company and they strive on progressing the web. Our sources in the Google IO conference this year told us that google is working on a Flash alternative that will build HTML5 animations. Very excited to see how that turns out.

As I wrote in my Web Fonts 2.0 article there are some light down sides to using @font-face. But with googles delivery speed it’s a good bet you won’t find yourself in too much hassle.

Personally I see the use of certain fonts in our designs as a Web 2.0 element. When Web 2.0 started there was a big burst of people using sIFR to display any font on their website with Flash. But flash isn’t an idea solution so things like Cufon came out that allowed you to display those fonts with JavaScript image replacement techniques.

Today we have the most amazing technique that works close to perfectly, and that is the @font-face CSS property that is supported by 97% of browsers. However this wasn’t always the case as this technique requires you to use a few different font formats at the same time for it to work on all browsers. This can become a rather unpleasant task but we have tools like TypeKit that give us everything that is necessary to do it.

I had the pleasure of meeting the Founder of TypeKit and the Owner of FontShop.com and after a discussion about web fonts I was very excited to write an article about fonts and how they are transforming the way we create website.

So let’s address the 2 known issues with using @font-face fonts. First of all the process of applying these fonts can cause a problem if the font takes time to load. The problem can play out in two ways, either the browser will use a fallback font until the font is loaded and then it will jump the new font in place after its downloaded, this can make the page jump around a little bit. The second thing is you can make the page wait until the font is loaded. With today’s fast speed internet and TypeKit’s special techniques in place you will probably never have to worry about either.

Never used @font-face before and are worried that it’s complicated, go to TypeKit register for an account and follow the steps, you will be using @font-face like a pro in minutes!

If you love TypeKit then you will enjoy FontSquirrel as well.