Using HTML Input for state

It has long bugged me that some interactive elements require JavaScript to work.

  • If you defer JavaScript until the end as you should be there may well be a delay before elements start working
  • If you accidentally push broken code your interactive elements stop working completely. And if that’s a menu for example, your users are screwed
  • A lot of these interactive elements use 3rd party libraries which are very heavy, jQuery for example. In a world where mobile device browser share is huge page weight is important

With the ever diminishing share of Internet Explorer 6, 7 and 8 users we can now start making use of more advanced CSS selectors to perform this task.

:checked – To determine which form element is currently checked
:nth-child & :nth-of-type – To link the currently checked element to the correct item
~ – The sibling selector to make sure we only select the siblings of the checked item so if elements are nested we don’t get conflicts

In it’s simplest form the implementation looks something like this…

See the Pen Responsive Tabs/Accordion by Paul Hawxby (@phawxby) on CodePen.

Of course this isn’t what form elements were originally intended to do so there may well be some concerns, most likely around accessibility but I believe these can be addressed with good use of ARIA attributes so do make use of them.

And now on to a few examples.

Responsive accordion / tabs

See the Pen Responsive Tabs/Accordion by Paul Hawxby (@phawxby) on CodePen.

CSS Animation Control

See the Pen CSS Animation with JS free control by Paul Hawxby (@phawxby) on CodePen.

Menu Control

See the Pen Circle Menu With CSS3 (Pure CSS version) by Paul Hawxby (@phawxby) on CodePen.

Simple BYOD on Android Lollipop

BYOD has become am almost essential part of my job, working across multiple time zones would be a nightmare without it. With the introduction of Android L it just got a whole lot easier!

Before Android L you were stuck with a single user account and if you added a business ActiveSync email account to your device your entire device was bound by the ActiveSync security policy, and for me that meant an 8 digit pin to get into my device and authority to remove wipe the entire device. This was unacceptable as it made quickly and easily using the device for personal reasons that much more difficult.

So to bypass this problem I used Divide, it essentially allowed for a business partition within my device. As a result it allowed for differing levels of security between business and personal data, all encrypted and if a remote wipe was requested it would only wipe the business data… Brilliant. The only problem with this is it was yet another app and on my aging Nexus 4 I found this could result in a bit a slowdown.

Along comes Android L with multi-user support and this problem is solved. What’s more being a web developer I’ve got a fair bit of data floating around in the Google ecosystem such as Analytics, I now have access to that without polluting my personal space. The only caveat to all of this is not having notifications between accounts, but if you can live with that you’re all good!

1. Register with Google

If you haven’t already make sure you register your work email account with Google, you can do so here. Doing so will simply provide you with a work Google account to separate your data, it won’t give Google access to any of your work data.

Make sure to use a suitably strong password and turn on two factor authentication if you can, although Google wont hold any of your business data such as emails or calendar entries you still don’t want to make it easy for hackers.

2. Add a new user to your device

Selecting "Users" from device settings

Selecting "Add user"

Welcome screen displayed after adding a new user

 

3. Sign in

Make sure to sign in with the business Google account details you registered earlier.

Enter your business Google account details

Unless you plan to buy stuff on your personal account just ignore the payment info…

Payment details are unnecessary

4. Account all set

At this point your account is all set, and if you use chrome on your desktop machine then you can login with this account to have synchronised history, tabs, etc. Obviously this can also include password synchronisation too so I must reiterate, make sure you business Google account is as secure as it can be!

The blank launcher of the new account

5. Email, contacts and calendar synchronising

The new Gmail app now supports non-gmail accounts including Exchange ActiveSync, as that’s what my employer uses I’ll be setting that up but the process is roughly the same for IMAP and POP.

Fire up the Gmail app and pick the account type you wish to add.

Add a new Exchange account

Simply entering your work email address is generally not enough information for exchange accounts so you’ll need to hit manual setup after entering it.

Enter your email address

I don’t know why but hit Exchange again…

Pick Exchange again

You’ll need to speak to speak to your network administrators or find the documentation on your intranet to find your Exchange settings.

Screenshot_2014-12-28-14-51-28

Here we go…

Screenshot_2014-12-28-14-51-35

The ActiveSync security policy will take administrative control of the account but not your personal account

Screenshot_2014-12-28-14-51-59

Screenshot_2014-12-28-14-52-19

The blanked out options are only blanked out for this account on the device, you can happily use pattern unlock on your personal account.

Screenshot_2014-12-28-14-52-51

And finally, considering this is a business account you probably want to hide sensitive notification content. If someone were to get hold of your device it’s unlikely the little snippets wouldn’t reveal much, but it’s better to be safe.

Screenshot_2014-12-28-14-53-10

6. Name your account

This is totally optional but when viewing the accounts you will likely have two with the same name, not a major problem but you can change it.

Screenshot_2014-12-28-14-56-07

In Settings->Users you will have a list of users on the device, hit the current one

Screenshot_2014-12-28-14-57-58

And stick a “(work)” on the end or some other way to differentiate the accounts.

Screenshot_2014-12-28-14-58-10

 

Much better.

Screenshot_2014-12-28-14-58-23

And that’s it 

You’ve now got two totally separate accounts on your device allowing you to properly separate your business and personal data.