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….
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
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.
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.
June 9, 2020, 9:42 p.m.