Helpful Resources and Webapps for New Web Developers

It seems every month there are dozens of new applications being released. Developers are constantly working to bridge the gap between open source and open coding standards. The HTML5 and CSS3 specifications have gone a long way towards bringing a closer connection with frontend web development.

But moving forward there will be even newer techniques you’ll have to adapt with. In this article I would like to share a handful of tools that I’ve found useful working as a web developer. When you are just starting out on new projects there’s often a series of questions you think about. I hope some of these apps will prove useful in answering these questions as you delve into more complex problem solving.

1. jsFiddle

I have gotten more use out of jsFiddle than a lot of my other IDEs. This can’t replace a full code editor by any means. However for small practice projects you cannot beat the fiddle.

Even without an account you can just land on the website and start building your project. You are given 3 panels for HTML, CSS, and JS code. If you register a free account you’ll be able to save these fiddles under your name and share them with others. This is possibly the best method for testing out new techniques before applying them into a webpage.

jsFiddle is also really powerful since it’s based in your web browser. This means you can access code from any computer with Internet, regardless of the Operating System. But it’s also a website you can tool around with for 15-20 minutes and quickly pickup the interface. This should definitely be in your developer’s toolset for any pertinent situation.

2. Koding

Now the webapp Koding is a whole lot different from jsFiddle. Currently the app is in private beta but you can drop your e-mail for a potential invite. The website behaves as a personal online code server with your own backend interface for creating new files and writing source code.

This is like having Dreamweaver accessible from any computer with Internet access. But it’s also really useful for collaboration on team resources and open source projects. The social aspect of Koding allows developers to follow each other and share their works directly between remote servers.

When you register with a username you’ll be given your own small public web space for practice files. The default interface has a couple example scripts running in PHP, Perl, etc. Since the project is still in beta there are plenty of typical features missing. But I have quickly fallen for the elegance of this application and where it’s going in the future.

If you do have the chance I highly recommend requesting an invitation for an account. You should know if you’ve been invited within 5-7 days and the service will remain free indefinitely. This could be the perfect webapp for the future of prototyping website layouts on a small testing server.

3. Dabblet

Here we have a resource very similar to jsFiddle, but connected into the popular service Gist by Github. However Dabblet is much more extensible since your code edits will appear live as you type them. The webpage offers a clean interface for HTML/CSS code along with a preview window.

Once you register an account with Dabblet you can begin saving code snippets as new Git repos. These gists are fairly common among web developers and offer a unique way for sharing open source code. Admittedly the system is not like jsFiddle with so many complex options and settings. But this is actually perfect for newer web developers practicing HTML/CSS-based website layouts.

4. Mozilla Thimble

Another fascinating online code editor is Mozilla Thimble which has fallen out of the spotlight in recent months. Developers can build an entire webpage and publish a live demo URL to share with friends or colleagues. The preview window updates automatically as you type which is also a really nifty feature.

But you can get even more value through Thimble if you check out their existing projects library. There are about 15 unique projects you can choose to start editing as a template. These examples include landing pages and even simple HTML5 resources.

It may seem like this tool is for new younger developers, but it does provide resources beneficial to advanced users as well. It’s all about your reasons for using the IDE and what you hope to get out of the experience. Their editor is not as advanced offering code hints or autocomplete suggestions. But there is clever syntax highlighting and the live preview update is certainly a spectacle to behold.

5. CodeVisually

This website library includes almost anything you will need from tutorials to free templates and resources. Web developers are often scrounging through Google for new open source plugins or code scripts. CodeVisually is like a showcase solely dedicated to developers’ tools.

Some of the categories include templates, frameworks, mobile dev, web apps, and UI resources. You can do a search for something specific or just browse through the entire library. I have found more than a couple really cool scripts which are perfect for practicing the basics. But this is also a fantastic catalog where developers can submit their own code. If you’ve created a helpful dev resource then definitely consider submitting a link into CodeVisually to gain some marketing publicity!

6. Google Web Toolkit

The last project I’d like to reference is Google’s Web Toolkit for developers. All their tools are open free for anybody with a Google account to access. These tools include basic webpage optimization and an amazing products catalog.

There should be more than enough links to keep you busy looking into what Google has to offer. They are certainly one of the current tech giants of industry with more engineers than ever before. And because there are so many users who enjoy their software the Google Developer’s Center has become an incredible resource for just about any topic.

Final Thoughts

There are at least a dozen more apps I didn’t mention in this article which can be found all throughout Google. But I believe these 6 resources can greatly benefit users who are not as familiar with using webapps. Working as a web developer you must stay vigilant and on top of the newest ideas online. This will keep you educated and following along the curve of trends as they unfold.

But similarly these are only tools and cannot be the 100% solution to all problems. If you’re a creative thinker you may even consider building your own small application! There are plenty of open areas with room for advancement. Similarly if you have any other apps or ideas to share you can let us know in the post discussion area.