Tiempo de lectura: 2 minutos Today we are going to learn how to implement a barcode scanner using React. The first thing we need to do is install the quagga2 library. You can also use quagga. npm install @ericblade/quagga2 –save Once installed, we are going to create a component called scanner.tsx import Quagga from ‘@ericblade/quagga2’; import React, { useEffect, useCallback … Read more
Tiempo de lectura: < 1 minuto If VSCode stops showing the explorer, we need to do the following: Go to VSCode and press: Ctrl+Shift+P (Windows or Linux) Cmd+Shift+P (Mac) The command console will open. And we need to run this command (copy and paste): View: Reset View Locations
Tiempo de lectura: 2 minutos Today we are going to learn how we can create a map component compatible with Open Street Maps using the Leaflet library in React. The first thing we need to do is install the necessary library: npm install react react-dom leaflet And then the Leaflet library: npm install react-leaflet And if we need TypeScript (in … Read more
Tiempo de lectura: 2 minutos In React, this type of component is known as a “Higher Order Component” or “HOC”. An HOC is a function that takes a component and returns another component that usually provides additional functionality to the original component. Suppose we want to create an HOC called WrapperComponent that wraps another component called WrappedComponent and provides it … Read more
Tiempo de lectura: < 1 minuto Today we are going to fix the common error that may occur when implementing i18n in our React environment with Next.js. This is the error: Unhandled Runtime Error Error: Text content does not match server-rendered HTML. Warning: Text content did not match. Server: “” Client: “” See more info here: https://nextjs.org/docs/messages/react-hydration-error A different content appears … Read more
Tiempo de lectura: 2 minutos In this post, we will create a customizable button component in Flutter using the ElevatedButton widget. This component will allow us to create buttons with text, icon, and customize various aspects like color, text size, and button width. import ‘package:flutter/material.dart’; import ‘../util/constants/Colors.dart’; class Button extends StatelessWidget { final Color? color; // Now optional and can … Read more
Tiempo de lectura: < 1 minuto Today I’m going to explain and provide an example of middleware in Next.js A middleware in Next.js is a function that runs before a request reaches your Next.js route or API. You can use middleware to handle and manipulate incoming requests. Here are some things you can do with middleware in Next.js: Cookie handling: You … Read more
Tiempo de lectura: < 1 minuto Today I bring you this _app.tsx file by default in case your Next.js project doesn’t create it. This _app.tsx file is the top-level component in Next.js. All page components are rendered through this file, making it useful for global configurations. You should place this file inside pages/_app.tsx import { AppProps } from ‘next/app’ import ‘../styles/globals.css’ … Read more
Tiempo de lectura: 3 minutos Today we are going to learn how we can add Server Side Internationalization so that our Next.js server directly returns translated pages to benefit SEO. The first thing we have to do is to install the necessary dependencies: npm install i18next next-i18next @types/i18next @types/react-i18next –save Then we are going to create a configuration file next-i18next.config.js … Read more
Tiempo de lectura: < 1 minuto Today we’re going to learn how to delete the Docker image when performing a Docker Compose down to then regenerate an update without generating garbage. The command we should use to stop the container and delete the associated image is: docker-compose down –rmi all This will remove the associated images of that Docker Compose. To … Read more
