The Daily Adventures of a SteemPeak Developer #9

Today I've seen some error reports (I got them as emails thanks to https://sentry.io, but this is probably a good topic for another post) mostly related to network timeouts in API calls to the Steem nodes. Due to these errors some users have probably seen the Error page and this reminded me of how old that page is.

So I decided to do a small research and a bit of work to create a better page, with a better look and some more features.

A new error page for SteemPeak

^{Read other posts in the series HERE}

I'm not so good at designing pages from scratch so I spent a bit of time checking for error page templates until I found something very close to what I was looking for: https://codepen.io/hellochad/pen/weMpgE. I don't know who created this and I've found no credits but I got the link from this page.

It was the perfect starting point. But before going into details let me share a gif of the final result ;)

To integrate the new page I did just some minor changes and small updates:

Obviously I moved the HTML template into a Vue component (replacing the previous one)
I updated the colors used for the images and the buttons with colors we already use on other pages
I added one more optional button and integrate them with the website logic
I modified the router configuration so the error page can show a different message according to the error type and updated the error messages in some place to be correctly displayed in the new page
And finally I dropped the dependency on particle.js as I don't want to add a new javascript library only for the Error page. Instead I just used a bit of HTML and CSS to draw the stars and randomize their position:

<template>
  ...
  <div v-for="n in 50" :key="n" class="particle"></div>
  ...
</template>

<style lang="scss" scoped>
.particle {
  position: absolute;
  border-radius: 50%;
}

@for $i from 1 through 50 {
  .particle:nth-child(#{$i}){
    $size: random(5) + 1 + px;
    opacity: random(100)/100;
    height: $size;
    width: $size;
    transform: translate3d((random(95) * 1vw), (random(90) * 1vh), (random(100) * 1px));
    background: #fff;
  }
}
</style>

That's all. Took me a bit to tune the design but I really like the final result and I hope you will like it too when it will be available in the next release :D

As always feedback and suggestion are much appreciated, both in the comments or on our Discord ;)

Sergio

The Daily Adventures of a SteemPeak Developer #9 - A New Error Page

A new error page for SteemPeak