DEV Community: Codista

Build a "Neon Mode" for your Website

Codista — Fri, 15 May 2020 07:48:39 +0000

We recently added a new dark mode to our website.

Dark modes have become a very popular feature for apps and operating systems in recent years, and many users prefer the inverted colors because they're easier on the eyes. Our new dark UI looks gorgeous and has a few extra tricks up its sleeve too - here's how we made it.

Setting the Mood

First things first: the basis of most dark modes on the web these days are CSS custom properties - they let us define all our colors as variables we can change at runtime. There are many good tutorials on how to use them already, so we'll skip over that. For an existing site, the initial switch to custom properties can be a bit cumbersome, but find & replace is very helpful 😉.

We are working with Sass here, so it's a good idea to define the color schemes as mixins, so they're easier to reuse in different selectors. When it comes to naming the properties, try to stay away from visual names like "light" or "gray" - the other color scheme might invert that or use different hues, and things can get confusing.

In our case, we went with a "color scale" from background to foreground, and three highlight colors for our brand.


// define the color vars as a mixin so we can reuse it
@mixin color-scheme-dark {
  --color-scale-0: #001e2f;
  --color-scale-25: #143044;
  --color-scale-50: #576975;
  --color-scale-75: #e6f1f8;
  --color-scale-100: #ffffff;

  --color-brand-primary: #7a27ff;
  --color-brand-secondary: #26ffae;
  --color-brand-tertiary: #ed667b;
}

// default to light colors...
:root {
  @include color-scheme-light;
}

// ...except if no theme is set and the system preference is dark
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    @include color-scheme-dark;
  }
}

// override defaults through the data-theme attribute.
:root[data-theme='dark'] {
  @include color-scheme-dark;
}

We apply the light color scheme per default, and then override that based on other conditions. It's a good idea to check for the system preference in the prefers-color-scheme media query, but still give users the choice to toggle modes themselves, to adjust for whatever situation they're currently in.

To do that, we need to expose the dark mode variable through our website's UI.

Build the Light Switch

The light switch to toggle modes is just a simple button. We can define it as a thing with an on/off state by using role="switch" and the aria-checked attribute.

We put an SVG icon in there that has an accessible title and two paths for the "on" and "off" icons respectively. We show/hide these in CSS based on the documents data-theme attribute.

<!-- hook into js-darkmode-toggle via Javascript later -->
<button class="lightswitch js-darkmode-toggle" role="switch" aria-checked="false">
  <svg class="lightswitch__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <title>toggle dark mode</title>
    <!-- include two different icon paths, then display the one matching the current state in CSS -->
    <path class="lightswitch__icon__on" d="M9 20...1.512z"/>
    <path class="lightswitch__icon__off" d="M9 20...6h-2z"/>
  </svg>
</button>

Wire up the Power

The switch looks good, but still needs some Javascript to actually do something. The main task here is to check which mode of the UI the user is currently seeing, and then to toggle the data-theme attribute to trigger the changes in CSS. We use a cookie to save the current theme setting, so we can persist the choice when somebody navigates through multiple pages, or even closes their browser and comes back later.

If no cookie is set, we fall back to the system default again by checking the prefers-color-scheme media query.

class DarkMode {
  constructor() {
    // define some properties
    this.isActive = false;
    this.cookieTimeoutDays = 30;
    this.cookieName = "darkMode";

    this.toggleBtn = document.querySelectorAll(".js-darkmode-toggle");
    this.init();
  }

  init() {
    // get initial setting, add event listeners
    this.isActive = this.getPreference();
    this.toggleBtn.addEventListener("click", this.toggle);
  }

  getPreference() {
    // read if the user has selected a theme before,
    // otherwise fall back to media query for system defaults.
    const cookie = Cookies.get(this.cookieName);
    const systemPreference = window.matchMedia("(prefers-color-scheme: dark)")
      .matches;

    switch (cookie) {
      case "true":
        return true;
      case "false":
        return false;
      default:
        return systemPreference;
    }
  }

  toggle() {
    // switch between light and dark
    this.isActive = !this.isActive;

    // set the data attribute to trigger CSS changes
    document.documentElement.setAttribute(
      "data-theme",
      this.isActive ? "dark" : "light"
    );
    // update the cookie to save the user preference
    Cookies.set(this.cookieName, String(this.isActive), {
      expires: this.cookieTimeoutDays,
    });

    // toggle the button state for screen readers
    this.toggleBtn.setAttribute("aria-checked", String(this.isActive));
  }
}

// this feature only makes sense if CSS custom properties are supported, 
// so check for that first before we kick things off
if (window.CSS && CSS.supports("color", "var(--fake-var)")) {
  new DarkMode();
}

To see the result, try clicking the light switch button on codista.com.

Make it Click

A nice little detail here is the small "clicking" sound the toggle makes. It makes it feel a lot more natural, like a real switch we can flick on or off. A good resource for audio clips like this is freesound.org - it only requires a free account and has tons of material.

We can add the sounds as audio elements to the DOM and preload them so they can play instantly, which is crucial for the effect to work.

<audio src="click1.mp3" id="js-sound-off" preload="auto" hidden></audio>
<audio src="click2.mp3" id="js-sound-on" preload="auto" hidden></audio>

Hooking an extra method into the toggle() function, we can then select the appropriate sound and play it every time the button is pressed.

playSound() {
  const sound = this.isActive ? this.soundOn : this.soundOff;

  // always start the sound from beginning, in case it's
  // still playing from a previous action
  sound.currentTime = 0;
  sound.play();
}

Turn up the Glow

So far so good, but our darkmode could still use a little more spark. A nice thing about dark backgrounds is that it opens up more possibilities to play with light in a design. It's not just about inverting the colors - we can give certain elements special treatment to make them stand out even more in the dark.

In our case, the Codista brand design has lots of bright, synthetic colors that are perfect for a "neon" effect:

Achieving that look is quite easy: we can layer a few different text-shadows on top of large type, like headlines. The effect works by setting the text color to white, fuzzing the edges a bit with some white text-shadow, then adding the neon color on top with increasing amounts of blur. It's a good idea to define the blur size in relative em units here, so the glow will scale with the font-size.

We can set up a Sass mixin again to call this with different color variables later, i.e. to switch colors between primary and secondary headlines.

@mixin neon-glow($color: currentColor) {
  color: #fff;
  text-shadow: 
    0 0 0.033em #fff, 
    0 0 0.08em #fff,
    0 0 0.1em $color, 
    0 0 0.2em $color, 
    0 0 0.3em $color, 
    0 0 1em $color,
    0 0 1.5em $color;
}

[data-theme='dark'] {
  h1 {
    @include neon-glow(var(--color-brand-primary));
  }
  h2 {
    @include neon-glow(var(--color-brand-secondary));
  }
}

The glow effect also works with other UI elements, like cards or call-to-action links. The exact implementation depends on the design - for the Codista website, we leveraged border and box-shadow properties to create neon edges and glows. It's best not to overdo the effect though - we use it for interactions like hover or focus.

Flicker Animation

For the final touch, we gave our headlines the typical neon sign look where one of the letters is short-circuited and flickers. It looks like this:

To make that work, we first select some elements to apply the animation to. It works best with large type and should be used sparingly, so we went with the page's <h1> only.

Inside the DarkMode.js class, we can now run a function to wrap some of the letters of the h1 in a span, which we can then target for animation in CSS later.

function setFlickerAnimation() {
  // get all elements that should be animated
  const animatedElements = Array.from(
    document.querySelectorAll(".js-darkmode-flicker")
  );

  if (!animatedElements.length) {
    return false;
  }

  // helper function to wrap random letters in <span>
  const wrapRandomChars = (str, iterations = 1) => {
    const chars = str.split("");
    const excludedChars = [" ", "-", ",", ";", ":", "(", ")"];
    const excludedIndexes = [];
    let i = 0;

    // run for the number of letters we want to wrap
    while (i < iterations) {
      const randIndex = Math.floor(Math.random() * chars.length);
      const c = chars[randIndex];

      // make sure we don't wrap a space or punctuation char
      // or hit the same letter twice
      if (!excludedIndexes.includes(randIndex) && !excludedChars.includes(c)) {
        chars[randIndex] = `<span class="flicker">${c}</span>`;
        excludedIndexes.push(randIndex);
        i++;
      }
    }

    return chars.join("");
  };

  // replace the plain text content in each element
  animatedElements.forEach((el) => {
    const text = el.textContent.trim();
    const count = el.dataset.flickerChars ? parseInt(el.dataset.flickerChars) : undefined
    el.innerHTML = wrapRandomChars(text, count);
  });
}

The letters are chosen at random, so the effect is a bit different every time!

We can now select the .flicker class in CSS and apply a keyframe animation that toggles the element's opacity. We're going for a hard on/off flickering here rather than a slower transition, so the increments between the keyframe steps are very short.

⚠️ Attention: people with epilepsy or photosensitivity can have issues with blinking/flickering text. So it's very important to listen for signals like the prefers-reduced-motion media query to disable the effect. We can do that by setting the animation-duration property to zero.

// keyframe animation to abruptly toggle
// the letter's opacity value.
@keyframes flicker {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  72%,
  100% {
    opacity: 1;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  71.999% {
    opacity: 0.33;
  }
}

// only run in dark mode. for every other letter, offset the animation 
// and reverse its direction, so the flickering appears more random.
[data-theme='dark'] .flicker {
  animation: flicker 3s linear forwards alternate infinite;

  &:nth-child(even) {
    animation-delay: 0.3s;
    animation-direction: alternate-reverse;
  }
}
// if the user prefers reduced motion,
// disable the animation entirely.
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

Well, that's all folks! We love our new buzzing neon mode, and we hope you do too.

Adding TikTok Embed Support To Wagtail

Codista — Mon, 27 Apr 2020 11:38:27 +0000

TikTok videos are a lot of fun to watch. People get super creative with the limited amount of time they have. No wonder some of our clients requested being able to embed TikTok videos into their CMS pages, mainly blog articles.

The Wagtail docs do cover adding custom embeds to your configuration, but at first glance it's not completely straight forward. So we hope to clear things up a bit, by example, in a couple of minutes.

Adding support for TikTok oEmbed

First, a big and loud "thank you!" to TikTok for supporting the oEmbed standard. There are platforms that don't and it makes embedding less trivial, but let's not get into that.

First, fire up your Django settings (settings.py) and then add the following:

# CUSTOM OEMBED PROVIDERS
tiktok_provider = {
    "endpoint": "https://www.tiktok.com/oembed",
    "urls": [
        # 'https://www.tiktok.com/@memmesson/video/6797323084085890309'
        r"^http(?:s)?://(?:www\.)?tiktok\.com/@\w+/video/\d+$",
    ],
}

This specifies the provider itself. It also tells Wagtail which URLs are considered valid, via the regular expression pattern above.

Now, we need to add that provider to the list of valid providers:

WAGTAILEMBEDS_FINDERS = [
    # Register tiktok
    {"class": "wagtail.embeds.finders.oembed", "providers": [tiktok_provider],},
    # Handles all other oEmbed providers the default way
    {"class": "wagtail.embeds.finders.oembed",},
]

That's it! If you now fire up any CMS page that supports embeds, you can simply paste the direct TikTok video link and the embed will load right away.

Taking beautiful screenshots of your Slack app

Codista — Fri, 17 Apr 2020 15:40:04 +0000

Hey there fellow Slack developer! I guess you are also in the process of wanting to take some great looking screenshots of your brand new creation in action.

So, you fire up your Slack app, type in the magic words, or maybe click some magic buttons, and the content you want to picture for all eternity appears.

But.

It is in the Slack App. So… Whatever you are screenshotting might appear in the context of something else entirely.

Let's look at a modal as example.

Doesn't look all too friendly, eh? The darkened background, the lines of text hidden in it,…Would be a lot nicer if it would be white.

Presenting your app the way it deserves

Our little quick tip builds up on one realization: Slack is a web app. Hence, you can also open it in the browser. Seeing where we are going with this?

Yup. That also means we can use the Web Developer Tools available in any browser to selectively hide, show and modify content to our liking! As a matter of fact, this is how we take the screenshots for our Tack Release Notes, which we then run through Squoosh, to further slim them down.

The above video is in Firefox, but you can do this in Chrome or Safari as well.

Now, what you can see me doing:

I have our development workspace open.
I try to create the state I want to screenshot.
Then I do a right click, anywhere on the page, and hit Inspect Element. Which in turn fires up the Developer Tools. Now I see the HTML and CSS, and can manipulate both freely.
I remove the darkened background from the modal. You can see my mouse clicking there.
Afterwards I hide the entire Slack Chat UI. This works by selecting it in the HTML part of the window and then hitting the H key on my keyboard. Note that I move my cursor inside the Web Developer Tool Window. This keeps highlighting the section represented by the HTML I am hovering over. Super helpful! I close the tools and am ready to take a screenshot.
Now, you can do anything with this. You could change the shadow (via the CSS property box-shadow), make the window smaller, highlight something a bit better etc.

All of this without having to fire up any image manipulation program (what a long way to say "Photoshop").

Wagtail multi-language and internationalization

Codista — Wed, 08 Apr 2020 09:47:15 +0000

WordPress is a well known content management system. Clients often contact us and ask whether we could build a website for them using WordPress. While it is a good solution for simple projects, we often recognize that our clients have very custom requirements that require another, more robust solution.

That's where Wagtail comes into play. Wagtail is a Python/Django powered open source content management system to build high-quality websites and web applications.

Approaching Internationalization

Websites often have an international audience. The process of serving translated content to the reader is often referred to as "Internationalization" (i18n) or "multi-language" support. In this blog post we want to showcase how we are approaching multi-language in our web projects using Wagtail.

This blog post is targeted at developers, and especially developers interested in Wagtail, Python and Django. You probably need some basic Wagtail knowledge to make the most out of reading this article. We will showcase how you can create a Wagtail multi-language setup using separate page trees.

Our language-specific page trees, nicely separated.

The solution

The solution outlined in this article has been heavily inspired by the official documentation and this blog post. It's used in production on multiple projects we have built, so it has been battle-tested and is a proven solution. The official blog of Austrian Airlines and codista.com (yes, our own website) are two examples using this solution.

When approaching multi-language support you mainly have two options:

Duplicating the fields on your model
Duplicating your page tree

As for option 1, the code snippet below shows an example of how you could duplicate the fields on your models:

class BlogPostPage(Page):
    title_de = models.CharField(max_length=255)
    title_en = models.CharField(max_length=255)

    body_en = StreamField(...)
    body_de = StreamField(...)

    # Language-independent fields don't need to be duplicated
    hero_image = models.ForeignKey(
        "wagtailimages.Image",
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
        related_name="+",
    )

We tried this approach and have not been very happy with it. Mainly because of three reasons:

You need some logic to access the correct field in the template based upon the requested language. More logic, means potentially more bugs.
The page will be served under the same slug, independent from the language. Mostly you want the slug to reflect the language of the content, because it will give you some extra SEO bonus points.
The page models become quite cumbersome to maintain. Having to duplicate each field for which you want to have a translation basically doubles the count of your page variables. More code, means potentially more bugs.

The first two topics are solvable. Especially the first argument is easily solvable with some custom logic as defined in the docs. But the second argument is a really tough one to solve, which is only solvable if you dig deep into Wagtails way of serving pages.

Therefore we decided to go the route of duplicating the page tree, which works really well for us. Duplicating the page tree has some very compelling advantages:

You get nicely routed internationalized urls + slugs out of the (wagtail) box
You keep your page models and your backend logic slim and tidy
No need for custom logic to access the correct field translation, since you are just doing what you are always doing: rendering a page template with exactly the page fields you want to render
Editing a page is easier for the content editors, since they have less fields in the admin view to fill and check.

The disadvantages:

You have to duplicate the page tree.

Duplicating the page tree requires a bit more work, but from our point of view, it's worth it. Especially since that can be easily automated if your use case requires you to do so, or you do not want to put that burden on the content editors.

The Root Page

So let’s get to the point. What is needed to achieve this duplicate page tree goodness? Basically not very much. In order to implement basic multi-language support, the only thing you need is a root page that detects the requested language and redirects the user to the appropriate page.

class LanguageRedirectionPage(Page):
    """Redirects the user to the language specfic home page"""

    parent_page_types = []

    def serve(self, request):
        # This will only return a language that is in the LANGUAGES Django setting
        language = translation.get_language_from_request(request)
        home_page = HomePage.objects.get(language=language)
        return HttpResponseRedirect(home_page.get_url())

Note that you have to set Django’s LANGUAGES setting so we don’t redirect non English/German users to pages that don’t exist.

Additionally your HomePage needs to know its own language. Here's an example for defining the language:

class HomePage(Page):

    language = models.CharField(
        max_length=5,
        choices=getattr(settings, "LANGUAGES"),
        help_text=_("indicates the language this page serves as the main home page"),
        unique=True,
    )

    hero_title = models.CharField(max_length=250, blank=True, null=True)
    hero_intro = models.TextField(_("Hero Intro"), blank=True, null=True)

    parent_page_types = ["cms.LanguageRedirectionPage"]

    class Meta:
        verbose_name = _("Home Page")
        verbose_name_plural = _("Home Pages")

It is important to note that only the HomePage needs to know its language. All pages below know it implicitly, because they are children of a language-specific HomePage. That is basically everything to get started for having multi-language support in your next Wagtail project.

Takeaways

Duplicated page trees are your friend because:

they solve a specific SEO question for you: providing unique slugs for unique content
you get almost everything out of the box for free if you duplicate the page tree!

Remote work: show current time tracking entry as your Slack status

Codista — Mon, 06 Apr 2020 14:43:51 +0000

Parts of our team at Codista have been working remotely since we founded our specialized agency. Having the option to work from home provides a lot of benefits - you save time commuting, it gives you the freedom to work from wherever you want, and often it is just more convenient (or even safer) to stay home. I personally like to work from home because I feel more focused and creative there.

However, working in a distributed team also comes with some challenges. One of these challenges is “missing shared context”. If you are not in the same room as your colleagues, you just cannot see what they are doing. If you see your colleague walking into the meeting room, you know they are probably having a meeting or doing a video call. If you see your teammate staring very concentrated at their screen, you know that you probably should not disturb them.

Getting an overview

If you are in a position to manage a team and steer it into the right direction, it is even more important to have a high-level overview of what everybody is doing. This “missing context” can be really challenging for remote teams, and can lead to a lot of misunderstandings or uncomfortable situations:

What the heck is Max doing the whole day?
Oh damn, I’m just in the middle of a very hard task - why does he want to chat with me just now.
I really want to know what Luis is doing just now. But I do not want to ask him five times a day, because it distracts him and will prevent him from being productive.

This “missing context” situation is especially true for remote / work from home teams. But not exclusively, missing context is also a topic for teams working in the same office. We experienced this “missing context” pain for some years, and last year we decided to do something about it, because it felt like a major PITA to us and hindered us in our productivity.

Solving the shared context problem

In order to solve this “missing shared context” problem once and forever, we invented Tack. Tack is a Slack app that takes your running Toggl time entry and puts it as your Slack status, so your teammates always know where your head is at.

Okay, that's the elevator pitch... But let me explain in detail what Tack is doing and why it could help you and your team to be more productive:

Toggl is a convenient time-tracking tool to log all your activities and assign them to specific clients/projects. Slack is a collaboration and communication tool, especially suitable for remote teams. Tack brings these two tools together by automatically setting the Slack status to the currently running time entry in Toggl.

Tack solves the “missing context” pain for us, and after just a few days of using Tack we realized that it's a complete game changer for us, making us more productive and helping us work together more efficiently.

Since we believe that a lot of remote teams out there feel the same pain, we decided to give Tack to the public, for free. So if my thoughts sound familiar to you, you might want to give it a try. By the way, over time Tack became a fully fledged Toggl client which allows you to start and stop your Toggl timer, without leaving Slack - your favorite collaboration tool.

Tack can be added to your Slack Workspace via a single click. Give it a spin and let us know what you think!