DEV Community: Tatyana Effa

VUE ROUTER: EASY STEPS TO ADDING ROUTING TO YOUR VUE APPLICATION

Tatyana Effa — Thu, 15 Jun 2023 22:24:12 +0000

Adding routing to your Vue application can be a bit of a hassle, particularly if you are new to Vue.js. I will be sharing a straightforward method to implement routing in this blog post using Vue CLI

Setting Up:

The easiest way to get started with setting up routing in your Vue application is by creating a new project using Vue CLI and have CLI set up routing for you.

To get started, open your terminal or command prompt and follow these steps:

Navigate to the directory where you want to create your new project. In this example, we will create the project in the Documents folder. You can change the directory path according to your preference.

cd Documents

Once you have done this, use the following command to create a new Vue project named "my-router" (you can replace "my-router" with your preferred project name):

vue create my-router

Vue CLI will prompt you to select a preset for your project. Scroll down to "manually select features" and press Enter.

By choosing the "Manually select features" option, you'll have more control over your Vue project. This allows you to handpick the specific features and plugins you want to include in your project, including routing.

After selecting the "Manually select features" option, a prompt will appear with a list of features to choose from. Scroll down using the arrow keys until you reach the "Router" option. Press the space bar to select it, indicated by a filled checkbox.

Next, scroll down to the "Linter" option and press the space bar to unselect it, indicated by an empty checkbox.

Once you have made these selections, press Enter to proceed.

The next prompt will ask you to choose a version. Select the latest version by scrolling down and highlighting it, then press Enter.

Following that, Vue CLI will ask if you want to use history mode for the router. Reply with "Y" to choose yes.

Next, you will be prompted to select the configuration file format. Select the default config file by pressing Enter.

next select no "N' to saving it as a preset.

Press enter and you will generate your vue application

When you open your newly generated Vue application in VS Code, you will find that the router has been set up for you. You can now personalize it to meet your specific needs and requirements.

If you found this blog post helpful, I would love to hear from you! Drop a comment below! Share your thoughts, feedback, or any additional tips and tricks you have discovered along the way.

Happy coding!

Ultimate Guide to Responsive WordPress Websites with Elementor: Creating Unique Laptop and Mobile Homepages

Tatyana Effa — Wed, 31 May 2023 19:37:38 +0000

Website responsiveness has become an important factor for success. It's crucial to ensure your website delivers an exceptional experience across all devices. In this tutorial, I will explore the world of responsive design using the powerful Elementor page builder for WordPress.

To provide a practical example, I will guide you through the process of redesigning the laptop version of the All Things Savvy website (https://www.atsavvy.com). While the mobile version required minimal adjustments, our main focus will be on selecting a different laptop version that enhances the overall user experience.

By the end of this tutorial, you'll be equipped with the knowledge and skills to plan and create unique laptop and mobile homepages that adapt flawlessly to different screen sizes and devices. Let's dive in and unlock the potential of responsive design with Elementor!

Planning Your Laptop and Mobile Homepages:

Before delving into the technical aspects, it's essential to approach the planning of your laptop and mobile homepages thoughtfully. Take the time to decide on the overall design you want to implement, carefully curate images, and consider the written content to shape the desired look and feel. To facilitate my design process, I personally found Canva Pro to be an invaluable tool. With Canva Pro, I could easily create and customise images that perfectly complement both the laptop and mobile versions of the website.

Getting Started with Elementor:

To begin, log in to the backend of your WordPress website by visiting "https://yoursite.com/wp-admin". Once logged in, it's essential to ensure that you have the Elementor plugin installed. If you don't have it yet, follow these steps to install it seamlessly.

Install the Plugin:

Scroll down the dashboard menu on the left-hand side.
Hover your cursor over "Plugins". A small menu will pop up.
Click on "Add New Plugin".
You'll be redirected to a section where you can add a new plugin.
In the search bar, type "Elementor" and click on the "Install" button next to the Elementor Website Builder plugin.

Once the installation is complete, you're ready to start creating.

Designing the Homepage:

Once you have successfully installed the Elementor plugin, it's time to dive into designing your homepage.

To begin, navigate to your homepage by following these steps:

Locate and click on the "Pages" option in the dashboard menu.
In the small menu that appears, select the "All Pages" option and click on it.

You will be directed to a page displaying all the pages on your website, including your homepage. From here, you can proceed with editing and customising your homepage.

Locate the homepage, and then click on "Edit with Elementor" to enter the page editing interface.

Responsive Mode: Enabling Device-Specific Editing

To effectively customize your website for different device sizes, it's crucial to enable responsive mode in Elementor. This feature allows you to toggle between various device views and visualize how your edits will appear on different screens. To access responsive mode, follow these steps:

Locate the Responsive Mode Button:

Look for the responsive mode button in the lower left corner of your Elementor editor's menu.
Click on the button, and a top bar will appear, displaying different device options.

Select the Desired Device:

In the top bar, you'll find a list of device icons representing different screen sizes, such as desktop, tablet, and mobile.
Click on the device icon you want to edit for, and the editor will switch to the corresponding view.

Editing Sections:

Website sections play a crucial role in organizing and structuring the layout of a webpage. Each section serves a specific purpose and contains related content. Common examples of website sections include the Header, Hero Section, About Us Section, and Footer.

I will be changing most of the sections of the laptop view.

To begin editing the sections, follow these steps:

Add a New Section:

Click on the "Add" button located at the top of your existing sections.

If your page doesn't have any content yet, you'll see a bar in the middle of the page with options to add a new section.

Drag and Drop:

To customize your sections, Elementor provides a convenient drag-and-drop functionality. This allows you to effortlessly position and arrange various widgets within your added sections.

Here's how you can make use of the drag-and-drop feature:

Select a Widget: Open the Elementor menu and browse through the available widgets.

For example, let's say you want to add an image widget. Simply locate the image widget in the Elementor menu.

Drag and Drop the Widget: Click and hold the widget you want to add (in this case, the image widget). While still holding the mouse button, drag the widget to the desired section where you want to place it.

Release the mouse button to drop the widget into the section.

Edit the Image: After dropping the image widget into the section, the image edit menu will appear.

You can now proceed to add your desired image to the widget.
Choose an image from your media library by selecting the appropriate option.

Alternatively, if you want to upload a new image, click on the "Upload Files" button and follow the prompts to upload the image.

Responsive:

Congratulations on your progress so far! You have successfully added a new section, dragged and dropped an image widget, and uploaded an image. Now, it's time to adjust the visibility of your new section based on different devices. Since this section was designed for the laptop view, we will configure the settings to show it only on laptops, hiding it on mobile and tablet devices.

To accomplish this, follow these steps:

Make sure your desired section is still open in the Elementor editor.

Access Responsive Settings:

At the top of the Elementor menu, you will find three edit options: Content, Style, and Advanced.

Click on "Advanced" to access advanced settings.
Scroll down within the Advanced settings until you find the "Responsive" section.

Click on it to expand the options.

Configure Visibility:

Within the Responsive settings, you will see three options: "Hide on Desktop," "Hide on Tablet," and "Hide on Mobile."
Select your preferred options based on the desired visibility for your section. In this case, we want to hide the section on tablet and mobile devices.

Remember, if you encounter empty sections that appear after hiding certain sections, it's essential not to delete them. These empty-looking sections are placeholders and removing them will affect the overall structure of your website.

By following these steps, you can adjust the visibility of your sections to ensure they appear only on the appropriate devices. In this case, the sections designed for mobile view will be hidden when viewed on a laptop and vice versa. Repeat these steps for other sections as needed, customizing the visibility based on your design requirements.

Conclusion

In this blog post, we explored the importance of responsive design and how to achieve it using Elementor. We discussed the benefits of having a responsive WordPress website and walked through the process of designing laptop and mobile homepages. With Elementor's drag-and-drop functionality and responsive settings, you can create stunning and adaptable websites. By optimizing performance and testing your design, you ensure a seamless user experience. Embrace the power of Elementor and craft websites that shine on any device.

HOW TO SETUP A REACT APPLICATION WITH ROUTER, NESTED ROUTES, ERROR HANDLING, AND CONTEXT

Tatyana Effa — Thu, 13 Apr 2023 23:01:53 +0000

In this article I will show you how to set up a simple react application with the following implemented: React-router, Nested routes, 404 page, and Error boundary. Fake userAuthContext using the context API to always carry out a fake authentication. Navigation menu that will show on each page.

Link to this application here

Pre-requisites
Getting Started With Your App
What Is React?
Setting Up React
Components
React-Router
404 Page & Error Boundary
404 Page
Error Boundary 10.Fake UserAuthContext Using Context Api 11.Conclusion

Pre-requisites

To understand this blog post, you need to have basic knowledge of the following:
HTML
CSS
JavaScript
React Js

APPLICATIONS USED:

Vscode
Github
Netlify
N/B: I used a MacBook to setup this application. Downloading dependencies on windows may be a bit different.

Getting Started With Your App

To get started you need to set up and download all dependencies.

Node JS – nodejs.org
VS Code Editor – code.visualstudio.com/download
Prettier Code Formatter Extension in VS Code
React
React Router

When Node Js is installed, it comes with a package manager called npm, which allows you access to bits of code that other developers have already written. To check if both Node.js and npm were installed successfully, open up your terminal and simply type the following code below:

node -v
npm -v

If your code runs and shows you the version of both npm and Node.js, it means installation was successful.

What Is React?

React is an open source JavaScript front-end framework . It is used for building fast and interactive user interfaces for the web, as well as mobile apps.

Setting Up React

You have all the dependencies installed, open your terminal and follow the steps below:
Change directory into the folder you want your project to be in. I used a Documents folder

cd Documents

Create a new directory for your app in your Documents folder

mkdir ReactApp

Change directory to the new folder you created with the code above

cd ReactApp

Create your react app with the code below, give it your own app name. I used “myreactapp”

npx create-react-app myreactapp

Now you have successfully created a react application. Follow this next step

cd myreactapp

npm start

This is a shortcode that opens your new application in Vs Code automatically.

code.

Components

Go to your src folder and create a components folder. Create all the components for your application with the necessary linking.

React-Router

To install, go to your terminal and type the code below:

npm install react-router-dom@6

Our app has 4 pages we would be routing: Home page, About Page, Login Page and an Error Page. Create Components for each page.
Open you App.js file in VS Code and import BrowserRouter, Route and Routes

import { BrowserRouter, Route, Routes } from "react-router-dom";

Route all the components that require routing.

function App() {
  return (
    <section>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />}  />  
            <Route path="/Login" element={<Login />} />
            <Route path="/About" element={<About />} />
            <Route path="/Error" element={<Error />} />
            <Route path="*" element={<PageNotFound />}  />  
          </Routes>
        </BrowserRouter>
    </section>
  );
}

404 Page & Error Boundary

404 Page

A 404 page is known as an “error page” or “page not found” page. It is usually indicative of a page that doesn’t exist. It is important to create a 404 page on your website with the necessary information and link to re-direct visitors, so they don’t lose interest.
Start by creating a “PageNotFound.js” component, route it in your app.js, as shown in the code above.

import React from "react";
import sad from ".//image/sad.PNG";
import { Link } from "react-router-dom";

export default function PageNotFound() {
  return (
    <section className="notfound-container">
      <div className="content-container">
        <img src={sad} alt="sad" />
        <h1>404 Error</h1>
        <p>Page Not Found</p>
        <p>
          The page you are looking for doesn't exist or an error occured. 
          <p><Link to="/">Go back to home page</Link></p>
        </p>
      </div>
    </section>
  );
}

Error Boundary

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
      return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {}

    render() {
      if (this.state.hasError) {
        return <h1>Something went wrong.<Link to='/'>Go back to home page</Link></h1>;
      }

      return this.props.children;
    }
  }

Wrap your app in the ErrorBoundary tag.

function App() {
  return (
    <section>
      <ErrorBoundary>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Login" element={<Login />} />
            <Route path="/About" element={<About />} />
            <Route path="/Error" element={<Error />} />
            <Route path="*" element={<PageNotFound />} />
          </Routes>
        </BrowserRouter>
      </ErrorBoundary>
    </section>
  );
}

Fake UserAuthContext Using Context Api

In this section we will be creating a login page that provides the implementation for authenticating users.
Create a AuthUser.js component and implement the following code.

import { createContext, useState, useContext} from "react";

const userAuthContext = createContext({});

export const AuthUser = ({ children }) => {
  const [auth, setAuth] = useState({});

  return (
    <userAuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </userAuthContext.Provider>
  );
};

export default userAuthContext;

export const useAuth = () => {
    return useContext(userAuthContext)
  }

In your Login.js component, create a login form. UseState is used to create the state of the page. After login, the user gets to see their login details and a link that redirects you to the homepage.

import React from "react";
import { useState, useContext } from "react";
import { Link } from "react-router-dom";
import userAuthContext from "./Context/AuthUser";
import Navigation from "./Navigation";

const Login = () => {
  // eslint-disable-next-line no-unused-vars
  const { setAuth } = useContext(userAuthContext);
  const [user, setUser] = useState("");
  const [pwd, setPwd] = useState("");
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    setSuccess(true);
  };

  return (
    <>
      <div>
        <header>
          <Navigation />
        </header>
      </div>
      {success ? (
        <section>
          <h3>
            You are logged in as, <span>{user}</span>.
          </h3>
          <br />
          <p>
            <Link className="link" to="/">
              Go to home page
            </Link>
          </p>
        </section>
      ) : (
        <div className="main">
          <div className="sub-main">
            <div className="imgs">
              <div className="container-image">
                <img src={loginimg} alt="loginimg" className="profile" />
              </div>
            </div>

            <div className="logginn-container">
            <h1>Login Page</h1>
            <form onSubmit={handleSubmit}>
              <div>
                <input
                  type="text"
                  id="username"
                  placeholder="Enter Username"
                  className="name"
                  autoComplete="off"
                  onChange={(e) => setUser(e.target.value)}
                  value={user}
                  required
                />
              </div>

              <div>
                <input
                  type="password"
                  id="password"
                  placeholder="Enter Password"
                  className="name"
                  onChange={(e) => setPwd(e.target.value)}
                  value={pwd}
                  required
                />
              </div>
              <div className="button-container">
                <button className="login-button">Log In</button>
              </div>
            </form>
          </div>

          </div>

        </div>
      )}
    </>
  );
};
export default Login;

Conclusion

Great job on getting to the end of this blog post. You can now create a simple react application that implements React-router, Nested routes, 404 page, and Error boundary etc. With practice you would be able to do it yourself without any help.
To view a life demo of this project, click here, you can also find the source code on Github.
Share you thoughts in the comments.

DEV Community: Tatyana Effa

VUE ROUTER: EASY STEPS TO ADDING ROUTING TO YOUR VUE APPLICATION

Setting Up:

Ultimate Guide to Responsive WordPress Websites with Elementor: Creating Unique Laptop and Mobile Homepages

Planning Your Laptop and Mobile Homepages:

Getting Started with Elementor:

Install the Plugin:

Designing the Homepage:

Responsive Mode: Enabling Device-Specific Editing

Editing Sections:

Responsive:

Conclusion

HOW TO SETUP A REACT APPLICATION WITH ROUTER, NESTED ROUTES, ERROR HANDLING, AND CONTEXT

TABLE OF CONTENTS

Pre-requisites

APPLICATIONS USED:

Getting Started With Your App

What Is React?

Setting Up React

React-Router

404 Page & Error Boundary

404 Page

Error Boundary

Fake UserAuthContext Using Context Api

Conclusion