15 Mar Tools of the Trade
This article describes my toolkit: the software I use to do what I do. You might not choose exactly the same tools but you should have similar capabilities available and know how, when and why you should use them. IMHO, that is. By the way, ALL software mentioned below is FREE!
Browser(s)
Your browser or browsers should help you in doing your job. Choosing browser add-ons or extensions, and configuring the browser will save time and keystrokes/clicks, keeping the information you need close at hand. I use Chrome as my primary browser and Firefox as secondary. Chrome “feels” a little quicker off the blocks, but Firefox has two tools that are unavailable and/or superior to those in Chrome: FireFTP – an FTP client that easily and quickly transfers files between the local disk and the website, and FireBug, which is helpfull in seeing what’s happening on a web page, diagnosing errors, and getting CSS right. The FireFTP capability is useful for downloading log files for examination, then uploading them after emptying them. FireBug lets you see, change, and debug HTML, Javascript and CSS.
Internet Explorer (MSIE) (and I assume Edge for Windows 10 and up) do not have the rich ecosystem of extensions/add-ons that Firefox and Chrome do. I use MSIE to a) test any exotic CSS or Javascript I’ve added to a web page, or b) ativate a new website registration, because (last I checked) if you try to activte a registration when logged in, it doesn’t work. And I am almost never logged into MSIE.
It’s helpful to have two of the browser’s tabs as part of it’s “Home” tab group: the Admin back end and the front end. Setting these as part of the “Home” tab group assures that the website and its management features are always at hand.
IDE (Integrated Development Environment)
An IDE is extremely useful for developing and maintaining code of all kinds: HTML, CSS, Javascript and PHP. I have been using NetBeans for years and find it meets my needs very well. To summarize, an IDE gives you:
- A text editor with syntax highlighting and automatic formatting or easy reformatting
- Automatic upload when you save a file
- Integration with a local server (XAMPP) to provide line-by-line debugging of your PHP or Javascript is possible, but I have not done that, as setup is challenging and an lead to security exposures on my desktop.
Text Editor
Sometimes you just want a decent text editor so you can peruse error files, make notes, save SQL queries or the like. Windows Notepad is OK, but I use Notepad++ for this. It also has sytax highlighting.
Image Editor(s)
You will occasionally need to to some editing of images that appear on the website. The most common reasons are a) a hapless user has inserted a 4 MByte image into a Front Page article and it takes the website home page multiple seconds to load, or b) aesthetically you might like ot crop an image. A simple, easy-to-use image editor called Irfanview is my preferred tool for these tasks. Using Irfanview to open any image on your local disk:
- To resize the image, type Ctrl-R, set the new height or, more commonly, width, in your choice of units (pixels, cms, inches), set the resolution (72 dots/inch for website images), click OK and save it: Done!
- To crop the image, draw a rectangle with the cursor (click at a corner, hold to make the rectangle) to delineate the part you want to have in the cropped image and click Edit>Crop Selection, and save it: Done!
Irfanview also has a useful feature, a Microsoft Paint-like capability you activate with F12. Lets you annotate the image, draw ellipses, squares, lines, arrows, etc. Very handy for annotating screen shots.
UPDATE – 11/14/2018
Google has released a new software tool that compresses image files (makes them smaller and thus faster to load). This capability is absurdly easy to use and shows a side-by-side comparison of the image you upload to it and the compressed image, using a vertical par you can slide back and forth. You can adjust image quality and resize images as well, so a valuable tool for web work:
Access it directly: https://squoosh.app .
GIMP (Gnu Image Management Program) is a sophisticated inage editor comparable to Photoshop. It is not easy to use, but there is extensive documentation available online, including tutorials.
Screen Shots
Sometime you need to grab a piece of the screen showing something for a tutorial article ot to illustrate a problem. I use LightScreen for this.
“Productivity Suite”
If you need to do things like read or write files to/from Microsoft Office I suggest LibreOffice. Free, familiar user interface, reads and writes Word, Excel and PowerPoint files perfectly. Did I mention free?