Forem: Jack

Give your users some colour

Jack — Tue, 13 Apr 2021 17:20:58 +0000

This is a real quick one!

If you have a project that involves users interacting with each other, like a chat app or something with profiles, it might be nice to assign them a colour. A bit like WhatsApp names. The challenge is how to make sure the same users always have the same colour as themselves, but within a wide range such that it's effectively random?

You can use ASCII key codes and the modulo operator and combine with HSL for a quick solution that will always return a random, but identical, hue, thereby converting any string into colour.


const name = 'Michael Jordan';
const characters = name.split('');
const code = characters.map(a => a.charCodeAt(0)).join('');
// code is 771059910497101108327411111410097110
const hue = code % 255;
const nameHSL = `hsl(${hue}, 80%, 40%)`;

Of course, you might prefer to use a UID or 'user created at' timestamp in case you have two Michael Jordans - this works for literally any string!

For anyone wondering, MJ is this leafy green.

Lovely.

Making a progress circle in React

Jack — Sat, 06 Feb 2021 18:20:15 +0000

When I need something simple that I don't know how to build quickly, it can be tempting to find a library for it. But what is actually going on inside any given library? And how do I make it do this specific thing, instead of the 20 other options this library comes packaged with? I think it can sometimes take longer to read the docs and find workarounds than to just build the thing from scratch, and then at the end it's lighter and easier to make adjustments.

I recently wanted to make a progress circle / pie. It came out looking something like this:

Here is how I did it in React. The aim of this article is for people to do things their own way rather than using a component someone else has built for them, so I'd love to know what you'd do differently or additionally in the comments.

SVGs

I like SVGs a lot, they're awesome. They seem to have every attribute you could want and, unlike some CSS properties, they work on all main browsers. So actually we can do this whole thing without CSS. Since this is a dynamic component which will take a percentage value, we'll be using JavaScript to do all the calculations.

We're going to make two circles, one (blue) on top of the other (light grey). We'll use SVG's stroke-dasharray, which sets the length of a dashed stroke, and stroke-dashoffset, which sets where it begins relative to its natural starting point.

So the stroke dash length will be the circumference of the circle - 2 * pi * radius - and the offset which we need to change for the blue circle will be a percentage of that. When we want to visualise 85%, that stroke will have to start at 15% of whatever the circumference is, so that we can only see the remaining 85% of the line before the dash ends.



<svg width="200" height="200">
  <circle r="70" cx="100" cy="100" fill="transparent" stroke="lightgrey" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="0"></circle>
  <circle r="70" cx="100" cy="100" fill="transparent" stroke="blue" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="66"></circle>
</svg>

We're already off to a flying start, with some hard-coded values - in particular, the radius of 70, the circumference of 439.8 and its "85%" bar starting at 66. If you try this yourself, you'll see we're 90 degrees clockwise of where we'd want to be, and also missing the text value that should sit neatly in the middle. So we can put the circles in a group to rotate it -90 degrees, and add some text.



<svg width="200" height="200">
  <g transform="rotate(-90 100 100)">
    <circle r="70" cx="100" cy="100" fill="transparent" stroke="lightgrey" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="0"></circle>
    <circle r="70" cx="100" cy="100" fill="transparent" stroke="blue" stroke-width="2rem" stroke-dasharray="439.8" stroke-dashoffset="66"> 
    </circle>
  </g>
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">85%</text>
</svg>

There are some of those great SVG attributes I mentioned earlier - dominant-baseline and text-anchor helping us centre our text vertically and horizontally. Doing stuff like this in CSS can be a bit of a headache. When rotating SVGs we can also specify the centre of rotation - in this case its in the middle at 100 100.

This actually already gives us the progress circle at the top of the article, so we're ready to move this to React.

Making it a component

Using React gives us a lot of dynamic control over the values we're using. Let's take the percentage we want as an input, and the colour we want the progress to be.

We'll start by 'cleaning' the input to make sure it's a number we can use, we can set up the SVG parts as re-useable components and then we're basically done.



const cleanPercentage = (percentage) => {
  const isNegativeOrNaN = !Number.isFinite(+percentage) || percentage < 0; // we can set non-numbers to 0 here
  const isTooHigh = percentage > 100;
  return isNegativeOrNaN ? 0 : isTooHigh ? 100 : +percentage;
};

const Circle = ({ colour, percentage }) => {
  const r = 70;
  const circ = 2 * Math.PI * r;
  const strokePct = ((100 - percentage) * circ) / 100; // where stroke will start, e.g. from 15% to 100%.
  return (
    <circle
      r={r}
      cx={100}
      cy={100}
      fill="transparent"
      stroke={strokePct !== circ ? colour : ""} // remove colour as 0% sets full circumference
      strokeWidth={"2rem"}
      strokeDasharray={circ}
      strokeDashoffset={percentage ? strokePct : 0}
    ></circle>
  );
};

const Text = ({ percentage }) => {
  return (
    <text
      x="50%"
      y="50%"
      dominantBaseline="central"
      textAnchor="middle"
      fontSize={"1.5em"}
    >
      {percentage.toFixed(0)}%
    </text>
  );
};

const Pie = ({ percentage, colour }) => {
  const pct = cleanPercentage(percentage);
  return (
    <svg width={200} height={200}>
      <g transform={`rotate(-90 ${"100 100"})`}>
        <Circle colour="lightgrey" />
        <Circle colour={colour} percentage={pct} />
      </g>
      <Text percentage={pct} />
    </svg>
  );
};

And actually this is just a starting point, since there are still hard-coded values - do we want to fix our radius to 70, or stroke width to 2rem, or circle size to 200? I think probably not, and now that's all in our control - I've left curly braces wherever I would continue to add dynamic values. At the moment the component takes just percentage and colour, but it could take stroke width, radius, rounded ends and so on.

You can see the final code with some examples where I've added some more colours, rounded the ends using stroke-linecap="round" below; I've also included a "Randomise" button so you can see it in action.

Making a 'Back to Top' button without Javascript

Jack — Sun, 11 Oct 2020 12:27:31 +0000

The 'back to top' button

Here is my tutorial on making a 'back to top' button without JavaScript. Please also refer to these very helpful design guidelines. Do let me know in the comments if there is anything here I can be doing differently, especially if I've missed anything regarding accessibility.

Why?

I recently built a portfolio site for a freelance journalist who required a lightweight portfolio site (which I did with Eleventy), where she could host her articles and have visitors contact her.

When I got to designing the full-length article page itself, I wanted to provide a button for readers to get back to the top since there is information that could be of interest after reading: a link to download the original article as a PDF, another to the online article, details like when it was written and so on.

How to implement it?

I asked Google how this could be done - I find it helpful to get different perspectives on solutions before diving into code. I was surprised to find that every answer involved using JavaScript / jQuery. Unless I'm missing something, most code concerning layout that can be done with CSS, should be. JavaScript breaks more easily, requires more work by the browser and not all users run JavaScript.

// Detect dark theme var iframe = document.getElementById('tweet-1303268890638778368-524'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1303268890638778368&theme=dark" }

If you already know about CSS' position property, skip to the code.

Getting into `position`

We need to understand the various CSS positions:

static: this is the default value for every element and is named only so that it can be referred to when describing what other positions do. A more helpful name might be none. The only time you would ever need to use it would be to remove an element's position that had been set elsewhere in a less specific declaration block, i.e. you never need to use it (just go and remove the position property from that other block). Think of static as 'unpositioned', in that it just happens to be where it ends up on the page. This is very useful, because you want most of your elements to 'end up' where you'd expect... it's just that you don't need to apply this property in order for that to happen. As far as I know, this is the most anyone has ever written about the static position.
relative: this establishes the element on the page, relative to where you'd expect it to be (its static position). If you add left: 20px; it will move 20px from the left edge of where you'd expect it to be. If you make an element relative without also changing its position, it might look like nothing has happened but your CSS now knows it is there on purpose (unlike an 'unpositioned' static element), and so it can now be used as a reference for any child elements.
absolute: an absolute positioned element will go anywhere on the page relative to its closest parent that isn't static, or body if it doesn't have one. With top: 0; this will line up the top of the absolute element with the top of its closest positioned parent.
fixed: sets the position of an element relative to the window rather than anything on the page - the Dev.to navbar that you can see at the top is fixed, for example, so it scrolls with your screen not with the page (unless you've changed this default in your settings).
sticky: this toggles between relative and fixed. It will behave like a relative element until it gets to its sticky position, and stays fixed there until its containing element no longer accommodates its position and it toggles back again. This CSS position has been around since 2013 and is up to 95% global usage when using the -webkit- prefix according to caniuse.

Putting it all together

So, we're going to make a relative page (<main>) with an absolute scrollbar (<div>) that contains a sticky button (er, the 'button' is in fact an anchor element, since it navigates rather than triggering an event.. so let's call it a link from now on: <a>).

We won't want to navigate 'back to top' whilst we're already there, so the scrollbar should begin below where the screen loads, i.e. at least 100% of the viewport height from the top of main. Once we do see the link, we want it to stay in the bottom right, because that's where users expect to find it. Let's say there's a <footer> at the end of the page, and we want to prevent the link scrolling to the bottom of <main>, so the scroll bar will also be offset from the bottom.

Here is the most basic implementation of the 'back to top' link without using any JavaScript:

The HTML



<body>

  <main>

    <section>Words</section> <!--your page content-->

    <div class="scroll-top"> <!--scrollbar at the end of main-->

      <a class="scroll-top__link" href="#">Back to top</a> <!--href="#" navigates to the top of the page-->

    </div>

  </main>

  <footer>Footer</footer>

</body>

The CSS



main {position: relative;} /* to place scrollbar /

section {height: 300vh;} / so we can scroll /

footer {height: 5rem;} / a typical footer height */

.scroll-top {

  position: absolute; /* relative to its positioned <main> parent /

  top: 120vh; / starts below the bottom of the screen /

  bottom: 3rem; / stops scrolling before the end /

  right: 2rem; / offset from right hand side */

}

.scroll-top__link {

  position: -webkit-sticky; /* for Safari /

  position: sticky; / 'relative' until element reaches... /

  top: 90vh; / 90% viewport height from the top, when it becomes 'fixed' - until its container toggles it back to 'relative' */

}

The JavaScript

¯\_(ツ)_/¯

The final product

I included an outline on all the elements so you can see how position is coming into play.

Let's add lots of text to our <section> so we don't have to give it an arbitrary height, and introduce smooth scrolling, colour, hover opacity and some padding in our CSS. Here's what that looks like in practice:

So there it is, all you need to make a 'back to top' link without any JavaScript.

edit: href="#" in an anchor tag tells the browser to scroll to the top of the page without adding to the history, so this shouldn't affect user navigation.

much later edit: the div / invisible scroll bar obviously sits on top of the page, so anything underneath it is unclickable. This is a problem for links in text underneath the path of the button.