Pixeldust Wins Trio of Addy Awards

Pixeldust and Nice Monster won three bronze awards in the 2009 Austin ADDYs for creative work on the Nice Monster website. Read more

Essential Image Optimization

Addy Osmani's ebook makes the case the image optimization is too important to be left to manual processes. All images need optimization and it's the perfect job for automation.
I agree, of course. At the moment I've got a WordPress plugin + Cloudinary one-two punch helping out around here. Optimized images, served with a responsive images syntax, from a CDN that also handles sending the best format according to the browser, is quite a performance improvement.
Direct Link to Article — Permalink
Essential Image Optimization is a post from CSS-Tricks
Source: CssTricks

Production Progressive Web Apps with JavaScript Frameworks

This last week at Google I/O, Addy Osmani announced some amazing developer resources for creating Progressive Web Applications (PWAs) that prioritize performance with JavaScript Frameworks.
This is a really valuable contribution to the community. A lot of people want better performance for their framework of choice but can't get buy-in for time and resources to devote to this kind of endeavor. The ability to start with a baseline of high performance and good lighthouse scores is incredibly valuable, allowing developers to enjoy both the productivity and ergonomics of exciting frameworks, without sacrificing speed and user experience.

Here are some of the highlights!
Addy created a site to explore some of the templates that they built out with the different PWA solutions, as a successor to the very popular TodoMVC, called HN PWA. You can explore all of the demos and the GitHub repo here. He then went through some major company implementations of each of the frameworks rebuilt as PWAs. Throughout a lot of the case studies that Addy features, the heavy-hitters in building for better web experiences lied in link rel=preload, requestIdleCallback(), and HTTP2 Server Push. There were many mentions the PRPL pattern, in essence prioritizing what you're going to use first, by Pushing critical resources for the initial URL route, Rendering the initial route, Pre-caching remaining routes, and Lazy-loading and create remaining routes on demand. A lot of the performance wins were framed within the ability to be interactive on mobile within 5 seconds and trying to lower the overhead of the framework itself so that you had more time in that 5 seconds for your own application code.
React announced that Create React App will now be a PWA by default! This is a big win here. They now employ service workers with an offline-first caching strategy, and it gives you 1.5s of headroom for your application code. More information on the release here.
Now has a CLI! Announced at the event, this is a pretty amazing integrationworth playing around with. You can find the project here. Among other really nice features you can read through in the readme, it has a 100/100 Lighthouse score out of the box, as well as a whopping 3s of headroom to work on your own application code.
If you're not familiar with Preact, it's an extremely fast 3kb React alternative with the same API, including the use of components & virtual DOM. It's similar to React, but the small filesize is central to the software design. The only caveat mentioned is that due to its emphasis on slim builds, there may be offerings in the React ecosystem that still need work for seamless integration. That said, Preact was the clear winner in performance here, so I wouldn't be surprised to see the community rally around this solution.
Vue announced a PWA template, offered directly from Vue-cli, which you can access easily with vue init pwa.

Among a lot of great offerings, it gives you two 2s of headroom for application code on mobile, code-splitting with dynamic import(), service worker for offline caching, and JS chunks are preloaded or prefetched.
If you're not familiar with Vue, I've written up a guide here. I think Vue is an amazing piece of software, and the ability to strike all of the lighthouse credentials out of the gate is pretty incredible. This workflow makes it so easy to create beautiful and complex apps.
There are many more details that I didn't get to in this post, and Addy is a great speaker. He even created a video game for his talk. It's a worthwhile watch the whole way through, you can view it here:
[youtube https://www.youtube.com/watch?v=aCMbSyngXB4&w=560&h=315]

Production Progressive Web Apps with JavaScript Frameworks is a post from CSS-Tricks
Source: CssTricks

JavaScript Start-Up Performance

Addy Osmani:
Smaller JavaScript bundles generally do result in a faster load time (regardless of our browser, device & network connection) but 200KB of our JS !== 200KB of someone else's and can have wildly different parse and compile numbers.
Using file size as a metric isn't an awful crime, because it does matter, but it's only part of the JavaScript performance story.
I also found the overview of the discussion of bytecode interesting. Browsers download JavaScript, parse it, turn it into an abstract syntax tree, then turn that into bytecode. What if we could do that during our build steps and ship bytecode?
My opinion is shipping bytecode can increase your load-time (it's larger) and you would likely need to sign the code and process it for security. V8's position is, for now, we think exploring avoiding reparsing internally will help see a decent enough boost that precompilation may not offer too much more, but are always open to discussing ideas that can lead to faster startup times.
Direct Link to Article — Permalink
JavaScript Start-Up Performance is a post from CSS-Tricks
Source: CssTricks

How It Feels Reactions

Jose Aguinaga pinched a community nerve:
The JavaScript community is insane if it thinks anyone can keep up with this.
I heard a lot of Hilarious! So true! reactions. I heard a lot of Nope. This isn't what it's like. reactions, sprinkled with You don't have to use/start with every tool. and Both of these people (in this fake conversation) are kinda jerks.
Some Mama Bear reactions include Tim Kadlec and Addy Osmani.
Missed title opportunity: "How it feels to read 'How it feels to learn JavaScript in 2016'"
Direct Link to Article — Permalink
How It Feels Reactions is a post from CSS-Tricks
Source: CssTricks