The A11Y Project

Excellent accessible HTML resource with howtos, checklists and thorough explanations. This should be a bookmark for every web developer.

Improvements to country flags SVGs

I’ve updated the country flags project with a scripts that allows you to scale the image to an arbitrary size easily, and also published it to NPM.

Also a few more flags have been added for minor nations as well as the countries of the constituents of the United Kingdom as well as Kosovo.

All the world's public transport on one map

This page show’s a live view of most public transport vehicles in the world. It shows everything from buses, trams to ferries and airplanes on a single map. It’s not only really interesting to browse around, it’s also a very impressive technical feat. Zooming in on small towns in Norway and Sweden, it shows buses right on route.

Moneyball teams

Once upon a time the ambitions of your company were exceeding the throughput capacity of your development teams, and you needed to hire. The ultimate goal of hiring is: to help match the ambitions of your business.

Interesting look on hiring and on how to compose good teams. “Only hiring the 99 %” does not work in practice, and it is important to keep in mind how people will work together when you are composing your work-force.

What questions to include in a call for papers for a technical conference

Being involved as an organizer for the Mobile Era conference. I was selected as the program manager, and with it the task of sorting out how to do a call for papers, how to select ‘the best’ talks and finally get people to actually show up. I’d like to detail my experience with the call for papers, and what questions are important to ask from speakers to get to get actionable responses from the committee?

Personal information

You need some contact info on people. Here we asked about name, an image, email address, phone number (we never had to use this, but it is a good emergency backup), company / organization, “a few words about you” and finally if they need travel expenses covered.

Already here we made two mistakes: We did not include a bio field, that would be used on the website to introduce speakers, and we did not include anything to indicate that there would be a speaker pair.

This was interpreted differently by the committe and the speakers.

The first question lead to us using “a few words about you” text as an introduction on the website. But not all speakers’ had anticipated that, and had included information they did not want publicy shared leading to many extra emails. Make sure to have a seperate bio field for speakers to introduce themselves to their audience.

The speaker pair was not something we anticipated either. Some speaker pairs submitted twice, while others tried to cram all info into the fields available. I suggest including a freetext field with the caption “If you are two speakers, enter answers to the above questions for the second speaker here”.

The paired speaker question is also a very important one for selection, as it influences the budget available for travelers.

Finally, on the “do you need travel expenses covered”, make sure to include the option that they will cover it themselves. Many companies will cover travel for employees that are accepted to conferences, here you could also put a notice section. Some will get flights covered but not their hotel stay or vice versa.

About the talk

For the about the talk section, we had the following questions: Title, pitch, length (10 or 45 minutes), topic, level of talk, long description (for committee), expected audience (multi-choice), need of special equipment and finally if the talk has been delivered before.

The unnecessary questions turned out to be:

  1. Level of talk — We had options for basic/intermediate/advanced, but the level was always evident from the title and pitch to the committee. I don't think we ever used this information.
  2. Audience — This also turned out to not be used at all. The topic is what is important, and as above, we could easily infer the audience from the talk pitch.

As before; it is important to communicate that the pitch field will be used on the website as a talk description.

We also noted; that length of the talk could be communicated several times after talk selection as well. Speakers are often attending several conferences with differing lengths of the same talk. Reminding them of the details of your conference is very helpful.

Portfolio questions

We also asked about the speaker’s portfolio. What talks had they given before, their GitHub and lanyrd usernames, and links to talks summaries and videos of their performances. The responses to this section was very helpful, and there were no major issues with any of the questions we asked.

Collecting links to their online presence saves a lot of work for the committee when it comes to googling. It might not sound like much, but when you have 150+ submissions, finding the correct profile for all is both error prone and time consuming.

Links to videos are a massive help when it comes to evaluating an unknown speaker. Often the videos will be of the talk submitted, or in a similar area since speakers often stick to their area of expertise. Videos often ended up as a tie-breaker between speaker, as it allows the committee to much more accurately assess which talk fits the audience better, more than any text.

Finally; make sure to include a special notes question, speakers often have thought of something you haven’t. And this is the place to express that concern.

I hope these few notes helps you shape your own call for papers. Mobile Era will be opening up for talk submissions in just a few weeks for next year’s edition and we will put our experiences to use in making this year’s conference even better!

Unique HTML IDs in React - now as a module

I have now made an NPM module that solves the problem of getting unique IDs for HTML DOM elements. The module is still lacking proper server-side rendering support, but is otherwise a drop-in solution to get IDs for DOM elements.

    class MyComponent extends React.Component {
        constructor() {

        render() {
            // Get unique IDs for HTML DOM elements.
            // an entirely automatic one or via a key unique to this
            // instance of the component.
            return (
                    <div className="form-group" key={index}>
                        <label htmlFor={this.nextUniqueId()}>
                        <input id={this.lastUniqueId()}
                            className="control" />

                    <div className="form-group">
                        <label htmlFor={this.getUniqueId('input')}>Name</label>
                        <div className="help-block"
                            This should be your full name.
                        <input id={this.getUniqueId('input')}
                            className="control" />

You can install the module via npm: npm install --save-dev react-html-id

What USB-C cable do I need?

Having recently acquired a new MacBook Pro, I’ve been looking for the proper cables to complement it. Mainly, I want a cable that I can charge both the Mac and other USB-C devices with, as well as use to connect USB-C devices. You would think you just get a USB-C to USB-C cable and be done with it, but it’s not so easy.

There are actually four different USB-C to USB-C cables being sold, and they all support different types of connections:

  1. USB-C Charging cable — This is the standard USB-C cable that the Mac comes with. However, what is not stated is that this is actually a USB 2.0 cable, with USB-C ports and extra pins for faster charging. This cable cannot be used to connect a USB 3.1 disk for example. A dead giveaway of USB 2.0 cables is that it is longer than 1 m (3 feet). USB 3.1 cables must be 1 m or shorter to work.
  2. Belkin USB-C 3.1 cable — This is the USB 3.1 version of the above cable, it supports USB 3.1 data connection (you can note the length is 1 m) and Power Delivery, which means it can charge the MacBook and all other accessories. You can also use this it to power USB 3.1 devices like the new LG UltraFine 4K display.
  3. Thunderbolt 3 cable with PD — Yes, there is a seperate cable for Thunderbolt 3. This is NOT the same as a USB 3.1 cable, as it has extra wires (making it thicker). This is the only cable you can use to connect the LG UltraFine 5K display. Confusigly, this cable also comes in a 2 m version. It is important to note that Thunderbolt 3 cables are not USB 3.1 cables! You can not use this cable to connect the LG 4K display for example, it will only work properly with the 5K display. There are also optical Thunderbolt 3 cables, which have longer length (up to 30 m) but cannot supply enough power for a MacBook.
  4. USB-C 3.1 cable (without USB-PD) — Thankfully Apple does not sell this cable, but there are also USB 3.1 cables that carries data. But do not support USB-PD (power delivery), these cannot be used to charge your new MacBook, but can be used to connect external hard drives as an example. If you buy a USB-C external hard drive it is likely this is the type of cable you get with it.

All in all, this is massively confusing. I would not want to be the Best Buy employee trying to explain what cable you need to buy to plug in your new device, because there is not one cable that supports all alternate modes. Your safest bet is to get the Belkin cable because it supports all regular USB 3.1 features. But it can’t be used for any of the alternate modes (Thunderbolt, DisplayPort, MHL or HDMI).

So why are there four kinds of USB-C to USB-C cables? I think the wish from the standard committee was to not sacrifice the range and slenderness of USB 2.0 cables, but still support the higher data and power rates necessary for USB 3.1. You don’t want a Thunderbolt 3 cable to charge your phone (because it is massive). So to solve this they made alternate cables for different purposes.

subscribe via RSS