DEV Community: Mitya Kuznetsov

Fun front end

Mitya Kuznetsov — Fri, 19 Mar 2021 17:16:02 +0000

The front of the front end is powerful and these days developers can do things that couldn’t be imagined a couple of years ago. Or could be? I remember times when CSS was very limited but one way or another a lot could be achieved. And I have a feeling that in reality imagination is the limitation part, not the technology. And having fun is an integral part of the process.

While browsing through different articles sometimes I meet those that I would call ‘crazy’. Those where developers try something just because it’s fun. Technologies behind a development preview flag, something specific to a browser, something that can be achieved easily with a different approach, something that people do just because they can.

And here I gathered some of these tricks for you. Some of the approaches are actually quite useful for specific requests, some are just fooling around. But all of them are really simple, cool and fun (and thus somehow impressive for me). I hope you’ll like them.

Animation URLs with javascript and emojis

https://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/

With javascript, we can change a page URL, and the part after # can be changed actually without redirecting anywhere. So placing ASCII symbols there or emojis we can draw funny animations. Pretty cool for a home project but I also can imagine it on a more serious project

Split emoji text effect with CSS

This one is fun. Overflow: hidden, some clip-path and we can cut emojis, combine particles, create crazy combinations. Pure joy.

Unfortunately emoji change from platform to platform, but compared to Windows, the results aren't terrible.

The talking favicon in 256 bytes

So, as you already might hear, almost all the browsers now support SVG favicons. A brilliant developer Lea Verou showed a really easy way to create a favicon from an emoji (if you're too lazy to create a special one).

https://twitter.com/LeaVerou/status/1241619866475474946

The second fun fact about the technique is that we don't need a separate file - we can just write

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💩</text></svg>">

And with a short piece of javascript, the favicon gets an animated emoji 😎

<body onload="setInterval(_=>i.href=`data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14'>${[...'😮😀😁😐😑😬'][++x%6]}</text></svg>`,x=9)">

https://twitter.com/aemkei/status/1242211870448259072

Bonus

These cute animations reminded me of something very old. Very old, very useless but so cool. This library (http://lab.ejci.net/favico.js/) allows you to play video within a favicon (yay, one step to Doom) o_O. How crazy is that?

JS in CSS

We already had JS in CSS once (remember filters functions in IE?) but here we’re talking about something else. The idea is simple — storing JS string in CSS native variables, we can execute them and thus understand in which file we’re currently. This, for example, gives us the possibility to save something in local storage to be able to interact with CSS again using the saved information. Or something else crazy :)

https://juwain.dev/posts/js-in-css-2/

Credits: juwain.dev

Using CSS without HTML

The craziest techniques. I guess it’s more about knowing the principles of browsers work, which is definitely an important skill in our profession. But also having pure, not ready for production fun🙂

https://css-tricks.com/using-css-without-html/

Apparently, some browsers understand a special HTTP Header Link, in which we can pass CSS code without an actual CSS file. And CSS already can contain everything, including meaningful text content in pseudo-elements.

Credits: csstricks.com

And here there is a nice example of what can be done in CSS without a line of HTML. Everything is easy, I just keep forgetting that a lot of stuff can be put directly into CSS notation.

If you know some similar examples of fun, please share. After all what else for we need Fridays ;)

Blocks' random alignment with CSS

Mitya Kuznetsov — Fri, 21 Aug 2020 14:41:50 +0000

Recently I had a nice CSS challenge - easy at first sight, but as usual, it happens, a bit tricky.

I needed to create a simple component in which several text blocks (let's call them tags) are displayed at random order. Something like that.

The initial markup was simple, and the result was quite boring. Considering that actually all the blocks weren't related to each other, there was a feeling, that they needed some dynamic, and I wanted to move them randomly in different directions. And here lied the challenge. I didn't know widths of blocks (cause inner text was random), I didn't know the width of the parent (cause markup was responsive), plus some blocks took 100% of the parent's width, so I couldn't move them at all.

Ideally, I wanted to calculate somehow the random length of a shift for every text block.

.item {
    left: random(0, [parentWidth] - [itemWidth])
}

SCSS has a built-in function for randomizing, but we can't mix there absolute and relative dimensions, and anyway, the result would be static. So it seemed that nothing could be solved in that direction.

I could try to generate just a random number within some reasonable range and try to shift the text blocks with its help. But in this case, I would have to adjust the maximum width for the blocks, otherwise, they will go beyond the boundaries of the parent.

@for $i from 1 through 4 {
  .item:nth-child(#{$i}) {
    $random: random(30) - 15; // getting a shift between -15px and 15px
    margin-left: $random + px;
    max-width: calc(100% - #{2 * abs($random)}px);
  }
}

Anyway, I tried and it seemed to work. But for long text blocks, some of the inner data were trimmed, because I had to compensate their shift with decreasing their width. In such cases, I'd like to just leave blocks without shifting. Luckily some flexbox magic came to help.

If we add blocks of random width before and after each tag, they will push and pull, and therefore balance the tag randomly. Also, they will shrink to zero width if the text block is too wide.

.item {
  display: flex;

  &::before,
  &::after {
    content: '';
    flex: 1 1 auto;
    background: red;
    max-width: 40%;
  }

  &::after {
    background: green;
  }
}

@for $i from 1 through 4 {
  .item:nth-child(#{$i}) {
    &::before {
      flex-grow: random(5);
    }

    &::after {
      flex-grow: random(5);
    }
  }
}

It works! Long tags displace balancers, and short tags are randomly aligned.

I could stop here, but still I would like to make the text blocks appear with a random shift every time the block is redrawn, and not just when the CSS is recompiled. So a little bit of javascript would be fine:

[...document.getElementsByClassName('item')].forEach((item) => {
  item.style.setProperty('--puller-grow', Math.random() * 5);
  item.style.setProperty('--pusher-grow', Math.random() * 5);
});

Now everything is fine. Blocks are randomly arranged, stay within the parent's bounds, and make the most of the available space to display their content.

I stopped here, cause the font that I used, didn't give me the possibility to add some real dynamic to the blocks and let them slowly slide back and forth. But I was surprised, that it actually can be done with changing flex-basis property. The result isn't spectacular though.