Hello Reader,
Stores around where I live are in full Christmas/Holiday Season mode—some had Christmas stuff going up before Halloween, but it’s in full force now—which is always a bit of a wake up call that the end of the year is fast approaching.
It’s kind of crazy that 2024 is already starting to hit the “winding down” phase, with just a couple of months left to go!
It’s got me thinking about my plans for 2025 a little, and I’ve got some big ones!
I hinted at this a little on social media recently, but I’ve decided to build my own course platform instead of using a 3rd party one, which I’ve been doing until now.
When I first started making courses, I was only making video courses, so using something that would process payments and host videos in an organized way was all I needed.
As time has gone on though, I’ve wanted to do more and nothing has fit what I want.
This makes sense, 3rd party platforms need to work good enough for most people. They’ll rarely be perfect.
The issues I have:
- I do all my work in Notion and then have to move everything into a platform
- Most of them have limited styling, and the ones that allow for styling are a pain, because you need to overwrite so much stuff
- The general “flow” for users often has issues in one way or another, at least with how I like to organize things
- I’d like some more custom bits and pieces, and relying on 3rd party embeds has a lot of limitations (and with some platforms, isn’t allowed outside of a small list of sites they allow embeds from)
The Notion thing is a bit of a big one for me because creating lessons in one place, just to copy, paste, and then often do some reformatting, sucks.
So I made a proof of concept to generate all the course content directly from Notion, and a bit to my surprised, it worked!
Of course, I knew I could do this type of thing, but I have a bit of a strange set up with how I organize my course content in Notion, so I thought it would be harder to do than it was.
In fact, it worked well enough that I’ve kept hacking away at it.
It’s a long way off from being finished, but I’m learning a ton by working on this… as you might know, I’m very much a front-of-the-front-end person, and having to work with databases is, well, it’s something! 😆
I’ll share semi-regular updates on it here as I make progress in creating it (including a bit more information on how it’s all working), as time goes on… but for those curious, I’m using:
- Astro with server-side rendering
- Supabase for databases (Notion just has the content, I need databases for user management and a few other things)
I have a mix of Svelte components in there too, but I’ve been surprised at how little I’ve needed them.
Another quick thing I’ll say is this probably isn’t something most people would want to recreate.
Notion is great, but a headless CMS would probably be a much better option for most people.
There are some limitations with Notion content, but because I’m making this unique for myself, I can use some workarounds (like using callout blocks to render the nested blocks *inside* the callout in different ways depending on the emoji I used for the callout).
If I were to make this public for anyone to use, few people would probably like how you’d have to set things up for it to work 😆.
But just like public-facing solutions are usually good enough for most things, in this case, this is great for me while probably terrible for most other people!
🙋♂️ What I’ve been up to this week
Center the bottom row when using grid auto-fit
During a live stream I did a little while ago, someone asked about centering the bottom row when using Grid, and I mentioned that the best choice in those situations is probably to use Flexbox instead.
The problem with Flexbox is there are a few limitations that can be annoying… and after seeing a post by Ryan Mulligan awhile back on making pyramids with Grid, it got me wondering if I could get it working with grid while using auto-fit, when the browser is dynamically updating the number of columns… and it turns out that you can!
If you want to skip the video and just poke around in the code, here is the finished CodePen.
Of note, I used :has() for when the bottom row has more than one child, but I could have used :nth-last-child() instead.
Browser support isn’t an issue either way, since we’re using container queries for this, but the nth-last-child is probably a bit more readable… and either way, if ever you use this, you’ll probably want a comment explaining what’s going on 😊.
Stop writing extra code!
This week's Short looks at some native HTML features people either ignore or don't know about!
People often reinvent the wheel instead of using native HTML inputs. I understand that styling some of them can be a nightmare, but they can do more than a lot of people realize.
sidenote: YouTube's longer-than-1-minute-Shorts rollout is one of the most disastrous rollouts of a new feature I've seen in a long time... it probably makes little to no difference for viewers, but from the creator side everything has been a disaster, from poor communication to a month after the rollout started, the creator-side UI's still not recognizing them as Shorts, even though the algorithm does.
CSS Unleashed: Tips, Tricks, and Real Talk
Had a fun chat with Arman on his People Behind Industry podcast. Talked about a ton, from my start into development, fun CSS going on now, projects I'm working on, and a ton more.
🔗 Other awesome stuff around from the web
Everything (and more) that you’ve ever wanted to know about Container Queries
Container queries are awesome, and Roma Komarov recently put out a list of Container Query Bookmarks, which contains posts that cover getting started with them and great use cases for them, to what we might be able to do in the future with them and fun experiments using them.
Whether you’re just getting started with them, or you want to start doing really awesome stuff with them, there’s at least a few articles in here that you’ll find useful!
🏁 </newsletter>
I’m on Bluesky now, if you'd like to follow me over there.
They have a great feature called Starter Packs, where you can create a curated list of suggested follows. I’ve created a Front-end Friends pack here, and a CSS-specific pack here, if you’re interested!
Have a great week,
Kevin
P.S. Speaking of courses, my workshop with Frontend Masters is this week! If you have a membership with them, you watch it live on their site, and it'll eventually be a full course there as well.
It's a 2-day workshop in building a website from scratch using vanilla HTML, CSS, and JS, all based on a Figma design. It's taking a "big-picture" approach, with a big emphasis on writing maintainable CSS.
We'll also be having some fun with some modern features near the end as well!