I had a blast this week hosting the ‘Web as Platform’ track at QConSF, and talking with tons of folks about the future of software and the web. We’re at an incredible time in our industry’s history, where the browser is really transitioning from being an incredible documentation delivery engine to being an application delivery engine - the next generation operating system.

We’re right in the middle of the transition, and this is one of the reasons things are changing so fast and it’s so hard to keep up. Hence newsletters like this one to help you stay on top of it - it can be overwhelming, but there is so much amazing stuff coming down the pipe. I couldn’t be more excited.

Perhaps due to that excitement, this week has a bit more cutting/bleeding edge stuff than usual, but there’s still a nice mix of practical tutorials in there as well. Enjoy!

Happy Friday!
KBall from ZenDev

CSS & SCSS

CSS Code Smells

Nice set of rubrics to help you know when your CSS needs refactoring. No bombshells, but good rules of thumb.


Aspect Ratios for Grid Items

The always entertaining Chris Coyier of CSS-tricks walks us through some techniques for forcing aspect ratios with CSS-grid.


Smooth corners with CSS Houdini

I’m really still wrapping my head around what CSS Houdini is going to enable, but this is a super cool example of its power, defining a new shape in javascript that you can then use as a mask via CSS.


Grid areas and the element that occupies them aren’t necessarily the same size.

More CSS grid explorations by Chris Coyier, this time poking around some of the edges of what it really means to place an element inside of a grid area. I don’t know about you, but I’m definitely still missing the intuitive understanding of CSS Grid that I hope will grow over time, and articles like this definitely help fill the gaps.


The Current State of Element Queries

With so many amazing new CSS and JavaScript capabilities coming online every day, it’s shocking that we haven’t made more progress on this. Element queries, and the related (successor) concept of container queries, have the potential to revolutionize the way we build responsive components, but they just don’t seem to be moving forward much at all. This article takes a look at what’s going on in this world, and why even without direct action there may be some hope as Houdini comes online.


JavaScript

The Cost Of JavaScript

One of the questions that came up in discussion about the rise of the web as the next application platform was around performance. This is an excellent article by Addy Osmani from Google covering all the factors that feed into performance costs of JavaScript, and how to keep your performance optimal for lightning-fast mobile loading.


Learn & Understand JavaScript’s Reduce Function

Learning to program JavaScript in a functional manner will dramatically improve your programming, letting you write simpler, easier to read code. This article takes one of the key functional concepts for manipulating lists of data - reduce and walks you through it from start to finish.


Web Animation API- Unleashing the Power of CSS keyframes in JavaScript

I had the opportunity to see a talk on the Web Animation API at QCon, and boy am I excited about this. As the speaker said, it gives you “something as simple as CSS animations when you’re just saying what you want, but with the flexibility to use JavaScript when you need to do something a little more complicated”.


Create A Vuex Undo/Redo Plugin For VueJS

Both interesting in its own right as a plugin you might want to have, but also a cool exploration of some valuable Vue techniques like how to tap into the plugin API and how to subscribe to VueX mutations.


Everything You Should Know About React: The Basics You Need to Start Building

Super detailed walkthrough with code that you can play with right away. Probably the best step-by-step guide I’ve seen to get you started with React, working with real code, and understanding all the core concepts.


Other Awesomeness

Introducing the New Firefox: Firefox Quantum

Oooh boy. Not only does the underlying technology for the new Firefox make my nerd self giggle in glee, but I downloaded and tried it out and it is wicked fast. This may be the final straw that takes me off Chrome and back to Firefox.


Code together in real time with Teletype for Atom

The challenges of doing pair programing while remote has always been one of the biggest downsides of remote development to me. Teletype is a brand new package for Atom that has the promise to make this downside go away. It looks super cool! Might almost be enough to push me into finally migrating to Atom away from my happy place of VIM in the terminal. 😜


The Web Assembly Revolution Has Begun

The slides from one of my favorite talks in the Web as Platform track at QCon. Web Assembly is just getting started, but has the potential to completely revolutionize the way we do development on the web.


The GraphQL stack: How everything fits together

Another buzzword I was hearing a lot about from front-end folks at the conference was GraphQL. Now to be perfectly honest, I’ve never used GraphQL and haven’t looked at it much, but if this article is accurate there’s a lot to be excited about. Imagine an API that morphs to exactly what your user interface needs, so that you don’t have to worry about changing and adding endpoints as your interface evolves, and you’ll start to see some of the potential exposed by GraphQL.


ARIA is Spackle, Not Rebar

Not only a fun metaphor, but a helpful guideline for those who like me believe that accessibility is important, but still sometimes struggle to figure out exactly what we need to do in our HTML to “make it so”.


Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!