Using mousemove and touchstart to Detect Touch Devices

So you know I love hovers. I was recently trying to implement a hover that has the image as the link, and on hover the text of the link appears. The information that is hidden and shown on hover is vital to understanding what the link is and where it goes. Something that without knowing, a user might never want to click on the link. This hover/focus interaction works perfectly fine for keyboard and mouse users, but what about touch?

With touchable desktops coming out and tablets the size of tvs, using media queries with max-device-width isn’t as reliable as it used to be to show the hidden information by default for “mobile sized” devices. This led me to a few different searches for a new solution.

Josh Clark wrote about it the dilemma here: http://globalmoxie.com/blog/desktop-touch-design.shtml and talks and about how we have to design our UIs for touch. Great points, but going back to design wasn’t an option here.

I looked into Modernizr, but there are a slew of issues opened right now (such as https://github.com/Modernizr/Modernizr/issues/548) that investigate how to make touch event detection more reliable without setting off false positives.

In this case, false positives using Modernizr wouldn’t be the worst thing in the world, as that falls back to the Josh Clark approach of designing for touch first. But we tried something else anyway..

Mark Huot and I opened up Codepen and decided to try out a few different tests around using the mousemove function. We figured, hey if there’s a mouse movement, it’s not touch right? This kinda worked, but we quickly found out that clicking on links on our iPad or clicking anywhere on our Android fired off the mousemove function. So that didn’t work. We ended up with a few different functions, until we finally reached this: http://codepen.io/Jenn/full/ALHEf

We style for touch first by default, so the product information shows. Then after the mousemove function fires, a class is applied of ‘hover-on’. With this class we adjust the styles appropriately to set the hover opacity to 0 and then to 1 on hover. Touch devices should never get that class, and therefore, always show the information.

When touchstart occurs and someone clicks on a touch device, it unbinds the function and never receives the class.

The down side, when you first load the page, until you mouse within the document you will see the information and then it will hide once you mouse anywhere. Adding a transition on the opacity will at least ease this so it’s not so jarring. Maybe you might even like it as an indicator to your users that there is more info???

This relies on touchstart running before mousemove, which in our limited tests it has. Please let us know what you find if you can test it out! Thanks!

Check out this Pen!

ExpressionEngine to Tumblr

I’m manually moving my EE posts on jennlukas.com over to Tumblr. True story: I once went from MySpace blogs to EE!

I’ll miss EE and it worked well for my site for a long time but I plan on having more of a static site and then linking off to Tumblr/my blog since I love tumblr so much.

I often get asked how many Tumblrs I have. I’ll say more than 10, less than 30. With my most updated ones being http://fuckyeahhovers.tumblr.com/ and http://sexhobbit.tumblr.com/.

With this in mind, since I’m already in the Tumblr interface adding pictures of Buster Bluth photoshopped into Game of Thrones, it reminds me to post on my personal tumblr or the Nerdary (which is also on this here Tumblr…yes right this second I am tumblring/tumbling/bloggin/what do you call it! ) I never remembered to update my personal site very often. So hopefully this move will help.

I started to look into ways to migrate with less effort, but meh, it’s been interesting to reread all posts and format them properly anyway, plus I only had 35 posts to migrate, most of which are +/- lists which honestly, I probably could’ve let go.

Though, have any of you migrated from EE to Tumblr before with luck? 35 posts just seemed like something to just knock out.

I was going to post this on my new tumblr, but decided to give it a home on the Nerdary, though it’s not too much code samples exactly. I was thinking about writing about the redesign process of my site, but not sure if I should do it on jennlukas.tumblr or the Nerdary…I wouldn’t want to get in the way of all these Laravel posts! :$

Anywhooo let me know if this is something that would not interest you. (This means I will take silence in comments as a go ahead…take that commenting)

Laravel 4 Primer

Great news! Laravel 4 is out!

Mini-review

Laravel 4 is a different kind of framework than its predecessor, and that comes with its own pluses and minuses. The documentation isn’t fully fleshed out (for example, try finding the URL class in the documentation easily) and the learning curve is much steeper to understand the system. Yet, Laravel 4 is a very fast framework with some very smart design decisions and still a pleasure to use once you get over the initial hump of understanding the hows and whys.

In my use of it, I’ve found 4 to be an excellent framework, yet I’m sad to see the simplicity of the 3 codebase disappear. Laravel 4’s new internal architecture certainly makes it more stable, faster and well tested. In the process it trades off findability and legibility. Composer is a welcome addition. Also, unit testing with the framework is really great.

One need only use it with composer to see how great Laravel 4 is, but as an example of its jekyll/hyde problem, we can talk about the URL class. Not only is it not documented, but try and find class URL in the codebase? You’ll find yourself going down some roads and eventually find yourself at class UrlGenerator. Laravel obscures the setup of these classes behind the Facade. As it heads towards purer object-oriented form, with dependency injection, it loses some simplicity.

I wish Laravel would use the new shortened array syntax and just bump the requirement up to PHP 5.4. Why can’t Laravel be the framework that is forward-looking? Compatability with outdated versions of PHP is what makes PHP programming so frustrating.

On a final note, I was a bit jolted by the new Laravel website’s sponsorships plastered everywhere. It’s not a dealbreaker, but I found it tacky. They’re not very subtle.

With those gripes out of the way, it’s a very fun piece of code. Taylor did a great job and I really look forward to its future.

Community

The Laravel community is outstanding. It’s reached the point in a community lifespan of a bunch of exciting publications and blogs, and we’re almost nearing the “Why I left Laravel” blog posts of a community’s growth.

I highly recommend you go to Laracon EU. Laracon in the US was a really fun conference and it’s a great time to meet other Laravel folks.

There’s a #laravel IRC chatroom on Freenode, which a lot of people visit. Also the Google Plus Community is active.

I’ve tried to put together a list here of great resources.

Websites

  • Laravel: The website for the framework.
  • @laravelphp: The twitter account for the framework.
  • @taylorotwell: The creator of the framework’s twitter account.
  • Laravel.io: A great site that is being positioned as the Laravel community HUB. You can check out the wiki, read Laravel Weekly and it’s the official home of the forums.
  • Laravel Podcast: This podcast just started, so no promises on its longevity. The first episode mostly talks about how everyone loves Laravel. I’m excited to see what becomes of it.
  • Jason Lewis: An excellent community member and prolific patron of the Laravel IRC channel.
  • Laravel on nettuts: Jeffrey Way is probably the best Laravel writer going right now. He’s also the best screencaster, coincidentally (sorry, Taylor).
  • Fideloper: Chris Fidao writes about Laravel on his blog. His Laravel 4 Uber-Quick-Start is one of my favorites.
  • Dayle Rees has some excellent articles on his site as well.
  • Laracasts: An index of Laravel screencasts. Make sure to submit yours if you have them.
  • Dries Vints: Writes Laravel weekly and also some great quick tips.
  • Max Surguy: Another prolific and informative Laravel writer.
  • Niall O’Brien: I’m running out of adjectives to describe prolific and informative Laravel writers, but he’s one of them.
  • The Nerdary: While not Laravel-centric, I write about it a lot. I think Mark Huot (another writer on this site) uses it as well, but I’m pretty sure he’s dead.

Articles

Here are some articles to give you a good feel for using 4.

Books

There are already two books out for the just-released framework.

  • Laravel Testing Decoded: Jeffrey Way has written a book on writing tests for Laravel 4. He constantly churns out excellent material, so it’s easy for me to recommend this book. It’s only $15.
  • Laravel: Code Bright: This is a follow-up to Code Happy. It’s easy to recommend this to support Dayle Rees, because he’s such a great member of the community. However, Dayle’s writing style is very informal and verbose. While I thought the previous book was worth the $10, if Code Bright continues in the same format and casual style of its predecessor, my instincts say $30 is a bit much. For $30, it should have an editor.

Composer Packages

Laravel 4 opens up the world of composer packages. With these you can start rapidly implementing new features without reinventing the wheel. Here are some of my favorites:

  • Guzzle: HTTP framework. Great for making API, OAUTH, etc. request.
  • Amazon AWS: Amazon built an official provider for their services. I’m using it in my current project and it plays in Laravel nicely.
  • Carbon: Carbon makes DateTime fun!
  • Mockery: A nice little mock object library.
  • Basset: I’ve not used Basset, but I hear about it a lot. Mr. Lewis just released a screencast on it. Maybe in my next project…

Did I miss something?

There are a ton of active members, blogs and material in the Laravel community. If I missed someone, please put it in the comments so that other readers may enjoy it. Self-promotion is fine! Tell me which articles and materials or people I should look up.

Testing Laravel Controllers

Jeffrey Way is such a prolific writer on the topic of Laravel. I particularly enjoy this excellent article on writing tests for controllers. You should support Jeffrey by signing up for tutsplus and soaking in all his knowledge.

You can also pre-order his book on testing. He’s an excellent instructor.

Laracasts

You know what’s great? Laravel. You know why? Because people throw together stuff like Laracasts, a central place for Laravel screencasts.

They don’t make the screencasts there, they just find them so you can click and learn.

Lovely.