Hey is this you on here? Twitter scam

Joanne just received a Direct Message on Twitter from someone she follows, but doesn’t actually know. It read “Hey is this you on here?” followed by a link and looked like this:

Twitter Scam: Direct Message reading "Hey is this you on here?" with a link

The link took her to a site that looked like Twitter and asked for her Twitter password:

Twitter Scam: Screen shot of the scam site which is designed to look like Twitter.

If you receive a similar DM, do not click the link or enter your password.

If you have entered your password, you should change your Twitter password now.

Other people seem to be having the same problem. There also appears to be variant: hah, I think I seen u on here.

The site appears to be down now, so hopefully this scam has reached its end.

Update: The scam site is back up now. I took the opportunity to add a screen shot in the hopes that it makes it more easily identifiable, as it’s a slightly different look and feel from the current Twitter design

Using Tweetie 2 with StatusNet

I already posted about about using Tweetie 2 with identi.ca.

I’ve been toying with the idea of running most of my microblogging through a StatusNet (formerly laconi.ca) installation, so I thought I’d see if Tweetie 2 worked with my test installation of StatusNet. It turns out, it doesn’t work. Replies, messages, and search all work. Timeline, however, doesn’t work, and returns a “Not found” error.

After some poking around, I finally figured out what the problem is. Tweetie 2 uses the new statuses/home_timeline Twitter API call. The current release of StatusNet (0.8.1) doesn’t support statuses/home_timeline.

It looks this API call will appear in the next release, as there is a commit to the StatusNet git repository that adds support for it.

At the moment, you have three choices. You can run the development version of StatusNet, you can wait for the next version of StatusNet to be released or you can apply the changes in the commit to version 0.8.1.

I went for the latter option, and can confirm that StatusNet works with Tweetie 2 if you apply the changes. You can download my tweaked files, if you don’t want to apply them yourself. (Note that these files come with no guarantee, and I take no responsibility for any issues that you might have with them.)

Also note that Tweetie 2 has username collision issues, so you can’t currently use more than one account that has the same username.

Using Tweetie 2 with identi.ca

I’ve been playing with Tweetie 2 for the iPhone this evening. As I was browsing the documentation, I noticed that you can set a custom API root. This means that you can use Tweetie 2 with microblogging services other than Twitter, including identi.ca and status.net (formerly laconi.ca) installations.

I thought I’d give it a go, and it appears to be working rather well. Here’s how to do it:

When adding a new account, click on the gear icon just to the right and under the Password field.

Tweetie 2 Add Account Screenshot

This will take you to the Advanced Settings screen, where you should enter the following details:

  • API Root https://identi.ca/api
  • Search API http://identi.ca/api
Tweetie 2 Advanced (API Root) screenshot

Then simply return to the Add Account screen and add your identi.ca Username and Password.

Most features appear to be working, although I haven’t tested this thoroughly. If you try it, let me know how it goes.

Update: Unfortunately, it seems that setting up identi.ca with the same username as a twitter account on Tweetie 2 somehow overrides the settings of the twitter account. Both my identi.ca and twitter usernames are “otrops” but they use different passwords. Now when I try to refresh my twitter stream I’m greeted with an “Unauthorized. Coul…” error message. I’m assuming this wouldn’t happen if the either the usernames were different or if the passwords were the same (not that I’d endorse using the same password). I’ve added this to the atebits Get Satisfaction identi.ca thread. Apparently I’m not the only one who has this problem.

Update 2: Atebits has replied on both Get Satisfaction and on twitter. The twitter / identi.ca username collision is a known issue and is being worked on.

Save Ernest Marples

If you’ve ever developed or been involved with a website that uses UK postcode data, you already know about the fees Royal Mail charges to use their database. This is great for Royal Mail (it earns them roughly £1.3 million a year), but for websites that are providing a public service that requires postcode-based geodata, it’s a nightmare.

Earlier this year, a few people decided to do something about this and created ErnestMarples.com, which provides a postcode API to not-for-profit websites such as PlanningAlerts.com, Jobcentre Pro Plus and The Straight Choice.

Last week, Royal Mail issued a cease and desist letter to ErnestMarples.com, effectively shutting down not only ErnestMarples.com, but all of the sites that depend on their API.

This has been covered elsewhere by the Open Rights Group, Tom Watson, The Guardian Free Our Data blog and Boing Boing. Since they’ve already done a stellar job of discussing the issues surrounding this story, I’ll keep the rest of this short:

This whole thing makes no sense to me. The postcode database was created with public money, yet Royal Mail demands exorbitant license fees for the use (or perceived use) of postcode data from sites that are providing a free public service.

If you’re as baffled by this as I am, I encourage you to sign the petition, which asks the Prime Minister “to Encourage the Royal Mail to offer a free postcode database to non-profit and community websites.”

Update: You can also vote for a free postcode database on the OSPI site.

(Thanks to Joe Lanman, who pointed me in the direction of a recent thread on the MySociety mailing list and got me thinking about this issue.)

Real time trends? There’s a map for that.

Every year since 2006, the good folks at iA have released a web trend map (2007, 2008). It maps the biggest online trends onto the Tokyo Metro Map (PDF). If you spend far too much time on the web, love maps (especially transportation maps) and appreciate finely crafted information design, the web trend map provides hours of fun.

This year’s map is no different. Actually, it is different. If you buy the printed version of the map, you also get private account on the new Web Trend Map website. With an account, you can create your own web trend map to track the trends, websites and people that interest you in real time.

Matthew Solle, one of the organizers of London IA, has created a London IA Web Trend Map (shameless self-promotion: I’m on there).

And it’s not just useful for tracking London IA people.

Want to learn more about fonts? There’s a map for that.

Want to know what’s up with the tech community in San Francisco? There’s a map for that.

Just need some inspiration? There’s a map for that, too.

(Sorry, I couldn’t resist.)

I’m particularly excited that iA is planning on introducing RSS for Web Trend Maps. This means I should be able to replace entire folders in Google Reader with a single, curated feed.

If you choose not to decide

Note 21 August 2014: I found this in my Drafts. Usually the things I find among drafts are pretty fragmented. There’s some unfinished thoughts here, but it’s largely finished. It’s also the kind of thing I’ll likely want to come back to. So I’ve decided to publish it largely as I found it (under the date when it was written).

I’ve made a decision. It’s taken me a while: over two years, in fact.

In the short term, I’ll be focusing my career on front-end web development and accessibility. My longer term goal, however, is to shift my career slightly to become a user experience designer.

How I got here

I’ve been working on web sites for over ten years now. In that time, I’ve been a web designer (though I’m not a great graphic designer), a front-end developer, back-end developer, seo expert, sysadmin, database administrator, network administrator, information architect, and manager. I could probably think of more roles I’ve fulfilled.

For the past few years, I’ve been considering a career change. I wasn’t enjoying what I was doing, but I didn’t really know why. For a while, I was seriously considering a much more drastic career change: going back and finishing a biology degree I started over fifteen years ago.

As I thought about it, though, I realized that I enjoy working on websites. I came to the conclusion that what I was dissatisfied with wasn’t the industry I was working in, but the way I was working. I felt I had no real depth of knowledge. I knew a bit about a lot of things, but very there was no one topic that I knew well. In other words (and very cliched words at that), I was a jack of all trades. And master of none.

I’m tempted to say that I didn’t choose this, but in the immortal words of Neil Pert, “If you choose not to decide, you still have made a choice.” I never made a choice. In fact, I refused to make a choice. I refused to focus on one thing.

I’m curious by nature. I took things apart as a kid — the phone system in our house, doorknobs, my Speak ‘n’ Spell. The web and the internet were the ideal playground for me. I wanted to understand how everything worked. It was exciting.

The small companies where I’ve typically worked have given me the opportunity to explore. If something needed to be done, I was happy to volunteer for it if it meant I’d learn something new.

And so I went on, never focusing on one thing. Learning a bit, and quickly moving on to the next thing that needed doing.

In the end, learning about everything wasn’t nearly as satisfying as I thought it would be. In a strange way, it feels as if I’ve learned about nothing at all, though I know that’s not true. Nevertheless, the time has come to actively choose a path.

Why User Experience Design?

Once I decided that what I needed to was choose an area to focus on, it was immediately clear that the path I should pursue is user experience design. There are at least three reasons why this was so: my life before I became a web developer, my early influences as a web developer, and what excites me about the web now.

I started learning web development while I was studying cultural anthropology at the University of Texas. For much of the time, I loved cultural anthropology. Although my initial interest was in folklore, I became fascinated by how people communicate (or fail to communicate). I eventually dropped a biology double major in order to focus on cultural anthropology and linguistics.

Early in my career as a web developer, I read two books that had a lasting impact on how I think about the design and implementation of websites. They were Information Architecture for the World Wide Web and Web Navigation: Designing the User Experience. Much of what I have tried to do as a web developer (front-end or back-end) has been based around what I learned in these two books. In short, make it as easy as possible for people to find what they are looking for.

My decision to pursue user experience design also stems from where I see the web going. Part my fascination with user experience derives from the idea of interface. A website is the place that a person interacts with a computer. That’s interesting. It raises all kinds of issues. How does the person get the computer to do what you want? How can that be facilitated? How can it be made intuitive? How can it be made more human, and less like you’re dealing with a machine.

Increasingly, though, a website (or web application) is a place that people interact with each other. This is even more fascinating. We’re not just dealing with information retrieval anymore. It’s not just about making it easy for people to find information. It’s about communication, interaction and conversations.

FIX THIS: All of this Web 2.0 stuff takes me right back to what I was learning when was studying cultural anthropology. User Experience Design gives me the chance to combine what I’ve learned over the last few years with what I learned in university.

MIGHT BE RELEVANT: This partly sums up what has been happening for the last 10 years. I tried to keep a widely varied skillset up to date while trying to aquire new skills.

What we need to do is to consciously start closing some of our doors….We ought to shut them because they draw energy and commitment from the doors that should be left open–and because they drive us crazy.

From http://bookoutlines.pbworks.com/Predictably-Irrational

Also, Nicole Sullivan’s baking bread comparison.

I get to think about how to make sites better?

Another font-face test

While researching something else at work today, I came across Fontin sans by Jos Buivenga. I was immediately struck by it. Something about the hint of a serif in a sans-serif really appeals to me.

When I came home and looked into it further, I was surprised to find that the font was freely available and that the license explicitly allows font-face embedding.

This turned out to be too much to resist, and I thought I’d try another font experiment.

Guided by the web font demo over at Ralf Herrmann’s Typography Weblog, I used Fontin sans for the headers and navigation on this blog and Fontin for the body text.

I’m pretty pleased with the results. At some point I’ll redesign this blog, but this is enough of a refresh to keep me happy for a while. At least until I see some other font that strikes my fancy.

Typekit Test

Late Friday evening, as I was working on my UXCampLondon presentation, I received a Typekit invitation. I haven’t had the chance to try it out until now.

So, I’ve run a quick test of Typekit on this blog. For the moment, I’ve chosen to use the Trial account, which has a fairly limited selection of fonts.

This morning, I was in something of a Charles Rennie Mackintosh mood, so I’ve chosen to use Hicks Design’s Hill House for the headings on this site.

If you are on a browser that supports the CSS3 @font-face rule (Internet Explorer 4+, Firefox 3.5+, Safari 3.1+), then this blog should be Art-Nouveau-tastic.

So far, I like Typekit. Registration and signup was fairly straightforward. Browsing the fonts for the library you are currently subscribed to is easy, and the tags make it even easier to locate an appropriate font. And Typekit’s JavaScript and CSS instructions make installing the fonts on your site a snap.

I had two minor issues, both concerning font browsing

The first is that I’d like to be able to search for a font. I knew I wanted to try Hill House. It would have much easier to search for it, rather than try to guess which tag it would fall under. This turned out to be pretty easy with the relatively small Trial Library, but I suspect this will become more important if I upgrade to one of the larger libraries.

The second issue concerns deciding whether or not I want to upgrade. I haven’t found a way of browsing Typekit’s Personal and Full font libraries. I’d like to have a look at the fonts before I make a decision to upgrade. I’m currently deciding whether or not to upgrade, and Typekit’s libraries page (you’ll need a Typekit account to see that page) only displays the names of the fonts.

All in all, Typekit is a fantastic service if you want to embed fonts that you would otherwise have to pay large sums of money to license. I suspect I’ll probably be paying for the service., but I really would like to be able to see what I’ll be getting before I make that decision.

Update: As you can see from the comments, the two issues that I flagged in this post are known issues, and should be resolved soon. Given the responsiveness of the Typekit team (and on a weekend, too), I’ve upgraded the to the Personal Plan to get a look at all those fonts I’m missing.

Update 2: I’ve just noticed that TypeKit has added “view the fonts” links on their libraries page, which makes evaluating the fonts before you buy much easier.

WordPress Mobile Plugins

I’m currently taking the W3C’s Introduction to Mobile Best Practices. Having only briefly looked into mobile web design before, the course has been an eye-opener. I still have quite a bit to get my head around, and I thought I’d share some of what I’m learning.

Module 4 has an optional assignment to validate three websites in the W3C’s HTML validator, CSS validator and Mobile OK checker. I decided to give a few mobile-friendly WordPress plugins instead of checking different websites.

I checked four plugins – WordPress Mobile Edition, MobilePress, WordPress Mobile Pack and WP viewMobile. I didn’t test any plugins that required API keys or used third-party applications, primarily because I’m interested in learning as much as I can from the code.

For each plugin, I give an overview of how the plugin works and a screen shot of the plugin in the iPhone and Opera Mini Simulator. I’ll try to cover any installation issues, where the themes are stored and where to find the configuration. No two tests were the same, so I also give some quick notes on changes I made to the plugin or the validators in order to make the tests work.

Finally, I give the results for each validator with some notes.

No Plugins

First, here are the results of this website without any mobile plugins, so you have something to compare to:

HTML Validator
This document was successfully checked as XHTML 1.0 Strict!
CSS Validator
This document validates as CSS level 2.1 !
mobileOK
70/100
Page Size – 120KB (document: 35KB – images: 85KB)
Network – 11 requests (document: 1 – images: 10)

6 Errors

  • [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.
  • [severe] The total size of the page (123359 bytes) exceeds 20 kilobytes (Primary document: 36118, Images: 87241, Style sheets: 0)
  • The size of the document’s markup (36118 bytes) exceeds 10 kilobytes
  • [low] The embedded image or object is not of type image/gif or image/jpeg (image/png)
  • The document is served without caching information (“Expires” or “Cache-Control” header)
  • [low] HTTP status code 4xx other than 404 (Not Found) or 401 (Unauthorized) received

WordPress Mobile Edition

WordPress Mobile Edition screenshots

To install WordPress Mobile Edition correctly, you have to manually move the default theme into the WordPress themes directory.

The configuration options appear under “Settings > Mobile”, and allow you to set the User Agent strings for mobile and touch devices.

The default theme (carrington-mobile-1.0.2) will serve a different CSS file for touch devices (iPhone, Android, WebOS, etc). The theme places both navigation and a search box at the bottom of the page.

Aside from presenting a cut-down theme, WordPress Mobile Edition doesn’t do any advanced content adaption, such as image resizing or dividing pages into smaller chunks.

Testing Notes

I modified the plugin settings to include “W3C-mobileOK” in the list of Mobile Browser User Agents.

I passed the &user-agent=mobileok query string to the HTML Validator, as outlined in the User Documentation for the W3C Markup Service.

Passing a user-agent URL query string doesn’t seem to work on the CSS Validator, so each of the three stylesheets was validated by passing the URL directly to the CSS Validator.

Testing Results

HTML Validator
This document was successfully checked as XHTML Mobile Profile 1.2!
CSS Validator
  • style.css – 4 errors (all border-radius errors, as it was validating against CSS 2.1)
  • css/touch.css – 1 error (Property -webkit-text-size-adjust doesn’t exist)
  • css/advanced.css – 39 errors (all appear to be CSS 3 related: :last-child, text-shadow, border-radius)
mobileOK
88/100
Page Size – 11 KB (document: 5KB – stylesheets: 6KB – images: <1KB)
Network – 3 requests (document: 1 – stylesheets: 1 – images: 1)

3 Errors:

  • [low] A length property uses an absolute unit (CSS)
  • [low] The inputmode attribute of this input element is invalid.
  • The document is served without caching information (“Expires” or “Cache-Control” header)

MobilePress

MobilePress screenshots

MobilePress‘s configuration options appear under their own “MobilePress” top-level heading.

Like WordPress Mobile Edition, it swaps your theme for a mobile-friendly theme when it detects a mobile user agent; however, it doesn’t allow you to edit the list of user agents used for device detection. It does allow you to treat the iPhone, Windows smartphones and Opera Mini as a regular website. I’m not sure how useful this is, however. It also allows you to force the mobile site for the whole site, which comes in handy during testing.

Themes are kept in a separate themes directory inside the mobilepress plugin directory, which makes installation pretty straight-forward. You can install other themes in this directory, and the plugin will allow you to choose between these themes from the WordPress admin interface.

In the default theme, both search and navigation are placed at the bottom of the page.

Like WordPress Mobile Edition, there is no advanced content adaptation.

Testing Notes

As with WordPress Mobile Edition, I passed the &user-agent=mobileok query string to the HTML Validator. No changes to plugin were required, as it seems to recognize the W3C-mobileOK User Agent.

To test the CSS, “Force Mobile Site?” was set to “Yes” in the MobilePress configuration screen.

Testing Results

HTML Validator
Errors found while checking this document as XHTML Mobile Profile 1.0!
These were due to input tags being direct decendants of the form tag. A well placed div or p tag would resolve the issues.
CSS Validator
This document validates as CSS level 2.1 !
mobileOK
98/100
Page Size – 7KB (document: 7KB)
Network – 1 request (document: 1)

1 Error:

  • [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.

WordPress Mobile Pack

WordPress Mobile Pack screenshots

The WordPress Mobile Pack from dotMobi is fairly fully featured, and includes a device switcher, device adaptation (e.g. resizing images, partitioning pages), removing large media and more.

Configuration appears under “Appearance > Mobile Theme”, “Appearance > Mobile Widgets”, and “Appearance > Mobile Switcher”.

It is slightly more complex to set up due to the fact that the plugin needs write permission to move the themes to the WordPress theme directory and to cache the images optimized for mobile.

It comes with four themes: WordPress Mobile (base), WordPress Mobile (blue), WordPress Mobile (green) and WordPress Mobile (red). The themes all include navigation at the top of the page, but no search box.

Testing Notes

For the purposes of testing, the WordPress Mobile (base) theme was used.

As above, I passed the &user-agent=mobileok query string to the HTML Validator, and pasted the CSS URL directly into the CSS validator.

Testing Results

HTML Validator
Error found while checking this document as XHTML Mobile Profile 1.1!
Caused by an empty <ul> (with no child <li>s) tag in the sidebar. Probably due to me not setting up any widgets.
CSS Validator
This document validates as CSS level 2.1 !
mobileOK
98/100
Page Size – 6KB (document: 6KB)
Network – 1 request (document: 1)

1 Error

  • [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.

WP viewMobile

viewMobile screenshots

WP viewMobile fairly easy to install. The configuration screen is found under “Plugins > viewMobile”.

The viewMobile “default” theme is in a themes directory inside the viewmobile plugin directory. The theme places navigation at the bottom of the page, but has no search box.

In addition, viewMobile is able to resize images (though it doesn’t have a cache folder so I’m assuming it’s doing this on the fly).

Testing Notes

I added “W3C-mobileOK” to the comma separated list of User Agents in the Options.

As above, I passed the &user-agent=mobileok query string to the HTML Validator, and pasted the CSS file’s URL directly into CSS Validator.

Testing Results

HTML Validator
Errors found while checking this document as XHTML Basic 1.1! (4 Errors)
duplicate IDs
badly formatted lists
CSS Validator
This document validates as CSS level 2.1 !
mobileOK
97/100
Page Size – 10KB (document: 10KB)
Network – 1 request (document: 1)

2 Errors

  • [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.
  • [low] The size of the document’s markup (10265 bytes) exceeds 10 kilobytes

Conclusion

In terms of the number of features dotMobi’s WordPress Mobile Pack is clear winner. Unless I run into any major issues, it is the plugin I’ll use on this blog, as it gives me much more to play around with.

Nevertheless, the themes that come with the WordPress Mobile Pack are less than ideal. They feel a bit clunky, and I prefer the navigation on the bottom (out of the way) on a mobile site.

As a part of the W3C Mobile Web Best Practices course, I’ll create a custom mobile theme for this site. I suspect I’ll be basing this heavily on the Carrington theme that comes with WordPress Mobile Edition. It’s nicely done, and the CSS3 features work well on the iPhone.

I hope this gave you an idea of the mobile functionality that is available for WordPress. If you have any questions, or if there’s anything you think I missed, let me know.