Dinner with Jetpack

Jetpack logo on a green background

The head of the Jetpack team lives in Albuquerque. I live in Albuquerque. When the Jetpack group got together for a meetup of their own in Albuquerque, they decided to invite the entire WordPress community to a Dinner with Jetpack meetup.

The meetup was in a Thai restaurant near the UNM campus. Jetpack people from all over were there. Australia, Argentina, and several other far-flung locations. I talked with the guy from Australia about ways Jetpack could get Pinterest to work with WordPress without adding blocks of code to new posts. He gave me some ideas I will try.

I talked to a woman from Wyoming who works in HR and hired all these Jetpackers. She came down to ABQ to meet them in person.

It’s refreshing to go to a WordPress meetup, but this one was particularly nice because so many people came. I talked to bloggers, WordPress developers, and WordCamp organizers. I saw some former students. I saw people I’d met at WordCamps. I even saw a woman who was in the same hotel in Chicago as a BlogHer convention I attended and happened to be on the same plane home that I was on. Everyone wanted to talk about blogging and social media and topics I love.

Thanks to the Albuquerque WordPress community for a great evening.

Preview of “What Comes Next is the Future” UPDATED

What Comes Next is the Future

What Comes Next is the Future is a documentary film about the future of web design as envisioned by the people who build the web.

Here’s the film description:

What Comes Next Is the Future is a documentary film about the web created by Bearded founder Matt Griffin. It is the story of Tim Berners-Lee’s creation – how it came to be, where it’s been, and where it’s going – as told by the people who build it.

In the film, Griffin knits together a narrative by mining dozens of conversations with important figures from throughout the web’s history including Jeffrey Zeldman, Denise Jacobs, Tim Berners-Lee, Ethan Marcotte, Chris Wilson, Lyza Danger Gardner, Eric Meyer, Irene Au, Alex Russell, Trent Walton, Val Head, Jonathan Snook and many more.

After you watch the preview, go to the futureisnext.com site to see to the list of cities and dates for viewings or to sign up for updates. Update: the film is now available free on Vimeo.

Thanks to Eric Meyer for mentioning this documentary on Facebook, otherwise I might not have heard about it. Hope my mentioning it here helps even more people become aware of the film.

Image ©Bearded

New Accessibility Tutorial for Learners and Educators

The Paciello Group announced a new online interactive tutorial called Teach Access. The tutorial is well organized and allows the learner to do some coding and see the results. It’s a result of work done by The Paciello Group and the Teach Access organization.

Learners are encouraged to use Voice Over to verify results of their coding efforts. Instructions for using Voice Over are included.

Something this tutorial does that you don’t often see is offer instruction in ARIA attributes such as ‘aria-labelledby’ and ARIA roles such as ‘list’ and ‘listitem’.

Following the exercises involving code, there is a section on design principles that talks about color contrast, text size, copy writing, and photos and videos.

This tutorial is a very useful site for anyone who wants to learn about writing accessible web sites.


W3C’s WAI Creates Perspectives Videos for Accessibility Understanding

an image of a man with burned toast
Just as we all like different degrees of doneness in our toast, users need to be able to change the way text is displayed — changing the size, spacing, font, color, and more — in order to read the text. When text is changed, no information or functionality should be lost, the text should re-flow, and users shouldn’t have to scroll horizontally to read sentences.

A wonderful new resource from the W3C is a set of very short videos called Web Accessibility Perspectives. The videos take a particular aspect of web accessibility such as keyboard compatibility or clear layout and design and show how they are essential for people with disabilities and useful for everyone.

I picked one at random, the text to speech one, to share here. There are 10 videos in all. They are perfect for use in a class about accessibility or just for learning something about web accessibility if you’re trying to understand it yourself.



Attribute Selectors: All the Bells and Whistles

There are many types of selectors in CSS. If you’re still making your way through the darkness with nothing more than a few element selectors, a few classes, some ids, and the occasional pseudo selector, you need to find your way into the light with attribute selectors.

I wrote about Attribute Selectors in CSS back in 2008, but there are 3 new types of attribute selectors in CSS3. And they have good browser support.

Attribute Selector Basics

The basic syntax is to name an element, with an attribute in brackets following it, then give the CSS rule.

element[attribute] {
some rules here;

This rule, for example, would target any image with a title attribute.

img[title] {
some rules here;

This rule would target any anchor element with an href attribute.

a[href] {
some rules here;

Beyond that basic type of attribute selector, there are several operators can can be used to refine or broaden what you are selecting.

Using an equals sign, you can add specific values to the chosen attributes, making the selector even more precise. For example,

img[title="mybunny"] {
some rules here;

a[href="http://blogher.com"] {
some rules here;

The first example would select any image with the exact title attribute “mybunny.” The second would choose any link going to exactly “http://blogher.com,” but not to, say, “http://blogher.com/tech.”

The ~= operator select elements with an attribute value containing a specified word.

i [lang~="en"] {
some rules here;

This would match any italic element with a language attribute of English.

The |= uses the syntax |= to match hyphenated elements. This most often is used in rules targeting specific language declarations, where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is:

body [lang|="en"]{
some rules here;

New in CSS3

The ^= operator uses the caret (^) with the equals sign to select what something begins with. It will match elements that have an attribute containing a value that starts with the specified value. For example,

a[href^="https:"] {
some rules here;

That selector would match only anchor elements with an href that began with https:.

The *= operator will match elements that have an attribute which contains the specified value somewhere in the attribute value. For example,

a[href*="blogher.com"] {
some rules here;

That would select any anchor element with an href value that contained blogher.com somewhere. This gives you a much wider sweep than the simple = operator.

Finally, the $= operator uses the dollar sign ($), which matches to elements that have a  specified value at the end. Examples:

img[src$=".gif"] {
some rules here;

a[href$=".doc"] {
some rules here;

These two examples would select only image elements ending with .gif or only href attributes ending in .doc.