Turning Errors Into Something Entertaining

So now you have seen codebydom.com working (hopefully), so lets see it not work.

 

Going to a page that isnt on the site will do the trick and….

Boom.

 

We found our boring error message, sick, mad basic. Can’t have that, lets spice things up.

 

With whatever web framework you are working with (I'm using django), figure out the way to display your html file when a url is entered incorrectly, making the server try to retrieve a resource that ain't there.

 

In django one can do this by creating a new view in your project, and adding

#in your projects main urls.py file
handler404 = 'yourapp.views.handler404'
handler500 = 'yourapp.views.handler404'

Basically setting the same error view to errors 404 and 500.

 

In the view I create, I have to edit the argument to take in an exception when it gets thrown.

#in your views.py file in app directory
def handler404(request, *args, **kwargs):
    return render(request, "<path-to-your-404.html>/404.html")

Now that you figured that out, create the 404.html file that will be served up.

When you are injecting this html correctly into your framework, whether its Angular, React ect, you want to include the menu bar html so the user can return to the existing part of your website.

 

Set up the html file and try and get a simple message served

<p>404 Error Grr</p>

With django you must sure to stop and start your server with crtl-c and python3 manage.py runserver to see your updated changes, changes to 404.html wont be seen unless you restart the python dev server. But when we do we see this.

Alright we got our test out, now lets have some fun. 

So we need to have some sort of page not found animation or cool image or something.

 

To generate ideas/inspiration

https://www.searchenginejournal.com/404-page-examples/211154/ 

https://blog.fluidui.com/top-404-error-page-examples/

https://uxplanet.org/10-great-examples-of-404-error-pages-6dff84eea87

Which show some cool, innovative and funny designs that you can try and draw inspiration from.

This is the coolest one i found, like one of those muscle tear tattoos but not as stupid. From css-tricks.com. Very cool css site.

After scrolling for too long, decide on a half knock off half original idea.

 

Checking out some options I have.. and so weighing the funny and the humor and innovative.. we are going to just stick with mostly humor, use a simple image, and a modified iconic catch phrase should do the trick.

 

So we are going to be using the Star Wars phrase “these are not the droids you are looking for” and change it to, “this is not the page you are looking for” when a user comes across the error.

(Reminder: this is nerd hating free zone cause your reading a coding tutorial chill)

 

Here is the html code for the incorporating the phrase, along with some comments about what each html line does to explain things.

<!-- 404.html file   -->
<!-- responsive container for content   -->
<div class="container-xl pt-5 text-center" min-height=1000px>
<!-- warning symbol with background circle   -->
  <h1><i class="fas fa-exclamation-triangle p-3 rounded-circle black shadow"></i></h1>
<!-- the actual writing, "animated fadeIn delay-1s" in class is what 
creates the fade in effect after 1 second -->
  <h2 class="p-2 mx-auto animated fadeIn delay-1s">This is not the 
page you are looking for</h2>
<!-- Obi wan kanobi's image wheen he says the iconic quote, this animation fades in after 2 seconds and reveals the image slower   -->
  <img class="img-fluid mb-3 animated delay-2s fadeIn slower rounded shadow-lg border" src="https://wompampsupport.azureedge.net/fetchimage?siteId=7575&v=2&jpgQuality=100&width=700&url=https%3A%2F%2Fi.kym-cdn.com%2Fentries%2Ficons%2Ffacebook%2F000%2F018%2F682%2Fobi-wan.jpg" alt="Obi">
<!-- spacer div   -->
  <div height="150px" class="mb-1"></div>
<!-- hidden div to come in after a 3.5 seconds, as defined in script tag below   -->
  <div id="hide">
<!-- Home button to return to homescreen, this and GIF below have "animated fadeInUpBig slower" classes that create the animation -->
  <a href="/"><button class="btn btn-lg btn-success rounded-pill animated fadeInUpBig slower mb-4" style="text-shadow:1px 1px 1px black"><i class="fas fa-home" aria-hidden="true" style="font-size:200%"></i></button></a>
  <br>
<!-- an annoying gif that idk if i should keep but I will to get user back 
to homescreen, reason why it appears after 3.5 seconds, dont want it to be
 overly annoying   -->
  <img class="img-fluid rounded animated fadeInUpBig slower shadow-lg border mb-5" src="https://media.giphy.com/media/10RgsuetO4uDkY/giphy.gif" >
  
  </div>
</div>
<!-- super complex javascript to display the button and gif, editing the css
 style display to inline reveals the hidden div when the second argument of the setTimeout
 function hits, here that is 3500 milliseconds -->
<script>
setTimeout(function(){ 
  document.getElementById('hide').style.display="inline"; 
}, 3500);
</script>

 

Adding animation effects is easy when using MDBootstrap, a personal favorite of mine. Just need to make sure to inculde CDN in your head tag. Check it out ->

https://mdbootstrap.com/ And that is also where the you can get sick icons from. The warning icon and one for home are from https://mdbootstrap.com/docs/jquery/content/icons-list/

 

So after adding in those animations in html, we should see the html displayed correctly instead of our original '404 error grr'.

 

And now we have our final product which you can check out/demo on this site/ here -> https://codebydom.com/trash

 

So now when a user messes up a url (or i give them the wrong one to click on), they can at least find something to smile about :)

 

oh and I checked out css tricks and went to their new 404, I like it, way more modern and up to date

guess they are vs code guys

i'm more of a sublime guy, whatever its all love. 

 

Peace,

- Dom

June 9, 2020, 9:42 p.m.

1 LIKES