CategoryTechniques

March 20, 2020 — Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, Kristofer Giltvedt Selbbekk is going to show you how to implement all you need to sort out all of your table sorting needs. By the end of this tutorial, you will have found a way to model your state, wrote a generic sorting function, and wrote a way to update what our sorting preferences are. After making sure everything is performant and refactored you will provide a way to indicate the sort order to the user. Read more…

December 2, 2019 — Development workflows can easily get out of hand and start causing confusion and friction within teams — especially as they get bigger in size. There have been too many times when our code review was just about noticing that missing comma or the failing tests that never run before pushing to a remote repository. Thankfully, there are tools that can take this friction away, make developers’ workflows more straightforward and help us concentrate on the things that actually matter the most. Thanks to git and the hooks it provides, we have a great variety of automation with which we can set our development workflow and make our lives easier. Read more…

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…