Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Looks to be an excellent resource for Web Developers. John Resig breaks it down better than I could do and tells us about two hidden additions.

The following will be presenting:

Nick DeNardis

Designer of the Wayne State University Library and Information Science website. He will discuss the latest release of the website, their goals, process and challenges.

Brian Kerr

Information architecture, user experience, and django development guru. Exact topic details to come…

Paul Tarjan - Yahoo! SearchMonkey

The fine folks at Yahoo! are sponsoring this event and promise to bring lots of swag as well as give a short presentation on their new open source semantic web search in your own applications and websites. This new product they are releasing is called “Search Monkey”.

Whats is Refresh Detroit

If you are not aware of Refresh Detroit, we are a group of Web Developers, Designers, Search Engine Marketers, User Experience and any other type of Internet Profressional who meet once a month to talk about the latest trends and show off our cool projects. Should be a blast!

The article which I can’t find at the moment (I wasn’t expecting to write about it) went on to say that Google has never come out and told us their view of CSS Sprites. Basically with CSS Sprites you have the actual text for elements still in the source code for search engines and accessibility reasons but display the image as a CSS background. Of course not all CSS Sprites is used for text alternatives, but I would say a great deal of the time they are. We would think Google wouldn’t care about this but we all know how Google feels about hidden text and the shady Black Hat SEO’s stuffing key words. We hope that Google is smart enough to know if we are stuffing keywords or we are actually using CSS Sprites properly

Google Speaks and sets us free

I got home tonight and came across an article entitled “Design patterns for accessible, crawlable and indexable content” on the Google Webmaster Central blog. Where low and behold Google tells us:

Having meaningful text to go with navigational links is equally important for Googlebot as well as users who cannot perceive the meaning of an image. While designing the look and feel of navigational links on your site, you may have chosen to go with images that function as links, e.g., by placing <img> tags within <a> elements. That design enables you to place the descriptive text as an alt attribute on the <img> tag.

But what if you’ve switched to using CSS sprites to optimize page loading? It’s still possible to include that all-important descriptive text when applying CSS sprites;

What about that Javascript?

Clearly Google is pushing us for better techniques not only for load time, but accessibility while ensuring our content gets indexed and crawled. It was really refreshing to hear Google saying how it is important to have unobtrusive Javascript. Google goes on to compare the Googlebot in the same context of a visually impaired user. We shouldn’t have our Javascript in our HTML, we need to make sure that if user doesn’t have Javascript enabled that the link brings them to a page representative of the link they clicked.

In Conclusion

Sometimes it is hard to get other developers and executives onboard and understand how important all these newer techniques for complying with web standards, accessibility, and optimization. One thing is always true and that is everyone listens to Google. How many times has an executive come to you just drooling all over Google and their accomplishments? Most of the time I can’t stand how everyone is bowing down to Google, for one Google doesn’t practice enough web standards themselves and this is representative in a number of their services.

If Google continues to write more articles such as this, it will make our battles internally with our executives and other people that brush standards to the side a lot easier. They might actually listen to us and appreciate what we do and our passion for perfectionism with web Standards. Maybe these people will just stop saying “let’s just get it done” and actually put time in the budget to research and plan correctly to create our applications the way they should be developed.

Some of these things are:

• Determine server information of a website. You can actually see a website’s HTTP response headers by using “Information > View Response Headers”.
• Use a “magnifying glass” to zoom into parts of a web page.
  You can use the “Miscellaneous> Display Page Magnifier” option to get a window that allows you to zoom in and out of the desired areas of a web page.
• You can even view a website’s color palette by using the “Information > View Color Information”

For more tips and better detail, head on over to his site and check it out. He has another great article on the topic called 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension.

I have realized that I really need to look more into the tools that I use to increase my productivity and make these less frustrating. These type of tools can be life savers especially when you work on projects where you actually have to compile every time to see the smallest changes as I do.

Finding Layout

For the last month or so I have been looking through more and more Firebug tutorials. One day I just so happened to go to the main FireBug page, and started reading the text on the homepage. I see a block of text talking about “visualizing CSS metrics”. I was instantly intrigued! I proceeded to click on the link where I was blessed with the capabilities of the Layout Tab.

I have looked at the Layout Tab before but dismissed it as some weird Box Model thing. Sure, some of you out there are thinking “You didn’t know you could do that with the layout tab”, but I am sure others out there have overlooked it.

What Does the Layout Tab Do?

The Layout tab is located after you select the html tab, in the right column next to Style. To get the element in which you want to know the box model specs, click on Inspect and hover over the html elements in the HTML frame. Before finding the layout tab I always used inspect and just the normal Style tab.

Some of the cool stuff it does are:

• Gives you the width and height of the inner most box, the actual specified width in your CSS.
• Gives the specified padding, border and margin of each side of the element.
• Something that I never thought of is the offset. This is the element that its left, top, bottom, and right CSS properties are relative to. Just think of when you are positioning an element absolutely inside a relative positioned parent and I think you will understand it.
• Not only does the Layout tab give you all these values but it lets you modify them.

Aren’t we happy now?

To sum it all up, this is a great piece of functionality that firebug offers and I felt others out there might have been missing the power of it. I have been using it religiously the last few days. It is much easier to edit the margin, padding, border, or width of an element then just using the edit CSS feature, which I find to be a bit buggy sometimes.

I think I might be posting a couple other entries on the functionality of Firebug that we might be missing. Please feel free to add any features you find you can’t live without. You never know if everyone else knows about it or not.

Anyone in the Ann Arbor area should definitly com checkout out our next Refresh Detroit meeting. All the details are listed on our website. We are doing a demo night, where anyone can come and show us their latest websites, designs, applications, tools, and products. You do have to RSVP if you are wanting to demo something, so please checkout out the site for more details.

For anyone that doesn’t know what Refresh Detroit is, we are a group of web developers, designers, usability specialist and anyone who has a passion for the web. We get together to talk about industry trends, special techniques, marketing and a whole assortment of topics.

If you are like me, then most others involved in your life don’t really care about how you used some really cool techniques to code a web site or hear you talk about the usability of a certain site, kind of sucks! The best is how my girlfriend gets so annoyed when I view the source of a site we are randomly checking out. Only us web nerds can understand that type of stuff, so why not get together and talk about it with each other.

With that said, look forward to hearing more post on various ecommerce topics. Since starting my career in ecommerce last year, I have been working on a lot of cool things such as Comparison Shopping Engines, Affiliate Marketing and my dive into the world of software engineering.

In the past I have always selected the area that I want to slice with the Marquee Tool, and went into the layers pallet, clicked on the options and chose Flatten Image. I could now copy that slice and open a new document, pasting in the copied image.

Then I found the biggest time saver of my career, cutting my slicing frustrations in half. What is it, you say? Its the Copy Merged option. I’m not sure how long this has been built into Photoshop but I do feel stupid if it has always been there.

Now, all you have to do is select the area you want to slice with the Marquee Tool, or any other selection tool you would like, then go up to the edit menu and select “Copy Merged” or better yet Shift+Ctrl+C and boom, no flattening of the image, meaning none of the hassle of having to go back in History to retrieve your layers. Now just click Ctrl+N for a new Document, Ctrl+V to paste, then Alt+Shift+Ctrl+S, and boom your in the “Save For Web” screen. Of Course for all the MAC user I’m sure you can figure out the MAC alternative.

Yeah, I might be behind with this, and I just saw this has been here since the first release of CS, but I never really looked because I always just did it the old school way. Feel free to comment about any slicing tips, or other time saving shortcuts in Photoshop.

Ann Taylor
Ann Taylor LOFT

Last year around this time I started doing my contract gig at Fry, it was the biggest step by far in my career and has led me to the great job at Niche Retail. Even though the sites aren’t perfect web standard examples (not by my choice!), It was still my first time working with a major nationally known development company. I worked with many engineers, system architects, and project managers. This is much different then the normal freelance jobs where you work with a client or are contracted out from a web firm.

I learned that the process is so much more complex in this environment, from building the site inside of java platform and having to compile the project just to see the changes, to committing the changes and waiting for it to be deployed to the dev server, where then people tell you there are changes to be made and you start the whole process over again. Not to mention the hours and hours of tasks that come from QA testing! Lets not forget updating the project and having tons of the engineers code conflicting with yours.

I think this is why I love my job so much now, not to mention the great company and their philosophy but working in side of something that is a bit more of a challenge then just coding some XHTML and CSS templates and handing them over. Its that added complexity that makes you strive to be the best at what you do. Where would we be if our jobs became easy and not challenge us anymore. The challenge being now to turn this platform into the best it can be in terms of Web Standards and Accessibility. We are way off but in the 3 months I have been here, we have made tremendous progress!

Today we launched a Refresh (as we like call it), to our header and footers areas of the sites. This is more then just a redesign but an actual initial overhaul of the existing structure. We are also working on some great homepage redesigns for our sites. It has been a lot of fun and I’m really excited to see the results of the hard work we have been doing the last few months.

This was the first step in the right direction, in terms of cleaning up the front end code and really giving our sites an updated look and feel. There is still a lot of work to be done, so don’t bash me to quickly on what can use improvements, if your looking at the source code or CSS files. We have several e-commerce sites, so it is going to be a very tedious process, one that I like to look at as a war with many small battles. At the end I hope to bring our sites to the front of the pack in terms of web standards and e-commerce.

here are some of the sites to check out:

http://runbikes.com/
http://childcarriers.com/
http://bicycletrailers.com/
http://europeanstroller.com/

While your checking them out buy something for your kids, or your friends kid’s. You won’t get much of a better customer experience on any other e-commerce site.

I am changing host this last week and wanted to transfer my domain names as well. It turns out that Registerfly has become the worst domain registrar ever. First they loose their ICANN accreditation, since then the owner, Kevin Medina has decided to take control of people domains by deleting them, not unlocking them for transfer and they are currently under a class action lawsuit. I knew I should of just transferred back in January…

I don’t even know if I will have this domain anymore. It says that the transfer has initiated but who knows if it will work. Two of my other domains are unlocked in the Registerfly control panel but I got errors from my new registrar, saying they are locked. Of course Registerfly isn’t responding to the support tickets and emails, though I expected this because its the main problem people are having.

Besides that, I have moved to a great new host, Media Temple. I have seen so much about these guys on other blogs, of which I highly respect. I figured I would give them a go and I am truly happy. I think everyone should check out their great hosting, its different then any other hosting I have seen in the past. I got the Grid Server hosting, which offers the following

• 100 GBs of premium storage
• 1 TB of short-path bandwidth
• Host up to 100 individual sites
• 1000 email accounts
• 64 MB Ruby/Mongrel container
• Money Back Guarantee

All for just $20 a month, also I would say its the best control panel I have used. I will keep you guys updated with the experience I have with them in the future.