CategoryTechniques

November 27, 2019 — Arguably the worst way to teach the fundamentals of programming, is to describe what something is, without mention of how or when to use it. In this article, Ryan M. Kay discusses three core concepts in OOP in the least ambiguous terms so that you may never again wonder when to use inheritance, interfaces, or abstract classes. Code examples provided are in Java with some references to Android, but only basic knowledge of Java is required to follow along. Read more…

July 22, 2019 — In JavaScript, the Number type cannot safely represent integer values larger than 2⁵³. This limitation has forced developers to use inefficient workarounds and third-party libraries. BigInt is a new data type intended to fix that. In this article, Faraz Kelhini will take a good look at BigInt and see how it can help overcome the limitations of the Number type in JavaScript. Read more…

July 18, 2019 — While working on his personal website, Jorge Ferreiro had all the code in the same repository: the back end used Node.js and the front end used ES6 with Pug. However, he found some downsides. Yarn workspaces let you organize your project codebase using a monolithic repository (monorepo). In this article, Jorge explains why they’re a great tool and how to create your first monorepo using Yarn with basic npm scripts, and add the required dependencies for each app. Read more…

July 1, 2019 — In this article, Miriam Suzanne takes a deeper dive into the ‘CSS Custom Properties for Cascading Variables’ specification to ask, “Why are they called custom properties, how do they work in the cascade, and what else can we do with them?” Pushing past the “variable” metaphor, custom properties can provide new ways to balance context and isolation in CSS patterns and components. Read more…

June 27, 2019 — This tutorial will help you transform an app that doesn’t work offline into a PWA that works offline and shows an update available icon. In this article, Jad Joubran will show you a step-by-step tutorial for adding a service worker to an existing one-page website. You will learn how to precache assets with workbox, handle dynamic caching as well as handle updates to your PWA. Follow along and see how you can also apply these techniques on your website. Read more…

February 15, 2019 — For the past few months, Cory Shaw has been building a software-as-a-service (SaaS) application, and throughout the development process he’s realized what a powerful tool Slack (or team chat in general) can be to monitor user and application behavior. After a bit of integration, it’s provided a real-time view into our application that previously didn’t exist, and it’s been so invaluable that he couldn’t help but write up this show-and-tell. Read more…

November 5, 2018 — Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image, while remaining more digestible compared to a typical video. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage. With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser. Today, Ayo Isaiah will show you how to convert animated GIFs to video files and examine how to properly embed these video files on the web so that they act just like a GIF would. Read more…

October 30, 2018 — The Server Timing header provides a discrete and convenient way to communicate backend server performance timings to developer tools in the browser. Adding timing information to your application enables you to monitor back-end and front-end performance all in one place. Over the years developer tools have been improved to help us troubleshoot these sorts of performance issues in the front end of our applications. Browsers now even have performance audits built right in. This can help track down front end issues, but these audits can show up another source of slowness that we can’t fix in the browser. Read more…

August 15, 2018 — In this article, William Lim describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described here. A good understanding of this effect is very helpful for building or designing any website that has fixed elements. Read more…

July 27, 2018 — The Beacon API is a lightweight and efficient way to log information from a web page back to a server. It is used for sending small amounts of data to a server without waiting for a response. Think of it like a postcard sent home when on vacation. You put a small amount of data on it, put it in the mailbox, and you don’t expect a response. In this article, Drew McLellan will help you find out how that can be used and what makes it so different from traditional Ajax techniques. Read more…