Friday Frontend: Welcome to November!
Happy November! I have a soft spot for November, maybe because because my birthday this month! But it’s also when we start to get cold enough to really enjoy all of our winter activities and foods, but we’re not yet into holiday madness. Definitely a great month.
KBall from ZenDev
CSS & SCSS
A walk through the evolution of css component organization from Bootstrap to BEM and now to CSS Modules. Depending on your project, your ideal solution may vary but this approach to organizing CSS as components is here to stay.
Very nice and thorough introduction to Sass. If you’ve been waiting to make the jump, or are new to the Sass world, this will definitely help you out.
Nice quick read that introduces you to the
pointer-events property. This is a good one to have in the back of your mind - most of the time you won’t need it, but occasionally it is exactly what you need.
CSS Houdini is one of the most exciting upcoming features in the CSS spec - the ability to custom design css properties and programatically extend CSS. Wow! You’ll need to have chrome latest enabled to check out these experiments, but it’s worth it. The future of CSS is bright indeed.
Understanding the component lifecycle is key to being able to create more advanced components and having them do what you want. This is a nice introduction to how that lifecycle works in Vue.
Redux-like state-tree architectures have been one of the biggest advanced in Front-end application architecture in a long time. This is a nice, gentle introduction to what these tools do and when you should use them.
Part of the maturation of the Front-end ecosystem is the development of build tooling and cli’s for each of the major frameworks. Knowing these well can dramatically improve your productivity. Here’s a quick breakdown of what’s available in the React, Angular, and Vue worlds. (Though I feel like leaving out ember-cli is a big gap… they were the trailblazers in this space!)
Video from Chrome Developer Summit on how to set up and order your resources for lightning-fast page loads.
Super useful checklist to go through before releasing your new web/front-end project into the wild. Make sure you’ve got everything covered.
To go along with the above checklist, here’s a great resource of cheatsheets for all of your favorite front-end technologies. I find cheatsheets are super useful as a guide for learning when you’re new to a technology, or for quick reference you’re coming back to a toolset you haven’t been using every day. Definitely check these out.
Every time I learn a new thing about what SVG can do I’m blown away. Check out the super cool effects you can do with feDisplacementMap! If you’re creating an image-heavy application, diving deeper on the power of SVG is a must.
This isn’t specific to front-end, but I’m big on the human aspect of development. We need to be able to work together and communicate in order to build software that works. Especially in the open source world, the way we communicate is so key to being able to engage folks and get them to help out. This is a nice look into some considerations for specifically code reviews.