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!

Happy Friday!
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

Learn a CSS Framework in 6 Minutes with Bulma

Nice quick introduction to the Bulma CSS framework. Bulma is a nice framework to cut your teeth on because it’s relatively contained and simple, and pure styling - no JavaScript!


Naming Things In CSS Grid Layout

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!


5 Reasons To Use BEM (a.k.a. why is BEM G.R.E.A.T.)

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.


Image Effects with CSS

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.


The New CSS Layout

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.


JavaScript

How you can use ES6 Arrow Functions to make your JavaScript easier to read

A very nice step by step walkthrough to not only what ES6 Arrow Functions are but how they really help improve your code legibility.


Vue: Using localStorage with Vuex store

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.


React Boilerplates That You Should Know Of

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.


Writing Smarter Animation Code

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.


Introducing PayPal’s open-source cross-domain javascript suite

A super-cool set of resources for building cross-domain javascript libraries. If you’re doing any sort of embeddable widget development or the like, you’ll definitely want to check this out! I’ve already got it bookmarked for an upcoming project.


Other Awesomeness

What’s New in Microsoft Edge in the Windows 10 Fall Creators Update

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!


What's New In DevTools (Chrome 63)

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.


WordPress Replaces Browserify with Webpack for Build Process

Webpack continues to gain steam, and the WordPress javascript build process just got a whole lot faster! Sweet!


Start fast with new AMP Start templates

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.


How to get hired as a junior web developer

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.


Happy Friday!