I’ve been working from home and 8-9 hours away from my colleagues for the last 8 years and mostly on the go. My work setup is a laptop and wherever I have space to sit. This teaches you quite a few things about remote work and – more to the point – what doesn’t work.

Therefore here is a plea of mine that is based on a few questions people asked me lately what the best thing to do to make remote working using messaging software work. And here it is: use a headset.

Any distraction to a video or audio call is bad. And they multiply with all the colleagues on the call. It is tough enough to make sure everyone is understood and hears everything. Distracting sounds are not helping there.

To me, using a headset means a few things:

• The only audio people hear from me is my voice. Not what is happening in the room, not any of my bodily functions
• I can type notes of the meeting I am in without adding a drum and bass soundtrack to the meeting
• I switch from “doing something” mode to “being in the meeting” mode
• I hear when my Microphone is on. My own voice only can be heard in the headset when it is on. You don’t want to be in an uncertain stage if your mic is on or not.

As to which headset to use, I don’t care. I am doing fine with my Plantronics Blackwire 500 C520-M, as its sound quality is great and it is comfortable to wear. You can go much fancier of course and if you work in a noisy home maybe adding noise cancellation is a great idea. I got my headset from my company and I am pretty sure most companies will be OK with you ordering a headset.

So that’s a quick one, but it really makes a difference.

Having been a web developer for as long as I have can get you tainted. You always assume things to break in one way or another or some clever new web API not getting the support it needs for ages. As it turns out, the speed with which browsers adapt to standards has become increasingly faster. That’s why it is important to keep up to date and give yourself simple challenges to see if tasks that in the past were a huge hassle have now become easier.

That’s what I did today. I gave myself the task to build an interface to make it as easy as possible for a user to add an image into the document. I wanted to support:

• Image upload
• Drag and Drop
• Copy and Paste

Looking at Stackoverflow for some solutions is a huge disappointment as many solutions either are woefully outdated. Looking through the specs and at Can I use, I found it is excitingly short code you need to accomplish all of the above.

This Codepen shows the final outcome and works swimmingly here on Edge, Firefox, Safari and Chrome.

And the full code is not that much.

In the HTML we need to have a container element that is a drop target (I made this cover the whole document in CSS).

    <div id="container">
      <h1>Getting an image into the browser</h1>
      <p>Drag and Drop and image, paste it, or use the upload bar below</p>
      <div>
          <input id="getfile" type="file" />
          <label for="getfile">Upload an image</label>
      </div>
      <div id="imagecontainer"></div>
      <output></output>
    </div>

The JavaScript needs to reference those and set the appropriate event handlers. The rest is looking at the URL standards.

(function(){
const fileinput = document.querySelector('#getfile');
const output = document.querySelector('output');
const imagecontainer = document.querySelector('#imagecontainer');
 
/* Show the image once we have it */
const loadImage = (file, name) => {
  if (name) {
    output.innerText = 'Filename: ' + name;
  }
  var img = new Image();
  img.src = file;
  img.onload = function() {
    imagecontainer.appendChild(img);
  };
}
 
/* Image from Clipboard */
const getClipboardImage = (ev) => {
  let items = ev.clipboardData.items;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('image') !== -1) {
      var blob = items[i].getAsFile();
      loadImage(window.URL.createObjectURL(blob));
      break;
    }
  }
}
window.addEventListener('paste', getClipboardImage, false);
 
/* Image from Drag and Drop */
const imageFromDrop = (e) => {
  var file = e.dataTransfer.files[0];
  loadImage(window.URL.createObjectURL(file), file.name);
  e.preventDefault();
}
container.addEventListener('drop', imageFromDrop, false);
// Override the normal drag and drop behaviour
container.addEventListener('dragover', (ev) => {
  ev.preventDefault();
}, false);
 
/* Image from Upload */
const imageFromUpload = (e) => {
  var file = e.target.files[0];
  loadImage(window.URL.createObjectURL(file), file.name);
  e.preventDefault();
}
fileinput.addEventListener('change', imageFromUpload, false);
 
})();

We live in exciting times for web developers, don’t let yourself be bogged down by slowness of the past. I’m still having fun with it.