Monday, October 12, 2015

The 10 Best Mechanical Keyboards for Professionals

Is a mechanical keyboard essential to your workflow? Probably not. You can get your typing tasks done with any old keyboard. But if you’re looking for a comfortable, precise, and satisfying typing experience, nothing beats a mechanical keyboard.

Why Use a Mechanical Keyboard?

If you have a job that demands a ton of time typing — web development, web design, IT, and journalism are some professions that fit the bill — investing in a high-quality keyboard can lead to a more productive and enjoyable work experience.

I’ve used many keyboards in the past: Generic $9.99 replacement keyboards, stock keyboards that come free with a new desktop PC, high-end gaming keyboards, laptop keyboards, ultra-portable wireless keyboards, you name it. A mechanical keyboard has been my preference for the past three years. Here are some reasons why:

  • Delight: Mechanical keyboards provide you with a fantastic typing experience. Each keystroke feels gratifying and authoritative, unlike on a common dome-switch keyboard, which feels mushy. I sit in front of the computer 10 to 12 hours a day, so putting money into my hardware goes a long way towards improved comfort and productivity.
  • Speed and precision: Accentuating a key in a mechanical keyboard results in some form of tactile feedback, telling you that you’ve pressed the key successfully. Also, unlike dome-switch keyboards, you don’t need to press a key all the way down (called "bottoming out") in order for your keystroke to register. This results in increased typing speed and fewer typos, especially when you’re touch-typing.
  • Build quality: Good mechanical keyboards are sturdy and durable, being able to bear the brunt of your keystrokes for years without any degradation to your typing experience. With dome-switch keyboards, which rely on a soft rubber or silicone membrane, the typing experience may gradually change the older the keyboard gets.Under the hood of a dome-switch keyboard. Source of photo: wikipedia.org

Once you start using a mechanical keyboard, it will be hard to switch back to an ordinary keyboard. I use a laptop as my main work machine, but I have a mechanical keyboard hooked up to it 99% of the time. Also, after three years of hard use, my go-to mechanical keyboard still looks and feels exactly the same as the day I got it.

Lifehacker has a good intro to mechanical keyboards that you should read if you’re new to the keyboard technology.

Drawbacks of Using a Mechanical Keyboard

Mechanical keyboards aren’t perfect. Here are some reasons that might make you think twice about using one:

  • Cost: A good mechanical keyboard will set you back $80 to $300, making them a great deal more expensive than your run-of-the-mill keyboards. A lot of my recommendations in this article are in the $100 to $160 range, and three of them are over $200.
  • Noise: You have to be careful about which type of mechanical keyboard switch you go with if you’re concerned about noise. Mechanical keyboards are notorious for making a racket. The noise level will be a key factor for you if you work in an open office space. Watch this video on the Techquickie YouTube channel titled Mechanical Keyboard Switches as Fast As Possible to help you make an informed choice. For a more detailed guide, see the Keyboard Switch guides on Reddit.
  • Bulk: Mechanical keyboards are hefty. They’re generally bigger and heavier compared to standard keyboards.
  • Wires: Most of the good mechanical keyboards in the market are wired. Only one mechanical keyboard on this list is wireless.
  • Not designed for portability: Because of the size,weight, and wires of a typical mechanical keyboard, they’re not easy to lug around. You won’t be able to chuck them into your laptop bag as easily as portable wireless keyboards. If you’re always on the go, often working in coffee shops with tiny tables, a mechanical keyboard may not be the best option for you.

The Best Mechanical Keyboards for Web Professionals

The technology in mechanical keyboards is old. It resurged in popularity because of computer gaming. Mechanical keyboards offer gamers better keystroke precision and speed, and the durability required to withstand the wear-and-tear that comes with marathon gaming sessions.

But modern mechanical keyboards aren’t just for gamers. They’re also great tools for coders, IT professionals, designers, writers, journalists, and others who do copious amounts of computer work.

After a ton of research — hitting up review sites and tech publications, mechanical keyboard forums, articles, and so forth — I managed to find ten mechanical keyboards that are highly regarded by the Internet community. Originally, I did this research for myself because I’ve been desiring to add another mechanical keyboard to my collection. I figured I might as well share my findings, in the hopes that doing so might help someone out.

Aesthetically, my picks are fitting in professional environments, so don’t expect any multi-colored/rainbow backlighting, LED displays, and special keys for your macros. My mechanical keyboard recommendations are elegantly simple, reflecting my personal preference for simple, functional aesthetics and my needs as a Web professional.

Note: Some of the links below use our Amazon Associate links. This means we’ll get a small commission if you buy a product through those links. Also, the prices stated below are based off the current prices around the time this article was published. Actual prices may be different from what’s stated in this article.

Without further ado, here are what I consider to be the best mechanical keyboards for professionals:

1. Das Keyboard

Das KeyboardSource of photo: daskeyboard.com

The Das Keyboard is probably the most recognizable mechanical keyboard on the market.

Years ago, they received a lot of press from tech publications such as Tom’s Hardware (with an article titled Possibly One of the Best Keyboards Ever), TechCrunch, and CNET partly because of the novelty of the Das Keyboard Ultimate models, which don’t have any labeling on their keycaps:

Das keyboard ultimateSource of photo: daskeyboard.com

The mechanical keyboards are designed by Metadot Corporation, a Texas-based open source software company. The creators of the keyboard claim that the gold-plated mechanical switches in the Das Keyboard can handle up to 50 million keystrokes!

Das Keyboard 4C Professional

$116 on Amazon

2. CODE Mechanical Keyboard

CODE Mechanical KeyboardSource of photo: wasdkeyboards.com

The CODE keyboard is a series of mechanical keyboards designed with programmers and developers in mind. It sports a clean, minimalist design. The pleasant (and adjustable) white LED backlighting is great for those of us who often find ourselves in dark, low-light work environments (such as server rooms). In addition, the keyboard can switch between three keyboard arrangements: QWERTY (the most common), Dvorak, or Colemak.

The CODE keyboard was designed by WASD Keyboards (producers of customizable mechanical keyboards) and Jeff Atwood. You might know Jeff Atwood as the founder of Stack Overflow, the Stack Exchange network, and as the author of the programming blog, Coding Horror. Read his blog post about the CODE keyboard to get an insider’s perspective on the keyboard’s inception.

(Side note: This is the next mechanical keyboard I’ll be buying!)

CODE Mechanical Keyboard (Cherry MX Clear)

$150 on Amazon

3. KUL ES-87 Tenkeyless Mechanical Keyboard

KUL ES-87 Tenkeyless Mechanical KeyboardSource of photo: keyeduplabs.com

Keyed Up Labs (KUL) is a top-notch company that creates a range of well-regarded mechanical keyboards.

KUL specializes in tenkeyless keyboards, which don’t have the number pad that’s often located on the right side of full-size keyboards.

Many of us never use the number pad. Except for accountants, cashiers, statisticians, and those who frequently key-in numbers into their machine, most people can live without the number pad.

The advantage of removing the redundant keys found in the number pad is that it will create more room on your desk and it will reduce the distance your right hand needs to travel when reaching for your mouse.

KUL ES-87 Mechanical Keyboard (Cherry MX Green)

$149 on Amazon

4. Rapoo KX Wireless Mechanical Keyboard

Rapoo KX Wireless Mechanical KeyboardSource of photo: rapoo.com

Mechanical keyboards are typically wired devices. Not the Rapoo KX though.

Besides the obvious benefit of being able to eliminate wire clutter, the Rapoo KX is also one of the least expensive mechanical keyboards I’ve come across, at $85. It’s also smaller than most mechanical keyboards, which makes the Rapoo KX potentially portable.

For a more detailed look at the Rapoo KX, watch the video review named Wireless + Mechanical – Is This Real Life? on the YouTube channel Unbox Therapy (which has over 2.6 million subscribers). Also see the list of wireless mechanical keyboards on Reddit for more sans-wire alternatives.

Mactrem Rapoo KX (Black)

$85 on Amazon

5. Ducky Legend

Ducky LegendSource of photo: duckychannel.com.tw

Taiwan-based company DuckyChannel has a collection of mechanical keyboards for gaming and work.

The Ducky Legend is the model I feel best suits work environments. This keyboard has a stylish aluminum case and adjustable backlighting.

Ducky Legend (Silver)

$141 on Amazon

6. Happy Hacking Keyboard (HHKB)

Happy Hacking Keyboard (HHKB)Source of photo: pfusystems.com

The Happy Hacking Keyboard is geared towards professionals and heavy computer users. It was first introduced in 1996 by Japanese IT company, PFU Limited. Since then, the keyboard has managed to gain a loyal fan base.

In the quest to make a small-form-factor keyboard, the designers of the HHKB removed the arrow keys, function keys, and several other keys such as Caps Lock, Backspace, and Insert. Instead, these keys are coupled together with other frequently used keys. For example, the Backspace key shares the same key as the Delete key, and Caps Lock is combined with the Tab key. You can use the "missing" keys by pressing the Fn key along with the key that it shares.

The Happy Hacking Keyboard’s design results in an ultra compact 60-key keyboard, often referred to as a 60% keyboard (because a full-sized keyboard has 104 keys).

This mechanical keyboard has a cult following, as well as its fair share of critics. The biggest disadvantage is that if you use arrow keys, print screen, insert, etc. frequently, then this would not be an efficient keyboard for you.

In my case, as a web developer and writer, I have become accustomed to keyboard shortcuts that rely on several keys that the HHKB decided to drop, such as the Up/Down Arrow keys for jumping to lines of code, Ctrl+Left Arrow/ Right Arrow to move to the previous/next word in a sentence, Ctrl+Page Up/Page Down to scroll web pages, and so forth.

But if desk space and minimalism are things that matter most to you, then this mechanical keyboard is definitely something to check out. As for me, a tenkeyless keyboard is the perfect balance between minimalism, size, and functionality.

Happy Hacking Keyboard Professional 2

$229 on Amazon

7. Filco Majestouch 2

Filco Majestouch 2Source of photo: diatec.co.jp

The mechanical keyboard community holds the Filco Majestouch 2, often referred to as the MJ2, in high regard. It has a rep for having a solidly sturdy build quality.

Filco products are by a Japanese company called Diatec Corp. The company has been around since 1982, and they specialize in PC peripherals and mobile devices.

Reddit’s mechanical keyboard buying guide wiki says that the MJ2 is "The big boss of Cherry MX keyboards."

Filco Majestouch 2

$154 on Amazon

8. Vortex POK3R

Vortex POK3RSource of photo: vortexgear.tw

The Vortex POK3R mechanical keyboard, sometimes called the Poker3, is a range of compact and customizable mechanical keyboards. Besides its interesting appearance and small size, another notable feature is that the keyboard is programmable. (You can find more info about POK3R’s programmability via its user manual.)

The POK3R keyboard has an atypical design. When viewed on the side, you’ll notice that the keycaps and switches are mounted on top of the keyboard tray, a blackplate, rather than being embedded into it. This design contributes to the keyboard’s compact dimensions and distinct aesthetics.

Side view of the Vortex POK3R keyboardSide view of the Vortex POK3R keyboard. Source of photo: vortexgear.tw

Check out the in-depth POK3R keyboard video review at the Rhinofeed YouTube channel.

Vortex POK3R 3 (Cherry MX Clear)

$140 on Amazon

9. Topre REALFORCE 104U

Topre REALFORCE 104USource of photo: amazon.com

Cherry MX is the series of switches that you’ll often find in popular mechanical keyboards such as the Das Keyboard. But they’re not the only players on the block. Topre switches are another type of mechanical keyboard switch.

The Topre REALFORCE is the pricy, flagship mechanical keyboard by Japan-based Topre Corp, makers of electronic equipment. For an alternative that’s notably less expensive, the Topre Type Heaven, at $155, is also a well-regarded option.

Topre Realforce 104U (White)

$270 on Amazon

10. Kinesis Advantage

Kinesis AdvantageSource of photo: kinesis-ergo.com

The Kinesis Advantage is a long-standing, ergonomically-designed keyboard that vastly veers off from the keyboard designs we’re all used to. This keyboard is popular amongst software engineers, IT professionals, and web developers — people who spend a ton of time typing on their keyboards, and using keyboard shortcuts and command-line interfaces.

Kinesis Advantage Contoured Advantage Pro in front of a three-monitor workstation.Source of photo: wikipedia.org

The ergonomics of the Kinesis Advantage can help lower the impact of the repetitive strain your hands endure when you’re typing for long hours. Its keys are separated and angled to complement your hands’ natural positions.  The keyboard has concave key wells that minimize the distance your fingers need to travel to reach a key.

Jarred Walton, over at the hardware review site AnandTech, wrote that out of three ergonomic mechanical keyboards he reviewed, the Kinesis Advantage is his favorite.

The Kinesis Advantage may not be everybody’s cup of tea. The keyboard’s layout will take time to get used to. And once you get accustomed to it, it will be hard to use traditional keyboard layouts. On the other hand, a top Amazon reviewer that goes by the handle of Ed said that it only took two weeks to get used to the keyboard and that if you’re patient "it will not only pay off with better ergonomics, but speed."

The $270 price is quite steep. But if you’re suffering from wrist- and hand-related injuries like carpal tunnel syndrome, or if you want to prevent them from happening, the Kinesis Advantage keyboard might be deserving of your hard-earned dineros.

Kinesis Advantage (Black)

$270 on Amazon

Further Reading

Mechanical keyboards are expensive. They’re meant to be used for years. Choosing which one to buy is a decision that shouldn’t be taken lightly. Here are some resources that will help you learn more about the technology:

  • The MechanicalKeyboards subreddit is a large community of keyboard enthusiasts with over 86,000 subscribers. Check out their wiki, which will inform you of everything you need to know about mechanical keyboards. This subreddit was instrumental in helping me discover the mechanical keyboards on this list.
  • Tested, a site by the stars of the TV show MythBusters, Jamie Hyneman and Adam Savage, has an explainer on why you should use a mechanical keyboard.
  • Das Keyboard has a slightly technical mechanical keyboard guide that gives you a great overview of the technology.
  • Overclock.net has a detailed guide covering mechanical keyboard terminologies, popular types of switches, keyboard maintenance, keycap shapes/materials/printing methods, and more.

Read Next

5 Good Habits That Will Make You a Better Coder

12 Excellent Free Text Editors for Coders

A New Breed of Free Source Code Editors

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

The post The 10 Best Mechanical Keyboards for Professionals appeared first on Six Revisions.


by Jacob Gube via Six Revisions

Web Design Weekly #207

Headlines

Defining and Dealing with Technical Debt

If you haven’t encountered any technical debt in a project yet, call yourself very lucky. Fact is, this will probably change rather quickly. Thankfully Geoff Graham has shared some great advice about how best to deal with it to make things less painful. (css-tricks.com)

Incremental UX (medium.com)

Sponsor Web Design Weekly and reach 23,904 developers

Articles

Understanding and using rem units in CSS

Adrian Sandu takes an in-depth look at rem units. He covers the basics, how they differ from em units, how to usw them with your breakpoints and more. (sitepoint.com)

Project TNT – The next evolution of type on Medium

Brad Birdsall shares a behind the scenes look at how the the new typography refresh came about. (medium.com)

Using Responsive Images (Now)

So the community have finally reached a point and agreed on a solution for how to deal with responsive images. The solution is getting implemented across all major browsers but we can start using responsive images today. So what are you waiting for? (alistapart.com)

Remote-First vs. Remote-Friendly (zachholman.com)

Tools / Resources

Style Guide Driven Development

If you haven’t yet taken a Style Guide Driven Development approach on a project hopefully this article by will help reinforce how valuable it is. (bitovi.com)

Integrating React with Gulp

If you are getting into React and are keen to utilise gulp in your development environment this post by Jonathan Suh has some clear and easy to follow tips and examples. (jonsuh.com)

Floatl – A JavaScript implementation of the Float Label Pattern

Floatl is a pragmatic JavaScript implementation of the Float Label Pattern. It is library-agnostic (no jQuery required!), it can be loaded directly in the browser via webpack or Browserify and it supports IE8+. (github.com)

Writing Developer Job Postings

Paul McMahon shares some great tips to help companies write better job postings for developers. (tokyodev.com)

A collection of free resources made by designers at Facebook (github.io)

What’s new in Chrome DevTools? (youtube.com)

CSS Protips (github.com)

Inspiration

Mike Bostock to humans: ‘Try to look for small problems first’

Sérgio Spagnuolo compiled the best of Mike Bostock’s (the creator of D3.js) Reddit AMA advice for people who want to learn more about data visualisation. (medium.com)

The 8 Worst UX Mistakes Coming From Experts

A collection of thoughts from some very talented UX designers including the likes of Frank Gaine, Brad Frost, Andy Budd and Heydon Pickering. (medium.com)

CodePen Redesigned (codepen.io)

Jobs

Product Designer at Campaign Monitor

We’re looking for a Product Designer who shares our vision for designing beautiful software that thousands of people love to use. We’re looking for someone with a strong understanding of interaction design and knows how to apply that to directly drive product growth. We’re hoping that might be you. (campaignmonitor.com)

WordPress Evangelist

An awesome opportunity to be Envato’s main-point of contact to the WordPress community and lead our WP contribution initiatives, while helping shape our WP strategy. (envato.com)

Need to find passionate developers? Why not advertise in the next newsletter

Last but not least…

El Capitain Broke My Developer Stuff! Here’s How to Fix It (ohthehugemanatee.org)

The Story Behind Medium’s New Logo (medium.com)

The post Web Design Weekly #207 appeared first on Web Design Weekly.


by Jake Bresnehan via Web Design Weekly

Bootstrap Context Menu

A context menu plugin for Bootstrap framework. It can be use via data attributes or via javascript.


by via jQuery-Plugins.net RSS Feed

Is Your Website’s Privacy Policy Putting You at Risk?

This article was provided by MacroTwin. Thank you for supporting the partners who make SitePoint possible.

Did you know that you're legally accountable for the statements made in your website's privacy policy? Have you read and understood each provision in your privacy policy? Do you know what your responsibilities are?

In this article, I'll present five mistakes with privacy policies that could put you at risk of fines or lawsuits. I'll also discuss why it's important to have a privacy policy, and some concluding thoughts on how to avoid legal problems.

Words and Actions That Can Put You at Risk

Here are five things website owners need to watch out for when drafting and managing privacy policies.

  1. Guaranteeing That Visitors' Personal Information Will Be Safe

    Many website owners tell visitors that their personal information will remain safe and secure by using a provision in their privacy policy similar to this one:

    Our website uses secure data collection, processing and storage procedures and other security methods to protect against unauthorized access, disclosure, change or destruction of your personal information, password, username, transaction information and data stored on our website and servers. Your personal information is safe and secure with us.

    Should your visitors' and customers' personal information be made public because your website gets hacked, or because the information becomes publicly disclosed by other means, the fact that you used a provision similar to the one above could—in the United States—see you sued by the Federal Trade Commission (FTC), for violating Section 5 of the FTC Act, which prohibits unfair and deceptive practices in commerce. (Similar rules apply in other countries, as I'll discuss below.)

    The trouble doesn't end there. Visitors and customers could also file a lawsuit against you because their personal information was disclosed after you had guaranteed its safety in your privacy policy. Under the law, you must take reasonable steps to protect important information and keep it secure. At a minimum, you must obey the privacy guarantees you make to your visitors and customers in your privacy policy.

  2. Making Exaggerated Statements in Your Website's Privacy Policy

    The FTC has also taken legal action against companies that have made exaggerated statements in their websites' privacy policies—statements that can't be verified. Always make sure you can keep any promises made in your policy.

  3. Promising to Not Share or Sell Your Email Address and Personal Information

    "We will not share or sell your email address and personal information." This is a common statement you'll find in most privacy policies, because it's a reasonable promise that makes visitors and customers feel comfortable giving you their email addresses and personal information. Website owners like this, of course, because it helps them grow their email lists, which can be one of their most important assets.

    But what if you sell your company? Unless you stipulate in your privacy policy that your visitors' and customers' personal information and email addresses will be included as part of the sale, you cannot include them with the sale without first getting your visitors' and customers' consent. If you don't get their consent first, you're violating your own privacy policy, which could get you into legal trouble with the FTC, your visitors and your customers.

    You could send notice to your entire database asking for permission to sell or transfer their information to the new owners. However, you may not get a positive response to such a request.

  4. Letting Your Guard Down After Your Company Files for Bankruptcy

    Your users' privacy doesn't go out the window just because your company goes out of business. Few business owners consider the privacy obligations that still apply if their companies go bankrupt.

Continue reading %Is Your Website’s Privacy Policy Putting You at Risk?%


by James Chiodo via SitePoint

The Command Line API for Fun and Profit

The Command Line API is a collection of aliases, convenience functions, and shortcuts to interact with your web page right from within the JavaScript console. In this article, we will have a look at some of those helpers and how you can leverage them for a better developing and debugging experience.

You can access your browser’s javaScript console in a variety of ways. Usually pressing F12 and clicking the Console tab works best.

Before we dive in, let me ask you a little quiz question: Do you know what it takes to visualize the outline of your CSS layout in the browser?

Exactly 108 bytes.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

A tweet-sized debugger as Addy Osmani, the creator of this smart one-liner, put it. Go ahead and try it out right now. Just copy the line and paste it into the JavaScript console of your favorite developer tools, like Chrome’s DevTools, Firefox’s Firebug, Opera’s Dragonfly, Safari’s Web Inspector, or even IE’s F12 tools (although IE only supports the $ family and the console object).

Using the Command Line API to outline every DOM element with CSS

While the creation of the color hex value is impressive, I want to draw your attention to the peculiar $$. This is an alias for document.querySelectorAll and one of many clever bits in the Command Line API. Let’s see what else the API has to offer.

The Command Line API is only accessible in the JavaScript console. You cannot make the API available to your scripts on the page. On the bright side, this gives you the unique opportunity to try all the code snippets in the remainder of this article right here in the browser window. Simply open your JavaScript console and experiment.

Exploring the DOM

[author_more]

If you are familiar with the jQuery library you can probably guess what $ does. As an alias for document.querySelector it returns a reference to the first DOM element matching the given CSS selector.

Let’s see how we can use this in the famous Cookie Clicker game. In case you never stumbled upon this monotonous but weirdly addictive game: You basically click on a big cookie to produce more of those baked goods and buy all sorts of cookie-baking devices. These then produce even more cookies… you get the picture.

Now, wouldn’t it be great if we could give our hand and mouse a break and let the console take care of the cookie clicking? With a little bit of JavaScript and our new friend $ this can be achieved in a neat one-liner:

setInterval(function() { $("#bigCookie").click(); }, 10);

As entertaining as this is, there are also scenarios where the DOM selecting functions of the Command Line API are of actual value. You already learned about the power of $$ in the introduction of this article. As an alias for document.querySelectorAll it returns an array of all the DOM elements that match the given CSS selector.

For example, we can use this function to extract all the image sources of a web site:

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

Using the Command Line API to scrape all image sources from an Instagram page

If you are looking for a specific element and want to examine it closer, use inspect. inspect(document.body), for example, will bring you directly to the body element in the Elements tab of your developer tools. (inspect also works if you pass a JavaScript function to it — it will take you to the Sources panel.)

Continue reading %The Command Line API for Fun and Profit%


by Stephan Max via SitePoint

Building a Google Cardboard VR App in Unity

Unity is currently one of the most popular choices when it comes to building virtual reality applications. Google Cardboard is a great first choice for getting started in the field - spending $20 on a VR headset rather than potentially hundreds is a much safer bet for getting started (and there are plenty of people with smartphones who could potentially enjoy your app with an equally smaller upfront cost!).

I've previously covered how to build VR for the web today via JS, along with demos on Visualizing a Twitter Stream in VR and JS and plenty others. For those who prefer Unity development, it's about time I evened these numbers and wrote some more on VR development in Unity. For some rather strange reason, I couldn't find any in depth guides to working with the Google Cardboard Unity SDK from scratch, so I did what any SitePoint writer would do. I put one together!

What You'll Need

To follow along, you'll need the following bits of software and hardware:

[author_more]

  • Unity - At least v4.5 is recommended. I'm using Unity v5 Pro for this guide. Unity v5 Personal apparently works a-okay too.
  • Windows or Mac - I'll be using Windows in this tutorial for a change (mainly because most Unity devs seem to be on Windows, so it's only fair I follow suit for the article!)
  • Cardboard SDK for Unity - That link will provide you with the GitHub repo. I'll explain this and setting up Java and Android in this article.
  • Java SE SDK - This will be required to install the Android SDK.
  • Android SDK - If you are downloading this for the first time, you only need the "SDK Tools Only" bits of the SDK. I'll explain this soon.
  • A Google Cardboard style headset
  • An Android device to put inside that headset - it is possible to export this to work with iOS, but I won't be covering that process as I don't have an iPhone!
  • Relatively basic knowledge of Unity - I'll cover a lot of the absolute basics for those new to it all but having a small amount of knowledge will help!

The Code

Want to jump straight into the code? My sample project is up at GitHub for you to do whatever you'd like!

Preparing the Android SDK

In order to create an Android mobile app, we'll need the Android SDK working on our system. For seasoned Android developers who've already got this running, feel free to skip to the next section!

To begin the Android SDK process, you first will need to check you've got the Java SE SDK installed on your system. If you aren't sure, try skipping to the Android SDK install step first. The installation will complain if you don't have Java!

Which Java?

If your system is Java-free, it can be a bit confusing to know which of the various Java options you'll need. Head to the Java SE download page and choose the JDK download option:

Download Java

Once you've got that downloaded, run through the very typical install process that looks a bit like so:

The Java Install Screen

Android SDK Download and Install

If you are new to Android development, you'll need to download the Android SDK and install it. You only need the "SDK Tools Only" bit of the SDK which is available at their Other Download Options page. This provides the bare minimum. You could download the whole Android Studio package if you're looking to do a lot of Android app development in future. If you are sticking with the "SDK Tools Only" option, head to that page and choose the version for your operating system:

Downloading Android SDK

Run that installation file you've downloaded. If you weren't sure if you had Java installed, the installation should confirm this for you:

Java Exists!

Follow the rest of the prompts (they are pretty standard installation prompts) and install the SDK to your system. When it is done, keep the checkbox ticked before you click Finish, that way you can load the SDK Manager:

Android SDK Success

The SDK Manager should appear and look like so:

SDK Manager

It is likely to have a bunch of checkboxes already selected for you. Let's reduce it to just what we'll need for now. Underneath the "Tools" folder, you'll want the following selected:

  • Android SDK Tools - This should be at the top of the list.
  • Android SDK Platform-tools - This will be right after the SDK Tools.
  • Android SDK Build-tools - You should only need the latest revision of this (you can see the revisions under the "Rev." column)

That should look like so:

SDK Manager Install Options

Then, within the latest Android API folder (whichever is highest, at the time of writing that's "Android 6.0 (API 23)"), choose the following:

  • SDK Platform - You'll need this!
  • A system image - You can choose either an ARM or an Intel system image to allow you to emulate that Android system on your computer. If you're looking to do all testing on your physical Android device, you can skip this.
  • Google APIs - This will let us use any Google APIs with our app. This doesn't include Google Cardboard - I've just included it for convenience, you can likely skip this one too.

That should look like the following:

SDK Manager System Images

Click "Install X packages" in the bottom right corner to begin the installation process. You'll need to accept the licence before it will let you install.

Once that is installed, you should have everything you need on the Android side of things!

Creating A Cardboard Empowered Unity Project

From the Cardboard SDK Github repo linked above, all you'll really need to download is the Cardboard SDK For Unity .unitypackage file here.

Once that has downloaded, we're ready to begin our actual Unity project. Open up Unity and do the obvious first step - create a new project.

Create a new Unity project

Choose 3D and give your project a name. Don't worry about adding asset packages on this screen, we'll be adding our custom one in the next step. Select "Create Project" once you're ready to begin:

Naming the Unity Project and Setting It to 3D

Next, go to Assets > Import Package > Custom Package... and find your Cardboard SDK .unitypackage file you downloaded earlier.

Add custom package

If you are using Unity 5, you won't need the legacy folders and can untick those:

Untick legacy for Unity 5

When that is successful, your new Cardboard SDK assets should appear in your project inside a "Cardboard" folder:

Cardboard Assets Added

Within the Cardboard SDK folder, you'll find four subfolders - "Editor", "Prefabs", "Resources" and "Scripts":

Within the Cardboard Folder

Inside the "Prefabs" folder, you'll find a Prefab called "CardboardMain.prefab". Drag that into your scene and raise it up by 2 on the Y axis (otherwise the user will feel like they're either tiny or super short!):

CardboardMain Prefab Folder

Open up the "CardboardMain" prefab and you'll find the "Main Camera" within it. This is our two stereoscopic style cameras working in unison to display the scene in wonderous VR when looking at it though a Google Cardboard headset. In our "Main Camera" object, we'll want to add a "Physics Raycaster" component. To do so, click "Add Component" whilst you've got the "Main Camera" open. I typically find it by typing in "raycaster" in the window that pops up. We'll need a Physics Raycaster to be able to interact with elements by looking at them.

Adding a Raycaster

Next, you can add in an icon to show when the user is looking at an object. I used a free icon in the Unity store from the 64 Flat Game Icons pack by Office57. You could create your own sprite for this too if you'd prefer. Get a sprite from somewhere and import it into your project.

Create an empty game object within the "Head" object in "CardboardMain". I've renamed mine as "Target". Then drag your sprite inside this object:

Dragging sprite into empty game object

Continue reading %Building a Google Cardboard VR App in Unity%


by Patrick Catanzariti via SitePoint

Animation Advice from a CSS Master

Last week we were lucky enough to have Tiffany Brown join us on the SitePoint forums for her live Q&A on CSS Animations.

I think it’s fair to say that with over 2,200 views, it was pretty successful! In case you missed it, I’ve compiled the highlights from the event for your reading pleasure.

Tiffany is a freelance developer based in Los Angeles. She’s the author of CSS Master and co-author of Jump Start HTML5. Before becoming a freelance developer, she was part of the Opera Developer Relations team and has worked in small agencies within Atlanta. Tiffany now spends her days educating the world in web development through her written books, blog, and articles.

Getting Started

Q: I am an instructor at a community college. I have been asked to research and lay out a web development AAS (2-year degree) for web development. There are so many things to choose from, that I am overwhelmed when trying to lay out the curriculum. Any advice on a path for students to learn Web Development? I thought:

  • HTML/CSS
  • JavaScript/jQuery
  • SQL

The main problems are which tools to use, frameworks, CMS, etc?

Kelle (staff): Hi Suzy, I can only really offer advice on the front-end side of things but I would think that basic HTML and CSS are an excellent place to start. With JavaScript, I think it’s always better to learn vanilla JavaScript first, and then introduce libraries so that students understand the difference between a language feature and library functionality.

Also helpful is pointing them towards the right resources, MDN is a great API reference I wish I’d had when I started out, for example.

Tiffany: I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add a server-side programming language:

  1. Ruby and its Rails framework,
  2. Python and Django, and/or
  3. PHP + the Laravel framework.

It’s also helpful to teach basic server configuration: Nginx or Apache. Roll a version management tool into the curriculum, ideally as part of a class on something else.

Q: Thank you so much. Vanilla JavaScript is a fantastic idea. How do you feel about Angular, Ember and Backbone?

Kelle (staff): Ember and Backbone are tricky because they require a pretty decent JS background to use them well, in my opinion.

Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about Angular (or bad depending on your perspective, but good for learning purposes), is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front-end development.

At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks; it’s definitely a steeper learning curve however!

Guest: Fantastic Advice. I am so grateful. Thank you for responding. Do you have a recommendation for a version management tool?

Tiffany: I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted Git or hosted Mercurial and you’ll find a bunch.

Q: This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all. CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (jQuery most of the time), so it looks to me that if you want to learn one, you have to learn the other.

Tiffany: You can definitely write CSS animations or transitions that work independently of JavaScript. Animations and transitions can be triggered by :hover, :focus, or :checked states. In many cases, however, you’ll need to add or remove a class name in order to trigger an animation/transition. So, yes, you’ll need to learn at least a little bit of JavaScript (but just a little bit).

Library Recommendations

Q: What CSS animation libraries do you recommend? I use Animate.css

Tiffany: Animate.css is the best-known, and furthest along, so that’s what I recommend. I am keeping an eye on Effekt.css though. It’s part of the HTML5 Boilerplate project. In my projects though, transitions have generally been enough.

Q: Hi, would you recommend using Hover.css? Or why not?

Tiffany: Hover.css is a library that I haven’t looked at closely enough to have an opinion about. It’s good that each item is self-contained. It let’s you cherry pick which parts to use and it has some clever animations too. I’m neither for nor against it.

Animation Performance

Q: Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?

Tiffany: You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.

Now, if your audience includes a lot of Opera Mini users, do make sure that your animations and transitions use a fallback. Opera Mini doesn’t support transitions or animation of any kind, whether CSS or JavaScript.

Continue reading %Animation Advice from a CSS Master%


by Angela Molina via SitePoint