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,
130 Editing Files and Testing Performance with WordPress Tools
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 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++ (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.

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

 

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.

 
Internet Explorer

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.

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.

 

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.

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 addons
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.

 

Google Chrome

Opera

Safari

Advertisements
Editing Files and Testing Performance with WordPress Tools

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s