C21CH

Speculative Web Space

Tools and IDEs

Intro To Code Home

Browser Tools

For web development, some of the most valuable tools are built into the browser (such as Chrome or Firefox). Just right click a web page in a browser and select 'View Source' or 'Inspect Element' to look at problems in your own code, or see how something was done on another website.

For web development also use the W3C HTML validator. This will point out errors and problems in your code, ensuring it is compliant with W3C standards. This helps avoid other flow on problems from badly written HTML code, such as browser compatibility problems.

Debugging.

Be prepared for a lot of debugging - a programmer must be as tenacious as they are creative and imaginative. By trying to find and fix bugs you learn a lot about other things along the way.

If you have looked at your code and searched the internet all day, and still can't find the full stop in the wrong place - take a walk, sleep on it. More often than not you'll see the problem right away when you return. After a while you'll find you spot problems quickly. If all else fails, you can ask another programmer or join a support forum like Stack Overflow.

Give it time. Computers are stupid and explicitly literal, so can be very frustrating, but if it takes you all evening to get Apache or IIS working, and then another evening to see your first script say 'Hello World', you will have learnt more than if it all went smoothly.

Text Editors and IDEs

Specialised Text editors and Integrated Development Environments (IDEs) make programming much easier, marking different features of code in different colours and providing suggestions and autocompleting from their built in language reference. Sometimes it seems as if the IDE is writing the code for you.

Most text editors and IDEs can be obtained as a free 'light' version, but they promote the paid for one. Check carefully you are getting the free one. The licenced one is better, but you probably won't need it to get started.

Here are some popular text editors and IDEs:

Frameworks, Packages and Libraries

In most languages, frameworks, packages or libraries of code are available that are intended to make it easier for you to code by providing solutions to common problems.

In many cases these are invaluable. JQuery makes Javascript much easier for example (learn the basics of Javascript first, then use JQuery). AngularJS has now also become a standard Javascript development framework. SASS and LESS are popular additions for CSS (but learn HTML and CSS first). Bootstrap is a popular web development platform that makes it easy to do things you almost always need to do on a website - drop down menus, different layouts with columns and boxes, good looking style templates, etc. Unfortunately, after decades of Dreamweaver and other WYSIWYG editors, nobody has yet figured out how to make a program that generates HTML as well as simply writing it.

However, there are also many frameworks, packages or libraries that promise to solve all your problems but end up constraining you to what they are capable of, consume extra time to learn, cause 'bloatware' by including vast amounts of supporting code to achieve a relatively simple end, and cause compatibility problems when you need to upgrade. Be careful in your choices.

Developer Community

The developer community has long had a strong online presence. Communities and support forums like Stack Overflow provide question and answer services. Searching for an error message or solution to a problem will often present an answer from one such community.

Usually people provide answers for free out of a spirit of community friendliness, and can lose patience if you're not asking nicely and clearly, so before you post a question, make sure you do the following. Often trying to word the problem clearly helps you spot the problem yourself.