Quick

Quick tip: Using your Surface pen as a PowerPoint remote

My handwriting sucks and I am hardly capable of painting a straight line. Hence, when I got my Surface I didn’t see much use for the pen other than signing things and maybe highlighting some things in presentations.

However, I now found out that you can use the pen as a PowerPoint remote, which is pretty cool:

The trick is to buy (or in my case get a free key to) KeyPenX which is a $5.99 program that allows you granular access to what clicking the button of the pen should do.

It took me a while to get it to work, but here are the important bits:

Pair your pen via Bluetooth – you do that in the settings by “add device”. My pen didn’t show up at first, so I pressed the button for 10 seconds for it to reset; then it showed up.

Bluetooth settings paired pen

Go to the pen settings and tell it to start KeyPenX on click and double click.

Run program on click in the settings

Configure KeyPenX to do the PowerPoint things you want it to do:

keypenx settings

All of these steps are also in the KeyPenX screen itself. The only thing remaining is not to start clicking the pen all the time like I do with normal ones.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick tip: using modulo to re-start loops without the need of an if statement

the more you know

A few days ago Jake Archibald posted a JSBin example of five ways to center vertically in CSS to stop the meme of “CSS is too hard and useless”. What I found really interesting in this example is how he animated showing the different examples (this being a CSS demo, I’d probably would’ve done a CSS animation and delays, but he wanted to support OldIE, hence the use of className instead of classList):

var els = document.querySelectorAll('p');
var showing = 0;
setInterval(function() {
  // this is easier with classlist, but meh:
  els[showing].className = els[showing].className.replace(' active', '');
  showing = (showing + 1) % 5;
  els[showing].className += ' active';
}, 4000);

The interesting part to me here is the showing = (showing + 1) % 5; line. This means that if showing is 4 showing becomes 0, thus starting the looping demo back from the first example. This is the remainder operator of JavaScript, giving you the remaining value of dividing the first value with the second. So, in the case of 4 + 1 % 5, this is zero.

Whenever I used to write something like this, I’d do an if statement, like:

showing++;
if (showing === 5) { showing = 0; }

Using the remainder seems cleaner, especially when instead of the hard-coded 5, you’d just use the length of the element collection.

var els = document.querySelectorAll('p');
var all = els.length;
var c = 'active';
var showing = 0;
setInterval(function() {
  els[showing].classList.remove(c);
  showing = (showing + 1) % all;
  els[showing].classList.add(c);
}, 4000);

A neat little trick to keep in mind.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

A quick reminder on how and why to use labels in forms to make them more accessible

Yesterday the excellent Alice Boxhall of the Google Chrome team pointed out an annoying bug to me:

Seen in the wild on https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer … <label for="tos-checkbox"><input type="checkbox" name="tos-checkbox">I agree</label> @codepo8

It seems the UserVoice page of Microsoft Edge has a checkbox that is inaccessible to screen reader users. The reason is a wrong implementation of a label. So, here is a quick reminder of how to use labels in plain HTML (without any ARIA extras) and why that’s a good idea.

Labels are there to connect an explanatory text with a form element. For a sighted user this can seem redundant – after all, the text is right next to the element. But once you use a screen reader you see that by not using labels, you make it impossible for people to use your forms.

The markup used in this demo is the following:

<div>
  <input type="checkbox" name="wombat"> 
  Yes, I want to buy a wombat!
</div>
<div>
  <label>
    <input type="checkbox" name="quokka">
    Yes, I want to buy a quokka!
  </label>
</div>
<div>
  <input type="checkbox" id="yayforwallaby" 
         name="wallaby">
  <label for="yayforwallaby">
    Yes, I want to buy a wallaby!
  </label>
</div>

On my Mac, using the in-built VoiceOver and Firefox, it is easy to test. Simply turn on VoiceOver Command+Fn+F5 and navigate using your keyboard by tabbing into the document. Here’s what that looks and sounds like:

In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to check and uncheck.

showing how checkboxes with labels make the text clickable

Using labels isn’t hard. The simplest way is to nest the form element and the text inside the label:

  <label>
    <input type="checkbox" name="quokka">
    Yes, I want to buy a quokka!
  </label>

If you can’t do that, you need to connect the label and the form element using a for/id pairing. Remember, a form element’s id has no meaning to the form. The data sent to the server is what’s defined in the name attribute. The id is only good for scripting, CSS and as a fragment identifier/anchor. The following example shows how to connect the form element and the label:

<input type="checkbox" id="yayforwallaby" 
       name="wallaby">
<label for="yayforwallaby">
  Yes, I want to buy a wallaby!
</label>

This is what’s broken in the UserVoice example: there is a for attribute on the label, but the form element has no id. Hence there is no connection between the two and the label becomes redundant.

Quick aside: if you wanted to write a test for that, remember that the for attribute in HTML elements can not be accessed as element.for as for is a reserved word. It needs to be htmlFor.

As a way to catch the mistake in the sign-up form, you could do the following:

var labels = document.querySelectorAll('label');
for (var i=0; i<labels.length; i++) {
  if (labels[i].htmlFor) {
    if (!document.getElementById(labels[i].htmlFor)) {
      labels[i].style.background = 'firebrick';
    }
  }
}

Now, go forth and label the web!

Updates

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick tip: stop Powerpoint from breaking words into a new line

With my talk decks needing more re-use in the Windows/Microsoft community, I am trying to use Powerpoint more and wean myself off the beauty of Keynote (and its random crashes – yes, all software sucks).

One thing I realised today is that Powerpoint thinks it is sensible to break words anywhere to go to a new line, not by word, or even syllable, but by character:

default line break setting
Words are broken into new lines at any character, which makes alignment a not enjoyable game of “find the breakpoint”

This is the preset! To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in:

Format ? Paragraph ? Line Breaks and Alignment ? uncheck: “Allow Latin text to wrap in the middle of a word”

Here’s a recording to show the difference:

fixed line break setting
By unsetting the preset you can do what you want – line breaks are now only possible after full words

Why this would be a preset is beyond me. Now I can breathe freely again.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick trick: using template to delay loading of images

In addition to this explanation, I also recorded a quick screencast. Feel free to check that one first.

When it comes to newer elements to play with there are a few that are slightly odd. Canvas is one of them, as it doesn’t do anything without scripting. It is a placeholder for a canvas painting or animation and can contain fallback content when it is not supported. This ailed purists of semantic HTML when it came out, because – to a degree – this was just a rehash of applet or object we used with Java or Flash.

Template is an even weirder thing. Using template you can define inert content in HTML – this means the content is not rendered by the browser, and anything inside it is not executed (for example script elements). Again, this is something that can annoy purists, as this content only makes sense when JavaScript is available. But, to people who are used to templating in other languages, this is a great opportunity.

The biggest issue with template is that it can’t really by polyfilled as browsers that don’t know template, treat it like a DIV and render its content. In the past we simulated this functionality with script elements with a type of text/html as those will be skipped by browsers.

For more info about template itself, check these resources:

One thing you can do with template is to put content in it that is “nice to have” but would delay the loading of the page and especially the firing of the onload handler.

I’ve done this in the Cuter demo of Tinderesque. This demo loads a lot of images, and not all of them need to be available right away. That’s why I put five of them in the document and wrapped the rest in a template:

<ul class="cardlist">
  <li class="card current"><img src="images/a-push-please.jpg" alt=""></li>
  <li class="card"><img src="images/amazing-dog.jpg" alt=""></li>
  <li class="card"><img src="images/awesome-mix-dog.jpg" alt=""></li>
  <li class="card"><img src="images/baby-amardillo.jpg" alt=""></li>
  <li class="card"><img src="images/baby-hippo-nom.jpg" alt=""></li>
  <template>
    <li class="card"><img src="images/baby-rhino.jpg" alt=""></li>
    <li class="card"><img src="images/barbie-frenchie.jpg" alt=""></li>
    <li class="card"><img src="images/basset-helmet.jpg" alt=""></li>
    <li class="card"><img src="images/bear-dog.jpg" alt=""></li>
    <li class="card"><img src="images/bear-puppy-fluff.jpg" alt=""></li>
    <li class="card"><img src="images/best-day-ever-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/bleh-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/bleh-tapir.jpg" alt=""></li>
    <li class="card"><img src="images/cat-on-stairs.jpg" alt=""></li>
    <li class="card"><img src="images/chocolate-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/corgisquee.jpg" alt=""></li>
    <li class="card"><img src="images/corns-and-penny.jpg" alt=""></li>
    <li class="card"><img src="images/crazy-otter.jpg" alt=""></li>
    <li class="card"><img src="images/cute-brown-puppy.jpg" alt=""></li>
    <li class="card"><img src="images/dalmatian.jpg" alt=""></li>
    <li class="card"><img src="images/derpy-hedgehog.jpg" alt=""></li>
  </template>
</ul>

This allows me to maintain all the info of my images in HTML (rather than having to add all the sources, alternative text, titles and so on in some JSON blob) and only load the first five when the page loads.

To add the rest, I just use an onload handler, that takes the content of the template and adds it to the parent element.

window.addEventListener('load', function(ev) {
  // check if template is supported
  // browsers without it wouldn't need to
  // do the content shifting
  if ('content' in document.createElement('template')) {
    // get the template
    var t = document.querySelector('template');
    // get its parent element
    var list = t.parentNode;
    // cache the template content
    var contents = t.innerHTML;
    // kill the template
    list.removeChild(t);
    // add the cached content to the parent
    list.innerHTML += contents;
  }
  all = document.body.querySelectorAll('.card').length + 1;
  updatecounter();
});

The difference is pretty significant. Without the template trick the 542 KB transferred in 26 requests take 6.43 seconds on a 3G connection. The onload handler fires after that. With the template, onload fires at 2.08 seconds. Here’s a screenshot of both using Chrome Devtools:

Onload delay with and without template

Template support is pretty great. The only browsers that don’t support it for now are IE and Microsoft Edge. Opera Mini also doesn’t support it, but that’s due to it’s non-client script nature.

Browsers that don’t support template will load all the images and delay the onload handler. But all the others can properly benefit from this. Why not give it a go?

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick one: using download attribute on links to save Canvas as PNG

One of the things I always liked about Firefox is that you can right-click any canvas and select “save image as”. Chrome and others don’t do that (well, Chrome doesn’t). Instead you need to get the image data, create a url and open a new tab or something in that order.

One very simple way to allow people to save a canvas as an image (and name it differently – which would have to be done by hand in the case of right-clicking on Firefox) is to use the download attribute of a link.

You can see this in action in this JSFiddle. Simply paint something and click the “download image” link.

The relevant code is short and sweet (canvas is the reference of the canvas element):

var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);
document.body.appendChild(link);

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick Note: Mozilla looking to survey Mobile App Developers in the Bay Area – tell us what you need

The Mozilla User Experience Research team is looking for developer who have experience writing mobile Web apps in the Bay Area to participate in a paid research study that will have a significant impact on making our developer-focused efforts even better.

To qualify for the study, please take this 10-minute survey.
If you’re eligible, a member of our team will contact you to tell you a little more about the research and schedule time with you. Developers who qualify for and fully participate will receive an honorarium of $250.

We’re looking for developers who are:

  • willing to participate in a 2-hour in-person interview at their workplace or home
  • available for the interview the week of March 10 to 14 (the weekend before / after may also be possible)

The interview will be recorded, but all materials will be used for internal research purposes only.

You DON’T have to use Mozilla products or be part of our community to participate (in fact, we’d like to hear your voice even more!).

Your feedback has the potential to improve the experience of other Web app developers and influence the direction of our products and services, so we would love to get a chance to talk with you! Please feel free to share this opportunity widely with your own network as well.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quick Hack: The Mozilla Monument Name Finder

Outside the Mozilla office in San Francisco stands a beautiful monument thanking all the people who did work with Mozilla to keep the web open, secure, inviting and beautiful.

mozmonument

Overall, this is 4536 names on four sides with two panels, which means your name might be hard to find. Fret not, for Chris More released a dataset with the names and their locations on the document. Using this dataset and some CSS 3D transformations, I am now happy to give you the Mozilla Monument Name Finder.

monument-name-finder

You can see how it works in this screencast.

If you want to see the real images, here is another hack using the original images!

Again, a huge thanks to all the people who helped Mozilla become what it is! Here’s to you!

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

A quick update and screencast of the Mozilla HTML5 slide system

After messing around with it for some of my latest presentations, I just updated the Mozilla HTML5 presentation template (on github). It has been a while since I did that, so here are some new features:

  • Smooth transition from slide to slide
  • Blockquotes with cite link
  • Notes functionality
  • Smooth inner-slide bullet navigation (greyed out to full)
  • Option to suppress page numbers
  • Centered, left- and right-aligned images
  • Image frames, dropshadows and frame dangling animation
  • Live code editing

You can see how to use the system in this 10 minute screencast.

Happy editing!

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)