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, a Python based framework
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.
Tailwind CSS
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
jQuery
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.
But mostly, it's fast to code with. React.js and Vue.js are frameworks - they are big and take time to work with. Time is not a thing startups have plenty of. Startups need to move fast, and most of the time React.js and Vue.js are slow to code with. Plus we need that awesome SEO juice - so we render things to the DOM first and let JavaScript be an "addon" to our UI/UX.
We mix jQuery with vanilla JavaScript quite a bit though. Honestly, we probably bastardize jQuery but hey, we'll end up replacing it down the road anyway once we have a more concrete application written and deployed.
Alpine.js
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.
And the nice thing: we have written almost no actual JavaScript to make Alpine.js work - you just add variables to your HTML elements in the DOM, tell another element when the trigger, and away you go. It does all the heavy lifting for us.
We might replace it with React or Vue one day, or go entirely Vanilla JavaScript with a little Alpine here and there.
Swiper.js
Need an amazing carousel solution written in vanilla JavaScript and is lightweight?
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.
Quill.js
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).
Python Packages
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 PIL library, 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.
Where to learn all the things?
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!
Latest comments (0)