May 2022: CSS Grid Makes Fixed Sidebars Simple & Passport.js For Auth
JSON Web Tokens (JWTs) are commonplace nowadays for web apps requiring user authentication. Passport.js makes this (and any other type of auth) simpler.
Hi everyone,
It really doesn’t seem like it’s been a month since my last newsletter - this month just flew by for me. Even though they say summer’s traditionally slower, to me, it seems like it just flies by. I hope your summer (or winter depending on your hemisphere) is off to a great start.
This month’s update is short and sweet: I’ve got two new blog posts to share with you.
My first blog post is about how to use CSS Grid to make a layout with fixed sidebar and a freely scrolling main content section.
If you’ve subscribed to this newsletter for any length of time, you may know that last fall I released a course about modernizing enterprise React apps on newline.co. For the course, I built an outdated sample application and every lesson users and I went through updating one piece of the app, bringing it up to today’s high standards for quality software.
One thing I learned while building this application was how to use CSS Grid to make a page layout with a fixed sidebar but a body that scrolls. Traditionally, you’d have reached for something like position: fixed
or position: absolute
, which would break the normal flow of the DOM, but that’s no longer the case thanks to CSS Grid and grid-template-areas
, in particular.
I can see a lot of similar scenarios where this sort of layout flexibility and control could come in handy.
If you'd like a taste of what the full course includes, there's 7 free videos on YouTube to whet your appetite. Or you can click here to learn more about the whole course - your support would mean the world to me.
And for the security minded among you, I published a blog about setting up a React app to use JWTs and Passport.js for authentication.
Lots of apps today have protected information that can only be accessed once a user has logged in via some sort of authentication and authorization system.
Even though there’s a lot of npm packages and services out there for auth, the tutorials I found for using Passport.js (one of the more popular JavaScript auth packages around) were lacking in details, so I figured it out and wrote the blog I wish had been there for me to reference.
Not only do I cover two different Passport auth methods, but I also go through creating JSON Web Tokens (JWTs) on the Express server, and storing them in the browser for use with every API call requiring authentication.
Even if you never write your own auth system, having a better understanding of how this stuff works and what goes in to properly protecting sensitive data, can only benefit you.
I hope you enjoyed this month’s edition of “Paige Codes”. Please share with your friends if you did.
See you again at the end of June,
- Paige