7 helpful website development tools

I’ve been occupied with web development the last few months and thought I’d share some of the resources/development tools I’ve come across

Color Wizard

I often struggle with what colours compliment other colours when designing a website. Thankfully I don’t need to take a design class to learn this skill. At coloursontheweb.com, their colour wizard application provides a convenient method for selecting colours and finding out what other colours are complimentary.

Lipsum

Developing a website template but don’t have any written content yet? Not a problem. Simply head over to lipsum.com to generate some dummy text for you site, and see what your template will look like with pages of content.

Google Fonts

Looking for a unique font for your site? Or perhaps you want your site’s title to stand out from the body of the page? If so, perhaps Google fonts can help. Google provides a wide selection of different fonts which can be easily added to any site.

Font Pair

Now that you’ve added that fancy Google font to your site, you’re probably wondering what type of font compliments it for the main body of your page. Font Pair solves this problem for you, by providing a list of suggestions for a variety of different fonts.

Typosaurus

Are you a poor speller? Or perhaps you have fat fingers like me? If you frequently make typos, than perhaps typosaur.us can help. Typosaurus provides a simple tool which allow users to submit their website URL and have Typosaurus check it for errors.

Font-Awesome

Font Awesome is a CSS library containing icon art. If you’re in need of a clean icon for your social media section of your home page, or simply lack graphic design skills but want to include an image on your site. Than take a look at font awesome. It’s a great library, which is easy to use and can add some extra polish to any design.

JSLint

If you’re a web developer, than you likely know about this tool already. If you’re just starting out with JavaScript than do yourself a favour and bookmark this site right away. JSLint provides a simple interface for checking JavaScript code. Although some may find it strict in what it considers an error, the end result of using this site is the development of better code writing habits and a useful tool for finding syntax errors. It’s a wonderful tool, so take a moment and try it out the next time you have an error in your code.

Advertisements

Free Web Hosting with GitHub:

While working through web development course, I came across a great tip for hosting a website for free on GitHub. Simply follow these steps:

  • Step 1: Create a repository in your GitHub account with the name “yourusername.github.io”
  • Step 2: Clone that repository to your computer
  • Step 3: Add an index.html file to your cloned repository
  • Step 4: Commit the changes (the added index file) and push it to GitHub master repository.
  • Step 5: Wait a couple minutes and then type the address “http://yourusername.github.io in your browser to see if the website is live.

For further details head over to this quick tutorial at https://pages.github.com

Beginning With D3

Lately I’ve been studying Data-Driven Documents (d3). It’s a JavaScript library built around the use and visualization of datasets through the web. I’ve been reading Scott Murray’s introduction book on the topic called ‘Interactive Data Visualization for the Web’, and would recommend it to anyone who is looking for a basic overview of d3.

Simple charts produced using the d3.js library

Simple charts produced using the d3.js library

The above screenshot shows two charts, which I’ve created using the d3 library. All data was provided by the World Bank, and then massaged into a .csv file format, that was imported with the d3 library. Although the charts are simple, it does provide a clear example of how effective the library can be in visualizing datasets. I’m now studying more interactive examples of d3 with an increased focus on using spatial datasets. I look forward to sharing more examples in the future.

If you’re wondering what d3 can do for you, check out the homepage at www.d3js.org, and if you’re interested in reading Scott Murray’s book, he has generously provided a free online version through his website.