Some apps I live in, some I use as needed. Here are a few special-purpose tools that have saved me time and angst on my current projects.
- ExamDiff Pro (Windows). The freeware version does a great visual file comparison; the pro version ($35) lets you edit files inside the comparison panes, easily moving chunks of text back and forth. On my current job, the developers are working in their environment and I have my own space. When our files meet, ExamDiff Pro helps make sure the code (developers) and layout and style work (me) all come together with no muss or fuss. Learn more, download, and purchase at prestosoft.com.
- TopStyle 5 (Windows; $80). Most of my CSS work gets done in whatever HTML tool I’m using, be it Eclipse, Dreamweaver, Visual Studio, or SharePoint Designer. But when I need industrial-strength help, TopStyle 5 comes through. I use it to organize and format CSS (version 5 lets you collapse the CSS into sections) and to figure out why my CSS suddenly stopped working (thank you, style check). Learn more, download, and purchase at topstyle4.com.
- Trying to figure out what’s really going on with your styles and HTML? I use all the browser developer tools (Firefox’s Developer Toolbar is my favorite) but the Web Developer Extension for Firefox is the Swiss Army knife of browser forensics. Working on responsive design? Check out Resize > View Responsive Layouts. Disable your cache, display, outline, and hide page elements on the fly, run validations, view generated source, and so much more.
- The Ultimate CSS Gradient Generator. Got a button or a background that needs a gradient? Get your cross-browser CSS at www.colorzilla.com/gradient-editor.
I’ve been working to sharpen and add to my skill set and am participating in Aquent’s Summer of Learning, which focuses on HTML5.
The book used for self-study is HTML5 & CSS3 Visual QuickStartGuide by Elizabeth Castro and Bruce Hyslop. It really has me thinking about semantic markup, that is, using HTML elements, attributes, and values and ARIA roles to describe the meaning of the content. HTML5 introduces new container elements like
section that give information about the content based on the element name. ARIA roles (e.g.,
complementary) provide similar information targeted to assistive technologies like screen readers. Microformats such as hCalendar tell user agents that the strings within the HTML tags represent specific information such as a calendar event.
Of course, site users don’t typically view a page’s source to see the markup. Not one in a thousand will know if you followed best practices and used the element
i to place italics around a book title, the element
em to indicate that a word or phrase is being emphasized, and the
address element for the author’s contact information — all these will appear as italics unless you tweak the CSS to give them a different appearance. Users won’t know if you wrap the publication date in the new
time element using the
datetime attributes. (Browsers are supposed to display text based on
datetime‘s value but support for this is lacking.)
So, what’s the payoff?
Gleaned from Andi Smith blog post 25 Secrets of the Browser Developer Tools:
Access built-in browser toolbars by pressing F12 in Windows or Cmd-Opt-i on the Mac. The post includes a table listing browsers, development toolsets, type (integrated or add-on), and links to documentation.