How to render a List with Elm — In this article, we get back to Elm. Do you remember it? It is the pure functional language used to build web applications. In a previous post, we looked at how to render a list in React. Now, we check how to do the same rendering in Elm. Let’s start. Using an Inline Function …

Maps, composite keys, default parameters, and more — In a previous article, we looked at how to search for elements in a large array. There we conclude that is faster to access such elements in an associated map instead of searching for them in the list. When checking to see if an element is present in a large…

Using a generic key name, composite key, and more — In a previous article, we looked at how to remove duplicates from an array. This time we start from that code and try to encapsulate it into a generic utility. Let’s first remember the solution we are going to use. Consider the following list of books. const arr = […

Controlled input, onInput event, e.target.innerHTML, and more — In HTML, elements can be editable. By doing so the web page can be transformed into a rich text editor. Set the contenteditable attribute on an HTML element to make it editable. Basically, this page in Medium is a content editable element.

Debounce, throttle, useCallback hook, and more — In a previous post, we looked at how to create a hook providing both the current value and the debounced value for a text input. This time we will just debounce or throttle the input callback received by a component. Let’s start by creating a simple component managing a search…

Default button type, default form method, pressing Enter in inputs, and more — There are some default behaviors that happen when using an HTML form that is worth discussing. This way you will avoid surprises. Let’s start. 1. The Default Type of a Button is Submit Just putting the <button> tag into a page without specifying its type is the same as creating a button with the type submit. <button>Click</button> <button type="submit">Click</button>

Using inline functions, extracting the item to its own component, and more — This small post will look at slightly different ways to render a list in React. The list stays inside the List component and displays several towns. Below is the List component called with a hardcoded array. import List from "./List"; const towns = [ { id: 1, name: "Barcelona"…

Creating a div element, defining attributes, and more — In this post, we will look at what it means to display a playing card from a single suite using Elm programming langue. Elm is a purely functional language, so expect to use several pure functions to do that. Rendering a Simple Text Ok, let’s start by displaying the text “5 of Diamonds” on…

How to make a search after the user has stopped typing — Sometimes you may get into the situation of making a search based on user input. There are cases when you don’t want to make the network call immediately after each key is pressed in the search input, but wait a bit for the user to finish writing his text. We…