DEV Community

Raphael Habereder
Raphael Habereder

Posted on • Updated on

My first real frontend app in 13 years, and it's actually just a joke

The problem of having a too big ego

So today I had a discussion with a girl friend of mine.
She watched a Netflix show wherein there was a little "mood webapp".

The boyfriend would go on this website and would instantly see the mood of his girlfriend.

This is the reference-material I had:
Reference Page

My friend told me about it and asked with huge adorable puppy eyes "can you make something like that too?". Looking at the screenshot and miserably failing to keep my big ego in check, I, obviously, said "Of course I can!".

The Problem

As you can see in the screenshot, in the show the girlfriend programmed this app in Rust and Webassembly, but screw that!

My secret

Now, here's the deal. Just between you and me, I might be confident enough to proudly call myself a DevOps, but the Dev part of that never had anything to do with Frontends. I'm more the service-guy/automation dude.
Looking at my portfolio of languages I mastered, there is nothing really web-centric, so I would be starting at 0, regardless of what I could have chosen.

This is what I am comfortable programming in:

  • Java
  • Go
  • C#
  • A tad of Python (ansible)
  • A little bit of Ruby (Chef/Puppet)

The realization

I suck at Javascript and CSS. Full-Stop. My knowledge is brutally outdated, I slacked off in the Frontend department.
The last time I had anything to do with JavaScript and CSS was in the beginning of JQuery about 2007 or so.
That's a very long time for anything IT and especially the ever faster evolving JS-World.

Onwards to (hacky) glory

I thought, "to hell with it, I'll try one of these fancy new frameworks" and settled on Vue.js. No idea why, maybe because the name is written funny and I remembered it because of that. I even learned that it's pronounced "view", not "wu", so grant me bonus points for that please. I will need them to balance my hacky stuff later.

The Stuff

So what is it I used?

  • Vue.js with Vuetify
  • Express
  • Tons of dependencies, cause I have no idea what I'm doing and I'm going in the deep end

What is missing:

  • Some persistent storage (maybe a cassandra or ignite for some real nice overkill)
  • Docker
  • Kubernetes
  • Some kind of easy to use admin-interface for my friend Laura

And yes, I absolutely will shoehorn Docker and Kubernetes in somehow, I actually need to use something I feel comfortable with.
Including this post, this project took me 6 hours, which feels horribly slow to be honest.

Demo Time!

So how does my version look?
Mood Meter Demo without Banner

If they feel like it, they can also add a Banner-Message that jumps into your face, which is only rendered when set
Mood Meter Demo with Banner

If this doesn't get your immediate attention, I don't know what will.

What is that abomination??

To get this done as close to the reference material as possible, I needed some kind of ready to use component that included a bar and something to move along that bar. Since I had no idea how to do it myself, I thought "Hey! I could wrestle a slider into submission for this!"
So I used a vuetify v-slider and just styled the hell out of it so it looks how I wanted it.
What you can't really see, is that the picture is actually animated to move indefinitely up and down along the bar. I was told it did that in the show too, so I had to copy it.

Behold the abomination I made of the slider:

>>>.v-slider {
    height: 200px;
    background-image: linear-gradient(to right, rgb(255, 100, 100), rgb(255, 255, 89), lightgreen);
    border-style: solid;
    -webkit-box-shadow: 0 0 40px white;
    box-shadow: 0 0 40px white;
}
>>>.v-slider__thumb {
  height: 300px;
  width: 350px;
  -webkit-animation: mover 2.5s infinite  alternate;
  animation: mover 2.5s infinite  alternate;
  content: url('../assets/laui.png');
  color: transparent;

  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1px;
}

>>>.v-slider--horizontal .v-slider__track-container {
  display: none;
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-190px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-190px); }
}
Enter fullscreen mode Exit fullscreen mode

Since I don't really know what I am doing, this might be very very bad. But it works, so I am fine with it for the moment.
Another side-effect is, that the actual slider bubble thing is enormous with 300x350px. This somehow results in the picture going way off the bar at the min-value 0 and max-value of 100. I need to tweak that a little more. So 10-90 as values have to suffice until I find out why the bloody thing does that.

As of now, the whole "page" consists of one Vue-Component, a Lauimeter, which was named so by my friend.

The component gets all it's data, including labels and texts, from an express-service with the following endpoints:

  • get("/") to just get everything stored
  • post("/moodUpdate") to just update the mood value
  • post("/bannerUpdate") to update the bannermessage
  • post('/config') to configure the service for testing

To configure the app, a simple curl is enough:

curl localhost:3000/config \
  -H 'Content-Type: application/json' \
  -X POST \
  -d '{ "mood": 90, "minMessage": "Not today", "maxMessage":"Fantastic!", "updateText":"Update", "meterName":"Moodmeter", "bannerMessage": "" }'
Enter fullscreen mode Exit fullscreen mode

Now I have to figure out how to get a "easy to use config-page" in there, so my friend can actually use the bloody thing without having to learn cURL. And a persistent storage would be nice.

Maybe this stupid little fun project will find it's way to github too one day. But that is something for another day. As the first javascript experiment in 13 years, I am absolutely okay with how hacky this turned out.

It was actually a lot of fun, I can see myself doing more of this. But hopefully better in the future.

Feel free to leave feedback. All this is very new to me, so any criticism and/or guidance is most welcome. Maybe old dogs can learn new tricks.

Discussion (4)

Collapse
marcoschlieben profile image
Marco Schlieben

So, there is no logging?
There will be no way you know, what mood she was in on June, 22nd, 2019?

Buddy this information could be essential! ;-)

  • Marco
Collapse
habereder profile image
Raphael Habereder Author

I wanted to say "no, because I don't know how", but as it turns out, I already log all requests in the express-service.

Call it beginners luck:

router.post("/bannerUpdate",(req, res) => {
    console.log(req)
    this.bannerMessage=req.body.bannerMessage;
    res.end("Banner was updated to " + req.body.bannerMessage);
});

All I need is to attach a date :D

Collapse
marcoschlieben profile image
Marco Schlieben

I bow to you, friend \o/ ;-)

Collapse
cakircan_cakir profile image
cakircan-cakir

What is the latest situation? I want to make the same site and I have no idea.