Kendo Grid: A Primer For First-Time Users

Brian Jacobs Development Technologies, Tutorial, Vue.js Leave a Comment

This is my take on working with Kendo Grid in a Vue 3 project. While I have not explored the grid functionality to the nth degree, these are some things I like about the grid, some difficulties I had implementing it, and some workarounds and quirks I have discovered. Specifically, I will be referring to the Vue implementation of Kendo Grid and the Native Components. This is not to be confused with the Kendo UI for Vue Wrappers.

Kendo Grid is a very robust tool for displaying data in table format. Out-of-the-box features include sorting, filtering, and pagination. Simply defining the column schema with a few config options will have the grid set up quickly. A few features that require more coding and configuration are column collapsing, adding a toolbar, displaying aggregated fields, using custom cell components, implementing column groups, and exporting grid data to a file.

Let’s get started!

React Hooks Form

React Hook Form

Braden Niswonger Development Technologies, React Leave a Comment

In this blog, we will explore React Hook Form, an extremely lightweight and effective form building library using React. This open-source, third-party library has no dependencies and can be integrated with most existing forms or libraries. It provides the ability to subscribe to individual components, limiting the frequency of re-renders and making it more efficient.

Below, we will learn some of the basic usages of React Hook Form, some more in-depth features, and then look at an example form integrated with an existing UI library.

Updating Microservices with Netty 5, Kafka 3, and React: Whirlpool Revisited

John Boardman Development Technologies, Java, JavaScript, Microservices, React Leave a Comment

Back in 2015 and 2016, I wrote two blogs that went step by step to develop a microservice/Netty architecture with fully working code called Whirlpool.

A lot has changed in the years since, so recently I decided to come back to the project, update it with the latest versions of Kafka and Netty, and add a React UI to it (rather than the vanilla JavaScript version it used before). In addition, I also added Windows Subsystem for Linux (WSL) scripts in addition to the Mac and Linux scripts that were there before and made all of the scripts more robust.

This blog will be about the work that went into all of those updates, plus a look at the new React UI. This provides an excellent view into what it takes to update an outdated microservices application implemented with Kafka (version .9 –>3.0) and Netty (4.1.3->5.0.0-alpha2), bringing all versions up to date and adding a React UI. By the end you’ll be familiar with the latest versions of these frameworks, know some “gotchas” to avoid, as well as understand how to integrate WebSockets into React.

Preventing Layout Shift

Using CSS Grid to Prevent Page Jank

Lawrence Chabela 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 Development Technologies, 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.