Friday Frontend: Post Valentines Day Edition
KBall from ZenDev
CSS & SCSS
Great article on the Mozilla hacks blog showing some of the exact UI layout problems that CSS Grid solves, and how you can use it to do so.
The evolution of CSS and CSS best practices. A great way to start to understand how we got to where we are today, along with brief points on what some of the best practices of today are. If you’re relatively new to the web and have always been able to use modern CSS, this will be eye opening!
An in-depth guide to the newest non-grid CSS superpower: CSS custom properties, AKA CSS Variables. Now supported in essentially every browser but IE and Opera Mini, these are completely changing what we can do with CSS. Time to learn them.
Another one that’s pretty much pure fun - using all sorts of fancy not-yet-fully-supported CSS properties to create a doughnut chart tied into a range input using almost purely CSS. Sure, we could probably do the same thing with D3 and SVGs, but this is so much cooler!
Vue.js has all of the power and ability to create complex single page applications that similar frameworks like Angular and React do, but one of the beautiful things about it is that it is so simple and lightweight that we can also use it as a more elegant replacement to tools like jQuery for small, contained pieces of interactivity in our page.
We featured Part 1 of this awesome series last week, with part 2 and part 3 being published this week. Learn how to create interactive vector games by using React to create and manipulate SVGs. Doesn’t get any more cool than this!
Learn a little bit of the story behind how Vue came to be, as well as the creator’s insights on the sources of the framework’s success and where it is going in the future.
Understanding source control (and these days that almost always means git) is one of the most important things for a developer in today’s world, and it it is rarely covered in courses. I often recommend the git book to folks, but if you’re looking for a more bite-sized introduction this article and its sequel are a good place to start.
Okay, so it’s a bit away from the front-end, but performance is key for user experience, and there’s some pretty cool quick wins in here. If you’re doing any sort of management of your own hosting, definitely check this out.
Took me a while to understand what exactly he was doing, but this article by Dan Wilson is super cool - it’s a retro approach to animation inspired by flip-book and related physical animations. Probably more fun than useful, but you never know when you’ll want to recreate an effect like this.