DEV Community: Samuel Peters

Building a Simple JQuery Carousel

Samuel Peters — Sat, 28 Oct 2023 12:06:13 +0000

Carousels also known as sliders or slideshows, are a popular way to display multiple images or content in a compact and visually appealing manner on a blog post. In this article, I'll guide you through the process of creating a simple carousel for your website, enhancing the user experience and engagement with your content.

Prerequisites

Before we begin, ensure you have the following resources ready:

A basic understanding of HTML, CSS, and JavaScript.
A set of images you want to feature in your carousel.
A text editor for code editing.

Step-by-Step Instructions

1. HTML Structure:

Start by setting up the HTML structure for your carousel. Create a new HTML file and add 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>Blog Post Carousel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="carousel-container">
        <div class="carousel">
            <div class="carousel-slide">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="carousel-slide">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="carousel-slide">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> <!-- jQuery Library -->
    <script src="script.js"></script>
</body>
</html>

Include jQuery CDN (Content Delivery Network)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

In code Above, we have the basic HTML structure with a container for the carousel and three slides, each containing an image.

2. CSS Styles (style.css):

Next, add some CSS styles to make your carousel look visually appealing. Create a new CSS file (style.css) and add the following code:

/* Add basic styling for the carousel */
.carousel-container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    flex: 0 0 100%;
}

img {
    max-width: 100%;
    height: auto;
}

These styles ensures that the images are responsive and visual appealing

3. JavaScript Functionality (script.js):

To enable navigation within the carousel, you'll need some JavaScript. Create a new JavaScript file (script.js) and add the following code:

const $carousel = $(".carousel");
    const $slides = $(".carousel-slide");
    let currentIndex = 0;

    function showSlide(index) {
        if (index < 0) {
            currentIndex = $slides.length - 1;
        } else if (index >= $slides.length) {
            currentIndex = 0;
        }

        $carousel.css("transform", `translateX(-${currentIndex * 100}%)`);
    }

    if ($nextButton.length && $prevButton.length) {
        $nextButton.click(function() {
            currentIndex++;
            showSlide(currentIndex);
        });

        $prevButton.click(function() {
            currentIndex--;
            showSlide(currentIndex);
        });
    }

 const autoAdvanceInterval = 3000; // Change slide every 3 seconds

    setInterval(function() {
        currentIndex++;
        showSlide(currentIndex);
    }, autoAdvanceInterval);

Outcome

Conclusion
Carousels are an excellent way to showcase images or content in an engaging and organized manner. Feel free to customize the images, styles, and functionality to match your blog's design and requirements. By following these steps, you can enhance your blog's visual appeal and provide a better user experience for your readers.

If you found the information valuable, please consider giving it a thumbs up by hitting the "Like" button and sharing it with your network.

Basic and Applied Research: A Friendly Guild

Samuel Peters — Wed, 25 Oct 2023 22:23:38 +0000

Have you ever wondered how the world around us works? Or how we can solve some of the biggest challenges facing humanity today? The answers to these questions lie in the world of research.

Research is the process of asking questions and obtaining answers. It's how we learn new things and solve problems. Research can be divided into two main types: basic and applied. In this article, I will explain what these types of research are, why they are important, and how they work together.

Basic Research: Driven by curiosity and the desire to understand the world around us, it's not about solving any particular problem but rather about expanding our knowledge of a specific topic. For example, basic research can help us comprehend how the human brain works, how the universe began, and how climate change affects the environment.

Basic research deals with "why" questions, as it seeks to understand the underlying reasons and causes behind an event. For example, why does the human brain function the way it does? Why did the universe originate with a big bang? Why does climate change occur?

Applied research: Focuses on solving real-world problems and utilizes key research findings to develop new products, services, or processes. For instance, applied research can aid in the development of new therapies, renewable energy products, or educational programs to enhance student learning.

Applied research deals with "what" questions because it aims to find solutions and applications to a problem. For example, what can we do to cure diseases? What can we do with clean energy? What can we teach students to enhance their learning?

Both basic and applied research are essential for improvement. Together, they help us comprehend the world around us and address the challenges we face.

Here are some characteristics of basic and applied research:

Characteristic	Basic research	Applied research
Purpose	To advance knowledge	To solve a specific problem
Focus	Theoretical	Practical
Timeframe	Long-term	Short-term
Funding	Typically comes from government or private foundations	Typically comes from businesses, government agencies, or non-profit organizations
Examples	Developing new theories about how the mind works	Developing new drugs to treat diseases

Enjoyed this content? Don't forget to give it a thumbs up 👍 and share it with your friends if you found it valuable. Your support helps us reach more people and continue sharing great content!"

What Happened When I Decided to Contribute to One Open Source Project Every Day for a Month

Samuel Peters — Thu, 19 Oct 2023 01:44:00 +0000

Open source software is software that is used, modified, and shared freely. It is a team of developers who work together to develop and improve software. Many of the products and services we rely on every day use open-source software, such as the Linux operating system, the Android mobile operating system, and the Firefox web browser.

I am a software developer with an interest in open-source software. I’ve supported open-source projects for years, but this was my first Hacktoberfest. Hacktoberfest is an annual event that encourages developers to contribute to open-source projects during the month of October. It’s a great way to support the open-source community and get some cool swag.

In this blog post, I will share my experience contributing to one open-source project a day for a month.

I will talk about why I decided to do this challenge, how I found and chose the projects I contributed to, what I learned and did well this month, what challenges and challenges I faced, and what benefits and rewards I gained.

Why I Decided to Contribute to One Open Source Project Every Day for a Month

I decided to contribute to one open source project a day for a month because I wanted to challenge myself and improve my skills as a developer. I wanted to explore new technologies and frameworks that I didn’t know about. And of course, I wanted to have fun and meet new people who also loved open source software.

I thought contributing to one open source project a day would be a great way to achieve these goals. By doing this, I would expose myself to different projects, problems, and solutions.
I will also learn from other developers who have more experience or knowledge than me. And I will have a positive impact on the projects I’ve helped with.

How I Found and Chose the Projects That I Contributed To

Finding and choosing the projects that I contributed to was one of the most challenging parts of this month. There are so many great open source projects out there, but not all of them are suitable or interesting for me.

To find the projects that I contributed to, I used various sources and methods, such as:

Browsing GitHub’s Explore page , which showcases trending and featured repositories.
Searching GitHub’s Topics page, which categorizes repositories by topics such as languages, frameworks, platforms, etc.
Following hashtags such as #Hacktoberfest3 or #opensource on Twitter or other social media platforms.
Reading blogs or newsletters that feature or review open-source projects.
Asking for recommendations from friends or colleagues who are also into open-source software.

To choose the projects that I contributed to, I used some criteria and filters, such as:

The project should be related to web development, which is my main area of interest and expertise.
The project should have a clear README file that explains what it is, how it works, how to set it up, how to contribute, etc.
The project should have some issues labeled as “good first issue”, “beginner-friendly”, or “hacktoberfest”, which indicate that they are suitable for new or inexperienced contributors.
The project should have an active and welcoming community that responds to questions and feedback.

Using these sources, methods, criteria, and filters, I was able to find and choose 31 different open-source projects that matched my preferences and goals.

What I Learned and Improved During This Month

During this month, I learned and improved a lot as a developer. Here are some of the skills and technologies that I learned or improved:

Python: Python is one of my favorite programming languages. It’s versatile, powerful, and easy to learn. During this month, I contributed to several Python-based projects, such as:

A new Python framework for movie rating applications This project taught me how to use FastAPI, a modern web framework for building fast and scalable web applications.
A Python script for dictionary retrieval This project taught me how to use an open-source dictionary library for retrieving meaning, anonymity, and synonyms for a word.

React: is another programming language that I love. It’s a JavaScript library for building user interfaces. During this month, I contributed to several React-based projects

Debugging: Debugging is the process of finding and fixing errors in code. Debugging is an essential skill for any developer, as it helps to improve the quality and functionality of the code. During this month, I improved my debugging skills by using various tools and techniques, such as:

Using the browser’s developer tools to inspect the elements, console, network, sources, etc. of a web page or app.
Using breakpoints to pause the execution of the code and examine the values of variables, expressions, etc.
Using print statements to display the values of variables, expressions, etc. in the console or terminal.
Using logging libraries to record the events and errors that occur during the execution of the code.

Code Review: Code review is the process of examining and improving code written by others. Code review is an important skill for any developer, as it helps to improve the readability, maintainability, and security of the code. During this month, I improved my code review skills by using various tools and techniques, such as:

Using GitHub’s pull request feature to propose changes to a project’s code and get feedback from other contributors.
Using GitHub’s code review feature to comment on specific lines or sections of code and suggest improvements or corrections.
Using GitHub’s merge conflict feature to resolve conflicts that occur when two or more contributors make changes to the same file or line of code.
Using GitHub’s code formatting feature to automatically format the code according to a predefined style guide.

What Challenges and Difficulties I Faced During This Month

Despite all the learning and improvement I experienced this month, I also faced some challenges and difficulties. Here are some of them:

Finding time: Finding time to contribute to one open source project every day was not easy. I had to balance my school, personal life, and other commitments. Sometimes I had to stay up late or wake up early to finish my contributions. Sometimes I had to sacrifice some leisure activities or social events to meet my deadline.
Finding motivation: Finding motivation to contribute to one open source project every day was also difficult. Sometimes I felt bored or tired of working on similar types of projects or problems. Sometimes I have been discouraged by the complexity of certain tasks or issues. At times, I felt overwhelmed or intimidated by the amount or quality of work by other contributors.
Learning new things: Learning new things was both fun and challenging. Sometimes I had to learn new technologies or frameworks that I didn't. Sometimes I had to learn new concepts or techniques that I didn’t understand. Sometimes I had to learn new good practices or values that I didn’t follow.

What Benefits and Rewards I Gained from This Month

Despite all the challenges and difficulties that I faced during this month, I also gained some benefits and rewards. Here are some of them:

Improving my skills: Improving my skills was one of the main benefits that I gained from this month. By contributing to different types of projects and problems, I was able to improve my skills in various areas, such as Python, React, debugging, code review, etc. I was also able to learn new skills that I didn’t have before, such as FastAPI, etc.
Making an impact: Making an impact was another benefit that I gained from this month. By contributing to different types of projects and problems, I was able to make a positive impact on the projects that I contributed to. I was also able to make a positive impact on the users who use these projects.
Meeting new people: Meeting new people was another benefit that I gained from this month. By contributing to different types of projects and problems, I was able to meet new people who share my passion and interest in open-source software. I was also able to learn from them, get feedback from them, and collaborate with them.

Conclusion

In summary, these initial 18 days of my open-source journey have been enlightening, and filled with challenges, growth, and a heightened dedication to the open-source community. though I have completed my Hacktoberfest challenge and here are verify able PR link.

Built a movie rater app with FastApi:

Designed an issue template:

Fixed button functionality:

Resolved:

Improved the read for developer to directly understand:

🌟🚀 #OpenSource #GrowthMindset #opensourcecontributor #hacktober23

How to Use Robots.txt to Improve Your Website's SEO

Samuel Peters — Fri, 19 May 2023 11:11:23 +0000

Introduction
Have you ever wondered how search engines decide what content to show in their search results? Well, websites are regularly scanned and indexed by search engine crawlers. But what if you want some parts of your website to stay private or not be included in search results? This is where the Robots.txt file comes into play. In this blog post, we'll explore what the Robots.txt file is, why it matters, and how it gives website owners control over what search engines can access.

What is robots.txt?

A robots.txt file is a text file that tells web crawlers, such as Googlebot, which parts of your website they are allowed to crawl and index. It is a way for website owners to control how their website is crawled and indexed by search engines furthermore It communicates directives to web crawlers about which parts of the website they are allowed to access and index.

Why use robots.txt?

There are several reasons why you might want to use a robots.txt file.

Privacy and Security: Robots.txt plays a crucial role in maintaining privacy and security for a website. It helps prevent sensitive or confidential information from being accessed by search engine crawlers, ensuring that only intended audiences can access certain parts of the website.
Preventing Duplicate Content: If multiple versions of a website exist (e.g., www.example.com and example.com), search engines might consider them as separate entities and index both versions. By utilizing Robots.txt, website owners can specify which version should be crawled and indexed, avoiding duplicate content issues.
Resource Optimization: Some parts of a website, such as large media files or dynamically generated pages, may consume significant server resources. By disallowing search engine crawlers from accessing these resource-intensive areas, website owners can improve server performance and enhance the overall user experience.
Proper Implementation: To effectively utilize Robots.txt, it's essential to follow best practices and avoid common mistakes. Some key considerations include ensuring the Robots.txt file is accessible, using correct syntax, and regularly reviewing and updating the directives to align with website changes.

How to create a robots.txt file

Robots.txt uses a straightforward syntax and specific directives to instruct search engine crawlers. The two main directives are "Disallow" and "Allow." The "Disallow" directive tells crawlers which areas of the site to avoid, while the "Allow" directive provides exceptions to the "Disallow" rule.
example

User-agent: Googlebot
Allow: /images

Best practices for robots.txt files

Here are some best practices for creating and using robots.txt files:

Keep your robots.txt file simple. There is no need to add complex rules to your robots.txt file. The simpler the file, the easier it will be for web crawlers to understand.

Use absolute paths. When specifying paths in your robots.txt file, use absolute paths, not relative paths. Absolute paths start with a forward slash (/), while relative paths do not.

Update your robots.txt file regularly. If you add new pages to your website, or if you change the structure of your website, be sure to update your robots.txt file accordingly.

Conclusion: The Robots.txt file is a valuable tool that empowers website owners to control how search engine crawlers access and index their content. By implementing a well-structured and properly maintained Robots.txt file, you can safeguard sensitive information, prevent duplicate content issues, optimize server resources, and enhance your website's overall performance and visibility in search engine results.

Remember, while Robots.txt is a powerful tool, it is not foolproof. It relies on the cooperation of search engine crawlers to abide by the directives. Therefore, it's important to combine the use of Robots.txt with other appropriate security measures and SEO strategies to fully protect and optimize your website.

By understanding and effectively utilizing Robots.txt, you can take control of your website's visibility and ensure that it aligns with your specific needs and objectives.

Building and Publishing a React Component with Vite and NPM

Samuel Peters — Wed, 03 May 2023 02:38:59 +0000

React has become one of the most popular front-end frameworks due to its component-based architecture, and with the ease of sharing packages through Npm, building and sharing your own React components has never been easier.
In this guide, we'll walk you through the steps of building your own React component from scratch, using the Vite-React framework to streamline the process. We'll cover everything from setting up your development environment to publishing your component on NPM, ensuring that it is both functional and accessible for other developers to use.

Prerequisites

Here are some prerequisites you need to have before diving into building a React component with Vite and publishing it on npm:

Basic knowledge of React, JavaScript, and NPM.
Node.js installed on your machine.
An N.P.M account to publish your package.
A GitHub Account for Hosting your Hosting your code repository

Getting Started

To get started, we'll create a new React project using Vite. Vite is a build tool that is optimized for frontend development, and it provides a fast and easy way to set up a new React project.
First, let's create a new directory for our project and navigate to it in the terminal.

First Step is to initialize the Vite-React package in our project directory by running the following command:

yarn create Vite react-library-scaffold

follow the prompt using the arrow key to navigate to react and javascript

Next navigate to the newly created Folder and run the yarn to install the react dependencies

On completion your file structure should look like this

Next step is to add more information to the package.Json file and modify our vite.config.js files open your terminal and type npm init and enter the name of the library, descriptions, authors ... the new code block should look like this.

{
  "name": "react-library-scafold",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  },
  "description": "A react-Library-Scaffold",
  "main": "vite.config.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Petsamuel/react-library-scaffold.git"
  },
  "keywords": [
    "react",
    "components"
  ],
  "author": "Peter Samuel",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Petsamuel/react-library-scaffold/issues"
  },
  "homepage": "https://github.com/Petsamuel/react-library-scaffold#readme"
}

Add this Block code to your Package.json
it's specifying where the build folder needed for the component should be stored.

 "main": "./dist/react-library-scaffold.umd.js",
  "module": "./dist/react-library-scaffold.es.js",
  "exports": {
    ".": {
      "import": "./dist/react-library-scaffold.es.js",
      "require": "./dist/react-library-scaffold.umd.js"
    }
  },

Next step is to install test dependencies vite, react-test-renderer

npm install @testing-library/dom @testing-library/react c8 eslint eslint-plugin-react jsdom react-test-renderer vitest --save-dev

then add the test script to your package.json file

Next step is configuring the Vite.config.jsx file

add this block of code there

import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve("src", 'src/components/index.jsx'),
      name: 'react-library-scaffold',
      fileName: (format) => `react-library-scaffold.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
  plugins: [react()]
})

Make sure you replace name: 'react-library-scaffold' with the name of your component

Likewise, make sure that react-library-scaffold in the filename value is changed to the name of your component

Configure Testing

create a vitest.config.js file in your root folder and add the following code

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    globals: false,
    environment: 'jsdom'
  }
})

Creating Components along with Tests Snapshots

The entry point for your component is /src/components/index.jsx.

For now you we want to create a dummy HelloWorld component as in the examples below, then once the development environment is set up, come back and build your component.

Create your component in /src/component/index.jsx. Here's a very simple example:

import React from 'react'

export default function Greeting(props) {
  const {
    message= 'World'
  } = props

  return (
    <div>Hello, {greeting}!</div>
  )
}

Add test

import React from 'react'
import renderer from 'react-test-renderer'
import { describe, expect, it} from 'vitest'
import Greeting from './index'

describe('Greeting component', () => {
  it('Greeting component renders correctly', () => {
    const component = renderer.create(
      <Greeting/>
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })

  it(' prop working', () => {
    const component = renderer.create(
      <Greeting message={'Universe'} />
    )

    const tree = component.toJSON()

    expect(tree).toMatchSnapshot()
  })
})

You can run your tests by typing:

npm test

Or you can run tests and set a watch to re-run tests when anything changes.

 npm run watch

now open the main.jsx and create a component
sample code

import React from 'react'
import Greeting from './components'

const App = () => {
  return (
    <Greeting message={'Universe'} />
  )
}

export default App

now run the development server using
npm run dev

Writing a Customized Readme

To make it easy for other developers to use your component, it's crucial to create a high-quality README file that contains comprehensive documentation, usage examples, and highlights the features and advantages of using your component.

Open /src/README.md

Create your README file using markdown.

Pushing to a GitHub repository:

Create a new repository on GitHub.
Initialize a Git repository in your project folder using git init.
Add all files to the repository using git add ..
Commit your changes using git commit -m "Initial commit".
Set the remote origin to your GitHub repository using git remote add origin <repository-url>.
Push your code to the repository using git push -u origin main.

Sure, adding a quick guide on creating an npm account (or Yarn, which uses npm's registry) can be helpful, especially for beginners. Here’s how to add that section to your guide.

Creating an Account on npm (or Yarn)

To publish your React component on npm, you’ll first need an npm account. Here’s a quick walkthrough on setting one up:

Step 1: Sign Up for an npm Account

Go to the npm website.
Click Sign Up in the top-right corner.
Fill out the required information, including your username, password, and email address.
Click Create an account and confirm your email if prompted.

Step 2: Login on the Command Line

Once your account is created, you’ll need to log in through the command line:

Open your terminal.
Run the following command:

   npm login

Enter your npm username, password, and email address when prompted.

After successfully logging in, your npm account is linked to your terminal session, and you're ready to publish packages.

Note: Yarn users can also follow the same steps, as Yarn uses npm’s registry. So logging in to npm will allow you to publish packages via either npm or Yarn.

Now, with your npm account set up, you can continue to the next step in the guide: publishing your component.

Publishing to npm

We are finally ready to publish our component to npm.

To ensure a smooth publishing process, it is important to follow this checklist:

Verify that the version number in your package.json file is accurate and adheres to the semantic versioning convention. Each npm publication should have a unique version number.

Ensure all tests pass:

npm test

Create the build files:

npm run build

UMD and ESM module formats are created and placed in the /dist folder. Again, note that React is not bundled in alongside your component. Just your component code and any dependencies.

Ensure you are logged into npm or yarn. If not type:

 npm login or yarn login

To Publish your component

 npm publish or yarn publish

And all done!
All the code in this guide is available in the repository on Github.