An animated ad with emojis in the browser’s URL bar 💙💜💚

Sometimes you code a funny thing just because you can. And because it’s funny. There is probably no practical use of a web page animating URL bar in the browser (or is it?), but I made one inspired by this post. If the UX/Design people find out, they will probably forbid me to implement frontends anymore.

Wait no longer, click here and see the demo of an animated SoftwareMill ad in your browser URL bar. (I recommend Google Chrome or Firefox.)

A pimped-ASCI artwork representing SoftwareMill logo (own work, 2019)

I have recently read a great post, Why isn’t the internet more fun and weird? It starts with some reflections about MySpace. Do you remember MySpace in 90s/00s? Did you have an account there? You had this large “About Me” text area field. It was possible to put your custom HTML and CSS in it. The result? A lot of creativity.

The author of the post mentioned above works on a tool named Codeblog. It is supposed to be an open source platform for blogging with special Markdown flavor that renders React components. Some of the sample components you can embed in your post are: confetti button, glitter text, animated purple ghost.

Have a look at the post again and check it in action. Would you like to have it in your blog, personal page or LinkedIn profile?

You, as a developer, can create the new, better web. With confetti, unicorns, ghosts and emojis. You can revive the old web charm with modern tools. The 90s/00s web on steroids.

A post written in Codeblog. When you click the “Confetti me” button, the confetti pops out and spreads over the page. (Part of the text was removed to include the ghost in the same picture, source: https://jarredsumner.com/codeblog/.)

Fun fact, the ability to put HTML and CSS in the “About Me” text area was implemented by accident while rewriting MySpace from Perl to Adobe’s ColdFusion. As you can read in another interesting post about MySpace:

However, while rewriting MySpace, Harriman and Nguyen made a major mistake — they failed to block users from adding their own HTML and CSS to their profile pages. In Angwin’s telling [i.e. in the book: Stealing MySpace], the team’s mistake was what “allowed users to build colorful backgrounds and wallpaper and load them onto their MySpace pages. Suddenly teenage girls could decorate their MySpace page with hearts and glitter and smiley faces the same way that they were decorating their lockers and book bags.”

But there is another consequence (the quote is from the first post):

By mistake, MySpace inspired a generation of teenagers to learn how to code.

That might be an interesting point of view. But hey, think about it. Have you ever implemented falling snow on a webpage? Or an object moving after a cursor? Or a clock? (Just basic HTML and JS, no canvas involved.) That was my beginnings with frontend development. I learned a lot those days.

Right now the Internet is far more professional and in real business there is no (my)space for these kinds of experiments.

Many people long for the good old times when the design of the web was created by regular users, rather than professional designers. This year on April Fool’s day StackOverflow had a quite interesting look with the Comic Sans font, a unicorn image, falling snow and other weird design choices that are unfamiliar to modern internet user.

StackOverflow on April Fool’s Day in 2019

A few days ago I read this blogpost about Animating URLs with Javascript and Emojis. I decided to make my own animation. I had already known that there are many emojis in the UTF standard, and even tried to use them as icons in my recent side project. However, there are some things that I had recently learned or realized:

• There is a lot of UTF emojis. A lot.
• You can combine them, even in the URL bar of the browser. For example 👩🏻‍🎓 (woman student: light skin tone) consists of three emojis: 👩 (woman), 🏻 (skin tone emoji modifier) and 🎓 (graduation cap).
• An emoji often consists of multiple UTF-8 characters. I had to animate an array of strings rather than an array of chars.
• If you want to make an image or animation in the web browser’s URL bar, you need to bear in mind escaping. For example, you cannot just make a space, it is escaped to %20.
• Unicode box-drawing characters are very useful.
• Many fonts does not support special characters very well. Finally, I used DejaVuSansMono font.
• location.hash = ??? fills your browser history with dummy entries. location.replace() doesn’t, but it uses a lot of CPU, because it appends location change to the history and then removes it (at least in Google Chrome). history.replaceState() doesn’t create new local history entry, but it creates history entry in the global browser history as well. I have chosen the first solution. Sorry.

If you want to browse the code, just see the demo page HTML source. Like we all used to do 15 years ago.