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.

This week’s Friday Frontend has a number of “list” posts included… best JavaScript intro courses, a big front-end checklist, and a set of front-end cheat sheets. I haven’t included as many of this type of post before, so I’m curious what you think. Let me know - are these good, or do you prefer the more one-off articles? Leave a comment and let me know.

Happy Friday!
KBall from ZenDev

CSS & SCSS

How to structure your CSS better as components

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.


How Sass Can Save You a Lot of Time

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.


CSS Quick Tip: Block Pointer Events from CSS

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.


Advanced CSS-Only Form Styling

Walkthrough of using CSS pseudo-elements and pseudo-selectors to do some pretty advanced form styling & error states without a line of JavaScript.


CSS Houdini Experiments

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.


JavaScript

Demystifying Vue Lifecycle Methods

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.


Best courses to learn Javascript in 2017

A nice mix of free and paid resources for folks who are looking to pick up JavaScript for the first time or move from beginner to intermediate/advanced. Focused on JavaScript the language rather than any particular framework.


TRANSPILED FOR-OF LOOPS ARE BAD FOR THE CLIENT

An interesting investigation of how babel and transpilation of modern JavaScript can slow down your JS performance. My personal feeling is that for the vast majority of situations it won’t matter, so you should use whatever syntax is most productive and expressive, but if you’re doing some performance sensitive code it’s worth thinking about if the functionality you’re using needs to be polyfilled.


What Does Redux Do? (and when should you use it?)

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.


JavaScript Frontend Framework CLI Showdown

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!)


Other Awesomeness

Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017)

Video from Chrome Developer Summit on how to set up and order your resources for lightning-fast page loads.


The Front-End Checklist

Super useful checklist to go through before releasing your new web/front-end project into the wild. Make sure you’ve got everything covered.


The best front-end hacking cheatsheets — all in one place.

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.


SVG waves with feDisplacementMap

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.


Code Review Etiquette

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.