Video is one of the most sought out mediums on the web and is used widely in web page designs today. According to a Cisco report, video constitutes the majority of the world’s internet traffic. In 2017, video was reported to have constituted 75% of all internet traffic and this number is slated to surpass 80% by 2022. This should come as no surprise to most of use, considering the fact that video content is a powerful medium for visual communication and offers a great way to keep users engaged. Adding video to websites however, can oftentimes be a double-edged sword; We may make some gains via a richer, more delightful user experience but risk performance issues if our websites are not optimized appropriately. This, alongside the rapid growth of traffic originating from mobile and wireless connections means we as developers are increasingly responsible for optimizing our sites for performance. In this post, we’ll dive into video optimization strategies so we can reap the benefits video provides without driving users away. ...

Images make up a large portion of a webpage’s payload. According to the HTTP Archive, the average image size has grown almost twofold and now constitute a whopping 63% of total bytes of a webpage. This growth in images on the web has coincided with faster network speeds and growing bandwidth; meaning that loading webpages today has never been faster— for some of us. High network latencies and low bandwidth (mostly over mobile connections) is unfortunately commonplace for a large percentage of the world. This means incredibly slow webpage load times and an increasingly frustrating experience browsing webpages. While doing away with images altogether would theoretically solve the problem of slow page load—removing all images from the top 1,000 websites, these sites would load 30% faster on average over 3G (high performance images)—a text only webpage would significantly hamper user engagement. Thankfully, there are many tricks to optimizing images for the web so we don’t have to skimp on the overall design and user experience of a webpage. ...

Early on in my career, when web performance metrics were brought up in conversation, I would take how others reacted to the number as a cue to understanding what those numbers meant (read: I had no idea what those numbers meant). A high number elicited shock and horror, while a low number drew admiration and praise. This could only mean, high page weight bad, low page weight good. Though my naïveté around web performance at the time was a result of my overall lack of experience, it did highlight a point worth considering; the concept of a “page weight” is somewhat of a confusing term especially when seen in isolation. ...

Testing libraries like Jasmine, and Jest often provide conditionals like toBeEqual or toHaveBeenCalledWith to check that a piece of code has an expected outcome. However, more often than not, a project might have a unique set of conditions that it might want to check against that are not included in the vocabulary of a testing library. For example, if you wanted to test that an element in a vue instance had content, you could create a method called hasContent and pass it an element to check whether or not its contents are empty. ...

A couple of days ago, React 16.3 was released. The update brought with it many changes, including an official (recommended for use) Context API that replaces the old (not recommended for use) Context API, a createRef API, and a forwardRef API to name a few. Among the changes introduced in React 16.3, I most anticipated the change to the Context API. Adding Context to Context For those of you unfamiliar with the concept, context is a technique in React used to pass data down from parent to child without having to rely on props. Passing data via props is a common pattern used in React to give children access to parent data. While declarative, passing props can be unnecessarily verbose as it requires passing state explicitly down through the tree. If a child needed access to a grandparent component, the state would have to be passed to every intermediate component regardless of whether or not that component needs access to that data property. React’s context feature offers you the ability to pass state down while bypassing intermediary components. ...

A couple of months ago, I made the switch from React to Vue. I had been playing around with Vue for a bit before making the switch and was impressed by how lightweight, and versatile Vue was. Compared to my initial experience learning React (👋 JSX), picking up Vue felt like a breeze. Not only is Vue very well documented, it is also very straighforward and doesn’t require a lot of initial set up to get started. If you’ve been considering using Vue in your next project, here are a few of the reasons I think you should use Vue: ...

Writing more frequently has been one of my commonly unfulfilled new year’s resolutions for the past few years. With this blog finally set up (hurray Hugo!), I’m hoping to finally stick to this year’s goal and write with a little more frequency, one post at a time. I’m a little over a month behind with starting on a new year’s resolution but better late than never! Here’s to new beginnings and more writing in 2018! ...