Welcome to post #3 in this series.
Today we're talking about frameworks (and libraries) that I used to create Arbington.com
Remember, we keep things incredibly simple. Sometimes that means purposely introducing technical debt to our codebase in favor of speed.
Frameworks are structures. They are typically large chunks of code, with specific rules, that layer on top of a programming language.
Like Flask for Python. Flask is a Python-based Framework for creating websites.
Libraries are similar, but smaller. They are often more flexible and can be dropped in to supplement your codebase.
Django Web Framework is a huge open source Python based framework. It has everything from logins to database management.
We use this very heavily. It's not ultra fast, but it's fast enough. And it comes with everything we need, and can be customized very heavily. Sites like Instagram started with Django before outgrowing it.
It's not easy to learn, but once you learn Django it's quite magical. You can create an entire website in a matter of hours, not days.
Every page you see on Arbington.com is served by Django. It's all standard server-side rendering.
And in the future we can convert Django into a headless website using Django Rest Framework, so we have the option to make apps and modern websites using React.js later on.
Basically, it's a future proof framework.
I would classify Tailwind CSS as a library, not a framework.
It's the future of CSS in my opinion.
It uses CSS variables very heavily for ultra customization. And because everything is simply a CSS class you can create entire websites without writing a single line of CSS. Instead, just add classes to your HTML, like so:
<a href="#" class="inline-block border bg-blue text-white font-bold">..</a>
The downside is the html class attribute gets really long, really quickly. But then you can merge all those together to create your own classes.
And just like that, you're able to create entire CSS frameworks like Bootstrap using [almost] just Tailwind CSS
I'm going to get a lot of haters for this. But we use jQuery instead of React.js or Vue.js.
Why, though, Kalob? Why do you hate yourself, Kalob?
Well, for one it's good enough for what we do, it's fast enough for what we need, powerful enough for what we want, and easy to replace in the future.
Along with Tailwind CSS, we use Alpine.js a little bit. Not much, and it could be replaced with jQuery. But because Alpine.js and Tailwind CSS play so nicely together, we use Alpine.js for some things like our mega menu.
Swiper.js is the way to go!
We use these pretty heavily to display courses. The options for customizing are simple but powerful, and it didn't take more than about 15 minutes to set up and deploy.
I played with the settings for a couple hours just to have fun, but the final result was a simple carousel.
There are a lot of carousel libraries out there, but this one is my favorite.
Need a super powerful but simple rich text editor for your users?
Quill.js is the way to go.
It does have some limitations we've run into, but nothing so serious we had to replace it. It's also lightweight, and easy to customize.
We use Quill.js for questions and answers in video lessons, in the teacher dashboard for adding descriptions and projects, and even for some image uploading (which we handle internally and then use Python to send the image to AWS S3).
We use a lot of Python packages, all of which would be considered "libraries" except for Django.
We use a lot of image manipulation in the
boto3 for interacting with Amazon Web Services,
bleach for cleaning HTML input to make user input safe to display and pull out all the stuff in standard HTML markup we don't need,
airtable-python-wrapper to make API requests to and from Airtable.com so our team can slice and manage data outside of the website, and
dropbox for importing hundreds of video files in a single HTTP request using the Dropbox API.
Lots of API work. I'll make another post about API's in the future because that deserves it's own post.
I have several courses on Arbington.com about lots of these topics:
- RESTful APIs and how to Understand APIs
- Django 101 for Beginners
- Python 101 for Beginners
- React.js 101 for Beginners
And plenty more including the more advanced versions of most courses. You can subscribe for $15/month to get access to all my courses - and it comes with a 14 day free trial.
No harm in trying it out!