DEV Community: coder4life

Fetch data with RestClient in Spring Boot

coder4life — Thu, 18 Jan 2024 11:50:29 +0000

Convert Markdown to HTML in Spring Boot

coder4life — Mon, 16 Oct 2023 14:03:29 +0000

Building a Node.js API with Express, TypeScript, PostgreSQL, and Drizzle ORM

coder4life — Mon, 31 Jul 2023 09:31:45 +0000

Node.js API development with cookie based authentication logic. This project uses Drizzle ORM for connection and querying a PostgreSQL database. Drizzle ORM is a great TypeScript based ORM for SQL databases with a really simple and flexible query builder. Check out the video here:

Reset a Form in React Hook Form

coder4life — Wed, 28 Jun 2023 17:43:09 +0000

A quick look at 3 ways to reset a form in React Hook Form: Using a reset button, resetting on submit, and resetting a single input field.

Upload file in Spring Boot

coder4life — Thu, 01 Jun 2023 11:08:51 +0000

In this code-along demo we will be uploading a file in a Spring Boot with Thymeleaf application. Visually we have a file upload page for selecting and uploading the file and a status page to see the result. Endpoints on the backend will handle the file upload and place it in a local directory.

Creating a Protected Route in React

coder4life — Thu, 11 May 2023 07:37:56 +0000

You can make a page private in React Router by creating a protected route. This protected route can be used as a wrapper around route element you want to be private. Authorization will grant the user access to the private route. In this example we create a context, which holds the current authenticated state. Clicking the login button will set authenticated to true and then the user has access to the private page.

Testing in Spring Boot with WebMvcTest and Mockito

coder4life — Tue, 09 May 2023 08:47:55 +0000

Testing the web layer of Spring Boot API is pretty easy with the WebMvcTest annotation and Mockito to help with mocking. In this example we will test a GET endpoint for getting all employees from an employee API. We mock the employee service and check the returned JSON.

Creating a Contact Form with React Hook Form and Tailwind CSS

coder4life — Thu, 27 Apr 2023 06:59:43 +0000

In this code-along tutorial we will be creating a classic contact form using React Form Hook and Tailwind CSS. The form consists of 3 fields: name, email, and message. In React we will creating a custom form element component for creating the fields and using the control functionality from React Hook Form to control these "external" elements. All fields are required so will also handle any errors here. Styling of this page will be done with the help of Tailwind CSS.

Show active navigation link in JavaScript

coder4life — Fri, 21 Apr 2023 11:52:06 +0000

Two options to show the active nav link: first with an active class or second with the aria-current="page" attribute. We have a simple navigation consisting of 3 links and 3 seperate HTML pages. Some basic CSS styling with a hover action that changes the color or the link. We will use the same hover styling for the active nav link.

Introduction to Spring Shell

coder4life — Wed, 29 Mar 2023 12:04:01 +0000

Create a temperature converter - celsius to fahrenheit - with Spring Shell. This Spring Boot 3 project shows how to get started with the basic shell functionality and important annotations.

Using composition to optimize React rendering

coder4life — Sat, 11 Mar 2023 15:01:09 +0000

How you can improve and minize re-rendering in your React app using component composition. It's really simple. Here we refactor a simple app that re-renders a third component not related to the changes happening.

import { useCallback, useState } from 'react';

function App() {
    return (
        <div className="app">
            <CounterComponent>
                <Title />
            </CounterComponent>
        </div>
    );
}

const CounterComponent = ({ children }) => {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    const decrement = useCallback(() => {
        setCount(prev => prev - 1);
    }, []);

    console.log('render CounterComponent');

    return (
        <div>
            {children}
            <h2>{count}</h2>
            <div>
                <button onClick={decrement}>-</button>
                <button onClick={increment}>+</button>
            </div>
        </div>
    );
};

const Title = () => {
    console.log('render Title');
    return <h1>Counter</h1>;
};

export default App;

How to remove click event listener in JavaScript

coder4life — Tue, 21 Feb 2023 12:10:04 +0000

In this short video we will learn how to remove a click event listener. 3 options are introduced: using removeEventListener, using clone and replace, and removeAttribute for inline onclick event listener.