Productivity in Development

​Backing up and restoring a large number of MySQL databases can be a daunting task, especially if you have over 100 databases. To streamline this process, you can export all your databases simultaneously and then import them back into your MySQL server in one go. Here's a quick guide on how to do this efficiently: <h3>STEPS:</h3><div>​ </div><ol><li>Export All Databases:​ </li></ol><pre>mysqldump --all-databases --user=username --password=password &gt; all_databases_backup.sql </pre>&nbsp; &nbsp; or<pre><code>mysqldump -u root -p --all-databases &gt; all_databases_backup .sql</code> </pre>​In this case, the "root" is a temporary username, your's can be altered according to your username,​ <ol><li>Import All Databases:</li></ol><pre><code>mysql --user=username --password=password &lt; all_databases_backup.sql</code>​ </pre>&nbsp;&nbsp;&nbsp;&nbsp;or<pre>mysql -u root -p &lt; <code>all_databases_backup</code> .sql </pre>In this case, the "root" is a temporary username, your's can be altered according to your username This approach ensures that you can back up and restore all your MySQL databases in a streamlined and efficient manner

Learn how to efficiently back up and restore over 100 MySQL databases at once. This guide provides simple commands to export all databases simultaneously and import them back into your MySQL

Export and Import all MySQL databases at once using command

Full Stack Developement

<div>​In this guide, we will walk through the process of implementing&nbsp;NextAuth&nbsp;with&nbsp;Next.js 14&nbsp;and storing users in MongoDB in&nbsp;just 7 easy steps.</div><h2>1. Create a NextJS app</h2><pre>create-next-app@14</pre><div> </div><h2>2. Install NextAuth by running</h2><pre>npm install next-auth</pre><div>​</div><h2>3.&nbsp;Install bcrypt to hash passwords and Mongoose to store user data in MongoDB:​</h2><pre>npm install mongoose bcrypt</pre><div> </div><h2>4.&nbsp;Create a database connection:</h2><div>​Create a&nbsp;db.js file inside your&nbsp;libs&nbsp;folder and add the following code: </div><div> </div><pre>import mongoose from "mongoose"; const url = process.env?.MONGODB_URI; let connection; const startDbConnection = async () =&gt; { if (!connection) { connection = await mongoose.connect(url); console.log("Connected to Database"); } return connection; }; export default startDbConnection;</pre><div>​ </div><div>Create User Model </div><div> </div><pre>import { Model, models, model } from "mongoose"; import { Schema } from "mongoose"; import bcrypt from "bcrypt"; const userSchema = new Schema({ &nbsp;&nbsp;&nbsp;&nbsp;email: { type: String, required: true, unique: true }, &nbsp;&nbsp;&nbsp;&nbsp;name: { type: String, required: true, trim: true }, &nbsp;&nbsp;&nbsp;&nbsp;password: { type: String, required: true }, &nbsp;&nbsp;&nbsp;&nbsp;role: { type: String, default: "user" } }); // hash the password before saving userSchema.pre("save", async function (next) { &nbsp;&nbsp;&nbsp;&nbsp;if (!this.isModified("password")) return next(); &nbsp;&nbsp;&nbsp;&nbsp;try { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const salt = await bcrypt.genSalt(10); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.password = await bcrypt.hash(this.password, salt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next(); &nbsp;&nbsp;&nbsp;&nbsp;} catch (error) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;throw error; &nbsp;&nbsp;&nbsp;&nbsp;} }); // compare password method userSchema.methods.comparePassword = async function (password) { &nbsp;&nbsp;&nbsp;&nbsp;try { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return await bcrypt.compare(password, this.password); &nbsp;&nbsp;&nbsp;&nbsp;} catch (error) { &nbsp;&nbsp;&nbsp;&nbsp; throw error; &nbsp;&nbsp;&nbsp;&nbsp;} }; const UserModal = models.User || model("User", userSchema); export default UserModal; </pre><div> </div><div> </div>To authenticate users with&nbsp;NextAuth, you need to store user data in the database first. Since adding the signup route would make the blog longer, we will focus solely on NextAuth. Assuming you already have a simple signup API route set up where you store user data in the database. Let's proceed to the final steps. <h2>5.&nbsp;Create a route for API</h2>Now Navigate to the app folder and create an API route file in the directory/api/auth/[...nextauth]/route.js <h2>6.&nbsp;Write the below code for authentication with NextAuth.</h2>​<pre>import startDbConnection from "@/libs/db"; import UserModel from "@/models/userModel"; import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const authOptions = { &nbsp;&nbsp;session: { &nbsp;&nbsp;strategy: "jwt", }, providers: [ &nbsp;&nbsp;&nbsp;&nbsp;CredentialsProvider({ &nbsp;&nbsp;&nbsp;&nbsp;type: "credentials", &nbsp;&nbsp;&nbsp;&nbsp;credentials: {}, &nbsp;&nbsp;&nbsp;&nbsp;async authorize(credentials, req) { &nbsp;&nbsp;&nbsp;&nbsp; const { email, password } = credentials; &nbsp;&nbsp;&nbsp;&nbsp; await startDbConnection(); &nbsp;&nbsp;&nbsp;&nbsp; const user = await UserModel.findOne({ email }); &nbsp;&nbsp;&nbsp;&nbsp; if (!user) throw Error("Email or password incorrect!"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const passwordMatch = await user.comparePassword(password); &nbsp;&nbsp;&nbsp;&nbsp; if (!passwordMatch) throw Error("Email or password incorrect!"); &nbsp;&nbsp;&nbsp;&nbsp; return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: user.name, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email: user.name, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;role: user.role, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: user._id &nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;}), ], callbacks: { jwt(params) { if (params.user?.role) { &nbsp;&nbsp;&nbsp;&nbsp; params.token.role = params.user.role; &nbsp;&nbsp;&nbsp;&nbsp; params.token.id = params.user.id; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; return params.token; &nbsp;&nbsp;}, session({ session, token }) { &nbsp;&nbsp;&nbsp;&nbsp;if (session.user) { &nbsp;&nbsp;&nbsp;&nbsp; session.user.id = token.id; &nbsp;&nbsp;&nbsp;&nbsp; session.user.role = token.role; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return session; &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;}, }; const authHandler = NextAuth(authOptions); export { authHandler as GET, authHandler as POST }; </pre> <h2>7.&nbsp;Create a simple&nbsp;login&nbsp;component and render it inside the page.</h2>Ensure you have added the&nbsp;use client&nbsp;keyword at the top of your login component if you are using NextJS app router.Assuming you have set up the form and handle inputs, here is the function you need for submitting the form. <pre>import { signIn } from "next-auth/react"; import API from "@/utils/api"; const handleSubmit = async (e) =&gt; { &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;const { email, password } = userInfo; &nbsp;&nbsp;&nbsp;&nbsp;setLoading(true); &nbsp;&nbsp;&nbsp;&nbsp;try { &nbsp;&nbsp;&nbsp;&nbsp; const res = await signIn("credentials", { &nbsp;&nbsp;&nbsp;&nbsp; email, password, redirect: false, &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;setLoading(false); &nbsp;&nbsp;&nbsp;&nbsp;if (res?.error) return alert(res?.error); &nbsp;&nbsp;&nbsp;&nbsp;setUserInfo({ email: "", password: ""}); &nbsp;&nbsp;&nbsp;&nbsp;} catch (error) { &nbsp;&nbsp;&nbsp;&nbsp; console.log(error); &nbsp;&nbsp;&nbsp;&nbsp; setLoading(false); &nbsp;&nbsp;&nbsp;&nbsp;} };</pre>​ <div>​</div>That's it.By following these 7 steps, you can implement NextAuth with NextJS 14 efficiently.

In this guide, I demonstrate the integration of Next Auth with Next.js 14 and MongoDB. It's a step-by-step breakdown for developers to easily follow and implement.

Implementing NextAuth with NextJS and MongoDB: A Step-by-Step Guide

Wordpress Development

A Guide to Automatic Platform Optimization for WordPress (APO) with Cloudflare, for enhanced performance <h3>STEPS:</h3><ul><li>Activate Cloudflare:​Sign up for Cloudflare and add your WordPress website to your Cloudflare account. Follow the prompts to complete the setup process. </li></ul><ul><li>Enable APO:Once your website is added to Cloudflare, navigate to the Speed tab in your Cloudflare dashboard. Locate the Automatic Platform Optimization section and click on the WordPress icon. Toggle the switch to enable APO for your WordPress site. </li></ul><ul><li>Verify Configuration:After enabling APO, it's essential to verify that it's working correctly. Visit your WordPress site and inspect the response headers to ensure the "cf-edge-cache" header is present, indicating that Cloudflare is caching your WordPress content.</li></ul><h3> </h3><h3>Plan:</h3>Cloudflare offers APO as part of its Pro and Business plans. While the Pro plan provides basic APO functionality, including edge caching and HTML optimization, the Business plan offers additional features such as Brotli compression and WebP image optimization. Choose the plan that best fits your website's needs and budget to unlock the full potential of APO for WordPress. <blockquote>You still need more help?&nbsp;</blockquote> <h3>How Deknows Can Help You Set It?</h3>At Deknows, we understand the importance of optimizing your WordPress website for speed and performance. Our team of experienced developers can assist you in setting up Automatic Platform Optimization (APO) with Cloudflare, ensuring that your site delivers blazing-fast loading times and a seamless user experience. From initial configuration to ongoing maintenance, Deknows is here to support you every step of the way, so you can focus on growing your online presence without worrying about technical complexities. By implementing APO with Cloudflare, you can take your WordPress website to the next level, delivering lightning-fast performance and delighting your visitors with a smoother browsing experience. Don't let slow loading times back your website, <a target="_blank" href="mailto:touch@deknows.com">nudge us today</a> – unlock its full potential with APO today!<div> </div><div> </div><div> </div>

Skyrocket your Wordpress website performance with Cloudflare APO

Automatic Platform Optimization for WordPress

Front-end Development

<div>Next.js 13 introduces improvements in handling dynamic routes and parameters, making it even easier to build dynamic and personalized experiences for our users. </div><h2>Params and Dynamic Pages </h2>Here is how we can pass a parameter to the dynamic page path in the Link Component:<pre>&lt;Link href={`/path/${id}`}&gt;&lt;/Link&gt; </pre>​ Now, we have to create a dynamic route and access the id there. Simply go to the app directory and create a page with the syntax [id]/page.jsInside the page, you can now access that id with the useParams hook:<pre>const params = useParams(); const { id } = params; </pre>​Now you can use this id to fetch data from the server or perform any desired actions with it. The page is now dynamic. <h2>​Query a Parameter​ </h2>​We can query a parameter to a specific page that will be shown in the URL and accessed on that page. Here is how we can do this:<pre>&lt;Link href={`/path?id=${id}`}&gt;&lt;/Link&gt;</pre><h2>​</h2><h2>Pro Tip​</h2>The hooks are only usable in the client component. So, what if you want to access these parameters in a server-side component? For that, Nextjs gives us a very easy way to do it.In the page component props, we have searchParams and params, then we can use these props to access parameters and query parameters: <pre>const Page = async ({ params: { id }, searchParams }) =&gt; { return ( // JSX ); }</pre>

In this blog, I provide a guide on handling parameters and queries in Nextjs app Router. Nextjs 13 has enhanced dynamic routing and parameter handling to offer more personalized user experiences.

Handling Params and Queries in Next.js 14

Drupal Development

Drupal typically follows a modular and organized file structure. Here's a basic guide to navigating through Drupal's file structure as a part of our Drupal for noobs training series. <h3>Navigating through:</h3><ol><li>Root Directory:<ul><li>The root directory will contain essential files like <code>index.php</code>, <code>.htaccess</code>, and the <code>web</code> directory, which is the main web root. </li></ul></li><li>Web Directory:<ul><li>The <code>web</code> directory is the web root and contains the main Drupal files. It includes the <code>core</code>, <code>modules</code>, <code>themes</code>, <code>profiles</code>, and <code>sites</code> directories. </li></ul></li><li>Core:<ul><li>The <code>web/core</code> directory contains the Drupal core files. You generally don't need to modify anything here. </li></ul></li><li>Modules:<ul><li>The <code>web/modules</code> directory is where contributed modules are installed. Custom modules are often placed in the <code>web/modules/custom</code> directory as a part of standard practice. </li></ul></li><li>Themes:<ul><li>The <code>web/themes</code> directory contains contributed themes. Custom themes are often placed in the <code>web/themes/custom</code> directory as a part of standard practice. </li></ul></li><li>Profiles:<ul><li>The <code>web/profiles</code> directory is used for installation profiles. This is more relevant for developers creating distributions or specific site configurations. </li></ul></li><li>Sites:<ul><li>The <code>web/sites</code> directory contains configuration settings, site-specific modules, themes, and files. It has subdirectories like <code>default</code> and <code>example.com</code> (where <code>example.com</code> is your site's domain). Configuration files (like <code>settings.php</code>) are often placed in the <code>web/sites/default</code> directory. </li></ul></li><li>Settings.php:<ul><li>Important configuration settings are stored in <code>web/sites/default/settings.php</code>. It's crucial for database configuration, module and theme settings, and other site-specific configurations. </li></ul></li><li>Files:<ul><li>The <code>web/sites/default/files</code> directory is where Drupal stores uploaded files, images, and other media.</li></ul></li><li>Vendor:<ul><li>The <code>vendor</code> directory (outside the <code>web</code> directory) is where Composer installs external libraries and dependencies. </li></ul></li><li>Temporary Files:<ul><li>Temporary files, like the Twig cache, may be stored in <code>web/sites/default/files/php</code> or a similar location.</li></ul></li></ol>​Video Guide: (coming soon) <div>In next series, we'll be covering a standard .gitignore file for Drupal projects.</div>​

Drupal typically follows a modular and organized file structure. Here's a basic guide to navigating through Drupal's file structure as a part of our Drupal for noobs training series.

Understanding Drupal File Structure - DFN #2

As a part of Drupal for noobs training with the aim to cover the essentials of Drupal 10<h3>Step-by-Step Installation Process for Drupal 10:</h3><ol><li>Download Drupal:<ul><li>Begin by downloading the latest version of Drupal from the official website (<a target="_new" href="https://www.drupal.org">https://www.drupal.org</a>).</li><li>In this exercise we'll be using the composer approach, so here's the command</li></ul></li></ol><pre><code>composer create-project drupal/recommended-project drupal-for-noobs</code></pre><ol><li>Prepare Hosting Environment:<ul><li>Ensure that your hosting environment meets the minimum requirements for running Drupal.</li><li>Verify that you have a web server (e.g., Apache, Nginx), a database server (e.g., MySQL, PostgreSQL), and PHP installed. </li></ul></li><li>Create a Database:<ul><li>Set up a new database for your Drupal installation. Note down the database name, username, and password, as you'll need these during the installation. </li></ul></li><li>Configure Settings File:<ul><li>Locate the "settings.php" file in the "sites/default" folder and make it writable.<ul><li>Copy the "default.settings.php" file and rename it to "settings.php." (Just in-case if isn't possible automatically due to your permissions. </li></ul></li></ul></li><li>Start Installation:<ul><li>Open a web browser and navigate to your Drupal site's URL. The installation process will start automatically. </li></ul></li><li>Select Installation Profile:<ul><li>Choose the installation profile based on your needs. The standard profile is suitable for most websites. </li></ul></li><li>Database Configuration:<ul><li>Enter the database details you prepared earlier, including the database name, username, password, and database host. </li></ul></li><li>Configure Site Information:<ul><li>Set up basic site information, including the site name, email address, and default country. </li></ul></li><li>Configure Administrator Account:<ul><li>Create the administrator account by entering a username, email, and strong password. </li></ul></li><li>Review and Install:<ul><li>Review the settings and click the "Install" button to initiate the installation process. </li></ul></li><li>Completion:<ul><li>Once the installation is complete, you'll receive a confirmation message. Click the link to visit your newly installed Drupal site.&nbsp;🎉</li></ul></li></ol> <h3>Video Guide:</h3><div class="se-component se-video-container __se__float-none"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/IQa1CHe9j_4?&amp;ab_channel=DeKnows" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" data-file-name="IQa1CHe9j_4?&amp;ab_channel=DeKnows" data-file-size="0" data-origin="100%,56.25%" style="width: 100%; height: 100%;"></iframe></figure></div>

As a part of Drupal for noobs training to cover the essentials of Drupal 10, in this guide, I'll be un-leasing the installation process via composer

Installing Drupal 10 via composer - DFN #1

Drupal 10 provides a straightforward way to enable development mode, allowing easier debugging and theming adjustments. Here are some easy go-to guide to activate development mode: <div> </div><h3>STEPS:</h3><div> </div><ol><li>Navigate to Configuration: &nbsp; &nbsp; &nbsp;- Access your Drupal installation and navigate to the sites/default directory. </li><li>Copy default.services.yml to services.yml: &nbsp; &nbsp; &nbsp;- Locate the default.services.yml file in the sites/default directory. &nbsp; &nbsp; &nbsp;- Create a copy of this file and name it services.yml. </li><li>Open services.yml: &nbsp; &nbsp; -&nbsp;Open the newly created services.yml file using a text editor. </li><li>Locate twig.config: Parameter: &nbsp; &nbsp;- Search for the parameters section in the file. &nbsp; &nbsp;-&nbsp;Look for the twig.config parameter </li><li>Enable Development Mode for Twig: &nbsp; &nbsp;- Under twig.config, find the line 'debug' =&gt; false, (or similar). &nbsp; &nbsp;-&nbsp;Change it to 'debug' =&gt; true</li></ol><div> </div><h3>Video Guide:</h3><div class="se-component se-video-container __se__float-none"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/YhKKFHPtlwk" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" data-file-name="YhKKFHPtlwk" data-file-size="0" data-origin="100%,56.25%" style="width: 100%; height: 100%;"></iframe></figure></div><div> That's it</div>

Explaining straightforward way to enable development mode, allowing easier debugging and theming adjustments.

Enabling Development Mode in Drupal 10

Back-end Development

Are you encountering the frustrating “err_too_many_redirects” error after connecting your domain on Vercel through Cloudflare? It’s a common issue caused by a clash in how the two services handle secure connections but fret not — here’s a simple solution<h3> Why Does This Error Occur? </h3><div> </div>Cloudflare, acting as a middleman, wants to ensure secure connections (HTTPS) between users and your website. However, when it communicates with your Vercel deployment, it sometimes uses HTTP rather than HTTPS. Vercel, quite rightly, upgrades any HTTP requests to the secure HTTPS. Now, the trouble starts: Cloudflare receives the HTTPS request, forwards it to the user, but the user is already on HTTPS, which causes the 308 redirect and hence the issue:<h3> Solution:</h3><div> </div>Cloudflare Settings Adjustment: Go to your Cloudflare SSL/TLS settings and switch from “Flexible” to “Full (strict)”. This change ensures Cloudflare communicates securely with Vercel using HTTPS throughout.

err_too_many_redirects error after connecting your domain on Vercel through Cloudflare?

err_too_many_redirects

Git’s clean command is a way to ensure a tidy working directory by removing untracked files. The -fd flags specifically remove untracked directories along with files, even those ignored by Git. <h3>​Brief:​</h3>git clean -fd - This command removes untracked files and directories permanently. The -f flag stands for force, ensuring the removal, and -d stands for directories, enabling the removal of untracked directories. <h3>Real-time example with a simple scenario: </h3>Let’s say you’ve been experimenting with some new features in your project and created a bunch of test files and directories. To clean up and remove these untracked files and directories, you’d use: <pre>git clean -fd</pre><div> </div>Hope I have explained in the simplest yet easy way, I look forward to contributing more in this domain!Cheers<div> </div> ​

Git clean command is a way to ensure a tidy working directory by removing untracked files. The -fd flags specifically remove untracked directories

Introduction to git clean fd

In Wordpress Gutenberg editor, when we set a path, it automatically fetches the base_url and render it as is! however, we usually require relative path: To achieve that, simply add the following code in your theme (function.php) <pre>​add_filter( 'content_save_pre', function ( $content ) { ​$base_url = home_url(); // Get the base URL of your WordPress site ​$current_url = get_permalink(); // Get the current URL of the post or page ​// Replace absolute links with relative links based on the current domain ​$content = str_replace( $base_url, '', $content ); ​$content = str_replace( $current_url, '', $content ); ​return$content; ​} );​ </pre> Save the functions.php file, and see the magic happen. Now, your web addresses will be simpler and easier to work with in WordPress. <div> </div>Remember, like any magic, use this wisely to keep your website in balance. Enjoy coding!<div> </div>

In Wordpress Gutenberg editor, when we set a path, it automatically fetches the base_url and render it as is! however, we usually require relative path:

Absolute to Relative path in Wordpress Gutenberg

Welcome to our Blog - a curated space where technology meets sustainability, and innovation intertwines with eco-consciousness. Dive into a world where software prowess converges with a commitment

Sustainable websites

Featured

Webinar Series: ReactJS next Virtual Event 20th March 2024