Day 100: it's over, or is it!?
posted on
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
OMG, I did it, day 100! 4 months and 16 days ago I published the first post and then I wrote another post every workday for 138 days straight without missing a single day. In this final post, I want to do a quick recap and give an outlook for what's coming next.
Recap
Starting this project was one of the best and worst ideas I ever had.
It was a great idea because I’m finally up to date with modern CSS. I’ve learned so so much, not just about the fancy new stuff, but also about CSS in general. Based on the feedback I’ve received, I wasn’t the only one who benefited from this project. This format, short, focused posts about a single topic, worked well for many people. That makes me happy. Thank you for reading and participating!
It was a bad idea because it was so much work and it put quite a lot of pressure on me at times. Each post took me at least 1 hour to write, sometimes up to 4 hours. In some weeks, that meant spending an entire working day or more writing these posts on top of my other work. Consequently, the quality of some posts is not as good as I’d like it to be.
Anyway, I’m glad that I finished it. Especially because I’m someone who tends to abandon their side projects quickly since the next more exciting project is already around the corner.
My favorite posts
I’m happy with how most posts I’ve written have turned out, but, of course, I have some favorites.
Top 3 favorite new features
I’ve covered a lot of new features in CSS, but I’m most excited about these.
Top 3 favorite posts
Like I said, this experiment turned out to not just focus on modern CSS, but core CSS concepts, too. These are 3 of my favorite posts.
Top 3 most useful properties/values
There are certain new features that (will) make my life as a frontend dev much easier.
Top 3 most surprising features
I honestly knew nothing about, I don’t know, 80%? of the stuff I wrote about before I did my research. Some things surprised me.
Soooo, now that I’m done, what’s next? Well, I’ll probably not write about CSS too soon again, haha. My personal next step is to implement many of these features and techniques in the websites I’m building to get some actual hands-on experience. Once I have that, I can write blog posts with a bit more substance. I will also talk about my insights as CSS Day in June.
Interop 2023
I’m looking forward to learning what’s coming next to the web platform. We can track the progress in the Interop 2023 Dashboard. This year’s focus areas are:
- Border Image in CSS
- Color Spaces and Functions in CSS
- Container Queries in CSS
- Containment in CSS
- CSS Pseudo-classes
- Custom Properties in CSS
- Flexbox
- Font feature detection and palettes
- Forms
- Grid
- :has()
- Inert
- Masking in CSS
- Math Functions in CSS
- Media Queries
- Modules in Web Workers
- Motion Path in CSS Animations
- Offscreen Canvas
- Pointer and mouse Events
- URL
- Web Compat 2023: A catchall focus area for small bugs that cause known site compatibility issues
- Web Codecs (video)
- Web Components
Alright, that's it. Thank you so much for following along and being a part of this. You can find a collection of all demos on CodePen.
Further reading
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.
Learn more about the workshop!
Overview: 100 Days Of More Or Less Modern CSS