DEV Community: Kingsley Ubah

How to Scrape Amazon Product Reviews Behind a Login

Kingsley Ubah — Fri, 10 Nov 2023 11:39:59 +0000

Amazon is arguably the largest e-commerce website in the world. With billions of product pages and a vast database of product reviews, it can be a valuable data source for e-commerce businesses or market researchers looking to make informed purchase decisions.

Scraping Amazon product reviews can give you valuable insights into product quality, customer satisfaction, and market trends. However, the product reviews scrapping process isn’t always straightforward, especially when login is required.

This guide will walk you through the steps for scrapping Amazon product reviews behind a login. You’ll learn to log in to Amazon, access the product page, retrieve its HTML source code, parse the review data, and export the reviews to CSV.

Are you feeling excited? Let’s begin!

Step 1: Prerequisites and Project Setup

To run the code samples in this tutorial, install Python on your local development machine (Python v3.5 or later is okay). If you don’t have it, visit the official Python website and install it.

After installing Python, install Selenium and the undetected_chromedriver library. You’ll use Selenium to access the Amazon page behind the login and retrieve its complete HTML code. The undetected_chromedriver library helps you bypass any bot detection mechanism by Amazon.

You need to install both of these tools in a clean, isolated environment. That entails setting up a virtual environment locally and installing the dependencies there. By doing so, you’ll prevent future conflicts among the dependencies in your Python projects. Let’s do that.

Open a terminal and create a new folder. Name the folder anything you want (for this tutorial, it’s product_reviews):

mkdir product_reviews

Change your current directory to the newly created folder:

cd product_reviews

Awesome! Now that you’re inside product_reviews, execute this command to create a virtual environment:

# Create a virtual environment named 'env'
python -m venv env

Replace ‘env’ with your preferred virtual environment name.

If you’re on Windows, execute this to activate the virtual environment:

env\Scripts\activate

If you’re on MacOS or Linux, use this instead:

source env/bin/activate

On your terminal prompt, you should see an indication that the virtual environment is active.

Now install the dependencies with the following command:

pip install selenium undetected-chromedriver

Below is a screenshot of the process:

Now open the folder in any code editor you prefer (this tutorial uses Visual Studio Code). Your directory structure should look like this:

NOTE: You’ll also need an Amazon account to proceed with the rest of this tutorial. If you don’t have an Amazon account, go to their sign-up page and register for one.

Step 2: Access the Public Page

The image below is that of the product page you’ll be scrapping. From that page, you’ll extract the author's name, review title, and date.

Here's the product URL: https://www.amazon.com/ENHANCE-Headphone-Customizable-Lighting-Flexible/dp/B07DR59JLP/

Create a new file named script.py in the root folder of your project. The code snippet below shows how to create a Chrome WebDriver instance, configure it, fetch the HTML code from the product URL, and output the HTML on the terminal. The code goes inside script.py:

import undetected_chromedriver as uc
import time

# Configure Chrome options and specify not to run it headless
chromeOptions = uc.ChromeOptions()
chromeOptions.headless = False

# Create an instance of the Chrome WebDriver and enable subprocess support
driver = uc.Chrome(use_subprocess=True, options=chromeOptions)

# The URL of the Amazon product page
product_url = "https://www.amazon.com/ENHANCE-Headphone-Customizable-Lighting-Flexible/dp/B07DR59JLP/"

driver.get(product_url)

time.sleep(10) # Wait for a few seconds to ensure the page loads completely

# Extract the full HTML of the page and store it in the 'page_html' variable
page_html = driver.page_source

print(page_html)

driver.close() # Close the WebDriver instance

Run the script by executing the Python file on your command line (inside your active virtual environment):

python script.py

NOTE: Ensure that your Google Chrome browser is up-to-date before running the above script. Otherwise, you might get an error.

You should see the HTML markup of the Amazon page outputted in the terminal.

Though scraping public web pages is relatively straightforward, some websites may restrict you from accessing certain content if you don’t log in. In the next section, you’ll get a walk-through of how to scrape pages behind a login using Selenium.

Step 3: Scrape Behind the Login

To sign into Amazon, you’re to go through two pages: the email and password pages.

With Selenium, you can sign into Amazon programmatically, just as you would log in if you had used the web interface. The process entails getting the login page, targeting the IDs for the email and password elements, inputting data in said elements, and then clicking the submit button.

To kick-start the process, you’ll need to get your Amazon login URL from your browser. First, you must sign out of your Amazon account. Then, go to amazon.com and click the “Sign in” button. Once you’re on the “log in” page, copy the URL from the address bar. You’ll need it in the code.

To get the ID of the HTML elements, right-click on the form on the login page, click Inspect, and then the Elements tab. Expand the HTML markup until you can see the ID of the element containing the form and button.

The code snippet below shows how to log in and access the elements. It uses Selenium to access the form elements inside which you’re to input your email and password. Afterward, it submits your login details by clicking the submit button. Finally, it retrieves the HTML code and outputs it on the terminal:

import undetected_chromedriver as uc
import time
from selenium.webdriver.common.by import By

chromeOptions = uc.ChromeOptions()
chromeOptions.headless = False

driver = uc.Chrome(use_subprocess=True, options=chromeOptions)


# Replace the Amazon link below with your login URL
driver.get("https://www.amazon.com/ap/signin?openid.pape.max_auth_age=0&openid.return_to=xxxxxxxxxxxx")

time.sleep(5) # Wait for a few seconds to ensure the page loads completely

email = driver.find_element(By.ID, "ap_email")

# Replace the xxx with your Amazon email
email.send_keys("xxxxxxxxx")

driver.find_element(By.ID, "continue").click()

time.sleep(5)

password = driver.find_element(By.ID, "ap_password")


# Replace the xxx with your Amazon password
password.send_keys("xxxxxxxx")

driver.find_element(By.ID, "signInSubmit").click()

time.sleep(10)

# Extract the full HTML of the page and store it in the 'page_html' variable
page_html = driver.page_source

print(page_html)

driver.close() # Close the WebDriver instance

The above code gives the same output as step 2. But this time, we’re logged into Amazon.

Note: Before pushing your code to a public repository, secure your login details.

Parse Review Data

If you only need a subset of the retrieved data, parsing it will allow you to extract the required information. The parsing process also involves inspecting the HTML to see the class or ID of the element containing the detail you want to parse.

For this tutorial, you’ll be extracting the author names, review texts, and review dates. You’ll locate these elements using their respective CSS selectors. The image below shows a review author’s name and its corresponding class ‘a-profile-name’:

You’ll do the same to get the class names for the review text and date.

Once you have the class names of those three elements, you can access their text content in your Python code and print them to the console. The code snippet below does that:

import undetected_chromedriver as uc
import time
from selenium.webdriver.common.by import By

chromeOptions = uc.ChromeOptions()
chromeOptions.headless = False

driver = uc.Chrome(use_subprocess=True, options=chromeOptions)

# Replace the Amazon link below with your login URL
driver.get("https://www.amazon.com/ap/signin?openid.pape.max_auth_age=0&openid.return_to=xxxxxxxxxxxx")

time.sleep(5) # Wait for a few seconds to ensure the page loads completely

email = driver.find_element(By.ID, "ap_email")

# Replace the xxx with your Amazon email
email.send_keys("xxxxxxxxx")

driver.find_element(By.ID, "continue").click()

time.sleep(5)

password = driver.find_element(By.ID, "ap_password")


# Replace the xxx with your Amazon password
password.send_keys("xxxxxxxx")

driver.find_element(By.ID, "signInSubmit").click()

time.sleep(10)

# Navigate to the Amazon product page
product_url = "https://www.amazon.com/ENHANCE-Headphone-Customizable-Lighting-Flexible/dp/B07DR59JLP/"

driver.get(product_url)

time.sleep(10) # Wait for a few seconds to ensure the page loads completely

# Locate and extract review elements
review_elements = driver.find_elements(By.CSS_SELECTOR, '.a-section.review')

for review_element in review_elements:

    # Extract the author name
    author_name = review_element.find_element(By.CLASS_NAME, 'a-profile-name').text

    # Extract review text
    review_text = review_element.find_element(By.CLASS_NAME, 'review-text').text

    # Extract review date
    review_date = review_element.find_element(By.CLASS_NAME, 'review-date').text

    # Print the extracted information
    print("Author: ", author_name)
    print("Review: ", review_text)
    print("Review Date: ", review_date)
    print("\n")

driver.close()

Execute the code by running the Python file:

python script.py

On the console, you should find only three sets of information for each review: the author's name, review text, and date. Your output should look like the following:

Now that you’ve extracted the information you need, the next step is to present this data in a format that’s easy to share and analyze. Your best bet is the CSV (Comma-Separated Values) format, which stores data in a tabular form. The section below explores how to export reviews to a CSV file.

Step 4: Export Reviews to CSV

Python’s built-in csv module allows you to work with CSV files in your Python script. After importing the module, you’re to open a CSV file and write a row to it consisting of “Author”, “Review” and “Review Date”. Then, for each review retrieved from the product page, add the author name, review text, and date as a new row.

The code snippet below shows how to do this:

import undetected_chromedriver as uc
import time
import csv
from selenium.webdriver.common.by import By

chromeOptions = uc.ChromeOptions()
chromeOptions.headless = False

driver = uc.Chrome(use_subprocess=True, options=chromeOptions)


# Replace the Amazon link below with your login URL
driver.get("https://www.amazon.com/ap/signin?openid.pape.max_auth_age=0&openid.return_to=xxxxxxxxxxxx")

time.sleep(5) # Wait for a few seconds to ensure the page loads completely

email = driver.find_element(By.ID, "ap_email")

# Replace the xxx with your Amazon email
email.send_keys("xxxxxxxxx")

driver.find_element(By.ID, "continue").click()

time.sleep(5)

password = driver.find_element(By.ID, "ap_password")


# Replace the xxx with your Amazon password
password.send_keys("xxxxxxxx")

driver.find_element(By.ID, "signInSubmit").click()

time.sleep(10)

# Navigate to the Amazon product page
product_url = "https://www.amazon.com/ENHANCE-Headphone-Customizable-Lighting-Flexible/dp/B07DR59JLP/"

driver.get(product_url)

time.sleep(10) # Wait for a few seconds to ensure the page loads completely

# Locate and extract review elements
review_elements = driver.find_elements(By.CSS_SELECTOR, '.a-section.review')

csv_filename = 'product_reviews.csv'
with open(csv_filename, 'w', newline='') as csv_file:
    csv_writer = csv.writer(csv_file)
    csv_writer.writerow(['Author', 'Review', 'Review Date'])

    for review_element in review_elements:

        # Extract the author's name
        author_name = review_element.find_element(By.CLASS_NAME, 'a-profile-name').text

        # Extract review text
        review_text = review_element.find_element(By.CLASS_NAME, 'review-text').text

        # Extract review date
        review_date = review_element.find_element(By.CLASS_NAME, 'review-date').text

        # Print the extracted information
        print("Author: ", author_name)
        print("Review: ", review_text)
        print("Review Date: ", review_date)
        print("\n")

        csv_writer.writerow([author_name, review_text, review_date])

driver.close()

When you run this code, it’ll create a CSV file that neatly organizes the scraped Amazon review data. Your output should look like the following:

You can easily share this CSV file, import it into a data analysis tool, or process it further for deeper insights into the product’s marketability.

Conclusion

This tutorial walked you through the steps for accessing Amazon review pages and extracting data from them. For websites like Amazon that require log in, you learned how to sign into them programmatically using Selenium. You also saw how to parse the returned data and export the data into a CSV file.

You can build on your knowledge by exploring more advanced web scrapping techniques. One technique we recommend you learn is how to automate how the login URL will come from your Amazon account. That’ll surely be a fun challenge!

react-tweet: Vercel’s New React Library for Embedding Tweets

Kingsley Ubah — Mon, 18 Sep 2023 09:50:12 +0000

Vercel recently released a React tweet package that lets you embed a tweet in your React component using one line of code. It also lets you render the tweet in light and dark modes, customize its design, and do so much more.

Follow us as we walk you through how to install and use this package to embed tweets in your app, highlight some of its benefits, and show you the best way to customize your embedded tweets.

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, we strongly recommend HTML to React: The Ultimate Guide.

Installing React Tweet

We’re assuming that you already have a React project setup locally. But if you don’t, you can create one from scratch by running the following command on a terminal:

npx create-react-app

Note that you’ll need to have Node.js installed on your local machine before running the above command.

Now, to install react-tweet, run the following command:

npm i react-tweet

The installation and setup is complete. Let’s now see how to embed a tweet in a React component.

Embedding a Tweet

To embed a tweet in your page, you only need the component. This component only requires the ID of the tweet you want to embed. The ID of a tweet is the last part of its URL, which is a string of numbers.

Here’s an example:

import "./styles.css";
import {Tweet} from 'react-tweet'

export default function App() {
  return (
    <div className="App">
      <Tweet id="1686121431560585216"/>
    </div>
  );
}

And here’s the output:

Benefits of using the react-tweet package to embed tweets

The benefits of using this package are the following:

The element uses 35x less JavaScript than Twitter’s element
It works with React server components, so you can fetch the tweets on the server
It also works with Next.js, Vite, Create React App, and more

Rendering the Tweet in Light and Dark Mode

You can also render a tweet in light and dark mode. To render in dark mode, simply wrap the Tweet component in a div element and give the div a class name of “dark”:

import "./styles.css";
import {Tweet} from 'react-tweet'

export default function App() {
  return (
    <div className="App">
      <div className="dark">
        <Tweet id="1686121431560585216"/>
      </div>      
    </div>
  );
}

Here’s the result:

You can also use the data-theme prop in place of className. To render in light mode, give it a value of “light” instead.

Customing the tweet’s style

If you were to inspect the Tweet component in your browser DevTool by clicking F12 on your keyboard, you’ll see a bunch of CSS variables assigned to the element to style it. This includes those that set the color, margins and padding, line height, and much more.

You can change the value of all these CSS variables to customize the look of the tweet.

In the following example, we went inside the global stylesheet, selected the react-tweet-theme element, and changed the font size from the default 1.25rem to 3rem:

.updated-dark .react-tweet-theme { 
  --tweet-body-font-size: 3rem; 
}

Notice how we used the .updated-dark class instead of .dark. For specificity's sake, you need to change the class name from .dark to something else (.updated-dark, in our case), then change to the new class name in the JSX:

import "./styles.css";
import {Tweet} from 'react-tweet'

export default function App() {
  return (
    <div className="App">
      <div className="updated-dark">
        <Tweet id="1686121431560585216"/>
      </div>      
    </div>
  );
}

Now you’ll see the changes reflected on the page.

A Better Way to Customize the Tweet

The package offers a better way to customize your embedded tweet.

Under the hood, the component uses other components like TweetContainer, TweetHeader, TweetBody, TweetMedia, and so on. You can customize these individual components as well.

For example, if you’re using Next.js, a common customization you might make is to use Next.js’ built-in Image component for the tweet avatar and media.

The react-tweet package uses the traditional element by default because it’s meant to be used in not only Next.js projects but also create-react-app, Vite, and others.

So to use the Next.js Image component and all the optimizations that come with it, you need to do a few things. First, create a tweet-components.tsx file in your project’s component folder and use the following code:

import Image from "next/image"
import type { TwitterComponents } from "react-tweets"

export const components: TwitterComponents = {
  AvatarImg: (props) => <Image {...props} />
  MediaImg: (props) => <Image {...props} fill unoptimized />
}

This basically updates the “TwitterComponents” component to use the Next.js built-in Image component for avatar and media images.

Then in the main app, import the component and pass it to the tweet:

import "./styles.css";
import {Tweet} from 'react-tweet'
import {components} from "@/components/react-tweet/tweet-components"

export default function App() {
  return (
    <div className="App">
      <div className="updated-dark">
        <Tweet id="1686121431560585216" components={components}/>
      </div>      
    </div>
  );
}

Under the hood, it will use your custom components now for both avatar and media images.

Conclusion

With the react-tweet package, embedding tweets in your app has never been easier. This package is easy to use, very customizable, and can be used in different projects like React, Next.js, Vite, and so on.

Want to collaborate with me? Fill out this form.

This Context API Mistake Ruins Your Whole React App (All Components Re-Render)

Kingsley Ubah — Mon, 11 Sep 2023 22:34:32 +0000

We can't overstate how much of a key role performance plays when it comes to user experience.

Nothing can make a user leave your app quicker than a sluggish or laggy user interface (UI), and often times this results from poor coding practices on the part of the developer.

A lot of React developers use the context API in a way that results in pointless UI rerenders and ultimately a slow application. While its effect might be subtle in smaller apps, it becomes quite noticeable in large applications.

So what is this bug we’re going to be talking about? Read on to find out!

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.

The Problem of Rerendering The Whole Application

Consider the following App component, which returns a main element housing two custom components: ExampleComponent1 and ExampleComponent2. Inside ExampleComponent1, we’re keeping track of the count state:

import {useState} from "react"

export default function App() {
  return (
    <main>
      <ExampleComponent1 />
      <ExampleComponent2 />
    </main>
  )
}

export function ExampleComponent1 {
  const [count, setCount] = useState(0)
  return <div>Example component 1</div>
}

export function ExampleComponent2 {
  return <div>Example component 2</div>
}

Now let’s say we later on discover that ExampleComponent2 will also need access to the count state.

What you typically do is lift the state up to the parent component. But oftentimes, in real-world scenarios, a lot of other components might need access to the same state.

Rather than manually passing down the props into the various components, the better approach would be to use the context API. Let’s bring it into our App component:

import {useState, useContext} from "react"

const CountContext = useContext(null)

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <main>
      <CountContext.Provider value={{count, setCount}}>
        <ExampleComponent1 />
        <ExampleComponent2 />
      </CountContext.Provider>
    </main>
  )
}

export function ExampleComponent1 {
  const [count, setCount] = useContext(CountContext)
  return <div>Example component 1</div>
}

export function ExampleComponent2 {
  return <div>Example component 2</div>
}

Basically, you’re to wrap the part of your app that needs access to the global state in the Context Provider component.

You’d then pass the variables you want the children components to access, which, in our case, is the count variable and setCount() method.

Now here comes the mistake.

Keep in mind that we’re consuming the context in ExampleComponent1, but not in ExampleComponent2. The idea is that, when we change the state in the parent App component, it’s only the components using the context that get re-rendered.

But the reality is that both components nested in the provider will be rerendered when the state changes.

To demonstrate this, let’s log different messages from both components and add a button in ExampleComponent1 that, when clicked, updates the state:

// App component goes here

export function ExampleComponent1 {
  const [count, setCount] = useContext(CountContext)
  console.log("ExampleComponent1 rendering")

  return (
    <div>Example component 1 
      <button onClick={() => setCount(count + 1)}> Click me</button>
    </div>
  )
}

export function ExampleComponent2 {
  console.log("ExampleComponent2 rendering")

  return <div>Example component 2</div>
}

Because only the first component is using the context, the second should not be affected when we click the button to update the state, right?

Wrong!

When you open your browser’s console, refresh the page, and click the button, you’ll see the messages in both components being logged there. This means that both ExampleComponent1 and ExampleComponent2 have been re-rendered.

Now imagine that you have the provider high up in your component tree. The whole app will likely rerender every time you make a change. This is very inefficient and could result in significantly lowered performance in large applications.

The Solution is to Put The React Context in a Separate File

The solution to this problem is quite straightforward.

You’d start by creating a new folder named contexts inside of the src/ directory within your project’s directory structure.

Then inside the src/contexts directory, create a file named count-contexts.jsx and paste in the following code:

import React from "react"

export const CountContext = useContext(null)

export default function CountContextProvider({children}) {
  const [count, setCount] = useState(0)

  return (
    <CountContext.Provider value={{count, setCount}}>
      {children}
    </CountContext.Provider>
  )
}

You’re basically moving the context provider, along with the global state, to a separate file. And this time, the provider component accepts the children from the parent.

Now in your App component, import the CountContextProvider and the CountContext variable from the newly created file, then use the former to wrap the children elements:

import CountContextProvider, {CountContext} from './contexts/count-context'

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <main>
      <CountContextProvider>
        <ExampleComponent1 />
        <ExampleComponent2 />
      </CountContextProvider>
    </main>
  )
}

// Other components

Now when you save the file, open your browser’s console, refresh the browser, and click the button, you’ll notice that only ExampleComponent1 is being re-rendered. And this is because it’s the only one using the context.

Conclusion

If you’re building a large application with a lot of components requiring the same state, then it’s crucial that you use the technique we covered in this article to improve your app’s performance, and consequently, the user’s experience.

Want to collaborate with me? Fill out this form.

Stop Conditional Rendering in React Without Knowing This (&& and Ternary Operator)

Kingsley Ubah — Mon, 04 Sep 2023 22:03:56 +0000

In React, you can do conditional rendering in two different ways:

Using the ternary operator
Using the logical AND operator (&&)

Both of these methods get the job done. But there are some side effects you should know about before using both of them.

Let’s explore these side effects in detail, starting with the logical AND operator.

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.

The Problem With Using the Logical And (&&) for Conditional Rendering

Let’s say want to build a ProductsInStock component that renders a “Products in stock” text if there are products in stock and “No products” if there are no products in stock.

You can execute this conditional rendering using the logical AND operator, like so:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length && "Products in stock" }
    </div>
  )
}

If the length is a “falsy” value, JavaScript will simply short-circuit and stop evaluating the rest of the expression, therefore returning just the first part of it. This will result in the problem where the number 0 is rendered inside the <div>.

Now this is actually not a JavaScript issue, but rather a JSX one. According to JSX standards, if you have {0} in your template, it’ll actually render the zero. This same behavior occurs if the expression evaluates to NaN (it renders “NaN” on the page)

With other falsy values, however, nothing will be rendered on the page, as expected. The falsy values, in particular, are null, undefined, and the empty string literal ("").

So now that we have gone over the problems, what are the solutions? Let’s explore each of them!

Solution 1: Make Your Conditional Statement More Explicit

When you use a variable that is going to be evaluated to zero, you need to make your conditional statement more explicit: if the length is greater than zero, output the given string. Otherwise, don’t render anything:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length > 0 && "Products in stock" }
    </div>
  )
}

With this code, you won’t see “0” on your page.

Solution 2: Use Exclamation Marks

You can also avoid the aforementioned bug by adding two exclamation marks in front of the conditional statement:

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {!!productsInStock.length > 0 && "Products in stock" }
    </div>
  )
}

The exclamation marks will convert the array's length into a boolean value. A falsy value (i.e. 0) will turn into false, and in that case, nothing will show on the page. But if the length is a truthy value, whatever you put after the && will be used.

This method also works for NaN (it doesn’t render anything on the page).

Best Solution: Use the Ternary Operator

With ternary operators, you can avoid the bug by using null as the “else” option. :

import React, {useState} from 'react'

export default function ProductsInStock() {
  const [productsInStock, setProductsInStock] = useState([])

  return (
    <div>
      {productsInStock.length ? "Products in stock" : null }
    </div>
  )
}

This code is straightforward and more readable compared to the other two solutions.

Conclusion

The ternary operator remains the best way to render conditionally in React thanks to its concise and readable syntax. But if you’re to use any of the other methods, it’s important to always remember the side effects mentioned in this article.

Want to collaborate with me? Fill out this form.

How To Build Custom, Reusable Web Components From Scratch

Kingsley Ubah — Wed, 30 Aug 2023 12:31:06 +0000

In HTML, there are so many elements we can use to mark up our web page. But do you know that you can also create your own custom web component?

The biggest benefit of creating your own custom web components is that you get to define its own built-in styling and functionality. In addition, you can easily reuse it at various places on your web page.

This article talks about the basics of creating a web component. By the end of this article, you’ll have all the information you need to start creating your own web component from scratch.

Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.

Setting up the web page

Create a file named index.html in an empty directory. Then open it with a file editor and paste in the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <script type="module" src="main.js"></script>
    <script type="module" src="bigbang.js"></script>
</head>
<body>
    <header>
        <h1>Basic Web Component</h1>
    </header>
    <main>
        <h2>Main area</h2>
        <h3>Web component below</h3>
    </main>
</body>
</html>

This is a web page with a header section and a main section, with each section housing different levels of title headings.

Each one of these tags has a semantic meaning behind it. In other words, they clearly describe their meaning to both the browser and the developer.

These elements all have built-in functionality and styling associated with them by the browser.

Web components, on the other hand, are your very own HTML elements. When you’re creating a custom element, you have to define how you want to element to look and behave.

Let’s see how.

Creating a basic web component

If you check the section of your HTML markup in index.html, you can see that we’re importing a JavaScript module named bigbang.js.

This file is going to contain all the code responsible for creating our custom web component/element.

Now open the file in a text editor and paste in the following code:

class BigBang extends HTMLElement {
    constructor() {
        super();
    }    
}

window.customElements.define('big-bang', BigBang)

Here defining a class that extends the HTMLElement class. Inside this class is where you’ll place all the code responsible for building the element. On the last line, we passed this class as the 2nd argument to the define() method of customElements, with the first argument being the tag name of the element.

This means that you could now use the custom element in HTML like this:

<big-bang></big-bang>

Keep in mind that there has to be a hyphen in your web component’s tag name. This helps to make it stand out as a custom component.

Now, inside the constructor method of the BigBang class, one of the things that you’ll need is a shadow root. This is like a container that’s going to hold your component:

class BigBang extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: closed})
    }    
}

Because custom components can contain styling, scripts, and functionality, we don’t want those things spilling out and impacting the rest of the page. In other words, we don’t want to define CSS here and have it change the way that the rest of the page looks.

The other way is fine, though. The rest of the page can have its styles cascade down into our component.

The shadow root creates some sort of sandbox around our element. The ‘open’ value means that the parent script (i.e. main.js) can actually do things like document.querySelector(), get inside of our custom component, and see what the actual tags we’re using inside it are.

If it’s closed, they can’t.

Next, inside the constructor, create a div element with some text in it, then attach the div to the shadow root:

class BigBang extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'closed'})
        const div = document.createElement('div')
        div.textContent = 'Big Bang Theory'
        shadowRoot.append(div)
    }        
}

With this code, you have just created a custom element.

To use the element in your markup, go into index.html and add the following element inside the H2 tag and under the main tag:

<big-bang></big-bang>

If you open the index.html document in a web browser, you’ll find the custom element rendered on the page (which renders the text, ‘Big Bang Theory’):

The component also has text built into it, so you don’t have to pass anything between opening and closing tags as you would with most other HTML elements.

This leads to the next question: How do we get things nested inside our custom web element? The answer is slots!

Introducing Slots

Slots allow you to “slot” content into your custom element by nesting it within the opening and closing tags of your element in HTML. Let’s see a bit of a demonstration.

At the top of the bigbang.js file, let’s first create a template element:

const template = document.createElement('template')
template.innerHTML = `
    <div>
        <h2>Big Bang Theory</h2>
    </div>
`

Then inside the constructor, replace the entire code for creating and inserting the div element with that of the template:

class BigBang extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'closed'})

        /* 
           Remove this:
           const div = document.createElement('div')
           div.textContent = 'Big Bang Theory'
           shadowRoot.append(div)
        */

        let clone = template.content.cloneNode(true)
        shadowRoot.append(clone)
    }        
}

We basically cloned everything in the template and appended it to the shadow root. If you check your browser, you should find the text appearing on the page as an H2.

Now is the time to slot in some actual content. Inside the markup in index.html, put the following content between the <big-bang> tags:

<big-bang>
  <h2 slot="title">Characters</h2>
  <ul slot="list">
    <li>Leonard</li>
    <li>Kingsley</li>
    <li>Sarah</li>
    <li>John</li>
  </ul>
</big-bang>

If you want to be able to use nested content, you need to give them a slot name as we did above.

Now back in your template, in order to include these elements inside the template, you need to add the tag for each of them:

const template = document.createElement('template')
template.innerHTML = `
    <div>
        <h1>Big Bang Theory</h1>
        <slot name="title">Default text if no title slot</slot>
        <slot name="list"></slot>
    </div>
`

We also added a default title in case none is provided in the HTML. This is the result (slots highlighted in red):

Conclusion

That’s all! Just with HTML and a few lines of JavaScript, you were able to create your very own web component.

Now there is more to this. We can define styles, behaviors, and functionality. I’ll be tackling each of these in the coming articles. So make sure to subscribe so you don’t miss them.

Want to collaborate with me? Fill out this form.

How To Use The Next.js Link Component (with Examples)

Kingsley Ubah — Mon, 01 May 2023 16:58:47 +0000

For many years, the HTML anchor element (<a> </a>) remained the traditional way of navigating to both internal web pages and external websites and webpages. This approach worked well for a time, but as the web has become more sophisticated, there has been a need for a better solution.

Enter Next.js Link component. This component allows developers to easily create links that are optimized for both internal and external navigation. It’s similar to the native anchor element but offers additional benefits like customizing navigation behavior through props, improved performance, and SEO.

In this article, we’ll introduce you to the Next.js Link component and cover the different props you can leverage to create powerful linking mechanisms in your Next.js application.

Here are the things you’ll learn:

Introducing the <Link/> component
The Next.js Link component props
- Required props
- href
- Optional props
- as
- passHref
- prefetch
- replace
- scroll
- locale

Prerequisites

To follow this tutorial, you need the following:

Good understanding of JavaScript and React’s syntax
A Next.js starter app (see this page for setup instructions)

Introducing the Next.js Link Component

The Next.js Link component is a powerful tool for creating links within Next.js applications. It provides a simple API that you can use to easily create links between pages, add query strings, and even pass along props.

With <Link />, developers can quickly create dynamic and interactive linking mechanisms in their applications. To use the Next.js Link component, you need to import it from the next/link module.

Here’s a basic example:



import Link from "next/link";

export default function Contact() {
  return (
    <Link href="/about">
      <a>About Page</a>
    </Link>
  );
}

The Link Component Props

Various props can be registered on a Next.js Link component to customize the navigation behavior and send additional parameters to the destination route.

Required props

The <Link> component requires only one prop to function - href. If you fail to define this prop on <Link />, you'll get an error.

href

When you use </Link>, you’re required to supply the destination URL as value to the href prop. The destination URL is where the user will be sent after clicking on the link. This could be a relative URL, an absolute URL, or a URL object.

Relative URL:



<Link href="/about">
  <a>About (Relative URL)</a>
</Link>

Absolute URL:



<Link href="https://www.ubahthebuilder.tech/about">
  <a>About(Absolute URL)</a>
</Link>;

URL Object:
The URL object lets you send query strings and parameters by passing them in an object to the Next.js Link component. We use the URL object for dynamic routing, where different pages are rendered depending on the URL parameter.

Here's a demo showing how to use it in the Link component:



<Link
  href={{
    pathname: "/posts",
    query: { post: "1" },
  }}
>
  <a>Read post 1 details</a>
</Link>

This example resolves the href value into: /posts/?post=1.

Optional props

The following props are optional and allow you to customize the behavior of your <Link /> component.

`as`

We use the as prop to define a link decorator that lets you pass extra information when using dynamic routes.

For instance, if you’re running an affiliate program in your web application, you can use the as prop to pass the affiliate ID when a customer is about to make a purchase using an affiliate’s unique link.

Here are two examples:

https://mystore.com/products/1?affID=21223543
http://www.blog.openreplay.com/post?language=en

Here the link decorator comes after the ? in the URL, which is usually the case. Note that the link decorator does not change the destination of the URL; all it does is pass extra information.

Let's see an example. Go to your Next.js project and create the following folder and file structure inside the pages folder



📦pages
 ┣ 📂api
 ┃ ┗ 📜welcome.js
 ┣ 📂posts
 ┃ ┣ 📜index.js
 ┃ ┗ 📜[post].js
 ┣ 📜index.js
 ┗ 📜_app

Next, add the following code to pages/posts/index.js:



import React from "react";
import Link from "next/link";

const BlogPosts = () => {
  const postIDs = ["1", "2", "3"];
  return (
    <>
      <div>
        <h1>List of posts</h1>
      </div>

      {postIDs.map((post, key) => (
        <Link href="/posts/[post]" as={`posts/${post}/?language=en`} key={key}>
          <a>
            <h1>Post {post}</h1>
            <p>Read more about post {post}</p>
          </a>
        </Link>
      ))}
    </>
  );
};

export default BlogPosts;

And in pages/posts/[post].js, add the following code:



import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const postID = router.query.post;
  return (
    <>
      <h1>
        <Link href="/products">
          <a>See all posts</a>
        </Link>
      </h1>
      <div>
        <h5>Post {postID} Details Page</h5>
      </div>
    </>
  );
};

export default Post;

Here’s what you’ll find if you navigate to http://localhost:3000/posts:

Click on any of the posts. It leads you to the details page of each post (which is a dynamic route)

In the image above, you can see that the URL of the first post contains a link decorator, ?language=en, which does not affect the link's destination. Same for post two and post three.

`passHref`

Sometimes you'll run into cases where the </Link> component's child might be a custom component that wraps an anchor tag (think libraries like styled components). In such cases, specify the passHref prop on the Next.js Link component. Doing so forces the Link to send the href prop to its child.

Adding the passHref prop is very important for SEO and accessibility because omitting the prop will leave the nested <a> tags without a href property.

Let's see an example. Edit the code in pages/post/[post].js to include the following:



import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";

// Import this
import styled from "styled-components";

// Add this:
const CustomLink = styled.a`
      color: red;
      font-size: 30px;
    `;

const Post = () => {
  const router = useRouter();
  const postID = router.query.post;
  return (
    <>
      <h1>
        <Link href="/products">Back to posts</Link>
      </h1>
      <h1>
        <NavLink href="/" name="Home" />
      </h1>
      <div>
        <h5>Post {postID} Details Page</h5>
      </div>
    </>
  );
};

// Add this:
const NavLink = ({ href, name }) => {
  return (
    <Link href={href} passHref legacyBehavior>
      <CustomLink>{name}</CustomLink>
    </Link>
  );
};

export default Post;

Now, navigate to http://localhost:8000/posts and click on any post. In the post details page, a custom red link should show like in the image below:

`prefetch`

By default, the Next.js Link component enables the prefetch feature that preloads page content in the background, immensely improving your application's performance.

Keep in mind that the preloading of pages only works in production apps. You can turn it off by setting prefetch ‘s value as false, as shown below:



<Link href="/posts" prefetch={false}>
  <a>Get posts</a>
</Link>

`replace`

Usually, when you navigate to a new URL, that URL is added to the stack. Clicking on the back button in the navigation bar in the browser will take you back to the previous page in the stack.

The replace prop changes this navigation behavior by replacing the current history state.

Edit the content in pages/index.js to the following:



import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to my homepage</h1>
        <h1>
          <Link href="/posts">Read my blog posts</Link>
        </h1>
      </main>
    </div>
  );
}

Save the file and navigate to http://localhost:3000. You should find a page that looks like the one below:

If you click on the Go to products page link, watch how the application navigation works when we click on the back navigation button without the replace prop in the GIF below.

Normal, right? Now go inside pages/posts/index.js and add the replace prop to the Link component of each post as shown below:



// ...
{
  postIDs.map((product, key) => (
    <Link
      href="/posts/[post]"
      as={`post/${post}/?language=en`}
      key={key}
      replace={post === "3" ? true : false}
    >
      <a>
        <h1> Post {post}</h1>
        <p>Read more about post {post}</p>
      </a>
    </Link>
  ));
}
// ...

Now let's go back to the browser and see how the navigation works with the replace prop added to it.

From the above demo, notice how clicking the back button on their third post took us straight to the homepage instead of the “List of posts” page. It happens because we added the replace prop on the third post route.

`scroll`

When you navigate a new page with Next.js <Link/>, it automatically scrolls to the top. You can disable this behavior and even scroll to specific sections of the new page via hash ids (the part of a URL after a #).

To disable the automatic "scroll to top" or hash ids, set scroll to false on the Link component as shown below:



<Link href="/blog/intro" scroll={false}>
  <a>Disables scrolling to the top</a>
</Link>;

Use hash ids to scroll to specific sections of a web page:



<Link href="https://blog.openreplay.com/what-is-css/#css-selectors">

  <a>Scroll to CSS selectors</a>

</Link>;

`locale`

The locale prop allows you to serve users the same content in different languages based on their preferred language or location. This is very useful for websites that serve users from different countries and regions.

You can set up your Next.js application to serve users different versions of your webpage in their preferred language by configuring the i18n object in next.config.js. Read more about configuring locales here.

Conclusion

When developing apps in Next.js, we recommend using the Next.js Link component over the native anchor element for routing. Next Link doesn’t just simplify client-side navigation but also lets you customize its behavior to your use case by using the props we covered in this article.

To learn more about Next.js, read our complete guide to Next.js and MongoDB.

Getting Started With Freelance Writing

Kingsley Ubah — Tue, 23 Aug 2022 23:34:33 +0000

There is more to tech than just building websites.

Not that long ago I was working as a cashier at a local supermarket. It was one of the most physically demanding jobs I have ever had, and I frankly hated it. It also didn't help that the pay was so appalling.

I wanted out, as quickly as possible.

As if by divine providence, my friend, named Mark, introduced me to web development as we were having a casual discussion about how websites come to be. Our discussion moved me to research more about web development as a whole.

My interest grew.

I started reading books on programming and reading/watching content online - anything I could get my hands on. I also took some free courses which were absolutely knowledge-packed.

As I progressed, it became apparent that there are ways to make money other than building websites, such as by writing tutorials and software documentation. I started to delve deeper into those areas.

So far, I've produced more than 100 articles, tutorials, and guides for a variety of blogs, magazines, and private clients, and I was paid for each one. Most of them were on software-related topics, but a few were in the writing, self-improvement and personal growth niche.

For the rest of the article, I share some important tips and advice for those of you looking to earn money through writing.

Get Specialized Knowledge

You need to learn specialist information if you wish to write for a living. Software and web development, copywriting, health and beauty, dating and relationships, fashion, and fitness are some of the trendiest themes right now.

If you want to write for a living, you need to write about subjects that people will pay you for and you need to write with an audience in mind.

Posting journal entries online is one of the worst blunders I see plenty of people doing. It's okay to publish your personal essays—I do it myself on Medium—but regrettably, you can't get paid to write them.

People desire answers to their problems, instruction on how to accomplish something, and guidance from others who are more informed than they are about a certain subject. There is money to be made there.

Start blogging

It's time to share what you have now that you have something to say.

A wonderful location to start blogging right away is here on Hashnode. I personally started blogging first on dev.to, which is very similar to Hashnode.

Do not wait till you're an expert before posting because it's not important. You can just share what you learned that day and add your own personality to it rather than waiting till you are an expert before posting.

Another thing. Don't be concerned that there are 100s of articles on the same topic. You are unique, as are your thoughts, and your writing style. This, therefore, means that the information you produce will be different. Decide what works for you and work harder at it.

Understand the different writing styles

For different types of content, there are several writing styles. You'll need to read a variety of internet articles and analyze their structures, points of view (POV), and tones in order to comprehend each of them.

In How-to guides, for example, you'll be instructing the reader on how to carry out an action or complete a task in how-to guides. You must thoroughly explain each stage in the entire procedure so that the reader can follow along without becoming lost.

Additionally, as the teacher that you are, your tone should project authority and professionalism. Normally, your writing would have a polished tone. Friendly and conversational, but not too casual.

Different content follows different formats. A listicle has its own style, and so do other content forms such as how-to guides, press releases, software documentation, media reports and news content.

Different formats will be requested by your clients. Based on the information (outline) provided by the customer, you should be able to determine the best way to structure the content.

Learn at least the basics of SEO

Search engine optimization (SEO) is the practice of optimizing website content to make it more likely to appear to users in search engine results.

There are so many rules and guidelines for SEO; much more than I can contain in this post. However, the underlying idea is straightforward: Google wants to only display the greatest material to the right users. You are accountable for providing that.

Using the appropriate keywords is one of the most crucial ways to achieve this because they let the Google search engine know what your content is all about. You should also understand how to structure information correctly, including how to use appropriate headings, optimize images, include a table of topics, use brief paragraphs, and other techniques.

Learn the fundamental techniques for enhancing SEO to increase your marketability. Many clients will pay you more to write SEO-optimized articles.

Reach out to blogs and publications

Once you have a solid amount of your work online, you can then start looking look for blogs and publications that’ll pay you to write for them.

Depending on the niche you choose, a straightforward Google search for "my-niche> sites in that pay authors" will turn up such blogs for you.

Please feel free to check out the following blogs if you're seeking for ones about software programming:

Over to you

Above all, consistency matters the most in anything you do. Write often and don't be afraid to hit the publish button.

Don't hesitate to leave a comment if you have any questions.

Goodluck!

How to Build a Modern Image Slider with Swiper

Kingsley Ubah — Mon, 28 Mar 2022 14:54:09 +0000

Slideshows are fantastic for displaying crucial information or images to the users viewing a website. Amongst other uses, you can create an image slider to draw users' attention to specific products on your e-commerce site.

Though building an image slider is very much possible with HTML, CSS and JavaScript, using a library is definitely a more convenient approach. You get to save precious time that could have been spent on writing code, while also getting a ton of other customization features that may have been difficult to implement by yourself.

In this tutorial, we'll learn how to include a modern image slider in a Vue application. We'll build our image slider using Swiper. Swiper is a modern, library-agnostic solution for creating touch sliders in web and mobile applications.

Here's the preview of our image slider:

Before we start, please note that you need to have a recent version of Node js and npm installed on your computer. Don't have Nodejs or npm installed? Download the installer from Node.js.

Create Your Vue Application

Let's start by installing the Vue CLI globally (if you haven't already done so):

npm install -g @vue/cli

Next, create a new Vue application:

vue create my-sliders

After a while, Vue should generate your new application. When this is done, run the following commands to start your new vue application:

cd my-sliders
vue serve

Finally, you should move the images you want to use in your sliders into the src/assets folder in your project.

With the basic setup complete, it's time to install swiper js using the node package manager (npm).

Getting Started with Swiper JS in your Vue Project

1- Installation

To install swiper js, run the following command:

npm i swiper

This will install the swiper package from npm and include it as a dependency under package.json.

2 - Building our Image Slider

Let's start building our image slider.

Open your App.vue file and replace the content of your <script> tag with this (delete the *components * folder in your src directory, we don't need it):

<script>
 // import Swiper core and required modules
  import SwiperCore, { Navigation, Parallax } from 'swiper';  

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';  

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';

  // Import images to be used as slide
 import image1 from "./assets/first-slide.jpg";
  import image2 from "./assets/second-slide.jpg";
  import image3 from "./assets/final-slide.jpg";

  SwiperCore.use([Navigation, Parallax, Scrollbar, A11y]);

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        parallaxSwiperWidth: 0,
        images: [{
          id: 1,
          imageUrl: image1
        },
        {
          id: 2,
          imageUrl: image2
        },
        {
          id: 3,
          imageUrl: image3
        }]
      }
    }    
  };
</script>

We import the swiper core module, along with the navigation, parallax and blah modules. We also import two Vue components from the package, these are Swiper (the slides container) and SwiperSlide (for creating a slide).

Then we import the styles for each module, and the images we want to use in each of the slides. These images are returned from the data() function so we can access it in our template.

The modules are then registered on the SwiperCore module.

To create slides on the view, replace the content of your <template> element with the following:

<template>
  <swiper
    class="parallax-slider"
    parallax
    grabCursor
    navigation
  >
    <swiper-slide v-for="image in images" :key="image.id">
      <img :src="image.imageUrl">  
    </swiper-slide>    
    ...
  </swiper>
</template>

The grabCursor property will enable us to progress through the slides by grabbing and pulling on each slide. The navigation property provides two icons on our slide that, upon clicking, will move to either the next or previous slide in the collection.

Save the file, run vue serve and go to localhost:8000 to see the results:

Here you can see that the default navigation functionality from swiper is used. We can create our own custom navigation, and I'll show you how to do just that in the next section.

3 - Adding Custom Navigation

You might want to use your own custom navigation in lieu of the default provided by Swiper js. For our custom navigation, we'll use a couple of navigation icons from Font Awesome.

Start by copying the following CDN link to Font Awesome, and pasting the link inside your public/index.html file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Next, we'll add our new navigation icons inside our <swiper> and just above our <swiper-slide> tags.

<div class="parallax-slider-navigation" style="display: flex; justify-content: space-between; padding: 1rem;">
      <div class="nav-indicator prevArrow fa-2x">
        <i class="fa-solid fa-backward"></i> Prev
      </div>
      <div class="nav-indicator nextArrow fa-2x">
        Next <i class="fa-solid fa-forward"></i>
      </div>
</div>

Two container <div> elements are created and assigned the class names nav-indicator, prevArrow/nextArrow and fa-2x. The first two, which are both specific to swiper js, will give swiper information about our nav. fa-2x is specific to Font Awesome, and it increases the size of our icons two folds.

Speaking of icons, if you elect to install and use Font Awesome as a Vue component, you must first register font-awesome as a component in your App.vue file

export default {
    components: {
      Swiper,
      SwiperSlide,
      FontAwesomeIcon
    },
    data() {
      // return images
    }    
  };

before using it in the template in place of the <i> tags:

<font-awesome-icon icon="fa-solid fa-backward" />
<font-awesome-icon icon="fa-solid fa-forward" />

Now we must tell swiper js about the elements responsible for navigating the slider by referencing both .prevArrow and .nextArrow elements in the navigation property of the slider:

<swiper
    class="parallax-slider"
    parallax
    grabCursor
    :navigation="{ nextEl: '.nextArrow', prevEl: '.prevArrow'}"
  >  
        ...
  </swiper>

Save your file and go to your browser to see the output.

The default navigation from swiper js has now been replaced by our custom navigation.

Swiper JS vs Slick

Slick is another great option for creating slides and carousels in your web app. Slides created with slick are fully responsive and scales with its container.

You are also presented with the option to enable or display the sliding feature. Not to mention that slick also provides desktop mouse dragging functionality, just like Swiperjs.

1 - Creating single items

Creating a single slider is as easy as this:

$('.single-item').slick();

2 - Creating Multiple Items

For a carousel with multiple items, you need to pass in more properties:

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

Make sure to set the class .multiple-items on every slide's HTML tag.

Wrapping Up

To recap, we created a fresh Vue project and installed the swiper js package from npm. We then built a simple image slider using the default navigation from swiper, before implementing our own custom navigations.

We also compared Swiper to Slick, another solution for creating sliders and carousels. We saw the code for creating a carousel containing a single item and a carousel containing multiple items at a time.

Have a great week.

How to Prevent Overflow Scroll in CSS

Kingsley Ubah — Fri, 11 Mar 2022 17:14:21 +0000

In this short guide, we'll go over the CSS overflow property and I'll show you how to prevent a scroll bar from appearing anywhere around your container element even when content flows beyond it.

What is an Overflow?

Sometimes when you are styling a website, the content may fail to fit into the borders of the container that you give it. In other words, it flows out of its container.

When this happens, you can either make it fit or cut it off. If we want to cut it off, this is where the overflow property comes into action.

CSS overflow allows us to show, hide or scroll the content of an element.

Important Note: The overflow property only works when an element is a block element and it has a defined height. So you need those two things for the overflow property to work.

Let me explain with some code examples.

HTML and CSS Code

In the HTML we have a div with a class aptly named container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="container">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit veniam, laborum voluptas repellat dolorem quas sit ut odio pariatur, delectus cumque voluptates id dolor at ullam facilis? Animi, officia sunt mollitia dolorem reiciendis impedit enim voluptatibus beatae labore consequuntur rerum! Molestias eaque dolore veniam laboriosam voluptatibus officiis quos, incidunt tenetur.

     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit veniam, laborum voluptas repellat dolorem quas sit ut odio pariatur, delectus cumque voluptates id dolor at ullam facilis? Animi, officia sunt mollitia dolorem reiciendis impedit enim voluptatibus beatae labore consequuntur rerum! Molestias eaque dolore veniam laboriosam voluptatibus officiis quos, incidunt tenetur.
   </div>
</body>
</html>

The container contains two paragraphs of Lorem placeholder text.

Now we'll modify our style.css file and include the following styles:

body {
  margin: 0;
  font-size: 30px;
  height: 100vh;
  display: grid;
  place-items: center;  
}

.container {
  width: 70%;
  color: gray;
  background-color: black;
}

For the body, we're removing all margins, setting the font size to 30px, setting the width and aligning its content in a grid position.

For the text container, we set the width to 70 per cent of its parent (body), set the text colour to grey and set the background colour to black.

Here's the preview at this point:

Now, normally a box will adjust its height automatically to fit the content within itself. However, if we set a height, and then the content is bigger than the container itself, then the content will overflow.

To demonstrate, let's add a height to our .container class rule block inside style.css:

height: 170px;

Here's the result:

As you can see from the image above, the container now has a height of 170px. However, the content itself is flowing out of the container. Given the problem, let's begin to explore the overflow property.

CSS Overflow values

visible

The first value is visible, and we're adding it to our .container block:

overflow: visible;

This allows the overflow content to flow past the container and be visible. For content overflows the container, CSS defaults to visible. That explains why our content went beyond our container even without an overflow property in CSS.

hidden

The second value is hidden. Now let's change the value of our overflow property to hidden in the style block for .container:

overflow: hidden;

This clips the content and hides the overflow. Note that the content itself is still there on the page, it's just not shown.

scroll

Next, we have the value scroll. Let's change our overflow from hidden to scroll in the style block for .container:

overflow: hidden;

As you can see, the overflow content is still hidden, and in addition, a scroll bar was added to both the x and y axis of the container so that we can see the rest of the content by scrolling.

Now even though there is no content to scroll left or right, if we want to show to scroll bar only for the y-axis (i.e vertical axis), we can change the overflow to overflow-y

overflow-y: scroll;

Now we can see there's no more scroll bar on the bottom.

There's also an overflow-x and as you might have guessed, this does the opposite of overflow-y.

auto

Finally, we have auto. This will add a scroll bar automatically, however, that is only if there is content that overflows.

So if we set our overflow to auto for our container element:

overflow: auto;

And we go back to our HTML and delete half of our text and save the file, we'll get the following.

We can see that our scroll bar disappears. If we bring back the text, then our scroll bar reappears.

Now in these examples we've only been using text, but the same thing applies when you're dealing with images as well. So if you have a really large image and a smaller container, and you set overflow to hidden on the container then the parts of the image which are overflowing will be cut of.

And that is overflow in a nutshell. I hope you learn something useful from this.

If you have any questions on this topic, please let me know in the comments.

Thanks for reading and do have a great weekend.

How to Easily Add a Map to Your Website in Under 10 Minutes

Kingsley Ubah — Fri, 26 Nov 2021 21:05:44 +0000

Many modern web platforms leverage on maps and location-based features to provide services to users. Some popular examples of this are Uber and Airbnb.

With the TomTom Maps SDK , including a map in your website has never been easier. The toolkit enables access to various mapping features including street maps, real-time traffic conditions, fuzzy search and route planning for travellers.

As a developer, you can leverage on TomTom's APIs methods to build and customize maps in your web or mobile application.

Let's walkthrough the process of adding a map to your website using the TomTom Maps SDK. In the end, I'll include a link to the source code for this project for reference.

Getting Started

Using TomTom Maps SDK is both easy and free. First, you'll need to register a TomTom developer account to get an API key. This key gives you access to TomToms services, and is automatically generated for you on your dashboard once you're signed in.

To include the SDK in your application, you have three options; you can either use a CDN link, download the ZIP file or install the npm package.

The easiest channel is through the CDN. Below are the links to the CDN files:

<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps.css'>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/maps/maps-web.min.js"></script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.15.0/services/services-web.min.js"></script>

To include them, all you have to do is paste these links inside your html file and you're good to go.

Adding a map

Let's add a map to our website.

Create the html file for your site and paste the CDN links above, then, create a div to act as a wrapper for your map:

<!-- html -->
<body>
  <div id="mapArea"></div>
  <!-- scripts -->
</body>

Maybe style it a bit?

<style>
    #mapArea {
      height: 70vh;
      width: 50vw;
      margin: 0 auto;
    }
  </style>

Then create a map instance by calling tt.map, which is part of the windows object:

const APIKey = '<your-api-key>'
var Lagos = { lat: 6.5244, lng: 3.3792 }

    var map = tt.map({
      key: APIKey,
      container: 'mapArea',
      center: Lagos,
      zoom: 15
    })

We passed an options object to the method containing the following properties:

key: The API key for your app, obtained from the developer dashboard.
container: The div which we want to insert our map into.
center: a focus point for our map.
zoom: a zoom level for our map.

Your map should look like this:

Omitting both center and zoom properties will give an abstract map of the world:

Adding markers to the map

Markers are specific points of reference in a map. You can easily add markers by calling the Marker() function which is part of the TomTom Map API.

Now let's add a single marker to our map:

var bus_stop = { lat: 6.4434, lng: 3.3553 }
var marker = new tt.Marker().setLngLat(bus_stop).addTo(map);
var popup = new tt.Popup({ anchor: 'top' }).setText('Bus Stop')
marker.setPopup(popup).togglePopup()

A single marker will be inserted into our map:

If you have multiple locations which you probably got from an API, you can recursively insert them with a JavaScript loop:

var sites = [
    { lat: 6.4434, lng: 3.3553 },
    { lat: 6.4442, lng: 3.3561 },
    { lat: 6.4451, lng: 3.3573 },
    { lat: 6.4459, lng: 3.3520 }
  ];

      sites.forEach(function (site) {
        var marker = new tt.Marker().setLngLat(site).addTo(map);
        var popup = new tt.Popup({ anchor: 'top' }).setText('Site')
        marker.setPopup(popup).togglePopup()
      });

The Popup API method was called to instantiate a new popup for the marker along with a custom text. After created the instance, we proceeded to set the popup on the marker by calling the setPopup method.

Performing Fuzzy Search

There may be some cases where you want to display a location on the map using its common address, and not with the exact coordinates.

The TomTom Maps SDK also exposes an API for performing fuzzy searches. The fuzzySearch function call will return a list of coordinates corresponding to the bare address.

First, let's add a text input for location to our application:

<div>
    <input type="text" id="query" placeholder="Type a location">
    <button onclick="fetchLoc()">Submit</button>
  </div>
  <div id="mapArea"></div>

Through the input, we can collect a query address from the user which we can then use the perform a fuzzy search.

This function gets called when the submit button is clicked:

async function fetchLoc() {
      const response = await tt.services.fuzzySearch({
        key: APIKey,
        query: document.querySelector('#query').value,
      })

      if(response.results) {
        moveMapTo(response.results[0].position)
      }
    }

Here, we called the fuzzySearch API method, passing in the API key for our app, and the whatever location the user types into the input.

Since the function returns a promise, we needed to await its response. The fuzzy search will return an object containing many properties related to our search. The results property will hold an array of locations return from our search.

When the response is ready, we called the moveMapTo method, passing in the position property of the first match.

This function is responsible for moving our map to the new address:

function moveMapTo(newLoc) {
      map.flyTo({
        center: newLoc,
        zoom: 15
      })
    }

Here, we tell our map to move from the current location, to the location which matches our search query.

So when a location is added to the input and button is clicked, the map will switch context to the new location with a sleek transition.

Conclusion

The TomTom Web SDK has a lot of API to integrate various functionalities. You can learn more about that from the official API documentation.

The code for this project is available on CodePen .

Build a Chatbot with PHP, MySQL and AJAX in 10 minutes

Kingsley Ubah — Mon, 08 Nov 2021 20:01:31 +0000

Have you ever interacted with a chatbot to carry out some routine activity, such as opening a bank account?

A chatbot is a software application which can simulate human-like online conversations with a user.

In this tutorial, we are going to build a simple chatbot which provides real-time response to some common questions. It also answers with a fallback message when an unaccounted question is asked.

The code for this project can be obtained from GitHub.

Prerequisites

To build this, you are required to know a bit of the following:

How to write basic PHP scripts
How to write basic Javascript (we'll use JS for making AJAX request)

You are also required to install either WampServer or XAMPP. These distributions come bundled with services like Apache and MySQL.

If you don't know much about PHP and JavaScript then don't worry, I'll try to explain each code block with lots of comments.

Without further ado, let's dive in!

Create the bot page

First, we create the html markup for the page. Create a bot.php and create the boilerplate HTML in it.

You can generate HTML boilerplate with Emmet by typing ! followed by enter. After creating the boilerplate code, we will go ahead to create the markup for the chat page which goes inside the <body> tags:

NOTE: You can learn more about emmet shortcut commands from my Emmet article

<div id="bot">
  <div id="container">
    <div id="header">
        Online Chatbot App
    </div>

    <div id="body">
        <!-- This section will be dynamically inserted from JavaScript -->
        <div class="userSection">
          <div class="messages user-message">

          </div>
          <div class="seperator"></div>
        </div>
        <div class="botSection">
          <div class="messages bot-reply">

          </div>
          <div class="seperator"></div>
        </div>                
    </div>

    <div id="inputArea">
      <input type="text" name="messages" id="userInput" placeholder="Please enter your message here" required>
      <input type="submit" id="send" value="Send">
    </div>
  </div>
  </div>

The page is made up of three broad sections: the header, the body and the input area. All are enclosed inside a container which itself is inside of the main bot page.

The header area holds the heading text for the chat app.

The body section will hold all the messages from both the user and the bot. These messages will be dynamically generated from the database, and inserted into the page using JavaScript.

The input area holds the input form which is how user messages will be collected from the front end.

Style up the page

Here goes the styling for the whole page:

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

/* Center body contents, both horizontally and vertically */
body{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
}

/* Style the outer container. Centralize contents, both horizontally and vertically */
#bot {
  margin: 50px 0;
  height: 700px;
  width: 450px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2) ;
  border-radius: 20px;
}

/* Make container slightly rounded. Set height and width to 90 percent of .bots' */
#container {
  height: 90%;
  border-radius: 6px;
  width: 90%;
  background: #F3F4F6;
}

/* Style header section */
#header {
  width: 100%;
  height: 10%;
  border-radius: 6px;
  background: #3B82F6;
  color: white;
  text-align: center;
  font-size: 2rem;
  padding-top: 12px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style body */
#body {
  width: 100%;
  height: 75%;
  background-color: #F3F4F6;
  overflow-y: auto;
}

/* Style container for user messages */
.userSection {
  width: 100%;
}

/* Seperates user message from bot reply */
.seperator {
  width: 100%;
  height: 50px;
}

/* General styling for all messages */
.messages {
  max-width: 60%;
  margin: .5rem;
  font-size: 1.2rem;
  padding: .5rem;
  border-radius: 7px;
}

/* Targeted styling for just user messages */
.user-message {
  margin-top: 1rem;
  text-align: left;
  background: #3B82F6;
  color: white;
  float: left;
}

/* Targeted styling for just bot messages */
.bot-reply {
  text-align: right;
  background: #E5E7EB;
  margin-top: 1rem;
  float: right;
  color: black;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style the input area */
#inputArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10%;
  padding: 1rem;
  background: transparent;
}

/* Style the text input */
#userInput {
  height: 20px;
  width: 80%;
  background-color: white;
  border-radius: 6px;
  padding: 1rem;
  font-size: 1rem;
  border: none;
  outline: none;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style send button */
#send {
  height: 50px;
  padding: .5rem;
  font-size: 1rem;
  text-align: center;
  width: 20%;
  color: white;
  background: #3B82F6;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

Create the query script (in PHP)

In this section, we will create the PHP script responsible for handling AJAX requests, connecting to the database and retrieving corresponding reply.

Before proceeding, we can go on and change out HTML file to .php. So if you named your page bot.html, you can change it to bot.php.

Now, please proceed to create a new .php file, and type the following code into it:

<?php

/* Establishes a connection with database. First argument is the server name, second is the username for database, third is password (blank for me) and final is the database name 
*/
$conn = mysqli_connect("localhost","root","","onlinebot");

// If connection is established succesfully
if($conn)
{
     // Get users message from request object and escape characters
    $user_messages = mysqli_real_escape_string($conn, $_POST['messageValue']);

    // create SQL query for retrieving corresponding reply
    $query = "SELECT * FROM chatbot WHERE messages LIKE '%$user_messages%'";

     // Execute query on connected database using the SQL query
     $makeQuery = mysqli_query($conn, $query);

    if(mysqli_num_rows($makeQuery) > 0) 
    {

        // Get result
        $result = mysqli_fetch_assoc($makeQuery);

        // Echo only the response column
        echo $result['response'];
    }else{

        // Otherwise, echo this message
        echo "Sorry, I can't understand you.";
    }
}else {

    // If connection fails to establish, echo an error message
    echo "Connection failed" . mysqli_connect_errno();
}
?>

From the front-end, we will make POST AJAX queries to this script.

Create chatbot replies in MySQL database

The PHP script is ready. Next step is to add messages to the database. With WAMP and XAMPP, you have access to the phpMyAdmin GUI tool, which helps you manage your database in an easy way.

To open it, use the following link: http://localhost/phpmyadmin/index.php. You will be prompted to input your username, password and database, which by default are "root", blank, and MySQL respectively.

Once inside, create a new database using whatever name you prefer. Then create a table within the database.

Proceed to create the following fields in it:

id (auto incrementing): This holds the unique id for each record
messages: This is the field for user messages
replies: This is the field for all corresponding replies

Try to add as many messages as possible (to make it more fun). Your table should look similar to this:

Make AJAX request from JavaScript and insert messages

With all the data present in the database, and the PHP script written, the last step would be to make the AJAX request from our front-end and insert new messages from both the user and bot, all using JavaScript.

Inside your front-end code (bot.html), open a script tag and write the following scripts:

<script type="text/javascript">

      // When send button gets clicked
      document.querySelector("#send").addEventListener("click", async () => {

        // create new request object. get user message
        let xhr = new XMLHttpRequest();
        var userMessage = document.querySelector("#userInput").value


        // create html to hold user message. 
        let userHtml = '<div class="userSection">'+'<div class="messages user-message">'+userMessage+'</div>'+
        '<div class="seperator"></div>'+'</div>'


        // insert user message into the page
        document.querySelector('#body').innerHTML+= userHtml;

        // open a post request to server script. pass user message as parameter 
        xhr.open("POST", "query.php");
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(`messageValue=${userMessage}`);


        // When response is returned, get reply text into HTML and insert in page
        xhr.onload = function () {
            let botHtml = '<div class="botSection">'+'<div class="messages bot-reply">'+this.responseText+'</div>'+
            '<div class="seperator"></div>'+'</div>'

            document.querySelector('#body').innerHTML+= botHtml;
        }

      })

  </script>

Now when the send button is clicked, the users message is first retrieved and inserted into the page. Then an AJAX request is sent to the server script to retrieve the corresponding reply.

When the server responds, the response text (bot reply) is then inserted into the page.

Conclusion

Tutorials are awesome for learning how to code. Here we built a chatbot with some CSS styling, made front-end AJAX calls with JavaScript, handled queries a with PHP script, and stored all messages in a MySQL database.

Hopefully, the whole tutorial didn't exceed 10 minutes!

Let me know your thoughts in the comments.

Beginner's Guide to Organizing Blade Templates in Laravel

Kingsley Ubah — Mon, 01 Nov 2021 20:24:46 +0000

Laravel is a PHP-based web framework which follows the Model-View-Controller (MVC) architecture.

A core part of the MVC trilogy is View. All of the UI markup which a user sees and interacts with on the web browser goes into the views folder, which automatically gets created when a Laravel project is initialized.

The view can be built using blade templates. Blade is a templating language which Laravel uses by default to create the HTML layout of the website.

There are certain best practises to adhere to when building the markup for your full-stack website in Laravel. These are especially important to follow if you are building a site which comprises of many pages and UI functionalities.

In this article, we are going to take a look at the several ways which we can structure our templates so that they are more clean, lean and readable.

Organize your views in folders

A recommended approach is organizing views into folders. Using folders leads to a cleaner codebase, especially for big websites. For example, suppose you have a website with 5 main pages like:

/home
/faqs
/about
/blog
/contact

Some of these pages might have other subpages.

For example, the Blog page may have other subpages to create, delete and update a blog post.

The create page will consist a form for submitting a blog post. The delete page might contain a single post with a confirmation question of whether you want to delete that post. The update view might return a form with the body of a post already passed in.

This means that the blog page will be composed of the following views:

index.blade.php

To show list of blog posts

create.blade.php

A form to create and post a new blog post

edit.blade.php

A form to edit and update a existing blog post

single.blade.php

A page showing a single blog post

A very clean way to organise this is to create separate folders for each page. Then store the views in their respective folders , like so:



└── views

    └── about // About views

    ├── index.blade.php // homepage for /about

    └── faqs // FAQ views

    ├── index.blade.php // homepage for /faqs

    └── blog // Blog views

        ├── index.blade.php 

        ├── create.blade.php 

        ├── edit.blade.php 

        ├── single.blade.php

Then from the controllers, you can return each of these views in a consistent manner:

app/Http/Controllers/FaqController.php:



class FaqController extends Controller
{

    public function index()
    {
        return view('faq.index');
    }

}

app/Http/Controllers/AboutController.php:



class AboutController extends Controller
{

    public function index()
    {
        return view('about.index');
    }

}

app/Http/Controllers/BlogController.php:



<?php

class BlogController extends Controller
{

    public function index()
    {
        // get blog posts from database
        return view('blog.index', compact('blogs'));
    }


    public function create()
    {
        return view('blog.create');
    }


    public function store(Request $request)
    {

        // validate request 

        // add blog post to blog table for user

        return back()->withMessage('Post Created!');
    }


    public function show(Blog $blog)
    {
        return view('blog.single', compact('blog'));
    }


    public function edit(Blog $blog)
    {
        return view('blog.edit', compact('blog'));
    }


    public function update(Request $request, Blog $blog)
    {

        // validate form data

       // update current post

        return redirect()->route('blog.show', $blog->id);
    }


    public function destroy(Blog $blog)
    {

        // authenticate

        $blog->delete();

        return redirect()->route('blog.index');
    }
}

Don't worry too much about the code.

Instead focus on what we are returning inside in view(). You can notice the consistency (they all have their folder names). All view files are categorized based on the name of the page.

That way, all you need to do in the controller is pass in the view’s name preceded by the folder name.

This simplifies the whole process and makes it more intuitive to understand.

Extending layouts

Sometimes, in your Laravel application, you might be required to share certain UI elements and UI styling across many pages. This is easily achieved with a layout file.

Inside this file, you can define the elements which you want to share across multiple pages. A good example of this are the navigation menu and the footer section.

By default, Laravel ships with welcome.blade.php as the default layout file.

It is better to create a standalone folder for all layouts. So we can move welcome.blade.php into the layouts folder.



└── views

    └── layouts 

    ├── welcome.blade.php // layout page

    // ... Other layouts go inside the layouts folder

Inside this file, we define the layouts (Navbar, Footer, Sidebar), and then yield a section of the page to other pages using the @yield statement:

views/layouts/welcome.blade.php:




<body>
        <div class="contain">
            <div class="navbar">
                  <h1>Navigation</h1>
            </div>

        <div class="flex">
            <div class="sidebar">
                 <h1>Sidebar</h1>
            </div>

        <div class="content">
           <h2> @yield('heading') </h2>

            @yield('content')
        </div>
        </div>
            <div class="footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>

Then from inside the other pages, we can extend the layouts and supply the (unique) content section, like in the following pages:

views/about/index.blade.php:



@extends('layouts.welcome')

@section('content')
<p>This is a content for the about page</p>
@endsection

@section('heading', "About Me")

views/about/index.blade.php:



@extends('layouts.welcome')

@section('content')
<p>This is a content for the FAQ page</p>
@endsection

@section('heading', "Frequently Asked Questions")

Now the layouts will persist across all three pages:

Now, certain pages might not require the layouts. For example, we might not want to extend the Navbar and Sidebar for the login and register pages. Instead, we only want the footer.

For auth-related pages, we can create a separate layout file which contains just the footer.

views/layouts/auth.blade.php:




<body>
        <div class="contain">
            <div class="content">
                <h1> @yield('heading') </h1>

                @yield('content')
            </div>

            <div class="footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>

Then we can extend that layout from our auth views:

views/auth/login.blade.php:



@extends('layouts.auth')

@section('content')
<p>This is a content for the Login page. This extends the auth layout</p>
@endsection

@section('heading', "Login")

And this is how the login page will look like:

Notice how the auth-related pages were grouped inside the auth folder.

Creating modular and reusable UI components with partials

We can take on a more modular approach when building views. This is highly useful when creating a piece of UI or functionality which you intend to reuse across multiple sections and pages.

Some examples of this are:

A navigation menu
A form which you want to reuse for creating a blog post and updating a blog post.
A modal UI which you want to reuse in different places

Partials are essentially UI modules which can be included in any page. If you are from a React background, you can think of it as UI components.

We will refactor the layout file (welcome.blade.php) by moving the Navigation section, Sidebar and Footer section into separate partials:

views/partials/navbar.blade.php



<div class="navbar">
    <h1>Navigation</h1>
</div>

views/partials/sidebar.blade.php



<div class="sidebar">
    <h1>Sidebar</h1>
</div>

views/partials/footer.blade.php



<div class="footer">
    <h1>Footer</h1>
</div>

Then we will include the partials in the layout:

views/layouts/welcome.blade.php:



<body>
        <div class="contain">
        @include('layouts.partials.navbar')

        <div class="flex">
        @include('layouts.partials.sidebar')

        <div class="content">
           <h2> @yield('heading') </h2>

            @yield('content')
        </div>
        </div>
            @include('layouts.partials.footer')
        </div>
    </body>

This reduces the amount of code we write in the layout file.

Conclusion

The views folder is one of the most important parts of the Laravel framework, and is also an important part of the MVC trilogy.

Properly organizing your view templates doesn’t just make the code more understandable to yourself, but also to your fellow developer colleagues.

In this article we saw different ways to organize views in Laravel. This included folder-based organization, proper use of layouts and breaking down the UI into reusable partials.

Thanks for reading along.

You can also find me on Twitter .

DEV Community: Kingsley Ubah

How to Scrape Amazon Product Reviews Behind a Login

Step 1: Prerequisites and Project Setup

Step 2: Access the Public Page

Step 3: Scrape Behind the Login

Parse Review Data

Step 4: Export Reviews to CSV

Conclusion

react-tweet: Vercel’s New React Library for Embedding Tweets

Installing React Tweet

Embedding a Tweet

Benefits of using the react-tweet package to embed tweets

Rendering the Tweet in Light and Dark Mode

Customing the tweet’s style

A Better Way to Customize the Tweet

Conclusion

This Context API Mistake Ruins Your Whole React App (All Components Re-Render)

The Problem of Rerendering The Whole Application

The Solution is to Put The React Context in a Separate File

Conclusion

Stop Conditional Rendering in React Without Knowing This (&& and Ternary Operator)

The Problem With Using the Logical And (&&) for Conditional Rendering

Solution 1: Make Your Conditional Statement More Explicit

Solution 2: Use Exclamation Marks

Best Solution: Use the Ternary Operator

Conclusion

How To Build Custom, Reusable Web Components From Scratch

Setting up the web page

Creating a basic web component

Introducing Slots

Conclusion

How To Use The Next.js Link Component (with Examples)

Prerequisites

Introducing the Next.js Link Component

The Link Component Props

Required props

href

Optional props

as

passHref

prefetch

replace

scroll

locale

Conclusion

Getting Started With Freelance Writing

Get Specialized Knowledge

Start blogging

Understand the different writing styles

Learn at least the basics of SEO

Reach out to blogs and publications

Over to you

How to Build a Modern Image Slider with Swiper

Create Your Vue Application

Getting Started with Swiper JS in your Vue Project

1- Installation

2 - Building our Image Slider

3 - Adding Custom Navigation

Swiper JS vs Slick

1 - Creating single items

2 - Creating Multiple Items

Wrapping Up

How to Prevent Overflow Scroll in CSS

What is an Overflow?

HTML and CSS Code

CSS Overflow values

visible

hidden

scroll

auto

How to Easily Add a Map to Your Website in Under 10 Minutes

Getting Started

Adding a map

Adding markers to the map

Performing Fuzzy Search

Conclusion

Other links

Build a Chatbot with PHP, MySQL and AJAX in 10 minutes

Prerequisites

Create the bot page

`as`

`passHref`

`prefetch`

`replace`

`scroll`

`locale`