At first I thought I’d triggered something with a new application, or maybe my monitor’s brightness was wonky. That led to checking my color calibration, taking eyglasses on and off, and asking for a second opinion from my wife, “Does this look faded or washed out to you?” She confirmed it. “That looks really hard to read.”

I slept on it, trying to think of what apps or settings I’d tweaked recently. After a quick Google search this morning, I found out I’d accidentally upped the system-wide Universal Access contrast with a keystroke combination of Cmd-Opt-Ctrl-,—via this result. Turns out that with the Dvorak keyboard layout this keystroke combination is really close to Cmd-Opt-Ctrl-e, the keys used with window-resizing app called Divvy—an app I invoke often.

If you see whitewashed, faded colors in Mac OS X chances are you also turned on the “Enhance contrast” settings in System Preferences → Universal Access. To fix it go to that pane and change the slider back to “Normal”—or hit Cmd-Opt-Ctrl-. (with a period instead of a comma).

It’s time again for WordCamp San Diego 2012. Sat Mar 24 and Sun Mar 25 will be two days filled with WordPress geeky goodness, a full conference on Saturday and a developer hack day on Sunday.

I’m speaking in the Developer track on Saturday at 2:10 pm—my topic is Theme Busters R Us:

Breaking themes for fun?! Crazy talk. Busting your WordPress theme–on purpose–can be both fun and useful. The process is a crucial part of building sites with WordPress, whether it’s for a client project, a personal blog, or releasing an awesome new theme to the world.

See the rest of the talks on the full Saturday schedule; there are two tracks to choose from (End User, Developer) with great speakers and topics.

If you’re not at the event you can still join in, the talks will be live-streamed. Check the WordCamp San Diego 2012 website for details.

The overall topic was the Open Web. Understanding its history, key technologies, and important concepts. Molly presented over two full days, with interludes and additions by special guest Kimberly Blessing (who also took photos).

Even considering myself an industry veteran—I’ve worked full-time on the web for over seven years, I learned new things and solidified several of my weak areas. I highly recommend this workshop to anyone who works on the web. And, Molly organized the weekend on her on time—and her own dime. Thanks Mols!

Here are my notes from the sessions.

Open Web

Preserving the infrastructure of the web so it remains open to everyone.

What is the Open Web?

1. Dedication to open standards
2. Use of technology should be unobtrusive
3. Recognition of the web as an application and document platform
4. Encourage open, organic groups such as WHAT-WG and microformats.org

Groups like these extend what is coming from W3C to begin implementing things faster, and start using technology now.

Making research and development part of your process—part of your team workflow—keeps a conversation open. We are serving a much larger future.

Core principles

Transparency and authenticity

From a browser vendor’s viewpoint this means allowing dev previews, blogging about changes. IE (Internet Explorer) is doing a great job with this.

Connectability via APIs

JavaScript (JS) is the most-used programming language on the planet. You get a JS compiler, interpreter on almost all devices.

Open specifications

These things need to go through the patent exclusion process.

Error forgiveness

Allow people to make mistakes.

Additional thoughts to go with core principles.

Freedom of Social Forms—an idea coined by Brad Neuberg from Google. Look at things beyond what they are or are not.

The [Open Web] is big enough to support many forms of social and economic organization, including ones we haven’t imagined yet.

The Many Things Rule—an approach to a problem with a broader perspective. Something you make can be used by other people and for other applications.

User experience (UX) and front-end development are key skills for working with the Open Web.

Core technologies

- HTML5
- CSS3
- JavaScript

Also discussing:

- video and audio
- Visual technologies: canvas and SVG

Under the JavaScript umbrella are things like XmlHttpRequest (XHR), what we now know as “Ajax” (note the spelling). Originally conceived by Microsoft to allow Outlook for the web.

HTML

History lesson first. WHATWG first came out as a grassroots movement, with Ian Hickson (was at Opera, now at Google). It was the first time that all major browser makers agreed on a single spec: HTML5. The working group had 800 invited experts!

Recently, Ian’s announced it’s no longer known as “5″, saying it’s a living standard. It’s more mature than any version of HTML, and no longer a draft.

He stirred the pot, recently, with the (now reversed) decision to remove the time element in favor of data. Molly mentioned all the jokes that sprung up around this. One web dev says to another, “Say, do you have have the “? One guy, scarily, making changes and everyone is letting him.

Molly defines HTML5 like this:

HTML5 is a vocabulary and set of application programming interfaces that make up a core declarative language for web sites and web applications.

Pop quiz! What is the only required element for a valid HTML document? title element. Because HTML is based on SGML, the rest was added later to be declarative and provide structure for layout.

HTML5 design principles

1. Support existing content
2. Ensure interoperability
3. Define user agent (UA) behavior instead of leaving it open for implementors to interpret for themselves. Best practices come from real world usage.
4. Better error handling
5. Evolve, not re-create

A fun mollyquote:

The Open Web is threatened by the three As: anarchists, Apple, and asshats.

application/xml MIME type was not supported by any version of IE, until the most recent version—after XHTML was already declared dead. Oh, the irony.

Avoid XHTML5 (which is just plain stupid). What it should be called is XML+HTML. It’s used mostly for internal projects by people who want facilities that come with HTML5 but need to serve XML.

HTML5 Media APIs: goal is to replace plugins with native solutions: video, audio.

Molly here discussed the H.264 codec war. It is not an open or web standard, it carries a $5 million/year cost. Alternatives include OGG (considered unencumbered, “probably, probably never going to get sued for rights”).

Another mollyquote:

At Opera we called it H.666

[Lance side note: Molly mentioned OGG being developed by Thomas Dolby. I didn't see any mention of his name at http://en.wikipedia.org/wiki/Ogg.]

Video progressive enhancement means using the video element with H.264, OGG, WebM, and Flash as the last fallback.

canvas

It’s bitmap (not vector), great for 2d animations and games. You design with JavaScript. Immediate mode versus retained mode, meaning instant gratification. Used and abused for text-shadow and special details that are totally irrational. Not built as a web element (came out of Apple)

SVG

Far more accessible, vector-based. Good for interaction, shapes. Allows access to the DOM. Google indexes it.

Other technologies related to HTML5

Device-related APIs, Wholesale Applications Community (WAC). It’s like the open web for mobile.

HTML outlines

[An interlude by Kimberly.]

In HTML5 each of the sectioning elements starts a new tree. section, article, aside, nav. You can start again with an h1 as the top-level heading inside of each sectioning element.

Understanding divisions versus sections. section is *not* a replacement for div. div still has meaning (which is “null”). It’s a division. section is different because it changes the document outline, div does not.

(More info)

CSS

Molly says this is a “polyfill class”—filling in the gaps in our understanding, making sure we know the correct terms and definitions. Using the terminology is super important, a team should use a shared terminology.

History lesson: 1994 saw the beginnings of CSS, based on print technology. Hakom Lie and Burt Vos came to the W3C, they were document specialists and from the print world.

CSS rule structure

selector {
	propery: value;
}

The code within the braces is the declaration block, property value pairs are declarations. In CSS, rules are the basic building block

Important note: inheritance != cascade. [Lance note: I am often confused on this point.]

Inheritance is the document tree: ancestors/parents/children. Any property that is inheritable will be applied down the tree until another rule overrides it farther down the tree.

Cascade answers the question, “What is the origin of the style?”

1. Browser (user agent)
2. User
3. Author
   1. Inline
   2. Embedded
      1. Imported
   3. Linked (external)

Quick !important story. It used to be the other way around in CSS1, user styles came last in the cascade.

Reset method puts the author in control, makes the user agent styles a level playing ground. Linked stylesheets: leaving the media attribute out, it defaults to “all.”

Sort order within the cascade: inline, embedded, author. User styles override browser (but not author!). Rule: closest to the content overdrives other rules (after specificity is calculated). But !important in user trumps !important in author.

[Lance joke interlude: is the best way to classify a raunchingly humorous site.]

pseudo classes are things like a:hover and a:focus.

The “combinator” is the selector symbol used to denote the relationship between the selectors.

- [space] descendant
- [>] child (only down one level)
- [+] adjacent sibling
- [~] general sibling

Complex examples can be solved by the “nth child” selector, like table striping. Adjacent sibling combinators are great for “when these two occur together” and make them appear differently.

[Interlude: clearing floats with overflow]

Kimberly says you don’t need a width on the parent element. If you have overflow: hidden; you can sometimes get a scrollbar when you see an outline on the element; to get around it add padding-bottom: 1px;.

Overflow to clear floats is not a hack, it’s right from the spec.

[Back to CSS.]

Pseudo-elements like :first-line, see also generated content with :before and :after. Nice use would be an href display for print CSS, to show the full URL on the printed page.

We should all learn about how browsers work: re-render, re-paint, re-flow.

Positioning

- relative is “offset”—it’s calculated relative to itself, in the normal flow, the content does not move up to take its place in the flow.
- absolute is taken out of the flow, now placed according to the nearest positioned ancestor (the ancestor does not need any offset, just a position propery), or the root element in the tree (HTML element).
- fixed is out of the normal flow, placed according to the viewport. This was not supported in IE6.

Coming soon to CSS:

- The flexible box model
- Multiple columns
- Template-based layout
- Grid positioning, “snap to” idea of placing elements

See Jina Bolton’s work with template-based layouts.

Random notes from the workshop

“Web project manager” needs to be a named and defined role; it’s the missing piece in web production teams … aka Tech Lead.

We’re in the era of dev ops, everyone needs to know the full stack.

Important note: jQuery != JavaScript

The best interface for web APIs is HTTP + HTML. Send a web page, let the receiving service parse it.

What is ontology? A vocabulary. Molly mentioned OWL; XML languages for each industry, “Web Ontology Language”. (Wikipedia)

Photos

Kimberly took a few photos at the workshop: Web with Molly on Flickr. Including the featured photo shown for this post—thanks Kimberly, for being a part of the workshop.

That’s right folks, WordCamp Phoenix is coming up this weekend, Fri Feb 24 through Sun Feb 26. Three days of WordPress geeky goodness, including full-day workshops on Friday, the conference on Saturday, and an “unconference” on Sunday.

I’m speaking in the “Jumpstart” track on Saturday at 10:30 am—my topic is Navigating the Theme Landscape:

Learn what types of themes are out there, how to find and choose a theme, and dive into basic modifications to your theme so it fits you perfectly.

See the rest of the talks on the full Saturday schedule; there are three tracks to choose from, and lots of great content.

I’ll also be working the help bar Saturday, from 2:15 pm onward. Come say hi!

Let’s talk WordPress, Arizona. More info: http://2012.phoenix.wordcamp.org/

Update Feb 26: Slides and links to all the themes and resources I mentioned are here: http://themeshaper.com/jumpstart/

Update Mar 8: The video of my talk is now online at wordpress.tv: http://wordpress.tv/2012/03/08/lance-willett-navigating-the-theme-landscape/

I talked last Friday about commercial themes on WordPress.com with Ryan Imel of WPCandy, looking back one year after launching the service. Here are the links to listen to the interview.

• Full-length interview: Community Interview with Lance Willett about commercial themes on WordPress.com.
• Shorter version, edited into the latest WPCandy podcast: WPCandy Podcast 31: Moar commercial themes edition.
• And a fun, 10-minute postlude, talking about upcoming WordCamps and people in the WordPress community with hard-to-pronounce names: Aftertaste #2: After the Interview with Lance Willett.

Thank you to Ryan and his crew; they do a superb job of covering all the WordPress news and events, day in and day out.

Reblogged from Andrew Spittle:

"The best support is a conversation." So true.

Using WordPress to blog, to publish, to communicate things online that once upon a time would have been relegated to an unread private journal (or simply remained unspoken, uncreated, unshared) makes you a part of one of the biggest changes in modern history: the democratization of publishing and the independent web. Every time you click Publish, you are a part of that change, whether you are posting canny political insight or a cat that makes you LOL.

Help Stop SOPA/PIPA

A new year and something new for me. I am joining @artgillespie and @espressojunky at the best little iOS shop in Tucson @tapsquare—
Sam DeVore (@sdevore) December 30, 2011

Projects & Opening Files

mate Quickly open files from the command line—a simple yet powerful technique. You can also use it to send output from other commands into a TextMate document. For example, take stdout and open in TextMate: ls | grep foo | mate. Or just open a file: mate foobar.txt.

Dragging files or folders to TextMate icon on the Dock creates a new project with the selected items. Running mate on a directory or set of files will make a new project in TextMate.

Cmd-t Find a file in a project quickly. Super handy if you have tons of tabs open, or files nested deep inside folders.

Example of Cmd-t to open a file quickly.

Cmd-Ctrl-r Reveal current file in project drawer. Great for when deep down in a nested project and you need to see the context.

HTML

Ctrl-< Make an HTML element from a word file. This is smart enough to know the self-closing tags (img, hr, br, input).

Ctrl-Shift-w Wrap selection in HTML tags. Useful for wrapping a bunch of lines with lis when making a list.

Ctrl-Shift-l Wrap text as a link, taking URL from clipboard.

Cmd-Opt-. Close an element, based on the opening tag.

CSS

Cmd-Shift-c Insert a color value from the OS X color dialog, adding it to the current document as a hexadecimal value.

Ctrl-q Format CSS, also works in other formats like HTML.

! Type an exclamation point then use the tab key to insert !important quickly.

PHP

Cmd-Opt-] Align assignments for code prettification, like in arrays or variable declarations. Select the lines you want to align, and then invoke the command.

Ctrl-Shift-' Toggle single/double quotes. For example, if your cursor is inside the quotes on the word node in code like this: array( "node" ); you would use this command to toggle to single quotes.

Ctrl-Shift-v Check syntax, also works in other formats.

Cmd-/ Comment/uncomment a line or block, also works in other formats.

Esc Complete a word based on the current document. I use this one often, especially for super-long variable names in PHP files; I just type the first few letters of the variable and hit Esc until I find a match.

Text

Ctrl-u Convert text to uppercase. Use Ctrl-Shift-u for lowerase and Ctrl-Opt-u for title case.

F5 Sort lines in the document, with an option to remove duplicates.

Ctrl-s Inline search: keep hitting the same command to find the next result in the document.

Opt-click Select columns and edit. Multi-line editing with column selection in TextMate is pretty sweet. This functionality can save lots of time by editing multiple lines in the document at the same time. It’s hard to explain with text and a screenshot, so here’s a video example: http://macromates.com/screencasts, look for Working With Numbers & Columns.

Commands & Snippets

TextMate is at its best when you extend it with your own snippets and commands to go along with all the great ones that come bundled. For example:

utc Add a UTC time stamp in any file, using `date -u +%D\ %R` UTC as the snippet triggered when you type those letters and hit tab.

bbug Add border: 1px solid red; to a stylesheet for a quick CSS debug in a browser.

See Using TextMate for WordPress Code Cleanup for two useful commands: removing trailing whitespace from files and changing spaces to tabs at the beginning of lines.

Finding commands and snippets within all the options available in TextMate can be challenging—unless you commit their shortcuts to memory. Enter one of my most-used keyboard shortcuts in TextMate (bundles are groups of commands and snippets).

Cmd-Ctrl-t Look up a bundle item, greatly useful if you forget a shortcut, or need to find something obscure. It only shows results for your current file type, but you can override it by typing in ALL CAPS.

I use this one all the time since I don’t want to memorize the shortcut for every possible command or snippet. Instead I just start typing a few words, hit this command, find what I need in the list, then apply it with Enter.

Example of finding a bundle item with Cmd-Ctrl-t.

Much More

There is so much more to TextMate, of course. Macros, Subversion integration, lots of great add-ons like AckMate and ProjectPlus, and the list goes on.

Further reading:

• TextMate Basics Tutorial
• TextMate Screencasts
• TextMate tips and tricks wiki
• Roger Johansson’s TextMate productivity tips
• TextMate shortcuts you should be using