Download and try it yourself

A short while ago I stumbled upon an interesting Hacker News conversation…

Intrigued by the challenge, I decided to implement the theory as a WordPress plugin for all to use. So here’s the gory details…

The Flow

1. User visits Login page
2. Login page Generates unique hash, saves hash to the database
3. Login page Creates QR code of a link that GET posts hash to the Plugin’s admin page
4. Via long polling Login page waits for a username to be inserted into the row in the database that has the page’s active hash
5. User scans QR code with mobile device and which is sent to Plugin’s admin page on mobile with along with the active hash posted via GET
6. In WordPress, the User must be logged in to reach Plugin admin page by definition
7. The Plugin admin page records the username to active hash in the database (the GET posted hash)
8. The Login page sees a change in active hash’s row of the database and reloads the page with a GET post of the active hash
9. Using the WordPress action init the page  receives the hash, finds row of active hash in the database and pulls the username, it then removes the hash from database so it can’t be reused
10. The page then logs in the User using the username pulled and redirects the User to the WordPress Dashboard

Notes

Alone, this isn’t a solution to never having to remember your passwords again. Your mobile browser has to have the logged-in cookies for it to work completely without password.

Why is it still useful? Well, everyone goes everywhere with their cellphones now, but with today’s mobility it means that you’re likely to find yourself with an urgent idea to post to your blog, and not wanting to type it out with your thumbs on your mobile. So, borrow Aunt Sally’s computer – that by all chance has thousands of suspicious apps, key loggers and, by the way, is running Vista – and to log in just scan away!

Ideally, it would work great with an app built to complement it that would scan the qr code, save your passwords, and log you in automatically if the local cookie had expired… Perhaps that app is in the works… Comment below if you’d like it and I may be swayed to create such a monster. Perhaps tiqr might want to gang up…

Is it secure? I’ve put several checks in place to make sure it is.

1. Username/password are never passed back and forth, only the unique hash.
2. Hash is removed from the database once it’s used, old hashes that haven’t been used can’t be unless the database is hacked, but then you have bigger issues.
3. All database queries of the hash have been escaped to prevent XSS attacks.
4. nonce added to ajax call.

I’m pretty sure that covers security. Anything else needed?

Suggestions? Comments? You know where that goes…

Special thanks to…

• 5 tips for using AJAX in WordPress
• PHP jQuery AJAX Javascript Long Polling - although the long polling solution I worked out with WordPress’ AJAX isn’t perfect yet.
• And of course @PeterLegierski for the original post on HN.

View the GitHub repository

Download and try it yourself

Add the following snippet to your LocalSettings.php OR includes/OutputPage.php file and it will insert the META tag ROBOTS NOINDEX, NOFOLLOW into the header.

As you know, the ROBOTS NOINDEX, NOFOLLOW tag will tell search engines not to index your site.

Why would you want that? Any number of reasons: you’re still developing it, it’s a private wiki for just you or a small group of people or maybe you want to block search engines to just to spite them.

The above snippet can be modified and used to insert any meta tag into the header of your mediawiki site.

I placed the code after defining the theme in my LocalSettings.php page and it worked beautifully. Not sure where specifically it should go. Please comment below if you know of a “best placement” for the code.

WordPress!

From conception to reality it took 30 minutes. I didn’t design the site from scratch. There are thousands of beautiful free themes out there. WordPress.org has a great way to filter through themes by the specific features you are looking for. For me it was like browsing through a toy store.

I have a multisite installation of WordPress set up so it was just a click of the button setting up a new site for her. Mapping the domain took about 30 seconds and enabling the theme another thought… Without multisite it would probably have taken 31 minutes, because WordPress is THAT easy to set up.

The only thing that took time was deciding on the theme, and then figuring out information structure – taxonomy etc.

We have plans to hack up / adapt the theme we chose to fit our needs better. It probably will look nothing like the original theme when we’re done. My only conundrum is at what point do I remove the author’s name (since he may not want his name on a hacked up site).

* * *

This was also my first opportunity to play with WordPress version 3.3. It’s a pleasure. The focus has always been on the user with WordPress, but now they took it to another level. Kudos guys!

Here’s three of my favorite features:

• The drag and drop multimedia embedder is wonderful. It makes adding images to a post almost frictionless (i.e. it’s almost as easy as sharing all your personal data with Facebook media partners.)
• The new admin menus are a pleasure to use; No more multiple clicks to get to submenus, Easy to navigate admin bar. I’m looking forward to playing with the admin area api. It should add the ability to make  themes as a product for clients a more professional package.
• Updated jQuery and jQuery UI. I’m a strong supporter of keeping supporting scripts up to date. This makes everything work better!

You can play with the final concept, which is still under development, if you’re curious.

Technologies/Techniques Used

Home - (a.k.a. “Meet Jack”) Responsive. Play with the screen-size to check it out. I found that media queries worked well here.

About - (a.k.a. “What You Can Expect”) I developed a jQuery plugin – “Pretty Titles” - then ported that plugin into a WordPress plugin. There are a few kinks that need to be worked before I release the plugins into the wild. Stay tuned.

How does it work? Essentially it takes the content from an element’s title attribute and presents that content in an absolute positioned element, near the mouse position, that can be custom styled. The script will also keep an eye out for markdown formatted URLs. I am considering incorporating a limited markdown in the final version, the question is really how to avoid loading down the browser.

Portfolio - (a.k.a. “Recent Notable Projects”) I had started building a responsive jQuery slider but once Smashing Magazine announced FlexSlider I didn’t really see the need to create another one. Mine was going to be smaller and with fewer features. But I was only half done… So I implemented FlexSlider with a few minor design and functionality modifications.

I ported the jQuery plugin into WordPress as a plugin. The plugin functionality is accessed via a shortcode and you can choose a category, a tag or children of a page to be used for the content for the slideshow. I also integrated the plugin with ColorBox so that I could display information about the slide easily. In order for this to run smoothly I added an option to the original plugin so that the slideshow would pause when a colorbox overlay was open.

I am as yet undecided whether I will release this as a WordPress plugin.

Testimonials - (a.k.a. “What Others Are Saying”) This is my plugin “Random Excerpts Fader“, which I built live at WordCamp Jerusalem. I modified the plugin to work as a shortcode. The updates are live and can be downloaded from the WordPress plugin repository.

Blog - (a.k.a. “The Conversation”) This was the first stage of the redesign. I stuck to a simple layout and made it fully responsive.

Contact - Simple form. The QR code was created via vCard2QR, which I created to play with the QR concept.

What’s Still Missing

As I mentioned above, this is only a partial version of the final concept.

I ran into several challenges keeping the page responsive while maintaining the long horizontal flow. Media queries are adequate when the flexible elements do not need to have a fixed vertical size. If the elements can grow the queries are only needed to make sure everything looks good. But if you have fixed elements, as I am implementing here, just keeping the fonts fitting inside the parent element is a challenge. It’s a work in progress, but no need to delay the whole project when there is a working minimum viable project.

And of course…. Optimize, optimize optimize.

In a nutshell:

Media queries are great. They are especially effective when building responsive websites. But they can be difficult to work out so that they cover every scenario. Media queries work especially well when your elements don’t need to have a fixed height, like with articles. But when your elements need to be a fixed height, what do you do then?

It’s a shame that the percent option with font-size isn’t a percent of the enclosing element – as percent works in other situations. So here’s a solution I came up with.

It’s a work in progress. One known “feature”, if you are relying on hidden objects overflowing this will reduce the font size until it is 1px making it illegible. Also, if you are relying on overflow hidden, this will mess with that as well.

Even though it is incomplete I’d like to get it out there for sake of the general conversation. Please share your thoughts, improvements below.

I wanted to use Optima for this site. I LOVE Optima’s stroke contrast, it is a beautiful elegant typeface. But it’s not a “Web safe font”, so what is there to do?

I like the Google font api. It’s a great project, except for the tiny setback that the fonts don’t render well in Windows… Oh well. Additionally, there really aren’t any fonts available with the stark stroke contrast that Optima offers.

There are services for $4 (typekit) – $10 (fonts.com) per month that I could use. They’re not too prohibitive. But, you know, it’s not just more money, it’s the price of the extra resource that I’m dumping on my visitors that I’d rather not do.

Initially, Windows, Macintosh, and other systems had only a handful of fonts installed. But that’s not true anymore. More importantly, considering the underlying concepts of Responsive Web Design we don’t really need to use the same fonts. We just need to add to our font-stack alternative typefaces to fall back on that look good with the weltanschauung of the site.

Amrinder Sandhu put together a great article discussing several font stacks that he re-builds in light of the Code-style font survey. It’s a good read on the topic. Another helpful tool is the font-matrix. Unfortunately it’s a little dated. (If anyone finds an updated version I’d be eternally grateful if they posted it in the comments.)

In the end I AM using Optima, if you have a Mac you are seeing the site rendered with it. I used Amrinder’s suggested stack, so if you’re in Windows you’ll probably be reading this with Segoe UI, which was Microsoft’s “poster child” sans-serif, quite literally.

In my search for a good font-stack for “Hoefler Text” I came across a fun tribute to the typeface.

The bottom line is:

Just as different devices offer different screen sizes, and we should embrace these differences and build our sites to accommodate for them, so too we should embrace the different fonts available on different platforms and get creative with our font stacks.

Background: Read the other day about Twitter announced Bootstrap from Twitter. Immediately I dug in, like I do whenever I see something cool, to see how it works. (I am excited to start playing with it and will blog about it soon.)

When first landing on their Github page I saw:

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

It’s always exciting for me to discover new tools. If there’s a better way to do something, I want to know damnit! Even if it gives me brain-freeze trying to wrap my noggin around it.

So I dived into Less, and I’m loving it.

LessCSS

First impressions?

IT COMPLETELY CHANGES THE CSS3 GAME. How? When using the new properties we know and love from CSS3 like border-radius or linear-gradient one of the most annoying factors is having to use so much duplicate code to manage.

A bit of history: CSS3 collects features that different browsers added over the past few years with the hope of creating a standard. In order to access these features in each of the different browsers you need to add the browser specific prefix to access the functionality.

For example, if you would like rounded corners, you need to do this:

 border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius:5px; 

Eventually it will all merge into the single property “border-radius” but with the speed that browser upgrades go we’ll be seeing these prefixes for awhile.

Unfortunately that can be annoying to develop with. If you’re like me, and you’re trying to get the exact right border radius, you’ll try a few before settling in on what you like the best. That means changing the value in several different places each time you change your mind. It’s reminiscent of the days before css when we had to change the style values on each html page to make global stylistic changes. Not as bad, but c’mon!

And that’s one place where LessCSS really is fun – Mixins! Or in other words, variables/closures.

The border radius above in LessCSS can look like this:

Now every place you want rounded corners you can just pop in:

 #header { .rounded-corners; }

or

 #footer { .rounded-corners(10px); } 

(Examples shamelessly stolen straight from LessCSS.org, more on site.) You don’t like how the radius came out? Change it one place. Change it everywhere! So my first thoughts were to create a template that included all the CSS3 special features with the correct mixins. I did this for a bit, and got to play with some of the fun inner workings of LessCSS. It got a little complicated once I started adding in the MS filters. MS filters aren’t actually CSS, but can achieve some of the functionality of CSS3 in Internet Explorer browsers 6-8. Since they aren’t actually CSS, you have to escape them in LessCSS to compile the files properly, but they still can use variables. So a vertical gradient for IE6-8 would look like in the last two lines below:

Then you can just pop in the mixin anywhere. { .gradient; }

mixins.less

Most of the conversion was pretty straightforward; however, when looking for solutions on stackoverflow for sin/cosine conversions in LessCSS JavaScript evaluations I came across the complete job done.

mixins.less is on GitHub available to all. It covers, as far as I can see, pretty much any CSS3 property

Ouch! I had to redeploy the plugin with the correct path.

But not anymore! Since those early days I discovered this neat line of code hidden in the all-knowing WordPress Codex.

$pluginBase = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));

via Function Reference/plugin basename « WordPress Codex.

pop that line into your plugin at the top and you won’t have to worry about where anything is.

A big problem – specifically for people who enjoy developing on macs – is that you cannot easily run Internet Explorer on a mac. Now, with the Intel macs you can run Windows, and thus run IE. But it can be costly. There’s $120 for Windows 7 itself. If you don’t want to reboot every time you want to check your site in IE you have to put down another $80 for some virtual machine software – Parallels Desktop and VMware Fusion are both pretty good. If you run one of those you really should have at least 4GB RAM, another $50 (Amazon $30 if you catch a sale). The list can go on but you get the idea.

There’s the cheap route of running Wine but I found that that only worked reasonably well with IE7 and there’s not install package for IE9. It’s a great project in theory, but unfortunately not a solution.

Back to Hacker News. The original link seemed dead. It might be that the server of the link submitter goes back up at some point. But one user posted a link in the comments to xdissent/ievms a project in GitHub.

“Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. Unfortunately, setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. These scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE6, IE7, IE8 and IE9 running in separate virtual machines.”

It sounds incredibly promising! A free way to run Internet Explorer on my mac! Awesome!

So I tried it. (Instructions below, as I posted to Hacker News)

1. Install virtual box –  Go with the “VirtualBox 4.1.2 for OS X hosts x86/amd64″ option.
2. Copy the command that is most relevant from you from here: the Github repository (starting with ‘curl’)
3. Open up your terminal window paste, hit the ‘enter’ key
4. Hit the town, it can take some time, depending on your connection speed that is.

Note: #4 is relevant. It took a few hours. Downloaded at an average speed of 1mb/s. 11+minutes per package of 700mb. The first installation will have 7 parts (each additional installation – IE8/ IE9 – has 4 parts each). That’s about an hour and a half for one installation.

First drawback:  Finally, after the script ran, I was down 30GB space on my hard drive. Compared with VMware which only takes 10GB, for a 3 year old Macbook 30GB can be a LOT of space!

Second drawback: After trying it out it seems that while “Microsoft provides virtual machine disk images to facilitate website testing…”  Microsoft only provides it if you are running off an activated version of Windows. So It’s not free either.

Considering those two drawbacks I deleted the installations – which was no easy task, most of the bulk of the files were in hidden directories stashed in nowheres land.

Conclusion: If you already own a valid key for Windows 7, have a hard drive with a lot of space on it, and are considering buying virtual machine software. Check this out – it’s a good alternative. It’s a very convenient script.

Otherwise…

Sigh.

There are no free lunches…

Hopefully one day we will be able to not waste our time checking our sites in Internet Explorer, whether that means that a CONVENIENT tool becomes available, so it’s not a waste of time, or perhaps IE will die someday… Yeah right!

Update: As a result of writing this post I got a beta invite to BrowserStack - an online, in browser, cross browser, development tool. It looks promising. More about it to come…

Reading the following two sentences were the Ah-HA experience of the book for me:

“Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them.”

I remember when working with one of my previous clients I was asked to redo one of their pages and I was surprised to see how much duplicate code a previous Front-end developer had used on the page. One example, there were several tabs on the page I was working on and some of the content in the tabs overlapped. But instead of using the same content and simply changing the style to match each tab my predecessor had loaded up the DOM with duplicate content – overloading the browser memory and slowing down page load. In addition, the content was filled via a query to their database, so that makes two queries for every time the page was loaded.

In contrast, the last place I worked put a strong emphasis on implementing Object Oriented philosophies in Front-end functionality. I’ve been known to implement OOP from time to time – just like the next guy – but there is a conceptual jump between its application in the visual realm vs. the world in which it developed – server side, heavy lifting.

When you need to do visual work it doesn’t necessarily come intuitively to abstract the code pieces so that you can reuse them elsewhere in different circumstances. But when making AJAXed content pages, once I took the extra time at the beginning to map it out it saved a lot time with future pages and, of course, ran much more efficiently. (We’re talking about a reduction of 30 seconds in load time…)

Object Oriented CSS

The application of Object Oriented concepts to front-end projects doesn’t stop with Javascript. The main two principals upon which Object Oriented CSS is built on are:

1. Separate structure and skin.
2. Separate container and content.

This abstraction allows for the creation of reusable modules a.k.a. classes that can be applied across your site. If you want the same feel – that would be a skin class. If you want to keep similar paddings / layouts – you’d use a container class. The term “class” is pertinent here. I’m not sure I’d use the framework that the project has put together. It’s not bad, it’s just another framework to work with… But the systematic approach they apply did helped me flesh out techniques I had already been implementing (said content page with duplicate content above).

Object Oriented Web Design

Reading about Ethan Marcotte’s Responsive Web Design was familiar to me because it is essentially another application of principals above. But here, the skins are restyled to fit the media upon which the content is viewed.  The model is the same, it’s the view that needs to be optimized per device… and our media queries work as a wonderful controller.

Abstracting the content from container is extremely powerful. Having played with responsive design for a bit now, I don’t see why I wouldn’t build my webapp to work equally well in mobile AND computer browser – and no need for that pesky mobile subdomain everyone is using these days.  Since native apps mean that your user will have your icon sitting there on their mobile desktop, I don’t think that responsively designed webapps would replace native apps — not to mention the power you can only truly tap into when developing natively.

That being said, a startup can get their concept out there much quicker with much less funding up-front using a service like phonegap, and only having to invest in web developers to get off the ground. It’s all just different facets of the same beautiful web.