Context menus are one of those very useful UI widgets that still haven't reached the HTML spec. There have been attempts, but for now everyone tends to make its own custom implementation.

Especially with the advent of React, the tendency is to write a custom menu component that uses JavaScript to open/close itself, perhaps by using an invisible overlay to detect clicks outside the menu and close it accordingly. This works fine in practice, however it doesn't have to be so complicated. If you need a simple dropdown menu that:

• Has no dependencies;
• Can be triggered with a click/tap on any element;
• Is fully cross-browser;
• Doesn't need JavaScript!

Then look no further. It's much simpler than you think!

An example

This is done in pure HTML and CSS; the JavaScript is there just to add functionality. Source code below.

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<button>☰</button>
<nav class="menu">
  <ul>
    <li>
      <button onclick="alert('Hello there!')">
        Display Greeting
      </button>
    </li>
    <li>
      <button onclick="print()">
        Print This Page
      </button>
    </li>
  </ul>
</nav>

The CSS

1
2
3
4
5
6
7
8

.menu {
    visibility: hidden;
}

button + .menu:active,
button:focus + .menu {
    visibility: visible;
}

That's the trick: we hide the menu in CSS initially, then show it when the button gets focused and while we're clicking on the menu itself. This is necessary so that the click actually gets registered. That's it! No JS trickery involved.

You can attach event listeners to the menu items, e.g. using onclick or document.addEventListener and they'll work as usual.

Obviously the menu can be opened only by elements that can receive focus, such as buttons. So what about other non-interactive elements? Can we make them focusable too? The answer is yes!

A more complicated example

We want to display a context menu when clicking on the following image:

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<figure tabindex="-1">
  <img src="/images/doge.png" />

  <nav class="menu">
    <ul>
      <li>
        <button>Open Image in New Tab</button>
      </li>
      <li>
        <button>Save Image As...</button>
      </li>
      <li>
        <button>Copy Image Address</button>
      </li>
    </ul>
  </nav>
</figure>

The trick here was to add tabindex. This makes the element focusable, so that it can open the menu on click. Note that if the clickable element is a <button> or other interactive content (i.e. any focusable element), then you don't even need this!

I've used a <figure>, but you can use any element you like. Just add tabindex="-1" to make it focusable, if it isn't already. You can place the menu anywhere you want in the HTML, as long as you're able to target it with a CSS selector. Just try not to put a button in a button as that's invalid HTML, although technically it will still work.

The CSS

1
2
3
4
5
6
7
8

.menu {
    visibility: hidden;
}

figure:active .menu,
figure:focus .menu {
    visibility: visible;
}

How do I make the menu appear next to the mouse cursor?

You'll need JavaScript, but it's entirely up to you whether you want to do this. Alternatively you could add position: absolute to the menu and just make it appear below (or next to) the element you clicked — no need for JS in this case! Anyway, this did the trick for me:

1
2
3
4
5
6
7

const img = document.querySelector('.doge');
const menu = document.querySelector('.menu');

img.addEventListener('mousedown', ({ offsetX, offsetY }) => {
    menu.style.top = offsetY + 'px';
    menu.style.left = offsetX + 'px';
});

What about browser support?

It may not work in some very old browsers, so make sure to test it in the browsers you need to support. This MDN page has some info about what happens to the focus of a button when being clicked/tapped on different platforms. I did some tests myself and it seems to work well everywhere, including mobile browsers.

And that's it! I hope you found this useful. If you spot any issues, please do let me know by commenting below!

Back in the days, when I got serious about becoming a “real programmer”, I decided I wanted to learn Java.

I didn’t know anything about OOP, Design Patterns, Single Responsibility… all I knew was some PHP, Visual Basic, and database design stuff. That was it.

So I went to a book store and I bought this book about Object-Oriented Programming in Java 6. It was a massive book, probably around 1000 pages of code and programming best practices, and I read like 80% of it. Some parts were too advanced for me, but I learned a lot.

I used to like Java. I thought, “so this is what real programming looks like, with classes and inheritance. That’s the right way”.

I actually believed this for a while, until that day…

One day I went to this website, projecteuler.net, which is basically a way to prove your skills by solving difficult programming challenges, and learn in the process.

It was years ago, but I remember I solved the first couple exercises pretty easily. The third one was a bit harder. Here’s the original text:

A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99.

Find the largest palindrome made from the product of two 3-digit numbers.

Source: https://projecteuler.net/problem=4

I spent a few hours on it before coming up with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import static java.lang.System.out;

import java.util.ArrayList;
import java.util.List;

public class Euler4
{
  static final int MIN = 100;
  static final int MAX = 999;

  public static List<Integer> getPalindromes(int min, int max)
  {
    List<Integer> palindromes = new ArrayList<>();
    for (int i=max; i >= min; i--)
    {
      for (int j=max; j >= min; j--)
      {
        int product = i * j;
        if (isPalindrome(new Integer(product).toString()))
          palindromes.add(product);
      }
    }
    return palindromes;
  }

  public static boolean isPalindrome(String str)
  {
    if (str.length() < 0) return false;
    if (str.length() <= 1) return true;

    char firstChar = str.charAt(0);
    char lastChar = str.charAt(str.length()-1);

    if (firstChar == lastChar) {
      return isPalindrome(str.substring(1, str.length()-1));
    }
    return false;
  }

  public static int getHighestNumber(List<Integer> numbers)
  {
    int highestNumber = -1;
    for (int number : numbers)
      if (number > highestNumber)
        highestNumber = number;
    return highestNumber;
  }

  public static void main(String[] args)
  {
    List<Integer> palindromes = getPalindromes(MIN, MAX);
    out.println(getHighestNumber(palindromes));
  }
}

It’s 46 lines of code, without counting blank lines. Not too bad, right?

Ok, don’t be mean. I know that’s probably shitty code, but it was my own solution and I was quite proud of it.

Now, when you finish a challenge successfully, you’re given access to the forum, where other programmers post their own solutions in many different languages.

That’s where I first discovered Ruby.

I was reading the thread about the problem I just solved, when I stumbled across this Ruby solution:

1
2
3
4
5
6
7
8

m = 0
901.upto(999) {|a|
  901.upto(999){|b|
    s = (a*b).to_s
    m = [m, a*b].max if s == s.reverse
  }
}
puts m

And I was like, “wow, seriously? Only 8 lines of code?”.

I couldn’t believe my eyes. I was staring at something marvelous; some beauty that I never came across before.

Ruby is an object-oriented programming language that focuses on expressiveness and readability.

It was love at first sight. I started reading about this amazing language, about the fact that everything in Ruby is an object, even integers, and that you can write code like 3.times { print "Hello" } to simply print “Hello” 3 times. It was like reading English, and I felt truly amazed, humbled, and inspired.

Anyway, that’s just part of my story about becoming a better programmer. I’m not sure what the point is, I just felt like writing it down. But if, like me, you’re one of those people that need some ‘takeaway’ from a story, I guess it should be this:

Just don’t stop learning, ever.

Keep on learning and practicing, and you too will discover beautiful things.

The Elixir Logger is pretty good. You can easily log anything with it, just call one of debug, info, warn or error. For example:

1

Logger.info("something happened")

Turns into:

12:34:56.789 [info]  something happened

Very nice. However, there are cases where you may want to, say, change some data structure, like update a map or a list, and then log the transition, without breaking the pipe. Example:

1
2
3
4
5
6
7
8

def my_function do
  list = [1, 2, 3]

  list
  |> Logger.debug("before insert: #{inspect list}")
  |> Enum.into([0])
  |> Logger.debug("after insert: #{inspect list}")
end

This doesn’t work for many reasons. First, we can’t refer to list that way. If we do, we will always be logging [1, 2, 3], because Elixir’s data structures are immutable. Second, Logger.* functions return the :ok atom, which means you can’t use them in a pipe—unless that is what you want to return.

The solution to both issues is actually pretty straightforward: use a lambda! A lambda is just an anonymous function. We can define it and call it right away. So the code above becomes:

1
2
3
4
5
6
7
8
9
10
11
12

def my_function do
  [1, 2, 3]
  |> (fn list ->
    Logger.debug("before insert: #{inspect list}")
    list
  end).()
  |> Enum.into([0])
  |> (fn list ->
    Logger.debug("after insert: #{inspect list}")
    list
  end).()
end

If we call this function, we get:

12:34:56.789 [debug] before insert: [1, 2, 3]

12:34:56.823 [debug] after insert: [0, 1, 2, 3]

Great, exactly what we want! Except the syntax is horrible. But fear not, we can improve on it. How about we make a wrapper?

1
2
3
4
5
6
7
8
9
10
11
12
13

defmodule PipeableLogger do
  require Logger

  def debug(data, msg) do
    Logger.debug(msg)
    data
  end

  # def warn, do: ...
  # def error, do: ...
  # def info, do: ...

end

Let’s rewrite our function once again:

1
2
3
4
5
6

def my_function do
  [1, 2, 3]
  |> (&PipeableLogger.debug(&1, "before insert: #{inspect &1}")).()
  |> Enum.into([0])
  |> (&PipeableLogger.debug(&1, "after insert: #{inspect &1}")).()
end

Still not pretty though, as we still needed to wrap the function in a lambda. If we want to build a proper Logger wrapper, there are at least two different cases we may want to handle:

1. Logging a simple message (without any data);
2. Logging the data we receive from the pipe, maybe also with a message.

Here’s the improved version of PipeableLogger:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

defmodule PipeableLogger do
  require Logger

  def debug(data, msg \\ "", metadata \\ [])
  def debug(data, msg, metadata) when msg == "", do: Logger.debug(data, metadata)
  def debug(data, msg, metadata) do
    Logger.debug(msg, metadata)
    data
  end

  # def warn, do: ...
  # def error, do: ...
  # def info, do: ...

end

Let’s use it:

1
2
3
4
5
6

def my_function do
  [1, 2, 3]
  |> PipeableLogger.debug("before insert")
  |> Enum.into([0])
  |> PipeableLogger.debug("after insert")
end

Much, much simpler! The only problem now is, we’re logging just a message. What if we want to log the data? It’s a lambda all over again.

Here’s the final version I came up with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

defmodule PipeableLogger do
  require Logger

  def debug(data, msg \\ "", metadata \\ [])
  def debug(data, msg, metadata) when msg == "", do: Logger.debug(data, metadata)
  def debug(data, msg, metadata) when is_binary(data) do
    Logger.debug(msg <> data, metadata)
    data
  end
  def debug(data, msg, metadata) do
    Logger.debug(msg <> inspect(data), metadata)
    data
  end

  # def warn, do: ...
  # def error, do: ...
  # def info, do: ...

end

The assumption is that we always want to concatenate the data with the message, which is fair enough I think. Let’s see it in action:

1
2
3
4
5
6

def my_function do
  [1, 2, 3]
  |> PipeableLogger.debug("before insert: ")
  |> Enum.into([0])
  |> PipeableLogger.debug("after insert: ")
end

1
2
3
4
5
6

iex> my_function()

12:34:56.789 [debug] before insert: [1, 2, 3]

12:34:56.789 [debug] after insert: [0, 1, 2, 3]
[0, 1, 2, 3]

Now we can log the data with a message, all in a pipe and without a lambda! Nice!

Summing up, I’m not convinced a Logger wrapper is the right way. This kinda goes against the blog post, but to be fair I think Elixir people tend to use pipes way too much (I’m guilty as well). So I wouldn’t probably wrap Logger in any project.

It’s also worth noting that Logger supports the concept of metadata, which basically means you can already attach any data you want. For example, if you put this in your config.exs:

1
2

config :logger, :console,
  metadata: [:my_list]

You can then call Logger like this:

1
2
3
4
5
6
7

iex(1)> require Logger
Logger

iex(2)> Logger.info "Work done", my_list: inspect [1, 2, 3]

12:34:56.789 my_list=[1, 2, 3] [info]  Work done
:ok

Point is, you don’t need a wrapper if all you want is concatenate some data in the log message. You do need a wrapper though (or a lambda) if you want to use Logger in a pipe.

So how about this instead?

1
2
3
4
5
6

def my_function do
  list = [1, 2, 3]
  Logger.debug("before insert: #{inspect list}")
  new_list = Enum.into(list, [0])
  Logger.debug("after insert: #{inspect new_list}")
end

Simple is better. It’s fine to break that pipe every once in a while!

Another fun kata:

Given an array of arbitrarily nested objects, return a flat array with all the objects marked as “good”.

The definition above is quite generic, so I’ll provide examples to show exactly what I mean.

The array in JavaScript looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var items = [{
    id: 1,
    good: true
}, {
    id: 2,
    children: [{
        id: 3,
        good: true
    }, {
        id: 4,
        good: true
    }, {
        id: 5,
        children: [{
                id: 6,
                good: true
            }
            ...
        ]
    }, {
        id: 9,
        children: [...]
    }, ...]
}, ...]

We want the IDs of the good ones.

You might have noticed not all objects are “good”. Number 2 for example is not good. So the result in this case should be:

1

[1, 3, 4, 6]

The only thing to notice here is that you know it’s not good because it’s not marked as such. In other words, when some object is “bad”, there’s no good: false nor bad: true that tells you that.

So how do we solve this challenge?

Since there’s an arbitrary nesting depth, we can once again leverage the power and simplicity of recursion.

Solution in JavaScript

I’ve created the function goodOnes(items) that takes the input and returns what we expect. I’m also using Ramda.js, just because I wanted a clean functional solution and I didn’t want to mess around object mutation.

Here it is:

1
2
3
4
5
6
7
8
9
10
11
12

function goodOnes(items) {
    return R.reduce(theGoodOne, [], items);

    function theGoodOne(acc, item) {
        if (item.good) {
            return acc.concat(item.id);
        } else if (item.children && item.children.length > 0) {
            return R.reduce(theGoodOne, acc, item.children);
        }
        return acc;
    }
}

As a side note, you don’t really have to use Ramda.js. Array.prototype.reduce does the same, although in a less elegant way.

Explanation

What this function does is basically just collecting values. The starting point is an empty array, you can see that as the second argument in the first line. theGoodOne is another function (a closure, to be specific) that is implicitly taking two arguments: acc (the accumulator, the empty array) and item (the current item in the loop).

If the item is good, we return a new array with the item’s ID. Otherwise, we return the accumulator. However, if the item happens to have some children, we start over doing the same thing (i.e. looping over its children), also keeping track of the accumulator we already have this time. It might be still empty, but we don’t care yet. We just return it at the very end.

Now, you might have noticed a bug: what happens if the item is good, but also has children? … Yes, that item will be discarded! I did it on purpose by the way. When I made this function, the original array of items never had any good item with children. Only good items, or items with children. The algorithm is reflecting this, so it’s technically not a bug.

If you’re curious about what’s the original intent behind this function, it is to collect values from an infinitely nestable architecture of UI components. There are text components, number components, datepickers etc… those are all part of a category called fields. There are also wrappers, that could be for example a fieldset or a grid. Wrappers can contain fields, but also other wrappers.

So what if you have such data structure with so many components and all you need is just an array of fields? Simple, just reduce recursively on it! ;)

More in general, you can use the recursive reduce whenever you have a nested data structure (such as an array of arrays) and you want to get something out of it.

Solution in Clojure

This recursive solution follows the same logic as the JavaScript one, but somehow it feels superior. It could probably be rewritten in a more elegant way I guess, but I’m not very experienced with Clojure so here we go:

1
2
3
4
5
6
7
8
9

(defn good-one [acc item]
  (if (item :good)
    (conj acc (item :id))
    (if (seq (item :children))
      (reduce good-one acc (item :children))
      acc)))

(defn good-ones [collection]
  (reduce good-one [] collection))

Demo & Download

Everything is on GitHub if you want to fiddle around – just follow the instructions to get the demos up and running on your computer.

• JavaScript GitHub source - Readme instructions
• Clojure GitHub source - Readme instructions

Here’s a fun kata:

Create a blend function that, given two lists of the same length, returns a new list with each element alternated. E.g.:

blend [1, 2, 3] [4, 5, 6]
=> [1, 4, 2, 5, 3, 6]

As with all challenges, it can be solved in many different ways. However this particular one is easily solvable with functional programming techniques such as recursion.

You can try implementing it on your own first or just look straight at the solutions below.

Solution in Elm

The one below is probably the most straightforward solution:

1
2
3
4
5

blend : List a -> List a -> List a
blend xs ys =
    case xs of
        x :: xs' -> x :: blend ys xs'
        _ -> []

Notice how I exchanged the arguments in the recursion call. That did the trick!

Let’s try it in the REPL – I added slashes so you can copy-paste the function:

1
2
3
4
5
6
7
8
9
10
11

$ elm-repl

> blend xs ys = \
    case xs of \
        x :: xs' -> x :: blend ys xs' \
        _ -> []

<function> : List a -> List a -> List a

> blend [0,0,0] [1,1,1]
[0,1,0,1,0,1] : List number

Solution in Swift

We can achieve the same in Swift by using an extension that splits up an Array into head and tail (credits to Chris Eidhof):

1
2
3
4
5

extension Array {
    var match : (head: T, tail: [T])? {
      return (count > 0) ? (self[0],Array(self[1..<count])) : nil
    }
}

And here’s the solution:

1
2
3
4
5
6
7

func blend(firstArray: Array<AnyObject>, secondArray: Array<AnyObject>) -> Array<AnyObject> {
    if let (head, tail) = firstArray.match {
        return [head] + blend(secondArray, secondArray: tail)
    } else {
        return []
    }
}

If you know of a better way, please let me know! Also feel free to leave a comment with any other alternative solution, even in other languages.