As I was upgrading an older codebase of mine that used layerX and layerY I looked into a very succinct way of finding the current mouse position on any element regardless of its position, scrolling, padding, margin and such and I found this to work for me, so maybe it is good for you, too.

const getposition = ev => {
  let x = ev.clientX;
  let y = ev.clientY;
  let pos = ev.target.getBoundingClientRect();
  // the bitwise shift |0 rounds non-integer values down.
  // if you want to round up, use 1.
  return {
    x: x - pos.x|0,
    y: y - pos.y|0
  };
}

Here’s a codepen of it in action, and you can play with it and give it more annoying things to deal with.

See the Pen
Get mouse position on element. by Christian Heilmann (@codepo8)
on CodePen.

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.

Newer operating systems come with a dark/light mode option and also a “prefers reduced motion” mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for.

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes.

In Microsoft Edge, these are in the “more tools” section.

Here’s the journey;

• Click the “...”
• Select “More tools”
• Select “Rendering”
• In the lower console, scroll down to “Emulate CSS media feature prefers-color-scheme” and toggle.

Here’s a screencast showing it in action .

If you prefer screenshots of the journey, here they are:

Now, on a personal note, I think these are kind of hidden and I am not surprised people don’t know about that. Given that we are also considering extending these to add more emulations (like high contrast mode) the question is what we could do to make this easier.

One way is to use the keyboard shortcuts. You can open the developer tools and press Ctrl/Cmd + Shift + P and type “dark” or “light”. Make sure to select the rendering parts of the menu though and not switching the theme of the devtools themselves.

This is not a Microsoft Edge specific functionality, any Chromium based browser has this.

Do you have any idea how to make this even easier? Please report issues you find using the feedback tool in the developer tools:

You can also always ping me @ codepo8 or the official Microsoft Edge Devtools account @ EdgeDevTools on Twitter.

It was around 2005 when I sat at my job and didn’t like it. I was head of web development at an agency in London that covered huge web sites and government portals. The pay was great, my team was top-notch and the products interesting. What I didn’t like was that my computer was a mess. I dealt with various products each with their own stack. Early .NET (with state stored in a hidden form field) here, Java Spring there, PHP on another. Flash generated from Apache Turbine from XML to use XSLT to build the HTML fallback. Everything was complex. I had no idea what all these files on my machine were and the hard drive was always 95% full causing blue screens.

There and then I opted to even more moving from random things on the backend to a standardised front-end. It makes sense to know what you use and to leave a lot of the weird things to the browser. It is an exciting task to cover the basic use case and enhance with more capable environments to run your code in.

Fast forward to now. We have won on the web standards front. We’ve never had more capable browsers. Most are evergreen and based on open source projects. The web is a roaring success. Open Source is a roaring success. Want to build something cool? Use an open source, web technology based editor. Host it on a Git based platform that allows people to contribute and you to document it. Check amazing documentation with contributors from huge corporations. And learn what’s possible and what may yet not be ready.

Things couldn’t be simpler, right? Well, yes, but we don’t embrace this enough.

Yesterday I found an excellent repository listing useful resources. I had written a few that fit the bill of this project. So I thought I’d go and contribute them. The project was on GitHub and there were clear and friendly instructions how to add mine.

So far, so hoopy. I forked the repo, I pulled the project. I ran the NPM command to get a CLI wizard to add my projects.

Then the project pulled down 670MB of dependencies. This included a full build of chromium to create a screenshot of my projects. Then my node/NPM setup needed updating as I had it left for a few weeks. Another few megabytes and install steps.

Now, I was in the Microsoft office when I did that, so – hey, whatever. Even at home I have 250mbit downstream, so that’s OK, too. My Mac has a 1TB hard drive, so no worries there…

But here’s the thing. For generating a 10 line JSON object that describes a web resource I spent all this time. I have truckloads of code on my computer I have no idea what it is, how safe it is and if I should keep it up-to-date to be safe.

Imagine me being a much younger, much more eager and gifted developer in a different place. A country where connectivity is at a premium, slow and costs an arm and a leg. An eager person that wants to prove themselves and has a lot to contribute. I can’t. I won’t. And I’d feel terrible for not doing so. I’d feel like I don’t belong. I’d feel like I am not good enough – no matter how much skill I have.

Back to 2005. I have no idea what’s filling up my hard drive. Complex setups are in the way of me contributing. I am not happy. That’s what anyone not as privileged as me would feel like.

We should be better. There is nothing wrong with trying things out. We should use experimental and complex technologies on fun projects. Not much is at stake, they are good for us to play with things.

But – we should not put up random barriers for people who could have fun with us and help us along the way. A small part of us puts a lot of dedication into improving the performance of our projects for our end users.

When you go open source, developers are also users. We should put as much effort into making it easy and fast for people to contribute to our projects. Unless we do so, we will not have any diverse and inclusive community. Let people show their skills – don’t force your devops needs unto them.