JavaScript and all things web
tl.dr: Want to make your React site more performant? Here's a quick checklist: Measure component-level rendering performance with either of the following: Chrome DevTools Performance panel React DevTools profiler Minimize unecessary component re-renders Override shouldComponentUpdate where applicable Use PureComponent for class components Use React.memo for functional components Memoize Redux…
Some things I did last year: Joined the Web Developer Relations team at Google. Moved to California. Completed and launched Full Stack React Native . Gave talks at a few places: .concat() FITC Web Unleashed React Boston Chrome Dev Summit Shipped a few open-source projects including Progressive Tooling . Built something with Golang for the first time. Helped maintain GitPoint with some amazing…
To explore how to add lazy loading functionality to an Angular app, this article will go through the process of building a relatively small application called Tour of Thrones . View App Source Code An API of Ice and Fire (an unofficial, community-built API for Game of Thrones) will be used to list houses from the book series and provide information about them. While building this application,…
Although modified to include additional information, this article is a write-up of a talk I gave at .concat() and Fluent. The PRPL pattern is not a specific technology or tool, but rather a methodology for building web applications that load fast and reliably. First and foremost, you send ( push ) the most critical resources to your users. You do this in order to render your initial route as soon…
I’m late, I know. Let’s take a look at what I accomplished this past year: Joined Rangle.io Published two books (one still in progress) with the amazing folks at Fullstack.io. Spoke at 5 conferences around the world plus a dozen more meet-ups and events. Travelled to more cities in a single year than the previous ten years combined (I visited Europe for the first time!). My blog garnered over…
Among other things, this post goes through how I set up offline support using the sw-precache and sw-toolbox libraries. Many updates and changes have been made to Angular tooling with regard to PWA support since this article was written. Progressive Web Apps (PWA) have been the talk of the town in 2016. In short, they are applications that use modern web capabilities to provide a user experience…
After completing the first step of building your application, the next thing most of us do is pick a hosting platform (like Github Pages ) and deploy it. This is awesome, but we always need to make sure to deploy a newer build every time we update our app. We also need to run any unit tests we may have and make sure they pass beforehand. Thankfully, there are continuous integration and deployment…
If you have ever built an Angular 2 application before, you’ll know that setting up and bootstrapping an application can take a significant amount of time. Thankfully, the Angular team have rolled out Angular CLI , a command line interface that makes creating and scaffolding an application significantly easier. In this post, we’ll build an entire Hacker News client using Angular CLI, RxJS…
If you have done any JavaScript development in the past year, then you may have already heard of Redux . Popularized with the use of React, some developers claim it’s the most exciting thing happening in JavaScript at the moment, revolutionizing the way we build our applications and even helping us prevent global warming for good. Okay, I got a little carried away there. But seriously, Redux does…
Angular 2 introduces new template syntax and directives that allow us to manipulate data in our applications. In this post, I begin with a brief introduction on data and event binding then dive right in to using style and class binding as well as directives to dynamically apply CSS and CSS classes. One-way data binding In Angular, data binding describes the synchronization between model and view .…