Preventing Layout Shift

Using CSS Grid to Prevent Page Jank

Lawrence Chabela Articles, CSS & HTML, Design, JavaScript, Programming, Tutorial Leave a Comment

Layout shifts, or page jank as I like to call it, rears its ugly head when a visible element changes position or dimensions, causing the position or dimensions of content around it to be changed.

There are too many possible reasons behind a layout shift to cover in one post, so Iโ€™ve narrowed it down to one in particular for the sake of brevity. In this article, we will discuss this scenario: a component changing its height due to its state being changed from user interaction.

I know that this is a relatively isolated example, especially in the grand scheme of things. However, I think this proves an important point. Solving a layout shift doesn’t always have to be a tedious and complicated process to fix. Sometimes, scenarios like this can easily be solved using the CSS we already have at our disposal.

Node.js for Discord Bot

Using Node.js To Create a Discord Bot

Josh Green Articles, Development Technologies & Tools, JavaScript, Node.js, Programming, Tutorial Leave a Comment

From Zoom to Skype to Microsoft Teams, there is an endless number of platforms to help keep you connected. One such platform is Discord – a service primarily intended for gaming that allows you to voice chat, video chat, or screen share with a community you have developed on your own hosted โ€œserver.โ€ One of Discordโ€™s best features is a developer portal with an open API that allows you to add bots and apps to your server, as well as write your own.

There is true beauty in the ability to create your own custom solutions to fill your needs. So in this brief tutorial, Iโ€™ll show you how to get up and running writing your own Bots and Apps for Discord with Node.js.

Why Functional Programming

James Slaughter Articles, Development Technologies & Tools, JavaScript, Python, React 1 Comment

React has gotten a little funny of late – a few years ago, it was normal to embrace the Object-Oriented paradigm, writing each component as a class and doing lots of this-binding.

Today, however, hooks and functional components have taken over React, and with it, a style of programming unusual for front-end frameworks is growing in popularity: Functional Programming.

This programming style has been in use for many years: Lisp, Haskell, Clojure, and OCaml are all established, though mainly out of the mainstream, languages with a rich history and broad application. Thinking โ€˜functions are first-class citizensโ€™ sounds strange, especially to new JavaScript developers who have spent most of their time in Python or Java that come from an Object-Oriented perspective.

Thatโ€™s why in this post, we will go over the basics of Functional Programming, how we compose functions, a handy implementation of a โ€˜pipeโ€™ function that will compose functions, the process of currying and functions-as-return-value, and how we can use these concepts in React using Higher-Order Components.

Painless Data Fetching With react-query

Haaris Chaudhry Articles, Development Technologies & Tools, React, Tutorial Leave a Comment

Attention: This article was published over 5 years ago, and the information provided may be aged or outdated. While some topics are evergreen, technology moves fast, so please keep that in mind as you read the post.Hey everyone, my name is Haaris Chaudhry, and Iโ€™m a developer at Keyhole Software. Let me tell you about react-query! In this blog, Iโ€™m …

Saving The Environment With React Hooks

Using React Hooks To Save the Environment

James Bradley Articles, Node.js, Programming, React, TypeScript Leave a Comment

Attention: This article was published over 5 years ago, and the information provided may be aged or outdated. While some topics are evergreen, technology moves fast, so please keep that in mind as you read the post.Every application has some need for environmental variables that are specific to that environment. This can be database connections strings or URL to an …