Working with JavaScript Objects
Using a JavaScript Set with the Spread operator and JavaScript Array methods .map() and .sort()
The Problem To Be Solved
If you look at the sample data below you will see the data we are working with and what we want to achieve (desired result.)
We have a JavaScript Array which contains an Object for each of our friends. The problem is how to get a unique list of the states from this Object.
Use Case
I recently had to do something similar to dynamically populate a Select list of States, from which the user could choose. The Select list was to only include states in which Objects existed. The use case did not involve friends, but you get the idea. …
Component-Based Development
Get started using a React framework.
In this tutorial, we will examine:
- What Next.js is and how it is different from just React.
- What server-side rendering is.
- How to Bootstrap a Next.js application.
- The basics of creating routes.
- Using React components.
The source code for this can be found on GitHub.
Assumptions
This tutorial does assume you are familiar with the basics of React such as functional components and the concept of a route. If you are not familiar with these, you may want to read:
And possibly also this:
Tools and Setup
You will need to have Node.js installed as well as a code editor. …
React Tips
React form state management without the useState() Hook.
In this tutorial, we will explore React form state management using React Final Form. React Final Form allows us to manage state without the need for the useEffect() hook.
What is React Final Form?
High performance subscription-based form state management for React
React Final Form is a React wrapper for Final Form, which is that uses the
Observer pattern for state management.
The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
Who uses React Final Form?
Among others,
Source Control
Get a local copy of your favorite JavaScript developer’s public code and run it on your local machine.
So you found the public GitHub account of your favorite JavaScript/React developer and want to run some of the examples in their repositories. Or a tutorial mentions “the complete solution can be found here.” Great. Now what?
Cloning is done through the command ‘git clone’ and it is a process of receiving all the code files to the local machine.
What We Will Do
For the this tutorial we will use one of my GitHub accounts with a few repositories, but you can use any GitHub account you desire. …
NPM Packages
Create an account in the NPM registry, write some code for your package and publish
Have you ever wondered where those npm packages you install come from Well, wonder no longer, they come from developers like you!
What We Will Do
In this tutorial, we will create and publish to the NPM registry, an NPM package using the following steps.
- Create an NPM registry account.
- Write some code that will become your NPM package.
- Test this locally.
- Add module.exports to export what will be made available in your package to those who install it.
- Publish your package to the NPM registry.
- Test your NPM package by using npm install.
Our focus will be on the process and not the…
Database Tips
Create, get(as list and rows), modify, add and remove data from an Array
PostgreSQL is an open source relational database that supports some amazing data types. In prior articles, we looked at performing CRUD-like operations on the jsonb data type as well as converting a jsonb array of objects in to a recordset for easy querying.
What We Will Do
In this article, I’d like to focus on another data type, the Array data type. Why? Because Arrays are great for storing, at a minimum, lists. Lists of text, numbers and more.
Array Type
PostgreSQL gives the opportunity to define a column of a table as a variable length single or multidimensional array. …
Database Tips
Using the OFFSET and FETCH clauses in Microsoft’s SQL Server.
A common need when working with large amounts of data is how to fetch the data and display it in a reasonable amount of time.
The solution to this problem is pagination. Pagination can be done on the front-end, back-end, or both.
Note: This article is specific to Microsoft’s SQL Server. For MySQL or PostgreSQL, see this article.
Pagination
Pagination, also known as paging, is the process of dividing a document into discrete pages, … Server-side pagination is appropriate for large data sets providing faster initial page load.
-Wikipedia
Database Tips
Using the LIMIT, OFFSET and FETCH NEXT operators.
A common need when working with large amounts of data is how to fetch the data and display it in a reasonable amount of time.
The solution to this problem is pagination. Pagination can be done on the front-end, back-end, or both.
Note: This technique works well in PostgreSQL and MySQL. For Microsoft SQL Server see this article.
Pagination
Pagination, also known as paging, is the process of dividing a document into discrete pages, … Server-side pagination is appropriate for large data sets providing faster initial page load.
-Wikipedia
React Tips
In a registration form, using useState hooks for each input versus using a user object and a single useState hook.
In this article we will explore two ways of tracking state using a simple registration form.
The user enters their name, email address and a password and we keep track of state in two different ways.
- The first way will be to use the useState hook for each input field.
- The second way will be to use a user object and a single useState hook with the user object.
Both are valid ways but the second may be preferred for larger forms.
Let’s Get Started
You can use an existing React project (I often keep a “SandBox” application for experimenting) or bootstrap a…
gravity well (Rob Tomlin)
Self-Employed Software Developer, Trainer, Consultant. Keeping up to date. I’ve noticed in over 28 years of programming, one’s current skills have a shelf life.
