ReactReact NativeJavaAndroidDockerFlutterPythonJavascriptDocker ComposeHTMLWordpressAndroid StudioArtificial intelligence

Adding Dark Mode to React using Mui

by
Adding Dark Mode to React using Mui

Tiempo de lectura: 2 minutosToday we’re going to learn how we can add dark mode using React and the MUI design library. The first thing we’ll do is to create two dark and light themes: Theme.tsx // theme.ts import { createTheme, Theme } from ‘@mui/material/styles’; import ‘@fontsource/roboto’; import ‘@fontsource/roboto/100.css’; import ‘@fontsource/roboto/300.css’; import ‘@fontsource/roboto/400.css’; const lightTheme: Theme = createTheme({ palette: … Read more

Deja de instalar servicios en tu VPS, usa Docker

by

Tiempo de lectura: 2 minutosWhat is Docker? Docker is an open-source platform that automates the deployment of applications within software containers. These containers encapsulate all the necessary dependencies for an application to run efficiently in any environment, from development to production. Unlike traditional virtual machines, Docker containers do not include a complete operating system, making them extremely lightweight and … Read more

Adding Google AdSense in React

by
Adding Google AdSense in React

Tiempo de lectura: 2 minutosToday we’re going to learn how to add Google Adsense to React. The first thing we need to do is to create an account on Google Adsense and obtain our page code. Now we need to add the code inside our head like this: <head> <script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXX” crossOrigin=”anonymous”></script> </head> Where in ca-pub-XXXXXXXXXXXXX we must … Read more

Validate ReCaptcha token using PHP

by

Tiempo de lectura: < 1 minutoIn this example, we pass the obtained reCaptcha code through the JSON body and validate it. Replace SECRET_CODE with the secret code obtained when creating the captcha. To send the remote IP, you can use HTTP_CLIENT_IP or HTTP_X_REAL_IP if you are using a reverse proxy like NPM. Finally, validate the captcha token and allow the … Read more

Add reCAPTCHA Google Captcha to React

by
Add reCAPTCHA Google Captcha to React

Tiempo de lectura: 2 minutosToday we’re going to learn how we can validate a form, including a reCAPTCHA to prevent spam attacks by BOTS. The first thing we need to do is register our reCAPTCHA code on Google: https://www.google.com/recaptcha/about/ And click on v3 Admin Console Click on the plus (+) button to create a new one, and in this … Read more

Decode JWT Token in React

by
Decode JWT Token in React

Tiempo de lectura: < 1 minutoToday we are going to learn a small function to decode JWT tokens using React. The first thing we will do is to install the necessary libraries: JsonWebToken npm i jsonwebtoken –save auth0.js npm install auth0-js –save And the types if we are using TypeScript: npm i –save-dev @types/auth0-js Once installed, let’s create this function … Read more

Implementing Google Sign-In in React

by
Implementing Google Sign-In in React

Tiempo de lectura: 3 minutosToday we are going to learn how to implement Google Sign-in with React, also compatible with Next.js. The first thing we need to do is install the React Oauth2 Google library: npm install @react-oauth/google@latest Once installed, we need to create our credentials: Go to Google Cloud Platform (https://cloud.google.com/) and click on Console. Now select your … Read more

Crear una Progressive Web App (PWA) usando React y Next.js

by
Crear una Progressive Web App (PWA) usando React y Next.js

Tiempo de lectura: 2 minutosToday we are going to learn how we can create a Progressive Web App (PWA) using React and Next.js. We install the dependency we are going to use next-pwa npm install next-pwa –save-dev @types/next-pwa –save-dev Now we create a manifest.json file inside public. { “short_name”: “My PWA”, “name”: “My PWA”, “icons”: [ { “src”: “/icon.png”, … Read more

Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

by
Cargar paths con parametro y sin parametro en Next.js /path/1 y /path/

Tiempo de lectura: < 1 minutoIf we want to load paths in Next.js with or without parameters and avoid redirection to a 404 page, we need to do the following: First, we create our folder structure as needed. In this example: /path/ [id].tsx Inside our [id].tsx file is where we handle that ID and perform the desired operations. This works … Read more

Disable JavaScript in Firefox to Check SEO Links

by
Disable JavaScript in Firefox to Check SEO Links

Tiempo de lectura: < 1 minutoToday we’re going to see how to apply a strategy to check SEO links. Disable JavaScript loading using our Firefox browser. This will allow us to load exactly what a crawling robot loads when analyzing the website. The first thing we need to do is open Firefox and enter this in the URL address: about:config … Read more