Don’t Tell Comedy – Django website

June 2021 - July 2021
Goals
  • Learn Django's template language to loop through and implement front-end features
  • Implement styles from the old website accurately

Project Overview

Coming in, the website was mostly built and functional, it just lacked the front end features and styles. Using their old SquareSpace site as a reference, I implemented custom front-end styles using Bootstrap and good old CSS. My goal was to make a look-alike website, but I did end up making various small improvements and additional features such as a JavaScript image slider.

Process

The process wasn’t like many other projects I’ve done. Normally I build pages from scratch, but the pages here were already there. I had a checklist of items for each page on the site, similar to something I’d see in a card-based system like Trello. I knocked these out one by one and revisited them if there were further changes to make.

Small updates were added to the checklist, so I simply knocked them out as they came up. The project ended up being short since there weren’t many complex features and I can write HTML and CSS quickly.

The website was built with Python/Django, so there was a small learning curve for Django’s templating language. I have experience with several templating languages, so picking up Django’s wasn’t a problem. As far as Django goes, the front end templates were the only things I had to mess with.

Technologies Used

Besides Django, the website was very straightforward. Simple CSS/HTML and vanilla JavaScript was all I needed.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

Demo 2
Discord Bot: Reddit API Ask Feature

The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]

Demo 3
React.js Modal Using The Hooks API

Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]

Need something? Let's get in touch