Friday Frontend: CSS Grid is in Edge!!! Edition
The big news this week is that Microsoft shifted Edge 16, with first class, un-prefixed support for CSS Grid! Yay! We are getting SO close to green across the board in caniuse, with 84% of browsers in the US supporting grid if you include prefixes… while there are definitely still issues and bugs, we’re getting strikingly close to the point where we can make a solid argument for using CSS Grid in production!
Digging into some of the other articles, we’ve got a great overview of BEM, some SUPER cool CSS image effects, a couple different React & Vue setups, animations with GSAP, and some great career advice for junior developers. Check it all out below!
KBall from ZenDev
P.S. I mention it below, next to the article, but if you have career questions you’re always welcome to shoot me an email and I’ll try to help you out. You can also just add a comment below, and I promise I'll respond.
CSS & SCSS
Rachel Andrew blows my mind again with an incredible breakdown of ways to use custom names inside of CSS Grid. Named lines, named areas, managing names in a responsive grid… this is crazy cool stuff!
Quick introduction to BEM and an overview of the benefits of using it. If you haven’t adopted a strong naming convention for your CSS yet, definitely check this out.
This is SUPER COOL! All sorts of amazing image effects purely with CSS, and for those browser that don’t support CSS filters and background blend mode (primarily IE and edge) there’s a nice clean fallback to the original image.
Rachel Andrew published a new book on CSS Grid! Unlike most of our links this is to a product you’d need to buy, but I think it’s well worth checking out, especially with the big announcement from Microsoft bringing us one step closer to having CSS Grid available everywhere.
A very nice step by step walkthrough to not only what ES6 Arrow Functions are but how they really help improve your code legibility.
Simple, straightforward guide to using localStore to stash Vuex state and keep a Vue based SPA in the same state across browser close and open.
If you’re relatively new to React, definitely check out some of these boilerplates to help you go faster. And if you’ve already got a setup you like, you may still want to check these out to see what they’re doing differently and if there are any cool pieces you can pull in.
Great breakdown of how to structure your animation code to make it clean, readable, and easy to update and maintain. Uses GSAP for all examples.
Microsoft just released a new version of Edge, and boy is it a good one for web developers. First class (unprefixed) support for CSS Grid, updated support for the Web Payments API, and some great devtool updates!
Some hot new DevTools updates in the newest version of Chrome. I’m most excited about the multi-client debugging support - opens up a TON of new possibilities.
Hey, it’s boilerplates for AMP projects! If you’re like me and have been on the fence about getting started with AMP, maybe this will help tip you over. Definitely on my to-tinker-with list.
Nice breakdown of some of the challenges & myths around finding a first junior developer position. Many of the things Zell is saying jibe with my experience as well; it’s easy to psych yourself out but with a little hustle and getting out and talking to folks you should be able to find something. Have questions in this area or trying to figure this out? Feel free to email me & let me know what you’re struggling with, and I’ll help you get moving forward.