Editing Files and Testing Performance with WordPress Tools
Over the course of Lisa's journey with WordPress, which began in 2003, she's learned a lot of lessons from editing WordPress files, building themes, and using different browsers and browser tools to help her view, test, and diagnose certain problems (such as speed, error messages, and CSS rendering) on her Web site.
One important thing she's learned is that when she sits at the computer to begin to work on any WordPress project, large or small, it's vital that she have the right tools readily available. Having the right tools makes a world of difference in the quality, efficiency, and overall experience in designing and developing a Web site for her or a client.
This section of the chapter introduces you to tools for things like editing HTML, CSS, and PHP, as well as using various Web browser platforms, such as Internet Explorer and Mozilla Firefox. For example, we include different tools and add-ons that you can add to the browser to make it work better for your Web site and be easier for you to maintain it.
In some cases, the tools we mention here aren't necessarily required — however, you'll be very thankful when you find tools that make your Web site managing a lot easier!
Choosing the text editor that's right for you
In Book VI, you dig into WordPress themes, work with CSS and HTML, and type template tags and a bit of PHP; this chapter arms you with the tools you need to gather to prepare for a smooth and efficient experience later.
Next to good ol' pen and paper, nothing beats a good, solid text editor. We admit, we're a little old school, so for things like grocery lists and jotting down ideas, we stick with a pad of paper and a pen. Unfortunately, writing code is difficult with a pen and paper, and it doesn't translate very well when we need to publish it to the Internet. That's when a basic text editor program comes in very handy — we always have one open on the computer (usually several instances of a favored text editor, actually) and use it daily for writing CSS and HTML, and for coding WordPress templates and themes.
Make sure that you use a text editor and not a word processor, such as Microsoft Word, to write any code. A word processing program automatically inserts formatting, characters, and hidden spaces because it assumes that you want the document formatted. When you're writing code, this sort of formatting is the last thing you want — so stick with a basic text editor.
The text editors listed and described in this section are programs that are installed on your computer. Some of them are available only for Windows, some only for Mac users — we specify this in their descriptions.
Notepad (Windows)
Notepad is a basic plain-text editor that you can use to write code without the fuss and worry of text formatting; it doesn't support any special document formatting or characters at all, which is what makes it great for writing code and Web documents.
Notepad is the go-to text editor for most Windows users because it's a Microsoft product packaged in every Windows operating system. Notepad is typically used for viewing and editing text files with the .txt extension, but many people, including myself, use it to create basic CSS and HTML files as well.
Notepad, by default, saves files with a .txt extension. With WordPress templates and theme files, you typically save files with a .php or .css extension, so you want to take care and make sure that you save files correctly. To save as a .php or .css extension with Notepad, follow these quick steps:
- Open Notepad by clicking the Start button and then choosing Programs
AccessoriesNotepad. - Create your CSS or PHP document.
Check out Chapter 3 of this minibook for a simple PHP document you can create.
- Choose FileSave As and then select the location to save the document in the Save In drop-down list in the dialog box that appears.
- Type the name of the file, including the extension, in the File Name field.
In Figure 5-4, the name of the file is header.php. If you're saving a CSS document, the extension is .css (for example: style.css).
- Choose All Files in the Save as Type drop-down list.
By default, Notepad wants to save it as a text document (.txt).
- Leave ANSI selected in the Encoding field and then click the Save button.
By following the preceding steps, you save a .php or css document by using the Notepad text editor program.
Figure 5-4: Saving a PHP document in Notepad.
Notepad++ (Windows)
Notepad++ is a text editor for Windows users and is often referred to as “Notepad on steroids.” The interface of Notepad++ looks a lot like the regular Notepad but that's where the similarities end. Notepad++ is a text editor with advanced features, such as color-coded syntax (see the nearby sidebar, “Code syntax highlighting,” for information on syntax highlighting), code indentation, and line numbering, which make it an extremely useful and helpful application for writing and editing code. Figure 5-5 demonstrates the color-coded syntax where the functions of the code are represented by colors, making it easier for you (or the programmer) to pick different sections of the code (such as functions or HTML).
Notepad++ supports many programming languages, including the main ones you use for this book: CSS, HTML, and PHP. Notepad++ is free and open source software; you can download it to your Windows computer from its Website at http://notepad-plus-plus.org.
Figure 5-5: Notepad++ with color-coded syntax.
Code syntax highlighting
Except for Notepad, all the text editors we mention in this chapter are syntax editors. They follow code-syntax highlighting formats for different types of code, such as PHP, JavaScript, HTML, and CSS. Lines of code are highlighted with colors to make it easy for you to read and separate the type of code and markup you're looking at, such as JavaScript from HTML markup, for example. This doesn't affect the way code executes; it's purely a readability feature that makes it easier on the eyes, and on the brain, when reading lines and lines of code.
TextMate (Mac)
TextMate is an Apple product and, as such, can be used only on a Mac; it's the most popular text editor for Mac users and is referred to as “the missing editor” for Macs. Like Notepad++, TextMate is a syntax editor that color-codes the markup and code that you write. Additionally, TextMate can
- Easily search and replace
- Auto-indent mark up and code
- Open several documents, each in their own tab
- Work as an external editor for FTP programs
TextMate is not free, however. You can download a free 30-day trial from its Website: http://macromates.com. After using TextMate for 30 days, you can buy a single-user license for $56.
Understanding and choosing a Web browser
Knowing which Web browser to use as your primary browser can be confusing because there are so many browser systems available. Everyone has a favorite browser, and if you don't already, you'll find one that emerges as your favorite for one reason or another. Each browser system has a different look and feel, as well as different features and tools that make one of them your preferred browser of choice.
One thing you need to keep in mind, however, is that it doesn't matter which browser you use as your preferred browser for Internet surfing. However, having access to all major browsers is essential so you can test and view your Web designs in different browsers to make sure that they render and look the same.
If you can, download and install all the browsers in this chapter to your computer so you have them readily available to test your designs across them. Some browsers work only on a Mac or a Windows system, so use the ones that are for your system.
Discovering different browsers and tools
Multitudes of different browser systems are available on the Web. This section takes you through five browsers that are the most popular among Internet users. Additionally, you find some helpful tools and add-ons to assist you with your Web design efforts in the different browser systems, including some of the must-have tools we use on a regular basis.
As far as the design and development community is concerned, the choice over which Web browser to use typically falls on how compliant the browser is with open Web standards developed by the World Wide Web Consortium (W3C), an international community that develops Web standards to ensure long-term Web growth (www.w3.org). As a designer, you need to at least have a working knowledge of what the W3C is and the standards it supports and promotes. You can read about the W3C vision and mission statement at www.w3.org/Consortium/mission.html.
Internet Explorer
Internet Explorer (IE), owing to the fact that it's part of all Windows operating systems, is by far one of the most popular browsers. Over the years, IE has struggled with its reputation of not keeping up and being noncompliant with Web standards and CSS rendering that the development and design community has come to love and expect from other browser systems. This is largely due to the layout engine (the method used to display Web sites by translating CSS and HTML markup) in use at the foundation of the IE browser.
One of the challenges that designers come across is the different versions of Internet Explorer that are widely used across the Web. With each new version, Microsoft's flagship browser comes closer and closer to compliance with open Web standards; however, because Internet Explorer is the browser present across millions of operating systems across the world, not every individual user or company is quick to adopt the new versions as they're released. This results in several versions of IE in use across the world, and designers generally make an effort to make sure that their designs render correctly on, at least, the last two to three recent versions of Internet Explorer.
Currently, the major versions of Internet Explorer that are supported by the majority of designers are versions 7 and 8, with most designers gradually dropping support for version 6 (commonly referred to as IE6). At the time of this writing, Microsoft has released a version 9 beta, with the final version of IE9 expected in late 2011 or early 2012.
Trying to test your Web site on different versions of Internet Explorer is difficult because attempting to install different versions on your computer can cause some big problems, if you don't know exactly what you're doing. We use a few tools for overall browser testing (see the section “Understanding cross-browser compatibility” later in this chapter); however, IETester comes in handy specifically for testing on different versions of IE. In Figure 5-6, the buttons across the top right are labeled for specific versions of Internet Explorer: IE5.5, IE6, IE7, and IE8. The WordPress Web site is shown in version 7 of the IE browser.
Figure 5-6: Test in different versions of Internet Explorer with IETester.
IETester allows you to test Web site designs across several versions of Internet Explorer, going all the way back to version 5 (IE5). We highly recommend checking this out and using it to help test your Web site designs across different versions of Internet Explorer. Download IETester from www.my-debugbar.com/wiki/IETester.
Mozilla Firefox
Firefox, shown in Figure 5-7, is the second most popular browser on the Web and has emerged over the years to be a solid competitor for IE. Designers and developers tend to prefer Firefox to Internet Explorer because Mozilla (the makers of Firefox) use a solid layout engine that adheres closely to open Web standards and supports and renders CSS better.
Firefox is available for download and usage on Windows, Mac, and Linux operating systems in 76 languages. You can download it from the official Mozilla Web site at http://mozilla.com.
Figure 5-7: The Mozilla Firefox Web browser.
One of the main reasons why Firefox is our personal browser of choice is because it's an open source software project with a development community that releases very helpful add-ons and tools to extend its capabilities beyond a Web browser, turning it into a Web development tool, in many cases.
You can find Firefox add-ons at https://addons.mozilla.org/firefox. You can find add-ons for just about everything from the appearance of your Firefox browser to browser-based games. At the time of writing, Mozilla reports that 2,139,478,273 add-ons have been downloaded from its Web site.
Obviously, we can't cover all the add-ons available for Firefox in this chapter because this is a book, not an encyclopedia. However, here are three add-ons for Firefox that we use on a daily basis to make our days as full-time Web designers and developers easier, more efficient, and just more fun:
- Firebug: Firebug (https://addons.mozilla.org/firefox/addon/1843) is an add-on that integrates into the Firefox browser and provides you with a host of tools for Web development, including the ability to edit, debug, and monitor the behaviors of CSS, HTML, and JavaScript live for any Web page you view. We can't live without this tool mainly because of the CSS editing capabilities. We can open a Web page in Firefox, activate the CSS editing tool in Firebug, and do live CSS editing, which makes our Web site development go much faster.
- YSlow: To use YSlow (https://addons.mozilla.org/en-US/firefox/addon/5369), you have to install the Firebug add-on. YSlow analyzes Web pages and makes suggestions as to how you can improve the speed and load time of your Web site by incorporating things like image size optimization, JavaScript, or CSS, or by reducing the overall size of your Web page. We use this tool every time we deploy a WordPress site to get recommendations on how to improve the site loading time.
- Web Developer: Web Developer (https://addons.mozilla.org/firefox/addon/60) adds a very helpful toolbar in your Firefox browser that gives you access to several types of Web development tools, such as CSS viewing, CSS editing, image information, browser resizing, HTML and CSS validation tools, HTML viewing and editing, and more. We use the Web Developer toolbar on a constant basis to help us develop, test, and debug Web sites that we create.
As much as we prefer the Mozilla Firefox browser, many users consider it somewhat of a resource/memory hog. We've experienced this as well, but it isn't enough to make us stop using it. However, we have to shut down and restart the Mozilla Firefox browser at least two times during a normal workday to prevent it from crashing our system with its resource use.
Other browsers
Three other Web browsers are used regularly, and although they aren't quite as popular as IE or Firefox, they're worth checking out:
- Google Chrome: Google developed and released this Web browser (www.google.com/chrome). You can download this browser only for Windows operating systems, at this time. Chrome has a smaller development community and has add-ons, dubbed extensions, that you can download and install, just like Firefox — although not as many . . . yet. You can find Web development extensions for Google Chrome on the Web site here: https://chrome.google.com/extensions/featured/Web_dev.
- Opera: The Opera browser (www.opera.com) is available for Windows, Mac, and Linux operating systems and markets itself as being fast, secure, and completely in line with open Web standards, including cutting edge development languages like HTML5 and CSS3. Opera has add-ons available as well, which you can find on its Web site here: www.opera.com/addons.
- Safari: Safari (www.apple.com/safari) is installed on every Mac operating system from the large iMacs to MacBook laptops to iPads and iPhones. In short, Safari is an Apple product; however, Safari can be installed on a Windows operating system. Rather than a bunch of add-ons or extensions that you can download and install for Web development, Safari has built-in Web developer tools, including
- • A Developer toolbar with tools used for Web site manipulation, testing, and debugging
- • A Web Inspector with a wealth of Web development tools, including an Elements pane where you can inspect CSS and HTML markup
- • A Resources pane that displays Web site resources by date, size, and speed
- • A JavaScript debugger
- • A Timeline pane that analyzes a Web site's behavior over time
- • A JavaScript Profiler that lists the performance characteristics of scripts that run on a Web site
- • A Console pane for debugging
- • A Snippet Editor to test HTML markup
Understanding cross-browser compatibility
Cross-browser compatibility is the practice of testing designs across all major browser systems and is important in Web design because you don't just design Web sites for yourself, but for an entire audience on the Web. Because you have no idea which browser your audience uses, it's essential that you test your designs in all the different systems to ensure that all the visitors to your Web site have the same experience.
The problem that Web designers run into with Web browsers is that each browser system uses a different layout engine that renders CSS differently. The difference in CSS rendering can sometimes make adjusting your CSS styling to account for the different layout engines a challenge. Additionally, not every layout engine supports all versions of CSS. Table 5-1 illustrates the different layout engines, the browsers, and the CSS version it supports to give you an idea of what you're dealing with when it comes to the different browser systems. More information on CSS versions, support, and validation is in Book VI.
Table 5-1 Layout Engines, Browser Types, and CSS Version Support
The absolute best way to test your Web site across the various browser systems is to download the browser to your computer and then load your Web site in it, checking for correct rendering as you go. However, if you only have a Windows computer, you can't really test your Web site on a Mac, and vice versa. Don't fret, though, because here are two alternatives for you:
- Browsershots.org: This is an online, browser-based tool. Visit the Browsershots.org Web site (http://browsershots.org), enter your desired URL in the Enter URL Here field at the top of the site, and then choose your desired browsers and operating systems. Browsershots.org takes a screenshot of your Web site in each of the browsers that you indicated so you can see what your Web site looks like in each. From there, you can fix any problems and retest again, if needed.
- BrowserCam: BrowserCam (www.browsercam.com) is another online cross-browser compatibility-testing tool that captures your Web site and takes a picture of it in different browsers. BrowserCam even has a tool that allows you to access its computers remotely so you can see your Web site in a live browser environment, instead of just getting a screenshot of your Web site. This service isn't free; the cost starts at $39.95 per month.