The interactive widgets embedded in this article are excellent teaching tools!
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
This is a genuinely lovely use of machine learning models: provide a prompt for an illustration to print out and colour in.
Mike explains his motivation for building this:
My son’s super into colouring at the moment and I’ve been struggling to find new stuff for him.
New from Mr. Vanilla JS himself, Chris Ferdinandi:
A learning space for people who hate the complexity of modern web development.
It’ll be $29 a month or $299 a year (giving you two months worth for free).
A fascinating interactive journey through biometrics using your face.
I can’t remember the last time that a website made me smile like this.
Whatever the merit of the scientific aspirations originally encompassed by the term “artificial intelligence,” it’s a phrase that now functions in the vernacular primarily to obfuscate, alienate, and glamorize.
Do “cloud” next!
There’s a sort of joy in getting to manually create the site of your own where you have the freedom to add anything you want onto it, much like a homemade meal has that special touch to it.
I’d recommend going in the order HTML, CSS, JS. That way, you can build something in HTML, add CSS to it as you learn it, and finally soup it up with your new-found JS knowledge.
Excellent advice for anyone new to web develoment.
We are so excited by the idea of machines that can write, and create art, and compose music, with seemingly little regard for how many wells of creativity sit untapped because many of us spend the best hours of our days toiling away, and even more can barely fulfill basic needs for food, shelter, and water. I can’t help but wonder how rich our lives could be if we focused a little more on creating conditions that enable all humans to exercise their creativity as much as we would like robots to be able to.
I like this high-level view of the state of CSS today. There are two main takeaways:
- Custom properties, flexbox, and grid are game-changers.
- Pre- and post-processers are becoming less and less necessary.
This is exactly the direction we should be going in! More and more power from the native web technologies (while still remaining learnable), with less and less reliance on tooling. For CSS, the tools have been like polyfills that we can now start to remove.
They could learn a thing or two from the trajectory of CSS: treat your frameworks as cattle, not pets.
I like the split-screen animated format for explaining this topic.
I love reading about how—and why—people tinker with their personal sites. This resonates a lot.
This website is essentially a repository of my memories, lessons I’ve learnt, insights I’ve discovered, a changelog of my previous selves. Most people build a map of things they have learnt, I am building a map of how I have come to be, in case I may get lost again. Maybe someone else interested in a similar lonely path will feel less alone with my documented footprints. Maybe that someone else would be me in the future.
Oh, and Winnie, I can testify that having an “on this day” page is well worth it!
This is a great tutorial—I just love the interactive parts that really help make things click.
Until there is movement on developers taking CSS more seriously and understanding its full capabilities, we are caught in an awkward loop where introducing too much complexity in your project’s CSS will do more harm than good.
This is a great (free!) course on learning CSS from the basics up. Nicely-pitched explanations with plenty of examples.
A genuinely interesting (and droll) deep dive into derp learning …for typography!