There is a large number of online resources for developers looking to make better websites. These are all free tools for anybody to use, and they provide an exceptional push forward in quality. Designers have been striving towards a better method of working online and we are only getting closer with each passing year.
I have put together a small collection of websites and webapps to help developers work smarter and faster. You may not find all of these tools useful, but they are worth looking into and doing a bit of research. Plus there are new resources launching online every month. As more web developers join the community we will notice even more resources & web applications being published online.
CodeVisually
I have been using the website CodeVisually for a number of months to check up on the latest open source projects. Developers will submit their releases to the site and it catalogs a full gallery of plugins, templates, themes, and scripts. You can find a lot of helpful JS libraries for common UI functionality. There are also frameworks and templates for WordPress developers.
I definitely recommend checking the site every-so-often if you are a big jQuery or JavaScript enthusiast. It can be exciting to check out new plugins and build functionality for your website concept. Plus it is much easier sorting through plugins with thumbnails rather than searching Github or another code repository.
Cmmntr
Although this is a newer launch, I have really taken to cmmntr as a studious network for design & development news. The site was created by Japanese developer Motoshi Goto as a resource for the latest news and hot topics in web design. These links mostly focus on tutorials and plugins, but also includes cool demos and free open source projects.
Although the descriptions and webpage text is written in Japanese, the stories are submitted using their English headline name. It is still easy to determine if you have an interest in the tools or not while browsing the site. The reason I like this news curation so much is because it provides introductions onto similar resources such as CSS DB. The frontpage articles are always high quality and provide even more helpful tools for designers and web developers.
Google Web Fonts
Most people know about Google Web Fonts but I can’t ignore this resource in the collection. When I am not using Typekit then my secondary choice is always Google Webfonts. Their typefaces are free to use as many times as you’d like. This allows developers to keep their servers clean of TTF/OTF/SVG/WOFF files which are hosted externally by Google. If you have never used this service before it is worth a test run on your next web project.
Stack Overflow
When you move onto more difficult problems in web development it can be tough educating yourself and fixing bugs. Whenever I see people asking for helpful webdev forums I always recommend Stack Overflow as the best contender. Members have an incentive to answer questions because their profile will gain points and badges as recognition for a correct answer.
Also the questions are practically never deleted, and save as an archive for others to search and find a solution at a later date. So before even asking a new question I would recommend searching in Google with the keyphrase site:stackoverflow.com and see what turns up. This is my technique for solving 90% of the problems I run into during a typical coding session. Stack is a tremendous resource for any web developer no matter how skilled you are, as there will always be more to keep learning.
CodePen
The CodePen webapp is like a cloud-based IDE for building websites. Most developers use this tool as a sandbox for creating demos and small interface features. The default pens are setup public and you can search through them for resources which have been coded and released by other developers.
It is an excellent website to bookmark when you need to show somebody your code without uploading to a web server. Check out this sample dark UI theme as an example. Or paired with Stack Overflow and similar forums, you may recreate any HTML/CSS/JS bugs within CodePen and then use this demo for your question. Users of the website then have access to directly edit your code and see if they can fix anything.
iPad Peek
Mobile testing is huge and the rising smartphone market has not stopped. If anything we are seeing more consumers switching onto tablet PCs for general web browsing. This really cool webapp iPad Peek allows you to load a website into an iPhone or iPad to see how it would render on the screen. The site includes options for the iPhone 4 and the iPhone 5, plus landscape and portrait views for the iPad. It may not be something that you will use all the time, but it can be more resourceful than pulling out your own devices for mobile testing.
CSS Code Snippets
Chris Coyier built a large collection of CSS snippets for web designers and developers. His blog at CSS Tricks is full of great tutorials and resources. But this single page offers a huge collection of very practical snippets you should save and keep for local development. Using applications such as Coda you may save code snippets right into the app, or similarly keep them in a separate external file.
But snippets are a fantastic resource for developers who don’t want to recreating everything from scratch. You can save a lot of time and still produce the same quality of websites. Similarly I have to recommend Eric Meyer’s CSS resets as another code snippet worth saving. There is the option of directly including the file off his website, but there is no guarantee he will keep that saved in the exact same location forever. It is more resourceful to save a local copy of the styles and either import them into your own stylesheet, or include both CSS files separately.
Pictaculous
I happened to stumble onto this website the other day and was playing around for a good 20 minutes. Pictaculous allows you to upload any image or banner artwork and it will put together a color scheme which would best suit this graphic. You may use this resource for design ideas when constructing a new website layout. Or similarly when making a new banner design or logo in Adobe Photoshop.
I think this will be useful to both designers and developers who often struggle with color choices. It can be tough finding an image which you can place on the page and blend into your layout. So I do not think everybody will find a purpose for this webapp. However it can be fun to generate new color schemes and test your own design intuition.
Final Thoughts
I do hope a few of these resources will prove useful to designers and developers. Some webapps will take a bit of practice to get used to, but I have really become attached to the idea of coding and building projects “in the cloud” with tools and website resources. By working locally you can ensure a copy of your project is always safe while still building out new ideas in your web browser.