Best web development tools for the Apple Mac for building websites

Here are the best web development tools for Apple Mac users. The best part is that they are all free!

Any list of web development tools is bound to be personal and everyone has their favourites. These are the tools I use on an Apple Mac to build and maintain this website. They are all free!

RAWinfopages is a growing website and around half a dozen new pages are added each week and others are updated. These are the tools I use to maintain the site on an Apple Mac.

There is no difinitive list of the best web dev apps andyout choices are influenced by many things. For example, it partly depends on how much money you are willing to spend on software and services. It would be nice to get the full suite of Adobe apps and stock photography, but it costs nearly $80 a month and not everyone can afford that.

The tools that I use tools are free, so they will suit people on a budget, such as someone just starting out blogging and building their website. This does not mean they are lacking in features and some of these apps are used by professional developers too.

Google Chrome - web browsing

This web browser has taken over the market and more people use it than any other. Safari is a good browser and is a natiural choice for Mac users because it is bundled with macOS. Maybe it is better than Chrome in some ways, but it doesn’t do what I need. Chrome does.

Chrome is good for website development because a lot of people use it and so you can see your site as most people will see it.

There should not be any differences between browsers, but sometimes there is and you need to check your website on multiple browsers an devices - Mac, PC and mobile.  Chrome is used for the daily tasks of site building, updating and maintenance not only because it is popular, but because it is cross-platform.

Chrome browser is useful for web development because of the useful extensions

Chrome runs on everything - Mac, PC, phones, tablets and even Linux. It syncs everything between computers and devices and so your bookmarks, browsing history and extensions follow you everywhere. If you switch computers, everything you need is there. Firefox comes close to doing this, but Chrome is better.

Another reason for choosing Chrome as a web dev tool is because it has some excellent and very useful extensions that help people with SEO, website development, analysing your site and competitor’s sites.

Here are some of the extensions I use: SEOquake, MozBar, Open SEO Stats, Page Analytics (By Google), Quick SEO, SEO Stack.

I don’t have them all enabled all the time because they tend to bloat the browser. SEO Quake is enabled permanently and the others are enabled as and when they are needed.

Sign up for our free newsletter to get a free PDF mini ebook: Best Chrome Extensions for SEO.

GIMP - photo editing

GIMP is sometimes described as the poor man’s Photoshop. It is not as good as Adobe’s application and it does not have as many features. However, you don’t need a huge number of features to create web images and GIMP has everything you need for free.

Mostly you just need to shrink images, sharpen them a bit, optimise them and get the file size as small as possible so web pages load quickly, and so on. GIMP does all of that and a lot more besides.

GIMP is an excellent and free photo editor for the Apple Mac

GIMP is a free application for Mac and Windows, and it does everything you need for creating web graphics. There are filters, tools for sharpening images, adjusting the colour, brightness and contrast, adding text, straightening crooked images, and so on.

Like Photoshop, you can build images using multiple layers, with different content on each layer. You can set the transparency of layers too.

You have to spend quite a lot of money to get a better photo editor than GIMP.

TextWrangler - text and code editing

TextWrangler is a free app in the Mac App Store and it is useful in several ways. One simple use is for stripping out text formatting.

It is best to write articles in a wordprocessor and then to copy and paste the text into the website’s editor. If you work online you can spend a couple of hours writing something, click on the publish or save button and bang, it’s gone in an internet connection glitch.

You should write posts elsewhere and save them, then copy and paste the text into the site’s editor. Unfortunately, invisible word processor formatting can mess things up when text is pasted into your site's editor. It is best to select the text and pasted into TextWrangler, then copy from there and paste into the site. It results in clean text.

TextWrangler is a great Mac app for editing text files and code

That isn’t the only function of TextWrangler and it is also a great code editor. Sometimes you need to write a bit of code, such as some HTML or CSS to paste into the site and TextWrangler is useful because it colour codes the tags.

This makes it easier to check that it is right, such as having matching open and close tags, and so on.

TextWrangler can also be used as a notepad. It starts up with whatever file was open when it was last used, so you can paste in text, code, URLs, and anything you want to remember. The next time you open it, everything is still there.

I save bits of text and code to Text Wrangler that I want to reuse later. Whenever TextWrangler is opened, all my code snippets are there.

Brackets - code editing

RAWinfopages is a weird site because it uses several different and technologies. At the root of the domain are around eight pages created in plain old HTML and CSS. To edit or update these I use Brackets. This is a free application from Adobe that is great for editing code.

It is different to TextWrangler and is better at HTML/CSS. For example, it completes tags so you can type the opening HTML tag and it automatically adds the closing tag. It shows pop-up selection lists when you create links to images. It does a certain amount of checking and highlights errors like bad or missing tags. It remembers the files that were open last time, and so on.

Brackets is a free open source code editor perfect for editing HTML, CSS and other code

I probably only use a fraction of the total features of Brackets, but it is great for editing the code on web pages. It is cross-platform and is available on the Mac and PC.

Preview - image editing

Preview is one of the most useful apps bundled with the Mac and it is a multipurpose tool. GIMP is a better application for photo editing, but it has poor drawing tools. If you want to add lines, arrows, shapes, speech bubbles, and other items to an image, Preview is perfect for the job because it is so quick and easy.

Preview on the Apple Mac is one of the most useful tools

Load the image and show the Markup Toolbar on the View menu. You can then draw on the image in a variety of ways.

Cyberduck - file transfer

Cyberduck is a free FTP program that enables you to directly access the files on the web server. It is no use on free sites from WordPress and Blogger because they do not support FTP access, but if you have self hosted WordPress and it includes FTP access, Cyberduck lets you upload and download files, and edit them.

You can download files for backup purposes and even copy your whole site. You can upload files you have modified, upload files for your digital downloads, restore files that have become corrupted and so on.

Cyberduck is an FTP program that can be used to upload and download files

Cyberduck makes uploading and downloading files as simple as drag and drop to a Finder window or the desktop. It isn't a tool you will use often, but on occasions it can be very useful.

VirtualBox and Bitnami virtual machines

VirtualBox is free software that enables you to run other operating systems in a window on the desktop or even full screen. It is often used to run Windows or Linux on the Mac and it does a pretty good job.

Another use is for running your own content management systems like WordPress, Joomla, Drupal and others.

These can be run in a virtual machine on your Mac and it is like having your own web hosting on your disk and only you can access it. That makes it incredibly useful for learning and testing.

Click the screen shot to see what I mean. Here WordPress is running in a virtual machine downloaded from Bitnami and is being accessed in a browser.

VirtualBox running WordPress in a virtual machine

You can install themes and see what they look like, and then customise them. You can install plugins to see what they are like, whether they are useful, and to test them. You can hack the WordPress code, completely mess up the site and then just click a button to reset everything back the way it was.

It is brilliant for learning and testing before you make changes to your real website. Bitnami has a large range of virtual machines for web developers to play around with.

See How to run WordPress on your PC using VirtualBox the easy way. This is a Windows PC guide, but the Apple Mac is exactly the same. VirtualBox and the Bitnami virtual machines work on the Mac too.

Google Docs and Drive - files and apps

Google Drive provides 15GB of online storage space, and a few more gigs can be earned for various things (I get 19GB for free).

As with most of the other tools, it is cross-platform and you can install the Google Drive app on the Mac and on a PC, and the contents are synced. You have access to your files whatever computer you use. They can also be accessed through a browser too.

Posts are written using Google Docs so there is always a backup if for some reason the publish button fails to work on the website. It happens sometimes.

Google Docs is an online word processor that runs in the browser, so it might seem to be no better than typing into the site's editor, but Docs is fault-tolerant. It saves every few seconds, so if there is a problem, like an internet glitch, you never lose more than the last couple of words you wrote.

Images are saved to Google Drive, bits of code, notes and other things are saved too. It has backups of every file I use on the site.

Google Docs is an excellent online office suite. Here is the word processor

Google Sheets on Google Drive enables you to create spreadsheets. Not that you need to do much calculating, it is used more for storing information in the rows and columns.

For example, I store the contents for a course, such as the title, section titles, what’s in each section, whether it has been started, finished, and the URL, and so on. You can also create lists of things, like places you promote your posts, competitor analyses and so on.

Docs and Drive are not platform-specific and you can start on one computer and one OS, and finish on another computer and OS. Not everyone needs this, but for those that do, Google Docs, Sheets and Drive beats Apple Pages, Numbers and iCloud.

Pixabay - web images

Pixabay is a brilliant collection of photos and vector artwork that you can use on your website. Most stock photo collections require payment, either one-off or a subscription, but Pixabay is free.

You can contribute money or photos, but this is entirely your choice and you don't have to. I have contributed a few photos (2.5k views and 600+ downloads so far), and made a small monetary donation too, because I use Pixabay a lot. Most of the featured images at the start of articles are Pixabay images.

Pixabay free image library

What applications or sites do you use when creating your blog or website? Have I missed any great tools?

 

Share

Add new comment

By submitting this form, you accept the Mollom privacy policy.

Related items you will like...