This is the third part in a series. You can read the first and second installments here and here. respectively.
Welcome to part 3 of this PWA and performance case study focused around the Providence Geeks website. I’m super excited to share with you some of the latest improvements we’ve been working on, so let’s get right to it!
Here’s what we’ll be covering in this installment:
- webpack v4 upgrade
- Route based code splitting + lazy loading
- Improved image loading
- Bundle Analyzer (webpack plugin)
1) webpack 4
I opted to include our upgrade to webpack v4 in this article as this release marked the addition of some significant and new APIs as well as improvements to developer experience that I felt were important to cover. One of the goals of the webpack team was to ease the burden on developers to have to micro-manage webpack just to get performant and well optimized builds and achieves this by providing more sensible defaults out of the box to support both local development and production workflows. …
This is the second part in a series. You can read the first installment here. The third installment is now available here.
When the Providence Geeks website project nearing production readiness, as a weekend project I decided to run a Lighthouse audit on the website. (spoiler alert: it wasn’t pretty).
Before getting into the report itself, here’s a quick rundown on the stack being used:
Part of developing any good web application requires understanding what the experience is like for end users. More than just making sure “everything works” and looks good, loading and performance should also be key factors in delivering engaging and pleasant user experiences that will encourage your users to stay and, more importantly, come back.
As the reach of the internet grows so will its user base, but not every user’s connection and device is the same. …
So as I was working on upgrading one of my projects to use Headless Chrome with Karma, I found myself updating my Docker based CircleCI builds (config.yml) to install additional host packages needed to get Puppeteer to run. That in and of itself wasn’t an issue and was fairly easy to implement based on an example I found here. However, this meant each of my CircleCI builds were going to be installing these packages on every build, which is a waste of time and resources. …
Hey everyone, just wanted to share a new Open Source project I put together. It’s a starter repository using the JavaScript framework Vue!
My main motivation was trying to appreciate the approach and philosophy taken by the project maintainers, in particular the claimed simplicity and accessibility of getting started with Vue, advocating for the usage of Single File Components, and a deviation from the “norms” if you will on eschewing the use of class based UI component by default in favor of fully embracing Prototype in all its glory. (I can certainly respect standing on sound principals!).
These are just my first initial impressions from using Vue over the weekend, based on similar “Hello World” apps I’ve made using AngularJS, Angular, and React. My main goal is always to investigate and try and understand new paradigms in development workflows when they appear and best understand what impact that would have to the developer experience of the project. …
