Three (ok 4 if you count npm) big releases in the same week! First the Node 10.0 release, along with a coordinated npm 6.0 release, both with a big emphasis on improved security. Then the Edge 17 release which means we can now use service workers across ALL major browsers! Sweet! And then just yesterday Angular 6 was released. Busy week!

Lots of other great articles and examples this week too - a look at CSS grid subgrids, a crazy detailed portrait built with pure CSS, a deep dive into the ‘new’ keyword in JavaScript, and a super cool frontend performance case study with Walmart.com

Happy Friday!
KBall from ZenDev

CSS & SCSS

CSS Grid: More flexibility with minmax()

Responsiveness without media queries is a really interesting topic. While media queries are super powerful, they also can lead us to rather ‘inflexible’ ideas about our page layouts, working perfectly on a set of standard screen sizes and oddly for in between sizes. This article highlights how one of the features of CSS Grid - the minmax function - can enable responsive websites that resize parts of the grid smoothly without a single media query.


HTML5’s Global `hidden` Attribute

I found this interesting because I’ve never heard of it - an attribute that allows you to not only style an element to be hidden, but actually semantically mark it as hidden. As the world moves towards more accessibility, screen readers, and other machine-interpreted views of HTML this seems like a good thing to start using.


CSS at Scale: LinkedIn’s New Open Source Projects Take on Stylesheet Performance

Last week I linked over to LinkedIn’s new CSS Blocks project as the best implementation I’d seen to date of a CSS-in-JS approach. This week we’ve got this - an engineering blog post that goes into the thinking and functionality behind this project and the related OptiCSS CSS optimization libraries. Definitely worth a readthrough!


Grid Level 2 and Subgrid

CSS Grid is already amazing, but one of the most powerful features was cut out of the level 1 specification to allow more time for discussion. Subgrids have the potential to allow super-powerful nesting behavior within grids; I imagine a whole new level of componentization under grids when these get implemented. And we’re in luck! There is active work happening on the spec, and a first implementation is underway at Mozilla. Check out this post for all the updates.


PureCSS-Francine

In the inspiration bucket - or let’s face it, more the OMG how the HECK did she do that bucket, check out this Pure CSS portrait. It uses a lot of advanced CSS features, so the browser you’re using really matters - it looked best for me in Chrome, almost as good in Firefox, and kinda wonky in Safari. Really shows you how crazy far we’re starting to be able to go with CSS.


JavaScript

What's New in Angular 6

Angular 6 came out yesterday, and it has a whole bunch of interesting goodness planned. I think the most exciting is Angular Elements, letting you wrap up Angular components for use in other environments… I think this type of interoperability across frameworks is one of the most interesting ongoing developments in the JS framework world.


A Look at the Resize Observer JavaScript API

This is really cool - letting you put an observer onto an element and see when it resizes, regardless of if the window has changed size. This should let you do some really interesting responsiveness on elements based on where they are in the page - not quite to the level we’d get with container queries, but still pretty neat.


RxJS 6: What's new and what has changed?

The new major release in RxJS has a number of changes, but the one that stands out the most to me is the shift from chaining to piping operators. Piping is a super powerful concept that is most common in functional languages, but is likely familiar to anyone who uses a unix/linux style shell. There’s a proposal to make a pipeline operator a core part of the JavaScript language, but even without that it’s neat to see libraries embracing this style of development.


Demystifying JavaScript’s ‘new’ keyword

One of the tricky pieces about understanding JavaScript when coming from other programming languages is it’s unique take on inheritance. A previous edition of this newsletter included an article on the distinction between prototypes and classes, this article breaks down another piece of this puzzle, what exactly happens under the hood when you use the ‘new’ keyword.


The Node.js Project Introduces Latest Release Line: Node.js 10.x

The latest Node LTS line is now OUT, with some big updates for security and the native apis, and stable http2 support. This is the release post, and I break down this and the coordinated NPM 6 post over on InfoQ here.


Other Awesomeness

What’s new in Microsoft Edge in the Windows 10 April 2018 Update

Lots of super cool things in the latest version of Edge, but I think the most exciting piece to me is that they’ve now turned on Service Workers by default. This means that Service Workers (and by extension PWAs) are now available on all major browsers and platforms. Yes!


How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance

Another in an excellent series by Session Stack, this post takes you through the different ways we can animate elements on our page, covering not only the ‘how’, but some of the thinking behind when and why to animate, and even a little bit about the performance considerations behind different types of animations.


Case study: analyzing the Walmart site performance

This is very interesting, not because I care much about the Walmart site (honestly I avoid walmart if I can help it), but because it is extremely thorough in examining different ways to optimize front-end real and perceived performance. If you’re doing any sort of front-end performance work (and given the data on user behavior based on speed, you probably should be) this will be a great example to read through.


Twitter Passwords May Be Compromised, Could Be One of the Largest Data Breaches in History

This is my own write-up, but I think it’s pretty important. Twitter announced a ‘possible’ security breach, having discovered a bug where passwords were getting stored in plaintext in a logfile. They say that they don’t believe any of the passwords were actually compromised, but given how lax their internal security has been I think it’s worth treating very carefully and definitely changing your password.


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!