Country Code to Flag Emoji

Jorik — Fri, 09 Apr 2021 11:03:21 +0000

Instead of showing boring country codes like US, CH, NL, it is much nicer to show the flag emojis, 🇺🇸 🇨🇭 and 🇳🇱, right? This isn't hard to do with some JavaScript.

function getFlagEmoji(countryCode) {
  const codePoints = countryCode
    .toUpperCase()
    .split('')
    .map(char =>  127397 + char.charCodeAt());
  return String.fromCodePoint(...codePoints);
}

The flag emoji is a combination of the two unicode region characters, located at unicode position 127462 for the letter A. For CH (Switzerland), we want the indexes to be 127464 and 127469.

Run down of what happens in this little function;

First, uppercase the country code input to ensure we're getting the right character position.
Split into an array, and iterate over each character.
We can receive the UTF-16 code index from the character using charCodeAt. The UTF-16 A is positioned at 65, and we have subtracted this from the region A character index 127462, explaining the hardcoded 127397 value (127462 - 65). To get the correct flag emoji index, we simply add the received index to the offset number.
Finally, the String.fromCodePoint function will return the emoji characters for the computed indexes.

getFlagEmoji('US') = 🇺🇸
getFlagEmoji('NL') = 🇳🇱
getFlagEmoji('CH') = 🇨🇭

Instant flags without additional resources!

Cross application drag 'n drop using Transmat

Jorik — Thu, 08 Apr 2021 09:43:38 +0000

With Transmat you can add drag-drop and copy-paste interactions to your webpage. That is nothing new, but with its ability to interact with external applications by simply dragging (or copying!) elements, a new world of possibilities open up!

The Transmat library providing a wrapper around the browser's DataTransfer API, and makes it easy to respond to drag-drop interactions. This interaction is supported by all desktop browsers that have been released after Internet Explorer 11 (10 years ago!)

In this post, you'll learn how to transfer data to external applications, receive incoming external data, and how to highlight drop areas.

1. Transferable elements in your HTML

Add a draggable and focusable element to your webpage.

<div id="source" draggable="true" tabindex="0">
  Drag or copy me
</div>

<div id="target" tabindex="0">
  Drop here!
</div>

The elements need to be marked as such in order to enable the browser's native Drag and Drop interactions. The tabindex will make the element selectable, which enables the user to trigger a copy.

2. Setting up drag and copy interactions

The examples below have the transmat library imported. You can get it from npm, npm install transmat.

import {Transmat, addListeners} from 'transmat';

const source = document.getElementById('source');

// Add listeners for 'drag' and 'copy'.
addListeners(source, 'transmit', event => {
  // Create a Transmat instance based on the incoming event.
  const transmat = new Transmat(event);
  transmat.setData({
    // Text data. This will show up in Text fields, 
    // but also as the fallback for text/html when pasting 
    // to WYSIWYG editors.
    'text/plain': 'Hi there!',

    // HTML data. This will be accepted by many WYSIWYG 
    // editors like Google Docs, Gmail, Microsoft Word, etc.
    'text/html': `
         <h1>This is formatted!</h1>
         <p>
           Pretty cool, and you can also add
           <a href="https://example.com/">links</a>!
         </p>
         <img src="https://example.com/test.jpg" />`,

    // URL data. This URL will open when dropping on the
    // URL bar of your browser, will create a shortcut file 
    // when dropping on the desktop.
    'text/uri-list': 'https://example.com/foobar',

    // Share a structured JS object. Transmat with serialize 
    // this object using JSON.stringify()
    'application/json': {name: 'Rory'},
  });
});

Transmat works as following;

The addListeners method assigns the event transmit listeners for dragstart and copy events. The event callback gets invoked when one of these interactions get triggered.
A new Transmat(event) instance is created using the event object. This instance makes it easier for you to interact with the underlying DataTransfer API and ensures the same behavior across browsers.
Provide data with the setData(data) method. By providing MIME types, you will describe the type of data. The MIME types listed in the code example below are primitives that have wide support across the operating system. See the code comments to see the behavior for each of these.

Now if you'll run this example, see what happens when you drag-drop the example object to your favourite text editor (Codepen, Sublime, VS Code), WYSIWYG editor (Google Docs, Apple Pages, Microsoft Word) and browser windows. It will show and open the content you provided in this element. Like magic!

3. Listening for incoming data

The same way as listening for the transmit event, you can listen to incoming data using the receive event.

const target = document.getElementById('target');

// Add listeners for 'drop' and 'paste'.
addListeners(target, 'receive', event => {
  // Create a Transmat instance based on the incoming event.
  const transmat = new Transmat(event);
  if (
    // Only want to accept JSON data.
    transmat.hasType('application/json') && 
    // Call this in order to accept incoming data.
    transmat.accept()
  ) {
    // Get the JSON string data, parse it, and log.
    const jsonString = transmat.getData('application/json');
    const data = JSON.parse(jsonString);
    alert(`Hi ${data.name}!`);
  });
});

Like as transmitting data, you will need to set up a receive event listener to listen for incoming data transfers.
A new Transmat(event) is created to interact with the underlying incoming data.
In this example, you only want to accept application/json data. The hasType(type) method will return whether this payload is being tranferred.
In order to accept the tranfer, you need to call the accept() method. This will prevent the document from doing its default behavior, like navigating to an URL when the text/uri-list payload is present.
When accepted, you will use the getData(type) to read the string payload. In this example, you expect JSON data which needs to be parsed first using JSON.parse.

4. Highlight drop areas

It can be hard for the user to discover valid drop areas. You can use the TransmatObserver class to observe incoming transfer events on targets, and respond to them. The example below will add a className when a JSON payload is being transferred.

<style>
.drag-active { background: rgba(0, 255, 0, .1); }
.drag-over { background: rgba(0, 255, 0, .5); }
</style>

// Observe Transmat (drag) events happening on your page.
const obs = new TransmatObserver(entries => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    // Only want to highlight elements containing JSON data.
    if(transmat.hasType('application/json')) {
      // Add a className when an element is dragged over 
      // your page.
      entry.target.classList
          .toggle('drag-active', entry.isActive);

      // Add a className when an element is dragged over 
      // the observed target.
      entry.target.classList
          .toggle('drag-over', entry.isTarget);
    }
  }
});

// Observe the target element.
obs.observe(target);

There's more!

You should now know the basics of the Transmat library. But there's more! The library offers utilities for interacting with JSON-LD for a connected web, and a minimalistic drag-image to integrate with your existing drag-drop implementation.

Curious to hear what your ideas are with this barrier breaking technique!

Seamless cross web interactions by using a 10 year old API

Jorik — Thu, 18 Mar 2021 10:45:05 +0000

Last week I published a small open-source library on GitHub around an overlooked, 10 year old, capability of the browser's built-in Drag and Drop and ClipboardEvents. It will let your users transfer data to other web (and native!) applications on the desktop, by using the primary drag and copy interactions.

This could be particularly interesting for folks who are creating progressive web applications (PWA) and want to integrate with third-party apps, or need to interaction across browser-windows. Think about it as sharing on desktop.

Check out the Transmat library at GitHub

Curious to hear what possible use-cases could be for your work!

DEV Community: Jorik