Friday Frontend: Releases Galore Edition
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!
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.
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.
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.
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 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.
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!
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.