Web Dev Quickies

A friend pointed me to Mapstraction.com recently, which looks to be a pretty fantastic library and service.  Mapstraction is a JavaScript library which will allow you to embed maps and deal with mapping services from 11 providers, including Yahoo, Google, Bing, OpenLayers, MapQuest, Map24 and more.  Why would you care to do this?  Some mapping services provide more details and functionality than others, and some may be better suited to particular projects you’re working on.

Google Maps has become the de facto standard for many projects needing embedded maps, but it’s not always the best choice.  There may be another provider which has better imagery or better data than Google.  If you use Mapstraction, you can change your provider with a simple code change – any API calls, such as for setting markers or adding data points, are already abstracted away, so you don’t have to make any invasive code changes.

Give Mapstraction a try for your next project needing embedded mapping tools!

Ever hear the old saying “Time is money”? This saying, to some individuals, is more than just some random babbling of an old grandfather; its a way of life. This is doubly true for anyone dabbling in a bit of freelance work. Often this is accomplished through a few dozen sticky notes pasted in random locations over a desk with scribblings that could make a mad man seem articulate. Is this method a tried and true way of keeping track of time? what happens to the few that fall behind the desk or get dragged off by your beloved pet? As with most freelancers, the time recorded and lost is time not remembered at all.

As freelancers, we should use the tools that we do business through to ensure that we don’t lose a dime of our time. Klock is an application I stumbled upon that allows you to not only log your time per project, but also organize the smaller parts of them into categories that you create. Klock also comes with a couple, predefined project templates (Web Project and branding project) to get you started. This saves you the hassle of having to create your own project categories and gets you back to business faster. Lastly, Klock provides you with the ability to generate weekly and monthly reports as well as summary reports to give you an eagle eye look at your project. You can download Klock from klok.mcgraphix.com.

Ever need a code editor in a quick pinch only to realize that your friend does not have one conveniently handy? I know I have and the usual solution for me is to keep a thumb drive handy for those crazy emergencies. Lets pretend for a minute though that you lost your beloved thumb drive down a well. Poor little Timmy is now fiddling around with it and ruining it with all that extra well water. As always, the question racked my brain and I had to figure out a solution. This of course led me to a Mozilla Labs experiment named Bespin.

Bespin is a code editor in the cloud that allows you to do your work on any PC with a web browser capable of running  JavaScript, CSS, HTML5 features and has at least some form of internet connection. Okay, so I am spouting off about the cloud but what does this mean? This means that from your browser, you can log into Bespin and start coding right away and provides many utilities, such as saving your files to your account. Need version control? Bespin provides this as well through its own custom version control system that allows you to do most or all of the things that a modern VCS can do. Want to collaborate with others on your project? Bespin also provides collaboration features to share with other single users or a whole group of users. There are a whole slew of other features that did not get covered such as command line interface, keyboard shortcuts, shooting rockets to the moon (ok you got me, I added that last one in for effect).

So what are you waiting for? go check it out at bespin.mozilla.org and comment on your experiences with it.

New web technologies seem to sweep the Internet every day and new web trends are constantly popping out of the woodwork to make our websites that much better looking. The problem? sometimes these amazing little widgets that we decide to throw on our sidebar or on our about page can look a bit cookie cutter in design. We see these widgets ranging anywhere from twitter update blocks to news feeds that are provided in such a way that they can be customized to some degree. This is no exception for the well known Google Maps widget that we constantly see dropped into most of our corporate websites and even some company “Where are we located?” pages.

I will be the first to tell you that it’s great to be able to visually see how to get to my favorite shopping spot without the hassle of handing off a textual address to a third party map provider, but why not make the map compliment your brand and design? while looking into Google Maps and its API I stumbled upon an article by Peter Shoeg, a writer at stiern.com, who details the customization of Google Maps and how to add your own branding to them. The tutorial of course expects a bit of JavaScript knowledge, some CSS knowledge,  and a few graphics of your own (unless you are doing it for learning purposes, then you can use whatever) but gets the point across pretty clear. So if you are interested in customizing a Google Map of your own, go check out the blog.

As a designer, you far too often need to build color palettes to compliment that monster idea you had the night before. Yet, out of the many methods and tools I have seen for people to flesh out their color scheme, colourlovers.com seems to do it in a fun and interesting way. Colour Lovers allows you to not only create the color palettes that you need but also allows you to define colors themselves and claim them as your own (if they have not been claimed already of course). By providing you with designer related information such as rgb values, colors in hexidecimal format, and an array of export formats such as Adobe Photoshop and Adobe Illustrator, your color scheme is any picture you can paint in your head.

The colors are not the only thing that make this website vibrant and rich in content. The community itself helps fuel the creativity by providing feedback, ranking others colors, and allowing you to take other color palettes that users themselves have created out for a spin. While the site is geared towards colors and the almost unlimited color schemes one can make up, Colour Lovers also provides users with the ability to build patterns that can be built for a variety of design uses (anyone in need of custom wrapping paper this year?). To sum the website up, you simply will not find a better website that solely deals with drumming up that perfect color or building that shopping list of colors that will compliment your new artistic endeavor.

If you are like me, you are trying to improve your developer skills at an almost neurotic level. As developers, we are often asking ourselves and others how we can make our web applications more scalable and more maintainable. While scouring the internet for articles on the subject of SOA (Service-Oriented Architecture) I stumbled upon a slideshow by Matthew Weierophinney on slideshare.net that really helped me understand the conceptual use of a service layer. Although the slideshow covers PHP, it can no doubt be useful for other languages.

It goes through the steps of how you should approach application development and how you should shift your paradigm from the simple mindset of database to code coupling to an application with many layers that can work at different levels of complexity and with very loose coupling. This allows a developer to not only change a data source relatively easy without putting your models through the meat grinder but also allows us as developers to create a better service layer that we can provide as a base for an internal and public API. Also this layering of Services, Mappers, Models, and Data Access, provides us the capability of creating a thinner controller in an MVC setting and makes refactoring less painful. Check out the slideshow here.

If you are a designer, you have most likely been in the same boat as other developers that were attempting to coax their designs into submission to somewhat work with Internet Explorer. As most of us know, we can’t stop at Internet Explorer 8 but must go as far back as Internet Explorer 6 as it still holds a  decent browser market share. We, as designers and web developers, are often stuck with testing our designs on either multiple systems or on some number of systems that we have handy at the time to test the various Internet Explorer versions. I was in the same situation and I was banging my head on my desk with the rest of you when I realized the browsershots website was down.

Fortunately I found the holy grail in IE testing through an application called Internet Explorer Collection which starts at installing Internet Explorer 8 and goes as far back as Internet Explorer 1.5 (if your that crazy designer that likes to test in ancient browsers).So if you are looking to install multiple Internet Explorer versions on your box or just looking to see how hilariously messed up some popular websites are in older versions if IE are, check it out here.

If you are the type that is worried about how your typography will look cross platform, you no doubt have heard about font stacks. As I was personally needing to build a customized font stack, and not one of the drop-in font stacks that many find littered throughout many well known designer websites, I was forced to try and build my font stack by hand and test by trial and error. This of course can get frustrating as one can see. Yesterday I stumbled upon a little web tool called Font Stack Builder by Code Style and it cut the time of building my font stacks by a considerable amount. Not only did it let me know the compatibility of each font selected, but it grouped them by OS and let me preview each font separately. So if you are the type that likes to fine tune your typography its definitely worth a look. You can check out the Font Stack Builder at the Code Style website here.

Just found http://www.passwordmeter.com/ which looks to be a nice visual way of representing a password’s strength to your visitors.  It includes all the code to make it work and is GPL-based.  There’s a bunch of options to allow you to set how strong or weak you want to allow a password to be.  Very simple, to the point, easy to use and nicely done.  Check it out!

Accessibility can (and probably should) be a big consideration for many web projects.  If you don’t provide basic accessibility support, you may be sued.  It happened to Target – it could happen to anyone.

The Firefox Accessibility toolbar is a project from the Illinois Center for Information Technology and Web Accessibility.  Have a look there, then go grab the extension from here.  It’ll give you an easy way of doing some basic checks to help your site become more accessible, helping you provide better service to your visitors, and avoid potentially hazardous lawsuits.