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.

JavaScript Namespace Design Patterns

I recently came across a great article on JavaScript namespace design patterns. As a beginner JavaScript developer, I found many of the approaches discussed in the article both insightful and clarifying as to why certain tactics are adopted in code. If you’re interested in namespace design patterns, you can find the article here.

Quick Tip: Viewing the Javascript’s Global Namespace

When programming in Javascript you can inspect which objects are currently populating the global namespace. A quick way to view this list of objects is to type the word “window” into your browser’s console (see screenshot below for an example). This will return the Window DOM object which will contain a list of all objects which are currently populating the global scope.

Chrome's console window

Screenshot of Chrome’s Console Window

D3.js Work

d3 examplesI’ve finished Scott Murray’s excellent d3 book and have included samples of my work above (a bar graph that incorporates various transition effects, and choropleth map illustrating internet use in 2013). Hopefully these two examples can highlight the power of d3 in visualizing data, and will be the beginning of many more d3 posts from me in the future.

Javascript – Object.create vs. New: Perfomance Comparison

Recently I’ve been studying object oriented programming with JavaScript and trying to learn the differences between Object.create vs new, when creating child objects that inherit from parent objects.

Although I’m not an expert on the topic, I did come across an interesting site which compares the performance of both approaches in multiple browsers. I thought I’d share the site since it provides some interesting information of the topic of performance which may be of interest to other developers. Enjoy.

For those like myself who are new to OOP with JavaScript, I’d recommend the following website as an introduction to the topic. It’s provides both a concise and straightforward description of how to implement OOP with JavaScript.