It’s a WebKit World

Opera is moving to WebKit. This means Opera, Safari, and Chrome will all use WebKit. Firefox stays it’s sticking Mozilla’s rendering engine.

In announcing the news, Opera said,

“The WebKit engine is already very good, and we aim to take part in making it even better. It supports the standards we care about, and it has the performance we need,” says CTO of Opera Software, Håkon Wium Lie. “It makes more sense to have our experts working with the open source communities to further improve WebKit and Chromium, rather than developing our own rendering engine further. Opera will contribute to the WebKit and Chromium projects, and we have already submitted our first set of patches: to improve multi-column layout.”

Sometimes having a monopoly on something, even a browser rendering engine, is a bad thing. In this situation, where we are dealing with an open source tool, I think it helps make keeping up with changes easier for everyone. I’m not saying competition isn’t good for innovation, but with open source you eliminate some of that concern for a loss of innovation.

With devices sizes all over the place, and responsive design/responsive images best practices scrambling to keep up, having major browsers all on the same page could be a good thing. Plus, browser prefixes be damned!

 

Why every front end developer should work for Marissa Mayer

iPhone 5
iPhone 5 image from apple.com

Business Insider just published an article with the misleading headline Marissa Mayer Just Gave Every Yahoo Employee an iPhone 5. Every Yahoo employee worldwide is getting a new smart phone. The choices do include the Apple product mentioned in the headline, but are actually these:

  • iPhone 5
  • Samsung Galaxy S3
  • HTC One X
  • HTC EVO 4G LTE
  • Nokia Lumia 920

Mayer stated the reason for these company issued phones – which are replacing Blackberries – by saying,

Ideally, we’d like our employees to have devices similar to our users, so we can think and work as the majority of our users do.

My headline for this article was a bit of an overstatement as well. (Sorry.) I don’t really think every web dev needs to work for Marissa Mayer. But I do think she’s on to an essential principle of creating for the modern web: mobile rules the experience for many people.

Her move is fairly dramatic and will emphasize to all her employees that the mobile experience should be considered in everything they do. The mobile first, responsive design notion is gaining ground in the web design world, to be sure, but a dramatic move such as Marissa’s on the part of web educators to emphasize the concept is called for as well.

In computer labs all over the world, teachers could show budding developers how to put a shiny new web site on a server. Show them how to find it in a browser. And, as a standard practice in the classroom, have them look at it in their smart phone too. Students and front end developers need to look at their web sites with devices similar to their users just like Yahoo employees.

Are any web educators out there already making like Marissa Mayer and doing this in their classrooms?

4 Tools to Add a Pinterest “Pin it” Button Anywhere

Pinterest is more than a social networking site, it is a new addiction. Just as Facebook and Twitter have become a daily part of the average citizens life, so to has Pinterest become a pinnacle of the day to day actions of many women in particular. Making social media the official drug of the modern day, and growing in use by the moment.

But do you feel like your recent Pinning just isn’t enough? Do you wish you could expand it to other pages and sites? Especially since so many are either not compatible with the Pin It button or actually blog direct repinning now?

If this has become your greatest online desire, then you are in luck. There are four different tools that will help you to expand your current Pinterest arsenal.

Pinvolve

Pinvolve

Originally, there was no need for this tool unless you were a frequent double sharer, and so needed to be able to work more quickly and efficiently. But now, Facebook has blocked users from repinning directly from their site. Which is weird, given the fact that you have a logon option using your Facebook account.

The reason that they did this is unclear. It might be that grown slowed a bit for awhile, and they decided to start putting some distance between the two. Or maybe because Pinterest has more appeal for women than men, and so cleaves their user base in half.

Which is where Pinvolve comes in. It allows you to create a link between the two, so you can pin images found directly on Facebook like you used to. It works as a Facebook app, so you just add it to your Timeline. It lets both you and your friends use it, for your own content. Which might be a little annoying, as you have to put it on your profile first.

But the general usefulness makes it less aggravating, and it is worth adding.

Pin It Button

Pin It Button

This is a general Pin It button that has been slightly extended as a Chrome plugin. It works by increasing the number of websites that allow you to pin images. Think of it as an update to the original, which isn’t compatible with many sites on the web thanks to their style of older coding, and the relative newness of Pinterest as a site.

You can also see the “pin count” for each website you visit, similar to those that show how many times you have been tweeted or shared on Facebook. So when you combine it with other tools, such as Pin Search, you have a really comprehensive toolbox that allows you to get the most out of Pinterest.

Pinterest Button Extension for WordPress

Pinterest Button Extension for WordPress

What could be better than a Pinterest button for the blogging powerhouse WordPress? Not much. You can finally add a Pin It button to your WP blog, thanks to his excellent extension by WooCommerce. It is easy to use, and great as it will specifically configure to your blog when you integrate it into your general widgets.

Of course, there is one downside. In order to use it, you have to have the WooCommerce extension, which can be downloaded through their official WP plugin profile. But it isn’t a huge inconvenience, and it is the best WP Pinterest button I have found.

Flickr

Flickr

Pinterest has been accused by many sites as promoting (if indirectly) the pilfering of copyrighted images without proper credit. Which has led to many refusing to participate in pinning, putting up blocks similar to those used by Facebook to keep from content being pinned on their site.

However, Flickr is one of the first to get around this by allowing pinning that also includes direct attribution with every taken image. This includes an active link and a mention of the photographer or artist name.

For the first time, people on Flickr can participate and even gain a certain amount of followers through this method. It is a great tool.

Conclusion

Pinterest is an excellent website with a lot of potential. As the popularity of image sharing spreads, the tools for better utilizing the resource will increase. Until then, these four options give you a way to expand your pinboards across the web.

Guest Author is the SEO manager at PsPrint, Chicago commercial printing company specializing in business card and poster printing among other popular services. Find him in Google+

How to Improve YouTube on Chrome

Like other browsers, Google Chrome can be use plug-ins and add-ons to improve or enhance your experience. There are a number of extensions that improve viewing video on YouTube. Here are several.

  • Looper lets you click once to make a video repeat endlessly or until you’ve had enough, whichever comes first.
  • YouTube Feed. If you have a YouTube home page, this extension will notify you when a new video is added.
  • Toggle Comments makes a video open with the comments hidden, but they can be toggled into view of you should want to read them.
  • Fancy Tube does several things such as automatically set the video to HD, block ads and some other fancy stuff.
  • Picture in Picture lets you dock a video in the corner of the screen so you can do other tasks while it runs.
  • Turn Off the Lights makes the surrounding page fade to dark.
  • YouTube Ratings shows you the likes and dislikes bar when you hover over a thumbnail so you can see ratings before you watch.
  • YouTube Options works on YouTube and other video sites (Vimeo, Dailymotion, Metacafe, G4TV, FEARnet, Funny or Die, Hulu, The Escapist,  Dump). With it you can disable ads, change resolution, pre-buffer, download media and more.
  • Music Video Lyrics lets you see the lyrics for videos you are watching.

Vendor prefix issue roundup – UPDATED

Articles about the issue of -webkit vendor prefixes are flying fast. Here’s a summary of what I’ve seen about it. Use it to follow what the discussion is about.

Browser Support for new HTML5 Structural Elements

The new structural elements in HTML5 include section, article, aside, hgroup, header, footer, nav, figure, figcaption, time, and mark.

First, let’s look at support in Internet Explorer. Starting in version 9 of IE, there is support for all the new elements. Versions prior to that provided no support, not even partial.

Other browsers have been supporting these elements for some time. Firefox support extends back to version 6. Firefox is currently at version 9. Chrome, now at version 16, has supported these HTML5 elements since version 13. Safari provided partial support before version 5. Full support began in version 5. Safari’s current version is 5.1. As for Opera, partial support began in version 11, full support in 11.1. Opera is currently at 11.6.

On the mobile side, iOS has supported everything since iOS4. iOS is currently at version 5. Even iOS3 had partial support. Opera Mini is providing partial support in the current version 6. However, Opera Mobile has offered full support since version 11.0. Opera Mobile is currently at 11.5. Android versions 2.2 and above, including the current 2.3/3.0, have full support.

When only partial support is provided, you can use CSS to declare a display:block rule for all the new elements and workaround the problem.

Check out HTML5 Please for information about current support (and workarounds) for everything in HTML5.